From 54fa3d013b714967e2043369d1c00d8e0c806618 Mon Sep 17 00:00:00 2001 From: oxixes <38050447+oxixes@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:50:07 +0100 Subject: [PATCH 1/7] Make widget work with the v2 API --- src/config.xml | 8 +- src/index.html | 16 ++-- src/js/main.js | 179 ++++++++++++++++++------------------ tests/js/PanelWidgetSpec.js | 143 +++++++++++++++------------- 4 files changed, 180 insertions(+), 166 deletions(-) diff --git a/src/config.xml b/src/config.xml index 8c6aece..53a61f0 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,5 +1,7 @@ - + + 2 +
Panel aarranz@conwet.com @@ -32,5 +34,9 @@ + + - - + + + +

+ + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 74e59ac..3daeb19 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -21,111 +21,112 @@ "use strict"; - const repaint = function repaint() { - var height, width, message, next, min; - - height = MashupPlatform.widget.context.get('heightInPixels'); - width = MashupPlatform.widget.context.get('widthInPixels'); - message = document.getElementById('message'); - - document.body.style.fontSize = (height * 0.7) + 'px'; - document.body.style.lineHeight = height + 'px'; - - message.style.height = height + 'px'; - next = Number(MashupPlatform.prefs.get('max-height')) / 100; - min = Number(MashupPlatform.prefs.get('min-height')) / 100; - while ((message.offsetWidth > width || message.offsetHeight > height) && next >= min) { - document.body.style.fontSize = Math.floor(height * next) + 'px'; - next -= 0.05; + class Widget { + constructor(MashupPlatform, shadowDOM, _) { + this.MashupPlatform = MashupPlatform; + this.shadowDOM = shadowDOM; + + this.body = this.shadowDOM.querySelector('body'); + + this.init(); + this.repaint(); } - if ((message.offsetWidth > width || message.offsetHeight > height)) { - document.body.style.fontSize = Math.floor(height * min) + 'px'; + + repaint() { + var height, width, message, next, min; + + height = this.MashupPlatform.widget.context.get('heightInPixels'); + width = this.MashupPlatform.widget.context.get('widthInPixels'); + message = this.shadowDOM.getElementById('message'); + + this.body.style.fontSize = (height * 0.7) + 'px'; + this.body.style.lineHeight = height + 'px'; + + message.style.height = height + 'px'; + next = Number(MashupPlatform.prefs.get('max-height')) / 100; + min = Number(MashupPlatform.prefs.get('min-height')) / 100; + while ((message.offsetWidth > width || message.offsetHeight > height) && next >= min) { + this.body.style.fontSize = Math.floor(height * next) + 'px'; + next -= 0.05; + } + if ((message.offsetWidth > width || message.offsetHeight > height)) { + this.body.style.fontSize = Math.floor(height * min) + 'px'; + } } - }; - - const parseInputEndpointData = function parseInputEndpointData(data) { - if (typeof data === "string") { - try { - data = JSON.parse(data); - } catch (e) { - return data; + + parseInputEndpointData(data) { + if (typeof data === "string") { + try { + data = JSON.parse(data); + } catch (e) { + return data; + } } + + return data; } - return data; - }; + processIncomingData(data) { + var message, unit, decimals, default_unit, pow; - const processIncomingData = function processIncomingData(data) { - var message, unit, decimals, default_unit, pow; + data = this.parseInputEndpointData(data); + if (data == null || ["number", "string", "boolean"].indexOf(typeof data) !== -1) { + data = { + value: data + }; + } + decimals = parseInt(this.MashupPlatform.prefs.get('decimals'), 10); + if (isNaN(decimals) || decimals < 0) { + decimals = 0; + } - data = parseInputEndpointData(data); - if (data == null || ["number", "string", "boolean"].indexOf(typeof data) !== -1) { - data = { - value: data - }; - } - decimals = parseInt(MashupPlatform.prefs.get('decimals'), 10); - if (isNaN(decimals) || decimals < 0) { - decimals = 0; - } + message = this.shadowDOM.getElementById('message'); + if (data.value == null) { + message.textContent = this.MashupPlatform.prefs.get('default-value'); + } else if (typeof data.value === 'number') { + pow = Math.pow(10, decimals); + data.value = Math.round((pow * data.value).toFixed(decimals)) / pow; + message.textContent = data.value; + } else { + message.textContent = data.value; + } - message = document.getElementById('message'); - if (data.value == null) { - message.textContent = MashupPlatform.prefs.get('default-value'); - } else if (typeof data.value === 'number') { - pow = Math.pow(10, decimals); - data.value = Math.round((pow * data.value).toFixed(decimals)) / pow; - message.textContent = data.value; - } else { - message.textContent = data.value; - } + unit = document.createElement('span'); + default_unit = this.MashupPlatform.prefs.get('default-unit'); + if (data.unit != null) { + unit.textContent = data.unit; + message.appendChild(unit); + } else if (!("unit" in data) && default_unit.trim() != "") { + unit.textContent = default_unit; + message.appendChild(unit); + } - unit = document.createElement('span'); - default_unit = MashupPlatform.prefs.get('default-unit'); - if (data.unit != null) { - unit.textContent = data.unit; - message.appendChild(unit); - } else if (!("unit" in data) && default_unit.trim() != "") { - unit.textContent = default_unit; - message.appendChild(unit); + this.repaint(); } - repaint(); - }; - const init = function init() { - MashupPlatform.wiring.registerCallback('textinput', processIncomingData); + init() { + this.MashupPlatform.wiring.registerCallback('textinput', this.processIncomingData); - MashupPlatform.widget.context.registerCallback(function (newValues) { - if ("heightInPixels" in newValues || "widthInPixels" in newValues) { - repaint(); - } - }.bind(this)); + this.MashupPlatform.widget.context.registerCallback(function (newValues) { + if ("heightInPixels" in newValues || "widthInPixels" in newValues) { + this.repaint(); + } + }.bind(this)); - /* Initial content */ + /* Initial content */ - var message = document.getElementById('message'); - message.textContent = MashupPlatform.prefs.get('default-value'); + var message = this.shadowDOM.getElementById('message'); + message.textContent = this.MashupPlatform.prefs.get('default-value'); - var default_unit = MashupPlatform.prefs.get('default-unit'); - if (default_unit.trim() != "") { - var unit = document.createElement('span'); - unit.textContent = default_unit; - message.appendChild(unit); + var default_unit = MashupPlatform.prefs.get('default-unit'); + if (default_unit.trim() != "") { + var unit = document.createElement('span'); + unit.textContent = default_unit; + message.appendChild(unit); + } } - }; - - /* test-code */ - window.init = init; - window.processIncomingData = processIncomingData; - window.repaint = repaint; - /* end-test-code */ - - /* TODO - * this if is required for testing, but we have to search a cleaner way - */ - if (window.MashupPlatform != null) { - init(); - repaint(); } + window.CoNWet_Panel = Widget; + })(); diff --git a/tests/js/PanelWidgetSpec.js b/tests/js/PanelWidgetSpec.js index a1e2e57..70fed13 100644 --- a/tests/js/PanelWidgetSpec.js +++ b/tests/js/PanelWidgetSpec.js @@ -23,7 +23,7 @@ const HTML_FIXTURE_CODE = '

'; const clearDocument = function clearDocument() { - var elements = document.querySelectorAll('body > *:not(.jasmine_html-reporter)'); + var elements = shadowDOM.querySelector("body").children; for (var i = 0; i < elements.length; i++) { elements[i].parentElement.removeChild(elements[i]); @@ -44,11 +44,22 @@ }, inputs: ['textinput'] }); + + let div = document.createElement('div'); + div.id = 'widget'; + document.body.appendChild(div); + div.attachShadow({mode: 'open'}); + let shadowBody = document.createElement('body'); + div.shadowRoot.appendChild(shadowBody); + window.shadowDOM = div.shadowRoot; + shadowDOM.querySelector("body").innerHTML += HTML_FIXTURE_CODE + + window.widget = new window.CoNWet_Panel(MashupPlatform, shadowDOM, undefined); }); beforeEach(() => { clearDocument(); - document.body.innerHTML += HTML_FIXTURE_CODE; + shadowDOM.querySelector("body").innerHTML += HTML_FIXTURE_CODE; MashupPlatform.reset(); }); @@ -57,20 +68,20 @@ describe("default-value", () => { it("should work with the default value", () => { - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - expect(repaint).not.toHaveBeenCalled(); - expect(document.getElementById('message').textContent).toBe("--"); + expect(widget.repaint).not.toHaveBeenCalled(); + expect(shadowDOM.getElementById('message').textContent).toBe("--"); }); it("should work with other values", () => { MashupPlatform.prefs.set("default-value", "n/a"); - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - expect(repaint).not.toHaveBeenCalled(); - expect(document.getElementById('message').textContent).toBe("n/a"); + expect(widget.repaint).not.toHaveBeenCalled(); + expect(shadowDOM.getElementById('message').textContent).toBe("n/a"); }); }); @@ -78,20 +89,20 @@ describe("default-unit", () => { it("should work with the default value", () => { - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - expect(repaint).not.toHaveBeenCalled(); - expect(document.getElementById('message').textContent).toBe("--"); + expect(widget.repaint).not.toHaveBeenCalled(); + expect(shadowDOM.getElementById('message').textContent).toBe("--"); }); it("should work with other values", () => { MashupPlatform.prefs.set("default-unit", "ºC"); - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - expect(repaint).not.toHaveBeenCalled(); - expect(document.getElementById('message').textContent).toBe("--ºC"); + expect(widget.repaint).not.toHaveBeenCalled(); + expect(shadowDOM.getElementById('message').textContent).toBe("--ºC"); }); }); @@ -99,32 +110,32 @@ describe("decimals", () => { it("should work with the default value", () => { - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - processIncomingData(5.12); + widget.processIncomingData(5.12); - expect(document.getElementById('message').textContent).toBe("5.1"); + expect(shadowDOM.getElementById('message').textContent).toBe("5.1"); }); it("should work with other values", () => { MashupPlatform.prefs.set("decimals", "2"); - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - processIncomingData(5.12); + widget.processIncomingData(5.12); - expect(document.getElementById('message').textContent).toBe("5.12"); + expect(shadowDOM.getElementById('message').textContent).toBe("5.12"); }); it("should handle invalid decimal values", () => { MashupPlatform.prefs.set("decimals", "-1"); - spyOn(window, "repaint"); - init(); + spyOn(widget, "repaint"); + widget.init(); - processIncomingData(5.12); + widget.processIncomingData(5.12); - expect(document.getElementById('message').textContent).toBe("5"); + expect(shadowDOM.getElementById('message').textContent).toBe("5"); }); }); @@ -136,31 +147,31 @@ describe("basic values (plain)", () => { it("number", () => { - init(); - processIncomingData(5); + widget.init(); + widget.processIncomingData(5); - expect(document.getElementById('message').textContent).toBe("5"); + expect(shadowDOM.getElementById('message').textContent).toBe("5"); }); it("string", () => { - init(); - processIncomingData("new content"); + widget.init(); + widget.processIncomingData("new content"); - expect(document.getElementById('message').textContent).toBe("new content"); + expect(shadowDOM.getElementById('message').textContent).toBe("new content"); }); it("boolean", () => { - init(); - processIncomingData(true); + widget.init(); + widget.processIncomingData(true); - expect(document.getElementById('message').textContent).toBe("true"); + expect(shadowDOM.getElementById('message').textContent).toBe("true"); }); it("null", () => { - init(); - processIncomingData(null); + widget.init(); + widget.processIncomingData(null); - expect(document.getElementById('message').textContent).toBe("--"); + expect(shadowDOM.getElementById('message').textContent).toBe("--"); }); }); @@ -168,32 +179,32 @@ describe("basic values", () => { it("number", () => { - init(); - processIncomingData({value: 5}); + widget.init(); + widget.processIncomingData({value: 5}); - expect(document.getElementById('message').textContent).toBe("5"); + expect(shadowDOM.getElementById('message').textContent).toBe("5"); }); it("string", () => { - init(); - processIncomingData({value: "new content"}); + widget.init(); + widget.processIncomingData({value: "new content"}); - expect(document.getElementById('message').textContent).toBe("new content"); + expect(shadowDOM.getElementById('message').textContent).toBe("new content"); }); it("boolean", () => { - init(); - processIncomingData({value: true}); + widget.init(); + widget.processIncomingData({value: true}); - expect(document.getElementById('message').textContent).toBe("true"); + expect(shadowDOM.getElementById('message').textContent).toBe("true"); }); it("null", () => { MashupPlatform.prefs.set("default-unit", "ºC"); - init(); - processIncomingData({value: null}); + widget.init(); + widget.processIncomingData({value: null}); - expect(document.getElementById('message').textContent).toBe("--ºC"); + expect(shadowDOM.getElementById('message').textContent).toBe("--ºC"); }); }); @@ -201,33 +212,33 @@ describe("unit override", () => { it("number", () => { - init(); - processIncomingData({value: 5, unit: "km/h"}); + widget.init(); + widget.processIncomingData({value: 5, unit: "km/h"}); - expect(document.getElementById('message').textContent).toBe("5km/h"); + expect(shadowDOM.getElementById('message').textContent).toBe("5km/h"); }); it("string", () => { MashupPlatform.prefs.set("default-unit", "ºC"); - init(); - processIncomingData({value: "new content", unit: ""}); + widget.init(); + widget.processIncomingData({value: "new content", unit: ""}); - expect(document.getElementById('message').textContent).toBe("new content"); + expect(shadowDOM.getElementById('message').textContent).toBe("new content"); }); it("boolean", () => { MashupPlatform.prefs.set("default-unit", "ºC"); - init(); - processIncomingData({value: true, unit: null}); + widget.init(); + widget.processIncomingData({value: true, unit: null}); - expect(document.getElementById('message').textContent).toBe("true"); + expect(shadowDOM.getElementById('message').textContent).toBe("true"); }); it("null", () => { - init(); - processIncomingData({value: null, unit: "km/h"}); + widget.init(); + widget.processIncomingData({value: null, unit: "km/h"}); - expect(document.getElementById('message').textContent).toBe("--km/h"); + expect(shadowDOM.getElementById('message').textContent).toBe("--km/h"); }); }); From 9a180ffe26cfa99d3ce8ff976040d4ee2ec2d8cc Mon Sep 17 00:00:00 2001 From: oxixes <38050447+oxixes@users.noreply.github.com> Date: Wed, 29 Nov 2023 18:22:52 +0100 Subject: [PATCH 2/7] Add background and text color options --- src/config.xml | 4 +++- src/index.html | 1 - src/js/main.js | 40 +++++++++++++++++++++++++++++++------ tests/js/PanelWidgetSpec.js | 8 +++++--- 4 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/config.xml b/src/config.xml index 53a61f0..30ccaab 100644 --- a/src/config.xml +++ b/src/config.xml @@ -27,6 +27,8 @@ + + @@ -37,6 +39,6 @@ \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 3daeb19..77c1cdf 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -21,6 +21,8 @@ "use strict"; + const colorRegex = /^#[0-9a-fA-F]{8}$/i; + class Widget { constructor(MashupPlatform, shadowDOM, _) { this.MashupPlatform = MashupPlatform; @@ -33,18 +35,40 @@ } repaint() { - var height, width, message, next, min; + var height, width, backgroundColor, textColor, message, next, min; height = this.MashupPlatform.widget.context.get('heightInPixels'); width = this.MashupPlatform.widget.context.get('widthInPixels'); + backgroundColor = this.MashupPlatform.prefs.get('background-color'); + textColor = this.MashupPlatform.prefs.get('text-color'); message = this.shadowDOM.getElementById('message'); + if (colorRegex.test(textColor)) { + this.body.style.color = "rgba(" + parseInt(textColor.substr(1, 2), 16) + "," + + parseInt(textColor.substr(3, 2), 16) + "," + + parseInt(textColor.substr(5, 2), 16) + "," + + (parseInt(textColor.substr(7, 2), 16) / 255) + ")"; + } else { + this.body.style.color = "#000000"; + this.MashupPlatform.widget.log("Invalid text color: " + textColor, this.MashupPlatform.log.WARN); + } + this.body.style.fontSize = (height * 0.7) + 'px'; this.body.style.lineHeight = height + 'px'; + if (colorRegex.test(backgroundColor)) { + this.body.style.backgroundColor = "rgba(" + parseInt(backgroundColor.substr(1, 2), 16) + "," + + parseInt(backgroundColor.substr(3, 2), 16) + "," + + parseInt(backgroundColor.substr(5, 2), 16) + "," + + (parseInt(backgroundColor.substr(7, 2), 16) / 255) + ")"; + } else { + this.body.style.backgroundColor = "#FFFFFF"; + this.MashupPlatform.widget.log("Invalid background color: " + backgroundColor, this.MashupPlatform.log.WARN); + } message.style.height = height + 'px'; - next = Number(MashupPlatform.prefs.get('max-height')) / 100; - min = Number(MashupPlatform.prefs.get('min-height')) / 100; + + next = Number(this.MashupPlatform.prefs.get('max-height')) / 100; + min = Number(this.MashupPlatform.prefs.get('min-height')) / 100; while ((message.offsetWidth > width || message.offsetHeight > height) && next >= min) { this.body.style.fontSize = Math.floor(height * next) + 'px'; next -= 0.05; @@ -105,7 +129,7 @@ } init() { - this.MashupPlatform.wiring.registerCallback('textinput', this.processIncomingData); + this.MashupPlatform.wiring.registerCallback('textinput', this.processIncomingData.bind(this)); this.MashupPlatform.widget.context.registerCallback(function (newValues) { if ("heightInPixels" in newValues || "widthInPixels" in newValues) { @@ -113,12 +137,16 @@ } }.bind(this)); + this.MashupPlatform.prefs.registerCallback(function (_) { + this.repaint(); + }.bind(this)); + /* Initial content */ var message = this.shadowDOM.getElementById('message'); message.textContent = this.MashupPlatform.prefs.get('default-value'); - var default_unit = MashupPlatform.prefs.get('default-unit'); + var default_unit = this.MashupPlatform.prefs.get('default-unit'); if (default_unit.trim() != "") { var unit = document.createElement('span'); unit.textContent = default_unit; @@ -127,6 +155,6 @@ } } - window.CoNWet_Panel = Widget; + window.CoNWeT_Panel = Widget; })(); diff --git a/tests/js/PanelWidgetSpec.js b/tests/js/PanelWidgetSpec.js index 70fed13..c028e71 100644 --- a/tests/js/PanelWidgetSpec.js +++ b/tests/js/PanelWidgetSpec.js @@ -14,7 +14,7 @@ * limitations under the License. */ -/* global MashupPlatform, MockMP, init, processIncomingData, repaint */ +/* global MashupPlatform, MockMP, shadowDOM, widget */ (function () { @@ -40,7 +40,9 @@ 'default-unit': '', 'max-height': 60, 'min-height': 10, - 'decimals': 1 + 'decimals': 1, + 'background-color': '#FFFFFFFF', + 'text-color': '#000000FF' }, inputs: ['textinput'] }); @@ -54,7 +56,7 @@ window.shadowDOM = div.shadowRoot; shadowDOM.querySelector("body").innerHTML += HTML_FIXTURE_CODE - window.widget = new window.CoNWet_Panel(MashupPlatform, shadowDOM, undefined); + window.widget = new window.CoNWeT_Panel(MashupPlatform, shadowDOM, undefined); }); beforeEach(() => { From bd46c4780c16668e4c78ec9812f381bbb6e8990e Mon Sep 17 00:00:00 2001 From: oxixes <38050447+oxixes@users.noreply.github.com> Date: Thu, 30 Nov 2023 19:43:57 +0100 Subject: [PATCH 3/7] Add title to panel and fix small bugs --- src/config.xml | 3 ++- src/css/styles.css | 6 ++++++ src/index.html | 1 + src/js/main.js | 26 ++++++++++++++++++-------- tests/js/PanelWidgetSpec.js | 3 ++- 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/config.xml b/src/config.xml index 30ccaab..5942dd4 100644 --- a/src/config.xml +++ b/src/config.xml @@ -22,13 +22,14 @@ + - + diff --git a/src/css/styles.css b/src/css/styles.css index a1dec01..ab00dce 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -11,3 +11,9 @@ h1 { h1 > span { font-size: 60%; } + +h4 { + margin-top: 10px; + margin-bottom: 0; + width: 100%; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 2efacbe..8540fa1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,6 @@ +

\ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 77c1cdf..fc76514 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -35,13 +35,16 @@ } repaint() { - var height, width, backgroundColor, textColor, message, next, min; + var height, width, backgroundColor, textColor, message, next, min, title; - height = this.MashupPlatform.widget.context.get('heightInPixels'); - width = this.MashupPlatform.widget.context.get('widthInPixels'); + height = this.body.offsetHeight; + width = this.body.offsetWidth; backgroundColor = this.MashupPlatform.prefs.get('background-color'); textColor = this.MashupPlatform.prefs.get('text-color'); message = this.shadowDOM.getElementById('message'); + title = this.shadowDOM.getElementById('title'); + + title.textContent = this.MashupPlatform.prefs.get('title'); if (colorRegex.test(textColor)) { this.body.style.color = "rgba(" + parseInt(textColor.substr(1, 2), 16) + "," + @@ -53,8 +56,6 @@ this.MashupPlatform.widget.log("Invalid text color: " + textColor, this.MashupPlatform.log.WARN); } - this.body.style.fontSize = (height * 0.7) + 'px'; - this.body.style.lineHeight = height + 'px'; if (colorRegex.test(backgroundColor)) { this.body.style.backgroundColor = "rgba(" + parseInt(backgroundColor.substr(1, 2), 16) + "," + parseInt(backgroundColor.substr(3, 2), 16) + "," + @@ -65,16 +66,19 @@ this.MashupPlatform.widget.log("Invalid background color: " + backgroundColor, this.MashupPlatform.log.WARN); } - message.style.height = height + 'px'; + height -= title.offsetHeight; + + message.style.fontSize = (height * 0.7) + 'px'; + this.body.style.lineHeight = height + 'px'; next = Number(this.MashupPlatform.prefs.get('max-height')) / 100; min = Number(this.MashupPlatform.prefs.get('min-height')) / 100; while ((message.offsetWidth > width || message.offsetHeight > height) && next >= min) { - this.body.style.fontSize = Math.floor(height * next) + 'px'; + message.style.fontSize = Math.floor(height * next) + 'px'; next -= 0.05; } if ((message.offsetWidth > width || message.offsetHeight > height)) { - this.body.style.fontSize = Math.floor(height * min) + 'px'; + message.style.fontSize = Math.floor(height * min) + 'px'; } } @@ -137,6 +141,10 @@ } }.bind(this)); + // Sometimes the widget is not correctly resized when the page is loaded + // so we force a repaint after a timeout + setTimeout(this.repaint.bind(this), 500); + this.MashupPlatform.prefs.registerCallback(function (_) { this.repaint(); }.bind(this)); @@ -144,7 +152,9 @@ /* Initial content */ var message = this.shadowDOM.getElementById('message'); + var title = this.shadowDOM.getElementById('title'); message.textContent = this.MashupPlatform.prefs.get('default-value'); + title.textContent = this.MashupPlatform.prefs.get('title'); var default_unit = this.MashupPlatform.prefs.get('default-unit'); if (default_unit.trim() != "") { diff --git a/tests/js/PanelWidgetSpec.js b/tests/js/PanelWidgetSpec.js index c028e71..7021916 100644 --- a/tests/js/PanelWidgetSpec.js +++ b/tests/js/PanelWidgetSpec.js @@ -20,7 +20,7 @@ "use strict"; - const HTML_FIXTURE_CODE = '

'; + const HTML_FIXTURE_CODE = '

'; const clearDocument = function clearDocument() { var elements = shadowDOM.querySelector("body").children; @@ -36,6 +36,7 @@ window.MashupPlatform = new MockMP({ type: 'widget', prefs: { + 'title': 'Panel Widget', 'default-value': '--', 'default-unit': '', 'max-height': 60, From c00de8de8d64177517bc44eeb01c39ff87462b36 Mon Sep 17 00:00:00 2001 From: oxixes <38050447+oxixes@users.noreply.github.com> Date: Tue, 12 Dec 2023 18:46:31 +0100 Subject: [PATCH 4/7] Simplify color parsing --- src/js/main.js | 37 ++++++++++++++++--------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index fc76514..5122d44 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -21,8 +21,6 @@ "use strict"; - const colorRegex = /^#[0-9a-fA-F]{8}$/i; - class Widget { constructor(MashupPlatform, shadowDOM, _) { this.MashupPlatform = MashupPlatform; @@ -46,25 +44,8 @@ title.textContent = this.MashupPlatform.prefs.get('title'); - if (colorRegex.test(textColor)) { - this.body.style.color = "rgba(" + parseInt(textColor.substr(1, 2), 16) + "," + - parseInt(textColor.substr(3, 2), 16) + "," + - parseInt(textColor.substr(5, 2), 16) + "," + - (parseInt(textColor.substr(7, 2), 16) / 255) + ")"; - } else { - this.body.style.color = "#000000"; - this.MashupPlatform.widget.log("Invalid text color: " + textColor, this.MashupPlatform.log.WARN); - } - - if (colorRegex.test(backgroundColor)) { - this.body.style.backgroundColor = "rgba(" + parseInt(backgroundColor.substr(1, 2), 16) + "," + - parseInt(backgroundColor.substr(3, 2), 16) + "," + - parseInt(backgroundColor.substr(5, 2), 16) + "," + - (parseInt(backgroundColor.substr(7, 2), 16) / 255) + ")"; - } else { - this.body.style.backgroundColor = "#FFFFFF"; - this.MashupPlatform.widget.log("Invalid background color: " + backgroundColor, this.MashupPlatform.log.WARN); - } + this.body.style.color = this.parseColor(textColor, "#000000"); + this.body.style.backgroundColor = this.parseColor(backgroundColor, "#FFFFFF"); height -= title.offsetHeight; @@ -132,6 +113,20 @@ this.repaint(); } + parseColor(color, default_color) { + const colorRegex = /^#[0-9a-fA-F]{8}$/i; + + if (colorRegex.test(color)) { + return "rgba(" + parseInt(color.substr(1, 2), 16) + "," + + parseInt(color.substr(3, 2), 16) + "," + + parseInt(color.substr(5, 2), 16) + "," + + (parseInt(color.substr(7, 2), 16) / 255) + ")"; + } else { + this.MashupPlatform.widget.log("Invalid color: " + color, this.MashupPlatform.log.WARN); + return default_color; + } + } + init() { this.MashupPlatform.wiring.registerCallback('textinput', this.processIncomingData.bind(this)); From ce620303a86a00521e668028ad6022ce11f661b0 Mon Sep 17 00:00:00 2001 From: oxixes Date: Wed, 13 Dec 2023 20:17:31 +0100 Subject: [PATCH 5/7] Added a bar to show the value in respect to the minimum and maximum possible values. --- src/config.xml | 5 ++++ src/css/styles.css | 53 +++++++++++++++++++++++++++++++++++++ src/index.html | 9 +++++++ src/js/main.js | 49 ++++++++++++++++++++++++++++++++-- tests/js/PanelWidgetSpec.js | 9 +++++-- 5 files changed, 121 insertions(+), 4 deletions(-) diff --git a/src/config.xml b/src/config.xml index 5942dd4..2b9f029 100644 --- a/src/config.xml +++ b/src/config.xml @@ -30,6 +30,11 @@ + + + + + diff --git a/src/css/styles.css b/src/css/styles.css index ab00dce..6ef229e 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -16,4 +16,57 @@ h4 { margin-top: 10px; margin-bottom: 0; width: 100%; +} + +.minmax-container { + width: 100%; + position: relative; + margin: 10px auto 10px auto; + display: flex; + justify-content: space-between; + line-height: 0; + position: absolute; + bottom: 0; + padding: 0 10px; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.minmax-bar-container { + flex-grow: 1; + transform: translateY(-50%); +} + +.minmax-bar { + width: 100%; + height: 6px; + /* background-color: #ddd; */ + border-radius: 5px; +} + +.minmax-indicator { + width: 12px; + height: 12px; + /* background-color: #4caf50; */ + border-radius: 50%; + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: left 0.5s ease; + left: 0; +} + +.bar-tag { + /* color: #000; */ + font-weight: bold; + font-size: 12px; +} + +.bar-tag-left { + margin-right: 5px; +} + +.bar-tag-right { + margin-left: 5px; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 8540fa1..9a20e9f 100644 --- a/src/index.html +++ b/src/index.html @@ -3,4 +3,13 @@

+ \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 5122d44..0cd6bac 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -33,19 +33,47 @@ } repaint() { - var height, width, backgroundColor, textColor, message, next, min, title; + var height, width, backgroundColor, textColor, barColor, message, next, min, title, minmaxContainer, + leftTagText, rightTagText, leftTag, rightTag, minVal, maxVal, barIndicator, bar; height = this.body.offsetHeight; width = this.body.offsetWidth; backgroundColor = this.MashupPlatform.prefs.get('background-color'); textColor = this.MashupPlatform.prefs.get('text-color'); + barColor = this.MashupPlatform.prefs.get('bar-color'); + leftTagText = this.MashupPlatform.prefs.get('left-tag-text'); + rightTagText = this.MashupPlatform.prefs.get('right-tag-text'); + minVal = this.MashupPlatform.prefs.get('min-value'); + maxVal = this.MashupPlatform.prefs.get('max-value'); message = this.shadowDOM.getElementById('message'); title = this.shadowDOM.getElementById('title'); + minmaxContainer = this.shadowDOM.getElementById('minmax-container'); + leftTag = this.shadowDOM.getElementById('bar-tag-left'); + rightTag = this.shadowDOM.getElementById('bar-tag-right'); + barIndicator = this.shadowDOM.getElementById('bar-indicator'); + bar = this.shadowDOM.getElementById('bar'); + + // Try to parse min and max values to check if they are numbers + if (minVal.trim() != "" && maxVal.trim() != "" && !isNaN(minVal) && !isNaN(maxVal) + && parseFloat(minVal) < parseFloat(maxVal)) { + minmaxContainer.style.display = ""; + leftTag.textContent = leftTagText; + rightTag.textContent = rightTagText; + + height -= minmaxContainer.offsetHeight + parseInt(window.getComputedStyle(minmaxContainer)["margin-bottom"], 10) + + parseInt(window.getComputedStyle(minmaxContainer)["margin-top"], 10); + } else { + minmaxContainer.style.display = "none"; + } title.textContent = this.MashupPlatform.prefs.get('title'); this.body.style.color = this.parseColor(textColor, "#000000"); this.body.style.backgroundColor = this.parseColor(backgroundColor, "#FFFFFF"); + leftTag.style.color = this.parseColor(textColor, "#000000"); + rightTag.style.color = this.parseColor(textColor, "#000000"); + barIndicator.style.backgroundColor = this.parseColor(textColor, "#000000"); + bar.style.backgroundColor = this.parseColor(barColor, "#000000"); height -= title.offsetHeight; @@ -76,7 +104,11 @@ } processIncomingData(data) { - var message, unit, decimals, default_unit, pow; + var message, unit, decimals, default_unit, pow, minVal, maxVal, barIndicator, percentage; + + minVal = this.MashupPlatform.prefs.get('min-value'); + maxVal = this.MashupPlatform.prefs.get('max-value'); + barIndicator = this.shadowDOM.getElementById('bar-indicator'); data = this.parseInputEndpointData(data); if (data == null || ["number", "string", "boolean"].indexOf(typeof data) !== -1) { @@ -93,6 +125,19 @@ if (data.value == null) { message.textContent = this.MashupPlatform.prefs.get('default-value'); } else if (typeof data.value === 'number') { + if (minVal.trim() != "" && maxVal.trim() != "" && !isNaN(minVal) && !isNaN(maxVal) + && parseFloat(minVal) < parseFloat(maxVal)) { + percentage = (data.value - minVal) / (maxVal - minVal); + if (percentage < 0) { + percentage = 0; + } else if (percentage > 1) { + percentage = 1; + } + + barIndicator.style.left = "calc(" + percentage * 100 + "% - (" + percentage + "*" + + barIndicator.offsetWidth + "px))"; + } + pow = Math.pow(10, decimals); data.value = Math.round((pow * data.value).toFixed(decimals)) / pow; message.textContent = data.value; diff --git a/tests/js/PanelWidgetSpec.js b/tests/js/PanelWidgetSpec.js index 7021916..5bd7a41 100644 --- a/tests/js/PanelWidgetSpec.js +++ b/tests/js/PanelWidgetSpec.js @@ -20,7 +20,7 @@ "use strict"; - const HTML_FIXTURE_CODE = '

'; + const HTML_FIXTURE_CODE = '

'; const clearDocument = function clearDocument() { var elements = shadowDOM.querySelector("body").children; @@ -43,7 +43,12 @@ 'min-height': 10, 'decimals': 1, 'background-color': '#FFFFFFFF', - 'text-color': '#000000FF' + 'text-color': '#000000FF', + 'bar-color': '#DDDDDDFF', + 'min-value': '', + 'max-value': '', + 'left-tag-text': '', + 'right-tag-text': '' }, inputs: ['textinput'] }); From 1b6f7dd74c0e6ede477a3ca5dc7a7d2a1558ae9d Mon Sep 17 00:00:00 2001 From: oxixes Date: Thu, 28 Dec 2023 17:14:18 +0100 Subject: [PATCH 6/7] Update changelog --- src/doc/changelog.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/doc/changelog.md b/src/doc/changelog.md index 7f1890d..00bb206 100644 --- a/src/doc/changelog.md +++ b/src/doc/changelog.md @@ -1,3 +1,7 @@ +## 2.0.0 + +- Updates the widget to `macversion` 2. + ## 1.1.0 - Add a preference for controlling how many decimals to use when displaying From cd399a8310e734d4ad292b4ddcb8e8f7676dec45 Mon Sep 17 00:00:00 2001 From: oxixes Date: Thu, 28 Dec 2023 17:28:32 +0100 Subject: [PATCH 7/7] Update user guide and changelog. --- src/doc/changelog.md | 4 ++++ src/doc/userguide.md | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/src/doc/changelog.md b/src/doc/changelog.md index 00bb206..7f8f29a 100644 --- a/src/doc/changelog.md +++ b/src/doc/changelog.md @@ -1,6 +1,10 @@ ## 2.0.0 - Updates the widget to `macversion` 2. +- Adds the ability to customize colors. +- Adds the ability to add a title to the panel. +- Adds the ability to add a bar that shows the current value in relation to a + minimum and maximum value. ## 1.1.0 diff --git a/src/doc/userguide.md b/src/doc/userguide.md index 4a5489b..e9c5ee4 100644 --- a/src/doc/userguide.md +++ b/src/doc/userguide.md @@ -5,9 +5,17 @@ The panel widget is a WireCloud widget that provides an easy way to display simp ## Settings +- `Title`: Title to show in the panel (empty for not showing any title). - `Min height (Percentage)`: Minimal font-size to use. This value is a percentage relative to the available height. - `Max height (Percentage)`: Maximal font-size to use. This value is a percentage relative to the available height. - `Decimals`: Number of decimals to use for number values. Empty for using all the available decimals. +- `Background color`: Background color to use for the panel. +- `Text color`: Text color to use for the panel. +- `Bar color`: Color to use for the bar that shows the current value in relation to a minimum and maximum value. +- `Min value`: Minimum value to use for the bar. +- `Max value`: Maximum value to use for the bar. +- `Left tag text`: Text to show on the left side of the bar. +- `Right tag text`: Text to show on the right side of the bar. ## Wiring