preview UIPeriodicTable

UIPeriodicTable/AtomicExample.json

@@ -0,0 +1,4 @@
+{
+    "name": "UI Periodic Table",
+    "desc" : "Example of using all UI Widgets."
+}

UIPeriodicTable/JavaScript/Resources/Components/Spinner.js

@@ -0,0 +1,18 @@
+"atomic component";
+
+//define inspector fields
+var inspectorFields = {
+    //value speed will be able to be edited from editor
+    //default value sets to the 1.0, so speed has a number type
+    speed: 1.0
+};
+
+exports.component = function(self) {
+
+    //update function calls each frame
+    self.update = function(timeStep) {
+        //rotate node around Y axis
+        self.node.yaw(timeStep * 75 * self.speed);
+    };
+
+};

UIPeriodicTable/JavaScript/Resources/Components/code_table.js

@@ -0,0 +1,50 @@
+'use strict';
+
+exports.init = function(mylayout,mylogger) {
+
+    var maintb = mylayout.getWidget("maintabs");
+    var acttb = mylayout.getWidget("primarytabs");
+    var semitb = mylayout.getWidget("moretabs");
+    var viewtb = mylayout.getWidget("supporttabs");
+    var supporttb = mylayout.getWidget("atomictabs");
+
+// handle the periodic table jumps
+    mylayout.getWidget("A1").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(0);    };
+    mylayout.getWidget("A2").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(1);    };
+    mylayout.getWidget("A3").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(2);    };
+    mylayout.getWidget("A4").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(3);    };
+    mylayout.getWidget("A5").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(4);    };
+    mylayout.getWidget("A6").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(5);    };
+    mylayout.getWidget("A7").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(6);    };
+    mylayout.getWidget("A8").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(7);    };
+    mylayout.getWidget("A9").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(8);    };
+    mylayout.getWidget("B1").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(0);    };
+    mylayout.getWidget("B2").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(1);    };
+    mylayout.getWidget("B3").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(2);    };
+    mylayout.getWidget("B4").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(3);    };
+    mylayout.getWidget("B5").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(4);    };
+    mylayout.getWidget("B6").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(5);    };
+    mylayout.getWidget("B7").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(6);    };
+    mylayout.getWidget("B8").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(7);    };
+    mylayout.getWidget("B9").onClick = function () {        maintb.setCurrentPage(2);        semitb.setCurrentPage(8);    };
+    mylayout.getWidget("C1").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(0);    };
+    mylayout.getWidget("C2").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(1);    };
+    mylayout.getWidget("C3").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(2);    };
+    mylayout.getWidget("C4").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(3);    };
+    mylayout.getWidget("C5").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(4);    };
+    mylayout.getWidget("C6").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(5);    };
+    mylayout.getWidget("C7").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(6);    };
+    mylayout.getWidget("C8").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(7);    };
+    mylayout.getWidget("C9").onClick = function () {        maintb.setCurrentPage(3);        viewtb.setCurrentPage(8);    };
+    mylayout.getWidget("D1").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(0);    };
+    mylayout.getWidget("D2").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(1);    };
+    mylayout.getWidget("D3").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(2);    };
+    mylayout.getWidget("D4").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(3);    };
+    mylayout.getWidget("D5").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(4);    };
+    mylayout.getWidget("D6").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(5);    };
+    mylayout.getWidget("D7").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(6);    };
+    mylayout.getWidget("D8").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(7);    };
+    mylayout.getWidget("D9").onClick = function () {        maintb.setCurrentPage(4);        supporttb.setCurrentPage(8);    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uibargraph.js

@@ -0,0 +1,19 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uibargraphcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIBargraph action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uibargraph.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uibargraphlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIBargraph action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uibargraph.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uibutton.js

@@ -0,0 +1,44 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+
+    var button1 = mylayout.getWidget("demobutton");
+    button1.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button1.id + " was pressed ");
+    };
+
+    var button2 = mylayout.getWidget("buttonducky");
+    button2.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button2.id + " was pressed ");
+    };
+
+    var button3 = mylayout.getWidget("buttonready");
+    button3.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button3.id + " was pressed ");
+    };
+
+    var button4 = mylayout.getWidget("buttonatomic");
+    button4.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button4.id + " was pressed ");
+    };
+
+    var button7 = mylayout.getWidget("buttongreen");
+    button7.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button7.id + " was pressed ");
+    };
+
+    var button5 = mylayout.getWidget("uibuttoncode");
+    button5.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uibutton.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uibuttonlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIButton action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uibutton.ui.txt", mylayout );
+    };
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uicheckbox.js

