Skip to content

Commit

Permalink
Added new examples (relative positionning, checkbox, radio and slider)
Browse files Browse the repository at this point in the history
  • Loading branch information
Alaa-eddine committed May 4, 2015
1 parent 0ba1441 commit bd1128c
Show file tree
Hide file tree
Showing 5 changed files with 412 additions and 0 deletions.
97 changes: 97 additions & 0 deletions examples/01-window/6-layout-relative-positions.html
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>
90 changes: 90 additions & 0 deletions examples/03-checkbox/1-list.html
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>
110 changes: 110 additions & 0 deletions examples/04-radio/1-list.html
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>
Loading

0 comments on commit bd1128c

Please sign in to comment.