create all LEDs and Switches from JavaScript code
This commit is contained in:
wixette
parent
3ffb1c0b59
commit
fb09d39c39
435
js/panel.js
435
js/panel.js
|
|
@ -22,6 +22,354 @@
|
||||||
*/
|
*/
|
||||||
panel = {};
|
panel = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The info of all LEDs.
|
||||||
|
*/
|
||||||
|
panel.LED_INFO = [
|
||||||
|
{
|
||||||
|
id: 'INTE',
|
||||||
|
x: 194,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PROT',
|
||||||
|
x: 245,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'MEMR',
|
||||||
|
x: 296,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'INP',
|
||||||
|
x: 347,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'MI',
|
||||||
|
x: 398,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'OUT',
|
||||||
|
x: 449,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'HLTA',
|
||||||
|
x: 500,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'STACK',
|
||||||
|
x: 551,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'WO',
|
||||||
|
x: 602,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'INT',
|
||||||
|
x: 653,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D7',
|
||||||
|
x: 830,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D6',
|
||||||
|
x: 880,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D5',
|
||||||
|
x: 959,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D4',
|
||||||
|
x: 1009,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D3',
|
||||||
|
x: 1059,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D2',
|
||||||
|
x: 1138,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D1',
|
||||||
|
x: 1188,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'D0',
|
||||||
|
x: 1238,
|
||||||
|
y: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'WAIT',
|
||||||
|
x: 194,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'HLDA',
|
||||||
|
x: 245,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A15',
|
||||||
|
x: 346,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A14',
|
||||||
|
x: 423,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A13',
|
||||||
|
x: 473,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A12',
|
||||||
|
x: 523,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A11',
|
||||||
|
x: 602,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A10',
|
||||||
|
x: 652,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A9',
|
||||||
|
x: 702,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A8',
|
||||||
|
x: 780,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A7',
|
||||||
|
x: 830,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A6',
|
||||||
|
x: 880,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A5',
|
||||||
|
x: 959,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A4',
|
||||||
|
x: 1009,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A3',
|
||||||
|
x: 1059,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A2',
|
||||||
|
x: 1138,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A1',
|
||||||
|
x: 1188,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'A0',
|
||||||
|
x: 1238,
|
||||||
|
y: 230
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch types.
|
||||||
|
*/
|
||||||
|
panel.TOGGLE_SWITCH = 0;
|
||||||
|
panel.STATELESS_SWITCH = 1;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The info of all switches.
|
||||||
|
*/
|
||||||
|
panel.SWITCH_INFO = [
|
||||||
|
{
|
||||||
|
id: 'S15',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 346,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S14',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 423,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S13',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 473,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S12',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 523,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S11',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 602,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S10',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 652,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S9',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 702,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S8',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 780,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S7',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 830,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S6',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 880,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S5',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 959,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S4',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 1009,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S3',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 1059,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S2',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 1138,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S1',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 1188,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'S0',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 1238,
|
||||||
|
y: 334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'OFF-ON',
|
||||||
|
type: panel.TOGGLE_SWITCH,
|
||||||
|
x: 105,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'STOP-RUN',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 348,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'SINGLE',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 446,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EXAMINE',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 550,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'DEPOSIT',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 650,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RESET',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 753,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PROTECT',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 853,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'AUX1',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 957,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'AUX2',
|
||||||
|
type: panel.STATELESS_SWITCH,
|
||||||
|
x: 1060,
|
||||||
|
y: 439
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes thie UI.
|
* Initializes thie UI.
|
||||||
*/
|
*/
|
||||||
|
|
@ -29,44 +377,99 @@ panel.init = function() {
|
||||||
var localeButtonElem = document.getElementById('locale');
|
var localeButtonElem = document.getElementById('locale');
|
||||||
localeButtonElem.addEventListener('click', l10n.nextLocale, false);
|
localeButtonElem.addEventListener('click', l10n.nextLocale, false);
|
||||||
|
|
||||||
var led = panel.createLed(100, 200, 'intl');
|
// Initializes svg components for all LEDs.
|
||||||
|
for (let i = 0; i < panel.LED_INFO.length; i++) {
|
||||||
|
let info = panel.LED_INFO[i];
|
||||||
|
let led = panel.createLed(info.id, info.x, info.y);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
// Initializes svg components for all switches.
|
||||||
var switchMidElem = document.getElementById('switch-mid');
|
for (let i = 0; i < panel.SWITCH_INFO.length; i++) {
|
||||||
var switchUpElem = document.getElementById('switch-up');
|
let info = panel.SWITCH_INFO[i];
|
||||||
var switchDownElem = document.getElementById('switch-down');
|
let sw = panel.createSwitch(info.id, info.type,
|
||||||
*/
|
info.x, info.y);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a new LED inside the panel svg.
|
* Creates a new LED inside the panel svg.
|
||||||
|
* @param {string} id The LED ID. This ID will be used as the prefix
|
||||||
|
* of DOM element's ID.
|
||||||
* @param {number} x The x position.
|
* @param {number} x The x position.
|
||||||
* @param {number} y The y 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) {
|
panel.createLed = function(id, x, y, id) {
|
||||||
var panelElem = document.getElementById('panel');
|
var panelElem = document.getElementById('panel');
|
||||||
var ledOnElem = document.getElementById('led-on');
|
var ledOnElem = document.getElementById('led-on');
|
||||||
var ledOffElem = document.getElementById('led-off');
|
var ledOffElem = document.getElementById('led-off');
|
||||||
|
|
||||||
var onElem = ledOnElem.cloneNode(true);
|
var onElem = ledOnElem.cloneNode(true);
|
||||||
|
onElem.id = id + '-on';
|
||||||
onElem.x.baseVal.value = '' + x;
|
onElem.x.baseVal.value = '' + x;
|
||||||
onElem.y.baseVal.value = '' + y;
|
onElem.y.baseVal.value = '' + y;
|
||||||
onElem.id = idPrefix + '-on';
|
|
||||||
onElem.style.display = 'none';
|
onElem.style.display = 'none';
|
||||||
|
|
||||||
var offElem = ledOffElem.cloneNode(true);
|
var offElem = ledOffElem.cloneNode(true);
|
||||||
offElem.id = idPrefix + '-off';
|
offElem.id = id + '-off';
|
||||||
offElem.x.baseVal.value = '' + x;
|
offElem.x.baseVal.value = '' + x;
|
||||||
offElem.y.baseVal.value = '' + y;
|
offElem.y.baseVal.value = '' + y;
|
||||||
offElem.style.display = 'inline';
|
offElem.style.display = 'inline';
|
||||||
|
|
||||||
panelElem.appendChild(onElem);
|
panelElem.appendChild(onElem);
|
||||||
panelElem.appendChild(offElem);
|
panelElem.appendChild(offElem);
|
||||||
|
};
|
||||||
var ret = {};
|
|
||||||
ret.onElem = onElem;
|
/**
|
||||||
ret.offElem = offElem;
|
* Turns on the specified LED.
|
||||||
return ret;
|
* @param {string} id The LED ID.
|
||||||
|
*/
|
||||||
|
panel.ledOn = function(id) {
|
||||||
|
document.getElementById(id + '-on').style.display = 'inline';
|
||||||
|
document.getElementById(id + '-off').style.display = 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Turns off the specified LED.
|
||||||
|
* @param {string} id The LED ID.
|
||||||
|
*/
|
||||||
|
panel.ledOff = function(id) {
|
||||||
|
document.getElementById(id + '-on').style.display = 'none';
|
||||||
|
document.getElementById(id + '-off').style.display = 'inline';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new switch inside the panel svg.
|
||||||
|
* @param {string} id The switch ID. This ID will be used as the
|
||||||
|
* prefix of DOM element's ID.
|
||||||
|
* @param {number} type The type of the switch.
|
||||||
|
* @param {number} x The x position.
|
||||||
|
* @param {number} y The y position.
|
||||||
|
*/
|
||||||
|
panel.createSwitch = function(id, type, x, y) {
|
||||||
|
var panelElem = document.getElementById('panel');
|
||||||
|
var switchMidElem = document.getElementById('switch-mid');
|
||||||
|
var switchUpElem = document.getElementById('switch-up');
|
||||||
|
var switchDownElem = document.getElementById('switch-down');
|
||||||
|
|
||||||
|
var midElem = switchMidElem.cloneNode(true);
|
||||||
|
midElem.id = id + '-mid';
|
||||||
|
midElem.x.baseVal.value = '' + x;
|
||||||
|
midElem.y.baseVal.value = '' + y;
|
||||||
|
midElem.style.display = (type == panel.STATELESS_SWITCH) ? 'inline' : 'none';
|
||||||
|
|
||||||
|
var upElem = switchUpElem.cloneNode(true);
|
||||||
|
upElem.id = id + '-up';
|
||||||
|
upElem.x.baseVal.value = '' + x;
|
||||||
|
upElem.y.baseVal.value = '' + y;
|
||||||
|
upElem.style.display = 'none';
|
||||||
|
|
||||||
|
var downElem = switchDownElem.cloneNode(true);
|
||||||
|
downElem.id = id + '-down';
|
||||||
|
downElem.x.baseVal.value = '' + x;
|
||||||
|
downElem.y.baseVal.value = '' + y;
|
||||||
|
downElem.style.display = (type == panel.TOGGLE_SWITCH) ? 'inline' : 'none';
|
||||||
|
|
||||||
|
panelElem.appendChild(midElem);
|
||||||
|
panelElem.appendChild(upElem);
|
||||||
|
panelElem.appendChild(downElem);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user