web/js/webThrottle.js
/**********************************************************************************************
*
* Javascript for 'webThrottle.html'
*
* This script defines the web throttle behaviour.
*
* >>> This file version: 2.4 - by Oscar Moutinho (oscar.moutinho@gmail.com)
*
* This script relies on 'jquery.jmriConnect.js v2.1' (read its header for dependencies).
*
* URL parameters: (roster/panels list if no parameters)
* - 'loconame' (to open a throttle for a loco)
* - 'turnouts' (to list turnouts)
* - 'routes' (to list routes)
* - 'panelname' (to open a panel)
* - 'reset' (to remove local configuration - restore defaults)
* - 'debug' (=true -> turn it ON, =false -> turn it OFF, other values -> nothing change)
*
**********************************************************************************************/
//+++++++++++++++++++++++++++++++++++++++++++++++++++ Global Vars and Functions
//----------------------------------------- Global vars
var log = new Logger();
var $debug = true;
var $vScrollbarWidth;
var $showScrollBar = false;
var $zIndexForSmoothAlert = 999999999; // Max z-index = 2147483647
var $jmri = null;
var $throttleType = '';
var $rosterGroup = '';
var $isRoster;
var $frameList = [];
var $toFrame = false;
var $inFrame = false;
var $pageInFrame;
var $speedPosition = true;
var $inputParameters;
var $paramLocoName;
var $paramPanels;
var $paramPanelName;
var $rosterGroups;
var $locoList;
var $panelLoaded = false;
var $resizeCheckTimer = null;
var $resizeCheckInterval = 500; // ms
var $viewportHeight = 0; // Initial value to force resize
var $viewportWidth = 0; // Initial value to force resize
var $changeBothSizes;
var $heightChanged;
var $widthChanged;
var $portrait;
var $fontSizeMin = 8; // px
var $fontSizeMax = 48; // px
var $defaultFontSize = 16; // px - default
var $fontSize = $defaultFontSize;
var $fontDelta;
var $fontChanged;
var $sizeCtrlPercent;
var $nextBlockTop;
var $headerHeightRef = 40; // px
var $buttonsHeightRef = 30; // px
var $cellHeightRef = 100; // px
var $cellWidthRef = 500; // px
var $speedWidthRef = 80; // px
var $functionHeightRef = 80; // px
var $functionWidthRef = 250; // px
var $buttonDelayTimeout = 1000; // ms
var $powerDelayTimer = null;
var $removeDelayTimer = null;
var $speedTimer = null;
var $speedInterval = 250; // ms
var $speedStep = 0.10;
var $speedFeedback = true;
var $speedAux = 0;
var $hasTouch = ('ontouchstart' in window);
var $hasMovement = (window.orientation !== null) && $hasTouch;
var $orientation = null;
var $movementTilt = null;
var $movementActive = false;
var $movementOn = false;
var $movementCtrl = 0;
var $locoAddress = "none";
var $help = [];
//----------------------------------------- Generic onError
window.onerror = function(errMsg, errUrl, errLineNumber) {
if ($jmri) $jmri.closeSocket();
if ($resizeCheckTimer) {
clearInterval($resizeCheckTimer);
$resizeCheckTimer = null;
}
if ($speedTimer) {
clearInterval($speedTimer);
$speedTimer = null;
}
if (errMsg.indexOf('private~') >= 0) alert(errMsg.split('~')[1]);
else {
if (errMsg == 'Uncaught ReferenceError: stopme is not defined') location.reload(true); // I don't know what this is !?!?!? Just reload.
else alert('\nError running javascript:\n' + errMsg + '\n\nURL:\n' + errUrl + '\n\nLine Number: ' + errLineNumber);
}
document.body.innerHTML = '';
return true;
};
//----------------------------------------- Page exit cleanup 1
window.onbeforeunload = function() {
};
//----------------------------------------- Page exit cleanup 2
window.onunload = function() {
if ($jmri) {
if ($('body').attr('locoReady') == 'true') $jmri.setJMRI('throttle', $locoAddress, {"release":null});
$jmri.closeSocket();
}
if ($resizeCheckTimer) {
clearInterval($resizeCheckTimer);
$resizeCheckTimer = null;
}
if ($speedTimer) {
clearInterval($speedTimer);
$speedTimer = null;
}
};
//----------------------------------------- Add trim method to string
String.prototype.trim = function () {return this.replace(/^\s+|\s+$/g,'');};
//----------------------------------------- Immediate execution
try {
if (jQuery === undefined) throw new Error('private~jQuery not loaded.\nHTML5 and WebSockets needed.\nCheck browser compatibility.');
} catch(error) {
throw new Error('private~jQuery not loaded.\nHTML5 and WebSockets needed.\nCheck browser compatibility.');
}
try {
localStorage['webThrottle.test'] = '1';
localStorage.removeItem('webThrottle.test');
} catch(error) {
if (error.code === DOMException.QUOTA_EXCEEDED_ERR && localStorage.length === 0) throw new Error('private~Turn off Private Browsing.');
else throw new Error('private~Local Storage not available.\nHTML5 and WebSockets needed.\nCheck browser compatibility.');
}
//----------------------------------------- Run at start up
$(document).ready(function() {
/******* Constants available in '$jmri' object
* $jmri.powerUNKNOWN = 0;
* $jmri.powerON = 2;
* $jmri.powerOFF = 4;
* $jmri.turnoutUNDEFINED = 0;
* $jmri.turnoutUNKNOWN = 1;
* $jmri.turnoutCLOSED = 2;
* $jmri.turnoutTHROWN = 4;
* $jmri.routeDISABLED = 0;
* $jmri.routeUNDEFINED = 1;
* $jmri.routeACTIVE = 2;
* $jmri.routeINACTIVE = 4;
* $jmri.TRUE = true;
* $jmri.FALSE = false;
* $jmri.YES = 1;
* $jmri.NO = 0;
* $jmri.EMERGENCY_STOP = '-1.0';
* $jmri.STOP = '0.0';
* $jmri.FULL_SPEED = '1.0';
******** Functions available in '$jmri' object
* $jmri.getRoster(group)
* . To list all: group = null or undefined
* . Returns array of object: id, roadNumber, roadName, mfg, owner, model, dccAddress, imageFilePath, iconFilePath
* $jmri.getRosterItem(id)
* . Returns object: id, fileName, roadNumber, roadName, mfg, owner, model, dccAddress, comment, maxSpeed, imageFilePath, iconFilePath, URL, IsShuntingOn, f[i].lockable, f[i].functionlabel, f[i].functionImage, f[i].functionImageSelected
* . If a function is not defined: f[i] = null
* $jmri.getRosterGroups()
* . Returns array of strings: rosterGroup
* $jmri.getObjectList(listType) {
* . Possible values for string 'listType' (get): roster, panels, lights, reporters, sensors, turnouts, signalHeads, signalMasts, routes, memories, blocks, oblocks
* . Returns array of objects: list
* $jmri.closeSocket()
* . To stop communication with JMRI (usually, before exit and before blocking code: alert(), ...)
* $jmri.getJMRI(type, name)
* . Possible values for string 'type' (get): light, reporter, sensor, turnout, signalHead, signalMast, route, memory, power, rosterEntry
* $jmri.setJMRI(type, name, args)
* . Possible values for string 'type' (set): light, reporter, sensor, turnout, signalHead, signalMast, route, memory, power
* Special case for 'type' = 'power' > string 'name' should be null
* Possible 'args' for 'throttle': {"throttle":throttleName,"address":dccAddress,"speed":speed,"forward":forward,"Fn":active} (0 <= n <= 28)
* Possible 'args' for 'light': {"userName":userName,"comment":comment,"state":state}
* Possible 'args' for 'reporter': {"userName":userName,"state":state,"comment":comment,"report":report,"lastReport":lastReport}
* Possible 'args' for 'sensor': {"userName":userName,"comment":comment,"inverted":inverted,"state":state}
* Possible 'args' for 'turnout': {"userName":userName,"comment":comment,"inverted":inverted,"state":state}
* Possible 'args' for 'signalHead': {"userName":userName,"comment":comment,"lit":lit,"appearance":appearance,"held":held,"state":state,"appearanceName":appearanceName}
* Possible 'args' for 'signalMast': {"userName":userName,"":aspect,"lit":lit,"held":held,"state":state}
* Possible 'args' for 'route': {"userName":userName,"comment":comment,"state":state}
* Possible 'args' for 'memory': {"userName":userName,"comment":comment,"value":value}
* Possible 'args' for 'power': {"state":state}
* block
* oblock
* >>> Other values for 'type' and new 'args' may be available
********************************************/
var debug = loadLocalInfo('webThrottle.debug');
if (debug == 'true' || debug == 'false') $debug = (debug == 'true'); else saveLocalInfo('webThrottle.debug', $debug = false);
$fontDelta = 0.14; // hardcoded from testing
var fS = loadLocalInfo('webThrottle.fontSize');
if (fS && !isNaN(fS) && Number(fS) >= $fontSizeMin && Number(fS) <= $fontSizeMax) $fontSize = Number(fS); else saveLocalInfo('webThrottle.fontSize', $fontSize);
$vScrollbarWidth = getVerticalScrollbarWidth();
loadFrameList();
for (var i = 0; i < $frameList.length; i++) { // Check if this page is flagged to be displayed in a frame
if ($frameList[i] == document.URL) {
$inFrame = true;
break;
}
}
var speedPosition = loadLocalInfo('webThrottle.speedPosition');
if (speedPosition == 'true' || speedPosition == 'false') $speedPosition = (speedPosition == 'true'); else saveLocalInfo('webThrottle.speedPosition', $speedPosition);
var movementActive = loadLocalInfo('webThrottle.movementActive');
if (movementActive == 'true' || movementActive == 'false') $movementActive = (movementActive == 'true'); else saveLocalInfo('webThrottle.movementActive', $movementActive);
$inputParameters = getUrlParameters();
debug = $inputParameters.debug;
if (debug) debug = debug.toLowerCase();
if (debug == 'true' || debug == 'false') {
$debug = (debug == 'true');
saveLocalInfo('webThrottle.debug', $debug);
alert('Debug mode ' + ($debug ? 'started.' : 'stopped.'));
window.open(document.URL.split('?')[0], '_top'); // Stop building throttle and restart without parameters
return;
}
if ($inputParameters.reset !== undefined) { // Remove all application parameters
removeLocalInfo("webThrottle.debug");
removeLocalInfo("webThrottle.fontSize");
removeLocalInfo("webThrottle.speedPosition");
removeLocalInfo("webThrottle.movementActive");
removeLocalInfo("webThrottle.rosterGroup");
removeLocalInfo("webThrottle.frameListSize");
for(var i = 0; i < $frameList.length; i++) removeLocalInfo("webThrottle.frameList[" + i + "]");
alert('Default configuration restored.');
window.open(document.URL.split('?')[0], '_top'); // Stop building throttle and restart without parameters
return;
}
if ($debug) smoothAlert('In debug mode ...', 3);
$paramLocoName = $inputParameters.loconame;
$paramPanelName = $inputParameters.panelname;
if ($paramLocoName) $throttleType = 'loco';
if (!$throttleType) if ($inputParameters.turnouts !== undefined) $throttleType = 'turnouts';
if (!$throttleType) if ($inputParameters.routes !== undefined) $throttleType = 'routes';
if (!$throttleType) if ($paramPanelName) $throttleType = 'panel';
if (!$throttleType) $throttleType = 'roster';
$pageInFrame = (window.parent.$('iframe').length > 0);
if ($frameList.length && $throttleType == 'roster' && !$pageInFrame) { // Has info for frames, is the master and it is the top window (build frameset)
var body = $('body').attr('id', 'bodyFrames');
var frame = $('<iframe>').attr('src', document.URL + '?frameFF').attr('id', encodeId(document.URL + '?frameFF')).addClass('frame'); // Added 'frameFF' to solve FF bug
body.append(frame);
for (var j = 0; j < $frameList.length; j++) {
frame = $('<iframe>').attr('src', $frameList[j]).attr('id', encodeId($frameList[j])).addClass('frame');
body.append(frame);
}
$resizeCheckTimer = setInterval(function() {
checkSmoothAlertEnd();
var h = $(window).height();
var w = $(window).width();
if ($viewportHeight != h) {
$heightChanged = true;
$viewportHeight = h;
} else $heightChanged = false;
if ($viewportWidth != w) {
$widthChanged = true;
$viewportWidth = w;
} else $widthChanged = false;
if ($heightChanged || $widthChanged) {
$portrait = (w <= h);
var totalFrames = $frameList.length + 1;
/* Explanation for the next lines
h / w = vRects / hRects
totalFrames = vRects * hRects
.
vRects = h / w * hRects
hRects = totalFrames / vRects
.
vRects = h / w * totalFrames / vRects
.
vRects^2 = h / w * totalFrames
*/
var ratio = h / w * 1.2; // Ratio with correction to choose rectangularity
var vRects = Math.round(Math.sqrt(ratio * totalFrames)); // Number of rectangles per column
var hRects = Math.round(totalFrames / vRects); // Number of rectangles per row
if (vRects * hRects < totalFrames) {
if (ratio > vRects / hRects) vRects++; else hRects++;
}
if ((vRects * hRects - totalFrames) >= ((vRects > hRects) ? hRects : vRects)) {
if (ratio > vRects / hRects) vRects--; else hRects--;
}
var master = Math.floor((hRects - 1) / 2);
var rectHeight = Math.floor(h / vRects); //Each rectangle height
var rectWidth = Math.floor(w / hRects); //Each rectangle width
var t = 0;
var l = 0;
var frames = $('.frame');
var o;
for (var i = 1; i <= master; i++) {
o = frames.eq(i);
o.attr('rightSide', (l + 1 > hRects / 2));
o.css('top', t).css('left', l);
setOuterHeight(o, rectHeight, true);
setOuterWidth(o, rectWidth, true);
if(l + rectWidth * 1.5 < w) l+= rectWidth; else {l = 0; t+= rectHeight;}
}
o = frames.eq(0);
o.attr('rightSide', (l + 1 > hRects / 2));
o.css('top', t).css('left', l);
setOuterHeight(o, rectHeight, true);
setOuterWidth(o, rectWidth, true);
if(l + rectWidth * 1.5 < w) l+= rectWidth; else {l = 0; t+= rectHeight;}
for (var i = master + 1; i < totalFrames; i++) {
o = frames.eq(i);
o.attr('rightSide', (l + 1 > hRects / 2));
o.css('top', t).css('left', l);
setOuterHeight(o, rectHeight, true);
if (i < totalFrames - 1) {
setOuterWidth(o, rectWidth, true);
if(l + rectWidth * 1.5 < w) l+= rectWidth; else {l = 0; t+= rectHeight;}
} else { // Last frame
setOuterWidth(o, w - l, true);
}
}
resizeSmoothAlerts();
}
}, $resizeCheckInterval);
return; // Stop building throttle if frameset
}
// Continue building throttle if not frameset
startJMRI();
});
//----------------------------------------- Start JMRI
var startJMRI = function() {
$jmri = $.JMRI({
//*** Callback Functions available in '$jmri' object
toSend: function(data) {$debug && log.log(new Date() + ' - ' + document.title + '\n' + 'JSONtoSend: ' + data);}, //Nothing to do
fullData: function(data) {$debug && log.log(new Date() + ' - ' + document.title + '\n' + 'JSONreceived: ' + data);}, //Nothing to do
error: function (code, message) {
if (code === 0)
jmriLostComm(message);
else if (code === 200)
smoothAlert(message, 10);
else
smoothAlert('Error: ' + code + ' - ' + message);
},
end: function() {jmriLostComm('The JMRI WebSocket service was turned off.\nSolve the problem and refresh web page.');},
ready: function(jsonVersion, jmriVersion, railroadName) {jmriReady(jsonVersion, jmriVersion, railroadName);}, //When WebSocket connection established - continue next steps
throttle: function(name, address, speed, forward, fs) {throttleState(name, address, speed, forward, fs);},
light: function(name, userName, comment, state) {}, //Nothing to do
reporter: function(name, userName, state, comment, report, lastReport) {}, //Nothing to do
sensor: function(name, userName, comment, inverted, state) {}, //Nothing to do
turnout: function(name, userName, comment, inverted, state) {layoutTurnoutState(name, userName, comment, inverted, state);},
signalHead: function(name, userName, comment, lit, appearance, held, state, appearanceName) {}, //Nothing to do
signalMast: function(name, userName, aspect, lit, held, state) {}, //Nothing to do
route: function(name, userName, comment, state) {layoutRouteState(name, userName, comment, state);},
memory: function(name, userName, comment, value) {}, //Nothing to do
power: function(state) {layoutPowerState(state);},
});
if (!$jmri) throw new Error('private~Could not open JMRI WebSocket.');
};
//----------------------------------------- Lost communication with JMRI
var jmriLostComm = function(message) {
var timer = loadLocalInfo('webThrottle.timerReload');
if (timer && !isNaN(timer) && Number(timer) >= 0 && Number(timer) == Math.abs(timer)) timer = Number(timer); else saveLocalInfo('webThrottle.timerReload', timer = new Date().getTime()); // Miliseconds
if (new Date().getTime() - timer < 30000) { // Reload if less than 30s after communication lost
smoothAlert('Communication lost.\nRestarting ...');
location.reload(true);
} else {
throw new Error('private~' + message);
}
};
//----------------------------------------- JMRI ready
var jmriReady = function(jsonVersion, jmriVersion, railroadName) {
removeLocalInfo('webThrottle.timerReload'); // Communication OK -> Restart count for communication lost
var body = $('body');
var bodyFrameOuter = $('<div>');
bodyFrameOuter.attr('id', 'bodyFrameOuter');
body.append(bodyFrameOuter);
var bodyFrameInner = $('<div>');
bodyFrameInner.attr('id', 'bodyFrameInner');
bodyFrameOuter.append(bodyFrameInner);
if ($hasTouch) { // to prevent 'ghosts', ...
// body.on('touchstart', function(event) {event.preventDefault(); event.stopImmediatePropagation();}); // This blocks every touch !?
} else {
body.on('mousedown', function(event) {event.preventDefault(); event.stopImmediatePropagation();});
}
if ($hasMovement && window.DeviceOrientationEvent) window.addEventListener('deviceorientation', function(event) {deviceOrientation(event);});
var header = $('<div>');
header.attr('id', 'header');
bodyFrameInner.append(header);
if ($throttleType == 'roster' || !$pageInFrame) { // Is master or isn't in a frame
var power = $('<div>').addClass('button').attr('id', 'power').attr('state', -1);
power.append($('<div>').text('o').addClass('buttonText'));
if ($hasTouch) {
power.on('touchstart', function(event) {powerButtonPressedTouch(event.originalEvent);});
power.on('touchend', function(event) {powerButtonReleasedTouch(event.originalEvent);});
} else {
power.on('mousedown', function(event) {powerButtonPressedMouse(event);});
power.on('mouseup', function(event) {powerButtonReleasedMouse(event);});
power.on('mouseout', function(event) {powerButtonCanceledMouse(event);});
}
header.append(power);
}
if ($throttleType == 'roster') { // Button to define new throttles in frame or not
var toFrame;
toFrame = $('<div>').addClass('button').attr('id', 'toFrame');
toFrame.append($('<div>').text('single').addClass('buttonText'));
toFrame.on('click', function(event) {manageNewThrottles(event)});
header.append(toFrame);
} else {
if ($inFrame) { // Button to remove itself from frame
$help.push(
'Press [X] button for 2s' +
'\nto remove this frame.' +
''
);
var removeFrame = $('<div>').addClass('button').attr('id', 'removeFrame');
removeFrame.append($('<div>').text('X').addClass('buttonText'));
if ($hasTouch) {
removeFrame.on('touchstart', function(event) {removeButtonPressedTouch(event.originalEvent);});
removeFrame.on('touchend', function(event) {removeButtonReleasedTouch(event.originalEvent);});
} else {
removeFrame.on('mousedown', function(event) {removeButtonPressedMouse(event);});
removeFrame.on('mouseup', function(event) {removeButtonReleasedMouse(event);});
removeFrame.on('mouseout', function(event) {removeButtonCanceledMouse(event);});
}
header.append(removeFrame);
}
}
if ($throttleType == 'loco' && !$pageInFrame) { // Button to select speed control position
var speedPosition;
speedPosition = $('<div>').addClass('button').attr('id', 'speedPosition');
speedPosition.append($('<div>').text('xxx').addClass('buttonText'));
speedPosition.on('click', function(event) {manageSpeedPosition(event)});
header.append(speedPosition);
changeSpeedPosition($speedPosition);
}
if ($throttleType == 'roster' || !$pageInFrame) { // Is master or isn't in a frame
var fontSmaller = $('<div>').addClass('button').attr('id', 'fontSmaller');
fontSmaller.append($('<div>').text('A').addClass('buttonText'));
fontSmaller.on('click', function(event) {fontSizeChange(event, -2);});
header.append(fontSmaller);
var fontLarger = $('<div>').addClass('button').attr('id', 'fontLarger');
fontLarger.append($('<div>').text('A').addClass('buttonText'));
fontLarger.on('click', function(event) {fontSizeChange(event, +2);});
header.append(fontLarger);
}
var help = $('<div>').addClass('button').attr('id', 'help');
help.append($('<div>').text('?').addClass('buttonText'));
help.on('click', function(event) {helpShow(event);});
header.append(help);
switch ($throttleType) {
case 'roster':
var rg = loadLocalInfo('webThrottle.rosterGroup');
if (rg || rg == '') $rosterGroup = rg; else saveLocalInfo('webThrottle.rosterGroup', $rosterGroup);
$help.push(
'Web Throttle for JMRI ' + jmriVersion + ' controlling \'' + railroadName + '\'' +
'\n' +
'\n URL parameters: (roster/panels list if no parameters)' +
'\n- \'loconame\' (to open a throttle for a loco)' +
'\n- \'turnouts\' (to list turnouts)' +
'\n- \'routes\' (to list routes)' +
'\n- \'panelname\' (to open a panel)' +
'\n- \'reset\' (to restore defaults)' +
'\n- \'debug\' (true or false -> turn debug ON/OFF)' +
'\nEx.: .../web/webThrottle.html?loconame=A%20325' +
'\n (for loco ID = \'A 325\')' +
'\nEx.: .../web/webThrottle.html?turnouts' +
'\n' +
'\nCheck the header of \'webThrottle.html\' for' +
'\ndependencies and versions.' +
'\n' +
'\n... by Oscar Moutinho (oscar.moutinho@gmail.com)' +
''
);
$help.push(
'Press [o] button for 2s to turn power ON/OFF.' +
'\n' +
'\nClick [single] / [multi] button to open\npages alone or grouped.' +
'\n' +
'\nAlert messages:' +
'\n- Older messages are on top of the others;' +
'\n- They can be moved - just drag them.' +
'\n' +
'\nAdvices:' +
'\n- Prevent device sleep when running.' +
'\n- You may want to prevent rotation on your tablet.' +
''
);
$isRoster = ($rosterGroup != '[Panels]');
var buttons = $('<div>');
buttons.attr('id', 'buttons');
bodyFrameInner.append(buttons);
$rosterGroups = $jmri.getRosterGroups();
var groups = $('<div>').addClass('button').attr('id', 'groups');
groups.append($('<div>').text('R. Groups / Panels').addClass('buttonText'));
groups.on('click', function(event) {chooseGroup(event);});
buttons.append(groups);
var turnouts = $('<div>').addClass('button').attr('id', 'turnouts');
turnouts.append($('<div>').text('Turnouts').addClass('buttonText'));
turnouts.on('click', function(event) {turnoutsShow(event);});
buttons.append(turnouts);
var routes = $('<div>').addClass('button').attr('id', 'routes');
routes.append($('<div>').text('Routes').addClass('buttonText'));
routes.on('click', function(event) {routesShow(event);});
buttons.append(routes);
if ($isRoster) { // Roster
var roster = $jmri.getRoster($rosterGroup);
if (roster.length) {
roster.forEach(function(loco) {
var rosterCell = $('<div>');
rosterCell.on('click', function(event) {throttleShow(event, loco.name);});
rosterCell.addClass('rosterCell');
bodyFrameInner.append(rosterCell);
rosterCell.append($('<div>').text(loco.name + ' (' + loco.dccAddress + ')').addClass('locoName'));
rosterCell.append($('<div>').text(loco.roadName + ((loco.roadNumber !== '') ? ' (' + loco.roadNumber + ')' : '')).addClass('locoRoad'));
rosterCell.append($('<div>').text(loco.mfg + ((loco.model !== '') ? ' (' + loco.model + ')' : '') + ((loco.owner !== '') ? ' [' + loco.owner + ']' : '')).addClass('locoMfg'));
var icon = loco.iconFilePath.length > 0;
var image = loco.imageFilePath.length > 0;
if (icon || image) {
rosterCell.append($('<div>').addClass('imageContainer'));
var img = $('<img>').addClass('imageInitial');
rosterCell.children('.imageContainer').append(img);
img[0].onload = function() {
var o = $(this);
o.attr('originalHeight', o.height());
o.attr('originalWidth', o.width());
resizeImage(o);
};
img.attr('src', '/roster/' + encodeURIComponent(loco.name) + '/' + (icon ? 'icon' : 'image') + '?maxHeight=' + $cellHeightRef);
}
});
}
} else { // Panels
var panels = $jmri.getObjectList('panels');
panels.forEach(function(itemdata) {
var item = itemdata.data;
var panelCell = $('<div>');
panelCell.on('click', function(event) {openPanel(event, decodeURIComponent(item.name), item.URL);}); // 'decode' because it arrives encoded
panelCell.addClass('panelCell');
bodyFrameInner.append(panelCell);
panelCell.append($('<div>').text(decodeURIComponent(item.name) + ((item.userName) ? ' - ' + item.userName : '')).addClass('panelName')); // 'decode' because it arrives encoded
panelCell.append($('<div>').addClass('imageContainer'));
var img = $('<img>').addClass('imageInitial');
panelCell.children('.imageContainer').append(img);
img[0].onload = function() {
var o = $(this);
o.attr('originalHeight', o.height());
o.attr('originalWidth', o.width());
resizeImage(o);
};
img.attr('src', '/panel/' + decodeURIComponent(item.name) + '?format=png');
});
}
break;
case 'loco':
body.attr('locoReady', 'false');
$help.push(
(!$inFrame ? 'Press [|::] / [::|] button to\nposition speed control left/right.\n\n' : '') +
($hasMovement ? 'Click [tilt] / [normal] button to turn\nON/OFF device movement sensor.' +
'\nIf [tilt] active, press speed control and\nmove your phone/tablet to change speed.\n\n' : '') +
'Click on loco name to select another one.' +
''
);
if (!$hasMovement) $help.push(
'This device or browser doesn\'t\nsupport movement detection.' +
''
);
document.title+= ' (loco: ' + $paramLocoName + ')';
var loco = $jmri.getRosterItem($paramLocoName);
if (loco) {
var header = $('#header');
var emergencyStop = $('<div>').addClass('button').attr('id', 'emergencyStop');
emergencyStop.append($('<div>').text('STOP').addClass('buttonText'));
emergencyStop.on('click', function(event) {immediateStop(event);});
header.append(emergencyStop);
if ($hasMovement) {
var movementActive = $('<div>').addClass('button').attr('id', 'movementActive');
movementActive.append($('<div>').text('xxx').addClass('buttonText'));
movementActive.on('click', function(event) {manageMovementActive(event);});
header.append(movementActive);
}
var speed = $('<div>');
speed.addClass('speed');
speed.attr('speed', 0);
bodyFrameInner.append(speed);
speed.append($('<div>').attr('id', 'speedGrid'));
var speedGrid = $('#speedGrid');
speedGrid.append($('<div>').attr('id', 'speedLimits'));
speedGrid.append($('<div>').attr('id', 'speedBar'));
var speedTouch = $('<div>');
speedGrid.append(speedTouch.attr('id', 'speedTouch'));
if ($hasMovement) changeMovementActive($movementActive);
else {
if ($hasTouch) {
speedTouch.on('touchstart', function(event) {speedPressedTouch(event.originalEvent);});
speedTouch.on('touchmove', function(event) {speedMovingTouch(event.originalEvent);});
speedTouch.on('touchend', function(event) {speedReleasedTouch(event.originalEvent);});
} else {
speedTouch.on('mousedown', function(event) {speedPressedMouse(event);});
speedTouch.on('mousemove', function(event) {speedMovingMouse(event);});
speedTouch.on('mouseup', function(event) {speedReleasedMouse(event);});
speedTouch.on('mouseout', function(event) {speedCanceledMouse(event);});
}
}
var reverse = $('<div>').addClass('button').addClass('direction').attr('id', 'reverse');
reverse.append($('<div>').text('>').addClass('buttonText')); // Will rotare 90º right
reverse.on('click', function(event) {setDirection(event, false);});
speed.append(reverse);
var forward = $('<div>').addClass('button').addClass('direction').attr('id', 'forward');
forward.append($('<div>').text('<').addClass('buttonText')); // Will rotare 90º right
forward.on('click', function(event) {setDirection(event, true);});
speed.append(forward);
var functionsOuter = $('<div>');
functionsOuter.addClass('functionsOuter');
bodyFrameInner.append(functionsOuter);
var functionsInner = $('<div>');
functionsInner.addClass('functionsInner');
functionsOuter.append(functionsInner);
functionsInner.append($('<div>').text(loco.name + ' (' + loco.dccAddress + ')').addClass('locoName').attr('id', 'locoName').on('click', function(event) {changeLoco(event);}));
var noFs = true;
for (var i = 0; i < 29; i++) if (loco.f[i]) noFs = false;
for (var i = 0; i < 29; i++) {
if (loco.f[i] || noFs) {
var func = $('<div>');
if (noFs || loco.f[i].lockable) {
func.on('click', function(event) {functionClick(event);});
} else {
if ($hasTouch) {
func.on('touchstart', function(event) {functionPressedTouch(event.originalEvent, $(this));});
func.on('touchend', function(event) {functionReleasedTouch(event.originalEvent, $(this));});
} else {
func.on('mousedown', function(event) {functionPressedMouse(event);});
func.on('mouseup', function(event) {functionReleasedMouse(event);});
func.on('mouseout', function(event) {functionCanceledMouse(event);});
}
}
func.addClass('functionButton').attr('id', 'locoFunction' + i);
func.attr('state', $jmri.NO);
functionsInner.append(func);
var funcLabel = $('<div>');
funcLabel.text((loco.f[i] && loco.f[i].functionlabel.length) ? loco.f[i].functionlabel : 'F' + i);
funcLabel.addClass('funcLabel');
func.append(funcLabel);
var funcState = $('<div>');
funcState.addClass('funcState');
func.append(funcState);
}
}
var icon = loco.iconFilePath.length > 0;
var image = loco.imageFilePath.length > 0;
if (icon || image) {
var locoCell = $('<div>');
locoCell.addClass('locoCell');
functionsInner.append(locoCell);
var img = $('<img>').addClass('imageInitial');
locoCell.append(img);
img[0].onload = function() {
var o = $(this);
o.attr('originalHeight', o.height());
o.attr('originalWidth', o.width());
resizeImage(o);
};
img.attr('src', '/roster/' + encodeURIComponent(loco.name) + '/' + (icon ? 'icon' : 'image') + '?maxHeight=' + $cellHeightRef);
}
$locoAddress = '' + loco.dccAddress;
$jmri.setJMRI('throttle', $locoAddress, {"rosterEntry":loco.name});
} else smoothAlert('Loco \'' + $paramLocoName + '\' doesn\'t exist.\nReopen the web page with a valid loco name.');
break;
case 'turnouts':
$help.push(
'C - closed' +
'\nT - thrown' +
'\n? - undefined' +
''
);
document.title+= ' (turnouts)';
defineTurnoutsRoutes($jmri.getObjectList('turnouts'));
break;
case 'routes':
$help.push(
'On - on' +
'\nOff - off' +
'\nX - disabled' +
'\n? - undefined' +
''
);
document.title+= ' (routes)';
defineTurnoutsRoutes($jmri.getObjectList('routes'));
break;
case 'panel':
$help.push(
'This shows an' +
'\ninteractive panel.' +
''
);
document.title+= ' (panel: ' + $paramPanelName + ')';
var iframeAux = $('<div>').attr('id', 'iframeAux');
var panel = $('<iframe>').attr('src', '/panel/' + $paramPanelName).addClass('panel');
panel.load(function() {
var bodyFrameOuter = $('#bodyFrameOuter');
var bodyFrameInner = $('#bodyFrameInner');
var panel = $('.panel');
var panelBody = panel.contents().find('body');
bodyFrameInner.css('top', 0).css('left', 0);
panel.css('top', 0).css('left', 0);
panelBody.css('padding-top', 0).css('padding-bottom', 0);
panelBody.children('footer').remove();
panelBody.children('#wrap').children('#panel-area').appendTo(panelBody);
panelBody.children('#wrap').remove();
panelBody.children('#panel-area').css('border', 'none').css('position', 'absolute');
panelBody.css('background-color', $('#iframeAux').css('background-color'))
setTimeout(function() {$panelLoaded = true; $viewportHeight = 0;}, $resizeCheckInterval * 5); // Force resize some miliseconds after loading
});
iframeAux.css('position', 'absolute').css('background-color', $('body').css('background-color')).css('z-index', '+199');
iframeAux.css('top', 0).css('left', 0);
bodyFrameInner.append(iframeAux);
panel.css('z-index', '+200');
bodyFrameInner.append(panel);
break;
}
checkLayoutSizeChange();
$resizeCheckTimer = setInterval(function() {checkLayoutSizeChange();}, $resizeCheckInterval);
$jmri.getJMRI('power', null);
};
//----------------------------------------- Definition of turnouts or routes
var defineTurnoutsRoutes = function(listTurnoutsRoutes) {
var bodyFrameInner = $('#bodyFrameInner');
listTurnoutsRoutes.forEach(function(item) {
var trCell = $('<div>');
trCell.addClass('trCell');
bodyFrameInner.append(trCell);
trCell.append($('<div>').text(item.data.name + ((item.data.userName) ? ' - ' + item.data.userName : '')).addClass('trName'));
trCell.append($('<div>').text('').addClass('trStatus').attr('id',encodeId(item.data.name)).attr('state', -1).on('click', function(event) {trChangeStatus(event, item.type, item.data.name);}));
$jmri.getJMRI( item.type.startsWith ('turnout') ? 'turnout' : 'route', item.data.name);
});
};
//===================================================================================== Resize functions ==============================
//----------------------------------------- Check screen change size and position (control also 'smoothAlert' messages timeout)
var checkLayoutSizeChange = function() {
checkSmoothAlertEnd();
var h = $(window).height();
var w = $(window).width();
var speedPosition = loadLocalInfo('webThrottle.speedPosition');
if (speedPosition == 'true' || speedPosition == 'false') if ($speedPosition != (speedPosition == 'true')) changeSpeedPosition(!$speedPosition);
var movementActive = loadLocalInfo('webThrottle.movementActive');
if (movementActive == 'true' || movementActive == 'false') if ($movementActive != (movementActive == 'true')) changeMovementActive(!$movementActive);
var fS = loadLocalInfo('webThrottle.fontSize');
if ($fontSize != Number(fS)) {
$fontChanged = true;
$fontSize = Number(fS);
} else $fontChanged = false;
if ($viewportHeight != h) {
$heightChanged = true;
$viewportHeight = h;
} else $heightChanged = false;
if ($viewportWidth != w) {
$widthChanged = true;
$viewportWidth = w;
} else $widthChanged = false;
if ($heightChanged || $widthChanged || $fontChanged) {
$portrait = (w <= h);
$sizeCtrlPercent = $fontSize / $defaultFontSize;
$('body').css('font-size', $fontSize);
resizeHeader();
switch ($throttleType) {
case 'roster':
resizeRosterLayout();
break;
case 'loco':
resizeThrottleLayout();
break;
case 'turnouts':
resizeTurnoutsRoutesLayout();
break;
case 'routes':
resizeTurnoutsRoutesLayout();
break;
case 'panel':
resizePanelLayout();
break;
}
resizeSelectionList();
resizeSmoothAlerts();
}
};
//----------------------------------------- [after image loaded and from 'checkLayoutSizeChange()'] Image resize (related to parent)
var resizeImage = function(img) {
if (!img.length) return;
img.css('margin', 'auto');
img.height(img.attr('originalHeight'));
img.width(img.attr('originalWidth'));
if (img.parent().height() / img.parent().width() <= img.outerHeight(false) / img.outerWidth(false)) {
setOuterHeight(img, img.parent().height(), false);
img.width('auto');
} else {
setOuterWidth(img, img.parent().width(), false);
img.height('auto');
img.css('margin-top', (img.parent().height() - img.outerHeight(false)) / 2);
}
if (img.hasClass('imageInitial')) img.removeClass('imageInitial').addClass('image');
};
//----------------------------------------- [from 'checkLayoutSizeChange()'] Header layout resize when screen or font changes size
var resizeHeader = function() {
$nextBlockTop = 0;
var headerWidth = $(window).width();
var headerHeight = $sizeCtrlPercent * $headerHeightRef;
var header = $('#header');
//header.on('mousedown mouseup click mouseout mousemove', function(event) {mouse(event);});
//header.on('touchstart touchend touchcancel touchmove', function(event) {touch(event, $(this));});
header.css('top', $nextBlockTop).css('left', 0);
setOuterHeight(header, headerHeight, true);
setOuterWidth(header, headerWidth - (($showScrollBar && $throttleType != 'loco') ? $vScrollbarWidth : 0), true);
var power = $('#power');
if (power.length) {
setOuterHeight(power, header.height(), true);
setOuterWidth(power, header.height(), true);
setTopFromParentContent(power, 0);
setLeftFromParentContent(power, 0);
var powerText = power.children('.buttonText');
powerText.css('top', (power.outerHeight(true) - powerText.outerHeight(true)) / 2 - powerText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(powerText, 0);
setOuterWidth(powerText, power.width(), true);
}
if ($throttleType == 'roster' || $inFrame) { // Button to define new throttles in frame or not OR Button to remove itself from frame
var btFrame = (!$inFrame ? $('#toFrame') : $('#removeFrame'));
setOuterHeight(btFrame, header.height(), true);
setOuterWidth(btFrame, header.height() * (($throttleType == 'roster') ? 2 : 1), true);
setTopFromParentContent(btFrame, 0);
setLeftFromParentContent(btFrame, power.length ? power.outerWidth(true) + header.height() * 0.2 : 0);
var btFrameText = btFrame.children('.buttonText');
btFrameText.css('top', (btFrame.outerHeight(true) - btFrameText.outerHeight(true)) / 2 - btFrameText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(btFrameText, 0);
setOuterWidth(btFrameText, btFrame.width(), true);
}
if ($throttleType == 'loco' && !$pageInFrame) { // Button to select speed control position
var speedPosition = $('#speedPosition');
setOuterHeight(speedPosition, header.height(), true);
setOuterWidth(speedPosition, header.height(), true);
setTopFromParentContent(speedPosition, 0);
setLeftFromParentContent(speedPosition, power.outerWidth(true) + header.height() * 0.2);
var speedPositionText = speedPosition.children('.buttonText');
speedPositionText.css('top', (speedPosition.outerHeight(true) - speedPositionText.outerHeight(true)) / 2 - speedPositionText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(speedPositionText, 0);
setOuterWidth(speedPositionText, speedPosition.width(), true);
}
var help = $('#help');
setOuterHeight(help, header.height(), true);
setOuterWidth(help, header.height() * 0.6, true);
setTopFromParentContent(help, 0);
setLeftFromParentContent(help, header.width() - help.outerWidth(true));
var helpText = help.children('.buttonText');
helpText.css('top', (help.outerHeight(true) - helpText.outerHeight(true)) / 2 - helpText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(helpText, 0);
setOuterWidth(helpText, help.width(), true);
var fontLarger = $('#fontLarger');
if (fontLarger.length) {
setOuterHeight(fontLarger, header.height(), true);
setOuterWidth(fontLarger, header.height() * 0.6, true);
setTopFromParentContent(fontLarger, 0);
setLeftFromParentContent(fontLarger, header.width() - fontLarger.outerWidth(true) - help.outerWidth(true));
var fontLargerText = fontLarger.children('.buttonText');
fontLargerText.css('top', (fontLarger.outerHeight(true) - fontLargerText.outerHeight(true)) / 2 - fontLargerText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(fontLargerText, 0);
setOuterWidth(fontLargerText, fontLarger.width(), true);
}
var fontSmaller = $('#fontSmaller');
if (fontSmaller.length) {
setOuterHeight(fontSmaller, header.height(), true);
setOuterWidth(fontSmaller, header.height() * 0.6, true);
setTopFromParentContent(fontSmaller, 0);
setLeftFromParentContent(fontSmaller, header.width() - fontSmaller.outerWidth(true) - (fontLarger.length ? fontLarger.outerWidth(true) : 0) - help.outerWidth(true));
var fontSmallerText = fontSmaller.children('.buttonText');
fontSmallerText.css('top', (fontSmaller.outerHeight(true) - fontSmallerText.outerHeight(true)) / 2 - fontSmallerText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(fontSmallerText, 0);
setOuterWidth(fontSmallerText, fontSmaller.width(), true);
}
$nextBlockTop+= header.outerHeight(true);
};
//----------------------------------------- [from 'checkLayoutSizeChange()'] Roster layout resize when screen or font changes size
var resizeRosterLayout = function() {
var h = $(window).height();
var w = $(window).width();
var bodyFrameOuter = $('#bodyFrameOuter');
var bodyFrameInner = $('#bodyFrameInner');
var cellWidthCtrl;
var horizontalCells;
var cellWidth;
var cellHeight;
bodyFrameOuter.css('top', 0).css('left', 0);
setOuterHeight(bodyFrameOuter, h, true);
setOuterWidth(bodyFrameOuter, w, true);
bodyFrameInner.css('top', 0).css('left', 0);
setOuterWidth(bodyFrameInner, bodyFrameOuter.width() - ($showScrollBar ? $vScrollbarWidth : 0), true);
var buttonsWidth = bodyFrameInner.width();
var buttonsHeight = $sizeCtrlPercent * $buttonsHeightRef;
var buttons = $('#buttons');
buttons.css('top', $nextBlockTop).css('left', 0);
setOuterHeight(buttons, buttonsHeight, true);
setOuterWidth(buttons, buttonsWidth, true);
var groups = $('#groups');
setOuterHeight(groups, buttons.height(), true);
setOuterWidth(groups, buttons.width() / 2, true);
setTopFromParentContent(groups, 0);
setLeftFromParentContent(groups, 0);
var groupsText = groups.children('.buttonText');
groupsText.css('top', (groups.outerHeight(true) - groupsText.outerHeight(true)) / 2 - groupsText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(groupsText, 0);
setOuterWidth(groupsText, groups.width(), true);
var turnouts = $('#turnouts');
setOuterHeight(turnouts, buttons.height(), true);
setOuterWidth(turnouts, buttons.width() / 4, true);
setTopFromParentContent(turnouts, 0);
setLeftFromParentContent(turnouts, groups.outerWidth(true));
var turnoutsText = turnouts.children('.buttonText');
turnoutsText.css('top', (turnouts.outerHeight(true) - turnoutsText.outerHeight(true)) / 2 - turnoutsText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(turnoutsText, 0);
setOuterWidth(turnoutsText, turnouts.width(), true);
var routes = $('#routes');
setOuterHeight(routes, buttons.height(), true);
setOuterWidth(routes, buttons.width() / 4, true);
setTopFromParentContent(routes, 0);
setLeftFromParentContent(routes, buttons.width() - routes.outerWidth(true));
var routesText = routes.children('.buttonText');
routesText.css('top', (routes.outerHeight(true) - routesText.outerHeight(true)) / 2 - routesText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(routesText, 0);
setOuterWidth(routesText, routes.width(), true);
var t = $nextBlockTop + buttons.outerHeight(true);
var l = 0;
if ($isRoster) { // Roster
var rosterCell = $('.rosterCell');
cellWidthCtrl = $sizeCtrlPercent * $cellWidthRef;
horizontalCells = Math.floor(bodyFrameInner.width() / cellWidthCtrl);
cellWidth = (horizontalCells == 0) ? bodyFrameInner.width() : bodyFrameInner.width() / horizontalCells;
var cellHeightIni = $sizeCtrlPercent * $cellHeightRef;
rosterCell.each(function(index) {
var o = $(this);
var locoImageContainer = o.children('.imageContainer');
if (horizontalCells == 0 && locoImageContainer.length) cellHeight = cellHeightIni * 2; else cellHeight = cellHeightIni;
o.css('top', t).css('left', l);
setOuterHeight(o, cellHeight, true);
setOuterWidth(o, cellWidth, true);
if (horizontalCells == 0) {
t+= cellHeight;
l = 0;
} else {
if ((l + cellWidth * 2) > bodyFrameInner.width()) {
t+= cellHeight;
l = 0;
} else l+= cellWidth;
}
var locoName = o.children('.locoName');
var locoRoad = o.children('.locoRoad');
var locoMfg = o.children('.locoMfg');
if (locoImageContainer.length) {
setTopFromParentContent(locoImageContainer, 0);
setLeftFromParentContent(locoImageContainer, 0);
if (horizontalCells == 0) {
setOuterHeight(locoImageContainer, o.height() / 2, true);
setOuterWidth(locoImageContainer, o.width(), true);
locoName.css('top', (cellHeight / 2 + (cellHeight / 2 - locoName.outerHeight(true)) / 2 - locoName.outerHeight(true) * $fontDelta) - o.height() / 2 * 0.25);
locoRoad.css('top', (cellHeight / 2 + (cellHeight / 2 - locoRoad.outerHeight(true)) / 2 - locoRoad.outerHeight(true) * $fontDelta));
locoMfg.css('top', (cellHeight / 2 + (cellHeight / 2 - locoMfg.outerHeight(true)) / 2 - locoMfg.outerHeight(true) * $fontDelta) + o.height() / 2 * 0.25);
setLeftFromParentContent(locoName, 0);
setLeftFromParentContent(locoRoad, 0);
setLeftFromParentContent(locoMfg, 0);
setOuterWidth(locoName, o.width(), true);
setOuterWidth(locoRoad, o.width(), true);
setOuterWidth(locoMfg, o.width(), true);
} else {
setOuterHeight(locoImageContainer, o.height(), true);
setOuterWidth(locoImageContainer, o.width() / 2, true);
locoName.css('top', ((cellHeight - locoName.outerHeight(true)) / 2 - locoName.outerHeight(true) * $fontDelta) - o.height() * 0.30);
locoRoad.css('top', ((cellHeight - locoRoad.outerHeight(true)) / 2 - locoRoad.outerHeight(true) * $fontDelta));
locoMfg.css('top', ((cellHeight - locoMfg.outerHeight(true)) / 2 - locoMfg.outerHeight(true) * $fontDelta) + o.height() * 0.30);
setLeftFromParentContent(locoName, locoImageContainer.outerWidth(true));
setLeftFromParentContent(locoRoad, locoImageContainer.outerWidth(true));
setLeftFromParentContent(locoMfg, locoImageContainer.outerWidth(true));
setOuterWidth(locoName, o.width() / 2, true);
setOuterWidth(locoRoad, o.width() / 2, true);
setOuterWidth(locoMfg, o.width() / 2, true);
}
resizeImage(locoImageContainer.children('.image'));
} else {
locoName.css('top', ((cellHeight - locoName.outerHeight(true)) / 2 - locoName.outerHeight(true) * $fontDelta) - o.height() * 0.25);
locoRoad.css('top', ((cellHeight - locoRoad.outerHeight(true)) / 2 - locoRoad.outerHeight(true) * $fontDelta));
locoMfg.css('top', ((cellHeight - locoMfg.outerHeight(true)) / 2 - locoMfg.outerHeight(true) * $fontDelta) + o.height() * 0.25);
setLeftFromParentContent(locoName, 0);
setLeftFromParentContent(locoRoad, 0);
setLeftFromParentContent(locoMfg, 0);
setOuterWidth(locoName, o.width(), true);
setOuterWidth(locoRoad, o.width(), true);
setOuterWidth(locoMfg, o.width(), true);
}
});
} else { // Panels
var panelCell = $('.panelCell');
cellWidthCtrl = $sizeCtrlPercent * $cellWidthRef * 2;
horizontalCells = Math.floor(bodyFrameInner.width() / cellWidthCtrl) + 1;
cellWidth = bodyFrameInner.width() / horizontalCells;
cellHeight = $sizeCtrlPercent * $cellHeightRef * 0.5;
cellHeight*= 4;
panelCell.each(function(index) {
var o = $(this);
o.css('top', t).css('left', l);
setOuterHeight(o, cellHeight, true);
setOuterWidth(o, cellWidth, true);
if ((l + cellWidth * 2) > bodyFrameInner.width()) {
t+= cellHeight;
l = 0;
} else l+= cellWidth;
var panelImageContainer = o.children('.imageContainer');
var panelName = o.children('.panelName');
setTopFromParentContent(panelImageContainer, 0);
setLeftFromParentContent(panelImageContainer, 0);
setOuterHeight(panelImageContainer, o.height() / 4 * 3, true);
setOuterWidth(panelImageContainer, o.width(), true);
panelName.css('top', cellHeight / 4 * 3.2);
setLeftFromParentContent(panelName, 0);
setOuterWidth(panelName, o.width(), true);
resizeImage(panelImageContainer.children('.image'));
});
}
if (l != 0) t+= cellHeight;
setOuterHeight(bodyFrameInner, t, true);
if (bodyFrameOuter.height() < bodyFrameInner.outerHeight(true) && !$showScrollBar) {
$showScrollBar = true;
resizeHeader();
resizeRosterLayout();
}
if (bodyFrameOuter.height() >= bodyFrameInner.outerHeight(true) && $showScrollBar) {
$showScrollBar = false;
resizeHeader();
resizeRosterLayout();
}
};
//----------------------------------------- [from 'checkLayoutSizeChange()'] Throttle layout resize when screen or font changes size
var resizeThrottleLayout = function() {
var h = $(window).height();
var w = $(window).width();
var bodyFrameOuter = $('#bodyFrameOuter');
var bodyFrameInner = $('#bodyFrameInner');
bodyFrameOuter.css('top', 0).css('left', 0);
setOuterHeight(bodyFrameOuter, h, true);
setOuterWidth(bodyFrameOuter, w, true);
bodyFrameInner.css('top', 0).css('left', 0);
setOuterHeight(bodyFrameInner, bodyFrameOuter.height(), true);
setOuterWidth(bodyFrameInner, bodyFrameOuter.width(), true);
var emergencyStop = $('#emergencyStop');
if (!emergencyStop.length) return;
if ($pageInFrame) $speedPosition = window.parent.$('#' + encodeId(document.URL)).attr('rightSide');
if ($speedPosition == 'true' || $speedPosition == 'false') $speedPosition = ($speedPosition == 'true');
var headerHeight = $sizeCtrlPercent * $headerHeightRef;
var header = $('#header');
var fontSmaller = $('#fontSmaller');
var fontLarger = $('#fontLarger');
var help = $('#help');
setOuterHeight(emergencyStop, header.height(), true);
setOuterWidth(emergencyStop, header.height() * 2, true);
setTopFromParentContent(emergencyStop, 0);
setLeftFromParentContent(emergencyStop, header.width() - emergencyStop.outerWidth(true) - (fontSmaller.length ? fontSmaller.outerWidth(true) : 0) - (fontLarger.length ? fontLarger.outerWidth(true) : 0) - help.outerWidth(true));
var emergencyStopText = emergencyStop.children('.buttonText');
emergencyStopText.css('top', (emergencyStop.outerHeight(true) - emergencyStopText.outerHeight(true)) / 2 - emergencyStopText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(emergencyStopText, 0);
setOuterWidth(emergencyStopText, emergencyStop.width(), true);
var movementActive = $('#movementActive');
if (movementActive.length) {
setOuterHeight(movementActive, header.height(), true);
setOuterWidth(movementActive, header.height() * 2, true);
setTopFromParentContent(movementActive, 0);
setLeftFromParentContent(movementActive, $pageInFrame ? $('#removeFrame').outerWidth(true) + header.height() * 0.2 : $('#power').outerWidth(true) + header.height() * 0.2 + $('#speedPosition').outerWidth(true) + header.height() * 0.2);
var movementActiveText = movementActive.children('.buttonText');
movementActiveText.css('top', (movementActive.outerHeight(true) - movementActiveText.outerHeight(true)) / 2 - movementActiveText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(movementActiveText, 0);
setOuterWidth(movementActiveText, movementActive.width(), true);
}
var speed = $('.speed');
var speedWidth = $sizeCtrlPercent * $speedWidthRef;
if (speedWidth < bodyFrameInner.width() / 8) speedWidth = bodyFrameInner.width() / 8;
speed.css('top', $nextBlockTop).css('left', $speedPosition ? bodyFrameInner.width() - speedWidth : 0);
setOuterHeight(speed, bodyFrameInner.height() - $nextBlockTop, true);
setOuterWidth(speed, speedWidth, true);
var buttonsSize = speed.width() / 2;
var speedGrid = $('#speedGrid');
setOuterHeight(speedGrid, speed.height() - buttonsSize, true);
setOuterWidth(speedGrid, speedWidth, true);
setTopFromParentContent(speedGrid, 0);
setLeftFromParentContent(speedGrid, 0);
var speedLimits = $('#speedLimits');
setOuterHeight(speedLimits, speedGrid.height() - buttonsSize / 2, true);
setOuterWidth(speedLimits, speedGrid.width(), true);
setTopFromParentContent(speedLimits, 0);
setLeftFromParentContent(speedLimits, 0);
showSpeed();
var speedTouch = $('#speedTouch');
setOuterHeight(speedTouch, speedGrid.height(), true);
setOuterWidth(speedTouch, speedGrid.width(), true);
setTopFromParentContent(speedTouch, 0);
setLeftFromParentContent(speedTouch, 0);
var reverse = $('#reverse');
setOuterHeight(reverse, buttonsSize, true);
setOuterWidth(reverse, buttonsSize, true);
setTopFromParentContent(reverse, speed.height() - reverse.outerHeight(true));
setLeftFromParentContent(reverse, 0);
var reverseText = reverse.children('.buttonText');
reverseText.css('top', (reverse.outerHeight(true) - reverseText.outerHeight(true)) / 2 - reverseText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(reverseText, 0);
setOuterWidth(reverseText, reverse.width(), true);
var forward = $('#forward');
setOuterHeight(forward, reverse.outerHeight(true), true);
setOuterWidth(forward, reverse.outerWidth(true), true);
setTopFromParentContent(forward, speed.height() - forward.outerHeight(true));
setLeftFromParentContent(forward, speed.width() - forward.outerWidth(true));
var forwardText = forward.children('.buttonText');
forwardText.css('top', (forward.outerHeight(true) - forwardText.outerHeight(true)) / 2 - forwardText.outerHeight(true) * $fontDelta);
setLeftFromParentContent(forwardText, 0);
setOuterWidth(forwardText, forward.width(), true);
var functionsOuter = $('.functionsOuter');
var functionsInner = $('.functionsInner');
functionsOuter.css('top', $nextBlockTop).css('left', $speedPosition ? 0 : speedWidth);
setOuterHeight(functionsOuter, bodyFrameInner.height() - $nextBlockTop, true);
setOuterWidth(functionsOuter, bodyFrameInner.width() - speedWidth, true);
functionsInner.css('top', 0).css('left', 0);
setOuterWidth(functionsInner, functionsOuter.width() - ($showScrollBar ? $vScrollbarWidth : 0), true);
var cellWidthCtrl = $sizeCtrlPercent * $functionWidthRef;
var horizontalCells = Math.floor(functionsInner.width() / cellWidthCtrl) + 1;
var cellWidth = functionsInner.width() / horizontalCells;
var cellHeight = $sizeCtrlPercent * $functionHeightRef;
var t = 0;
var l = 0;
var locoName = $('.locoName');
locoName.css('top', t).css('left', l);
setOuterWidth(locoName, functionsInner.width(), true);
t+= locoName.outerHeight(true);
for (var i = 0; i < 29; i++) {
var func = $('#locoFunction' + i);
if (func.length) {
func.css('top', t).css('left', l);
setOuterHeight(func, cellHeight, true);
setOuterWidth(func, cellWidth, true);
if ((l + cellWidth * 2) > functionsInner.width()) {
t+= cellHeight;
l = 0;
} else l+= cellWidth;
var funcLabel = func.children('.funcLabel');
funcLabel.css('top', ((cellHeight - funcLabel.outerHeight(true)) / 2 - funcLabel.outerHeight(true) * $fontDelta)).css('left', 0);
setOuterWidth(funcLabel, func.width(), true);
var funcState = func.children('.funcState');
setOuterHeight(funcState, func.height() / 10, true);
funcState.css('top', func.height() - funcState.outerHeight(true)).css('left', 0);
setOuterWidth(funcState, func.width(), true);
}
}
if (l != 0) t+= cellHeight;
var locoHeight = $sizeCtrlPercent * $cellHeightRef;
var locoCell = $('.locoCell');
if (locoCell.length) {
locoCell.css('top', t).css('left', 0);
setOuterHeight(locoCell, locoHeight, true);
setOuterWidth(locoCell, functionsInner.width(), true);
t+= locoCell.outerHeight(true);
resizeImage(locoCell.children('.image'));
}
setOuterHeight(functionsInner, t, true);
if (functionsOuter.height() < functionsInner.outerHeight(true) && !$showScrollBar) {
$showScrollBar = true;
resizeThrottleLayout();
}
if (functionsOuter.height() >= functionsInner.outerHeight(true) && $showScrollBar) {
$showScrollBar = false;
resizeThrottleLayout();
}
};
//----------------------------------------- [from 'checkLayoutSizeChange()'] Turnouts and Routes layout resize when screen or font changes size
var resizeTurnoutsRoutesLayout = function() {
var h = $(window).height();
var w = $(window).width();
var bodyFrameOuter = $('#bodyFrameOuter');
var bodyFrameInner = $('#bodyFrameInner');
bodyFrameOuter.css('top', 0).css('left', 0);
setOuterHeight(bodyFrameOuter, h, true);
setOuterWidth(bodyFrameOuter, w, true);
bodyFrameInner.css('top', 0).css('left', 0);
setOuterWidth(bodyFrameInner, bodyFrameOuter.width() - ($showScrollBar ? $vScrollbarWidth : 0), true);
var trCell = $('.trCell');
var cellWidthCtrl = $sizeCtrlPercent * $cellWidthRef * 1.5;
var horizontalCells = Math.floor(bodyFrameInner.width() / cellWidthCtrl) + 1;
var cellWidth = bodyFrameInner.width() / horizontalCells;
var cellHeight = $sizeCtrlPercent * $cellHeightRef * 0.5;
var t = $nextBlockTop;
var l = 0;
trCell.each(function(index) {
var o = $(this);
o.css('top', t).css('left', l);
setOuterHeight(o, cellHeight, true);
setOuterWidth(o, cellWidth, true);
if ((l + cellWidth * 2) > bodyFrameInner.width()) {
t+= cellHeight;
l = 0;
} else l+= cellWidth;
var trName = o.children('.trName');
var trStatus = o.children('.trStatus');
trName.css('top', ((cellHeight - trName.outerHeight(true)) / 2 - trName.outerHeight(true) * $fontDelta));
trStatus.css('top', trName.css('top'));
setOuterWidth(trName, o.width() * 0.8, true);
setOuterWidth(trStatus, o.width() - trName.outerWidth(true), true);
setLeftFromParentContent(trName, 0);
setLeftFromParentContent(trStatus, trName.outerWidth(true));
});
if (l != 0) t+= cellHeight;
setOuterHeight(bodyFrameInner, t, true);
if (bodyFrameOuter.height() < bodyFrameInner.outerHeight(true) && !$showScrollBar) {
$showScrollBar = true;
resizeHeader();
resizeTurnoutsRoutesLayout();
}
if (bodyFrameOuter.height() >= bodyFrameInner.outerHeight(true) && $showScrollBar) {
$showScrollBar = false;
resizeHeader();
resizeTurnoutsRoutesLayout();
}
};
//----------------------------------------- [from 'checkLayoutSizeChange()'] Panel layout resize when screen or font changes size
var resizePanelLayout = function() {
if (!$panelLoaded) return; // If loading not complete, give up! (onload event will force resize)
$nextBlockTop-= $('#header').outerHeight(true);
var h = $(window).height();
var w = $(window).width();
var bodyFrameOuter = $('#bodyFrameOuter');
var bodyFrameInner = $('#bodyFrameInner');
var iframeAux = $('#iframeAux');
var panel = $('.panel');
var panelBody = panel.contents().find('body');
var panelArea = panelBody.children('#panel-area');
var offsetV = 0;
var scrollbarV = 0;
var offsetH = 0;
var scrollbarH = 0;
setOuterHeight(bodyFrameOuter, h, true);
setOuterWidth(bodyFrameOuter, w, true);
setOuterHeight(bodyFrameInner, bodyFrameOuter.height(), true);
setOuterWidth(bodyFrameInner, bodyFrameOuter.width(), true);
setOuterHeight(iframeAux, bodyFrameInner.height(), true);
setOuterWidth(iframeAux, bodyFrameInner.width(), true);
setOuterHeight(panel, bodyFrameInner.height(), true);
setOuterWidth(panel, bodyFrameInner.width(), true);
if (panel.height() >= panelArea.height()) offsetV = (panel.height() - panelArea.height()) / 2;
else scrollbarV = $vScrollbarWidth;
if (panel.width() >= panelArea.width()) offsetH = (panel.width() - panelArea.width()) / 2;
else scrollbarH = $vScrollbarWidth;
if (scrollbarV > 0 && scrollbarH > 0) {
scrollbarV = 0;
scrollbarH = 0;
}
panelArea.css('top', offsetV + scrollbarH);
panelArea.css('left', offsetH + scrollbarV);
};
//----------------------------------------- [from 'checkLayoutSizeChange()' and 'selectionList'] Selection list layout resize when screen or font changes size
var resizeSelectionList = function() {
var o = $('.selectionList');
if (!o.length) return;
var h = $(window).height();
var w = o.parent().width();
o.css('top', (h - o.outerHeight(true)) / 2);
o.css('left', (w - o.outerWidth(true)) / 2);
};
//----------------------------------------- [from 'checkLayoutSizeChange()' and 'smoothAlert'] Smooth Alerts layout resize when screen or font changes size
var resizeSmoothAlerts = function() {
var os = $('.smoothAlert');
var h = $(window).height();
var w = os.eq(0).parent().width();
var auxPosition = (os.length - 1) / 2;
os.each(function(index) {
var o = $(this);
o.css('top', (h - o.outerHeight(true)) / 2 - 1.5 * (index - auxPosition) * Number(o.css('border-top-width').split('px')[0]));
o.css('left', (w - o.outerWidth(true)) / 2 + 1.5 * (index - auxPosition) * Number(o.css('border-left-width').split('px')[0]));
});
};
//===================================================================================== Actions and Auxiliary functions ===============
//----------------------------------------- Check smooth alert end
var checkSmoothAlertEnd = function() {
$('.smoothAlert').each(function(index) {
var o = $(this);
var sec = o.attr('seconds');
if (!isNaN(sec)) {
if (sec <= -1) o.remove();
else {
if (sec < 1.5 && !o.hasClass('fadeOut')) o.addClass('fadeOut');
o.attr('seconds', sec - $resizeCheckInterval / 1000);
}
}
});
};
//----------------------------------------- Change power state
var changePowerState = function() {
var lastState = $('#power').attr('state');
switch (Number(lastState)) {
case $jmri.powerOFF:
$jmri.setJMRI('power', null, {"state":$jmri.powerON});
break;
case $jmri.powerON:
$jmri.setJMRI('power', null, {"state":$jmri.powerOFF});
break;
default:
$jmri.setJMRI('power', null, {"state":$jmri.powerON});
break;
}
};
//----------------------------------------- Remove frame
var removeFrame = function() {
removeFromFrameList(document.URL);
window.open(document.URL.split('?')[0], '_top');
return;
};
//----------------------------------------- Load frames list {$frameList[]}
var loadFrameList = function() {
var l = loadLocalInfo('webThrottle.frameListSize');
if (l && !isNaN(l) && Number(l) >= 0 && Number(l) == Math.abs(l)) l = Number(l); else saveLocalInfo('webThrottle.frameListSize', l = 0);
for (var i = 0; i < l; i++) $frameList[i] = loadLocalInfo('webThrottle.frameList[' + i + ']');
};
//----------------------------------------- Save frames list {$frameList[]}
var saveFrameList = function() {
saveLocalInfo('webThrottle.frameListSize', $frameList.length);
for (var i = 0; i < $frameList.length; i++) saveLocalInfo('webThrottle.frameList[' + i + ']', $frameList[i]);
};
//----------------------------------------- Add URL to frames list {$frameList[]}
var addToFrameList = function(url) {
loadFrameList();
var find = false;
for (var i = 0; i < $frameList.length; i++) {
if ($frameList[i] == url) {
find = true;
break;
}
}
if (!find) {
$frameList.push(url);
saveFrameList();
}
return !find;
};
//----------------------------------------- Replace URL in frames list {$frameList[]}
var replaceInFrameList = function(urlOld, urlNew) {
loadFrameList();
for (var i = 0; i < $frameList.length; i++) if ($frameList[i] == urlNew) return false;
for (var i = 0; i < $frameList.length; i++) {
if ($frameList[i] == urlOld) {
$frameList[i] = urlNew;
break;
}
}
saveFrameList();
return true;
};
//----------------------------------------- Remove URL from frames list {$frameList[]}
var removeFromFrameList = function(url) {
loadFrameList();
var item = -1;
for (var i = 0; i < $frameList.length; i++) {
if ($frameList[i] == url) {
item = i;
break;
}
}
if (item >= 0) {
$frameList.splice(item, 1);
saveFrameList();
}
};
//----------------------------------------- Show speed bar
var showSpeed = function() {
var speed = $('.speed');
var speedLimits = $('#speedLimits');
var speedBar = $('#speedBar');
var speedValue = Number(speed.attr('speed'));
if (speedValue < 0) speedValue = 0;
var speedOffset = speedLimits.height() * speedValue;
if (speedValue > 0 && speedOffset < 1) speedOffset = 1;
speedBar.height(speedOffset);
speedBar.width(speedLimits.width());
setTopFromParentContent(speedBar, speedLimits.height() - speedOffset);
setLeftFromParentContent(speedBar, 0);
};
//===================================================================================== Responses from server =========================
//----------------------------------------- [from server] Layout power state
var layoutPowerState = function(state) {
var power = $('#power');
power.attr('state', state);
power.removeClass('powerUnknown powerOff powerOn');
switch (state) {
case $jmri.powerOFF:
power.addClass('powerOff');
break;
case $jmri.powerON:
power.addClass('powerOn');
break;
default:
power.addClass('powerUnknown');
break;
}
};
//----------------------------------------- [from server] Last selected throttle address
var throttleState = function(name, address, speed, forward, fs) {
if (name != $locoAddress) return;
$('body').attr('locoReady', 'true');
if (forward != undefined) throttleDirection(name, forward);
if (speed != undefined) throttleSpeed(name, speed);
for (var i = 0; i < 29; i++) if (fs[i] != undefined) throttleFunctionState(name, i, fs[i]);
};
//----------------------------------------- Throttle direction
var throttleDirection = function(name, forward) {
if (name != $locoAddress) return;
var _reverse = $('#reverse');
var _forward = $('#forward');
_reverse.removeClass('directionActive directionInactive');
_forward.removeClass('directionActive directionInactive');
if (forward == $jmri.TRUE) {
_reverse.addClass('directionInactive');
_forward.addClass('directionActive');
} else {
_reverse.addClass('directionActive');
_forward.addClass('directionInactive');
}
};
//----------------------------------------- Throttle speed
var throttleSpeed = function(name, speed) {
if (name != $locoAddress) return;
$speedAux = speed;
if (!$speedFeedback) return;
$('.speed').attr('speed', speed);
showSpeed();
};
//----------------------------------------- Throttle function state
var throttleFunctionState = function(name, functionNumber, active) {
if (name != $locoAddress) return;
var func = $('#locoFunction' + functionNumber);
if (func.length) {
func.attr('state', active);
var funcState = func.children('.funcState');
funcState.removeClass('funcOff funcOn');
if (active == $jmri.TRUE) funcState.addClass('funcOn');
else funcState.addClass('funcOff');
}
};
//----------------------------------------- [from server] Layout turnout state
var layoutTurnoutState = function(name, userName, comment, inverted, state) {
var o = $('#' + encodeId(name));
o.attr('state', state);
o.removeClass('turnoutUndefined turnoutThrown turnoutClosed');
switch (state) {
case $jmri.turnoutTHROWN:
o.text('T').addClass('turnoutThrown');
break;
case $jmri.turnoutCLOSED:
o.text('C').addClass('turnoutClosed');
break;
default:
o.text('?').addClass('turnoutUndefined');
break;
}
};
//----------------------------------------- [from server] Layout route state
var layoutRouteState = function(name, userName, comment, state) {
var o = $('#' + encodeId(name));
o.attr('state', state);
o.removeClass('routeUndefined routeDisabled routeInactive routeActive');
switch (state) {
case $jmri.routeINACTIVE:
o.text('off').addClass('routeInactive');
break;
case $jmri.routeACTIVE:
o.text('on').addClass('routeActive');
break;
case $jmri.routeDISABLED:
o.text('X').addClass('routeDisabled');
break;
default:
o.text('?').addClass('routeUndefined');
break;
}
};
//===================================================================================== Touch and Mouse ===============================
//----------------------------------------- Test event (touch)
var touch = function(_e, o) {
var e = _e.originalEvent;
if (e.type != 'touchmove') smoothAlert(
'*** Touch ***' +
'\nObject: ' + o.attr('id') +
'\nEvent type: ' + e.type +
'\nX: ' + e.changedTouches[0].pageX +
'\nY: ' + e.changedTouches[0].pageY
);
e.stopPropagation();
e.preventDefault();
};
//----------------------------------------- Test event (mouse)
var mouse = function(e) {
var o = $(e.currentTarget);
if (e.type != 'mousemove') smoothAlert(
'*** Mouse ***' +
'\nObject: ' + o.attr('id') +
'\nEvent type: ' + e.type +
'\nButton: ' + ((e.which) ? e.which : e.button) +
'\nX: ' + e.pageX +
'\nY: ' + e.pageY
);
e.stopPropagation();
e.preventDefault();
};
//----------------------------------------- Left button pressed ? (mouse)
var isLeftButton = function(e) {
var r = false;
if (e.which) if (e.which == 1) r = true;
if (e.button) if (e.button == 0) r = true;
return r;
};
//----------------------------------------- Power button pressed (touch)
var powerButtonPressedTouch = function(e) {powerButtonPressed(e);};
//----------------------------------------- Power button pressed (mouse)
var powerButtonPressedMouse = function(e) {if (isLeftButton(e)) powerButtonPressed(e);};
//----------------------------------------- Power button pressed
var powerButtonPressed = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$powerDelayTimer = setTimeout(function() {changePowerState();}, $buttonDelayTimeout);
};
//----------------------------------------- Power button released (touch)
var powerButtonReleasedTouch = function(e) {powerButtonReleased(e);};
//----------------------------------------- Power button released (mouse)
var powerButtonReleasedMouse = function(e) {if (isLeftButton(e)) powerButtonReleased(e);};
//----------------------------------------- Power button released
var powerButtonReleased = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
clearInterval($powerDelayTimer);
};
//----------------------------------------- Power button released or canceled (mouse)
var powerButtonCanceledMouse = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
var mouseY = e.pageY;
var mouseX = e.pageX;
var oTop = o.offset().top;
var oLeft = o.offset().left;
var oBottom = oTop + o.outerHeight(false);
var oRight = oLeft + o.outerWidth(false);
if (mouseY > oTop && mouseY < oBottom && mouseX > oLeft && mouseX < oRight) return;
else clearInterval($powerDelayTimer);
};
//----------------------------------------- Remove button pressed (touch)
var removeButtonPressedTouch = function(e) {removeButtonPressed(e);};
//----------------------------------------- Remove button pressed (mouse)
var removeButtonPressedMouse = function(e) {if (isLeftButton(e)) removeButtonPressed(e);};
//----------------------------------------- Remove button pressed
var removeButtonPressed = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$removeDelayTimer = setTimeout(function() {removeFrame();}, $buttonDelayTimeout);
};
//----------------------------------------- Remove button released (touch)
var removeButtonReleasedTouch = function(e) {removeButtonReleased(e);};
//----------------------------------------- Remove button released (mouse)
var removeButtonReleasedMouse = function(e) {if (isLeftButton(e)) removeButtonReleased(e);};
//----------------------------------------- Remove button released
var removeButtonReleased = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
clearInterval($removeDelayTimer);
};
//----------------------------------------- Remove button released or canceled (mouse)
var removeButtonCanceledMouse = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
var mouseY = e.pageY;
var mouseX = e.pageX;
var oTop = o.offset().top;
var oLeft = o.offset().left;
var oBottom = oTop + o.outerHeight(false);
var oRight = oLeft + o.outerWidth(false);
if (mouseY > oTop && mouseY < oBottom && mouseX > oLeft && mouseX < oRight) return;
else clearInterval($removeDelayTimer);
};
//----------------------------------------- Change font size - Click (mouse and touch with simulation)
var fontSizeChange = function(e, increment) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var fontSize = $fontSize;
fontSize+= increment;
if (fontSize < $fontSizeMin) fontSize = $fontSizeMin;
if (fontSize > $fontSizeMax) fontSize = $fontSizeMax;
saveLocalInfo('webThrottle.fontSize', fontSize);
smoothAlert('text size: ' + fontSize + 'px', 2);
};
//----------------------------------------- Show help - Click (mouse and touch with simulation)
var helpShow = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
$help.forEach(function(entry) {smoothAlert(entry);});
};
//----------------------------------------- Choose roster group - Click (mouse and touch with simulation)
var chooseGroup = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
if (!$rosterGroups.length || $rosterGroups[0] != 'Complete roster') $rosterGroups.unshift('Complete roster');
if ($rosterGroups[$rosterGroups.length - 1] != '[Panels]') {
$rosterGroups.push('');
$rosterGroups.push('[Panels]');
}
var f = function(i) {
if (($rosterGroups[i] != $rosterGroup && i != 0) || (i == 0 && $rosterGroup != '')) {
if (i == 0) saveLocalInfo('webThrottle.rosterGroup', '');
else saveLocalInfo('webThrottle.rosterGroup', $rosterGroups[i]);
window.open(document.URL.split('?')[0], '_self');
}
};
var ai = 0;
for (var i = 0; i < $rosterGroups.length; i++) if ($rosterGroups[i] != '' && $rosterGroups[i] == $rosterGroup) ai = i;
selectionList($rosterGroups, 'Roster groups', ai, f);
};
//----------------------------------------- Show turnouts - Click (mouse and touch with simulation)
var turnoutsShow = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var url = document.URL.split('?')[0] + '?turnouts';
if ($toFrame) {
if (addToFrameList(url + '&inframe')) window.open(document.URL.split('?')[0], $pageInFrame ? '_top' : '_self');
} else window.open(url, url);
};
//----------------------------------------- Show routes - Click (mouse and touch with simulation)
var routesShow = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var url = document.URL.split('?')[0] + '?routes';
if ($toFrame) {
if (addToFrameList(url + '&inframe')) window.open(document.URL.split('?')[0], $pageInFrame ? '_top' : '_self');
} else window.open(url, url);
};
//----------------------------------------- Show loco throttle - Click (mouse and touch with simulation)
var throttleShow = function(e, locoId) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var url = document.URL.split('?')[0] + '?loconame=' + encodeURIComponent(locoId);
if ($toFrame) {
if (addToFrameList(url + '&inframe')) window.open(document.URL.split('?')[0], $pageInFrame ? '_top' : '_self');
} else window.open(url, url);
};
//----------------------------------------- Change turnout or route status - Click (mouse and touch with simulation)
var trChangeStatus = function(e, type, name) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var lastState = Number($('#' + encodeId(name)).attr('state'));
if (type.startsWith ('turnout')) { // 0(undefined) 1(unknown) 2(Closed) 4(Thrown)
switch (lastState) {
case $jmri.turnoutTHROWN:
$jmri.setJMRI('turnout', name, {"state":$jmri.turnoutCLOSED}, "post");
break;
case $jmri.turnoutCLOSED:
$jmri.setJMRI('turnout', name, {"state":$jmri.turnoutTHROWN}, "post");
break;
default:
$jmri.setJMRI('turnout', name, {"state":$jmri.turnoutCLOSED}, "post");
break;
}
} else { // 0(unknown) 2(Active) 4(Inactive) 8(inconsistent) - Can only activate
$jmri.setJMRI('route', name, {"state":$jmri.routeACTIVE}, "post");
}
};
//----------------------------------------- Open panel - Click (mouse and touch with simulation)
var openPanel = function(e, name, URL) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
// URL not used for now
var url = document.URL.split('?')[0] + '?panelname=' + encodeURIComponent(name);
if ($toFrame) {
if (addToFrameList(url + '&inframe')) window.open(document.URL.split('?')[0], $pageInFrame ? '_top' : '_self');
} else window.open(url, url);
};
//----------------------------------------- Select item from list - Click (mouse and touch with simulation)
var itemSelected = function(e, f) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
var i = o.attr('seq');
o.parent().remove();
if (i >= 0) f(i);
};
//----------------------------------------- Remove alert message - Click (mouse and touch with simulation)
var removeSmoothAlertMouse = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
if (o.attr('preventClick') !== undefined) return;
o.remove();
};
//----------------------------------------- Initial position for moving object (touch)
var startMoveTouch = function(e, o) {startMove(e, o, e.targetTouches[0]);};
//----------------------------------------- Initial position for moving object (mouse)
var startMoveMouse = function(e) {if (isLeftButton(e)) startMove(e, $(e.currentTarget), e);};
//----------------------------------------- Initial position for moving object
var startMove = function(e, o, t) {
e.preventDefault();
e.stopImmediatePropagation();
o.removeAttr('preventClick');
o.attr('y', t.pageY);
o.attr('x', t.pageX);
o.attr('cursor', o.css('cursor'));
o.css('cursor', 'move');
};
//----------------------------------------- Several steps in moving object (touch)
var movingTouch = function(e, o) {moving(e, o, e.targetTouches[0]);};
//----------------------------------------- Several steps in moving object (mouse)
var movingMouse = function(e) {if (isLeftButton(e)) moving(e, $(e.currentTarget), e);};
//----------------------------------------- Several steps in moving object
var moving = function(e, o, t) {
e.preventDefault();
e.stopImmediatePropagation();
if (o.attr('y') === undefined || o.attr('x') === undefined || o.attr('cursor') === undefined) return;
o.attr('preventClick', '');
var deltaY = t.pageY - o.attr('y');
var deltaX = t.pageX - o.attr('x');
o.css('top', Number(o.css('top').split('px')[0]) + deltaY);
o.css('left', Number(o.css('left').split('px')[0]) + deltaX);
o.attr('y', t.pageY);
o.attr('x', t.pageX);
};
//----------------------------------------- Final position for moving object (touch)
var stopMoveTouch = function(e, o) {stopMove(e, o);};
//----------------------------------------- Final position for moving object (mouse)
var stopMoveMouse = function(e) {if (isLeftButton(e)) stopMove(e, $(e.currentTarget));};
//----------------------------------------- Final position for moving object
var stopMove = function(e, o) {
e.preventDefault();
e.stopImmediatePropagation();
if (o.attr('preventClick') !== undefined) {
o.css('cursor', o.attr('cursor'));
o.removeAttr('y');
o.removeAttr('x');
o.removeAttr('cursor');
} else o.remove();
};
//----------------------------------------- Final position for moving object, if out of parent (mouse)
var stopMoveConditionallyMouse = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
var mouseY = e.pageY;
var mouseX = e.pageX;
var oTop = o.offset().top;
var oLeft = o.offset().left;
var oBottom = oTop + o.outerHeight(false);
var oRight = oLeft + o.outerWidth(false);
if (mouseY > oTop && mouseY < oBottom && mouseX > oLeft && mouseX < oRight) return;
o.css('cursor', o.attr('cursor'));
o.removeAttr('y');
o.removeAttr('x');
o.removeAttr('cursor');
};
//----------------------------------------- Manage new throttles - Click (mouse and touch with simulation)
var manageNewThrottles = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var toFrame = $('#toFrame');
var toFrameText = toFrame.children('.buttonText');
if ($toFrame) {
$toFrame = false;
toFrameText.text('single');
} else {
$toFrame = true;
toFrameText.text('multi');
}
var bc = toFrame.css('background-color');
toFrame.css('background-color', toFrame.css('color'));
toFrame.css('color', bc);
};
//----------------------------------------- Manage speed control position - Click (mouse and touch with simulation)
var manageSpeedPosition = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
changeSpeedPosition(!$speedPosition);
saveLocalInfo('webThrottle.speedPosition', $speedPosition);
};
//----------------------------------------- Change speed control position
var changeSpeedPosition = function(speedPos) {
var speedPosition = $('#speedPosition');
if (!speedPosition.length) return;
var speedPositionText = speedPosition.children('.buttonText');
if (!speedPos) {
$speedPosition = false;
speedPositionText.text('|::');
} else {
$speedPosition = true;
speedPositionText.text('::|');
}
$viewportHeight = 0; // Force rezise
};
//----------------------------------------- Send immediate STOP - Click (mouse and touch with simulation)
var immediateStop = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$jmri.setJMRI('throttle', $locoAddress, {"speed":$jmri.EMERGENCY_STOP});
};
//----------------------------------------- Select another loco - Click (mouse and touch with simulation)
var changeLoco = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
$locoList = [];
var rg = loadLocalInfo('webThrottle.rosterGroup');
if (rg || rg == '') $rosterGroup = rg; else saveLocalInfo('webThrottle.rosterGroup', $rosterGroup);
if ($rosterGroup == '[Panels]') $rosterGroup = '';
var roster = $jmri.getRoster($rosterGroup);
if (roster.length) roster.forEach(function(loco) {$locoList.push(loco.name + ' (' + loco.dccAddress + ')');});
var f = function(i) {
var url = document.URL.split('?')[0] + '?loconame=' + encodeURIComponent($locoList[i].substring(0, $locoList[i].lastIndexOf(' ')));
if ($inFrame) {
if (replaceInFrameList(document.URL, url + '&inframe')) window.parent.$('#' + encodeId(document.URL)).attr('src', url + '&inframe').attr('id', encodeId(url + '&inframe'));
}
else if (document.URL != url) window.location = url;
};
var ai = 0;
for (var i = 0; i < $locoList.length; i++) if ($locoList[i] == $('#locoName').text()) ai = i;
selectionList($locoList, 'Locos', ai, f);
};
//----------------------------------------- Set direction - Click (mouse and touch with simulation)
var setDirection = function(e, forward) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$jmri.setJMRI('throttle', $locoAddress, {"forward": forward ? $jmri.TRUE : $jmri.FALSE});
};
//----------------------------------------- Manage tilt to control speed or not - Click (mouse and touch with simulation)
var manageMovementActive = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
changeMovementActive(!$movementActive);
saveLocalInfo('webThrottle.movementActive', $movementActive);
};
//----------------------------------------- Change tilt to control speed or not
var changeMovementActive = function(movActive) {
var movementActive = $('#movementActive');
if (!movementActive.length) return;
var movementActiveText = movementActive.children('.buttonText');
var speedTouch = $('#speedTouch');
speedTouch.off('touchstart');
speedTouch.off('touchmove');
speedTouch.off('touchend');
speedTouch.off('mousedown');
speedTouch.off('mousemove');
speedTouch.off('mouseup');
speedTouch.off('mouseout');
if (!movActive) {
$movementActive = false;
movementActiveText.text('normal');
if ($hasTouch) {
speedTouch.on('touchstart', function(event) {speedPressedTouch(event.originalEvent);});
speedTouch.on('touchmove', function(event) {speedMovingTouch(event.originalEvent);});
speedTouch.on('touchend', function(event) {speedReleasedTouch(event.originalEvent);});
} else {
speedTouch.on('mousedown', function(event) {speedPressedMouse(event);});
speedTouch.on('mousemove', function(event) {speedMovingMouse(event);});
speedTouch.on('mouseup', function(event) {speedReleasedMouse(event);});
speedTouch.on('mouseout', function(event) {speedCanceledMouse(event);});
}
} else {
$movementActive = true;
movementActiveText.text('tilt');
speedTouch.on('touchstart', function(event) {speedPressedTiltTouch(event.originalEvent);});
speedTouch.on('touchend', function(event) {speedReleasedTiltTouch(event.originalEvent);});
}
};
//----------------------------------------- Orientation changed (device)
var deviceOrientation = function(e) {
if ($('body').attr('locoReady') != 'true') return;
if ($movementActive && $movementOn) {
if ($orientation != window.top.orientation) $movementTilt = null;
$orientation = window.top.orientation;
var m;
switch ($orientation) {
case 0:
m = e.beta;
break;
case 90:
m = -e.gamma;
break;
case -90:
m = e.gamma;
break;
default:
m = -e.beta;
break;
}
m = Math.round(m * $speedStep * 2); // Sensitivity (for $speedStep=10%): 5º
if ($movementTilt != m) {
if ($movementTilt != null) {
$movementCtrl = m - $movementTilt;
var speed = $('.speed');
var speedValue = Number(speed.attr('speed'));
if (speedValue < 0) speedValue = 0;
speedValue+= ($movementCtrl * $speedStep / 2); // 100º <=> full cursor displacement
if (speedValue < 0) speedValue = 0;
if (speedValue > 1) speedValue = 1;
speed.attr('speed', speedValue);
showSpeed();
var speedValueFormated = '' + speedValue;
if (speedValue == 0) speedValueFormated = $jmri.STOP;
if (speedValue == 1) speedValueFormated = $jmri.FULL_SPEED;
$jmri.setJMRI('throttle', $locoAddress, {"speed":speedValueFormated});
}
$movementTilt = m;
}
}
}
//----------------------------------------- Speed zone pressed - tilt (touch)
var speedPressedTiltTouch = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$movementTilt = null;
$movementOn = true;
$speedFeedback = false;
};
//----------------------------------------- Speed zone released - tilt (touch)
var speedReleasedTiltTouch = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$movementOn = false;
$speedFeedback = true;
throttleSpeed($locoAddress, $speedAux);
};
//----------------------------------------- Speed zone pressed (touch)
var speedPressedTouch = function(e) {speedPressed(e, e.targetTouches[0]);};
//----------------------------------------- Speed zone pressed (mouse)
var speedPressedMouse = function(e) {if (isLeftButton(e)) speedPressed(e, e);};
//----------------------------------------- Speed zone pressed
var speedPressed = function(e, t) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$movementCtrl = t.pageY;
functionForSpeedCtrl();
$speedTimer = setInterval(function() {functionForSpeedCtrl();}, $speedInterval);
$speedFeedback = false;
};
//----------------------------------------- Function for speed control
var functionForSpeedCtrl = function() {
var speed = $('.speed');
var speedValue = Number(speed.attr('speed'));
if (speedValue < 0) speedValue = 0;
var speedLimitsHeight = $('#speedLimits').height();
var speedBarValue = $('#speedBar').offset().top;
var increment = (speedBarValue - $movementCtrl) / speedLimitsHeight;
var maxIncrement = speedLimitsHeight * $speedStep;
speedValue+= (increment > $speedStep ? $speedStep : (increment < $speedStep * -1 ? $speedStep * -1 : increment));
if (speedValue < 0) speedValue = 0;
if (speedValue > 1) speedValue = 1;
speed.attr('speed', speedValue);
showSpeed();
var speedValueFormated = '' + speedValue;
if (speedValue == 0) speedValueFormated = $jmri.STOP;
if (speedValue == 1) speedValueFormated = $jmri.FULL_SPEED;
$jmri.setJMRI('throttle', $locoAddress, {"speed":speedValueFormated});
};
//----------------------------------------- Speed zone moving (touch)
var speedMovingTouch = function(e) {speedMoving(e, e.targetTouches[0]);};
//----------------------------------------- Speed zone moving (mouse)
var speedMovingMouse = function(e) {if (isLeftButton(e)) speedMoving(e, e);};
//----------------------------------------- Speed zone moving
var speedMoving = function(e, t) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
$movementCtrl = t.pageY;
};
//----------------------------------------- Speed zone released (touch)
var speedReleasedTouch = function(e) {speedReleased(e);};
//----------------------------------------- Speed zone released (mouse)
var speedReleasedMouse = function(e) {if (isLeftButton(e)) speedReleased(e);};
//----------------------------------------- Speed zone canceled (mouse)
var speedCanceledMouse = function(e) {if (isLeftButton(e)) speedReleased(e);};
//----------------------------------------- Speed zone released or canceled
var speedReleased = function(e) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
if ($speedTimer) {
clearInterval($speedTimer);
$speedTimer = null;
}
$speedFeedback = true;
throttleSpeed($locoAddress, $speedAux);
};
//----------------------------------------- Function button click - Click (mouse and touch with simulation)
var functionClick = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
var o = $(e.currentTarget);
var lastState = o.attr('state');
var propName = 'F' + o.attr('id').substr(12); // id=locoFunction<n>
var obj = {};
obj[propName] = (lastState == '' + $jmri.TRUE) ? $jmri.FALSE : $jmri.TRUE;
$jmri.setJMRI('throttle', $locoAddress, obj);
};
//----------------------------------------- Function button pressed (touch)
var functionPressedTouch = function(e, o) {functionPressed(e, o);};
//----------------------------------------- Function button pressed (mouse)
var functionPressedMouse = function(e) {if (isLeftButton(e)) functionPressed(e, $(e.currentTarget));};
//----------------------------------------- Function button pressed
var functionPressed = function(e, o) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
var propName = 'F' + o.attr('id').substr(12); // id=locoFunction<n>
var obj = {};
obj[propName] = $jmri.TRUE;
$jmri.setJMRI('throttle', $locoAddress, obj);
};
//----------------------------------------- Function button released (touch)
var functionReleasedTouch = function(e, o) {functionReleased(e, o);};
//----------------------------------------- Function button released (mouse)
var functionReleasedMouse = function(e) {if (isLeftButton(e)) functionReleased(e, $(e.currentTarget));};
//----------------------------------------- Function button released
var functionReleased = function(e, o) {
e.preventDefault();
e.stopImmediatePropagation();
if ($('body').attr('locoReady') != 'true') return;
var propName = 'F' + o.attr('id').substr(12); // id=locoFunction<n>
var obj = {};
obj[propName] = $jmri.FALSE;
$jmri.setJMRI('throttle', $locoAddress, obj);
};
//----------------------------------------- Function button released or canceled (mouse)
var functionCanceledMouse = function(e) {
if (!isLeftButton(e)) return;
e.preventDefault();
e.stopImmediatePropagation();
var o = $(e.currentTarget);
var mouseY = e.pageY;
var mouseX = e.pageX;
var oTop = o.offset().top;
var oLeft = o.offset().left;
var oBottom = oTop + o.outerHeight(false);
var oRight = oLeft + o.outerWidth(false);
if (mouseY > oTop && mouseY < oBottom && mouseX > oLeft && mouseX < oRight) return;
if ($('body').attr('locoReady') != 'true') return;
var propName = 'F' + o.attr('id').substr(12); // id=locoFunction<n>
var obj = {};
obj[propName] = $jmri.FALSE;
$jmri.setJMRI('throttle', $locoAddress, obj);
};
//===================================================================================== Generic functions =============================
//----------------------------------------- Debug print
// Use the following lines anywhere logs or alerts are needed:
// $debug && window.console && console.log(anything);
// $debug && window.console && console.log(new Date() + ' - ' + document.title + '\n' + text);
// $debug && alert(text);
// $debug && alert(new Date() + '\n\n' + document.title + '\n\n' + text);
//----------------------------------------- Get URL parameters (parameters are not case sensitive so, 'key' must be compared in lowercase)
var getUrlParameters = function() { //Item 'undefined' if index not found
var vars = [], hash, key;
var hashes;
var auxInt = window.location.href.indexOf('?');
if (auxInt < 0) return vars;
hashes = window.location.href.slice(auxInt + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
if (hashes[i].indexOf('=') == -1) hashes[i]+= '=';
hash = hashes[i].split('=');
key = hash[0].toLowerCase();
vars.push(decodeURIComponent(key));
vars[key] = decodeURIComponent(hash[1]).replace(/\+/g, " "); //undo server query string space replacements
}
return vars;
};
//----------------------------------------- Save local info ('key' is case sensitive)
var saveLocalInfo = function(key, value) {
var _key = encodeURIComponent(key);
var _value = encodeURIComponent(value);
localStorage[_key] = _value;
};
//----------------------------------------- Load local info ('key' is case sensitive)
var loadLocalInfo = function(key) { //Return 'undefined' if not found
var _key = encodeURIComponent(key);
var value;
value = localStorage[_key];
return ((value === undefined || value === null) ? (function() {})() : decodeURIComponent(value));
};
//----------------------------------------- Remove local info ('key' is case sensitive)
var removeLocalInfo = function(key) {
var _key = encodeURIComponent(key);
localStorage.removeItem(_key);
};
//----------------------------------------- Set top related to parent content
var setTopFromParentContent = function(o, px) {
var p = Number(o.parent().css('padding-top').split('px')[0]);
o.css('top', px + p);
};
//----------------------------------------- Set left related to parent content
var setLeftFromParentContent = function(o, px) {
var p = Number(o.parent().css('padding-left').split('px')[0]);
o.css('left', px + p);
};
//----------------------------------------- Set outer height
var setOuterHeight = function(o, px, includeMargin) {
var p = includeMargin ? (Number(o.css('margin-top').split('px')[0]) + Number(o.css('margin-bottom').split('px')[0])) : 0;
p+= Number(o.css('border-top-width').split('px')[0]) + Number(o.css('border-bottom-width').split('px')[0]);
p+= Number(o.css('padding-top').split('px')[0]) + Number(o.css('padding-bottom').split('px')[0]);
o.height(px - p);
};
//----------------------------------------- Set outer width
var setOuterWidth = function(o, px, includeMargin) {
var p = includeMargin ? (Number(o.css('margin-left').split('px')[0]) + Number(o.css('margin-right').split('px')[0])) : 0;
p+= Number(o.css('border-left-width').split('px')[0]) + Number(o.css('border-right-width').split('px')[0]);
p+= Number(o.css('padding-left').split('px')[0]) + Number(o.css('padding-right').split('px')[0]);
o.width(px - p);
};
//----------------------------------------- Show a list to select an item (-1 if canceled)
var selectionList = function(a, t, ai, f) {
if ($('.selectionList').length) return; // Nothing if a list is already active
var o = $('<div>');
var item;
o.addClass('selectionList');
$('body').append(o);
item = $('<p>');
item.addClass('selectionListItem');
item.attr('id', 'selectionListTitle');
o.append(item);
item.text(t);
item.html(item.html().replace(/ /g, ' '));
for (var i = 0; i < a.length; i++) {
item = $('<p>');
item.attr('seq', i);
item.addClass('selectionListItem');
o.append(item);
if (a[i] != '') {
item.on('click', function(event) {itemSelected(event, f);});
item.text(a[i]);
} else {
item.attr('id', 'selectionListItemBlank');
item.text(' ');
}
item.html(item.html().replace(/ /g, ' '));
}
if (ai >= 0) $('.selectionListItem[seq = ' + ai + ']').addClass('activeListItem');
item = $('<p>');
item.addClass('selectionListItem');
item.attr('id', 'selectionListItemBlank');
o.append(item);
item.html(' ');
item = $('<p>');
item.attr('seq', -1);
item.on('click', function(event) {itemSelected(event, f);});
item.addClass('selectionListItem');
item.attr('id', 'selectionListCancel');
o.append(item);
item.text('Cancel');
resizeSelectionList();
};
//----------------------------------------- Show alert message (no blocking) - timeout parameter 'seconds' is optional
var smoothAlert = function(message, seconds) {
var lines = ('' + message).split('\n');
var o = $('<div>');
if ($hasTouch) {
o.on('touchstart', function(event) {startMoveTouch(event.originalEvent, $(this));});
o.on('touchmove', function(event) {movingTouch(event.originalEvent, $(this));});
o.on('touchend', function(event) {stopMoveTouch(event.originalEvent, $(this));});
} else {
o.on('click', function(event) {removeSmoothAlertMouse(event);});
o.on('mousedown', function(event) {startMoveMouse(event);});
o.on('mousemove', function(event) {movingMouse(event);});
o.on('mouseup', function(event) {stopMoveMouse(event);});
o.on('mouseout', function(event) {stopMoveConditionallyMouse(event);});
}
o.addClass('smoothAlert');
$('body').append(o);
lines.forEach(function(line) {
var l = $('<p>');
l.addClass('smoothAlertLine');
o.append(l);
l.text(line + ((line.length) ? '' : ' '));
l.html(l.html().replace(/ /g, ' '));
});
o.css('z-index', $zIndexForSmoothAlert--);
o.addClass('fadeIn');
if (!isNaN(seconds) && seconds > 0) o.attr('seconds', seconds);
resizeSmoothAlerts();
};
//----------------------------------------- Encode text to be used in attribute 'id'
var encodeId = function(text) {
var s = escape(text); // will insert: % The exceptions: * @ - _ + . /
s = s.replace(/\%/g, '_-0-_');
s = s.replace(/\*/g, '_-1-_');
s = s.replace(/\@/g, '_-2-_');
s = s.replace(/\+/g, '_-3-_');
s = s.replace(/\./g, '_-4-_');
s = s.replace(/\//g, '_-5-_');
return s;
};
//----------------------------------------- Get width of vertical scrollbar
var getVerticalScrollbarWidth = function() {
var p, c, w;
p = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
c = p.children();
w = c.innerWidth() - c.height(99).innerWidth();
p.remove();
return w;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of file