forked from Ezelia/EZGUI
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new examples (relative positionning, checkbox, radio and slider)
- Loading branch information
Alaa-eddine
committed
May 4, 2015
1 parent
0ba1441
commit bd1128c
Showing
5 changed files
with
412 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Window Example</title> | ||
<script src="../../js/pixi3.dev.js"></script> | ||
<script src="../../dist/EZGUI.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
var guiObj = { | ||
|
||
//this ID must be unique, it'll help you easily access the gui component throught EZGUI.components.myWindow | ||
id: 'myWindow', | ||
|
||
//this the component ID, EZGUI define those components: Window, Button, Checkbox, Slider, Radio... | ||
//but you can create your own components or extend existing | ||
component: 'Window', | ||
|
||
//create a header and use blueheader skin | ||
header: { skin: 'blueheader', position: { x: 0, y: 0 }, height: 40, text: 'Drag from header' }, | ||
|
||
//when a header is defined, and the window is draggable, | ||
//the drag handler is set to the header | ||
draggable: true, | ||
|
||
//This is the padding space from the component borders | ||
padding: 4, | ||
|
||
//component position relative to parent | ||
position: { x: 10, y: 10 }, | ||
|
||
|
||
width: 500, | ||
height: 500, | ||
|
||
//The layout define how the children are positioned | ||
layout: [3, 3], | ||
|
||
|
||
//Some components like Window support children | ||
//in this case, children node will be parsed and components added to the parent | ||
//you can also add children programmatically | ||
children: [ | ||
{ text: 'child T L', component: 'Window', position: 'top left', width: 120, height: 100 }, | ||
{ text: 'child T C', component: 'Window', position: 'top center', width: 120, height: 100 }, | ||
{ text: 'child T R', component: 'Window', position: 'top right', width: 120, height: 100 }, | ||
{ text: 'child C L', component: 'Window', position: 'center left', width: 120, height: 100 }, | ||
{ text: 'child C', component: 'Window', position: 'center', width: 120, height: 100 }, | ||
{ text: 'child C R', component: 'Window', position: 'center right', width: 120, height: 100 }, | ||
{ text: 'child B L', component: 'Window', position: 'bottom left', width: 120, height: 100 }, | ||
{ text: 'child B C', component: 'Window', position: 'bottom center', width: 120, height: 100 }, | ||
{ text: 'child B R', component: 'Window', position: 'bottom right', width: 120, height: 100 }, | ||
|
||
] | ||
} | ||
|
||
|
||
var renderer = PIXI.autoDetectRenderer(820, 800); | ||
document.body.appendChild(renderer.view); | ||
var stage = new PIXI.Stage(0x000000); | ||
|
||
|
||
var guiContainer; | ||
|
||
//Set EZGUI renderer | ||
EZGUI.renderer = renderer; | ||
|
||
//load EZGUI themes | ||
//here you can pass multiple themes | ||
EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () { | ||
|
||
|
||
//create the gui | ||
//the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field | ||
guiContainer = EZGUI.create(guiObj, 'kenney'); | ||
|
||
|
||
stage.addChild(guiContainer); | ||
|
||
}); | ||
|
||
|
||
|
||
|
||
requestAnimationFrame(animate); | ||
//sprite.setTexture(texture2); | ||
|
||
function animate() { | ||
requestAnimationFrame(animate); | ||
renderer.render(stage); | ||
} | ||
|
||
|
||
</script> | ||
<script src="../../js/ga.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>EZGUI Checkbox Example</title> | ||
<script src="../../js/pixi3.dev.js"></script> | ||
<script src="../../dist/EZGUI.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
var guiObj = { | ||
|
||
//this ID must be unique, it'll help you easily access the gui component throught EZGUI.components.myWindow | ||
id: 'myWindow', | ||
|
||
//this the component ID, EZGUI define those components: Window, Button, Checkbox, Slider, Radio... | ||
//but you can create your own components or extend existing | ||
component: 'Window', | ||
|
||
//create a header and use blueheader skin | ||
header: { skin: 'blueheader', position: { x: 0, y: 0 }, height: 60, text: 'my window' }, | ||
|
||
//when a header is defined, and the window is draggable, | ||
//the drag handler is set to the header | ||
draggable: true, | ||
|
||
//This is the padding space from the component borders | ||
padding: 4, | ||
|
||
//component position relative to parent | ||
position: { x: 10, y: 10 }, | ||
|
||
|
||
width: 500, | ||
height: 500, | ||
|
||
//The layout define how the children are positioned | ||
layout: [1, 5], | ||
|
||
|
||
children: [ | ||
{ id:'chk1', text: 'checkbox #1', component: 'Checkbox', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'chk2', text: 'checkbox #2', component: 'Checkbox', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'chk3', text: 'checkbox #3', component: 'Checkbox', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'chk4', text: 'checkbox #4', component: 'Checkbox', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'chk5', text: 'checkbox #5', component: 'Checkbox', position: 'center left', width: 40, height: 40 }, | ||
|
||
] | ||
} | ||
|
||
|
||
var renderer = PIXI.autoDetectRenderer(820, 800); | ||
document.body.appendChild(renderer.view); | ||
var stage = new PIXI.Stage(0x000000); | ||
|
||
|
||
var guiContainer; | ||
|
||
//Set EZGUI renderer | ||
EZGUI.renderer = renderer; | ||
|
||
//load EZGUI themes | ||
//here you can pass multiple themes | ||
EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () { | ||
|
||
|
||
//create the gui | ||
//the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field | ||
guiContainer = EZGUI.create(guiObj, 'kenney'); | ||
|
||
|
||
stage.addChild(guiContainer); | ||
|
||
}); | ||
|
||
|
||
|
||
|
||
requestAnimationFrame(animate); | ||
//sprite.setTexture(texture2); | ||
|
||
function animate() { | ||
requestAnimationFrame(animate); | ||
renderer.render(stage); | ||
} | ||
|
||
|
||
</script> | ||
<script src="../../js/ga.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>EZGUI Radio Example</title> | ||
<script src="../../js/pixi3.dev.js"></script> | ||
<script src="../../dist/EZGUI.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
var guiObj = { | ||
|
||
//this ID must be unique, it'll help you easily access the gui component throught EZGUI.components.myWindow | ||
id: 'myWindow', | ||
|
||
//this the component ID, EZGUI define those components: Window, Button, Checkbox, Slider, Radio... | ||
//but you can create your own components or extend existing | ||
component: 'Window', | ||
|
||
//create a header and use blueheader skin | ||
header: { skin: 'blueheader', position: { x: 0, y: 0 }, height: 60, text: 'my window' }, | ||
|
||
//when a header is defined, and the window is draggable, | ||
//the drag handler is set to the header | ||
draggable: true, | ||
|
||
//This is the padding space from the component borders | ||
padding: 4, | ||
|
||
//component position relative to parent | ||
position: { x: 10, y: 10 }, | ||
|
||
|
||
width: 500, | ||
height: 600, | ||
|
||
//The layout define how the children are positioned | ||
layout: [2, 5], | ||
|
||
|
||
children: [ | ||
{ id: 'radio1', text: 'radio #1', component: 'Radio', group: 'odd', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'radio2', text: 'radio #1', component: 'Radio', group: 'even', position: 'center left', width: 40, height: 40 }, | ||
|
||
{ id: 'radio3', text: 'radio #2', component: 'Radio', group: 'odd', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'radio4', text: 'radio #2', component: 'Radio', group: 'even', position: 'center left', width: 40, height: 40 }, | ||
|
||
{ id: 'radio5', text: 'radio #3', component: 'Radio', group: 'odd', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'radio6', text: 'radio #3', component: 'Radio', group: 'even', position: 'center left', width: 40, height: 40 }, | ||
|
||
{ id: 'radio7', text: 'radio #4', component: 'Radio', group: 'odd', position: 'center left', width: 40, height: 40 }, | ||
{ id: 'radio8', text: 'radio #4', component: 'Radio', group: 'even', position: 'center left', width: 40, height: 40 }, | ||
|
||
{ id: 'myButton', skin:'bluebutton', text: 'Click to \nget selected', component: 'Button', position: 'center left', width: 200, height: 80 }, | ||
{ id: 'myLabel', text: 'none', component: 'Label', position: 'center left', width: 120, height: 60 }, | ||
|
||
] | ||
} | ||
|
||
|
||
var renderer = PIXI.autoDetectRenderer(820, 800); | ||
document.body.appendChild(renderer.view); | ||
var stage = new PIXI.Stage(0x000000); | ||
|
||
|
||
var guiContainer; | ||
|
||
//Set EZGUI renderer | ||
EZGUI.renderer = renderer; | ||
|
||
//load EZGUI themes | ||
//here you can pass multiple themes | ||
EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () { | ||
|
||
|
||
//create the gui | ||
//the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field | ||
guiContainer = EZGUI.create(guiObj, 'kenney'); | ||
|
||
|
||
EZGUI.components.myButton.on('click', function () { | ||
//static method getSelected of Radio component | ||
var selectedOddRadio = EZGUI.radioGroups['odd'].selected; | ||
var selectedEvenRadio = EZGUI.radioGroups['even'].selected; | ||
|
||
var txt1 = selectedOddRadio ? selectedOddRadio.text : '--'; | ||
var txt2 = selectedEvenRadio ? selectedEvenRadio.text : '--'; | ||
|
||
EZGUI.components.myLabel.text = txt1 + ' ' + txt2; | ||
}); | ||
|
||
stage.addChild(guiContainer); | ||
|
||
}); | ||
|
||
|
||
|
||
|
||
requestAnimationFrame(animate); | ||
//sprite.setTexture(texture2); | ||
|
||
function animate() { | ||
requestAnimationFrame(animate); | ||
renderer.render(stage); | ||
} | ||
|
||
|
||
</script> | ||
<script src="../../js/ga.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.