From 15e08187e054490b85565f499c4a5cf2410cec5a Mon Sep 17 00:00:00 2001 From: wixette Date: Sat, 7 Mar 2020 17:31:00 +0800 Subject: [PATCH] dynamically create led and switch svg components. --- index.html | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++-- js/panel.js | 72 +++++++++++++++++++++++++++++++ 2 files changed, 188 insertions(+), 4 deletions(-) create mode 100644 js/panel.js diff --git a/index.html b/index.html index 20fe8a9..d224d9c 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@
- + @@ -450,6 +450,111 @@ + + + + + + + + + + +
@@ -462,10 +567,17 @@ + + diff --git a/js/panel.js b/js/panel.js new file mode 100644 index 0000000..b377c43 --- /dev/null +++ b/js/panel.js @@ -0,0 +1,72 @@ +/** + * Copyright 2020 wixette@gmail.com + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @fileoverview The main logic to control the front panel UI. + */ + +/** + * Simple namespace. + * @type {Object} + */ +panel = {}; + +/** + * Initializes thie UI. + */ +panel.init = function() { + var localeButtonElem = document.getElementById('locale'); + localeButtonElem.addEventListener('click', l10n.nextLocale, false); + + var led = panel.createLed(100, 200, 'intl'); + + /* + var switchMidElem = document.getElementById('switch-mid'); + var switchUpElem = document.getElementById('switch-up'); + var switchDownElem = document.getElementById('switch-down'); + */ +}; + +/** + * Creates a new LED inside the panel svg. + * @param {number} x The x position. + * @param {number} y The y position. + * @param {string} idPrefix The prefix of the element ID. + * @return {Object} The created object. { onElem: elem1, offElem: elem2 } + */ +panel.createLed = function(x, y, idPrefix) { + var panelElem = document.getElementById('panel'); + var ledOnElem = document.getElementById('led-on'); + var ledOffElem = document.getElementById('led-off'); + + var onElem = ledOnElem.cloneNode(true); + onElem.x.baseVal.value = '' + x; + onElem.y.baseVal.value = '' + y; + onElem.id = idPrefix + '-on'; + onElem.style.display = 'none'; + + var offElem = ledOffElem.cloneNode(true); + offElem.id = idPrefix + '-off'; + offElem.x.baseVal.value = '' + x; + offElem.y.baseVal.value = '' + y; + offElem.style.display = 'inline'; + + panelElem.appendChild(onElem); + panelElem.appendChild(offElem); + + var ret = {}; + ret.onElem = onElem; + ret.offElem = offElem; + return ret; +};