["4.7 Float Windows via VDI"]
# Float Windows via VDI
FloatWindow System is a GUI tool for flexable GUI elements on web interface using javascript.
FloatWindow Windows can be resized, hidden, drag and move or closed using the elements on the 
window body. And the area that show the modules is an embedded iframe.

To develop a module with FloatWindow support, please add the following files under the base
directory of your module. Take "Audio Module" as an example. Under /Audio directory, there are
two files related to FloatWindow System.

> /Audio/FloatWindow.js  
> /Audio/FloatWindow.php

You can find the FloatWindow.js in some build in modules or in the system script folder under
the root of AOB's directory (i.e. AOB/script). It is recommended to copy a FloatWindow.js into
your module directory for the ease of reference.

After placing the two modules in the base directory of your module, you can find your module is
being scanned and added to the "New Float Windows" tool bar on the bottom of the function bar with
the "+" icon.

![](../../img/beta/4.7%20Float%20Windows%20via%20VDI/New_Float_Windows.png)

Next, edit the FloatWindow.php and add the following javascript script into the PHP script.
```javascript
<script src="FloatWindow.js"></script>
<script>
var fw = new FloatWindow("startingPath","ModuleName","ModuleIcon", uuid);
fw.launch();
</script>
```
| Variable      | Meaning       |Example Value|
| ------------- |:-------------:| -----:|
| startingPath  | The starting path of the FloatWindow iframe src | index.php |
| ModuleName      | The window title that the user is launching   | New Window |
| ModuleIcon | Icon that will be used in the window title      |   Desktop |
| uuid | UUID of this window. |   10  |
<sub>See a list of usable icons [here](https://tocas-ui.com/elements/icon/)</sub>

<mark>Two FloatWindow with the same uuid will lead to overwriting the old windows.</mark> Hence, if you do want
your module to be able to launch multiple copies in the same time, please use random number or system
time as the uuid of the FloatWindow of your module instead.

Here is an example from "Audio Module". In which this module allow launching of multiple windows.
```javascript
<script src="FloatWindow.js"></script>
<script>
var uid = Math.floor((Math.random() * 100) + 1);
var fw = new FloatWindow("index.php","Audio","music", uid);
fw.launch();
</script>
```

The constructor for the FloatWindow class is as follow:
```javascript
	constructor(src, title, iconTag="folder", uid ,ww=undefined, wh=undefined, posx=undefined, posy=undefined, resizable=true)  
	
	//src: The src value of FloatWindow's iframe  
	//title: The title of the FloatWindow  
	//iconTag: The icon class of the FloatWindow title  
	//uid: The unique id of the current window. Duplicated uid will overwrite the previous window.
	//ww: Window Width of the starting FloatWindow, left empty for default 720px  
	//wh: Window Height of the starting FloatWindow, left empty for default 480px  
	//posx: Starting position of the FloatWindow, left empty for default left: 100px  
	//posy: Staring position of the FloatWindow, left empty for default top: 100px  
	//resizable: Set the window is resizable or not. Left empty for resizable=true;
```

The upper limit of each tab of one VDI can launch at most 11 FloatWindows. Launching will return false
when the user/ module trying to launch more than 11 FloatWindows to prevent performance dropping.