
## new GUIButton(id, options, guimanager, callback, append)
Creates a new GUIButton

### Parameters
Name | Type | Description
---|---|---
**id** | string | The id and name element
**options** | json | Options of element
**guimanager** | GUIManager | The gui manager
**callback** | function | Trigger function by click (optional)
**append** | bool | is added to the &lt;body&gt;. =&gt; True by default (optional)
---

## Options

* **w**: width of button (in pixel)
* **h**: height of button (in pixel)
* **x**: position left of button (in pixel)
* **y**: position top of button (in pixel)
* **value**: value text button (string) =&gt; "Ok" by default
* **backgroundImage**: image background of button (string) =&gt; null by default
* **backgroundColor**: color background of button (string) =&gt; "rgba(0.5, 0.5, 0.5, 0.6)" by default
* **borderRadiusButton**: radius border of button (string)  =&gt; "10px" by default
* **borderButton**: border of button (string)  =&gt; "2px solid black" by default
* **colorText**: color text of button (string)  =&gt; "black" by default
* **zIndex**: depth of the element (int) =&gt; 1 by default
* **tabindex**: Tab order of the field.

## Methods

### setVisible(bool, fade) → void
Set this GUI element to visible or invisible

### isVisible() → void
Returns element if is visible or no

### dispose() → void
Dispose the GUIButton, and delete element.



## new GUICheckbox(id, options, guimanager, callback, append)
Creates a new GUICheckbox

### Parameters
Name | Type | Description
---|---|---
**id** | string | The id and name element
**options** | json | Options of element
**guimanager** | GUIManager | The gui manager
**callback** | function | Trigger function by click (optional)
**append** | bool | is added to the &lt;body&gt;. =&gt; True by default (optional)
---

## Options

* **x**: position left of checkbox (in pixel)
* **y**: position top of checkbox (in pixel)
* **size**: size of checkbox (float) =&gt; "1.0" by default
* **zIndex**: depth of the element (int) =&gt; 1 by default
* **tabindex**: Tab order of the field.

## Methods

### isChecked() → void
return if element is checked

### setChecked(value) → void
check element

### setVisible(bool, fade) → void
Set this GUI element to visible or invisible

### isVisible() → void
Returns element if is visible or no

### dispose() → void
Dispose the GUICheckbox, and delete element.



Library to display a GUI game as a layer on top of the canvas HTML/CSS.

- [Depot](https://github.com/dad72/CastorGUI)
- [Documentation](/toolsAndResources/castorGUI)
- The maintenance of the CastorGUI extension is the responsibility of the author.

## Features:

Select or create themes.

Create GUI (element html5 and css3):

- texture
- text
- textLink
- label
- window draggable (with title & button close)
- dialog (with button close)
- panel (simple dialog without button close)
- button
- slider
- progress
- meter (jauge de measure)
- select color (with compatitility IE and Edge)
- spinner
- radio button
- checkbox
- textfield
- textarea
- fieldset
- select with options
- system of database (localStorage and sessionStorage)

## Quick overview of use GUI

We must create a GUIManager that allows to recover the origin of the canvas and provides other basic thing.
A GUIManager can have a CSS that Formatted anything you want to customize your GUI.
You can also options to add a theme in the third parameter.

```javascript
let canvas = document.getElementById("game");
let css = "button {cursor:pointer;}";
let options = { themeRoot: "../style/", themeGUI: "default", pixel: false };
let guisystem = new GUIManager(canvas, css, options);
```

Then we create interfaces items. eg textures and dialog with text:

```javascript
let myFunction = function () {
  alert("Yes, this work!");
};
let guiTexture = new GUITexture("life", "data/image.png", { w: 50, h: 50, x: 10, y: 0 }, guisystem, myFunction);

let optionsDialog = { w: guisystem.getCanvasSize().width - 20, h: 100, x: 8, y: guisystem.getCanvasSize().height - 110 };
let dialog = new GUIDialog("dialog", optionsDialog, guisystem);
dialog.setVisible(true);

let text = new GUIText("textDialog", { size: 15, text: "Display text here" }, guisystem, false);
dialog.add(text);
```

That's it. Everything works the same way with the same simplicity.

Demo PG: <Playground id="#S34THY#55" title="Castor GUI Playground Demo" description="Basic demo for showing the Castor GUI in action."/>

## For use Database

```javascript
let db = new DataBase(false); // true if use sessionStorage else use localStorage (stockage temporary)
db.addTable("user"); // create table
db.createField("user", "member", { pseudo: "dad72" }); // create field

db.selectItem("user", "member", "pseudo"); // return dad72
db.updateItem("user", "member", "pseudo", "Romeo"); // update pseudo
db.selectItem("user", "member", "pseudo"); // return Romeo

//if delete table:
db.deleteTable("member");
// if delete database:
db.deleteDataBase();
```

Demo PG: <Playground id="#S34THY#57" title="Castor GUI database Demo" description="Basic demo for using Castor GUI with a database."/>


Name	Type	Description
Name id	Type string	Description The id and name element
Name options	Type json	Description Options of element
Name guimanager	Type GUIManager	Description The gui manager
Name callback	Type function	Description Trigger function by click (optional)
Name append	Type bool	Description is added to the <body>. => True by default (optional)