@@ -0,0 +1,39 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("democheck");
+    button1.onClick = function () {
+        mylogger.setText( "UICheckBox action : " +  button1.id + " state is " + button1.value);
+    };
+
+    var button2 = mylayout.getWidget("checkset");
+    button2.onClick = function () {
+        mylayout.getWidget("democheck").value = 1;
+        mylogger.setText( "UICheckBox action : " +  button1.id + " set to 1");
+    };
+
+    var button3 = mylayout.getWidget("checkunset");
+    button3.onClick = function () {
+        mylayout.getWidget("democheck").value = 0;
+        mylogger.setText( "UICheckBox action : " +  button1.id + " set to 0");
+    };
+
+    var button4 = mylayout.getWidget("uicheckboxcode");
+    button4.onClick = function () {
+        mylogger.setText( "UICheckBox action : " +  button4.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicheckbox.js", mylayout );
+    };
+
+    var button5 = mylayout.getWidget("uicheckboxlayout");
+    button5.onClick = function () {
+        mylogger.setText( "UICheckBox action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uicheckbox.ui.txt", mylayout );
+    };
+
+
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiclicklabel.js

@@ -0,0 +1,24 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("somecheck");
+    button1.onClick = function () {
+        mylogger.setText( "UIClickLabel action : on " +  button1.id + " state is " + button1.value);
+    };
+
+    var button2 = mylayout.getWidget("uiclicklabelcode");
+    button2.onClick = function () {
+        mylogger.setText( "UIClickLabel action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiclicklabel.js", mylayout );
+    };
+
+    var button3 = mylayout.getWidget("uiclicklabellayout");
+    button3.onClick = function () {
+        mylogger.setText( "UIClickLabel action : " +  button3.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiclicklabel.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uicolorwheel.js

@@ -0,0 +1,24 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var cwx = mylayout.getWidget("colorwheeldemo");
+    cwx.onEvent = function(ev) {
+        mylogger.setText( "UIColorWheel action : " + cwx.id +  " hue = " +cwx.getHue() + " saturation = " + cwx.getSaturation());
+    };
+
+    var button1 = mylayout.getWidget("uicolorwheelcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIColorWheel action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicolorwheel.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uicolorwheellayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIColorWheel action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uicolorwheel.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uicolorwidget.js

@@ -0,0 +1,39 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uicolorwidgetcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIColorWidget action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicolorwidget.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uicolorwidgetlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIColorWidget action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uicolorwidget.ui.txt", mylayout );
+    };
+
+    var button4 = mylayout.getWidget("uicolorwidgetred");
+    button4.onClick = function () {
+        mylogger.setText( "UIColorWidget action : " +  button4.id + " was pressed ");
+        mylayout.getWidget("colorwidgetdemo").setColorString("#FF1111");
+    };
+
+    var button5 = mylayout.getWidget("uicolorwidgetgreen");
+    button5.onClick = function () {
+        mylogger.setText( "UIColorWidget action : " +  button5.id + " was pressed ");
+        mylayout.getWidget("colorwidgetdemo").setColorString("#11FF11");
+    };
+
+    var button6 = mylayout.getWidget("uicolorwidgetblue");
+    button6.onClick = function () {
+        mylogger.setText( "UIColorWidget action : " +  button6.id + " was pressed ");
+        mylayout.getWidget("colorwidgetdemo").setColorString("#1111FF");
+    };
+
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uicontainer.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uicontainercode");
+    button1.onClick = function () {
+        mylogger.setText( "UIContainer action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicontainer.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uicontainerlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIContainer action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uicontainer.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uieditfield.js

@@ -0,0 +1,47 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var ef1 = mylayout.getWidget("editfieldsingle");
+
+    // this will tell you something occured, just not what it was...
+    ef1.subscribeToEvent( ef1, "WidgetEvent", function (ev) {
+        mylogger.setText( "UIEditField action : " + ef1.id + " text = `" + ef1.text + "` event type = " + ev.type);
+    });
+
+    // insert a file into the editfield
+    var ef2 = mylayout.getWidget("editfieldmulti");
+    ef2.subscribeToEvent( ef2, "WidgetEvent", function (ev) {
+        mylogger.setText( "UIEditField action : " + ef2.id + " text = `" + ef2.text + "` event type = " + ev.type);
+    });
+
+    var button1 = mylayout.getWidget("editfieldadd");
+    button1.onClick = function () {
+        var filex = Atomic.cache.getFile("Scenes/layout_uieditfield.ui.txt");
+        var textx = filex.readText();
+        mylayout.getWidget("editfieldmulti").text = textx;
+        mylogger.setText( "UIEditField action : " + ef2.id + " added file Scenes/layout_uieditfield.ui.txt");
+    };
+
+    var button2 = mylayout.getWidget("editfieldclr");
+    button2.onClick = function () {
+        mylayout.getWidget("editfieldmulti").text = "";
+        mylogger.setText( "UIEditField action : cleared " + ef2.id);
+    };
+
+    var button4 = mylayout.getWidget("uieditfieldcode");
+    button4.onClick = function () {
+        mylogger.setText( "UIEditField action : " +  button4.id + " was pressed ");
+        utils.viewCode ( "Components/code_uieditfield.js", mylayout );
+    };
+
+    var button5 = mylayout.getWidget("uieditfieldlayout");
+    button5.onClick = function () {
+        mylogger.setText( "UIEditField action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uieditfield.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uifinderwindow.js

@@ -0,0 +1,38 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger,myview) {
+
+    var button1 = mylayout.getWidget("filefinder");
+    button1.onClick = function () {
+        var finder = new Atomic.UIFinderWindow(myview, "myfinder");
+        finder.findFile("Find a File", "", 0, 0, 0);
+        finder.subscribeToEvent(finder, "UIFinderComplete", function (ev) {
+            mylogger.setText( "UIFinderWindow action : " + finder.id +  " the window " + ev.title + " file was " + ev.selected + ", the button pressed was " + ev.reason);
+        });
+    };
+
+    var button2 = mylayout.getWidget("folderfinder");
+    button2.onClick = function () {
+        var finder = new Atomic.UIFinderWindow(myview, "myfinder");
+        finder.findPath("Find a Folder", "", 0, 0, 0);
+        finder.subscribeToEvent(finder, "UIFinderComplete", function (ev) {
+            mylogger.setText( "UIFinderWindow action : " + finder.id +  " the window " + ev.title + " folder was " + ev.selected + ", the button pressed was " + ev.reason);
+
+        });
+    };
+
+    var button3 = mylayout.getWidget("uifinderwindowcode");
+    button3.onClick = function () {
+        mylogger.setText( "UIFinderWindow action : " +  button3.id + " was pressed ");
+        utils.viewCode ( "Components/code_uifinderwindow.js", mylayout );
+    };
+
+    var button4 = mylayout.getWidget("uifinderwindowlayout");
+    button4.onClick = function () {
+        mylogger.setText( "UIFinderWindow action : " +  button4.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uifinderwindow.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uifontdescription.js

@@ -0,0 +1,31 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var steps = mylayout.getWidget("fontstep");
+    steps.onChanged = function(ev) {
+
+        var mytext = mylayout.getWidget("changetext");
+        var myfont = new Atomic.UIFontDescription();
+        myfont.setSize(Math.round (steps.value));
+        myfont.setId("Vera");
+        mytext.setFontDescription (myfont);
+        mytext.setText ( "Size " + String (Math.round (steps.value) ));
+        mylogger.setText( "UIFontdescription action : " + steps.id + " step size changed to " + String (steps.value));
+    };
+
+    var button5 = mylayout.getWidget("uifontdecsriptioncode");
+    button5.onClick = function () {
+        mylogger.setText( "UIFontdescription action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uifontdecsription.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uifontdecsriptionlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIFontdescription action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uifontdecsription.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiimagewidget.js

@@ -0,0 +1,31 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button3 = mylayout.getWidget("imagecolor");
+    button3.onClick = function () {
+        mylogger.setText( "UIImageWidget action : " +  button3.id + " was pressed ");
+        var img = mylayout.getWidget("imagewidgetdemo" );
+        img.setImage("Textures/HSV21.png");
+    };
+    var button4 = mylayout.getWidget("imagenewbuild");
+    button4.onClick = function () {
+        mylogger.setText( "UIImageWidget action : " +  button4.id + " was pressed ");
+        var img = mylayout.getWidget("imagewidgetdemo" );
+        img.setImage("Textures/newbuilddetected_header.jpg");
+    };
+
+    var button5 = mylayout.getWidget("uiimagewidgetcode");
+    button5.onClick = function () {
+        mylogger.setText( "UIImageWidget action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiimagewidget.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiimagewidgetlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIImageWidget action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiimagewidget.ui.txt", mylayout );
+    };
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiinlineselect.js

@@ -0,0 +1,29 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var ils = mylayout.getWidget("inlineselectdemo");
+    ils.onChanged = function(ev) {
+        mylogger.setText( "UIInlineSelect action : " + ils.id + " changed value to " + String (ils.value));
+    };
+
+    var steps = mylayout.getWidget("ilsstep");
+    steps.onChanged = function(ev) {
+        ils.setStepSize (steps.value);
+        mylogger.setText( "UIInlineSelect action : " + steps.id + " step size changed to " + String (steps.value));
+    };
+
+    var button5 = mylayout.getWidget("uiinlineselectcode");
+    button5.onClick = function () {
+        mylogger.setText( "UIInlineSelect action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiinlineselect.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiinlineselectlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIInlineSelect action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiinlineselect.ui.txt", mylayout );
+    };
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uilayout.js

@@ -0,0 +1,248 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger,myview) {
+
+    var myc = mylayout.getWidget("uilayoutcontainer"); // get the container layout
+
+    var tf0 = new Atomic.UIButton();  // the layout-o-matic spawner
+    tf0.text = "LAYOUT-O-MATIC";
+    tf0.id = "go_layout_config";
+    var lo0 = new Atomic.UILayout();
+    lo0.id = "target_layout";
+    lo0.setLayoutConfig ( "-----" );
+    lo0.load("Scenes/simp_button.ui.txt");
+    lo0.addChildBefore(tf0, lo0.getFirstChild() );
+    myc.addChild(lo0);  // drop it in
+
+    var tf1 = new Atomic.UITextField();
+    tf1.text = "layout 2 XACAC";
+    var lo1 = new Atomic.UILayout();
+    lo1.setLayoutConfig ( "XACAC" );
+    lo1.load("Scenes/simp_button.ui.txt");
+    lo1.addChildBefore(tf1, lo1.getFirstChild() );
+    myc.addChild(lo1);
+
+    var tf2 = new Atomic.UITextField();
+    tf2.text = "layout 3 XGCAC";
+    var lo2 = new Atomic.UILayout();
+    lo2.setLayoutConfig ( "XGCAC" );
+    lo2.load("Scenes/simp_button.ui.txt");
+    lo2.addChildBefore(tf2, lo2.getFirstChild() );
+    myc.addChild(lo2);
+
+    var tf3 = new Atomic.UITextField();
+    tf3.text = "layout 4 XPCAC";
+    var lo3 = new Atomic.UILayout();
+    lo3.setLayoutConfig ( "XPCAC" );
+    lo3.load("Scenes/simp_button.ui.txt");
+    lo3.addChildBefore(tf3, lo3.getFirstChild() );
+    myc.addChild(lo3);
+
+
+    var tf4 = new Atomic.UITextField();
+    tf4.text = "layout 5 XACGC";
+    var lo4 = new Atomic.UILayout();
+    lo4.setLayoutConfig ( "XACGC" );
+    lo4.load("Scenes/simp_button.ui.txt");
+    lo4.addChildBefore(tf4, lo4.getFirstChild() );
+    myc.addChild(lo4);
+
+    var tf5 = new Atomic.UITextField();
+    tf5.text = "layout 6 XGRGC";
+    var lo5 = new Atomic.UILayout();
+    lo5.setLayoutConfig ( "XGRGC" );
+    lo5.load("Scenes/simp_button.ui.txt");
+    lo5.addChildBefore(tf5, lo5.getFirstChild() );
+    myc.addChild(lo5);
+
+    var tf6 = new Atomic.UITextField();
+    tf6.text = "layout 7 XPLGC";
+    var lo6 = new Atomic.UILayout();
+    lo6.setLayoutConfig ( "XPLGC" );
+    lo6.load("Scenes/simp_button.ui.txt");
+    lo6.addChildBefore(tf6, lo6.getFirstChild() );
+    myc.addChild(lo6);
+
+    var tf7 = new Atomic.UITextField();
+    tf7.text = "layout 8 XACPC";
+    var lo7 = new Atomic.UILayout();
+    lo7.setLayoutConfig ( "XACPC" );
+    lo7.load("Scenes/simp_button.ui.txt");
+    lo7.addChildBefore(tf7, lo7.getFirstChild() );
+    myc.addChild(lo7);
+
+    var tf8 = new Atomic.UITextField();
+    tf8.text = "layout 9 XGLPL";
+    var lo8 = new Atomic.UILayout();
+    lo8.setLayoutConfig ( "XGLPL" );
+    lo8.load("Scenes/simp_button.ui.txt");
+    lo8.addChildBefore(tf8, lo8.getFirstChild() );
+    myc.addChild(lo8);
+
+    var tf9 = new Atomic.UITextField();
+    tf9.text = "layout 10 XPCPR";
+    var lo9 = new Atomic.UILayout();
+    lo9.setLayoutConfig ( "XPCPR" );
+    lo9.load("Scenes/simp_button.ui.txt");
+    lo9.addChildBefore(tf9, lo9.getFirstChild() );
+    myc.addChild(lo9);
+
+    // its LAYOUT-O-MATIC time.
+    var buttonl = mylayout.getWidget("go_layout_config");
+    buttonl.onClick = function () {
+        mylogger.setText( "UILayout action : " +  buttonl.id + " was pressed ");
+        var window = new Atomic.UIWindow();
+        window.setSettings ( Atomic.UI_WINDOW_SETTINGS_TITLEBAR + Atomic.UI_WINDOW_SETTINGS_RESIZABLE + Atomic.UI_WINDOW_SETTINGS_CLOSE_BUTTON );
+        window.text = "UILAYOUT-O-MATIC(tm)";
+        window.load("Scenes/view_layout.ui.txt");
+        window.resizeToFitContent();
+        myview.addChild(window);
+        window.center();
+        window.getWidget("ok").onClick = function () {
+            mylogger.setText( "UILayout action : the window `" + window.text + "` was closed with ok");
+            window.die();
+            window = null;
+        };
+
+        var str = "XGCPC"; // all defaults
+        var targetl = mylayout.getWidget("target_layout"); // who to operate on.
+
+        var buttonax = window.getWidget("set_ax");   // oh, strings are immutable in javascript.
+        buttonax.onClick = function() {
+            if ( buttonax.getValue() == 1) {
+                str = str.split('');
+                str[0] = 'X';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonay = window.getWidget("set_ay");
+        buttonay.onClick = function() {
+            if ( buttonay.getValue() == 1)  {
+                str = str.split('');
+                str[0] = 'Y';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonsza = window.getWidget("set_sza");
+        buttonsza.onClick = function() {
+            if ( buttonsza.getValue() == 1) {
+                str = str.split('');
+                str[1] = 'A';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonszg = window.getWidget("set_szg");
+        buttonszg.onClick = function() {
+            if ( buttonszg.getValue() == 1)   {
+                str = str.split('');
+                str[1] = 'G';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonszp= window.getWidget("set_szp");
+        buttonszp.onClick = function() {
+            if ( buttonszp.getValue() == 1)  {
+                str = str.split('');
+                str[1] = 'P';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonposc = window.getWidget("set_posc");
+        buttonposc.onClick = function() {
+            if ( buttonposc.getValue() == 1)  {
+                str = str.split('');
+                str[2] = 'C';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonposg = window.getWidget("set_posg");
+        buttonposg.onClick = function() {
+            if ( buttonposg.getValue() == 1)  {
+                str = str.split('');
+                str[2] = 'G';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonposl = window.getWidget("set_posl");
+        buttonposl.onClick = function() {
+            if ( buttonposl.getValue() == 1) {
+                str = str.split('');
+                str[2] = 'L';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttonposr = window.getWidget("set_posr");
+        buttonposr.onClick = function() {
+            if ( buttonposr.getValue() == 1)  {
+                str = str.split('');
+                str[2] = 'R';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondista = window.getWidget("set_dista");
+        buttondista.onClick = function() {
+            if ( buttondista.getValue() == 1)   {
+                str = str.split('');
+                str[3] = 'A';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondistg = window.getWidget("set_distg");
+        buttondistg.onClick = function() {
+            if ( buttondistg.getValue() == 1)  {
+                str = str.split('');
+                str[3] = 'G';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondistp = window.getWidget("set_distp");
+        buttondistp.onClick = function() {
+            if ( buttondistp.getValue() == 1)   {
+                str = str.split('');
+                str[3] = 'P';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondpc = window.getWidget("set_dpc");
+        buttondpc.onClick = function() {
+            if ( buttondpc.getValue() == 1)  {
+                str = str.split('');
+                str[4] = 'C';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondpl = window.getWidget("set_dpl");
+        buttondpl.onClick = function() {
+            if ( buttondpl.getValue() == 1)  {
+                str = str.split('');
+                str[4] = 'L';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+        var buttondpr = window.getWidget("set_dpr");
+        buttondpr.onClick = function() {
+            if ( buttondpr.getValue() == 1)  {
+                str = str.split('');
+                str[4] = 'R';
+                str = str.join('');
+                targetl.setLayoutConfig(str);
+            }
+        };
+    };
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uilayoutparams.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uilayoutparamscode");
+    button1.onClick = function () {
+        mylogger.setText( "UILayoutParams action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uilayoutparams.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uilayoutparamslayout");
+    button2.onClick = function () {
+        mylogger.setText( "UILayoutParams action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uilayoutparams.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uilistview.js

@@ -0,0 +1,69 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var mlvw = mylayout.getWidget("UIListViewDemo"); // get the container
+    if (mlvw !== null) {
+        mylogger.setText( "UIListView : already initialized");
+        return; // already initialized.
+    }
+
+// note : the UIListView widget does not have a corresponding Turbobadger widget, its ALL Atomic.
+// so we have to build it in source code / scripting
+
+    var myListview = new Atomic.UIListView();  // make a List...view
+    myListview.id = "UIListViewDemo"; // tag it, in case we want to get it again later
+
+    var lpx = new Atomic.UILayoutParams();  // size it just right
+    lpx.width = 256;
+    lpx.height = 256;
+    lpx.minWidth = 256;
+    lpx.minHeight = 256;
+    lpx.maxWidth = 256;
+    lpx.maxHeight = 256;
+    myListview.layoutParams = lpx;
+
+    var mylvc = mylayout.getWidget("listviewcontainer"); // get the container layout
+    mylvc.addChild(myListview);  // drop it in
+
+
+	// OMG what the heck was he thinking!
+   
+   	// there is no external way of converting a name to an itemLookup_ ???
+
+	var rootsids = [];	// now fill it up
+
+	var id1 = myListview.addRootItem("root1", "", "root1");
+	rootsids.push(id1);
+	var id2 = myListview.addChildItem(id1, "rootish2", "", "root2");
+	rootsids.push(id2);
+	var id3 = myListview.addChildItem(id1, "rootish3", "", "root3");
+	rootsids.push(id3);
+	var id4 = myListview.addChildItem(id1, "rootish4", "", "root4");
+	rootsids.push(id4);
+ 	var id5 = myListview.addChildItem(id1, "rootish5", "", "root5");
+	rootsids.push(id5);
+
+	var nn;
+	for ( nn=7; nn<55; nn++)
+		rootsids.push( myListview.addChildItem(id2, "child " + nn, "", "child " + nn ) );
+
+	myListview.setExpanded(id1,true);
+	myListview.setExpanded(id2,false);
+
+     myListview.subscribeToEvent("UIListViewSelectionChanged", function (ev) {
+ 			 var selectedId = myListview.selectedItemID; /// hmmm same as the refid...
+   			 mylogger.setText( "UIListView action : " + myListview.id + "  refid=" +  ev.refid + "  selected=" +  ev.selected + " sid=" + selectedId );
+		});
+
+/*
+	myListview.subscribeToEvent( "WidgetEvent", function (ev) {
+     	//if (  ev.target == myListview ) // ev.type == Atomic.UI_EVENT_TYPE_CLICK &&" selected entry id = " + ev.refID +
+                mylogger.setText( "UIListView action : " + myListview.id + " target= `" + ev.target.id + "` refID=`" + ev.refID + "` event type = " + ev.type);
+    });
+*/
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uimenuitem.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uimenuitemcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uimenuitem.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uimenuitemlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uimenuitem.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uimenuwindow.js

@@ -0,0 +1,44 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uimenuwindowpush");
+    button1.onClick = function () {
+        mylogger.setText( "UIMenuWindow action : " +  button1.id + " was pressed ");
+
+        var mymenuwindow = new Atomic.UIMenuWindow( mylayout, "MenuWindowDemo");
+
+        var mis = new Atomic.UIMenuItemSource();
+
+        mis.addItem( new Atomic.UIMenuItem( "UISelectItem1", "item1" ) );
+        mis.addItem( new Atomic.UIMenuItem( "UISelectItem2", "item2", "Ctrl+C" ) );
+        mis.addItem( new Atomic.UIMenuItem( "UISelectItem2", "item3", "Ctrl+A", "DuckButton" ) );
+        mis.addItem( new Atomic.UIMenuItem( "UISelectItem3", "item4", "Ctrl+O", "LogoAtomic" ) );
+
+        var xx = button1.x + (button1.width/2);
+        var yy = button1.y + (button1.height/2);
+        mymenuwindow.show(mis, xx, yy);
+
+        mymenuwindow.subscribeToEvent( "WidgetEvent", function (ev) {
+            if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK && ev.target == mymenuwindow )
+                mylogger.setText( "UIMenuWindow action : " + mymenuwindow.id + " selected entry id = " + ev.refID + " event type = " + ev.type);
+            if ( ev.type == Atomic.UI_EVENT_TYPE_SHORTCUT )
+                mylogger.setText( "UIMenuWindow action : " + mymenuwindow.id + " Shortcut id = " + ev.refID + " event type = " + ev.type);
+        });
+    };
+
+    var button2 = mylayout.getWidget("uimenuwindowcode");
+    button2.onClick = function () {
+        mylogger.setText( "UIMenuWindow action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Components/code_uimenuwindow.js", mylayout );
+    };
+
+    var button3 = mylayout.getWidget("uimenuwindowlayout");
+    button3.onClick = function () {
+        mylogger.setText( "UIMenuWindow action : " +  button3.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uimenuwindow.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uimessagewindow.js

@@ -0,0 +1,53 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("msgnone");
+    button1.onClick = function () {
+        var mess1 = new Atomic.UIMessageWindow(mylayout, "mymess1");
+        mess1.show("MessageWindow - NONE", "this is a MessageWindow - None button", 0, 0, 0, 0);
+    };
+
+    var button2 = mylayout.getWidget("msgok");
+    button2.onClick = function () {
+        var mess2 = new Atomic.UIMessageWindow(mylayout, "mymess2");
+        mess2.show("MessageWindow - OK", "this is a MessageWindow - OK button", Atomic.UI_MESSAGEWINDOW_SETTINGS_OK, 0, 0, 0);
+        mess2.onEvent = function (ev) {
+            mylogger.setText( "UIMessageWindow action : " + mess2.id +  " was closed by " + ev.refID);
+        };
+
+    };
+
+    var button3 = mylayout.getWidget("msgkcancel");
+    button3.onClick = function () {
+        var mess3 = new Atomic.UIMessageWindow(mylayout, "mymess3");
+        mess3.show("MessageWindow - OK CANCEL", "this is a MessageWindow - OK CANCEL buttons", Atomic.UI_MESSAGEWINDOW_SETTINGS_OK_CANCEL, 0, 0, 0);
+        mess3.onEvent = function (ev) {
+            mylogger.setText( "UIMessageWindow action : " + mess3.id + " was closed by " + ev.refID);
+        };
+    };
+
+    var button4 = mylayout.getWidget("msgyesno");
+    button4.onClick = function () {
+        var mess4 = new Atomic.UIMessageWindow(mylayout, "mymess4");
+        mess4.show("MessageWindow - YES NO", "this is a MessageWindow - YES NO buttons", Atomic.UI_MESSAGEWINDOW_SETTINGS_YES_NO, 0, 0, 0);
+        mess4.onEvent = function (ev) {
+            mylogger.setText( "UIMessageWindow action : " +mess4.id + " was closed by " + ev.refID);
+        };
+    };
+
+    var button5 = mylayout.getWidget("uimessagewindowcode");
+    button5.onClick = function () {
+        mylogger.setText( "UIMessageWindow action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uimessagewindow.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uimessagewindowlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIMessageWindow action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uimessagewindow.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uipromptwindow.js

@@ -0,0 +1,31 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger,myview) {
+
+    var button1 = mylayout.getWidget("stringfinder");
+    button1.onClick = function () {
+        var prompt = new Atomic.UIPromptWindow(myview, "myprompt");
+        prompt.show(  "WindowTitle", "Message in window", "preset value", 0, 0, 0);
+        prompt.subscribeToEvent( prompt, "UIPromptComplete", function (ev) {
+            mylogger.setText( "UIPromptWindow action : " + prompt.id + "the window `" + ev.title + "` string was `" + ev.selected + "`, the button pressed was " + ev.reason);
+        });
+
+    };
+
+    var button3 = mylayout.getWidget("uipromptwindowcode");
+    button3.onClick = function () {
+        mylogger.setText( "UIPromptWindow action : " +  button3.id + " was pressed ");
+        utils.viewCode ( "Components/code_uipromptwindow.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uipromptwindowlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIPromptWindow action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uipromptwindow.ui.txt", mylayout );
+    };
+
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uipulldownmenu.js

@@ -0,0 +1,42 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var filemenu = mylayout.getWidget("FileMenu");
+    filemenu.onChanged = function () {
+        mylogger.setText( "UIPulldownMenu action : " + filemenu.id + " selected id = " + filemenu.getSelectedId());
+    };
+
+    var editmenu = mylayout.getWidget("EditMenu");
+    editmenu.onChanged = function () {
+        mylogger.setText( "UIPulldownMenu action : " + editmenu.id + " selected id = " + editmenu.getSelectedId());
+    };
+
+    var viewmenu = mylayout.getWidget("ViewMenu");
+    viewmenu.onChanged = function () {
+        mylogger.setText( "UIPulldownMenu action : " + viewmenu.id + " selected id = " + viewmenu.getSelectedId());
+    };
+
+    var helpmenu = mylayout.getWidget("HelpMenu");
+    helpmenu.onChanged = function () {
+        mylogger.setText( "UIPulldownMenu action : " + helpmenu.id + " selected id = " + helpmenu.getSelectedId());
+    };
+
+
+
+    var button1 = mylayout.getWidget("uipulldownmenucode");
+    button1.onClick = function () {
+        mylogger.setText( "UIPulldownMenu action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uipulldownmenu.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uipulldownmenulayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIPulldownMenu action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uipulldownmenu.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiradiobutton.js

@@ -0,0 +1,38 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+
+    var button1 = mylayout.getWidget("demoradio");
+    button1.onClick = function () {
+        mylogger.setText( "UIRadioButton action : " +  button1.id + " state is " + button1.value);
+    };
+
+    var button2 = mylayout.getWidget("radioset");
+    button2.onClick = function () {
+        mylayout.getWidget("demoradio").value = 1;
+        mylogger.setText( "UIRadioButton action : " +  button1.id + " set to 1");
+    };
+
+    var button3 = mylayout.getWidget("radiounset");
+    button3.onClick = function () {
+        mylayout.getWidget("demoradio").value = 0;
+        mylogger.setText( "UIRadioButton action : " +  button1.id + " set to 0");
+    };
+
+    var button5 = mylayout.getWidget("uiradiobuttoncode");
+    button5.onClick = function () {
+        mylogger.setText( "UIRadioButton action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiradiobutton.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiradiobuttonlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIRadioButton action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiradiobutton.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uisceneview.js

@@ -0,0 +1,40 @@
+// some code from UISceneview2D sample program
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var msvw = mylayout.getWidget("UISceneViewDemo"); // get the container
+    if (msvw !== null) {
+        mylogger.setText( "UISceneView : already initialized");
+        return; // already initialized.
+    }
+
+// note : the UISceneView widget does not have a corresponding Turbobadger widget, its ALL Atomic.
+// so we have to build it in source code / scripting
+
+    var mysceneview = new Atomic.UISceneView();  // make a scene...view
+    mysceneview.id = "UISceneViewDemo"; // tag it, in case we want to get it again later
+    if ( mysceneview !== null ) {
+        var myscene = Atomic.player.loadScene("Scenes/sceneview.scene"); // creates a new scene, but doesn't load it to the player
+        if ( myscene !== null ) {
+            var mycamera = myscene.getComponents("Camera", true)[0]; // get camera from the scene
+            mysceneview.setView(myscene, mycamera);
+            mysceneview.autoUpdate = true;
+        } else mylogger.setText( "UISceneView: Cant load Scenes/sceneview.scene");
+    } else mylogger.setText( "UISceneView: Didnt create UISceneViewDemo widget");
+
+    var lpx = new Atomic.UILayoutParams();  // size it just right
+    lpx.width = 256;
+    lpx.height = 256;
+    lpx.minWidth = 256;
+    lpx.minHeight = 256;
+    lpx.maxWidth = 256;
+    lpx.maxHeight = 256;
+    mysceneview.layoutParams = lpx;
+
+    var mysvc = mylayout.getWidget("sceneviewcontainer"); // get the container layout
+    mysvc.addChild(mysceneview);  // drop it in
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiscrollbar.js

@@ -0,0 +1,26 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var sb = mylayout.getWidget("scrollbardemo");
+
+    sb.subscribeToEvent( "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_CHANGED && sb == ev.target )
+            mylogger.setText( "UIScrollBar action : " + sb.id + " changed value = `" + sb.value + "` event type = " + ev.type);
+    });
+
+    var button5 = mylayout.getWidget("uiscrollbarcode");
+    button5.onClick = function () {
+        mylogger.setText( "UIScrollBar action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiscrollbar.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiscrollbarlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UIScrollBar action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiscrollbar.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiscrollcontainer.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uiscrollcontainercode");
+    button1.onClick = function () {
+        mylogger.setText( "UIScrollContainer action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiscrollcontainer.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uiscrollcontainerlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIScrollContainer action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiscrollcontainer.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uisection.js

@@ -0,0 +1,31 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+
+    var sec1 = mylayout.getWidget("UISectionDemo");
+    sec1.subscribeToEvent( sec1, "WidgetEvent", function (ev) {
+        mylogger.setText( "UISection action : " + sec1.id + " generated event type = " + ev.type + " value = " + sec1.value);
+    });
+
+    var sec2 = mylayout.getWidget("UISection2Demo");
+    sec2.subscribeToEvent( sec2, "WidgetEvent", function (ev) {
+        mylogger.setText( "UISection action : " + sec2.id + " generated event type = " + ev.type + " value = " + sec2.value);
+    });
+
+    var button4 = mylayout.getWidget("uisectioncode");
+    button4.onClick = function () {
+        mylogger.setText( "UISection action : " +  button4.id + " was pressed");
+        utils.viewCode ( "Components/code_uisection.js", mylayout );
+    };
+
+    var button5 = mylayout.getWidget("uisectionlayout");
+    button5.onClick = function () {
+        mylogger.setText( "UISection action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uisection.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectdropdown.js

@@ -0,0 +1,26 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var dropdown = mylayout.getWidget("selectdropdowndemo");
+
+    dropdown.subscribeToEvent( "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_CHANGED && dropdown == ev.target )
+            mylogger.setText( "UISelectDropdown action : " + dropdown.id + " changed value to " + dropdown.text);
+    });
+
+    var button5 = mylayout.getWidget("uiselectdropdowncode");
+    button5.onClick = function () {
+        mylogger.setText( "UISelectDropdown action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiselectdropdown.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiselectdropdownlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UISelectDropdown action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiselectdropdown.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectitem.js

@@ -0,0 +1,83 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var mylist = new Atomic.UISelectList();
+    mylist.id = "UISelectItemList"; // tag it, in case we want to get it again later
+
+    var lpx = new Atomic.UILayoutParams();  // size it just right
+    lpx.width = 200;
+    lpx.height = 256;
+    lpx.minWidth = 200;
+    lpx.minHeight = 256;
+    lpx.maxWidth = 200;
+    lpx.maxHeight = 256;
+    mylist.layoutParams = lpx;
+
+    var myc = mylayout.getWidget("selectitemlayout"); // get the container layout
+    myc.addChild(mylist);  // drop it in
+
+    var sis = new Atomic.UISelectItemSource();  // make the selectitemsource
+
+    // put in some default UISelectItems
+    sis.addItem( new Atomic.UISelectItem( "UISelectItem1", "item1" ) );
+    sis.addItem( new Atomic.UISelectItem( "UISelectItem2", "item2", "DuckButton" ) );
+    sis.addItem( new Atomic.UISelectItem( "UISelectItem3", "item3", "LogoAtomic" ) );
+    mylist.setSource(sis);
+
+    var button1 = mylayout.getWidget("uisi1");
+    button1.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button1.id + " was pressed ");
+        sis.addItem( new Atomic.UISelectItem( "New UISelectItem") );
+        mylist.setSource(sis);
+    };
+
+    var button2 = mylayout.getWidget("uisi2");
+    button2.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button2.id + " was pressed ");
+        sis.addItem( new Atomic.UISelectItem( "Newer UISelectItem", "neweritem" ) );
+        mylist.setSource(sis);
+    };
+
+    var button3 = mylayout.getWidget("uisi3");
+    button3.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button3.id + " was pressed ");
+        sis.addItem( new Atomic.UISelectItem( "A Duck", "aduck", "DuckButton" ) );
+        mylist.setSource(sis);
+    };
+
+    var button4 = mylayout.getWidget("uisi4");
+    button4.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button4.id + " was pressed ");
+        sis.addItem( new Atomic.UISelectItem( "Atomic!", "atomic", "LogoAtomic" ) );
+        mylist.setSource(sis);
+    };
+
+    var button5 = mylayout.getWidget("uisi5");
+    button5.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button5.id + " was pressed ");
+        sis.clear();
+        mylist.setSource(sis);
+    };
+
+    var button9 = mylayout.getWidget("uiselectitemcode");
+    button9.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button9.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiselectitem.js", mylayout );
+    };
+
+    var button8 = mylayout.getWidget("uiselectitemlayout");
+    button8.onClick = function () {
+        mylogger.setText( "UISelectItem action : " +  button8.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiselectitem.ui.txt", mylayout );
+    };
+
+
+    mylist.subscribeToEvent( mylist, "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK)
+            mylogger.setText( "UISelectItem action : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
+    });
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectlist.js

@@ -0,0 +1,61 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("selectlistadd");
+    button1.onClick = function () {
+        var list1 = mylayout.getWidget("UISelectListDemo");
+        list1.addItem(list1.numItems, "New Entry");
+        mylogger.setText( "UISelectList action : " + list1.id + " appended New Entry");
+    };
+
+    var button2 = mylayout.getWidget("selectlistdel");
+    button2.onClick = function () {
+        var list1 = mylayout.getWidget("UISelectListDemo");
+        var si = list1.value; // this is the selected index
+        list1.deleteItem(si);
+        mylogger.setText( "UISelectList action : " + list1.id + " deleted item " + String(si));
+    };
+
+    var button3 = mylayout.getWidget("selectlistdelall");
+    button3.onClick = function () {
+        var list1 = mylayout.getWidget("UISelectListDemo");
+        list1.deleteAllItems();
+        mylogger.setText( "UISelectList action : " + list1.id + " deleted all items");
+    };
+
+    var button4 = mylayout.getWidget("selectlistnew");
+    button4.onClick = function () {
+        var listSrc = new Atomic.UISelectItemSource();
+        listSrc.addItem(new Atomic.UISelectItem( "list 1","list1", "LogoAtomic" ));
+        listSrc.addItem(new Atomic.UISelectItem( "list 2","list2", "" ));
+        listSrc.addItem(new Atomic.UISelectItem( "list 3","list3", "" ));
+        listSrc.addItem(new Atomic.UISelectItem( "list 4","list4", "" ));
+        listSrc.addItem(new Atomic.UISelectItem( "list 5","list5", "" ));
+        listSrc.addItem(new Atomic.UISelectItem( "list 6","list6", "" ));
+        var list1 = mylayout.getWidget("UISelectListDemo");
+        list1.setSource(listSrc);
+        mylogger.setText( "UISelectList action : " + list1.id + " added new list entries");
+    };
+
+    var mylist = mylayout.getWidget("UISelectListDemo");
+    mylist.subscribeToEvent( mylist, "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK)
+            mylogger.setText( "UISelectList action : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
+    });
+
+    var button5 = mylayout.getWidget("uiselectlistcode");
+    button5.onClick = function () {
+        mylogger.setText( "UISelectList action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiselectlist.js", mylayout );
+    };
+
+    var button6 = mylayout.getWidget("uiselectlistlayout");
+    button6.onClick = function () {
+        mylogger.setText( "UISelectList action : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiselectlist.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiseparator.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uiseparatorcode");
+    button1.onClick = function () {
+        mylogger.setText( "UISeparator action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicontainer.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uiseparatorlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UISeparator action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiseparator.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiskinimage.js

@@ -0,0 +1,19 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uiskinimagecode");
+    button1.onClick = function () {
+        mylogger.setText( "UISkinImage action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiskinimage.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uiskinimagelayout");
+    button2.onClick = function () {
+        mylogger.setText( "UISkinImage action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiskinimage.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uislider.js

@@ -0,0 +1,24 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var slider1 = mylayout.getWidget("sliderdemo");
+    slider1.onChanged = function(ev) {
+        mylogger.setText( "UISlider action : " + slider1.id + " changed value to " +  slider1.value);
+    };
+
+    var button1 = mylayout.getWidget("uislidercode");
+    button1.onClick = function () {
+        mylogger.setText( "UISlider action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uislider.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uisliderlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UISlider action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uislider.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uitabcontainer.js

@@ -0,0 +1,54 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var tb = mylayout.getWidget("UITabContainerDemo");
+    tb.setCurrentPage(0);   // fix or it looks like crap
+
+    tb.subscribeToEvent( "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_TAB_CHANGED && tb == ev.target ) {
+            mylogger.setText( "UITabContainer action : " + tb.id + " UI_EVENT_TYPE_TAB_CHANGED to " + tb.getCurrentPage() + " id: " + tb.getCurrentPageWidget().id);
+        }
+    });
+
+    var button1 = mylayout.getWidget("uitabcontainerremove");
+    button1.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button1.id + " was pressed ");
+        var current = tb.getCurrentPage();
+        tb.deletePage(current);
+    };
+
+    var button2 = mylayout.getWidget("uitabcontaineradd");
+    button2.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button2.id + " was pressed ");
+        tb.addTabPageFile("New File", "Scenes/sheet.ui.txt" );
+    };
+
+    var button3 = mylayout.getWidget("uitabcontainermake");
+    button3.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button3.id + " was pressed ");
+        var lo = new Atomic.UILayout();
+        lo.setLayoutConfig ( "YACAC" );  // YACAC!
+        lo.addChild ( new Atomic.UIButton() );
+        lo.addChild ( new Atomic.UIButton() );
+        lo.addChild ( new Atomic.UIButton() );
+        lo.addChild ( new Atomic.UIButton() );
+        lo.addChild ( new Atomic.UIButton() );
+        tb.addTabPageWidget("New Code", lo );
+    };
+
+    var button4 = mylayout.getWidget("uitabcontainercode");
+    button4.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button4.id + " was pressed ");
+        utils.viewCode ( "Components/code_uitabcontainer.js", mylayout );
+    };
+
+    var button5 = mylayout.getWidget("uitabcontainerlayout");
+    button5.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uitabcontainer.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uitextfield.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uitextfieldcode");
+    button1.onClick = function () {
+        mylogger.setText( "UITextField action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uitextfield.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uitextfieldlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UITextField action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uitextfield.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uitexturewidget.js

@@ -0,0 +1,60 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+
+    var mytexturewidget = new Atomic.UITextureWidget();  // make a widget
+    mytexturewidget.id = "UITextureWidgetDemo"; // tag it, in case we want to get it again later
+    if ( mytexturewidget !== null ) {
+        var mytex = new Atomic.Texture2D();
+        if ( mytex !== null ) {
+            mytex = Atomic.cache.getResource("Texture2D", "Textures/planet.jpg");
+            mytexturewidget.setTexture(mytex);
+        } else mylogger.setText( "UITextureWidget : Cant set texture");
+    } else mylogger.setText( "UITextureWidget : Didnt create UITextureWidgetDemo widget");
+
+    var lpx = new Atomic.UILayoutParams();  // size it just right
+    lpx.width = 256;
+    lpx.height = 256;
+    lpx.minWidth = 256;
+    lpx.minHeight = 256;
+    lpx.maxWidth = 256;
+    lpx.maxHeight = 256;
+    mytexturewidget.layoutParams = lpx;
+
+    var myc = mylayout.getWidget("uitwcontainer"); // get the container layout
+    myc.addChild(mytexturewidget);  // drop it in
+
+    var b1 = new Atomic.UIButton();
+    b1.id = "uitexturewidgetch1";
+    b1.text = "Change texture to new build";
+    myc.addChild(b1);
+    b1.onClick = function () {
+        mylogger.setText( "UITextureWidget action : " +  b1.id + " was pressed ");
+        var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
+        tex1.setTexture(Atomic.cache.getResource("Texture2D", "Textures/newbuilddetected_header.jpg") );
+    };
+
+    var b2 = new Atomic.UIButton();
+    b2.id = "uitexturewidgetch2";
+    b2.text = "Change texture to colorwheel";
+    myc.addChild(b2);
+    b2.onClick = function () {
+        mylogger.setText( "UITextureWidget action : " +  b2.id + " was pressed ");
+        var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
+        tex1.setTexture(Atomic.cache.getResource("Texture2D", "Textures/HSV21.png") );
+    };
+
+    var b3 = new Atomic.UIButton();
+    b3.id = "uitexturewidgetch3";
+    b3.text = "Change texture to planet";
+    myc.addChild(b3);
+    b3.onClick = function () {
+        mylogger.setText( "UITextureWidget action : " +  b3.id + " was pressed ");
+        var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
+        tex1.setTexture(Atomic.cache.getResource("Texture2D", "Textures/planet.jpg") );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiwidget.js

@@ -0,0 +1,20 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger) {
+
+    var button1 = mylayout.getWidget("uiwidgetcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIWidget action : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiwidget.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uiwidgetlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIWidget action : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiwidget.ui.txt", mylayout );
+    };
+
+
+};
+

UIPeriodicTable/JavaScript/Resources/Components/code_uiwindow.js

@@ -0,0 +1,51 @@
+'use strict';
+var utils = require("Scripts/utils");
+
+exports.init = function(mylayout,mylogger,myview) {
+
+    var button1 = mylayout.getWidget("windowdemo");
+    button1.onClick = function () {
+        var window = new Atomic.UIWindow();
+        window.setSettings ( Atomic.UI_WINDOW_SETTINGS_TITLEBAR + Atomic.UI_WINDOW_SETTINGS_RESIZABLE + Atomic.UI_WINDOW_SETTINGS_CLOSE_BUTTON );
+        window.text = "UIWindow demo (a login dialog)";
+        window.load("Scenes/login_dialog.ui.txt");
+        window.resizeToFitContent();
+        myview.addChild(window);
+        window.center();
+        window.getWidget("login").onClick = function () {
+            mylogger.setText( "UIWindow action : the window `" + window.text + "` was closed with login");
+            window.die();
+            window = null;
+        };
+        window.getWidget("cancel").onClick = function () {
+            mylogger.setText( "UIWindow action : the window `" + window.text + "` was closed with cancel");
+            window.die();
+            window = null;
+        };
+    };
+
+    var button2 = mylayout.getWidget("windowdemo1");
+    button2.onClick = function () {
+        var window2 = new Atomic.UIWindow();
+        window2.setSettings ( Atomic.UI_WINDOW_SETTINGS_TITLEBAR + Atomic.UI_WINDOW_SETTINGS_RESIZABLE + Atomic.UI_WINDOW_SETTINGS_CLOSE_BUTTON );
+        window2.text = "UIWindow demo (a table)";
+        window2.load("Scenes/sheet.ui.txt");
+        window2.resizeToFitContent();
+        myview.addChild(window2);
+        window2.center();
+    };
+
+    var button3 = mylayout.getWidget("uiwindowcode");
+    button3.onClick = function () {
+        mylogger.setText( "UIWindow action : " +  button3.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiwindow.js", mylayout );
+    };
+
+    var button4 = mylayout.getWidget("uiwindowlayout");
+    button4.onClick = function () {
+        mylogger.setText( "UIWindow action : " +  button4.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uiwindow.ui.txt", mylayout );
+    };
+
+};
+

UIPeriodicTable/JavaScript/Resources/Materials/planet.material

@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<material>
+	<technique name="Techniques/Diff.xml" />
+	<texture unit="diffuse" name="Textures/planet.jpg" />
+	<parameter name="MatDiffColor" value="0.8 0.8 0.8 1" />
+	<parameter name="MatSpecColor" value="0.501961 0.750693 0.8 384.314" />
+	<parameter name="MatEmissiveColor" value="0 0 0 1" />
+</material>
+

UIPeriodicTable/JavaScript/Resources/Scenes/Scene.scene

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<scene id="1">
+	<attribute name="Name" value="" />
+	<attribute name="Time Scale" value="1" />
+	<attribute name="Smoothing Constant" value="50" />
+	<attribute name="Snap Threshold" value="5" />
+	<attribute name="Elapsed Time" value="0" />
+	<attribute name="Next Replicated Node ID" value="363" />
+	<attribute name="Next Replicated Component ID" value="1975" />
+	<attribute name="Next Local Node ID" value="16778496" />
+	<attribute name="Next Local Component ID" value="16777216" />
+	<attribute name="Variables" />
+	<attribute name="Variable Names" value="" />
+</scene>

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uibargraph.ui.txt

@@ -0,0 +1,23 @@
+# UIBargraph widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIBargraph widget"
+	TBContainer
+		TBBarGraph: value: 0, skin: Graph, color: #00AF34, axis: y, connection: graphit, margin: 4
+			lp: width: 32, height: 64
+	TBContainer
+		TBBarGraph: value: 0, skin: background_solid, color: #AF3400, axis: x, connection: graphit
+			lp: width: 200, height: 32
+	TBContainer
+		TBBarGraph: value: 0, skin: background_solid, color: #0034AF, axis: x, connection: graphit
+			lp: width: 200, height: 32
+	TBTextField: text: "Use this slider to change the bargraph input value"
+	TBSlider: min: 0, max: 100, value: 21, connection: graphit
+		lp: width: 200
+	TBTextField: id: spacer, text: "  "
+	TBLayout
+		TBButton: text: "UIBargraph help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uibargraph.html"
+		TBButton: text: "UIBargraph application code", id: uibargraphcode
+		TBButton: text: "UIBargraph layout code", id: uibargraphlayout
+
+
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uibutton.ui.txt

@@ -0,0 +1,17 @@
+# UIButton widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this are Examples of the UIButton widget"
+	TBContainer
+		TBLayout: axis: y
+			TBButton: text: "Press me!", id: demobutton
+			TBButton: id: buttonducky, skin: DuckButton
+			TBButton: id: buttonready
+				TBSkinImage: skin: ReadyButton
+			TBButton: id: buttonatomic
+				TBSkinImage: skin: LogoAtomic
+			TBButton: id: buttongreen, text: "Press me, I`m green", skin: ColorButton
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIButton help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uibutton.html"
+		TBButton: text: "UIButton application code", id: uibuttoncode
+		TBButton: text: "UIButton layout code", id: uibuttonlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicheckbox.ui.txt

@@ -0,0 +1,13 @@
+# UICheckBox widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UICheckBox widget"
+	TBContainer
+		TBCheckBox: id: democheck
+	TBButton: id: "checkset", text: "Set the Checkbox ON"
+	TBButton: id: "checkunset", text: "Set the Checkbox OFF"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UICheckBox help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uicheckbox.html"
+		TBButton: text: "UICheckBox application code", id: uicheckboxcode
+		TBButton: text: "UICheckBox layout code", id: uicheckboxlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiclicklabel.ui.txt

@@ -0,0 +1,13 @@
+# UIClickLabel widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIClickLabel widget"
+	TBContainer
+		TBLayout: axis: y
+			TBClickLabel: id: democlicklabel, text: "Click Label"
+				TBCheckBox: id: somecheck
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIClickLabel help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiclicklabel.html"
+		TBButton: text: "UIClickLabel application code", id: uiclicklabelcode
+		TBButton: text: "UIClickLabel layout code", id: uiclicklabellayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicolorwheel.ui.txt

@@ -0,0 +1,12 @@
+# UIColorWheel widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIColorWheel widget"
+	TBContainer
+		TBColorWheel: id: colorwheeldemo, skin: HSVSkin
+			lp: width: 256, height: 256
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIColorWheel help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uicolorwheel.html"
+		TBButton: text: "UIColorWheel application code", id: uicolorwheelcode
+		TBButton: text: "UIColorWheel layout code", id: uicolorwheellayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicolorwidget.ui.txt

@@ -0,0 +1,15 @@
+# UIColorWidget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIColorWidget"
+	TBContainer
+		TBColorWidget: value: 0, skin: background_solid, color: #00AF77, id: colorwidgetdemo
+			lp: width: 256, height: 64
+	TBButton: text: "Change to red", id: uicolorwidgetred
+	TBButton: text: "Change to green", id: uicolorwidgetgreen
+	TBButton: text: "Change to blue", id: uicolorwidgetblue
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIColorWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uicolorwidget.html"
+		TBButton: text: "UIColorWidget application code", id: uicolorwidgetcode
+		TBButton: text: "UIColorWidget layout code", id: uicolorwidgetlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicontainer.ui.txt

@@ -0,0 +1,13 @@
+# UIContainer widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIContainer widget"
+	TBContainer
+		TBWidget
+			lp: width: 256, height: 64
+	TBTextField: text: "Its right there ^"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIContainer help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uicontainer.html"
+		TBButton: text: "UIContainer application code", id: uicontainercode
+		TBButton: text: "UIContainer layout code", id: uicontainerlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uieditfield.ui.txt

@@ -0,0 +1,19 @@
+# UIEditField widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIEditField widget"
+	TBTextField: text: "*Hint - If you want to display XML correctly, turn off Styling, like `styling: 0`"
+	TBTextField: text: "*Another Hint - there is a built-in context menu with M3, or long press on mobile."
+	TBContainer
+		TBEditField: id: editfieldsingle, text: "Example of a single line EditField widget"
+			lp: pref-width: 512dp
+	TBTextField: text: "Example of a multline line EditField widget"
+	TBEditField: id: editfieldmulti, multiline: 1, styling: 1, readonly: 0, adapt-to-content: 0
+		lp: pref-width: 512dp, pref-height: 256dp
+	TBButton: id: "editfieldadd", text: "Add file to Multiline UIEditField"
+	TBButton: id: "editfieldclr", text: "Clear Multiline UIEditField"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIEditField help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uieditfield.html"
+		TBButton: text: "UIEditField application code", id: uieditfieldcode
+		TBButton: text: "UIEditField layout code", id: uieditfieldlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uifinderwindow.ui.txt

@@ -0,0 +1,11 @@
+# UIFinderWindow widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIFinderWindow widget"
+	TBButton: id: "filefinder", text: "Bring up a File Finder..."
+	TBButton: id: "folderfinder", text: "Bring up a Folder Finder..."
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: "uifinderwindowhelp", text: "UIFinderWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uifinderwindow.html"
+		TBButton: text: "UIFinderWindow application code", id: uifinderwindowcode
+		TBButton: text: "UIFinderWindow layout code", id: uifinderwindowlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uifontdescription.ui.txt

@@ -0,0 +1,18 @@
+# UIFontdescription object layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIFontdescription object"
+	TBTextField: text: "UIFontdescription size 8"
+		font: size: 8dp
+	TBTextField: text: "UIFontdescription size 18"
+		font: size: 18dp
+	TBTextField: text: "UIFontdescription size 80"
+		font: size: 80, name: "BrokenGlass"
+	TBTextField: text: "Use this slider to change the text size from 8 to 72"
+	TBSlider: min: 8.0, max: 72.0, value: 1, id: fontstep
+		lp: width: 256
+	TBTextField: text: "Size 8", id: changetext, squeezable: true
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIFontdescription help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiinlineselect.html"
+		TBButton: text: "UIFontdescription application code", id: uifontdecsriptioncode
+		TBButton: text: "UIFontdescription layout code", id: uifontdecsriptionlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiimagewidget.ui.txt

@@ -0,0 +1,12 @@
+# UIImageWidget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIImageWidget"
+	TBContainer
+		TBImageWidget: id: imagewidgetdemo, filename: "Textures/newbuilddetected_header.jpg"
+	TBButton: text: "Change image to colorwheel", id: imagecolor
+	TBButton: text: "Change image to newbuild", id: imagenewbuild
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIImageWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiimagewidget.html"
+		TBButton: text: "UIImageWidget application code", id: uiimagewidgetcode
+		TBButton: text: "UIImageWidget layout code", id: uiimagewidgetlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiinlineselect.ui.txt

@@ -0,0 +1,12 @@
+# UIInlineSelect widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIInlineSelect widget"
+	TBInlineSelect: id: inlineselectdemo
+	TBTextField: text: "Use this slider to change the step size from .1 to 2"
+	TBSlider: min: 0.1, max: 2.0, value: 1, id: ilsstep
+		lp: width: 200
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIInlineSelect help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiinlineselect.html"
+		TBButton: text: "UIInlineSelect application code", id: uiinlineselectcode
+		TBButton: text: "UIInlineSelect layout code", id: uiinlineselectlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilayout.ui.txt

@@ -0,0 +1,5 @@
+# UILayout widget layout file
+TBLayout: id: uilayoutcontainer, config: "Y----"
+	TBTextField: text: "these are examples of the UILayout widget"
+
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilayoutparams.ui.txt

@@ -0,0 +1,33 @@
+# UILayoutParams Object layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of the UILayoutParams Object"
+	TBTextField: text: ""
+	TBLayout: distribution: gravity
+		TBButton: text: "64x64", squeezable: true
+			lp: pref-width: 64, pref-height: 64
+		TBWidget: gravity: all
+	TBLayout: distribution: gravity
+		TBImageWidget: filename: "Textures/jmruler.png"
+			lp: width: 512, height: 32
+		TBWidget: gravity: all
+	TBLayout: distribution: gravity
+		TBButton: text: "320x64"
+			lp: pref-width: 320, pref-height: 64
+		TBWidget: gravity: all
+	TBLayout: distribution: gravity
+		TBImageWidget: filename: "Textures/jmruler.png"
+			lp: width: 512, height: 32
+		TBWidget: gravity: all
+	TBLayout: distribution: gravity
+		TBButton: text: "480x64"
+			lp: pref-width: 480, pref-height: 64
+		TBWidget: gravity: all
+	TBLayout: distribution: gravity
+		TBImageWidget: filename: "Textures/jmruler.png"
+			lp: width: 512, height: 32
+		TBWidget: gravity: all
+	TBLayout
+		TBButton: text: "UILayoutParams help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uilayoutparams.html"
+		TBButton: text: "UILayoutParams application code", id: uilayoutparamscode
+		TBButton: text: "UILayoutParams layout code", id: uilayoutparamslayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilistview.ui.txt

@@ -0,0 +1,8 @@
+# UIListView widget layout file
+TBLayout: axis: y, id: listviewcontainer
+	TBTextField: text: "this is the Example of a UIListView widget"
+# there is NO TBListView widget, its entirely an Atomic Widget, well add it with code
+	TBLayout
+		TBButton: id: "listviewhelp", text: "UIListView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uilistview.html"
+		TBButton: text: "UIListView application code", id: uilistviewcode
+		TBButton: text: "UIListView application code", id: uilistviewlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimenuitem.ui.txt

@@ -0,0 +1,16 @@
+# UIMenuItem and UIMenuItemSource objects layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIMenuItem and UIMenuItemSource objects"
+	TBButton: text: "Add UIMenuItem text", id: uimi1
+	TBButton: text: "Add UIMenuItem text,id", id: uimi2
+	TBButton: text: "Add UIMenuItem text,id,icon", id: uimi3
+	TBButton: text: "Add UIMenuItem Atomic entry", id: uimi4
+	TBButton: text: "Clear UIMenuItemSource", id: uimi5
+	TBTextField: id: spacer, text: "   "
+	TBButton: text: "Push for a resulting menu", id: uimenuitempush
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIMenuItem help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uimenuitem.html"
+		TBButton: text: "UIMenuItem application code", id: uimenuitemcode
+		TBButton: text: "UIMenuItem layout code", id: uimenuitemlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimenuwindow.ui.txt

@@ -0,0 +1,10 @@
+# UIMenuWindow widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIMenuWindow widget"
+	TBButton: text: "push for a UIMenuWindow", id: uimenuwindowpush
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIMenuWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uimenuwindow.html"
+		TBButton: text: "UIMenuWindow application code", id: uimenuwindowcode
+		TBButton: text: "UIMenuWindow layout code", id: uimenuwindowlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimessagewindow.ui.txt

@@ -0,0 +1,13 @@
+# UIMessageWindow widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIMessageWindow widget"
+	TBButton: id: "msgnone", text: "Bring up a MessageWindow..."
+	TBButton: id: "msgok", text: "Bring up an OK MessageWindow..."
+	TBButton: id: "msgkcancel", text: "Bring up an OK CANCEL MessageWindow..."
+	TBButton: id: "msgyesno", text: "Bring up a YES NO MessageWindow..."
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: "uimessagewindowhelp", text: "UIMessageWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uimessagewindow.html"
+		TBButton: text: "UIMessageWindow application code", id: uimessagewindowcode
+		TBButton: text: "UIMessageWindow layout code", id: uimessagewindowlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uipromptwindow.ui.txt

@@ -0,0 +1,10 @@
+# UIPromptWindow widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIPromptWindow widget"
+	TBButton: id: "stringfinder", text: "Bring up a Prompt window..."
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: "uipromptwindowhelp", text: "UIPromptWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uipromptwindow.html"
+		TBButton: text: "UIPromptWindow application code", id: uipromptwindowcode
+		TBButton: text: "UIPromptWindow layout code", id: uipromptwindowlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uipulldownmenu.ui.txt

@@ -0,0 +1,33 @@
+# UIPulldownMenu widget layout file
+TBLayout: axis: y, size: available, position: gravity, distribution: gravity
+	TBLayout: axis: x, margin: 5, size: preferred, distribution: gravity, distribution-position: left right, skin: TBWindow
+		TBPulldownMenu: text: "  File  ", skin: 0, id: "FileMenu"
+			items:
+				item: text: "Open...", id: FileOpen
+				item: text: "Save...", id: FileSave
+				item: text: "-"
+				item: text: "Exit", id: FileExit
+		TBPulldownMenu: text: "  Edit  ", skin: 0, id: "EditMenu"
+			items:
+				item: text: "Cut", id: EditCut
+				item: text: "Copy", id: EditCopy
+				item: text: "Paste", id: EditPaste
+				item: text: "Select All", id: EditAll
+		TBPulldownMenu: text: "  View  ", skin: 0, id: "ViewMenu"
+			items:
+				item: text: "Scale", id: ViewScale
+				item: text: "Rotate", id: ViewRotate
+				item: text: "Translate", id: ViewTranslate
+		TBPulldownMenu: text: "  Help  ", skin: 0, id: "HelpMenu"
+			items:
+				item: text: "Help...", id: HelpHelp
+				item: text: "About this program...", id: HelpAbout
+	TBTextField: text: "^ this is the Example of a UIPulldownMenu widget"
+	TBWidget: gravity: all
+	TBLayout
+		TBButton: text: "UIPulldownMenu help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uipulldownmenu.html"
+		TBButton: text: "UIPulldownMenu application code", id: uipulldownmenucode
+		TBButton: text: "UIPulldownMenu layout code", id: uipulldownmenulayout
+
+
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiradiobutton.ui.txt

@@ -0,0 +1,13 @@
+# UIRadioButton widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIRadioButton widget"
+	TBContainer
+		TBRadioButton: id: demoradio
+	TBButton: id: "radioset", text: "Set the Radiobutton ON"
+	TBButton: id: "radiounset", text: "Set the Radiobutton OFF"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIRadioButton help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiradiobutton.html"
+		TBButton: text: "UIRadioButton application code", id: uiradiobuttoncode
+		TBButton: text: "UIRadioButton layout code", id: uiradiobuttonlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uisceneview.ui.txt

@@ -0,0 +1,9 @@
+# UISceneView widget layout file
+TBLayout: axis: y, id: sceneviewcontainer
+	TBTextField: text: "this is the Example of a UISceneView widget"
+# there is NO TBSceneView widget, its entirely an Atomic Widget, well add it with code
+	TBLayout
+		TBButton: id: "scenceviewhelp", text: "UISceneView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uisceneview.html"
+		TBButton: text: "UISceneView application code", id: uisceneviewcode
+		TBButton: text: "UISceneView layout code", id: uisceneviewlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiscrollbar.ui.txt

@@ -0,0 +1,12 @@
+# UIScrollBar widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIScrollBar widget"
+	TBContainer
+		TBScrollBar: min: 0, max: 100, thumb: 20, value: 5, id: scrollbardemo
+			lp: width: 200dp
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIScrollBar help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiscrollbar.html"
+		TBButton: text: "UIScrollBar application code", id: uiscrollbarcode
+		TBButton: text: "UIScrollBar layout code", id: uiscrollbarlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiscrollcontainer.ui.txt

@@ -0,0 +1,26 @@
+# UIScrollContainer widget layout file
+TBLayout: axis: y, size: available, position: gravity, distribution: gravity
+	TBTextField: text: "this is the Example of a UIScrollContainer widget"
+	TBScrollContainer
+		gravity all
+		TBLayout: axis: y
+			TBLayout: size: available, position: gravity, distribution: available
+				TBButton: text: 1
+					lp: pref-width: 500, pref-height: 480
+				TBButton: text: 2
+					lp: pref-width: 600, pref-height: 480
+				TBButton: text: Hi
+					lp: pref-width: 256, pref-height: 480
+			TBLayout: size: available, position: gravity, distribution: available
+				TBButton: text: Hi Again
+					lp: pref-width: 400, pref-height: 512
+				TBButton: text: 3
+					lp: pref-width: 200, pref-height: 512
+				TBButton: text: 4
+					lp: pref-width: 1000, pref-height: 512
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIScrollContainer help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiscrollcontainer.html"
+		TBButton: text: "UIScrollContainer application code", id: uiscrollcontainercode
+		TBButton: text: "UIScrollContainer layout code", id: uiscrollcontainerlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uisection.ui.txt

@@ -0,0 +1,17 @@
+# UISection widget layout file
+TBLayout: axis: y, size: available, position: gravity, distribution: gravity
+	TBTextField: text: "this is the Example of a UISection widget"
+	TBSection: value: 0, text: "UISection 1", id: "UISectionDemo"
+		TBLayout: axis: y
+			TBTextField: text: "this is UISection contents"
+			TBTextField: text: "this is UISection contents"
+			TBTextField: text: "this is UISection contents"
+			TBTextField: text: "this is UISection contents"
+	TBSection: value: 0, text: "UISection 2", id: "UISection2Demo"
+		@file sheet.ui.txt
+	TBWidget: gravity: all, id: "UIsectionFiller"
+	TBLayout
+		TBButton: text: "UISection help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uisection.html"
+		TBButton: text: "UISection application code", id: uisectioncode
+		TBButton: text: "UISection layout code", id: uisectionlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectdropdown.ui.txt

@@ -0,0 +1,16 @@
+# UISelectDropdown widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UISelectDropdown widget"
+	TBSelectDropdown: id: selectdropdowndemo
+		lp: min-width: 128dp
+		items:
+			item: text: "SelectDropdown 1"
+			item: text: "SelectDropdown 2"
+			item: text: "SelectDropdown 3"
+			item: text: "SelectDropdown 4"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISelectDropdown help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiselectdropdown.html"
+		TBButton: text: "UISelectDropdown application code", id: uiselectdropdowncode
+		TBButton: text: "UISelectDropdown layout code", id: uiselectdropdownlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectitem.ui.txt

@@ -0,0 +1,14 @@
+# UISelectItem and UISelectItemSource object layout file
+TBLayout: axis: y, id: selectitemlayout
+	TBTextField: text: "this is the Example of the UISelectItem and UISelectItemSource objects"
+	TBButton: text: "Add UISelectItem text", id: uisi1
+	TBButton: text: "Add UISelectItem text,id", id: uisi2
+	TBButton: text: "Add UISelectItem text,id,icon", id: uisi3
+	TBButton: text: "Add UISelectItem Atomic entry", id: uisi4
+	TBButton: text: "Clear UISelectItemSource", id: uisi5
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISelectItem help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiselectitem.html"
+		TBButton: text: "UISelectItem application code", id: uiselectitemcode
+		TBButton: text: "UISelectItem layout code", id: uiselectitemlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectlist.ui.txt

@@ -0,0 +1,20 @@
+# UISelectList widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UISelectList widget"
+	TBContainer
+		TBSelectList: id: UISelectListDemo
+			items:
+				item: text: "entry1", id: UISelectListE1
+				item: text: "entry2", id: UISelectListE2
+				item: text: "-"
+				item: text: "entry3", id: UISelectListE3
+	TBButton: id: selectlistadd, text: "UISelectList add entry to list"
+	TBButton: id: selectlistdel, text: "UISelectList delete selected entry"
+	TBButton: id: selectlistdelall, text: "UISelectList delete all"
+	TBButton: id: selectlistnew, text: "UISelectList add new entry set"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISelectList help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiselectlist.html"
+		TBButton: text: "UISelectList application code", id: uiselectlistcode
+		TBButton: text: "UISelectList layout code", id: uiselectlistlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiseparator.ui.txt

@@ -0,0 +1,15 @@
+# UISeparator widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UISeparator widget"
+	TBContainer
+		TBLayout: axis: y
+			TBTextField: text: "        v          "
+			TBSeparator
+				lp: width: 200dp, height: 4dp
+			TBTextField: text: "        ^          "
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISeparator help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiseparator.html"
+		TBButton: text: "UISeparator application code", id: uiseparatorcode
+		TBButton: text: "UISeparator layout code", id: uiseparatorlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiskinimage.ui.txt

@@ -0,0 +1,13 @@
+# UISkinImage widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UISkinImage widget"
+	TBContainer
+		TBLayout
+			TBButton: skin: 0
+				TBSkinImage: skin: LogoAtomic
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISkinImage help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiskinimage.html"
+		TBButton: text: "UISkinImage application code", id: uiskinimagecode
+		TBButton: text: "UISkinImage layout code", id: uiskinimagelayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uislider.ui.txt

@@ -0,0 +1,11 @@
+# UISlider widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UISlider widget"
+	TBSlider: min: 0, max: 100, value: 50, id: sliderdemo
+		lp: width: 200dp
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UISlider help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uislider.html"
+		TBButton: text: "UISlider application code", id: uislidercode
+		TBButton: text: "UISlider layout code", id: uisliderlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitabcontainer.ui.txt

@@ -0,0 +1,31 @@
+# UITabContainer widget layout file
+TBLayout: axis: y, size: available, position: gravity, distribution: gravity
+	TBTextField: text: "this is the Example of a UITabContainer widget"
+	TBTabContainer:
+		gravity all
+		id UITabContainerDemo
+		tabs
+			TBButton
+				text tab1
+			TBButton
+				text tab2
+			TBButton
+				text tab3
+		TBLayout: axis: y, size: available, position: gravity, distribution: available, id: "TabLayout1"
+			TBButton: text: "TAB 1"
+				font: size: 80dp
+		TBLayout: axis: y, size: available, position: gravity, distribution: available, id: "TabLayout2"
+			TBButton: text: "TAB 2"
+				font: size: 80dp
+		TBLayout: axis: y, size: available, position: gravity, distribution: available, id: "TabLayout3"
+			TBButton: text: "TAB 3"
+				font: size: 80dp
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "Remove Current Tab", id: uitabcontainerremove
+		TBButton: text: "Add a Tab file ", id: uitabcontaineradd
+		TBButton: text: "Add a Tab code", id: uitabcontainermake
+		TBButton: text: "UITabContainer help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uitabcontainer.html"
+		TBButton: text: "UITabContainer application code", id: uitabcontainercode
+		TBButton: text: "UITabContainer layout code", id: uitabcontainerlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitextfield.ui.txt

@@ -0,0 +1,11 @@
+# UITextField widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UITextField widget"
+	TBContainer
+		TBTextField: text: "TextField widget"
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UITextField help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uitextfield.html"
+		TBButton: text: "UITextField application code", id: uitextfieldcode
+		TBButton: text: "UITextField layout code", id: uitextfieldlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitexturewidget.ui.txt

@@ -0,0 +1,5 @@
+# UITextureWidget layout file
+TBLayout: axis: y, id: uitwcontainer
+	TBTextField: text: "this is the Example of the UITextureWidget"
+# there is NO TBTextureWidget, its entirely an Atomic Widget, well add it with code
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiwidget.ui.txt

@@ -0,0 +1,14 @@
+# UIWidget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIWidget"
+	TBTextField: text: "v"
+	TBWidget
+		lp: min-width 128dp, nim-height: 32dp
+	TBTextField: text: "^"
+	TBTextField: text: "There it is. You really cant do squat with a UIWidget, except use it as a spacer at times."
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "UIWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiwidget.html"
+		TBButton: text: "UIWidget application code", id: uiwidgetcode
+		TBButton: text: "UIWidget layout code", id: uiwidgetlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiwindow.ui.txt

@@ -0,0 +1,11 @@
+# UIWindow widget layout file
+TBLayout: axis: y
+	TBTextField: text: "this is the Example of a UIWindow widget"
+	TBButton: id: windowdemo, text: "Bring up a login UIWindow..."
+	TBButton: id: windowdemo1, text: "Bring up a table UIWindow..."
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: "uiwindowhelp", text: "UIWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiwindow.html"
+		TBButton: text: "UIWindow application code", id: uiwindowcode
+		TBButton: text: "UIWindow layout code", id: uiwindowlayout
+

UIPeriodicTable/JavaScript/Resources/Scenes/login_dialog.ui.txt

@@ -0,0 +1,11 @@
+# full "responsive" login dialog example
+TBLayout: axis: y
+	lp: min-width: 256
+	TBTextField: text: "  User Name or Email  ", text-align: left, gravity: left right
+	TBEditField: gravity: left right
+	TBTextField: text: "Password", text-align: left, gravity: left right
+	TBEditField: type: password, gravity: left right
+	TBLayout
+		TBButton: text: Cancel, skin: ColorButton, id: "cancel"
+		TBButton: text: Login, skin: ColorButton, id: "login"
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_atomic_layout.ui.txt

@@ -0,0 +1,69 @@
+# main layout file
+TBTabContainer
+	gravity all
+	id atomictabs
+	tabs
+		TBButton
+			text UIListView
+		TBButton
+			text UISceneView
+		TBButton
+			text UITextureWidget
+		TBButton
+			text UIPulldownMenu
+		TBButton
+			text UIColorWidget
+		TBButton
+			text UIBargraph
+		TBButton
+			text UIColorWheel
+		TBButton
+			text UIPromptWindow
+		TBButton
+			text UIFinderWindow
+	TBLayout
+		id pageuilistview
+		size available
+		distribution available
+		@file layout_uilistview.ui.txt
+	TBLayout
+		id pageuisceneview
+		size available
+		distribution available
+		@file layout_uisceneview.ui.txt
+	TBLayout
+		id pageuitexturewidget
+		size available
+		distribution available
+		@file layout_uitexturewidget.ui.txt
+	TBLayout
+		id pageuipulldownmenu
+		size available
+		distribution available
+		@file layout_uipulldownmenu.ui.txt
+	TBLayout
+		id pageuicolorwidget
+		size available
+		distribution available
+		@file layout_uicolorwidget.ui.txt
+	TBLayout
+		id pageuibargraph
+		size available
+		distribution available
+		@file layout_uibargraph.ui.txt
+	TBLayout
+		id pageuicolorwheel
+		size available
+		distribution available
+		@file layout_uicolorwheel.ui.txt
+	TBLayout
+		id pageuipromptwindow
+		size available
+		distribution available
+		@file layout_uipromptwindow.ui.txt
+	TBLayout
+		id pageuifinderwindow
+		size available
+		distribution available
+		@file layout_uifinderwindow.ui.txt
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_layout.ui.txt

@@ -0,0 +1,59 @@
+# UI periodic table Layout file
+TBTabContainer
+	gravity all
+	id maintabs
+	skin TBWindow
+	align bottom
+	tabs
+		TBButton
+			text Periodic Table
+			font
+				size: 16dp
+		TBButton
+			text Primary Widgets
+			font
+				size 16dp
+		TBButton
+			text More Widgets
+			font
+				size 16dp
+		TBButton
+			text Support Objects
+			font
+				size 16dp
+		TBButton
+			text Atomic Widgets
+			font
+				size 16dp
+	TBLayout
+		id pagetable
+		axis y
+		@file main_table.ui.txt
+	TBLayout
+		id pageprimary
+		distribution available
+		gravity all
+		@file main_primary_layout.ui.txt
+	TBLayout
+		id pagemore
+		distribution available
+		gravity all
+		@file main_more_layout.ui.txt
+	TBLayout
+		id pagesupport
+		distribution available
+		gravity all
+		@file main_support_layout.ui.txt
+	TBLayout
+		id pageatomic
+		distribution available
+		gravity all
+		@file main_atomic_layout.ui.txt
+TBLayout: axis: x, distribution-position: left right
+	lp: min-height: 32dp, max-height: 32dp
+	TBButton: id: exitapp
+		TBSkinImage: skin: LogoAtomic
+		gravity: left
+		lp: pref-width: 32dp, pref-height: 32dp
+	TBTextField: id: LogText, text: "This is the Atomic Widget Periodic Table"
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_more_layout.ui.txt

@@ -0,0 +1,69 @@
+# more widgets layout file
+TBTabContainer
+	gravity all
+	id moretabs
+	tabs
+		TBButton
+			text UILayout
+		TBButton
+			text UISelectDropdown
+		TBButton
+			text UIImageWidget
+		TBButton
+			text UIMenuWindow
+		TBButton
+			text UIClickLabel
+		TBButton
+			text UIScrollBar
+		TBButton
+			text UISeparator
+		TBButton
+			text UISection
+		TBButton
+			text UIMessageWindow
+	TBLayout
+		id pageuilayout
+		size available
+		distribution available
+		@file layout_uilayout.ui.txt
+	TBLayout
+		id pageuiselectdropdown
+		size available
+		distribution available
+		@file layout_uiselectdropdown.ui.txt
+	TBLayout
+		id pageuiimagewidget
+		size available
+		distribution available
+		@file layout_uiimagewidget.ui.txt
+	TBLayout
+		id pageuimenuwindow
+		size available
+		distribution available
+		@file layout_uimenuwindow.ui.txt
+	TBLayout
+		id pageuiclicklabel
+		size available
+		distribution available
+		@file layout_uiclicklabel.ui.txt
+	TBLayout
+		id pageuiscrollbar
+		size available
+		distribution available
+		@file layout_uiscrollbar.ui.txt
+	TBLayout
+		id pageuiseparator
+		size available
+		distribution available
+		@file layout_uiseparator.ui.txt
+	TBLayout
+		id pageuisection
+		size available
+		distribution available
+		@file layout_uisection.ui.txt
+	TBLayout
+		id pageuimessagewindow
+		size available
+		distribution available
+		@file layout_uimessagewindow.ui.txt
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_primary_layout.ui.txt

@@ -0,0 +1,69 @@
+# primary widgets layout file
+TBTabContainer
+	gravity all
+	id primarytabs
+	tabs
+		TBButton
+			text UIButton
+		TBButton
+			text UITextField
+		TBButton
+			text UIEditField
+		TBButton
+			text UICheckBox
+		TBButton
+			text UISelectList
+		TBButton
+			text UIInlineSelect
+		TBButton
+			text UISlider
+		TBButton
+			text UIRadioButton
+		TBButton
+			text UITabContainer
+	TBLayout
+		id pageuibutton
+		size available
+		distribution available
+		@file layout_uibutton.ui.txt
+	TBLayout
+		id pageuitextfield
+		size available
+		distribution available
+		@file layout_uitextfield.ui.txt
+	TBLayout
+		id pageuieditfield
+		size available
+		distribution available
+		@file layout_uieditfield.ui.txt
+	TBLayout
+		id pageuicheckbox
+		size available
+		distribution available
+		@file layout_uicheckbox.ui.txt
+	TBLayout
+		id pageuiselectlist
+		size available
+		distribution available
+		@file layout_uiselectlist.ui.txt
+	TBLayout
+		id pageuiinlineselect
+		size available
+		distribution available
+		@file layout_uiinlineselect.ui.txt
+	TBLayout
+		id pageuislider
+		size available
+		distribution available
+		@file layout_uislider.ui.txt
+	TBLayout
+		id pageuiradiobutton
+		size available
+		distribution available
+		@file layout_uiradiobutton.ui.txt
+	TBLayout
+		id pageuitabcontainer
+		size available
+		distribution available
+		@file layout_uitabcontainer.ui.txt
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_support_layout.ui.txt

@@ -0,0 +1,69 @@
+# support objects layout file
+TBTabContainer
+	gravity all
+	id supporttabs
+	tabs
+		TBButton
+			text UIWidget
+		TBButton
+			text UIScrollContainer
+		TBButton
+			text UIContainer
+		TBButton
+			text UISkinImage
+		TBButton
+			text UIWindow
+		TBButton
+			text UISelectItem
+		TBButton
+			text UIMenuItem
+		TBButton
+			text UIFontDescription
+		TBButton
+			text UILayoutParams
+	TBLayout
+		id pageuiwidget
+		size available
+		distribution available
+		@file layout_uiwidget.ui.txt
+	TBLayout
+		id pageuiscrollcontainer
+		size available
+		distribution available
+		@file layout_uiscrollcontainer.ui.txt
+	TBLayout
+		id pageuicontainer
+		size available
+		distribution available
+		@file layout_uicontainer.ui.txt
+	TBLayout
+		id pageuiskinimage
+		size available
+		distribution available
+		@file layout_uiskinimage.ui.txt
+	TBLayout
+		id pageuiwindow
+		size available
+		distribution available
+		@file layout_uiwindow.ui.txt
+	TBLayout
+		id pageuiselectitem
+		size available
+		distribution available
+		@file layout_uiselectitem.ui.txt
+	TBLayout
+		id pageuimenuitem
+		size available
+		distribution available
+		@file layout_uimenuitem.ui.txt
+	TBLayout
+		id pageuifontdescription
+		size available
+		distribution available
+		@file layout_uifontdescription.ui.txt
+	TBLayout
+		id pageuilayoutparams
+		size available
+		distribution available
+		@file layout_uilayoutparams.ui.txt
+

UIPeriodicTable/JavaScript/Resources/Scenes/main_table.ui.txt

@@ -0,0 +1,95 @@
+# Atomic Widget Periodic Table layout file
+TBTextField:  text: "Atomic Widget Periodic Table", gravity: top left right
+	font: size: 32dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBTextField:  text: "Primary Widgets", squeezable: 1
+		lp: pref-width: 150dp
+	TBTextField: text: "More Widgets", squeezable: 1
+		lp: pref-width: 150dp
+	TBTextField: text: "Support Objects", squeezable: 1
+		lp: pref-width: 150dp
+	TBTextField: text: "Atomic Widgets", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A1, text: "UIButton", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B1, text: "UILayout", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C1, text: "UIWidget", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D1, text: "UIListView", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A2, text: "UITextField", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B2, text: "UISelectDropdown", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C2, text: "UIScrollContainer", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D2, text: "UISceneView", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A3, text: "UIEditField", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B3, text: "UIImageWidget", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C3, text: "UIContainer", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D3, text: "UITextureWidget", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A4, text: "UICheckBox", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B4, text: "UIMenuWindow", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C4, text: "UISkinImage", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D4, text: "UIPulldownMenu", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A5, text: "UISelectList", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B5, text: "UIClickLabel", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C5, text: "UIWindow", squeezable: 1	
+		lp: pref-width: 150dp
+	TBButton: id: D5, text: "UIColorWidget", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A6, text: "UIInlineSelect", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B6, text: "UIScrollBar", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C6, text: "UISelectItem", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D6, text: "UIBargraph", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A7, text: "UISlider", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B7, text: "UISeparator", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C7, text: "UIMenuItem", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D7, text: "UIColorWheel", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A8, text: "UIRadioButton", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B8, text: "UISection", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C8, text: "UIFontDescription", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D8, text: "UIPromptWindow", squeezable: 1
+		lp: pref-width: 150dp
+TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
+	TBButton: id: A9, text: "UITabContainer", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: B9, text: "UIMessageWindow", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: C9, text: "UILayoutParams", squeezable: 1
+		lp: pref-width: 150dp
+	TBButton: id: D9, text: "UIFinderWindow", squeezable: 1
+		lp: pref-width: 150dp
+TBWidget
+

UIPeriodicTable/JavaScript/Resources/Scenes/sceneview.scene

@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<scene id="1">
+	<attribute name="Name" value="" />
+	<attribute name="Time Scale" value="1" />
+	<attribute name="Smoothing Constant" value="50" />
+	<attribute name="Snap Threshold" value="5" />
+	<attribute name="Elapsed Time" value="0" />
+	<attribute name="Next Replicated Node ID" value="368" />
+	<attribute name="Next Replicated Component ID" value="1982" />
+	<attribute name="Next Local Node ID" value="16778496" />
+	<attribute name="Next Local Component ID" value="16777216" />
+	<attribute name="Variables" />
+	<attribute name="Variable Names" value="" />
+	<component type="PhysicsWorld" id="1" />
+	<component type="Octree" id="2" />
+	<component type="DebugRenderer" id="3">
+		<attribute name="Line Antialias" value="true" />
+	</component>
+	<node id="2">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Zone" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 9.31323e-10 -1.35601e-06" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Zone" id="4">
+			<attribute name="Bounding Box Min" value="-10000 -10000 -10000" />
+			<attribute name="Bounding Box Max" value="10000 10000 10000" />
+			<attribute name="Ambient Color" value="0.4 0.4 0.4 1" />
+			<attribute name="Fog Color" value="0 0.349169 0.164442 1" />
+		</component>
+	</node>
+	<node id="3">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="GlobalLight" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="0.888074 0.325058 -0.325058 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Light" id="5">
+			<attribute name="Light Type" value="Directional" />
+			<attribute name="Cast Shadows" value="true" />
+			<attribute name="CSM Splits" value="10 20 50 0" />
+			<attribute name="View Size Quantize" value="1" />
+			<attribute name="View Size Minimum" value="5" />
+			<attribute name="Depth Constant Bias" value="0.00025" />
+			<attribute name="Depth Slope Bias" value="0.001" />
+		</component>
+	</node>
+	<node id="361">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Camera" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 -1" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Camera" id="1973" />
+	</node>
+	<node id="363">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="TheWorld" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 2" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="StaticModel" id="1975">
+			<attribute name="Model" value="Model;Models/Sphere.mdl" />
+			<attribute name="Material" value="Material;Materials/planet.material" />
+			<attribute name="Geometry Enabled">
+				<variant type="Bool" value="true" />
+			</attribute>
+		</component>
+		<component type="JSComponent" id="1978">
+			<attribute name="ComponentFile" value="JSComponentFile;Components/Spinner.js" />
+		</component>
+	</node>
+</scene>

UIPeriodicTable/JavaScript/Resources/Scenes/sheet.ui.txt

@@ -0,0 +1,108 @@
+# (spread)sheet like layout file
+TBLayout: distribution: gravity, distribution-position: left
+	axis y
+	TBScrollContainer
+		gravity all
+		TBLayout: spacing: 1
+			position left top
+			axis y
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t0A, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t0B, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t0C, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t0D, text: "UISelectItem", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t1A, text: "UIWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t1B, text: "UIWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t1C, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t1D, text: "UISelectItemSource", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t2A, text: "UIButton", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t2B, text: "UIMessageWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t2C, text: "UIView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t2D, text: "UIMenuItem", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t3A, text: "UIEditField", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t3B, text: "UITabContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t3C, text: "UILayout", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t3D, text: "UIMenuItemSource", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t4A, text: "UICheckBox", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t4B, text: "UIListView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t4C, text: "UITextField", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t4D, text: "UILayoutParams", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t5A, text: "UISelectList", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t5B, text: "UIMenuWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t5C, text: "UISkinImage", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t5D, text: "UIFontDescription", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t6A, text: "UIInlineSelect", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t6B, text: "UIClickLabel", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t6C, text: "UIImageWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t6D, text: "UIPreferredSize", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t7A, text: "UISelectDropdown", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t7B, text: "UISection", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t7C, text: "UISeparator", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t7D, text: "UIContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t8A, text: "UISlider", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t8B, text: "UISceneView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t8C, text: "UITextureWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t8D, text: "UIScrollContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: t9A, text: "UIColorWheel", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t9B, text: "UIPromptWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t9C, text: "UIColorWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: t9D, text: "UIDimmer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
+				TBTextField: id: tAA, text: "UIPulldownMenu", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: tAB, text: "UIFinderWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: tAC, text: "UIBargraph", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+				TBTextField: id: tAD, text: "UIDragObject", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+					lp: pref-width: 150dp
+

UIPeriodicTable/JavaScript/Resources/Scenes/simp_button.ui.txt

@@ -0,0 +1,8 @@
+# layout support layout file
+TBButton: text: "UIButton"
+TBButton:
+	TBSkinImage: skin: ReadyButton
+TBButton: text: "I`m Atomic"
+	TBSkinImage: skin: LogoAtomic
+TBButton: text: "Press me, I`m green", skin: ColorButton
+

UIPeriodicTable/JavaScript/Resources/Scenes/view_code.ui.txt

@@ -0,0 +1,10 @@
+# code viewer user interface layout
+TBLayout: axis: y, size: available, position: gravity, distribution: gravity
+	lp: min-width: 800dp, min-height: 400dp
+	TBLayout: distribution: gravity, distribution-position: left
+		TBEditField: id: "viewCodeText", multiline: 1, styling: 0, gravity: all, readonly: 1, adapt-to-content: 0, text: ""
+			font: size: 14dp
+			lp: min-width: 800dp
+	TBButton: text: "OK", id: "viewCodeOK"
+		font: size: 14dp
+

UIPeriodicTable/JavaScript/Resources/Scenes/view_layout.ui.txt

@@ -0,0 +1,53 @@
+# LAYOUT-O-MATIC layout file
+TBLayout: axis: y
+	lp: min-width: 320dp
+	TBLayout: distribution: gravity, distribution-position: left
+		TBTextField: text: "Axis", text-align: right
+			lp: pref-width: 160dp
+		TBClickLabel: text: X(D)
+			TBRadioButton: group-id: set_axis, id: set_ax, data: 0, value: 1
+		TBClickLabel: text: Y
+			TBRadioButton: group-id: set_axis, id: set_ay, data: 1
+	TBLayout: distribution: gravity, distribution-position: left
+		TBTextField: text: "Size", text-align: right
+			lp: pref-width: 160dp
+		TBClickLabel: text: Available
+			TBRadioButton: group-id: set_sz, id: set_sza, data: 0
+		TBClickLabel: text: Gravity(D)
+			TBRadioButton: group-id: set_sz, id: set_szg, data: 1, value: 1
+		TBClickLabel: text: Preferred
+			TBRadioButton: group-id: set_sz, id: set_szp, data: 2
+	TBLayout: distribution: gravity, distribution-position: left
+		TBTextField: text: "Position", text-align: right
+			lp: pref-width: 160dp
+		TBClickLabel: text: Center(D)
+			TBRadioButton: group-id: set_pos, id: set_posc, data: 0, value: 1
+		TBClickLabel: text: Gravity
+			TBRadioButton: group-id: set_pos, id: set_posg, data: 1
+		TBClickLabel: text: LeftTop
+			TBRadioButton: group-id: set_pos, id: set_posl, data: 2
+		TBClickLabel: text: RightBottom
+			TBRadioButton: group-id: set_pos, id: set_posr, data: 3
+	TBLayout: distribution: gravity, distribution-position: left
+		TBTextField: text: "Distribution", text-align: right
+			lp: pref-width: 160dp
+		TBClickLabel: text: Available
+			TBRadioButton: group-id: set_dist, id: set_dista, data: 0
+		TBClickLabel: text: Gravity
+			TBRadioButton: group-id: set_dist, id: set_distg, data: 1
+		TBClickLabel: text: Preferred(D)
+			TBRadioButton: group-id: set_dist, id: set_distp, data: 2, value: 1
+	TBLayout: distribution: gravity, distribution-position: left
+		TBTextField: text: "Distribution Position", text-align: right
+			lp: pref-width: 160dp
+		TBClickLabel: text: Center(D)
+			TBRadioButton: group-id: set_dp, id: set_dpc, data: 0, value: 1
+		TBClickLabel: text: LeftTop
+			TBRadioButton: group-id: set_dp, id: set_dpl, data: 1
+		TBClickLabel: text: RightBottom
+			TBRadioButton: group-id: set_dp, id: set_dpr, data: 2
+	TBSeparator
+		lp: min-width: 320dp
+	TBLayout
+		TBButton: text: OK, id: "ok"
+

UIPeriodicTable/JavaScript/Resources/Scripts/main.js

@@ -0,0 +1,84 @@
+// This script is the main entry point of the game
+//Load scene
+Atomic.player.loadScene("Scenes/Scene.scene");
+
+// build host for GUI, which there will be a lot of.
+var view = new Atomic.UIView();
+var layout = new Atomic.UILayout();
+layout.rect = view.rect;
+layout.axis = Atomic.UI_AXIS_Y;
+layout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
+layout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_AVAILABLE;
+layout.layoutPosition = Atomic.UI_LAYOUT_POSITION_GRAVITY;
+layout.setSkinBg ("background_solid");  // make it look good as a user program
+
+
+Atomic.ui.addFont("Textures/BrokenGlass.ttf", "BrokenGlass"); // add a font
+
+// set up some stuff for mobile, so we can use the same app code & layouts
+if (( Atomic.platform == "Android" ) || Atomic.platform == "iOS") {
+    Atomic.ui.loadSkin("Textures/mobile.tb.txt");
+    Atomic.ui.setDefaultFont("Vera", 14);
+}
+else {
+    Atomic.ui.loadSkin("Textures/desktop.tb.txt");
+}
+
+layout.load("Scenes/main_layout.ui.txt"); // load the main layout
+view.addChild(layout);
+
+var maintb = layout.getWidget("maintabs");
+var acttb = layout.getWidget("primarytabs");
+var semitb = layout.getWidget("moretabs");
+var viewtb = layout.getWidget("supporttabs");
+var supporttb = layout.getWidget("atomictabs");
+supporttb.setCurrentPage(0); 
+viewtb.setCurrentPage(0); 
+semitb.setCurrentPage(0); 
+acttb.setCurrentPage(0);
+maintb.setCurrentPage(0); // do this or esle the tab contents look like crap!
+
+// exit by pressing the atomic logo button
+layout.getWidget("exitapp").onClick = function () { Atomic.engine.exit(); };
+
+//hookup code on all the pages
+var logger = layout.getWidget("LogText");
+var someview = layout.view;
+require("Components/code_table").init(layout, logger);
+require("Components/code_uiwidget").init(layout.getWidget("pageuiwidget"), logger);
+require("Components/code_uibargraph").init(layout.getWidget("pageuibargraph"), logger);
+require("Components/code_uibutton").init(layout.getWidget("pageuibutton"), logger);
+require("Components/code_uicheckbox").init(layout.getWidget("pageuicheckbox"), logger);
+require("Components/code_uiclicklabel").init(layout.getWidget("pageuiclicklabel"), logger);
+require("Components/code_uicolorwheel").init(layout.getWidget("pageuicolorwheel"), logger);
+require("Components/code_uicolorwidget").init(layout.getWidget("pageuicolorwidget"), logger);
+require("Components/code_uicontainer").init(layout.getWidget("pageuicontainer"), logger);
+require("Components/code_uieditfield").init(layout.getWidget("pageuieditfield"), logger);
+require("Components/code_uifinderwindow").init(layout.getWidget("pageuifinderwindow"), logger, someview);
+require("Components/code_uifontdescription").init(layout.getWidget("pageuifontdescription"), logger);
+require("Components/code_uiimagewidget").init(layout.getWidget("pageuiimagewidget"), logger);
+require("Components/code_uiinlineselect").init(layout.getWidget("pageuiinlineselect"), logger);
+require("Components/code_uilayoutparams").init(layout.getWidget("pageuilayoutparams"), logger);
+require("Components/code_uilayout").init(layout.getWidget("pageuilayout"), logger, someview);
+require("Components/code_uilistview").init(layout.getWidget("pageuilistview"), logger);
+require("Components/code_uimenuitem").init(layout.getWidget("pageuimenuitem"), logger);
+require("Components/code_uimenuwindow").init(layout.getWidget("pageuimenuwindow"), logger);
+require("Components/code_uimessagewindow").init(layout.getWidget("pageuimessagewindow"), logger);
+require("Components/code_uipromptwindow").init(layout.getWidget("pageuipromptwindow"), logger, someview);
+require("Components/code_uipulldownmenu").init(layout.getWidget("pageuipulldownmenu"), logger);
+require("Components/code_uiradiobutton").init(layout.getWidget("pageuiradiobutton"), logger);
+require("Components/code_uisceneview").init(layout.getWidget("pageuisceneview"), logger);
+require("Components/code_uiscrollbar").init(layout.getWidget("pageuiscrollbar"), logger);
+require("Components/code_uiscrollcontainer").init(layout.getWidget("pageuiscrollcontainer"), logger);
+require("Components/code_uisection").init(layout.getWidget("pageuisection"), logger);
+require("Components/code_uiselectdropdown").init(layout.getWidget("pageuiselectdropdown"), logger);
+require("Components/code_uiselectitem").init(layout.getWidget("pageuiselectitem"), logger);
+require("Components/code_uiselectlist").init(layout.getWidget("pageuiselectlist"), logger);
+require("Components/code_uiseparator").init(layout.getWidget("pageuiseparator"), logger);
+require("Components/code_uiskinimage").init(layout.getWidget("pageuiskinimage"), logger);
+require("Components/code_uislider").init(layout.getWidget("pageuislider"), logger);
+require("Components/code_uitabcontainer").init(layout.getWidget("pageuitabcontainer"), logger);
+require("Components/code_uitextfield").init(layout.getWidget("pageuitextfield"), logger);
+require("Components/code_uitexturewidget").init(layout.getWidget("pageuitexturewidget"), logger);
+require("Components/code_uiwindow").init(layout.getWidget("pageuiwindow"), logger, someview);
+

UIPeriodicTable/JavaScript/Resources/Scripts/utils.js

@@ -0,0 +1,22 @@
+// code viewer utility
+// shows project relative text files
+exports.viewCode = function(codeFile, mylayout) {
+
+ 	    var window = new Atomic.UIWindow();
+    	window.setSettings ( Atomic.UI_WINDOW_SETTINGS_TITLEBAR + Atomic.UI_WINDOW_SETTINGS_RESIZABLE + Atomic.UI_WINDOW_SETTINGS_CLOSE_BUTTON );
+    	window.text = "Code Viewer";
+   	 	window.load("Scenes/view_code.ui.txt");
+
+    	var filex = Atomic.cache.getFile(codeFile);
+    	var textx = filex.readText();
+    	window.getWidget("viewCodeText").text = textx;
+
+    	window.resizeToFitContent();
+    	mylayout.view.addChild(window);
+ 	   	window.center();
+ 		window.getWidget("viewCodeOK").onClick = function () {
+       		window.die();
+        	window = null;
+    	};
+
+};

UIPeriodicTable/JavaScript/Resources/Textures/License.txt

@@ -0,0 +1,22 @@
+License for icon_duck.png and text_ready.png
+###############################################################################
+
+
+	Shooting Gallery pack
+	by Kenney Vleugels for Kenney (www.kenney.nl)
+
+			------------------------------
+
+	License (Creative Commons Zero, CC0)
+	http://creativecommons.org/publicdomain/zero/1.0/
+
+	You may use these graphics in personal and commercial projects.
+	Credit (Kenney or www.kenney.nl) would be nice but is not mandatory.
+
+			------------------------------
+
+	Donate:   http://donate.kenney.nl/
+	Request:  http://request.kenney.nl/
+
+
+###############################################################################

UIPeriodicTable/JavaScript/Resources/Textures/Readme.txt

@@ -0,0 +1,3 @@
+Broken Glass Font
+
+The Broken Glass font is a display font reminiscent of broken glass. It is based on a block-letter font. It comes with letters, numbers, punctuation and international characters. This font is in the public domain. Please read the terms of use at http://jlhfonts.blogspot.com/.