animation for all toggle switches done
This commit is contained in:
wixette
parent
7551c4e510
commit
56f18e2e8d
16
index.html
16
index.html
|
|
@ -345,31 +345,31 @@
|
|||
<g transform="matrix(1.04197,0,0,1.04197,1076.52,141.554)">
|
||||
<text x="192.173px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">Data</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,144.453,221.454)">
|
||||
<g id="SW-STOP" transform="matrix(1.04197,0,0,1.04197,144.453,221.454)">
|
||||
<text x="188.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STOP</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,144.386,262.103)">
|
||||
<g id="SW-RUN" transform="matrix(1.04197,0,0,1.04197,144.386,262.103)">
|
||||
<text x="192.179px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RUN</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,345.579,221.179)">
|
||||
<g id="SW-EXAMINE" transform="matrix(1.04197,0,0,1.04197,345.579,221.179)">
|
||||
<text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,346.134,264.187)">
|
||||
<g id="SW-EXAMINE-NEXT" transform="matrix(1.04197,0,0,1.04197,346.134,264.187)">
|
||||
<text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
|
||||
<text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,243.798,210.443)">
|
||||
<g id="SW-SINGLE" transform="matrix(1.04197,0,0,1.04197,243.798,210.443)">
|
||||
<text x="182.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">SINGLE</text>
|
||||
<text x="189.507px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STEP</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,446.65,221.179)">
|
||||
<g id="SW-DEPOSIT" transform="matrix(1.04197,0,0,1.04197,446.65,221.179)">
|
||||
<text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,446.65,264.187)">
|
||||
<g id="SW-DEPOSIT-NEXT" transform="matrix(1.04197,0,0,1.04197,446.65,264.187)">
|
||||
<text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
|
||||
<text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,548.763,221.179)">
|
||||
<g id="SW-RESET" transform="matrix(1.04197,0,0,1.04197,548.763,221.179)">
|
||||
<text x="185.174px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RESET</text>
|
||||
</g>
|
||||
<g transform="matrix(1.04197,0,0,1.04197,548.763,264.175)">
|
||||
|
|
|
|||
178
js/panel.js
178
js/panel.js
|
|
@ -370,12 +370,22 @@ panel.SWITCH_INFO = [
|
|||
},
|
||||
];
|
||||
|
||||
/** The current state of all the address switches. */
|
||||
panel.addressSwitchStates = new Array(16);
|
||||
|
||||
/** Whether the power is turned on. */
|
||||
panel.poweredOn = false;
|
||||
|
||||
/** Whether the machine is running. */
|
||||
panel.running = false;
|
||||
|
||||
/**
|
||||
* Initializes thie UI.
|
||||
*/
|
||||
panel.init = function() {
|
||||
var localeButtonElem = document.getElementById('locale');
|
||||
localeButtonElem.addEventListener('click', l10n.nextLocale, false);
|
||||
// Initializes event listener for nav buttons.
|
||||
var button = document.getElementById('locale');
|
||||
button.addEventListener('click', l10n.nextLocale, false);
|
||||
|
||||
// Initializes svg components for all LEDs.
|
||||
for (let i = 0; i < panel.LED_INFO.length; i++) {
|
||||
|
|
@ -389,6 +399,37 @@ panel.init = function() {
|
|||
let sw = panel.createSwitch(info.id, info.type,
|
||||
info.x, info.y);
|
||||
}
|
||||
|
||||
// Initializes event listener for STATELESS switches.
|
||||
var cmd = document.getElementById('SW-STOP');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onStop, false);
|
||||
cmd = document.getElementById('SW-RUN');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onRun, false);
|
||||
cmd = document.getElementById('SW-SINGLE');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onSingle, false);
|
||||
cmd = document.getElementById('SW-EXAMINE');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onExamine, false);
|
||||
cmd = document.getElementById('SW-EXAMINE-NEXT');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onExamineNext, false);
|
||||
cmd = document.getElementById('SW-DEPOSIT');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onDeposit, false);
|
||||
cmd = document.getElementById('SW-DEPOSIT-NEXT');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onDepositNext, false);
|
||||
cmd = document.getElementById('SW-RESET');
|
||||
cmd.style.cursor = 'pointer';
|
||||
cmd.addEventListener('click', panel.onReset, false);
|
||||
|
||||
// Initializes internal states.
|
||||
panel.addressSwitchStates.fill(0);
|
||||
panel.poweredOn = false;
|
||||
panel.running = false;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -461,14 +502,38 @@ panel.createSwitch = function(id, type, x, y) {
|
|||
upElem.id = id + '-up';
|
||||
upElem.x.baseVal.value = '' + x;
|
||||
upElem.y.baseVal.value = '' + y;
|
||||
if (type == panel.TOGGLE_SWITCH) {
|
||||
upElem.style.cursor = 'pointer';
|
||||
}
|
||||
upElem.style.display = 'none';
|
||||
|
||||
var downElem = switchDownElem.cloneNode(true);
|
||||
downElem.id = id + '-down';
|
||||
downElem.x.baseVal.value = '' + x;
|
||||
downElem.y.baseVal.value = '' + y;
|
||||
if (type == panel.TOGGLE_SWITCH) {
|
||||
downElem.style.cursor = 'pointer';
|
||||
}
|
||||
downElem.style.display = (type == panel.TOGGLE_SWITCH) ? 'inline' : 'none';
|
||||
|
||||
if (type == panel.TOGGLE_SWITCH) {
|
||||
// Here only sets click listener for all TOGGLE_SWITCH
|
||||
// controls. For STATELESS_SWITCH controls, each control maps
|
||||
// to one or two commands, thus, their listeners will be
|
||||
// installed separatedly in init().
|
||||
var sourceId = id;
|
||||
upElem.addEventListener('click',
|
||||
function() {
|
||||
panel.onToggle(sourceId, 1);
|
||||
},
|
||||
false);
|
||||
downElem.addEventListener('click',
|
||||
function() {
|
||||
panel.onToggle(sourceId, 0);
|
||||
},
|
||||
false);
|
||||
}
|
||||
|
||||
panelElem.appendChild(midElem);
|
||||
panelElem.appendChild(upElem);
|
||||
panelElem.appendChild(downElem);
|
||||
|
|
@ -552,7 +617,112 @@ panel.switchDownThenBack = function(id) {
|
|||
upElem.style.display = 'none';
|
||||
midElem.style.display = 'inline';
|
||||
downElem.style.display = 'none';
|
||||
}, 300);
|
||||
}, 300);
|
||||
}, 400);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
/**
|
||||
* When STOP switch is pressed.
|
||||
*/
|
||||
panel.onStop = function() {
|
||||
panel.switchUpThenBack('STOP-RUN');
|
||||
window.console.log('STOP');
|
||||
};
|
||||
|
||||
/**
|
||||
* When RUN switch is pressed.
|
||||
*/
|
||||
panel.onRun = function() {
|
||||
panel.switchDownThenBack('STOP-RUN');
|
||||
window.console.log('RUN');
|
||||
};
|
||||
|
||||
/**
|
||||
* When SINGLE STEP switch is pressed.
|
||||
*/
|
||||
panel.onSingle = function() {
|
||||
panel.switchUpThenBack('SINGLE');
|
||||
window.console.log('SINGLE STEP');
|
||||
};
|
||||
|
||||
/**
|
||||
* When EXAMINE switch is pressed.
|
||||
*/
|
||||
panel.onExamine = function() {
|
||||
panel.switchUpThenBack('EXAMINE');
|
||||
window.console.log('EXAMINE');
|
||||
};
|
||||
|
||||
/**
|
||||
* When EXAMINE NEXT switch is pressed.
|
||||
*/
|
||||
panel.onExamineNext = function() {
|
||||
panel.switchDownThenBack('EXAMINE');
|
||||
window.console.log('EXAMINE NEXT');
|
||||
};
|
||||
|
||||
/**
|
||||
* When DEPOSIT switch is pressed.
|
||||
*/
|
||||
panel.onDeposit = function() {
|
||||
panel.switchUpThenBack('DEPOSIT');
|
||||
window.console.log('DEPOSIT');
|
||||
};
|
||||
|
||||
/**
|
||||
* When DEPOSIT NEXT switch is pressed.
|
||||
*/
|
||||
panel.onDepositNext = function() {
|
||||
panel.switchDownThenBack('DEPOSIT');
|
||||
window.console.log('DEPOSIT NEXT');
|
||||
};
|
||||
|
||||
/**
|
||||
* When RESET switch is pressed.
|
||||
*/
|
||||
panel.onReset = function() {
|
||||
panel.switchUpThenBack('RESET');
|
||||
window.console.log('RESET');
|
||||
};
|
||||
|
||||
/**
|
||||
* When power is turned on.
|
||||
*/
|
||||
panel.onPowerOn = function() {
|
||||
window.console.log('POWER ON');
|
||||
};
|
||||
|
||||
/**
|
||||
* When power is turned off.
|
||||
*/
|
||||
panel.onPowerOff = function() {
|
||||
window.console.log('POWER OFF');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles the click event for all TOGGLE_SWITCH controls.
|
||||
* @param {string} id The switch ID which has been clicked.
|
||||
* @param {number} state The state of the switch before it's clicked.
|
||||
* 0 for the down state. 1 for the up state.
|
||||
*/
|
||||
panel.onToggle = function(id, state) {
|
||||
if (state == 0) {
|
||||
panel.switchUp(id);
|
||||
window.console.log('TOGGLE: ' + id + ' 0->1');
|
||||
} else {
|
||||
panel.switchDown(id);
|
||||
window.console.log('TOGGLE: ' + id + ' 1->0');
|
||||
}
|
||||
if (id == 'OFF-ON') {
|
||||
if (state == 0) {
|
||||
panel.onPowerOn();
|
||||
} else {
|
||||
panel.onPowerOff();
|
||||
}
|
||||
} else {
|
||||
var bitIndex = parseInt(id.substr(1));
|
||||
panel.addressSwitchStates[bitIndex] =
|
||||
panel.addressSwitchStates[bitIndex] ? 0 : 1;
|
||||
window.console.log(panel.addressSwitchStates);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user