diff --git a/examples/example/widgets-example.js b/examples/example/widgets-example.js index 8a4cea6ef0..eea7f51876 100644 --- a/examples/example/widgets-example.js +++ b/examples/example/widgets-example.js @@ -20,18 +20,18 @@ 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'); +// var systemViewButton = mainPanel.addImage('solarsystems'); +// var zoomButton = mainPanel.addImage('magnifier'); +// var satelliteButton = mainPanel.addImage('satellite'); +// var settingsButton = mainPanel.addImage('settings'); +// var stopButton = mainPanel.addImage('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 reverseButton = systemViewPanel.addImage('reverse'); +// var pauseButton = systemViewPanel.addImage('playpause'); +// var forwardButton = systemViewPanel.addImage('forward'); // // var zoomPanel = new UIPanel(panelX - 60, panelY + buttonHeight + paddingY, 650, 50); // for (var i = 0; i < planets.length; ++i) { @@ -65,12 +65,9 @@ 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({ +function addImage(panel, iconId) { + var icon = panel.add(new UI.Image({ 'imageURL': ICONS_URL + iconId + '.svg', 'width': ICON_WIDTH, 'height': ICON_HEIGHT, @@ -231,11 +228,11 @@ 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'); +var systemViewButton = addImage(mainPanel, 'solarsystems'); +var zoomButton = addImage(mainPanel, 'magnifier'); +var satelliteButton = addImage(mainPanel, 'satellite'); +var settingsButton = addImage(mainPanel, 'settings'); +var stopButton = addImage(mainPanel, 'close'); addTooltip(systemViewButton, "system view"); @@ -245,9 +242,9 @@ 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 reverseButton = addImage(systemViewPanel, 'reverse'); +var pauseButton = addImage(systemViewPanel, 'playpause'); +var forwardButton = addImage(systemViewPanel, 'forward'); var zoomPanel = addPanel({ dir: '+y', visible: true }); var label = new UI.Label({ @@ -333,7 +330,7 @@ var checkbox = checkBoxLayout.add(new UI.Checkbox({ } })); -addIcon(zoomPanel, 'reverse'); +addImage(zoomPanel, 'reverse'); UI.updateLayout(); var subpanels = [ systemViewPanel, zoomPanel ]; diff --git a/examples/libraries/uiwidgets.js b/examples/libraries/uiwidgets.js index e0801e3a81..c53bb9ba65 100644 --- a/examples/libraries/uiwidgets.js +++ b/examples/libraries/uiwidgets.js @@ -157,16 +157,7 @@ UI.setDefaultVisibility = function (visible) { /// Wrapper around the overlays impl function makeOverlay(type, properties) { - var _TRACE = traceEnter.call(this, "makeOverlay"); var overlay = Overlays.addOverlay(type, properties); - // overlay.update = function (properties) { - // Overlays.editOverlay(overlay, properties); - // } - // overlay.destroy = function () { - // Overlays.deleteOverlay(overlay); - // } - // return overlay; - _TRACE.exit(); return { 'update': function (properties) { var _TRACE = traceEnter.call(this, "Overlay.update"); @@ -349,15 +340,72 @@ WidgetStack.prototype.setColor = function (color) { 'alpha': color.a }); } +var sumOf = function (list, f) { + var sum = 0.0; + list.forEach(function (elem) { + sum += f(elem); + }) + return sum; +} +WidgetStack.prototype.calculateDimensions = function () { + var totalWidth = 0.0, maxWidth = 0.0; + var totalHeight = 0.0, maxHeight = 0.0; + this.widgets.forEach(function (widget) { + totalWidth += widget.getWidth() + this.padding.x; + maxWidth = Math.max(maxWidth, widget.getWidth()); -var Icon = UI.Icon = function (properties) { + totalHeight += widget.getHeight() + this.padding.y; + maxHeight = Math.max(maxHeight, widget.getHeight()); + }, this); + + this.dimensions = { + x: this.border.x * 2 + Math.max(totalWidth * this.layoutDir.x - this.padding.x, maxWidth), + y: this.border.y * 2 + Math.max(totalHeight * this.layoutDir.y - this.padding.y, maxHeight) + }; +} +WidgetStack.prototype.getWidth = function () { + if (!this.dimensions) + this.calculateDimensions(); + return this.dimensions.x; +} +WidgetStack.prototype.getHeight = function () { + if (!this.dimensions) + this.calculateDimensions(); + return this.dimensions.y; +} +WidgetStack.prototype.applyLayout = function () { + var x = this.position.x + this.border.x; + var y = this.position.y + this.border.y; + + this.widgets.forEach(function (widget) { + widget.setPosition(x, y); + x += (widget.getWidth() + this.padding.x) * this.layoutDir.x; + y += (widget.getHeight() + this.padding.y) * this.layoutDir.y; + widget._parentVisible = this.isVisible(); + }, this); +} +WidgetStack.prototype.updateOverlays = function () { + if (this.backgroundOverlay) { + this.backgroundOverlay.update({ + width: this.getWidth(), + height: this.getHeight(), + x: this.position.x, + y: this.position.y, + visible: this.isVisible() + }); + } +} + + +/// GUI Textured Rect +var Image = UI.Image = function (properties) { Widget.prototype.constructor.call(this); this.visible = properties.visible != undefined ? properties.visible : this.visible; this.width = properties.width || 1.0; this.height = properties.height || 1.0; - var iconProperties = { + var imageProperties = { 'color': properties.color || COLOR_GRAY, 'alpha': properties.alpha || 1.0, 'imageURL': properties.imageURL, @@ -367,42 +415,58 @@ var Icon = UI.Icon = function (properties) { 'y': this.position ? this.position.y : 0.0, 'visible': this.visible } - this.iconOverlay = makeOverlay("image", iconProperties); + this.imageOverlay = makeOverlay("image", imageProperties); } -Icon.prototype = new Widget(); -Icon.prototype.constructor = Icon; -Icon.prototype.toString = function () { - return "[UI.Icon " + this.id + " ]"; +Image.prototype = new Widget(); +Image.prototype.constructor = Image; +Image.prototype.toString = function () { + return "[UI.Image " + this.id + " ]"; } -Icon.prototype.getHeight = function () { +Image.prototype.getHeight = function () { return this.height; } -Icon.prototype.getWidth = function () { +Image.prototype.getWidth = function () { return this.width; } -Icon.prototype.hasOverlay = function (overlayId) { - return this.iconOverlay.getId() === overlayId; +Image.prototype.hasOverlay = function (overlayId) { + return this.imageOverlay.getId() === overlayId; } -Icon.prototype.getOverlay = function () { - return this.iconOverlay; +Image.prototype.getOverlay = function () { + return this.imageOverlay; } - -Icon.prototype.destroy = function () { - if (this.iconOverlay) { - this.iconOverlay.destroy(); - this.iconOverlay = null; +Image.prototype.destroy = function () { + if (this.imageOverlay) { + this.imageOverlay.destroy(); + this.imageOverlay = null; } } -Icon.prototype.setColor = function (color) { +Image.prototype.setColor = function (color) { if (arguments.length != 1) { color = rgba.apply(arguments); } - this.iconOverlay.update({ + this.imageOverlay.update({ 'color': color, 'alpha': color.a }); } +Image.prototype.getWidth = function () { + return this.width; +} +Image.prototype.getHeight = function () { + return this.height; +} +Image.prototype.updateOverlays = function () { + this.imageOverlay.update({ + width: this.width, + height: this.height, + x: this.position.x, + y: this.position.y, + visible: this.isVisible() + }); +} + +/// GUI Rect. Internally implemented using a text overlay. var Box = UI.Box = function (properties) { Widget.prototype.constructor.call(this); @@ -485,7 +549,7 @@ Label.prototype.setText = function (text) { }); } -/// Slider element. +/// Slider widget. /// @param properties: /// onValueChanged var Slider = UI.Slider = function (properties) { @@ -624,77 +688,9 @@ Checkbox.prototype.applyLayout = function () { } -Icon.prototype.getWidth = function () { - return this.width; -} -Icon.prototype.getHeight = function () { - return this.height; -} -Icon.prototype.updateOverlays = function () { - this.iconOverlay.update({ - width: this.width, - height: this.height, - x: this.position.x, - y: this.position.y, - visible: this.isVisible() - }); -} -var sumOf = function (list, f) { - var sum = 0.0; - list.forEach(function (elem) { - sum += f(elem); - }) - return sum; -} -WidgetStack.prototype.calculateDimensions = function () { - var totalWidth = 0.0, maxWidth = 0.0; - var totalHeight = 0.0, maxHeight = 0.0; - this.widgets.forEach(function (widget) { - totalWidth += widget.getWidth() + this.padding.x; - maxWidth = Math.max(maxWidth, widget.getWidth()); - totalHeight += widget.getHeight() + this.padding.y; - maxHeight = Math.max(maxHeight, widget.getHeight()); - }, this); - this.dimensions = { - x: this.border.x * 2 + Math.max(totalWidth * this.layoutDir.x - this.padding.x, maxWidth), - y: this.border.y * 2 + Math.max(totalHeight * this.layoutDir.y - this.padding.y, maxHeight) - }; -} -WidgetStack.prototype.getWidth = function () { - if (!this.dimensions) - this.calculateDimensions(); - return this.dimensions.x; -} -WidgetStack.prototype.getHeight = function () { - if (!this.dimensions) - this.calculateDimensions(); - return this.dimensions.y; -} -WidgetStack.prototype.applyLayout = function () { - var x = this.position.x + this.border.x; - var y = this.position.y + this.border.y; - - this.widgets.forEach(function (widget) { - widget.setPosition(x, y); - x += (widget.getWidth() + this.padding.x) * this.layoutDir.x; - y += (widget.getHeight() + this.padding.y) * this.layoutDir.y; - widget._parentVisible = this.isVisible(); - }, this); -} -WidgetStack.prototype.updateOverlays = function () { - if (this.backgroundOverlay) { - this.backgroundOverlay.update({ - width: this.getWidth(), - height: this.getHeight(), - x: this.position.x, - y: this.position.y, - visible: this.isVisible() - }); - } -} UI.addAttachment = function (target, rel, update) { attachment = { target: target, @@ -902,7 +898,6 @@ ui.logEvent = function (event) { } - // Tries to find a widget with an overlay matching overlay. // Used by getFocusedWidget(), dispatchEvent(), etc var getWidgetWithOverlay = function (overlay) {