moved example code to widgets-example.js

examples/example/widgets-example.js

@@ -0,0 +1,442 @@
+// 
+//  widgets-example.js
+//  games 
+//  
+//  Copyright 2015 High Fidelity, Inc.
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+var paddingX = 8;
+var paddingY = 8;
+var buttonWidth = 30;
+var buttonHeight = 30;
+
+var ICONS_URL = 'https://s3.amazonaws.com/hifi-public/marketplace/hificontent/Scripts/planets/images/';
+
+var panelX = 1250;
+var panelY = 500;
+var panelWidth = 50;
+var panelHeight = 210;
+
+// var mainPanel = new UIPanel(panelX, panelY, panelWidth, panelHeight);
+// var systemViewButton = mainPanel.addIcon('solarsystems');
+// var zoomButton = mainPanel.addIcon('magnifier');
+// var satelliteButton = mainPanel.addIcon('satellite');
+// var settingsButton = mainPanel.addIcon('settings');
+// var stopButton = mainPanel.addIcon('close');
+// 
+// mainPanel.show();
+// 
+// var systemViewPanel = new UIPanel(panelX - 120, panelY, 120, 40);
+// var reverseButton = systemViewPanel.addIcon('reverse');
+// var pauseButton = systemViewPanel.addIcon('playpause');
+// var forwardButton = systemViewPanel.addIcon('forward');
+// 
+// var zoomPanel = new UIPanel(panelX - 60, panelY + buttonHeight + paddingY, 650, 50);
+// for (var i = 0; i < planets.length; ++i) {
+    // zoomPanel.addText(planets[i].name);
+// }
+Script.include('../libraries/uiwidgets.js');
+
+UI.setDefaultVisibility(true);
+UI.setErrorHandler(function(err) {
+    teardown();
+    // print(err);
+    // Script.stop();
+});
+
+// Controller.mouseMoveEvent.connect(function panelMouseMoveEvent(event) { return settings.mouseMoveEvent(event); });
+//     Controller.mousePressEvent.connect( function panelMousePressEvent(event) { return settings.mousePressEvent(event); });
+//     Controller.mouseDoublePressEvent.connect( function panelMouseDoublePressEvent(event) { return settings.mouseDoublePressEvent(event); });
+//     Controller.mouseReleaseEvent.connect(function(event) { return settings.mouseReleaseEvent(event); });
+//     Controller.keyPressEvent.connect(function(event) { return settings.keyPressEvent(event); });
+
+// var ICON_WIDTH  = 50.0;
+// var ICON_HEIGHT = 50.0;
+var ICON_WIDTH = 40.0;
+var ICON_HEIGHT = 40.0;
+var ICON_COLOR = UI.rgba(45, 45, 45, 0.7);
+var FOCUSED_COLOR = UI.rgba(250, 250, 250, 1.0);
+
+var PANEL_BACKGROUND_COLOR = UI.rgba(50, 50, 50, 0.7);
+
+var PANEL_PADDING = 7.0;
+var PANEL_BORDER = 12.0;
+var SUBPANEL_GAP = 1.0;
+
+
+
+
+var icons = [];
+function addIcon(panel, iconId) {
+    var icon = panel.add(new UI.Icon({
+        'imageURL': ICONS_URL + iconId + '.svg',
+        'width':  ICON_WIDTH,
+        'height': ICON_HEIGHT,
+        'color':  ICON_COLOR,
+        'alpha':  ICON_COLOR.a
+    }));
+    icons.push(icon);
+    return icon;
+}
+
+var panels = [];
+function addPanel (properties) {
+    properties.background = properties.background || {};
+    properties.background.backgroundColor = properties.background.backgroundColor ||
+        PANEL_BACKGROUND_COLOR;
+    properties.background.backgroundAlpha = properties.background.backgroundAlpha ||
+        PANEL_BACKGROUND_COLOR.a;
+    properties.padding = properties.padding || { x: PANEL_PADDING, y: PANEL_PADDING };
+    properties.border = properties.border || { x: PANEL_BORDER, y: PANEL_BORDER };
+
+    var panel = new UI.WidgetStack(properties);
+    panels.push(panel);
+    return panel;
+}
+
+function makeDraggable (panel, target) {
+    if (!target)
+        target = panel;
+
+    var dragStart = null;
+    var initialPos = null;
+
+    panel.addAction('onDragBegin', function (event) {
+        dragStart = { x: event.x, y: event.y };
+        initialPos = { x: target.position.x, y: target.position.y };
+    });
+    panel.addAction('onDragUpdate', function (event) {
+        target.setPosition(
+            initialPos.x + event.x - dragStart.x,
+            initialPos.y + event.y - dragStart.y
+        );
+        UI.updateLayout();
+    });
+    panel.addAction('onDragEnd', function () {
+        dragStart = dragEnd = null;
+    });
+}
+
+// var panelContainer = new UI.WidgetContainer();
+// panelContainer.setPosition(500, 250);
+// panelContainer.setVisible(true);
+
+var demoPane = addPanel({ dir: '+y' });
+var demoLabel = demoPane.add(new UI.Label({
+    text: "< no events >",
+    width: 400, height: 20
+}));
+var demoButton = demoPane.add(new UI.Box({
+    width: 200, height: 80,
+    text: "Button"
+}));
+function setText(text) {
+    return function () {
+        demoLabel.setText(text);
+        UI.updateLayout();
+    };
+}
+function addDebugActions(widget, msg, actions) {
+    actions.forEach(function(action) {
+        widget.addAction(action, setText(action + " " + msg + widget));
+    });
+}
+
+var debugEvents = [ 
+    'onMouseOver', 
+    'onMouseExit', 
+    'onMouseDown', 
+    'onMouseUp',
+    'onDragBegin',
+    'onDragEnd',
+    'onDragUpdate'
+];
+addDebugActions(demoPane, "(container) ", debugEvents);
+addDebugActions(demoButton, "(button) ", debugEvents);
+addDebugActions(demoLabel, "(label) ", debugEvents);
+
+// demoPane.addAction('onMouseOver', setText("onMouseOver " + demoPane));
+// demoPane.addAction('onMouseExit', setText("onMouseExit " + demoPane));
+// demoPane.addAction('onMouseDown', setText("onMouseDown " + demoPane));
+// demoPane.addAction('onMouseUp', setText("onMouseUp " + demoPane));
+makeDraggable(demoPane, demoPane);
+demoPane.setPosition(600, 200);
+
+// demoButton.addAction('onMouseOver', setText("onMouseOver " + demoButton));
+// demoButton.addAction('onMouseExit', setText("onMouseExit " + demoButton));
+// demoButton.addAction()
+
+// var resizablePanel = new UI.Label({
+//     text: "Resizable panel",
+//     width: 200, height: 200,
+//     backgroundAlpha: 0.5
+// });
+// resizablePanel.setPosition(1100, 200);
+
+var debugToggle = new UI.Box({
+    text: "debug", width: 150, height: 20
+});
+debugToggle.setPosition(200, 0);
+debugToggle.addAction('onClick', function () {
+    UI.debug.setVisible(!UI.debug.isVisible());
+});
+
+// debugEvents.forEach(function (action) {
+//     resizablePanel.addAction(action, function (event, widget) {
+//         widget.setText(action + " " + widget);
+//     });
+// })
+
+function join(obj) {
+    var s = "{";
+    var sep = "\n";
+    for (var k in obj) {
+        s += sep + k + ": " + (""+obj[k]).replace("\n", "\n");
+        sep = ",\n";
+    }
+    if (s.length > 1)
+        return s + " }";
+    return s + "}";
+}
+
+// resizablePanel.getOverlay().update({
+//     text: "" + join(resizablePanel.actions)
+// });
+
+
+setText = addDebugActions = undefined;
+
+
+var tooltipWidget = new UI.Label({
+    text: "<tooltip>",
+    width: 500, height: 20,
+    visible: false
+});
+function addTooltip (widget, text) {
+    widget.addAction('onMouseOver', function (event, widget) {
+        tooltipWidget.setVisible(true);
+        tooltipWidget.setPosition(widget.position.x + widget.getWidth() + 20, widget.position.y);
+        tooltipWidget.setText(text);
+        UI.updateLayout();
+    });
+    widget.addAction('onMouseExit', function () {
+        tooltipWidget.setVisible(false);
+        UI.updateLayout();
+    });
+}
+
+var mainPanel = addPanel({ dir: '+y' });
+mainPanel.setPosition(500, 250);
+mainPanel.setVisible(true);
+    
+var systemViewButton = addIcon(mainPanel, 'solarsystems');
+var zoomButton       = addIcon(mainPanel, 'magnifier');
+var satelliteButton  = addIcon(mainPanel, 'satellite');
+var settingsButton   = addIcon(mainPanel, 'settings');
+var stopButton       = addIcon(mainPanel, 'close');
+
+
+addTooltip(systemViewButton, "system view");
+addTooltip(zoomButton, "zoom");
+addTooltip(satelliteButton, "satelite view");
+addTooltip(settingsButton, "settings");
+addTooltip(stopButton, "exit");
+
+var systemViewPanel = addPanel({ dir: '+x', visible: false });
+var reverseButton   = addIcon(systemViewPanel, 'reverse');
+var pauseButton     = addIcon(systemViewPanel, 'playpause');
+var forwardButton   = addIcon(systemViewPanel, 'forward');
+
+var zoomPanel = addPanel({ dir: '+y', visible: true });
+var label = new UI.Label({
+    text: "Foo",
+    width: 120,
+    height: 15,
+    color: UI.rgb(245, 290, 20),
+    alpha: 1.0,
+    backgroundColor: UI.rgb(10, 10, 10),
+    backgroundAlpha: 0.0
+});
+zoomPanel.add(label);
+label.addAction('onMouseOver', function () {
+    label.setText("Bar");
+    UI.updateLayout();
+});
+label.addAction('onMouseExit', function () {
+    label.setText("Foo");
+    UI.updateLayout();
+});
+label.setText("Label id: " + label.id + ", parent id " + label.parent.id);
+label.parent.addAction('onMouseOver', function () {
+    label.setText("on parent");
+    UI.updateLayout();
+});
+label.parent.addAction('onMouseExit', function () {
+    label.setText('exited parent');
+    UI.updateLayout();
+});
+
+var sliderLayout = zoomPanel.add(new UI.WidgetStack({
+    dir: '+x', visible: true, backgroundAlpha: 0.0
+}));
+var sliderLabel = sliderLayout.add(new UI.Label({
+    text: " ", width: 45, height: 20
+}));
+var slider = sliderLayout.add(new UI.Slider({
+    value: 10, maxValue: 100, minValue: 0,
+    width: 300, height: 20,
+    backgroundColor: UI.rgb(10, 10, 10),
+    backgroundAlpha: 1.0,
+    slider: {   // slider knob
+        width: 30,
+        height: 18,
+        backgroundColor: UI.rgb(120, 120, 120),
+        backgroundAlpha: 1.0
+    }
+}));
+sliderLabel.setText("" + (+slider.getValue().toFixed(1)));
+slider.onValueChanged = function (value) {
+    sliderLabel.setText("" + (+value.toFixed(1)));
+    UI.updateLayout();
+}
+
+
+
+
+var checkBoxLayout = zoomPanel.add(new UI.WidgetStack({
+    dir: '+x', visible: true, backgroundAlpha: 0.0
+}));
+// var padding = checkBoxLayout.add(new UI.Label({
+//     text: " ", width: 45, height: 20
+// }));
+var checkBoxLabel = checkBoxLayout.add(new UI.Label({
+    text: "set red", width: 60, height: 20,
+    backgroundAlpha: 0.0
+}));
+checkBoxLabel.setText("set red");
+
+var defaultColor = UI.rgb(10, 10, 10);
+var redColor = UI.rgb(210, 80, 80);
+
+var checkbox = checkBoxLayout.add(new UI.Checkbox({
+    width: 20, height: 20, padding: { x: 3, y: 3 },
+    backgroundColor: defaultColor,
+    backgroundAlpha: 0.9,
+    checked: false,
+    onValueChanged: function (red) {
+         zoomPanel.getOverlay().update({
+        // backgroundAlpha: 0.1,
+        backgroundColor: red ? redColor : defaultColor
+    });
+}
+}));
+
+addIcon(zoomPanel, 'reverse');
+UI.updateLayout();
+
+var subpanels = [ systemViewPanel, zoomPanel ];
+function hideSubpanelsExcept (panel) {
+    subpanels.forEach(function (x) {
+        if (x != panel) {
+            x.setVisible(false);
+        }
+    });
+}
+
+function attachPanel (panel, button) {
+    button.addAction('onClick', function () {
+        hideSubpanelsExcept(panel);
+        panel.setVisible(!panel.isVisible());
+        UI.updateLayout();
+    })
+
+    UI.addAttachment(panel, button, function (target, rel) {
+        target.setPosition(
+            rel.position.x - (target.getWidth() + target.border.x + SUBPANEL_GAP),
+            rel.position.y - target.border.y
+        );
+    });
+}
+attachPanel(systemViewPanel, systemViewButton);
+attachPanel(zoomPanel, zoomButton);
+
+var addColorToggle = function (widget) {
+    widget.addAction('onMouseOver', function () {
+        widget.setColor(FOCUSED_COLOR);
+    });
+    widget.addAction('onMouseExit', function () {
+        widget.setColor(ICON_COLOR);
+    });
+}
+
+reverseButton.addAction('onClick', function() {});
+
+systemViewPanel.addAction('onMouseOver', function() {
+    hideSubpanels();
+    UI.updateLayout();
+});
+
+
+zoomButton.addAction('onClick', function() {
+    hideSubpanels();
+    UI.updateLayout();
+});
+UI.updateLayout();
+
+stopButton.addAction('onClick', function() {
+    // Script.stop();
+    teardown();
+});
+
+// Panel drag behavior
+// (click + drag on border to drag)
+(function () {
+    var dragged = null;
+    this.startDrag = function (dragAction) {
+        dragged = dragAction;
+    }
+    this.updateDrag = function (event) {
+        if (dragged) {
+            print("Update drag");
+            dragged.updateDrag(event);
+        }
+    }
+    this.clearDrag = function (event) {
+        if (dragged)
+            print("End drag");
+        dragged = null;
+    }
+})();
+
+var buttons = icons;
+
+buttons.map(addColorToggle);
+panels.map(function (panel) { makeDraggable(panel, mainPanel); });
+
+// Cleanup script resources
+function teardown() {
+    UI.teardown();
+
+    // etc...
+};
+
+var inputHandler = {
+    onMouseMove: function (event) {
+        updateDrag(event);
+        UI.handleMouseMove(event);
+    },
+    onMousePress: function (event) {
+        UI.handleMousePress(event);
+    },
+    onMouseRelease: function (event) {
+        clearDrag(event);
+        UI.handleMouseRelease(event);
+    }
+};
+Controller.mousePressEvent.connect(inputHandler.onMousePress);
+Controller.mouseMoveEvent.connect(inputHandler.onMouseMove);
+Controller.mouseReleaseEvent.connect(inputHandler.onMouseRelease);
+
+Script.scriptEnding.connect(teardown);