connection between planky script and web-window

-load settings
-include toolbar

examples/example/games/planky.js

@@ -12,6 +12,8 @@
 //
 HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";
 
+Script.include("../../libraries/toolBars.js");
+
 const DEFAULT_NUM_LAYERS = 16;
 const DEFAULT_BASE_DIMENSION = { x: 7, y: 2, z: 7 };
 const DEFAULT_BLOCKS_PER_LAYER = 3;
@@ -30,7 +32,7 @@ const DEFAULT_BLOCK_YAW_OFFSET = 45;
 
 var editMode = false;
 
-const BUTTON_DIMENSIONS = {width: 49, height: 49};
+const BUTTON_DIMENSIONS = {width: 50, height: 50};
 const MAXIMUM_PERCENTAGE = 100.0;
 const NO_ANGLE = 0;
 const RIGHT_ANGLE = 90;
@@ -42,12 +44,30 @@ var ground = false;
 var layerRotated = false;
 var button;
 var cogButton;
+var toolBar;
 
 SettingsWindow = function() {
+    var _this = this;
+    this.plankyStack = null;
     this.webWindow = null;
-    this.init = function() {
+    this.init = function(plankyStack) {
-        this.webWindow = new WebWindow('Planky', Script.resolvePath('../../html/plankySettings.html'), 255, 500, true);
+        _this.webWindow = new WebWindow('Planky', Script.resolvePath('../../html/plankySettings.html'), 255, 500, true);
-        this.webWindow.setVisible(false);
+        _this.webWindow.setVisible(false);
+        _this.webWindow.eventBridge.webEventReceived.connect(_this.onWebEventReceived);
+        _this.plankyStack = plankyStack;
+    };
+    this.sendData = function(data) {
+        _this.webWindow.eventBridge.emitScriptEvent(JSON.stringify(data));
+    };
+    this.onWebEventReceived = function(data) {
+        data = JSON.parse(data);
+        switch (data.action) {
+            case 'loaded':
+                _this.sendData({action: 'load', options: _this.plankyStack.options.getJSON()})
+                break;
+            default:
+                Window.alert('unknown action ' + data.action);
+        }
     };
 };
 
@@ -59,6 +79,24 @@ PlankyOptions = function() {
     this.load = function() {
         //TODO: load Planky Options here.
     };
+    this.getJSON = function() {
+        return {
+            numLayers: _this.numLayers,
+            baseDimension: _this.baseDimension,
+            blocksPerLayer: _this.blocksPerLayer,
+            blockSize: _this.blockSize,
+            blockSpacing: _this.blockSpacing,
+            blockHeightVariation: _this.blockHeightVariation,
+            gravity: _this.gravity,
+            density: _this.density,
+            dampingFactor: _this.dampingFactor,
+            angularDampingFactor: _this.angularDampingFactor,
+            friction: _this.friction,
+            restitution: _this.restitution,
+            spawnDistance: _this.spawnDistance,
+            blockYawOffset: _this.blockYawOffset,
+        };
+    }
     this.setDefaults = function() {
         _this.numLayers = DEFAULT_NUM_LAYERS;
         _this.baseDimension = DEFAULT_BASE_DIMENSION;
@@ -74,6 +112,7 @@ PlankyOptions = function() {
         _this.restitution = DEFAULT_RESTITUTION;
         _this.spawnDistance = DEFAULT_SPAWN_DISTANCE;
         _this.blockYawOffset = DEFAULT_BLOCK_YAW_OFFSET;
+
     };
     this.setDefaults();
 };
@@ -93,7 +132,7 @@ PlankyStack = function() {
         if (_this.ground) {
             Entities.deleteEntity(_this.ground);
         }
-        this.editLines.forEach(function(line) {
+        _this.editLines.forEach(function(line) {
             Entities.deleteEntity(line);
         })
         if (_this.centerLine) {
@@ -155,7 +194,7 @@ PlankyStack = function() {
         var found = false;
         var layerRotated = layer % 2 === 0;
         var layerRotation = Quat.fromPitchYawRollDegrees(0, layerRotated ? NO_ANGLE : RIGHT_ANGLE, 0.0);
-        var blockPositionXZ = ((row - (_this.options.blocksPerLayer / 2) + 0.5) * (_this.options.blockSpacing + _this.options.blockSize.x));
+        var blockPositionXZ = (row - (_this.options.blocksPerLayer / 2) + 0.5) * (_this.options.blockSpacing + _this.options.blockSize.x);
         var localTransform = Vec3.multiplyQbyV(_this.offsetRot, {
             x: (layerRotated ? blockPositionXZ : 0),
             y: (_this.options.blockSize.y / 2) + (_this.options.blockSize.y * layer),
@@ -217,9 +256,8 @@ PlankyStack = function() {
 };
 
 var settingsWindow = new SettingsWindow();
-settingsWindow.init();
-
 var plankyStack = new PlankyStack();
+settingsWindow.init(plankyStack);
 
 function grabLowestJointY() {
     var jointNames = MyAvatar.getJointNames();
@@ -232,66 +270,58 @@ function grabLowestJointY() {
     return floorY;
 }
 
-function getButtonPosX() {
-    return windowWidth - ((BUTTON_DIMENSIONS.width / 2) + BUTTON_DIMENSIONS.width);
-}
-
-function getCogButtonPosX() {
-    return getButtonPosX() - (BUTTON_DIMENSIONS.width * 1.1);
-}
-
 function createButtons() {
-    button = Overlays.addOverlay('image', {
+    toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.games.planky", function (windowDimensions, toolbar) {
-        x: getButtonPosX(),
+        return {
-        y: 10,
+            x: windowDimensions.x - (toolbar.width * 1.1),
+            y: toolbar.height / 2
+        };
+    });    
+    button = toolBar.addTool({
         width: BUTTON_DIMENSIONS.width,
         height: BUTTON_DIMENSIONS.height,
         imageURL: HIFI_PUBLIC_BUCKET + 'marketplace/hificontent/Games/blocks/planky_button.svg',
-        alpha: 0.8
+        alpha: 0.8,
+        visible: true
     });
 
-    cogButton = Overlays.addOverlay('image', {
+    cogButton = toolBar.addTool({
-        x: getCogButtonPosX(),
-        y: 10,
         width: BUTTON_DIMENSIONS.width,
         height: BUTTON_DIMENSIONS.height,
         imageURL: HIFI_PUBLIC_BUCKET + 'marketplace/hificontent/Games/blocks/cog.svg',
-        alpha: 0.8
+        alpha: 0.8,
+        visible: true
     });
 }
 // Fixes bug of not showing buttons on startup
-Script.setTimeout(createButtons, 1000);
+Script.setTimeout(createButtons, 2000);
 
 Controller.mousePressEvent.connect(function(event) {
     var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
-    if (clickedOverlay === button) {
+    if (toolBar.clicked(clickedOverlay) === button) {
         if (!plankyStack.isFound()) {
             plankyStack.rez();
             return;
         }
         editMode = !editMode;
         plankyStack.refresh();
-    } else if (clickedOverlay === cogButton) {
+    } else if (toolBar.clicked(clickedOverlay) === cogButton) {
         settingsWindow.webWindow.setVisible(true);
     }
 });
-                   
-function cleanup() {
-    Overlays.deleteOverlay(button);
-    Overlays.deleteOverlay(cogButton);
-    if (ground) {
-        Entities.deleteEntity(ground);
-    }
-    plankyStack.deRez();
-}
 
-function onUpdate() {
+Script.update.connect(function() {
     if (windowWidth !== Window.innerWidth) {
         windowWidth = Window.innerWidth;
         Overlays.editOverlay(button, {x: getButtonPosX()});
         Overlays.editOverlay(cogButton, {x: getCogButtonPosX()});
     }
-}
+})
 
-Script.update.connect(onUpdate)
+Script.scriptEnding.connect(function() {
-Script.scriptEnding.connect(cleanup);
+    toolBar.cleanup();
+    if (ground) {
+        Entities.deleteEntity(ground);
+    }
+    plankyStack.deRez();
+});

examples/html/plankySettings.html

@@ -1,110 +1,122 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">
+<link rel="stylesheet" type="text/css" href="style.css">
-    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
+<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
-    <script type="text/javascript">
+<script type="text/javascript">
-        var properties = [];
+var properties = [];
-        PropertyInput = function(key, label, value, attributes) {
+PropertyInput = function(key, label, value, attributes) {
-            this.key = key;
+    this.key = key;
-            this.label = label;
+    this.label = label;
-            this.value = value;
+    this.value = value;
-            this.attributes = attributes;
+    this.attributes = attributes;
-            var self = this;
+    var self = this;
-            this.construct = function() {
+    this.construct = function() {
-                self.widget = $('<div>').addClass('property').append(self.createLabel()).append(self.createValueDiv());
+        self.widget = $('<div>').addClass('property').append(self.createLabel()).append(self.createValueDiv());
-                $('#properties-list').append(self.widget);
+        $('#properties-list').append(self.widget);
-            };
+    };
-            this.createValue =  self.__proto__.createValue;
+    this.createValue =  self.__proto__.createValue;
-            this.getValue = self.__proto__.getValue;
+    this.getValue = self.__proto__.getValue;
-            this.createValueDiv = function() {
+    this.createValueDiv = function() {
-                self.inputDiv = $('<div>').addClass('value').append(self.createValue());
+        self.inputDiv = $('<div>').addClass('value').append(self.createValue());
-                return self.inputDiv;
+        return self.inputDiv;
-            };
+    };
-            this.addButton = function(id, buttonText) {
+    this.addButton = function(id, buttonText) {
-                self.inputDiv.append($('<div>').append($('<input>').attr('type', 'button').attr('id', id).val(buttonText)));
+        self.inputDiv.append($('<div>').append($('<input>').attr('type', 'button').attr('id', id).val(buttonText)));
-            };
+    };
-            this.createWidget = function() {
+    this.createWidget = function() {
-                self.widget = $('<div>').addClass('property').append(self.createLabel()).append(self.inputDiv);
+        self.widget = $('<div>').addClass('property').append(self.createLabel()).append(self.inputDiv);
-                return self.widget;
+        return self.widget;
-            };
+    };
-            this.createLabel = function() {
+    this.createLabel = function() {
-                self.label = $('<div>').addClass('label').text(label);
+        self.label = $('<div>').addClass('label').text(label);
-                return self.label;
+        return self.label;
-            };
+    };
-            this.setValue = function(value) {
+    this.setValue = function(value) {
-                self.input.val(value);
+        self.input.val(value);
-            };
+    };
-            this.construct();
+    this.construct();
-        };
+};
 
-        NumberInput = function(key, label, value, attributes) {
+NumberInput = function(key, label, value, attributes) {
-            PropertyInput.call(this, key, label, value, attributes);
+    PropertyInput.call(this, key, label, value, attributes);
-        };
+};
-        NumberInput.prototype = Object.create(PropertyInput.prototype);
+NumberInput.prototype = Object.create(PropertyInput.prototype);
-        NumberInput.prototype.constructor = NumberInput;
+NumberInput.prototype.constructor = NumberInput;
-        NumberInput.prototype.createValue = function() {
+NumberInput.prototype.createValue = function() {
-            this.input = $('<input>').attr('name', this.key).attr('type', 'number').val(this.value);
+    this.input = $('<input>').attr('name', this.key).attr('type', 'number').val(this.value);
-            if (this.attributes !== undefined) {
+    if (this.attributes !== undefined) {
-                this.input.attr(this.attributes);
+        this.input.attr(this.attributes);
+    }
+    return this.input;
+};
+NumberInput.prototype.getValue = function() {
+    return this.input.val();
+};
+
+CoordinateInput = function(key, label, value, attributes) {
+    PropertyInput.call(this, key, label, value, attributes);
+};
+CoordinateInput.prototype = Object.create(PropertyInput.prototype);
+CoordinateInput.prototype.constructor = CoordinateInput;
+CoordinateInput.prototype.createValue = function() {
+    this.inputX = $('<input>').attr('name', this.key + '-x').attr('type', 'number').addClass('coord').val(this.value.x);
+    this.inputY = $('<input>').attr('name', this.key + '-y').attr('type', 'number').addClass('coord').val(this.value.y);
+    this.inputZ = $('<input>').attr('name', this.key + '-z').attr('type', 'number').addClass('coord').val(this.value.z);
+    if (this.attributes !== undefined) {
+        this.inputX.attr(this.attributes);
+        this.inputY.attr(this.attributes);
+        this.inputZ.attr(this.attributes);
+    }
+    return [encapsulateInput(this.inputX, 'X'), encapsulateInput(this.inputY, 'Y'), encapsulateInput(this.inputZ, 'Z')];
+};
+CoordinateInput.prototype.getValue = function() {
+    return {x: this.inputX.val(), y: this.inputY.val(), z: this.inputZ.val()};
+};
+function encapsulateInput(input, label) {
+    return $('<div>').addClass('input-area').append(label + ' ').append(input);
+}
+
+function addHeader(label) {
+    $('#properties-list').append($('<div>').addClass('section-header').append($('<label>').text(label)));
+}
+
+$(function() {  
+    addHeader('Stack Settings');
+    properties['numLayers'] = new NumberInput('layers', 'Layers', 17, {'min': 0, 'max': 300, 'step': 1});
+    properties['baseDimension'] = new CoordinateInput('baseDimension', 'Base dimension', {x: 7, y: 2, z: 7});
+    properties['blocksPerLayer'] = new NumberInput('blocksPerLayer', 'Blocks per layer', 4);
+    properties['blockSize'] = new CoordinateInput('blockSize', 'Block size', {x: 0.2, y: 0.1, z: 0.8});
+    properties['blockSpacing'] = new NumberInput('blockSpacing', 'Block spacing', properties['blockSize'].getValue().x / properties['blocksPerLayer'].getValue());
+    properties['blockSpacing'].addButton('btn-recalculate-spacing', 'Recalculate spacing');
+    $('#btn-recalculate-spacing').on('click', function() {
+        properties['blockSpacing'].setValue(properties['blockSize'].getValue().x / properties['blocksPerLayer'].getValue());
+    });
+    properties['blockHeightVariation'] = new NumberInput('blockHeightVariation', 'Block height variation (%)', 0.1);
+    addHeader('Physics Settings');
+    properties['gravity'] = new CoordinateInput('gravity', 'Gravity', {x: 0, y: -2.8, z: 0});
+    properties['density'] = new NumberInput('density', 'Density', 4000);
+    properties['dampingFactor'] = new NumberInput('dampingFactor', 'Damping factor', 0.98);
+    properties['angularDampingFactor'] = new NumberInput('angularDampingFactor', 'Angular damping factor', 0.8);
+    properties['friction'] = new NumberInput('friction', 'Friction', 0.99);
+    properties['restitution'] = new NumberInput('restitution', 'Restitution', 0.0);
+    addHeader('Spawn Settings');
+    properties['spawnDistance'] = new NumberInput('spawnDistance', 'Spawn distance (meters)', 3);
+    properties['blockYawOffset'] = new NumberInput('blockYawOffset', 'Block yaw offset (degrees)', 45, {'min': 0, 'max': 360, 'step': 1});
+    if (window.EventBridge !== undefined) {
+        EventBridge.scriptEventReceived.connect(function(data) {
+            data = JSON.parse(data);
+            if (data.action == 'load') {
+                $.each(data.options, function(option, value) {
+                    properties[option].setValue(value);
+                });
             }
-            return this.input;
-        };
-        NumberInput.prototype.getValue = function() {
-            return this.input.val();
-        };
-
-        CoordinateInput = function(key, label, value, attributes) {
-            PropertyInput.call(this, key, label, value, attributes);
-        };
-        CoordinateInput.prototype = Object.create(PropertyInput.prototype);
-        CoordinateInput.prototype.constructor = CoordinateInput;
-        CoordinateInput.prototype.createValue = function() {
-            this.inputX = $('<input>').attr('name', this.key + '-x').attr('type', 'number').addClass('coord').val(this.value.x);
-            this.inputY = $('<input>').attr('name', this.key + '-y').attr('type', 'number').addClass('coord').val(this.value.y);
-            this.inputZ = $('<input>').attr('name', this.key + '-z').attr('type', 'number').addClass('coord').val(this.value.z);
-            if (this.attributes !== undefined) {
-                this.inputX.attr(this.attributes);
-                this.inputY.attr(this.attributes);
-                this.inputZ.attr(this.attributes);
-            }
-            return [encapsulateInput(this.inputX, 'X'), encapsulateInput(this.inputY, 'Y'), encapsulateInput(this.inputZ, 'Z')];
-        };
-        CoordinateInput.prototype.getValue = function() {
-            return {x: this.inputX.val(), y: this.inputY.val(), z: this.inputZ.val()};
-        };
-        function encapsulateInput(input, label) {
-            return $('<div>').addClass('input-area').append(label + ' ').append(input);
-        }
-
-        function addHeader(label) {
-            $('#properties-list').append($('<div>').addClass('section-header').append($('<label>').text(label)));
-        }
-
-        $(function() {
-            addHeader('Stack Settings');
-            properties['layers'] = new NumberInput('layers', 'Layers', 17, {'min': 0, 'max': 300, 'step': 1});
-            properties['baseDimension'] = new CoordinateInput('baseDimension', 'Base dimension', {x: 7, y: 2, z: 7});
-            properties['blockPerLayer'] = new NumberInput('blocksPerLayer', 'Blocks per layer', 4);
-            properties['blockSize'] = new CoordinateInput('blockSize', 'Block size', {x: 0.2, y: 0.1, z: 0.8});
-            properties['blockSpacing'] = new NumberInput('blockSpacing', 'Block spacing', properties['blockSize'].getValue().x / properties['blockPerLayer'].getValue());
-            properties['blockSpacing'].addButton('btn-recalculate-spacing', 'Recalculate spacing');
-            $('#btn-recalculate-spacing').on('click', function() {
-                properties['blockSpacing'].setValue(properties['blockSize'].getValue().x / properties['blockPerLayer'].getValue());
-            });
-            properties['blockHeightVariation'] = new NumberInput('blockHeightVariation', 'Block height variation (%)', 0.1);
-            addHeader('Physics Settings');
-            properties['gravity'] = new CoordinateInput('gravity', 'Gravity', {x: 0, y: -2.8, z: 0});
-            properties['density'] = new NumberInput('density', 'Density', 4000);
-            properties['dampingFactor'] = new NumberInput('dampingFactor', 'Damping factor', 0.98);
-            properties['angularDampingFactor'] = new NumberInput('angularDampingFactor', 'Angular damping factor', 0.8);
-            properties['friction'] = new NumberInput('friction', 'Friction', 0.99);
-            properties['restitution'] = new NumberInput('restitution', 'Restitution', 0.0);
-            addHeader('Spawn Settings');
-            properties['spawnDistance'] = new NumberInput('spawnDistance', 'Spawn distance (meters)', 3);
-            properties['blockYawOffset'] = new NumberInput('blockYawOffset', 'Block yaw offset (degrees)', 45, {'min': 0, 'max': 360, 'step': 1});
         });
-    </script>
+    }
+    EventBridge.emitWebEvent(JSON.stringify({action: 'loaded'}));
+
+});
+</script>
 </head>
 <body class="properties">
     <div id="properties-list"></div>