Serge NOEL
5520 lines
258 KiB
JavaScript
5520 lines
258 KiB
JavaScript
/**********************************************************************************************
|
|
* panel Servlet - Draw JMRI panels on browser screen
|
|
* Retrieves panel xml from JMRI and builds panel client-side from that xml, including
|
|
* click functions. Sends and listens for changes to panel elements using the JSON WebSocket server.
|
|
* If no parm "name" passed, page will list links to available panels.
|
|
* Include parm protect=yes to treat panel as read-only
|
|
* Approach: Read panel's xml and create widget objects in the browser with all needed attributes.
|
|
* There are 5 "widgetFamily"s: text, input, icon, drawn and switch. States are handled by storing member's
|
|
* iconX, textX, cssX where X is the state. The corresponding members are "shown" whenever the state changes.
|
|
* CSS classes are used throughout to attach events to correct widgets, as well as control appearance.
|
|
* The JSON type is used to send changes to JSON server and to listen for changes made elsewhere.
|
|
* Drawn widgets are handled by drawing directly on the javascript "canvas" layer.
|
|
* Switch widgets are handled by drawing directly on an individual javascript "canvas", placed in a flexbox layout.
|
|
*
|
|
* See java/src/jmri/server/json/JsonNamedBeanSocketService.java#onMessage() for GET method that adds a listener.
|
|
* See JMRI Web Server - Panel Servlet in help/en/html/web/PanelServlet.shtml for an example description of
|
|
* the interaction between the Web Servlets, the Web Browser and the JMRI application.
|
|
*
|
|
* TODO: show error dialog while retrying connection
|
|
* TODO: add Cancel button to return to home page on errors (not found, etc.)
|
|
* TODO: handle "&" in usernames (see Indicator Demo 00.xml)
|
|
* TODO: update drawn track on color and width changes (would need to create system objects to reflect these chgs)
|
|
* TODO: research movement of locoicons ("promote" locoicon to system entity in JMRI?, add panel-level listeners?)
|
|
* TODO: deal with mouseleave, mouseout, touchout, etc. Slide off Stop button on rb1 for example.
|
|
* TODO: alignment of text sensorIcons without fixed width is very different. Recommended workaround is to use fixed width.
|
|
* TODO: add support for slipturnouticon (one2beros)
|
|
* TODO: handle (and test) disableWhenOccupied for layoutslip
|
|
* TODO: handle block color and track widths for turntable raytracks
|
|
* TODO: fix JMRI WARN about username on memoryicons
|
|
*
|
|
**********************************************************************************************/
|
|
|
|
var log = new Logger();
|
|
|
|
//persistent (global) variables
|
|
var $gWidgets = {}; //array of all widget objects, key=CSSId
|
|
var $gPanelList = {}; //store list of available panels
|
|
var $gPanel = {}; //store overall panel info
|
|
var whereUsed = {}; //associative array of array of elements indexed by systemName or userName
|
|
var audioIconIDs = {}; //associative array of audio icons
|
|
var occupancyNames = {}; //associative array of array of elements indexed by occupancy sensor name
|
|
var $oblockNames = {}; //associative array of array of elements indexed by occupancy block name (CPE panels)
|
|
var $gPts = {}; //array of all points, key="pointname.pointtype" (used for layoutEditor panels)
|
|
var $gBlks = {}; //array of all blocks, key="blockname" (used for layoutEditor panels)
|
|
var $gCtx; //persistent context of canvas layer
|
|
var $gDashArray = [12, 12]; //on,off of dashed lines
|
|
var $rows = 1; //persistent storage of shared switchboard property number of rows, if 0 use autoRows
|
|
var $total = 1; //persistent storage of shared switchboard property total number of items displayed
|
|
var $autoRows = 0;
|
|
var $activeColor = 'red';
|
|
var $inactiveColor = 'gray';
|
|
var $unknownColor = 'gray';
|
|
var $showUserName = 'no';
|
|
var DOWNEVENT = 'touchstart mousedown'; // check both touch and mouse events
|
|
var UPEVENT = 'touchend mouseup';
|
|
var BLUR = 'blur';
|
|
var KEYUP = 'keyup';
|
|
var CHANGE = 'change';
|
|
|
|
var SIZE = 3; // default factor for circles
|
|
|
|
var UNKNOWN = '0'; // constants to match JSON Server state names
|
|
var ACTIVE = '2';
|
|
var CLOSED = '2';
|
|
var INACTIVE = '4';
|
|
var THROWN = '4';
|
|
var INCONSISTENT = '8';
|
|
|
|
var ALLOCATED = 0x10; // constants to match JSON Server oblock status names
|
|
var RUNNING = 0x20; // Oblock that running train has reached
|
|
var OUT_OF_SERVICE = 0x40; // Oblock that should not be used
|
|
var TRACK_ERROR = 0x80; // Oblock has Error
|
|
|
|
var CLOSEDCLOSED = '5'; // constants for slipturnouticon
|
|
var CLOSEDTHROWN = '7';
|
|
var THROWNCLOSED = '9';
|
|
var THROWNTHROWN = '11';
|
|
|
|
var PT_CEN = ".POS_POINT"; // named constants for point types
|
|
var PT_A = ".TURNOUT_A";
|
|
var PT_B = ".TURNOUT_B";
|
|
var PT_C = ".TURNOUT_C";
|
|
var PT_D = ".TURNOUT_D";
|
|
|
|
var LEVEL_XING_A = ".LEVEL_XING_A";
|
|
var LEVEL_XING_B = ".LEVEL_XING_B";
|
|
var LEVEL_XING_C = ".LEVEL_XING_C";
|
|
var LEVEL_XING_D = ".LEVEL_XING_D";
|
|
|
|
var SLIP_A = ".SLIP_A";
|
|
var SLIP_B = ".SLIP_B";
|
|
var SLIP_C = ".SLIP_C";
|
|
var SLIP_D = ".SLIP_D";
|
|
|
|
var STATE_AC = 0x02;
|
|
var STATE_BD = 0x04;
|
|
var STATE_AD = 0x06;
|
|
var STATE_BC = 0x08;
|
|
|
|
var DARK = 0x00; //named constants for signalhead states
|
|
var RED = 0x01;
|
|
var FLASHRED = 0x02;
|
|
var YELLOW = 0x04;
|
|
var FLASHYELLOW = 0x08;
|
|
var GREEN = 0x10;
|
|
var FLASHGREEN = 0x20;
|
|
var LUNAR = 0x40;
|
|
var FLASHLUNAR = 0x80;
|
|
var HELD = 0x0100; //additional to deal with "Held" pseudo-state
|
|
|
|
var RH_TURNOUT = "RH_TURNOUT"; //named constants for turnout types
|
|
var LH_TURNOUT = "LH_TURNOUT";
|
|
var WYE_TURNOUT = "WYE_TURNOUT";
|
|
var DOUBLE_XOVER = "DOUBLE_XOVER";
|
|
var RH_XOVER = "RH_XOVER";
|
|
var LH_XOVER = "LH_XOVER";
|
|
var SINGLE_SLIP = "SINGLE_SLIP";
|
|
var DOUBLE_SLIP = "DOUBLE_SLIP";
|
|
|
|
var jmri = null;
|
|
|
|
var jmri_logging = false;
|
|
|
|
/******************************************************************
|
|
* ======= Debug functions =======
|
|
*/
|
|
|
|
// log object properties
|
|
function $logProperties(obj) {
|
|
if (jmri_logging) {
|
|
var $propList = "";
|
|
for (var $propName in obj) {
|
|
if (isDefined(obj[$propName])) {
|
|
$propList += ($propName + "='" + obj[$propName] + "', ");
|
|
}
|
|
}
|
|
log.log("$logProperties(obj): " + $propList + ".");
|
|
}
|
|
}
|
|
|
|
function isUndefined(x) {
|
|
return (typeof x === "undefined");
|
|
}
|
|
|
|
function isDefined(x) {
|
|
return (typeof x !== "undefined");
|
|
}
|
|
|
|
/******************************************************************
|
|
* ======= Primary functions =======
|
|
*/
|
|
|
|
// request the panel xml from the server, and set up callback to process the response
|
|
var requestPanelXML = function(panelName) {
|
|
$("#activity-alert").addClass("show").removeClass("hidden");
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/panel/" + panelName + "?format=xml", // request proper url
|
|
success: function(data, textStatus, jqXHR) {
|
|
processPanelXML(data, textStatus, jqXHR);
|
|
setTitle($gPanel["name"]); // set final title once load completes, helps with testing
|
|
// set new attribute data-panel-name on the panel-area div to the panel name so that a user's css can use it.
|
|
$("#panel-area").attr("data-panel-name", $gPanel["name"]);
|
|
},
|
|
error: function( jqXHR, textStatus, errorThrown) {
|
|
alert("Error retrieving panel xml from server. Please press OK to retry.\n\nDetails: " +
|
|
textStatus + " - " + errorThrown);
|
|
window.location = window.location.pathname;
|
|
},
|
|
async: true,
|
|
timeout: 15000, // very long timeout, since this can be a slow process for complicated panels
|
|
dataType: "xml"
|
|
});
|
|
};
|
|
|
|
// process the response returned for the requestPanelXML command
|
|
function processPanelXML($returnedData, $success, $xhr) {
|
|
|
|
$('div#messageText').text("rendering panel from xml, please wait...");
|
|
$("#activity-alert").addClass("show").removeClass("hidden");
|
|
var $xml = $($returnedData); //jQuery-ize returned data for easier access
|
|
|
|
//remove whitespace
|
|
$xml.xmlClean();
|
|
|
|
//get the panel-level values from the xml
|
|
var $panel = $xml.find('panel');
|
|
$($panel[0].attributes).each(function() {
|
|
$gPanel[this.name] = this.value;
|
|
});
|
|
$("#panel-area").width($gPanel.width);
|
|
$("#panel-area").height($gPanel.height);
|
|
|
|
//override "Allow Layout Control" attribute when protect parm set to "yes"
|
|
var protect = getParameterByName("protect");
|
|
if (protect == "yes") {
|
|
$gPanel["controlling"] = "no";
|
|
}
|
|
|
|
// insert the canvas layer and set up context used by LayoutEditor "drawn" objects, set some defaults
|
|
if ($gPanel.paneltype == "LayoutPanel") {
|
|
createPanelCanvas(); //insure canvas layer is available for drawing
|
|
}
|
|
|
|
// set up context used by SwitchboardEditor "beanswitch" objects, set some defaults
|
|
if ($gPanel.paneltype == "Switchboard") {
|
|
$("#panel-area").width("100%"); // reset to fill the (mobile) screen
|
|
$("#panel-area").height("100%"); // reset to fill the (mobile) screen
|
|
// background color already set for #panel-area, inherited
|
|
$activeColor = $gPanel.activecolor;
|
|
$inactiveColor = $gPanel.inactivecolor;
|
|
$showUserName = $gPanel.showusername;
|
|
$total = Number($gPanel.total);
|
|
$rows = Number($gPanel.rows);
|
|
if ($rows == 0) { // AutoRows set, automatically choose grid showing largest tiles using flexbox
|
|
$("#panel-area").css({'display': "flex", 'flex-flow': "row wrap"})
|
|
$autoRows = 1;
|
|
$rows = autoRows(window.screen.width, window.screen.height - 200); // use (mobile) screen size, leave space for header
|
|
// check browser window (window.innerWidth) size vs whole screen (window.screen.width)
|
|
$swWidth = Math.ceil(0.95*Math.min(window.screen.width, window.innerWidth)*Math.max(0.01, Math.min(1, 1/(Math.ceil($total/$rows)))));
|
|
$swWidth = Math.max(Math.min($swWidth, 200), 70); // catch extreme width result
|
|
$swHeight = Math.ceil(0.9*Math.min(window.screen.height, window.innerHeight)/Math.max(0.01, $rows));
|
|
$swHeight = Math.max($swHeight, 90); // minimum height to display 2 labels
|
|
// 0.9 to leave room for the Switchboard name label at top
|
|
} else {
|
|
$swWidth = Math.ceil(0.95*($gPanel.panelwidth)*Math.max(0.01, Math.min(1, 1/(Math.ceil($total/$rows)))));
|
|
// calculate from jmri rows number, 95pc to fit on screen
|
|
// Math.min(1,... to prevent >100% width calc (when hide unconnected selected)
|
|
// Math.max(0.001,... to prevent 0 width in case 0 items are connected
|
|
// 1/Math.ceil($total/$rows) to account for unused tiles:
|
|
// include RxC unused cells in calc: for 22 switches we need at least 24 tiles (4x6, 3x8, 2x12 etc)
|
|
$swHeight = Math.ceil(0.9*$gPanel.panelheight/Math.max(0.01, $rows));
|
|
// Math.max(0.001,... to prevent 0 division in case 0 items are connected
|
|
}
|
|
var onOffSpans = "";
|
|
if (($gPanel.type == "L") && ($gPanel.controlling == "yes")) {
|
|
// handlers to switch on/off, I18N
|
|
onOffSpans = " <span id='allOff' class='lightswitch'>All Off</span> <span id='allOn' class='lightswitch'>All On</span>";
|
|
// handlers added later
|
|
}
|
|
// add short banner at top of Swb
|
|
$("#panel-area").append("<div id='name' class='show' style='color: " + $gPanel.defaulttextcolor +
|
|
";'> Switchboard "" + $gPanel.name + "" (conn: " +
|
|
$gPanel.connection + ", type: " + $gPanel.type + ")" + onOffSpans + "</div>"); // TODO I18N
|
|
}
|
|
|
|
// process all elements in the panel xml, drawing them on screen, and building persistent array of widgets
|
|
$panel.contents().each(
|
|
function() {
|
|
var $widget = new Array();
|
|
$widget['widgetType'] = this.nodeName;
|
|
$widget['scale'] = "1"; //default to no scale
|
|
$widget['degrees'] = 0; //default to no rotation
|
|
$widget['rotation'] = 0; // default to no rotation
|
|
// convert attributes to an object array
|
|
$(this.attributes).each(function() {
|
|
$widget[this.name] = this.value;
|
|
});
|
|
//default various css attributes to not-set, then set in later code as needed
|
|
var $hoverText = "";
|
|
|
|
//set value as JMRI would if "Allow Layout Control" turned off
|
|
if ($gPanel.controlling != "yes") {
|
|
$widget['forcecontroloff'] = "true";
|
|
}
|
|
|
|
// add and normalize the various type-unique values, from the various spots they are stored
|
|
// icon names based on states returned from JSON server,
|
|
$widget['state'] = UNKNOWN; //initial state is unknown
|
|
$widget.jsonType = ""; //default to no JSON type (avoid undefined)
|
|
|
|
if (isUndefined($widget["systemName"]) && isDefined($widget["id"])) {
|
|
$widget.systemName = $widget["id"]; //set systemName from id if missing
|
|
}
|
|
$widget["id"] = "widget-" + $gUnique(); //set id to a unique value (since same element can be in multiple widgets)
|
|
$widget['widgetFamily'] = $getWidgetFamily($widget, this);
|
|
$widget['extraAttributes'] = ""; //some type-specific attrs
|
|
var $jc = "";
|
|
if (isDefined($widget["class"])) {
|
|
var $ta = $widget["class"].split('.'); //get last part of java class name for a css class
|
|
$jc = $ta[$ta.length - 1];
|
|
}
|
|
if ($widget.widgetFamily == "switch") {
|
|
$widget['classes'] = $widget.widgetType + " " + $jc; // rest of classes are not used on a switch
|
|
} else {
|
|
$widget['classes'] = $widget.widgetType + " " + $widget.widgetFamily + " rotatable " + $jc;
|
|
}
|
|
if ($widget.momentary == "true") {
|
|
$widget.classes += " momentary ";
|
|
}
|
|
if ($widget.hidden == "yes") {
|
|
$widget.classes += " hidden ";
|
|
}
|
|
if (isDefined($widget.showtooltip) && $widget.showtooltip == "true") { //set tooltip for custom tooltip
|
|
var ht = $(this).find('tooltip').text();
|
|
if (ht != "") $widget['hoverText'] = ht;
|
|
}
|
|
|
|
// set additional values in this widget
|
|
switch ($widget.widgetFamily) {
|
|
case "icon" :
|
|
$widget['styles'] = $getTextCSSFromObj($widget);
|
|
switch ($widget.widgetType) {
|
|
case "positionablelabel" :
|
|
$widget['icon' + UNKNOWN] = $(this).find('icon').attr('url');
|
|
$widget['rotation'] = $(this).find('icon').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icon').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icon').attr('scale');
|
|
break;
|
|
case "audioicon" :
|
|
$widget.jsonType = 'audio'; // JSON object type
|
|
$widget['identity'] = $(this).find('Identity').text();
|
|
audioIconIDs['audioicon:'+$widget['identity']] = $widget; // Ensure the key is a string, not a number
|
|
$widget['icon' + UNKNOWN] = $(this).find('icon').attr('url');
|
|
$widget['sound'] = $(this).attr('sound');
|
|
$widget['onClickOperation'] = $(this).attr('onClickOperation');
|
|
$widget['audio_widget'] = new Audio($widget['sound']);
|
|
$widget['playSoundWhenJmriPlays'] = $(this).attr('playSoundWhenJmriPlays') == "yes";
|
|
$widget['stopSoundWhenJmriStops'] = $(this).attr('stopSoundWhenJmriStops') == "yes";
|
|
$widget['rotation'] = $(this).find('icon').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icon').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icon').attr('scale');
|
|
$widget.classes += " " + $widget.jsonType + " clickable"; //make it clickable
|
|
if (!$('#' + $widget.id).hasClass('clickable')) {
|
|
$('#' + $widget.id).addClass("clickable");
|
|
$('#' + $widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
jmri.getAudio($widget.systemName);
|
|
jmri.getAudioIcon($widget['identity']);
|
|
break;
|
|
case "logixngicon" :
|
|
$widget['identity'] = $(this).find('Identity').text();
|
|
$widget['icon' + UNKNOWN] = $(this).find('icon').attr('url');
|
|
$widget['rotation'] = $(this).find('icon').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icon').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icon').attr('scale');
|
|
$widget.classes += " " + $widget.jsonType + " clickable"; //make it clickable
|
|
if (!$('#' + $widget.id).hasClass('clickable')) {
|
|
$('#' + $widget.id).addClass("clickable");
|
|
$('#' + $widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
break;
|
|
case "linkinglabel" :
|
|
$widget['icon' + UNKNOWN] = $(this).find('icon').attr('url');
|
|
$widget['rotation'] = $(this).find('icon').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icon').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icon').attr('scale');
|
|
$url = $(this).find('url').text();
|
|
$widget['url'] = $url; //default to using url value as is
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
break;
|
|
case "indicatortrackicon" : // TODO clean up unused icon copies, carefully
|
|
// named after (o)block
|
|
$widget['icon' + UNKNOWN] = $(this).find('iconmap').find('ClearTrack').attr('url'); // clear via oblock
|
|
$widget['icon2'] = $(this).find('iconmap').find('OccupiedTrack').attr('url'); // occupied via sensor
|
|
$widget['icon4'] = $widget['icon' + UNKNOWN]; // clear via sensor
|
|
$widget['icon8'] = $widget['icon' + UNKNOWN]; // status from sensor inconsistent
|
|
$widget['icon16'] = $(this).find('iconmap').find('AllocatedTrack').attr('url'); //
|
|
$widget['icon32'] = $(this).find('iconmap').find('PositionTrack').attr('url'); // Running
|
|
$widget['icon64'] = $(this).find('iconmap').find('DontUseTrack').attr('url'); // Not in use
|
|
$widget['icon128'] = $(this).find('iconmap').find('ErrorTrack').attr('url'); // Power Error
|
|
|
|
$widget['iconOccupied' + UNKNOWN] = $(this).find('iconmap').find('OccupiedTrack').attr('url');
|
|
$widget['iconOccupied2'] = $(this).find('iconmap').find('OccupiedTrack').attr('url');
|
|
$widget['iconOccupied16'] = $(this).find('iconmap').find('OccupiedTrack').attr('url'); // Allocated + Occupied
|
|
$widget['iconOccupied32'] = $(this).find('iconmap').find('PositionTrack').attr('url');
|
|
$widget['iconOccupied128'] = $(this).find('iconmap').find('ErrorTrack').attr('url');
|
|
$widget['rotation'] = $(this).find('iconmap').find('ClearTrack').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('iconmap').find('ClearTrack').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('iconmap').find('ClearTrack').attr('scale');
|
|
// CPE CircuitBuilder Oblocks
|
|
if ($(this).find('occupancysensor').text()) { // store occupancy sensor name
|
|
$widget['occupancysensor'] = $(this).find('occupancysensor').text();
|
|
$widget['name'] = $widget.occupancysensor;
|
|
$widget['occupancyblock'] = "none"; // clear oblockname
|
|
//console.log("ITI SENSOR=" + $widget['occupancysensor']);
|
|
//$widget.jsonType = "sensor"; // JSON object type - not necessary
|
|
jmri.getSensor($widget["occupancysensor"]); // listen for occupancy changes
|
|
} else if ($(this).find('oblocksysname').text() && ($(this).find('oblocksysname').text() != "none")) {
|
|
// extract the occupancyblock name
|
|
$widget['oblocksysname'] = $(this).find('oblocksysname').text();
|
|
$widget['name'] = $(this).find('occupancyblock').text(); // display name of oblock in hovertext, like CPE
|
|
$widget['occupancysensor'] = "none"; // clear occ.sensorname
|
|
//console.log("ITI OBLOCK =" + $widget['oblocksysname']);
|
|
jmri.getOblock($widget["oblocksysname"]); // listen for oblock changes via json, fired by OBlock#setState()
|
|
// store ControlPanelEditor oblocks where-used
|
|
$store_occupancyblock($widget.id, $widget.oblocksysname);
|
|
}
|
|
$widget['occupancystate'] = UNKNOWN;
|
|
break;
|
|
case "indicatorturnouticon" :
|
|
$widget['name'] = $(this).find('turnout').text(); // it could be empty on incomplete indicators
|
|
$widget.jsonType = 'turnout'; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('iconmaps').find('ClearTrack').find('BeanStateUnknown').attr('url');
|
|
$widget['icon2'] = $(this).find('iconmaps').find('ClearTrack').find('TurnoutStateClosed').attr('url'); // Clear + Closed
|
|
$widget['icon4'] = $(this).find('iconmaps').find('ClearTrack').find('TurnoutStateThrown').attr('url'); // Clear + Thrown
|
|
$widget['icon8'] = $(this).find('iconmaps').find('ClearTrack').find('BeanStateInconsistent').attr('url');
|
|
$widget['icon16'] = $(this).find('iconmaps').find('AllocatedTrack').find('BeanStateUnknown').attr('url'); // Allocated + ?
|
|
$widget['icon18'] = $(this).find('iconmaps').find('AllocatedTrack').find('TurnoutStateClosed').attr('url'); // Allocated + Closed
|
|
$widget['icon20'] = $(this).find('iconmaps').find('AllocatedTrack').find('TurnoutStateThrown').attr('url'); // Allocated + Thrown
|
|
$widget['icon22'] = $(this).find('iconmaps').find('AllocatedTrack').find('BeanStateInconsistent').attr('url');// Allocated + X
|
|
$widget['icon32'] = $(this).find('iconmaps').find('AllocatedTrack').find('BeanStateUnknown').attr('url'); // Running + ? (should be Occupied, see below)
|
|
$widget['icon34'] = $(this).find('iconmaps').find('PositionTrack').find('TurnoutStateClosed').attr('url'); // Running + Closed
|
|
$widget['icon36'] = $(this).find('iconmaps').find('PositionTrack').find('TurnoutStateThrown').attr('url'); // Running + Thrown
|
|
$widget['icon38'] = $(this).find('iconmaps').find('PositionTrack').find('BeanStateInconsistent').attr('url'); // Running + X
|
|
$widget['icon64'] = $(this).find('iconmaps').find('DontUseTrack').find('BeanStateUnknown').attr('url'); // Not in use + ?
|
|
$widget['icon66'] = $(this).find('iconmaps').find('DontUseTrack').find('TurnoutStateClosed').attr('url'); // Not in use + Closed
|
|
$widget['icon68'] = $(this).find('iconmaps').find('DontUseTrack').find('TurnoutStateThrown').attr('url'); // Not in use + Thrown
|
|
$widget['icon70'] = $(this).find('iconmaps').find('DontUseTrack').find('BeanStateInconsistent').attr('url'); // Not in use + X
|
|
$widget['icon128'] = $(this).find('iconmaps').find('ErrorTrack').find('BeanStateUnknown').attr('url'); // Power Error + ?
|
|
$widget['icon130'] = $(this).find('iconmaps').find('ErrorTrack').find('TurnoutStateClosed').attr('url'); // Power Error + Closed
|
|
$widget['icon132'] = $(this).find('iconmaps').find('ErrorTrack').find('TurnoutStateThrown').attr('url'); // Power Error + Thrown
|
|
$widget['icon134'] = $(this).find('iconmaps').find('ErrorTrack').find('BeanStateInconsistent').attr('url'); // Power Error + X
|
|
|
|
$widget['iconOccupied' + UNKNOWN] = $(this).find('iconmaps').find('OccupiedTrack').find('BeanStateUnknown').attr('url');// 4 icons for
|
|
$widget['iconOccupied2'] = $(this).find('iconmaps').find('OccupiedTrack').find('TurnoutStateClosed').attr('url'); // occ.detect
|
|
$widget['iconOccupied4'] = $(this).find('iconmaps').find('OccupiedTrack').find('TurnoutStateThrown').attr('url'); // by sensor
|
|
$widget['iconOccupied8'] = $(this).find('iconmaps').find('OccupiedTrack').find('BeanStateInconsistent').attr('url'); //
|
|
$widget['iconOccupied16'] = $(this).find('iconmaps').find('OccupiedTrack').find('BeanStateUnknown').attr('url'); // 4 icons for
|
|
$widget['iconOccupied18'] = $(this).find('iconmaps').find('OccupiedTrack').find('TurnoutStateClosed').attr('url'); // occ.detect
|
|
$widget['iconOccupied20'] = $(this).find('iconmaps').find('OccupiedTrack').find('TurnoutStateThrown').attr('url'); // by oblock
|
|
$widget['iconOccupied22'] = $(this).find('iconmaps').find('OccupiedTrack').find('BeanStateInconsistent').attr('url');//
|
|
$widget['iconOccupied32'] = $(this).find('iconmaps').find('AllocatedTrack').find('BeanStateUnknown').attr('url'); // Running + ?
|
|
$widget['iconOccupied34'] = $(this).find('iconmaps').find('PositionTrack').find('TurnoutStateClosed').attr('url'); // Running + Closed
|
|
$widget['iconOccupied36'] = $(this).find('iconmaps').find('PositionTrack').find('TurnoutStateThrown').attr('url'); // Running + Thrown
|
|
$widget['iconOccupied38'] = $(this).find('iconmaps').find('PositionTrack').find('BeanStateInconsistent').attr('url'); // Running + X
|
|
$widget['iconOccupied128'] = $(this).find('iconmaps').find('ErrorTrack').find('BeanStateUnknown').attr('url');
|
|
$widget['iconOccupied130'] = $(this).find('iconmaps').find('ErrorTrack').find('TurnoutStateClosed').attr('url');
|
|
$widget['iconOccupied132'] = $(this).find('iconmaps').find('ErrorTrack').find('TurnoutStateThrown').attr('url');
|
|
$widget['iconOccupied134'] = $(this).find('iconmaps').find('ErrorTrack').find('BeanStateInconsistent').attr('url');
|
|
// no icons for Occupied + DontUseTrack
|
|
$widget['rotation'] = $(this).find('iconmaps').find('ClearTrack').find('BeanStateUnknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('iconmaps').find('ClearTrack').find('BeanStateUnknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('iconmaps').find('ClearTrack').find('BeanStateUnknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
// CPE CircuitBuilder Oblocks
|
|
if ($(this).find('occupancysensor').text()) { // instead, store occupancy sensor name
|
|
$widget['occupancyblock'] = "none"; // clear oblockname
|
|
$widget['occupancysensor'] = $(this).find('occupancysensor').text();
|
|
//console.log("ITOI SENSOR =" + $widget['occupancysensor']);
|
|
jmri.getSensor($widget["occupancysensor"]); // listen for occupancy changes
|
|
$store_occupancysensor($widget.id, $widget.occupancysensor); // only do that now we know no oblock is set
|
|
} else if ($(this).find('oblocksysname').text() && ($(this).find('oblocksysname').text() != "none")) {
|
|
// extract the occupancy block name
|
|
$widget['oblocksysname'] = $(this).find('oblocksysname').text();
|
|
$widget['occupancysensor'] = "none"; // clear oblockname
|
|
//console.log("ITOI OBLOCK =" + $widget['oblocksysname']);
|
|
jmri.getOblock($widget["oblocksysname"]); // listen for oblock changes, fired by Block#setState(), under development
|
|
$store_occupancyblock($widget.id, $widget.oblocksysname);
|
|
}
|
|
$widget['occupancystate'] = UNKNOWN;
|
|
jmri.getTurnout($widget["systemName"]);
|
|
break;
|
|
case "turnouticon" :
|
|
$widget['name'] = $widget.turnout; //normalize name
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('icons').find('unknown').attr('url');
|
|
$widget['icon2'] = $(this).find('icons').find('closed').attr('url');
|
|
$widget['icon4'] = $(this).find('icons').find('thrown').attr('url');
|
|
$widget['icon8'] = $(this).find('icons').find('inconsistent').attr('url');
|
|
$widget['rotation'] = $(this).find('icons').find('unknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icons').find('unknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icons').find('unknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
jmri.getTurnout($widget["systemName"]);
|
|
break;
|
|
case "outputindicator" :
|
|
$widget['name'] = $widget.turnout; //normalize name
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('icons').find('unknown').attr('url');
|
|
$widget['icon2'] = $(this).find('icons').find('closed').attr('url');
|
|
$widget['icon4'] = $(this).find('icons').find('thrown').attr('url');
|
|
$widget['icon8'] = $(this).find('icons').find('inconsistent').attr('url');
|
|
$widget['rotation'] = $(this).find('icons').find('unknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icons').find('unknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icons').find('unknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
jmri.getTurnout($widget["systemName"]);
|
|
break;
|
|
case "sensoricon" :
|
|
$widget['name'] = $widget.sensor; //normalize name
|
|
$widget.jsonType = "sensor"; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('unknown').attr('url');
|
|
$widget['icon2'] = $(this).find('active').attr('url');
|
|
$widget['icon4'] = $(this).find('inactive').attr('url');
|
|
$widget['icon8'] = $(this).find('inconsistent').attr('url');
|
|
$widget['rotation'] = $(this).find('unknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('unknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('unknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getSensor($widget["systemName"]);
|
|
break;
|
|
case "LightIcon" :
|
|
$widget['name'] = $widget.light; //normalize name
|
|
$widget.jsonType = "light"; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('icons').find('unknown').attr('url');
|
|
$widget['icon2'] = $(this).find('icons').find('on').attr('url');
|
|
$widget['icon4'] = $(this).find('icons').find('off').attr('url');
|
|
$widget['icon8'] = $(this).find('icons').find('inconsistent').attr('url');
|
|
$widget['rotation'] = $(this).find('icons').find('unknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icons').find('unknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('unknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getLight($widget["systemName"]);
|
|
break;
|
|
case "signalheadicon" :
|
|
$widget['name'] = $widget.signalhead; //normalize name
|
|
$widget.jsonType = "signalHead"; // JSON object type
|
|
$widget['icon' + HELD] = $(this).find('icons').find('held').attr('url');
|
|
$widget['icon' + DARK] = $(this).find('icons').find('dark').attr('url');
|
|
$widget['icon' + RED] = $(this).find('icons').find('red').attr('url');
|
|
if (isUndefined($widget['icon' + RED])) { //look for held if no red
|
|
$widget['icon' + RED] = $(this).find('icons').find('held').attr('url');
|
|
}
|
|
$widget['icon' + YELLOW] = $(this).find('icons').find('yellow').attr('url');
|
|
$widget['icon' + GREEN] = $(this).find('icons').find('green').attr('url');
|
|
$widget['icon' + FLASHRED] = $(this).find('icons').find('flashred').attr('url');
|
|
$widget['icon' + FLASHYELLOW] = $(this).find('icons').find('flashyellow').attr('url');
|
|
$widget['icon' + FLASHGREEN] = $(this).find('icons').find('flashgreen').attr('url');
|
|
$widget['icon' + LUNAR] = $(this).find('icons').find('lunar').attr('url');
|
|
$widget['icon' + FLASHLUNAR] = $(this).find('icons').find('lunar').attr('url');
|
|
$widget['rotation'] = $(this).find('icons').find('dark').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('icons').find('dark').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('icons').find('dark').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
jmri.getSignalHead($widget["systemName"]);
|
|
break;
|
|
case "signalmasticon" :
|
|
$widget['name'] = $widget.signalmast; //normalize name
|
|
$widget.jsonType = "signalMast"; // JSON object type
|
|
var icons = $(this).find('icons').children(); //get array of icons
|
|
icons.each(function(i, item) { //loop thru icons array and set all iconXX urls for widget
|
|
$widget['icon' + $(item).attr('aspect')] = $(item).attr('url');
|
|
});
|
|
$widget['degrees'] = $(this).attr('degrees') * 1;
|
|
$widget['scale'] = $(this).attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
if (isDefined($widget["iconUnlit"])) {
|
|
$widget['state'] = "Unlit"; //set the initial aspect to Unlit if defined
|
|
} else {
|
|
$widget['state'] = "Unknown"; //else set to Unknown
|
|
}
|
|
jmri.getSignalMast($widget["systemName"]);
|
|
break;
|
|
case "multisensoricon" :
|
|
//create multiple widgets, 1st with all images, stack others with non-active states set to a clear image
|
|
// set up siblings array so each widget can also set state of the others
|
|
$widget.jsonType = "sensor"; // JSON object type
|
|
$widget['icon' + UNKNOWN] = $(this).find('unknown').attr('url');
|
|
$widget['icon4'] = $(this).find('inactive').attr('url');
|
|
$widget['icon8'] = $(this).find('inconsistent').attr('url');
|
|
$widget['rotation'] = $(this).find('unknown').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('unknown').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('unknown').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
$widget['siblings'] = new Array(); //array of related multisensors
|
|
$widget['hoverText'] = ""; //for override of hovertext
|
|
var actives = $(this).find('active'); //get array of actives used by this multisensor
|
|
var $id = $widget.id;
|
|
actives.each(function(i, item) { //loop thru array once to set up siblings array, to be copied to all siblings
|
|
$widget.siblings.push($id);
|
|
$widget.hoverText += $(item).attr('sensor') + " "; //add sibling names to hovertext
|
|
$id = "widget-" + $gUnique(); //set new id to a unique value for each sibling
|
|
});
|
|
actives.each(function(i, item) { //loop thru array again to create each widget
|
|
$widget['id'] = $widget.siblings[i]; // use id already set in sibling array
|
|
$widget.name = $(item).attr('sensor');
|
|
$widget['icon2'] = $(item).attr('url');
|
|
if (i < actives.size() - 1) { //only save widget and make a new one if more than one active found
|
|
$preloadWidgetImages($widget); //start loading all images
|
|
$widget['safeName'] = $safeName($widget.name); //add a html-safe version of name
|
|
$widget["systemName"] = $widget.name;
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
$drawIcon($widget); //actually place and position the widget on the panel
|
|
jmri.getSensor($widget["systemName"]);
|
|
if (!($widget.systemName in whereUsed)) { //set where-used for this new sensor
|
|
whereUsed[$widget.systemName] = new Array();
|
|
}
|
|
whereUsed[$widget.systemName][whereUsed[$widget.systemName].length] = $widget.id;
|
|
$widget = jQuery.extend(true, {}, $widget); //get a new copy of widget
|
|
$widget['icon' + UNKNOWN] = "/web/images/transparent_1x1.png";
|
|
$widget['icon4'] = "/web/images/transparent_1x1.png"; //set non-actives to transparent image
|
|
$widget['icon8'] = "/web/images/transparent_1x1.png";
|
|
$widget['state'] = ACTIVE; //to avoid sizing based on the transparent image
|
|
}
|
|
});
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getSensor($widget["systemName"]);
|
|
break;
|
|
case "memoryicon" :
|
|
$widget['name'] = $widget.memory; //normalize name
|
|
$widget.jsonType = "memory"; // JSON object type
|
|
$widget['state'] = null; //set initial state to null
|
|
var memorystates = $(this).find('memorystate');
|
|
memorystates.each(function(i, item) { //get any memorystates defined
|
|
//store icon url in "iconXX" where XX is the state to match
|
|
$widget['icon' + item.attributes['value'].value] = item.attributes['icon'].value;
|
|
$widget.state = item.attributes['value'].value; //default state to last defined value to draw icon
|
|
});
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getMemory($widget["systemName"]);
|
|
break;
|
|
case "slipturnouticon" : // added 2022, adapted from indicatorturnouticon
|
|
// no direct link to a JSON/named bean (systemName = id)
|
|
// also used for three way turnouts
|
|
// see java/src/jmri/jmrit/display/SlipTurnoutIcon.java
|
|
// and java/src/jmri/jmrit/display/configurexml/SlipTurnoutIconXml.java
|
|
$widget['turnoutEast'] = $(this).find('turnoutEast').text();
|
|
$widget['turnoutWest'] = $(this).find('turnoutWest').text();
|
|
$widget['name'] = $widget['turnoutEast'] + " " +$widget['turnoutWest'];
|
|
$widget.jsonType = "turnout"; // JSON object type, used to send commands in $handleClick(e)
|
|
$widget['slipicontype'] = $(this).find('turnoutType').text();
|
|
$widget['slipStateEast'] = UNKNOWN;
|
|
$widget['slipStateWest'] = UNKNOWN;
|
|
$widget['slipState'] = UNKNOWN; // combined state
|
|
// set icons
|
|
$widget['icon' + UNKNOWN] = $(this).find('unknown').attr('url');
|
|
$widget['icon' + INCONSISTENT] = $(this).find('inconsistent').attr('url');
|
|
$widget['icon5'] = $(this).find('upperWestToLowerEast').attr('url');
|
|
$widget['icon7'] = $widget['icon' + INCONSISTENT]; // state 7 loaded later where supported
|
|
$widget['icon9'] = $(this).find('lowerWestToLowerEast').attr('url');
|
|
$widget['icon11'] = $(this).find('lowerWestToUpperEast').attr('url');
|
|
|
|
switch ($widget.turnoutType) {
|
|
case "singleSlip" :
|
|
// $widget['singleSlipRoute'] = "lowerWestToLowerEast" or "upperWestToUpperEast"
|
|
if ($widget.singleSlipRoute == "upperWestToUpperEast") {
|
|
$widget['icon7'] = $(this).find('upperWestToUpperEast').attr('url');
|
|
}
|
|
break;
|
|
case "threeWay" :
|
|
// $widget['firstTurnoutExit'] = "upper" or "lower"
|
|
if ($widget.firstTurnoutExit == "lower") { // swap icons7 and 9
|
|
$widget['icon7'] = $widget.icon9;
|
|
$widget['icon9'] = $(this).find('lowerWestToUpperEast').attr('url');
|
|
}
|
|
break;
|
|
case "scissor" :
|
|
$widget['turnoutLowerEast'] = $(this).find('turnoutLowerEast').text();
|
|
$widget['turnoutLowerWest'] = $(this).find('turnoutLowerWest').text();
|
|
if (isDefined($widget.turnoutLowerEast)) {
|
|
$widget['singleCrossOver'] = "false";
|
|
// connect 2 extra turnouts now to prevent extra switch case below, no need to listen
|
|
// jmri.getTurnout($widget['turnoutLowerEast']);
|
|
// jmri.getTurnout($widget['turnoutLowerWest']);
|
|
} else {
|
|
$widget['singleCrossOver'] = "true";
|
|
}
|
|
$widget['icon7'] = $widget.icon5; // UWLE
|
|
$widget['icon5'] = $widget.icon9; // LWLE
|
|
$widget['icon9'] = $widget.icon11; // LWUE
|
|
$widget['icon11'] = $widget['icon' + INCONSISTENT];
|
|
break;
|
|
case "doubleSlip" : // default
|
|
$widget['icon7'] = $(this).find('upperWestToUpperEast').attr('url');
|
|
break;
|
|
}
|
|
|
|
$widget['rotation'] = $(this).find('lowerWestToLowerEast').find('rotation').text() * 1;
|
|
$widget['degrees'] = ($(this).find('lowerWestToLowerEast').attr('degrees') * 1) - ($widget.rotation * 90);
|
|
$widget['scale'] = $(this).find('lowerWestToLowerEast').attr('scale');
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
jmri.getTurnout($widget['turnoutEast']);
|
|
jmri.getTurnout($widget['turnoutWest']);
|
|
|
|
// add turnout to whereUsed array (as $widget.id + 'e')
|
|
if (!($widget.turnoutEast in whereUsed)) { //set where-used for this new turnout
|
|
whereUsed[$widget.turnoutEast] = new Array();
|
|
}
|
|
whereUsed[$widget.turnoutEast][whereUsed[$widget.turnoutEast].length] = $widget.id + "e";
|
|
|
|
// add turnoutB to whereUsed array (as $widget + 'w')
|
|
if (!($widget.turnoutWest in whereUsed)) { //set where-used for this new turnout
|
|
whereUsed[$widget.turnoutWest] = new Array();
|
|
}
|
|
whereUsed[$widget.turnoutWest][whereUsed[$widget.turnoutWest].length] = $widget.id + "w";
|
|
// TODO add the extra 2 turnouts to whereUsed that optionally are part of a scissor?
|
|
break;
|
|
}
|
|
|
|
$preloadWidgetImages($widget); //start loading all images
|
|
$widget['safeName'] = $safeName($widget.name); //add a html-safe version of name
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
$drawIcon($widget); //actually place and position the widget on the panel
|
|
break;
|
|
|
|
case "text" :
|
|
case "input" :
|
|
$widget['styles'] = $getTextCSSFromObj($widget);
|
|
switch ($widget.widgetType) {
|
|
case "audioicon" :
|
|
$widget.jsonType = 'audio'; // JSON object type
|
|
$widget['identity'] = $(this).find('Identity').text();
|
|
audioIconIDs['audioicon:'+$widget['identity']] = $widget; // Ensure the key is a string, not a number
|
|
$widget['sound'] = $(this).attr('sound');
|
|
$widget['onClickOperation'] = $(this).attr('onClickOperation');
|
|
$widget['audio_widget'] = new Audio($widget['sound']);
|
|
$widget['playSoundWhenJmriPlays'] = $(this).attr('playSoundWhenJmriPlays') == "yes";
|
|
$widget['stopSoundWhenJmriStops'] = $(this).attr('stopSoundWhenJmriStops') == "yes";
|
|
$widget.styles['user-select'] = "none";
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
if (!$('#' + $widget.id).hasClass('clickable')) {
|
|
$('#' + $widget.id).addClass("clickable");
|
|
$('#' + $widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
jmri.getAudio($widget.systemName);
|
|
jmri.getAudioIcon($widget['identity']);
|
|
break;
|
|
case "logixngicon" :
|
|
$widget.jsonType = "logixngicon"; // JSON object type
|
|
$widget['identity'] = $(this).find('Identity').text();
|
|
$widget.styles['user-select'] = "none";
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
break;
|
|
case "sensoricon" :
|
|
$widget['name'] = $widget.sensor; //normalize name
|
|
$widget.jsonType = "sensor"; // JSON object type
|
|
//set each state's text
|
|
$widget['text' + UNKNOWN] = $(this).find('unknownText').attr('text');
|
|
$widget['text2'] = $(this).find('activeText').attr('text');
|
|
$widget['text4'] = $(this).find('inactiveText').attr('text');
|
|
$widget['text8'] = $(this).find('inconsistentText').attr('text');
|
|
//set each state's css attribute array (text color, etc.)
|
|
$widget['css' + UNKNOWN] = $getTextCSSFromObj($getObjFromXML($(this).find('unknownText')[0]));
|
|
$widget['css2'] = $getTextCSSFromObj($getObjFromXML($(this).find('activeText')[0]));
|
|
$widget['css4'] = $getTextCSSFromObj($getObjFromXML($(this).find('inactiveText')[0]));
|
|
$widget['css8'] = $getTextCSSFromObj($getObjFromXML($(this).find('inconsistentText')[0]));
|
|
if (isDefined($widget.name) && $widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getSensor($widget["systemName"]);
|
|
break;
|
|
case "locoicon" :
|
|
case "trainicon" :
|
|
//also set the background icon for this one (additional css in .html file)
|
|
$widget['icon' + UNKNOWN] = $(this).find('icon').attr('url');
|
|
$widget.styles['background-image'] = "url('" + $widget['icon' + UNKNOWN] + "')";
|
|
$widget['scale'] = $(this).find('icon').attr('scale');
|
|
if ($widget.scale != 1) {
|
|
$widget.styles['background-size'] = $widget.scale * 100 + "%";
|
|
$widget.styles['line-height'] = $widget.scale * 20 + "px"; //center vertically
|
|
}
|
|
break;
|
|
case "fastclock" :
|
|
jmri.getMemory("IMRATEFACTOR"); //enable updates for fast clock rate
|
|
$widget['name'] = 'IMCURRENTTIME'; // already defined in JMRI
|
|
$widget.jsonType = 'memory';
|
|
$widget.styles['width'] = "166px"; //hard-coded to match original size of clock image
|
|
$widget.styles['height'] = "166px";
|
|
$widget['scale'] = $(this).attr('scale');
|
|
if (isUndefined($widget.level)) {
|
|
$widget['level'] = 10; //if not included in xml
|
|
}
|
|
$widget['text'] = "00:00 AM";
|
|
$widget['state'] = "00:00 AM";
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getMemory($widget["systemName"]);
|
|
break;
|
|
case "reportericon" :
|
|
$widget['name'] = $widget.reporter; //normalize name
|
|
$widget.jsonType = "reporter"; // JSON object type
|
|
$widget['text'] = $widget.reporter; //use name for initial text
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getReporter($widget["systemName"]);
|
|
break;
|
|
case "BlockContentsIcon" :
|
|
$widget['name'] = $widget.systemName; //normalize name (id got stepped on)
|
|
$widget.jsonType = "block"; // JSON object type
|
|
$widget['text'] = $widget.name; //use name for initial text
|
|
$widget['state'] = $widget.name; //use name for initial state as well
|
|
jmri.getBlock($widget["systemName"]);
|
|
break;
|
|
case "blockContentsInputIcon" :
|
|
$widget['name'] = $widget.block; //normalize name
|
|
$widget.jsonType = "block"; // JSON object type
|
|
$widget['text'] = $widget.block; //use name for initial text
|
|
$widget['state'] = $widget.block; //use name for initial state as well
|
|
if (isUndefined($widget.styles.width)) { //set missing width
|
|
if (isDefined($widget.colWidth)) {
|
|
$widget.styles['width'] = $widget.colWidth + "em";
|
|
} else {
|
|
$widget.styles['width'] = "5em";
|
|
}
|
|
}
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getBlock($widget["systemName"]);
|
|
break;
|
|
case "memoryicon" :
|
|
case "memoryInputIcon" :
|
|
case "memoryComboIcon" :
|
|
if ($widget.class.indexOf("MemorySpinnerIcon") >= 0) { //fix for JMRI's bad element naming for this one
|
|
$widget.widgetType = "memorySpinnerIcon";
|
|
$widget.widgetFamily = "input";
|
|
$widget.classes = $widget.classes.replace("memoryicon text", "memorySpinnerIcon input");
|
|
$widget['extraAttributes'] = "type='number' min='0' max='100'";
|
|
}
|
|
$widget['name'] = $widget.memory; //normalize name
|
|
$widget.jsonType = "memory"; // JSON object type
|
|
$widget['text'] = $widget.memory; //use name for initial text
|
|
$widget['state'] = $widget.memory; //use name for initial state as well
|
|
if (isUndefined($widget.styles.width)) { //set missing width
|
|
if (isDefined($widget.colWidth)) {
|
|
$widget.styles['width'] = $widget.colWidth + "em";
|
|
} else {
|
|
$widget.styles['width'] = "5em";
|
|
}
|
|
}
|
|
var items = $(this).find('itemList').children('item');
|
|
$widget['items'] = [];
|
|
items.each(function(i, item) { //get any itemlist defined
|
|
//store item list in items array
|
|
$widget.items[item.attributes['index'].value] = item.textContent;
|
|
});
|
|
if (isUndefined($widget["systemName"]))
|
|
$widget["systemName"] = $widget.name;
|
|
jmri.getMemory($widget["systemName"]);
|
|
break;
|
|
case "linkinglabel" :
|
|
$url = $(this).find('url').text();
|
|
$widget['url'] = $url; //just store url value in widget, for use in click handler
|
|
if ($widget.forcecontroloff != "true") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
break;
|
|
}
|
|
|
|
$widget['safeName'] = $safeName($widget.name);
|
|
switch ($widget['orientation']) { // use orientation instead of degrees if populated
|
|
case "vertical_up" : $widget.degrees = 270;
|
|
case "vertical_down" : $widget.degrees = 90;
|
|
}
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
|
|
var $hoverText = ""; //add html for hoverText (custom tooltip) if populated
|
|
if (isDefined($widget.hoverText)) {
|
|
$hoverText = " title='" + $widget.hoverText + "' alt='" + $widget.hoverText + "' ";
|
|
}
|
|
|
|
if ($widget.widgetFamily=="input") {
|
|
if ($widget.widgetType=="memoryComboIcon") {
|
|
var s = "<select id=" + $widget.id + " class='" + $widget.classes +
|
|
"' value='" + $widget.text + "' " + $widget.extraAttributes + $hoverText + " >";
|
|
$($widget.items).each(function(i, item) {
|
|
s += " <option value='"+ item + "'>" + item + "</option>";
|
|
});
|
|
s +="</select>";
|
|
$("#panel-area").append(s);
|
|
} else {
|
|
$("#panel-area").append("<input id=" + $widget.id + " class='" + $widget.classes +
|
|
"' value='" + $widget.text + "' " + $widget.extraAttributes + $hoverText + " >");
|
|
}
|
|
} else {
|
|
$("#panel-area").append("<div id=" + $widget.id + " class='" + $widget.classes + $hoverText + "'>" +
|
|
$widget.text + "</div>");
|
|
}
|
|
$("#panel-area>#" + $widget.id).css($widget.styles); // apply style array to widget
|
|
$setWidgetPosition($("#panel-area>#" + $widget.id));
|
|
break;
|
|
|
|
case "drawn" :
|
|
if (jmri_logging) {
|
|
log.log("case drawn " + $widget.widgetType);
|
|
$logProperties($widget);
|
|
}
|
|
switch ($widget.widgetType) {
|
|
case "positionablepoint" :
|
|
//log.log("#### Positionable Point ####");
|
|
//just store these points in persistent variable for use when drawing tracksegments and layoutturnouts
|
|
//End bumpers and Connectors use wrong type, so always store as .POS_POINT
|
|
$gPts[$widget.ident + ".POS_POINT"] = $widget;
|
|
break;
|
|
case "layoutblock" :
|
|
$widget['state'] = UNKNOWN; //add a state member for this block
|
|
$widget["blockcolor"] = $widget.trackcolor; //init blockcolor to trackcolor
|
|
//store these blocks in a persistent var
|
|
$gBlks[$widget.systemName] = $widget;
|
|
//log.log("layoutblock:");
|
|
$logProperties($widget);
|
|
//log.log("block[" + $widget.systemName + "].blockcolor: '" + $widget.trackcolor + "'.")
|
|
jmri.getLayoutBlock($widget.systemName);
|
|
break;
|
|
case "layoutturnout" :
|
|
$widget['id'] = $widget.ident;
|
|
$widget['name'] = $widget.turnoutname; //normalize name
|
|
$widget['safeName'] = $safeName($widget.name); //add a html-safe version of name
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
$widget['x'] = $widget.xcen; //normalize x,y
|
|
$widget['y'] = $widget.ycen;
|
|
if (isDefined($widget.name) && ($widget.disabled !== "yes")) {
|
|
$widget.classes += " " + $widget.jsonType + " clickable "; //make it clickable (unless no turnout assigned)
|
|
}
|
|
//set widget occupancy sensor from block to speed affected changes later
|
|
if (isDefined($gBlks[$widget.blockname])) {
|
|
$widget['occupancysensorA'] = $gBlks[$widget.blockname].occupancysensor;
|
|
$widget['occupancystateA'] = $gBlks[$widget.blockname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockbname])) {
|
|
$widget['occupancysensorB'] = $gBlks[$widget.blockbname].occupancysensor;
|
|
$widget['occupancystateB'] = $gBlks[$widget.blockbname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockcname])) {
|
|
$widget['occupancysensorC'] = $gBlks[$widget.blockcname].occupancysensor;
|
|
$widget['occupancystateC'] = $gBlks[$widget.blockcname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockdname])) {
|
|
$widget['occupancysensorD'] = $gBlks[$widget.blockdname].occupancysensor;
|
|
$widget['occupancystateD'] = $gBlks[$widget.blockdname].state;
|
|
}
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
$storeTurnoutPoints($widget); //also store the turnout's 3 end points for other connections
|
|
$drawTurnout($widget); //draw the turnout
|
|
|
|
// add an empty, but clickable, div to the panel and position it over the turnout circle, if control allowed
|
|
if ($gPanel.controlling == "yes") {
|
|
$hoverText = " title='" + $widget.name + "' alt='" + $widget.name + "'";
|
|
$("#panel-area").append("<div id=" + $widget.id + " class='" + $widget.classes + "' " + $hoverText + "></div>");
|
|
var $cr = $gPanel.turnoutcirclesize * SIZE; //turnout circle radius
|
|
var $cd = $cr * 2;
|
|
$("#panel-area>#" + $widget.id).css(
|
|
{
|
|
position: 'absolute',
|
|
left: ($widget.x - $cr) + 'px',
|
|
top: ($widget.y - $cr) + 'px',
|
|
zIndex: 3,
|
|
width: $cd + 'px',
|
|
height: $cd + 'px'
|
|
});
|
|
}
|
|
if (isUndefined($widget["systemName"])) {
|
|
$widget["systemName"] = $widget.name;
|
|
}
|
|
jmri.getTurnout($widget["systemName"]);
|
|
if ($widget["occupancysensorA"])
|
|
jmri.getSensor($widget["occupancysensorA"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorB"])
|
|
jmri.getSensor($widget["occupancysensorB"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorC"])
|
|
jmri.getSensor($widget["occupancysensorC"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorD"])
|
|
jmri.getSensor($widget["occupancysensorD"]); //listen for occupancy changes
|
|
break;
|
|
case 'layoutSlip' :
|
|
$widget['id'] = $widget.ident;
|
|
$widget['name'] = $widget.ident;
|
|
$widget['safeName'] = $safeName($widget.name); //add a html-safe version of name
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
|
|
//save the slip state to turnout state information
|
|
$widget['turnout'] = $(this).find('turnout:first').text();
|
|
$widget['turnoutB'] = $(this).find('turnoutB:first').text();
|
|
$widget['stateA'] = UNKNOWN;
|
|
$widget['stateB'] = UNKNOWN;
|
|
|
|
//log.log("tA: " + $widget.turnout + ", tB: " + $widget.turnoutB);
|
|
|
|
$widget['turnoutA_AC'] = Number($(this).find('states').find('A-C').find('turnout').text());
|
|
$widget['turnoutA_AD'] = Number($(this).find('states').find('A-D').find('turnout').text());
|
|
$widget['turnoutA_BC'] = Number($(this).find('states').find('B-C').find('turnout').text());
|
|
$widget['turnoutA_BD'] = Number($(this).find('states').find('B-D').find('turnout').text());
|
|
|
|
$widget['turnoutB_AC'] = Number($(this).find('states').find('A-C').find('turnoutB').text());
|
|
$widget['turnoutB_AD'] = Number($(this).find('states').find('A-D').find('turnoutB').text());
|
|
$widget['turnoutB_BC'] = Number($(this).find('states').find('B-C').find('turnoutB').text());
|
|
$widget['turnoutB_BD'] = Number($(this).find('states').find('B-D').find('turnoutB').text());
|
|
|
|
// default to this state
|
|
$widget['state'] = UNKNOWN;
|
|
|
|
$widget['x'] = $widget.xcen; //normalize x,y
|
|
$widget['y'] = $widget.ycen;
|
|
|
|
if ((isDefined($widget.turnout) || isDefined($widget.turnoutB))
|
|
&& ($widget.disabled !== "yes")) {
|
|
$widget.classes += " " + $widget.jsonType + " clickable ";
|
|
}
|
|
|
|
//set widget occupancy sensor from block to speed affected changes later
|
|
if (isDefined($gBlks[$widget.blockname])) {
|
|
$widget['occupancysensorA'] = $gBlks[$widget.blockname].occupancysensor;
|
|
$widget['occupancystateA'] = $gBlks[$widget.blockname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockbname])) {
|
|
$widget['occupancysensorB'] = $gBlks[$widget.blockbname].occupancysensor;
|
|
$widget['occupancystateB'] = $gBlks[$widget.blockbname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockcname])) {
|
|
$widget['occupancysensorC'] = $gBlks[$widget.blockcname].occupancysensor;
|
|
$widget['occupancystateC'] = $gBlks[$widget.blockcname].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blockdname])) {
|
|
$widget['occupancysensorD'] = $gBlks[$widget.blockdname].occupancysensor;
|
|
$widget['occupancystateD'] = $gBlks[$widget.blockdname].state;
|
|
}
|
|
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
$storeSlipPoints($widget); //also store the slip's 4 end points for other connections
|
|
$drawSlip($widget); //draw the slip
|
|
|
|
if ($gPanel.controlling == "yes") {
|
|
// convenience variables for points (A, B, C, D)
|
|
var a = $getPoint($widget.ident + SLIP_A);
|
|
var b = $getPoint($widget.ident + SLIP_B);
|
|
var c = $getPoint($widget.ident + SLIP_C);
|
|
var d = $getPoint($widget.ident + SLIP_D);
|
|
|
|
var $cr = $gPanel.turnoutcirclesize * SIZE; //turnout circle radius
|
|
var $cd = $cr * 2; //turnout circle diameter
|
|
|
|
// center
|
|
var cen = [$widget.xcen, $widget.ycen];
|
|
// left center
|
|
var lcen = $point_midpoint(a, b);
|
|
var ldelta = $point_subtract(cen, lcen);
|
|
|
|
// left fraction
|
|
var lf = $cr / Math.hypot(ldelta[0], ldelta[1]);
|
|
// left circle
|
|
var lcc = $point_lerp(cen, lcen, lf);
|
|
|
|
//add an empty, but clickable, div to the panel and position it over the left turnout circle
|
|
$hoverText = " title='" + $widget.turnout + "' alt='" + $widget.turnout + "'";
|
|
$("#panel-area").append("<div id=" + $widget.id + "l class='" + $widget.classes + "' " + $hoverText + "></div>");
|
|
$("#panel-area>#" + $widget.id + "l").css(
|
|
{position: 'absolute', left: (lcc[0] - $cr) + 'px', top: (lcc[1] - $cr) + 'px', zIndex: 3,
|
|
width: $cd + 'px', height: $cd + 'px'});
|
|
// right center
|
|
var rcen = $point_midpoint(c, d);
|
|
var rdelta = $point_subtract(cen, rcen);
|
|
// right fraction
|
|
var rf = $cr / Math.hypot(rdelta[0], rdelta[1]);
|
|
// right circle
|
|
var rcc = $point_lerp(cen, rcen, rf);
|
|
|
|
//add an empty, but clickable, div to the panel and position it over the right turnout circle
|
|
$hoverText = " title='" + $widget.turnoutB + "' alt='" + $widget.turnoutB + "'";
|
|
$("#panel-area").append("<div id=" + $widget.id + "r class='" + $widget.classes + "' " + $hoverText + "></div>");
|
|
$("#panel-area>#" + $widget.id + "r").css(
|
|
{position: 'absolute', left: (rcc[0] - $cr) + 'px', top: (rcc[1] - $cr) + 'px', zIndex: 3,
|
|
width: $cd + 'px', height: $cd + 'px'});
|
|
}
|
|
|
|
// set up notifications (?)
|
|
jmri.getTurnout($widget["turnout"]);
|
|
jmri.getTurnout($widget["turnoutB"]);
|
|
|
|
if ($widget["occupancysensorA"])
|
|
jmri.getSensor($widget["occupancysensorA"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorB"])
|
|
jmri.getSensor($widget["occupancysensorB"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorC"])
|
|
jmri.getSensor($widget["occupancysensorC"]); //listen for occupancy changes
|
|
if ($widget["occupancysensorD"])
|
|
jmri.getSensor($widget["occupancysensorD"]); //listen for occupancy changes
|
|
|
|
// NOTE: turnout & turnoutB may appear to be swapped here however this is intentional
|
|
// (since the left turnout controls the right points and vice-versa) and we want
|
|
// the slip circles to toggle the points (not the turnout) on the corresponding side.
|
|
//
|
|
// note: the <div> areas above have their titles & alts turnouts swapped (left <-> right) also
|
|
|
|
// add turnout to whereUsed array (as $widget.id + 'r')
|
|
if (!($widget.turnout in whereUsed)) { //set where-used for this new turnout
|
|
whereUsed[$widget.turnout] = new Array();
|
|
}
|
|
whereUsed[$widget.turnout][whereUsed[$widget.turnout].length] = $widget.id + "r";
|
|
|
|
// add turnoutB to whereUsed array (as $widget + 'l')
|
|
if (!($widget.turnoutB in whereUsed)) { //set where-used for this new turnout
|
|
whereUsed[$widget.turnoutB] = new Array();
|
|
}
|
|
whereUsed[$widget.turnoutB][whereUsed[$widget.turnoutB].length] = $widget.id + "l";
|
|
break;
|
|
case "tracksegment" :
|
|
//log.log("#### Track Segment ####");
|
|
//set widget occupancy sensor from block to speed affected changes later
|
|
if (isDefined($gBlks[$widget.blockname])) {
|
|
$widget['occupancysensor'] = $gBlks[$widget.blockname].occupancysensor;
|
|
$widget['occupancystate'] = $gBlks[$widget.blockname].state;
|
|
}
|
|
//store this widget in persistent array, with ident as key
|
|
$widget['id'] = $widget.ident;
|
|
$gWidgets[$widget.id] = $widget;
|
|
|
|
if ($widget.bezier == "yes") {
|
|
$widget['controlpoints'] = $(this).find('controlpoint');
|
|
}
|
|
|
|
// find decorations
|
|
var $decorations = $(this).find('decorations');
|
|
|
|
//copy arrow decoration
|
|
//<arrow style="4" end="stop" direction="out" color="#000000" linewidth="4" length="16" gap="1" />
|
|
var $arrow = $decorations.find('arrow');
|
|
var $arrowstyle = $arrow.attr('style');
|
|
if (isDefined($arrowstyle)) {
|
|
if (Number($arrowstyle) > 0) {
|
|
$widget['arrow'] = new ArrowDecoration($widget, $arrow);
|
|
}
|
|
}
|
|
|
|
//copy bridge decoration
|
|
//<bridge side="both" end="both" color="#000000" linewidth="1" approachwidth="8" deckwidth="10" />
|
|
var $bridge = $decorations.find('bridge');
|
|
var $bridgeside = $bridge.attr('side');
|
|
if (isDefined($bridgeside)) {
|
|
$widget['bridge'] = new BridgeDecoration($widget, $bridge);
|
|
}
|
|
|
|
//copy bumper decoration
|
|
//<bumper end="stop" color="#000000" linewidth="2" length="16" />
|
|
var $bumper = $decorations.find('bumper');
|
|
var $bumperend = $bumper.attr('end');
|
|
if (isDefined($bumperend)) {
|
|
$widget['bumper'] = new BumperDecoration($widget, $bumper);
|
|
}
|
|
|
|
//copy tunnel decoration
|
|
//<tunnel side="right" end="both" color="#FF00FF" linewidth="2" entrancewidth="16" floorwidth="12" />
|
|
var $tunnel = $decorations.find('tunnel');
|
|
var $tunnelside = $tunnel.attr('side');
|
|
if (isDefined($tunnelside)) {
|
|
$widget['tunnel'] = new TunnelDecoration($widget, $tunnel);
|
|
}
|
|
|
|
if ($widget["occupancysensor"])
|
|
jmri.getSensor($widget["occupancysensor"]); //listen for occupancy changes
|
|
|
|
//draw the tracksegment
|
|
$drawTrackSegment($widget);
|
|
break;
|
|
case "levelxing" :
|
|
$widget['x'] = $widget.xcen; //normalize x,y
|
|
$widget['y'] = $widget.ycen;
|
|
//set widget occupancy sensor from block to speed affected changes later
|
|
//TODO: handle BD block
|
|
if (isDefined($gBlks[$widget.blocknameac])) {
|
|
$widget['occupancysensorAC'] = $gBlks[$widget.blocknameac].occupancysensor;
|
|
$widget['occupancystateAC'] = $gBlks[$widget.blocknameac].state;
|
|
}
|
|
if (isDefined($gBlks[$widget.blocknamebd])) {
|
|
$widget['occupancysensorBD'] = $gBlks[$widget.blocknamebd].occupancysensor;
|
|
$widget['occupancystateBD'] = $gBlks[$widget.blocknamebd].state;
|
|
}
|
|
//store widget in persistent array
|
|
//$widget['id'] = $widget.ident;
|
|
$gWidgets[$widget.id] = $widget;
|
|
//also store the xing's 4 end points for other connections
|
|
$storeLevelXingPoints($widget);
|
|
//draw the xing
|
|
$drawLevelXing($widget);
|
|
|
|
//listen for occupancy changes
|
|
if ($widget["occupancysensorAC"])
|
|
jmri.getSensor($widget["occupancysensorAC"]);
|
|
if ($widget["occupancysensorBD"])
|
|
jmri.getSensor($widget["occupancysensorBD"]);
|
|
break;
|
|
case "layoutturntable" :
|
|
//log.log("#### Layout Turntable ####");
|
|
$widget['id'] = $widget.ident;
|
|
$widget['name'] = $widget.ident;
|
|
$widget['safeName'] = $safeName($widget.name); //add a html-safe version of name
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
$gWidgets[$widget.id] = $widget; //store widget in persistent array
|
|
|
|
if ($widget.turnoutControlled == "yes") {
|
|
$widget.classes += " " + $widget.jsonType + " clickable"; //make it clickable
|
|
if (!$('#' + $widget.id).hasClass('clickable')) {
|
|
$('#' + $widget.id).addClass("clickable");
|
|
$('#' + $widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
}
|
|
|
|
//get the center
|
|
var $txcen = $widget.xcen * 1;
|
|
var $tycen = $widget.ycen * 1;
|
|
|
|
var $tr = $widget.radius * 1; //turntable circle radius
|
|
var $td = $tr * 2;
|
|
|
|
var $cr = $gPanel.turnoutcirclesize * SIZE; //turnout circle radius
|
|
var $cd = $cr * 2;
|
|
|
|
//loop thru raytracks, calc and store end of ray point for each
|
|
$widget['raytracks'] = $(this).find('raytrack');
|
|
$widget.raytracks.each(function(i, item) {
|
|
$logProperties(item);
|
|
//note:the 50 offset is due to TrackSegment.java TURNTABLE_RAY_OFFSET
|
|
//var rayID = $widget.ident + "." + (50 + item.attributes.index.value * 1);
|
|
var rayID = $widget.ident + ".TURNTABLE_RAY_" + (item.attributes.index.value * 1);
|
|
var $t = {ident:rayID};
|
|
var $angle = $toRadians(item.attributes.angle.value);
|
|
$t['x'] = $txcen + (($tr + $cr) * Math.sin($angle));
|
|
$t['y'] = $tycen - (($tr + $cr) * Math.cos($angle));
|
|
$gPts[$t.ident] = $t; //store the endpoint of this ray
|
|
|
|
if (isDefined(item.attributes.turnout)) {
|
|
var turnout = item.attributes.turnout.value;
|
|
var state = item.attributes.turnoutstate.value;
|
|
//add an empty, but clickable, div to the panel and position it over the turnout circle, if control allowed
|
|
if ($gPanel.controlling == "yes") {
|
|
$("#panel-area").append("<div " +
|
|
"id='" + rayID + "' " +
|
|
"class='" + $widget.classes + "' " +
|
|
"style='position:absolute;" +
|
|
"left:" + ($t.x - $cr) + "px;" +
|
|
"top: " + ($t.y - $cr) + "px;" +
|
|
"z-index: 3;" +
|
|
"width:" + $cd + "px;" +
|
|
"height:" + $cd + "px;' " +
|
|
"title='" + turnout + "(" + state + ")' " +
|
|
"alt='" + turnout + "'" +
|
|
"></div>");
|
|
}
|
|
//set up notifications
|
|
jmri.getTurnout(turnout);
|
|
|
|
// add turnout to whereUsed array (as $widget + 'r')
|
|
if (!(turnout in whereUsed)) { //set where-used for this new turnout
|
|
whereUsed[turnout] = new Array();
|
|
}
|
|
whereUsed[turnout].push(rayID);
|
|
}
|
|
});
|
|
|
|
//draw the turntable
|
|
$drawTurntable($widget);
|
|
break;
|
|
case "backgroundColor": // set background color of the window
|
|
$("body").css({"background-color": "rgb(" + $widget.red + "," + $widget.green + "," + $widget.blue + ")"});
|
|
break;
|
|
case "layoutShape" :
|
|
//log.log("#### Layout Shape ####");
|
|
//store this widget in persistent array, with ident as key
|
|
$widget['id'] = $widget.ident;
|
|
$gWidgets[$widget.id] = $widget;
|
|
|
|
$widget['points'] = $(this).find('point');
|
|
|
|
//draw the LayoutShape
|
|
$drawLayoutShape($widget);
|
|
break;
|
|
case "positionableRectangle" : //just like RoundRect except cornerRadius set to 0;
|
|
case "positionableRoundRect" :
|
|
//log.log("#### positionableRoundRect ####");
|
|
//copy and reformat some attributes from children into object
|
|
$widget['width'] = $(this).find('size').attr('width');
|
|
$widget['height'] = $(this).find('size').attr('height');
|
|
$widget['cornerRadius'] = $(this).find('size').attr('cornerRadius');
|
|
if (isUndefined($widget['cornerRadius'])) {
|
|
$widget['cornerRadius'] = 0; //default to no corner
|
|
}
|
|
lc = $(this).find('lineColor');
|
|
$widget['lineColor'] =
|
|
'rgba('+lc.attr('red')+','+lc.attr('green')+',' +
|
|
lc.attr('blue')+','+lc.attr('alpha')/256+')';
|
|
fc = $(this).find('fillColor');
|
|
$widget['fillColor'] =
|
|
'rgba('+fc.attr('red')+','+fc.attr('green')+',' +
|
|
fc.attr('blue')+','+fc.attr('alpha')/256+')';
|
|
//store this widget in persistent array, with ident as key
|
|
$widget['id'] = $widget.ident;
|
|
$gWidgets[$widget.id] = $widget;
|
|
//draw the positionableRoundRect
|
|
$drawPositionableRoundRect($widget);
|
|
break;
|
|
case "positionableCircle" : //identical except circle has size radius,
|
|
case "positionableEllipse" : //ellipse has size width height
|
|
//copy and reformat some attributes from children into object
|
|
$widget['radius'] = ($(this).find('size').attr('radius'));
|
|
if (isDefined($widget['radius'])) {
|
|
$widget['height'] = $widget.radius; //use radius for height if populated
|
|
$widget['width'] = $widget.radius; //use radius for width if populated
|
|
} else {
|
|
$widget['height'] = ($(this).find('size').attr('height'));
|
|
$widget['width'] = ($(this).find('size').attr('width'));
|
|
}
|
|
lc = $(this).find('lineColor');
|
|
$widget['lineColor'] =
|
|
'rgba('+lc.attr('red')+','+lc.attr('green')+',' +
|
|
lc.attr('blue')+','+lc.attr('alpha')/256+')';
|
|
fc = $(this).find('fillColor');
|
|
$widget['fillColor'] =
|
|
'rgba('+fc.attr('red')+','+fc.attr('green')+',' +
|
|
fc.attr('blue')+','+fc.attr('alpha')/256+')';
|
|
//store this widget in persistent array, with ident as key
|
|
$widget['id'] = $widget.ident;
|
|
$gWidgets[$widget.id] = $widget;
|
|
//draw the positionableEllipse
|
|
$drawPositionableEllipse($widget);
|
|
break;
|
|
default:
|
|
log.warn("unknown $widget.widgetType: " + $widget.widgetType + ".");
|
|
break;
|
|
}
|
|
break;
|
|
|
|
case "switch" : // Switchboard BeanSwitches
|
|
// they have no x,y
|
|
$widget['styles'] = {}; // clear built-in styles
|
|
$widget['name'] = $widget.label; // normalize name from label
|
|
$widget['text'] = $widget.label; // use label as initial button text too
|
|
$widget.styles['width'] = $swWidth + "px";
|
|
$widget.styles['height'] = $swHeight + "px";
|
|
// colors, values from Editor via SwitchboardServlet
|
|
$widget['swColor' + UNKNOWN] = 'LightGray'; // unknown
|
|
$widget['swColor2'] = $activeColor; // active = red
|
|
$widget['swColor4'] = $inactiveColor; // inactive = green
|
|
$widget['swColor8'] = 'Gray'; // inconsistent
|
|
if ($widget.connected == "true") {
|
|
switch ($widget['type']) {
|
|
case "T" :
|
|
$widget.jsonType = "turnout"; // JSON object type
|
|
jmri.getTurnout($widget["systemName"]); // switch follows state on layout
|
|
break;
|
|
case "S" :
|
|
$widget.jsonType = "sensor"; // JSON object type
|
|
jmri.getSensor($widget["systemName"]);
|
|
break;
|
|
case "L":
|
|
$widget.jsonType = "light"; // JSON object type
|
|
jmri.getLight($widget["systemName"]);
|
|
break;
|
|
// more types of NamedBeans?
|
|
default :
|
|
break; // skip
|
|
}
|
|
}
|
|
var $canvas = "";
|
|
switch ($widget.shape) { // set each state's text
|
|
case "symbol" :
|
|
case "icon" :
|
|
case "drawing" :
|
|
// settings for symbol/icon
|
|
$widget['text' + UNKNOWN] = $widget.text; // show state changes in color, not in label?
|
|
$widget['text2'] = $(this).find('activeText').attr('text');
|
|
$widget['text4'] = $(this).find('inactiveText').attr('text');
|
|
$widget['text8'] = $(this).find('inconsistentText').attr('text');
|
|
// add a canvas to the text label, reduce canvas HxW to fit inside the div
|
|
$canvas = "<canvas id=" + $widget.id + "c class='bscanvas' width='" + ($swWidth - 12) + "px' height='" +
|
|
($swHeight - 12) + "px' style='border:1px solid white;'></canvas>"; // to insert later
|
|
break;
|
|
case "button" : // mimick java switchboard buttons
|
|
default :
|
|
// add some html to show user name on line 2 when shape is button
|
|
$widget['text' + UNKNOWN] = getSwitchButtonLabel($(this).find('unknownText').attr('text'), $widget.username);
|
|
$widget['text2'] = getSwitchButtonLabel($(this).find('activeText').attr('text'), $widget.username);
|
|
$widget['text4'] = getSwitchButtonLabel($(this).find('inactiveText').attr('text'), $widget.username);
|
|
$widget['text8'] = getSwitchButtonLabel($(this).find('inconsistentText').attr('text'), $widget.username);
|
|
}
|
|
// common settings for all beanswitche shapes
|
|
$widget.classes += " " + $widget.shape + " ";
|
|
$widget['state'] = UNKNOWN; // use UNKNOWN for initial state
|
|
|
|
$widget.styles['color'] = $widget.text['color']; // use jmri color
|
|
// other CSS properties set in css, class .beanswitch
|
|
|
|
if ($widget.connected == "true") {
|
|
$widget['text'] = $widget.text0; // add UNKNOWN state to label of connected switches
|
|
$widget.styles['border-color'] = "black"; //$widget['swColor' + UNKNOWN];
|
|
$widget.classes += " " + $widget.jsonType + " clickable connected";
|
|
}
|
|
|
|
$gWidgets[$widget.id] = $widget; // store widget in persistent array
|
|
|
|
if ($widget.shape == "button") {
|
|
// "button", put only the text (system + user name) element on the page
|
|
$("#panel-area").append("<div id=" + $widget.id + " class='" + $widget.classes +
|
|
"'>" + $widget.text + "</div>");
|
|
} else {
|
|
// add a local canvas
|
|
$("#panel-area").append("<div id=" + $widget.id + " class='" + $widget.classes +
|
|
"' role='img'>" + $canvas + "</div>");
|
|
}
|
|
$("#panel-area>#" + $widget.id).css($widget.styles); // apply style array to widget
|
|
// beanswitch setup ready
|
|
break;
|
|
|
|
default:
|
|
//log any unsupported widgets, listing childnodes as info
|
|
$("div#logArea").append("<br />Unsupported: " + $widget.widgetType + ":");
|
|
$(this.attributes).each(function() {
|
|
$("div#logArea").append(" " + this.name);
|
|
});
|
|
$("div#logArea").append(" | ");
|
|
$(this.childNodes).each(function() {
|
|
$("div#logArea").append(" " + this.nodeName);
|
|
});
|
|
break;
|
|
}
|
|
// add widget.id to whereUsed array to support updates from layout
|
|
if ($widget.systemName) {
|
|
if (!($widget.systemName in whereUsed)) {
|
|
whereUsed[$widget.systemName] = new Array();
|
|
}
|
|
whereUsed[$widget.systemName][whereUsed[$widget.systemName].length] = $widget.id;
|
|
}
|
|
if ($gWidgets[$widget.id]) {
|
|
// store LayoutEditor occupancy sensors where-used
|
|
if ($widget.occupancysensor != "none") {
|
|
$store_occupancysensor($widget.id, $widget.occupancysensor);
|
|
}
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorA);
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorB);
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorC);
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorD);
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorAC);
|
|
$store_occupancysensor($widget.id, $widget.occupancysensorBD);
|
|
}
|
|
} //end of function
|
|
); //end of each
|
|
|
|
//only enable click events if panel is marked to allow control
|
|
if ($gPanel.controlling == "yes") {
|
|
//hook up mouseup state toggle function to non-momentary clickable widgets, except for multisensor and linkinglabel
|
|
$('.clickable:not(.momentary):not(.multisensoricon):not(.linkinglabel)').bind(UPEVENT, $handleClick);
|
|
|
|
//hook up mouseup state change function to multisensor (special handling)
|
|
$('.clickable.multisensoricon').bind('click', $handleMultiClick);
|
|
|
|
//hook up mouseup function to linkinglabel (special handling)
|
|
$('.clickable.linkinglabel').bind(UPEVENT, $handleLinkingLabelClick);
|
|
|
|
//momentary widgets always go active on mousedown, and inactive on mouseup, current state is ignored
|
|
$('.clickable.momentary').bind(DOWNEVENT, function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault(); //prevent double-firing (touch + click)
|
|
sendElementChange($gWidgets[this.id].jsonType, $gWidgets[this.id].systemName, ACTIVE); //send active on down
|
|
}).bind(UPEVENT, function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault(); //prevent double-firing (touch + click)
|
|
sendElementChange($gWidgets[this.id].jsonType, $gWidgets[this.id].systemName, INACTIVE); //send inactive on up
|
|
});
|
|
|
|
//check for update keys and update when needed
|
|
$('input.input').bind(KEYUP, $handleInputKeyUp);
|
|
//update when leaving the input
|
|
$('input.input').bind(BLUR, $handleInputBlur);
|
|
//and update when select input is changed
|
|
$('select.input').bind(CHANGE, $handleInputBlur);
|
|
|
|
// Switchboard All Off/All On buttons
|
|
$(".lightswitch#allOff").bind(UPEVENT, $handleClickAllOff); // all Lights Off
|
|
$(".lightswitch#allOn").bind(UPEVENT, $handleClickAllOn); // all Lights On
|
|
}
|
|
|
|
$drawAllDrawnWidgets(); // draw all the drawn widgets once more, to address some bidirectional dependencies in the xml
|
|
$drawAllSwitchIcons(); // draw icon first time
|
|
|
|
$("#activity-alert").addClass("hidden").removeClass("show");
|
|
} // end of processPanelXML
|
|
|
|
|
|
/******************************************************************
|
|
* ======= Click Handling functions =======
|
|
*/
|
|
|
|
// perform regular click-handling, bound to click event for clickable, non-momentary widgets, except for multisensor and linkinglabel.
|
|
function $handleClick(e) {
|
|
if (jmri_logging) {
|
|
log.log("$handleClick()");
|
|
}
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault(); //prevent double-firing (touch + click)
|
|
|
|
// if (null == $widget) {
|
|
// $logProperties(this);
|
|
// }
|
|
|
|
// special case for LE layoutSlips
|
|
if (this.className.startsWith('layoutSlip ')) {
|
|
if (this.id.startsWith("SL") && (this.id.endsWith("r") || this.id.endsWith("l"))) {
|
|
var $slipID = this.id.slice(0, -1);
|
|
var $widget = $gWidgets[$slipID];
|
|
|
|
if (this.id.endsWith("l")) {
|
|
$widget["side"] = "left";
|
|
} else if (this.id.endsWith("r")) {
|
|
$widget["side"] = "right";
|
|
}
|
|
if (jmri_logging) {
|
|
log.log("\nlayoutSlip-side:" + $widget.side);
|
|
}
|
|
|
|
// convert current slip state to current turnout states
|
|
var $oldStateA, $oldStateB;
|
|
[$oldStateA, $oldStateB] = [$widget.stateA, $widget.stateB];
|
|
|
|
// determine next slip state
|
|
var $newState = getNextSlipState($widget);
|
|
|
|
if (jmri_logging) {
|
|
log.log("$handleClick:layoutSlip: change state from " +
|
|
slipStateToString($widget.state) + " to " + slipStateToString($newState) + ".");
|
|
}
|
|
|
|
// convert new slip state to new turnout states
|
|
var $newStateA, $newStateB;
|
|
[$newStateA, $newStateB] = getTurnoutStatesForSlipState($widget, $newState);
|
|
|
|
if ($oldStateA != $newStateA) {
|
|
sendElementChange($widget.jsonType, $widget.turnout, $newStateA);
|
|
}
|
|
if ($oldStateB != $newStateB) {
|
|
sendElementChange($widget.jsonType, $widget.turnoutB, $newStateB);
|
|
}
|
|
//jmri_logging = false;
|
|
} else {
|
|
log.warn("$handleClick(e): unknown slip widget " + this.id);
|
|
$logProperties(this);
|
|
}
|
|
// special case for LE layoutTurntable
|
|
} else if (this.className.startsWith('layoutturntable ')) {
|
|
var $rayID = this.id;
|
|
var $turntableID = $rayID.split(".")[0];
|
|
var $widget = $gWidgets[$turntableID];
|
|
$widget.raytracks.each(function(i, item) {
|
|
$logProperties(item);
|
|
//note: offset 50 is due to TrackSegment.java TURNTABLE_RAY_OFFSET
|
|
var rayID = $turntableID + ".TURNTABLE_RAY_" + (item.attributes.index.value * 1);
|
|
if (rayID == $rayID) {
|
|
if (isDefined(item.attributes.turnout)) {
|
|
var turnout = item.attributes.turnout.value;
|
|
var state = item.attributes.turnoutstate.value;
|
|
var $newState = (state == 'thrown') ? THROWN : CLOSED;
|
|
sendElementChange($widget.jsonType, turnout, $newState);
|
|
}
|
|
}
|
|
});
|
|
} else if (this.className.startsWith('slipturnouticon')) {
|
|
// special handling of slipturnouticon, which has (at least) 2 turnouts
|
|
var $widget = $gWidgets[this.id];
|
|
var $newState = $getNextState($widget); // determine next state from current state
|
|
var $turnoutWestNewState = 0;
|
|
var $turnoutEastNewState = 0;
|
|
// we may need to send a command to multiple turnouts
|
|
switch ($newState) {
|
|
case 5 :
|
|
$turnoutWestNewState = CLOSED;
|
|
$turnoutEastNewState = CLOSED;
|
|
break;
|
|
case 7 :
|
|
$turnoutWestNewState = THROWN;
|
|
$turnoutEastNewState = CLOSED;
|
|
break;
|
|
case 9 :
|
|
$turnoutWestNewState = CLOSED;
|
|
$turnoutEastNewState = THROWN;
|
|
break;
|
|
case 11 :
|
|
$turnoutWestNewState = THROWN;
|
|
$turnoutEastNewState = THROWN;
|
|
break;
|
|
}
|
|
sendElementChange($widget.jsonType, $widget.turnoutWest, $turnoutWestNewState);
|
|
sendElementChange($widget.jsonType, $widget.turnoutEast, $turnoutEastNewState);
|
|
if (isDefined($widget.turnoutLowerWest)) {
|
|
sendElementChange($widget.jsonType, $widget.turnoutLowerWest, $turnoutEastNewState); // note: same as turnoutWest
|
|
}
|
|
if (isDefined($widget.turnoutLowerEast)) {
|
|
sendElementChange($widget.jsonType, $widget.turnoutLowerEast, $turnoutWestNewState); // note: same as turnoutEast
|
|
}
|
|
return;
|
|
} else if (this.className.startsWith('audioicon ')) {
|
|
// special handling of audioicon
|
|
var $widget = $gWidgets[this.id];
|
|
switch ($widget['onClickOperation']) {
|
|
case "PlaySoundLocally":
|
|
if ($widget['audio_widget'].paused) { // Sound is stopped
|
|
$widget['audio_widget'].loop = false;
|
|
// $widget['audio_widget'].loop = (playNumLoops == -1);
|
|
$widget['audio_widget'].play();
|
|
} else { // Sound is playing
|
|
$widget['audio_widget'].pause();
|
|
$widget['audio_widget'].currentTime = 0;
|
|
}
|
|
break;
|
|
case "PlaySoundGlobally":
|
|
if ($widget['state'] == 16) { // Sound is stopped
|
|
jmri.setAudio($widget.systemName, "Play");
|
|
} else if ($widget['state'] == 17) { // Sound is playing
|
|
jmri.setAudio($widget.systemName, "Stop");
|
|
}
|
|
break;
|
|
}
|
|
} else if (this.className.startsWith('logixngicon ')) {
|
|
// special handling of logixngicon
|
|
var $widget = $gWidgets[this.id];
|
|
jmri.clickLogixNGIcon($widget['identity']);
|
|
} else {
|
|
var $widget = $gWidgets[this.id];
|
|
var $newState = $getNextState($widget); // determine next state from current state
|
|
sendElementChange($widget.jsonType, $widget.systemName, $newState);
|
|
//also send new state to related turnout
|
|
if (isDefined($widget.turnoutB)) {
|
|
sendElementChange($widget.jsonType, $widget.turnoutB, $newState);
|
|
}
|
|
//used for crossover, LE layoutTurnout type 5
|
|
if (isDefined($widget.secondturnoutname)) {
|
|
//invert 2nd turnout if requested
|
|
if ($widget.secondturnoutinverted == "true") {
|
|
$newState = ($newState == CLOSED ? THROWN : CLOSED);
|
|
}
|
|
sendElementChange($widget.jsonType, $widget.secondturnoutname, $newState);
|
|
}
|
|
}
|
|
}
|
|
|
|
// perform multisensor click-handling, bound to click event for clickable multisensor widgets.
|
|
function $handleMultiClick(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault(); //prevent double-firing (touch + click)
|
|
var $widget = $gWidgets[this.id];
|
|
var clickX = (e.offsetX || e.pageX - $(e.target).offset().left); //get click position on the widget
|
|
var clickY = (e.offsetY || e.pageY - $(e.target).offset().top );
|
|
if (jmri_logging) {
|
|
log.log("handleMultiClick X,Y on WxH: " + clickX + "," + clickY + " on " + this.width + "x" + this.height);
|
|
}
|
|
//increment or decrement based on where the click occurred on image
|
|
var missed = true; //flag if click x,y outside image bounds, indicates we didn't get good values
|
|
var dec = false;
|
|
if ($widget.updown == "true") {
|
|
if (clickY >= 0 && clickY <= this.height) missed = false;
|
|
if (clickY > this.height / 2) dec = true;
|
|
} else {
|
|
if (clickX >= 0 && clickX <= this.width) missed = false;
|
|
if (clickX < this.width / 2) dec = true;
|
|
}
|
|
var displaying = 0;
|
|
for (i in $widget.siblings) { //determine which is currently active
|
|
if ($gWidgets[$widget.siblings[i]].state == ACTIVE) {
|
|
displaying = i; //flag the current active sibling
|
|
}
|
|
}
|
|
var next; //determine which is the next one to be set active (loop around only if click outside object)
|
|
if (dec) {
|
|
next = displaying - 1;
|
|
if (next < 0)
|
|
if (missed)
|
|
next = i;
|
|
else
|
|
next = 0;
|
|
} else {
|
|
next = displaying * 1 + 1;
|
|
if (next > i)
|
|
if (missed)
|
|
next = 0;
|
|
else
|
|
next = i;
|
|
}
|
|
for (i in $widget.siblings) { //loop through siblings and send changes as needed
|
|
if (i == next) {
|
|
if ($gWidgets[$widget.siblings[i]].state != ACTIVE) {
|
|
sendElementChange('sensor', $gWidgets[$widget.siblings[i]].name, ACTIVE); //set next sensor to active and send command to JMRI server
|
|
}
|
|
} else {
|
|
if ($gWidgets[$widget.siblings[i]].state != INACTIVE) {
|
|
sendElementChange('sensor', $gWidgets[$widget.siblings[i]].name, INACTIVE); //set all other siblings to inactive if not already
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//perform click-handling of linkinglabel widgets (3 cases: complete url or frame:<name> where name is a panel or a frame)
|
|
function $handleLinkingLabelClick(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault(); //prevent double-firing (touch + click)
|
|
var $widget = $gWidgets[this.id];
|
|
var $url = $widget.url;
|
|
if ($url.toLowerCase().indexOf("frame:") == 0) {
|
|
$frameName = $url.substring(6); //if "frame" found, remove it
|
|
$frameUrl = $gPanelList[$frameName]; //find panel in panel list
|
|
if (isUndefined($frameUrl)) {
|
|
$url = "/frame/" + $frameName + ".html"; //not in list, open using frameserver
|
|
} else {
|
|
$url = "/panel/" + $frameUrl; //format for panel server
|
|
}
|
|
}
|
|
window.location = $url; //navigate to the specified url
|
|
}
|
|
|
|
function $handleClickAllOn(e) { // click button on Switchboards
|
|
//loop thru widgets, setting each connected light to CLOSED/2, when button on top of switchboard was clicked
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
if ($widget.connected == "true") {
|
|
sendElementChange($widget.jsonType, $widget.systemName, CLOSED);
|
|
}
|
|
});
|
|
};
|
|
|
|
function $handleClickAllOff(e) { // click button on Switchboards
|
|
//loop thru widgets, setting each connected light to THROWN/4, when button on top of switchboard was clicked
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
if ($widget.connected == "true") {
|
|
sendElementChange($widget.jsonType, $widget.systemName, THROWN);
|
|
}
|
|
});
|
|
};
|
|
|
|
//update memory or restore the value when certain keystrokes occur
|
|
function $handleInputKeyUp(e) {
|
|
if (e.keyCode == 13 || e.keyCode == 9) { //on [Enter] or [Tab], send new value to server
|
|
var newVal = $(this).val();
|
|
var $id = $(this).attr('id');
|
|
var $widget = $gWidgets[$id];
|
|
jmri.setObject($widget.jsonType, $widget.systemName, newVal);
|
|
} else if (e.keyCode == 27) { //on [Escape], restore the previous value
|
|
var oldValue = $(this).data("oldValue")
|
|
$(this).val(oldValue);
|
|
}
|
|
};
|
|
|
|
//update memory when the focus is lost
|
|
function $handleInputBlur(e) {
|
|
var newVal = $(this).val();
|
|
var $id = $(this).attr('id');
|
|
var $widget = $gWidgets[$id];
|
|
jmri.setObject($widget.jsonType, $widget.systemName, newVal);
|
|
};
|
|
|
|
// End of Click Handling functions
|
|
|
|
|
|
/******************************************************************
|
|
* ======= (Control) Panel functions =======
|
|
*/
|
|
|
|
//draw an icon-type widget (pass in widget)
|
|
function $drawIcon($widget) {
|
|
var $hoverText = "";
|
|
if (isDefined($widget.hoverText)) {
|
|
$hoverText = " title='" + $widget.hoverText + "' alt='" + $widget.hoverText + "'";
|
|
}
|
|
if ($hoverText == "" && isDefined($widget.name)) { // if name available, use it as hover text if still blank
|
|
$hoverText = " title='" + $widget.name + "' alt='" + $widget.name + "'";
|
|
}
|
|
|
|
// additional naming for indicator*icon widgets to reflect occupancy
|
|
$indicator = "";
|
|
$state = "";
|
|
if ($widget.widgetType == "indicatortrackicon" || $widget.widgetType == "indicatorturnouticon") { // check oblock status
|
|
$indicator = ((($widget.occupancystate & 0x2) == 0x2) ? "Occupied" : ""); // look only at bit 2, compare to $redrawIcon()
|
|
Ostate = ($widget.occupancystate & 0xF0); // binary 11110000, discards (in)active bits in occupancy which we already used above
|
|
$state = Ostate | $widget.state; // adds Turnout state back in to fetch TO state = position icon
|
|
// $hoverText is updated for OUT_OF_SERVICE on redraw only
|
|
} else if ($widget.widgetType == "slipturnouticon") { // check turnout states, compare to $redrawIcon()
|
|
$state = $widget.slipState; // combined Turnouts state
|
|
} else {
|
|
$indicator = ($widget.occupancysensor && $widget.occupancystate == ACTIVE ? "Occupied" : "");
|
|
$state = $widget.state;
|
|
}
|
|
|
|
// add the image to the panel area, with appropriate css classes and id (skip any unsupported)
|
|
if (isDefined($widget['icon' + $indicator + $state])) {
|
|
$imgHtml = "<img id=" + $widget.id + " class='" + $widget.classes +
|
|
"' src='" + $widget["icon" + $indicator + $state].replaceAll("'","'") + "' " + $hoverText + "/>"
|
|
|
|
$("#panel-area").append($imgHtml); // put the html in the panel
|
|
|
|
$("#panel-area>#" + $widget.id).css($widget.styles); // apply style array to widget
|
|
|
|
// add overlay text if specified, one layer above, and copy attributes (except background-color)
|
|
if (isDefined($widget.text)) {
|
|
$("#panel-area").append("<div id=" + $widget.id + "-overlay class='overlay'>" + $widget.text + "</div>");
|
|
ovlCSS = {position:'absolute', left: $widget.x + 'px', top: $widget.y + 'px', zIndex: $widget.level*1 + 1, pointerEvents: 'none'};
|
|
$.extend(ovlCSS, $widget.styles); // append the styles from the widget
|
|
delete ovlCSS['background-color']; // clear the background color
|
|
if (isDefined($widget.fixedHeight)) {
|
|
$.extend(ovlCSS, {lineHeight: $widget.fixedHeight + 'px'}); // add lineheight for vertical centering (if set)
|
|
}
|
|
$("#panel-area>#" + $widget.id + "-overlay").css(ovlCSS);
|
|
}
|
|
} else {
|
|
log.error("ERROR: image not defined for " + $widget.widgetType + " " + $widget.id + ", iconstate=" + $state + " ["+$indicator+"] (icon" + $indicator + $state + ")");
|
|
}
|
|
$setWidgetPosition($("#panel-area #" + $widget.id));
|
|
}
|
|
|
|
//draw the analog clock (pass in widget), called on each update of clock
|
|
function $drawClock($widget) {
|
|
var $fs = $widget.scale * 100; // scale percentage, used for text
|
|
var $fcr = $gWidgets['IMRATEFACTOR'].state * 1; // get the fast clock rate factor from its widget
|
|
var $h = "";
|
|
$h += "<div class='clocktext' style='font-size:" + $fs + "%;' >" + $widget.state + "<br />" + $fcr + ":1</div>"; //add the text
|
|
$h += "<img class='clockface' src='/web/images/clockface.png' />"; //add the clock face
|
|
$h += "<img class='clockhourhand' src='/web/images/clockhourhand.png' />"; //add the hour hand
|
|
$h += "<img class='clockminutehand' src='/web/images/clockminutehand.png' />"; //add the minute hand
|
|
$("#panel-area>#" + $widget.id).html($h); //set the html for the widget
|
|
|
|
var hours = $widget.state.split(':')[0]; //extract hours from format "H:MM AM"
|
|
var mins = $widget.state.split(':')[1].split(' ')[0]; //extract minutes
|
|
var hdegree = hours * 30 + (mins / 2);
|
|
var hrotate = "rotate(" + hdegree + "deg)";
|
|
$("div.fastclock>img.clockhourhand").css({"transform": hrotate}); //set rotation for hour hand
|
|
var mdegree = mins * 6;
|
|
var mrotate = "rotate(" + mdegree + "deg)";
|
|
$("div.fastclock>img.clockminutehand").css({"transform": mrotate}); //set rotation for minute hand
|
|
}
|
|
|
|
// end of Control Panel functions
|
|
|
|
|
|
//build and return CSS array from attributes passed in
|
|
var $getTextCSSFromObj = function($widget) {
|
|
var $retCSS = {};
|
|
$retCSS['color'] = ''; //only clear attributes
|
|
$retCSS['background-color'] = '';
|
|
if (isDefined($widget.red)) {
|
|
$retCSS['color'] = "rgb(" + $widget.red + "," + $widget.green + "," + $widget.blue + ") ";
|
|
}
|
|
//check for new hasBackground element, ignore background colors unless set to yes
|
|
if (isDefined($widget.hasBackground) && $widget.hasBackground == "yes") {
|
|
$retCSS['background-color'] = "rgb(" + $widget.redBack + "," + $widget.greenBack + "," + $widget.blueBack + ") ";
|
|
}
|
|
if (isUndefined($widget.hasBackground) && isDefined($widget.redBack)) {
|
|
$retCSS['background-color'] = "rgb(" + $widget.redBack + "," + $widget.greenBack + "," + $widget.blueBack + ") ";
|
|
}
|
|
if (isDefined($widget.size)) {
|
|
$retCSS['font-size'] = $widget.size + "px ";
|
|
}
|
|
if (isDefined($widget.fontFamily)) {
|
|
$retCSS['font-family'] = $widget.fontFamily;
|
|
}
|
|
if (isDefined($widget.margin)) {
|
|
$retCSS['padding'] = $widget.margin + "px ";
|
|
}
|
|
if (isDefined($widget.borderSize)) {
|
|
$retCSS['border-width'] = $widget.borderSize + "px ";
|
|
}
|
|
if (isDefined($widget.redBorder)) {
|
|
$retCSS['border-color'] = "rgb(" + $widget.redBorder + "," + $widget.greenBorder + "," + $widget.blueBorder + ") ";
|
|
$retCSS['border-style'] = 'solid';
|
|
}
|
|
if (isDefined($widget.fixedWidth)) {
|
|
$retCSS['width'] = $widget.fixedWidth + "px ";
|
|
}
|
|
if (isDefined($widget.fixedHeight)) {
|
|
$retCSS['height'] = $widget.fixedHeight + "px ";
|
|
}
|
|
if (isDefined($widget.justification)) {
|
|
if ($widget.justification == "centre") {
|
|
$retCSS['text-align'] = "center";
|
|
} else {
|
|
$retCSS['text-align'] = $widget.justification;
|
|
}
|
|
}
|
|
if (isDefined($widget.style)) {
|
|
switch ($widget.style) { //set font based on style attrib from xml
|
|
case "1":
|
|
$retCSS['font-weight'] = 'bold';
|
|
break;
|
|
case "2":
|
|
$retCSS['font-style'] = 'italic';
|
|
break;
|
|
case "3":
|
|
$retCSS['font-weight'] = 'bold';
|
|
$retCSS['font-style'] = 'italic';
|
|
break;
|
|
}
|
|
}
|
|
|
|
return $retCSS;
|
|
};
|
|
|
|
//get width of an html element by wrapping a copy in a div, then getting width of div
|
|
function $getElementWidth($e) {
|
|
o = $e.clone();
|
|
o.wrap('<div></div>').css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden'}).appendTo($('body'));
|
|
w = o.width();
|
|
o.remove();
|
|
return w;
|
|
}
|
|
|
|
//place widget in correct position, rotation, z-index and scale. (pass in dom element, to simplify calling from e.load())
|
|
var $setWidgetPosition = function(e) {
|
|
|
|
var $id = e.attr('id');
|
|
var $widget = $gWidgets[$id]; // look up the widget and get its panel properties
|
|
|
|
if (isDefined($widget) && isDefined(e[0])) {
|
|
//don't bother if widget not found (never called for beanswitch)
|
|
var $height = 0;
|
|
var $width = 0;
|
|
// use html5 original sizes if available
|
|
if (isDefined(e[0].naturalHeight)) {
|
|
$height = e[0].naturalHeight * $widget.scale;
|
|
} else {
|
|
$height = e.height() * $widget.scale;
|
|
}
|
|
if (isDefined(e[0].naturalWidth)) {
|
|
$width = e[0].naturalWidth * $widget.scale;
|
|
} else {
|
|
$width = e.width() * $widget.scale;
|
|
}
|
|
if ($widget.widgetFamily == "text") { //special handling to get width of free-floating text
|
|
$width = $getElementWidth(e) * $widget.scale;
|
|
}
|
|
|
|
// calculate x and y adjustment needed to keep upper left of bounding box in the same spot
|
|
// adapted to match JMRI's NamedIcon.rotate(). Note: transform-origin set in .css file
|
|
var tx = 0;
|
|
var ty = 0;
|
|
|
|
if ($height > 0 && ($widget.degrees !== 0 || $widget.scale != 1)) { // only calc offset if needed
|
|
|
|
var $rad = $toRadians($widget.degrees);
|
|
|
|
if (0 <= $widget.degrees && $widget.degrees < 90
|
|
|| -360 < $widget.degrees && $widget.degrees <= -270) {
|
|
tx = $height * Math.sin($rad);
|
|
ty = 0.0;
|
|
} else if (90 <= $widget.degrees && $widget.degrees < 180
|
|
|| -270 < $widget.degrees && $widget.degrees <= -180) {
|
|
tx = $height * Math.sin($rad) - $width * Math.cos($rad);
|
|
ty = -$height * Math.cos($rad);
|
|
} else if (180 <= $widget.degrees && $widget.degrees < 270
|
|
|| -180 < $widget.degrees && $widget.degrees <= -90) {
|
|
tx = -$width * Math.cos($rad);
|
|
ty = -$width * Math.sin($rad) - $height * Math.cos($rad);
|
|
} else /* if (270<=$widget.degrees && $widget.degrees<360) */{
|
|
tx = 0.0;
|
|
ty = -$width * Math.sin($rad);
|
|
}
|
|
}
|
|
// position widget to adjusted position, set z-index, then set rotation
|
|
e.css({
|
|
position : 'absolute',
|
|
left : (parseInt($widget.x) + tx) + 'px',
|
|
top : (parseInt($widget.y) + ty) + 'px',
|
|
zIndex : $widget.level
|
|
});
|
|
if ($widget.degrees !== 0) {
|
|
var $rot = "rotate(" + $widget.degrees + "deg)";
|
|
e.css({
|
|
"transform" : $rot
|
|
});
|
|
}
|
|
// set new height and width if scale specified
|
|
if ($widget.scale != 1 && $height > 0) {
|
|
e.css({
|
|
height : $height + 'px',
|
|
width : $width + 'px'
|
|
});
|
|
}
|
|
// if this is an image that's rotated or scaled, set callback to
|
|
// reposition on every icon load, as the icons can be different sizes.
|
|
if (e.is("img") && ($widget.degrees !== 0 || $widget.scale != 1.0)) {
|
|
e.unbind('load');
|
|
e.load(function() {
|
|
$setWidgetPosition($(this));
|
|
});
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
// reDraw an icon-based widget to reflect changes to state or occupancy
|
|
var $reDrawIcon = function($widget) {
|
|
// additional naming for indicator*icon widgets to reflect occupancy, error presendence status was already filtered in updateOblocks()
|
|
$indicator = "";
|
|
if ($widget.widgetType == "indicatortrackicon" || $widget.widgetType == "indicatorturnouticon") { // check oblock status
|
|
$indicator = ((($widget.occupancystate & 0x2) == 0x2) ? "Occupied" : ""); // look only at bit 2, compare to $drawIcon()
|
|
Ostate = ($widget.occupancystate & 0xF0); // binary + 11110000, discards (in)active occupancy info in bits 1-4
|
|
$state = (Ostate | $widget.state); // adds Turnout state back in to insert TO state = position icon
|
|
if (isDefined($widget.name)) { // intended for indicatorturnouts to show they are not clickable
|
|
$('img#' + $widget.id).attr('title', $widget.name + ((Ostate & 0x40) == OUT_OF_SERVICE ? " (off)" : ""));
|
|
// explain why not clickable TODO I18N tooltip for OOS + ERROR
|
|
}
|
|
} else if ($widget.widgetType == "slipturnouticon") {
|
|
$state = $widget.slipState; // widget is not a bean, fetch combined state as stored in widget, calculated from 2 turnout states
|
|
//log.log("STI $redrawIcon state: " + $state);
|
|
// adjust some states, copied from Display/SlipTurnoutIcon#displayState(int state), not required?
|
|
// if ($widget.turnoutType == "scissor") {
|
|
// switch ($state) {
|
|
// case 5 :
|
|
// log.log("########### STI $redrawIcon state: " + $state + " set to 0 for Scissor");
|
|
// $state = 0;
|
|
// break;
|
|
// }
|
|
// }
|
|
} else { // default handling
|
|
$indicator = ($widget.occupancysensor && $widget.occupancystate == ACTIVE ? "Occupied" : "");
|
|
$state = $widget.state;
|
|
}
|
|
// set image src to requested state's image, if defined
|
|
if ($widget['icon' + $indicator + $state]) {
|
|
$('img#' + $widget.id).attr('src', $widget['icon' + $indicator + ($state + "")]);
|
|
} else if ($widget['defaulticon']) { // if state icon not found, use default icon if provided
|
|
$('img#' + $widget.id).attr('src', $widget['defaulticon']);
|
|
} else {
|
|
log.error("ERROR: image not defined for " + $widget.widgetType + " " + $widget.id + ", state=" + $widget.state + ", status=" + $widget.occupancystate + ", iconstate=" + $state + " ["+$indicator+"] (icon" + $indicator + $state + ")");
|
|
}
|
|
};
|
|
|
|
// set new value for widget, showing proper icon, return widgets changed
|
|
var $setWidgetState = function($id, $newState, data) {
|
|
var $widget = $gWidgets[$id];
|
|
|
|
// if undefined widget this must be a LE slip or a PE slipTurnoutIcon
|
|
if (isUndefined($widget)) {
|
|
// does it have "e" or "w" suffix? it's a slipTurnoutIcon
|
|
if ($id.endsWith("e") || $id.endsWith("w")) {
|
|
if (jmri_logging) {
|
|
log.log("$setWidgetState STI " + $id + " to state " + $newState);
|
|
}
|
|
// remove suffix
|
|
var $slipID = $id.slice(0, -1);
|
|
// get the slip widget
|
|
$widget = $gWidgets[$slipID];
|
|
// determine combined slipState for icon0/5/7/9/11
|
|
$turnoutName = data.name; // systemName
|
|
//log.log("change from turnout: " + $turnoutName + " to state: " + $newState);
|
|
if (($turnoutName == $widget.turnoutEast) || (data.userName == $widget.turnoutEast)) {
|
|
// east turnout // also compare source by userName
|
|
$widget.slipStateEast = $newState; // store turnout state e
|
|
} else if (($turnoutName == $widget.turnoutWest) || (data.userName == $widget.turnoutWest)) {
|
|
// west turnout // also compare source by userName
|
|
$widget.slipStateWest = $newState; // store turnout state w
|
|
}
|
|
// handle changes from the 2 extra turnouts, if defined (they mirror the basic e and w turnouts)
|
|
// only CCCC, TCCT and CTTC are valid turnout state combinations (for slipState 5, 7 and 9 respectively)
|
|
if (($turnoutName == $widget.turnoutLowerWest) || (data.userName == $widget.turnoutLowerWest)) {
|
|
// scissor additional west turnout, handle like turnoutEast
|
|
if (($newState == CLOSED) && ((($widget.slipStateWest == CLOSED) && ($widget.slipStateEast == CLOSED)) ||
|
|
(($widget.slipStateWest == THROWN) && ($widget.slipStateEast == CLOSED)))) {
|
|
$widget.slipStateEast = $newState;
|
|
} else if (($newState == THROWN) && ($widget.slipStateWest == CLOSED) && ($widget.slipStateEast == THROWN)) {
|
|
$widget.slipStateEast = $newState;
|
|
} else {
|
|
$newState = INCONSISTENT;
|
|
}
|
|
}
|
|
if (($turnoutName == $widget.turnoutLowerEast) || (data.userName == $widget.turnoutLowerEast)) {
|
|
// scissor additional east turnout, handle like turnoutWest
|
|
if (($newState == CLOSED) && ((($widget.slipStateWest == CLOSED) && ($widget.slipStateEast == CLOSED)) ||
|
|
(($widget.slipStateWest == CLOSED) && ($widget.slipStateEast == THROWN)))) {
|
|
$widget.slipStateWest = $newState;
|
|
} else if (($newState == THROWN) && ($widget.slipStateWest == THROWN) && ($widget.slipStateEast == CLOSED)) {
|
|
$widget.slipStateWest = $newState;
|
|
} else {
|
|
$newState = INCONSISTENT;
|
|
}
|
|
}
|
|
|
|
if ($widget.slipStateWest == UNKNOWN || $widget.slipStateEast == UNKNOWN) {
|
|
$widget.slipState = UNKNOWN; // incomplete inputs, set state UNKNOWN
|
|
} else if ($newState == INCONSISTENT) {
|
|
$widget.slipState = INCONSISTENT;
|
|
} else {
|
|
// fix some special sequences, as in java/src/jmri/jmrit/display/SlipTurnoutIcon.java#displayState(state)
|
|
if ($widget.turnoutType == "threeWay" && $widget.slipStateWest == THROWN && $widget.slipStateEast == CLOSED) {
|
|
// ignore slipStateEast CLOSED (slipstate 7), use slipstate 11 instead, like Panel SlipTurnoutIcon.java
|
|
$widget.slipState = (THROWN << 1) | ($widget.slipStateWest >> 1) | 0x01;
|
|
} else {
|
|
$widget.slipState = ($widget.slipStateEast << 1) | ($widget.slipStateWest >> 1) | 0x01;
|
|
}
|
|
}
|
|
log.log("#### $setWidgetState(slipturnouticon " + $slipID + ", " + $widget.slipState +
|
|
"); (was " + $widget.slipState + ")");
|
|
$newState = $widget.slipState;
|
|
// is overwritten by $newState at end of method, so temp only to pass next if-statement and redraw correctly
|
|
$id = $slipID;
|
|
|
|
// does it have "l" or "r" suffix? it's an LE slip
|
|
} else if ($id.endsWith("l") || $id.endsWith("r")) {
|
|
if (jmri_logging) {
|
|
log.log("\n#### INFO: clicked slip " + $id + " to state " + $newState);
|
|
}
|
|
|
|
// remove suffix
|
|
var $slipID = $id.slice(0, -1);
|
|
// get the slip widget
|
|
$widget = $gWidgets[$slipID];
|
|
|
|
// convert current slip state to current turnout states
|
|
var $stateA, $stateB;
|
|
//[$stateA, $stateB] = getTurnoutStatesForSlip($widget);
|
|
//[$stateA, $stateB] = [$widget.turnout.state, $widget.turnoutB.state];
|
|
[$stateA, $stateB] = [$widget.stateA, $widget.stateB];
|
|
$widget.state = getSlipStateForTurnoutStates($widget, $stateA, $stateB);
|
|
if (jmri_logging) {
|
|
log.log("#### Slip " + $widget.name +
|
|
" before: " + slipStateToString($widget.state) +
|
|
", stateA: " + turnoutStateToString($stateA) +
|
|
", stateB: " + turnoutStateToString($stateB));
|
|
}
|
|
|
|
// change appropriate turnout state
|
|
if ($id.endsWith("r")) {
|
|
if ($stateA != $newState) {
|
|
if (jmri_logging) {
|
|
log.log("#### Changed r slip " + $widget.name +
|
|
" $stateA from " + turnoutStateToString($stateA) +
|
|
" to " + turnoutStateToString($newState));
|
|
}
|
|
$stateA = $newState;
|
|
$widget.stateA = $stateA;
|
|
}
|
|
} else if ($id.endsWith("l")) {
|
|
if ($stateB != $newState) {
|
|
if (jmri_logging) {
|
|
log.log("#### Changed l slip " + $widget.name +
|
|
" $stateB from " + turnoutStateToString($stateB) +
|
|
" to " + turnoutStateToString($newState));
|
|
}
|
|
$stateB = $newState;
|
|
$widget.stateB = $stateB;
|
|
}
|
|
}
|
|
|
|
// turn turnout states back into slip state
|
|
$newState = getSlipStateForTurnoutStates($widget, $stateA, $stateB);
|
|
if (jmri_logging) {
|
|
log.log("#### Slip " + $widget.name +
|
|
" after: " + slipStateToString($newState) +
|
|
", stateA: " + turnoutStateToString($stateA) +
|
|
", stateB: " + turnoutStateToString($stateB));
|
|
}
|
|
|
|
if ($widget.state != $newState) {
|
|
if (jmri_logging) {
|
|
log.log("#### Changing slip " + $widget.name + " from " + slipStateToString($widget.state) +
|
|
" to " + slipStateToString($newState));
|
|
}
|
|
}
|
|
//jmri_logging = false;
|
|
|
|
// set $id to slip id
|
|
$id = $slipID;
|
|
} else if ($id.startsWith("TUR")) {
|
|
//log.log("$setWidgetState(" + $id + ", " + $newState + ", " + data + ")");
|
|
$logProperties(data);
|
|
|
|
var turntableID = $id.split(".")[0];
|
|
$widget = $gWidgets[turntableID];
|
|
$widget['activeRayID'] = $id;
|
|
$widget['activeRayTurnout'] = data.name;
|
|
$widget['activeRayState'] = turnoutStateToString($newState);
|
|
$drawTurntable($widget);
|
|
return;
|
|
} else {
|
|
if (jmri_logging) {
|
|
log.log("$setWidgetState unknown $id: '" + $id + "'.");
|
|
}
|
|
return;
|
|
}
|
|
} else if ($widget.widgetType == 'layoutSlip') {
|
|
// JMRI doesn't send slip states, it sends slip turnout states
|
|
// so ignore this (incorrect) slip state change
|
|
if (jmri_logging) {
|
|
log.log("#### $setWidgetState(slip " + $id + ", " + slipStateToString($newState) +
|
|
"); (was " + slipStateToString($widget.state) + ")");
|
|
}
|
|
return;
|
|
}
|
|
|
|
if ($widget.state !== $newState) { // don't bother if already this value
|
|
if (jmri_logging) {
|
|
log.log("JMRI changed " + $id + " (" + $widget.jsonType + " " + $widget.name + ") from state '" + $widget.state + "' to '" + $newState + "'.");
|
|
}
|
|
if (data.type == "sensor" && ($widget.widgetType == "indicatortrackicon" || $widget.widgetType == "indicatortrackicon")) {
|
|
$widget.occupancystate = $newState;
|
|
} else { // standard handling of icon widgets
|
|
$widget.state = $newState;
|
|
}
|
|
// override the state with idTag's "name" in a very specific circumstance
|
|
if (($widget.jsonType == "memory" || $widget.jsonType == "block" || $widget.jsonType == "reporter" ) &&
|
|
$widget.widgetFamily == "icon" && data.value !== null && data.value.type == "idTag") {
|
|
$widget.state = data.value.data.name;
|
|
}
|
|
|
|
switch ($widget.widgetFamily) {
|
|
case "icon" :
|
|
if ($widget.widgetType == "indicatortrackicon" || $widget.widgetType == "indicatortrackicon") {
|
|
if ($widget.occupancysensor != "none") {
|
|
$widget.occupancystate = $newState;
|
|
//console.log("SET widget " + $widget.id + " to state=" + $newState);
|
|
} else if ($widget.occupancyblock != "none") { // expected for turnout
|
|
// if defined, follow the occupancyblock and ignore any sensors, don't set widget.state (used for turnout state)
|
|
// only pick up the turnout state change, bits 0-4
|
|
$widget.state = ($newState & 0xF) ;
|
|
//console.log("WARNING UNEXPECTED ITOI widget=" + $widget.id + " to state=" + $newState); // TODO clean up
|
|
}
|
|
}
|
|
$reDrawIcon($widget);
|
|
break;
|
|
case "input" :
|
|
$('#' + $id).val($newState); //update the input
|
|
$('#' + $id).data("oldValue", $newState); //save the current value if needed for [Escape]
|
|
break;
|
|
case "text" :
|
|
if ($widget.jsonType == "memory" || $widget.jsonType == "block" || $widget.jsonType == "reporter" ) {
|
|
if ($widget.widgetType == "fastclock") {
|
|
$drawClock($widget);
|
|
} else { // set memory/block/reporter text or html to new value from server, clearing "null"
|
|
if ($newState == null) {
|
|
$('div#' + $id).text("");
|
|
} else if ($newState.startsWith("<html>")) {
|
|
$('div#' + $id).html($newState);
|
|
} else {
|
|
$('div#' + $id).text($newState);
|
|
}
|
|
}
|
|
} else {
|
|
if (isDefined($widget['text' + $newState])) {
|
|
$('div#' + $id).text($widget['text' + $newState]); // set text to new state's text
|
|
}
|
|
if (isDefined($widget['css' + $newState])) {
|
|
$('div#' + $id).css($widget['css' + $newState]); // set css to new state's css
|
|
}
|
|
}
|
|
break;
|
|
case "drawn" :
|
|
if ($widget.widgetType == "layoutturnout") {
|
|
$drawTurnout($widget);
|
|
} else if ($widget.widgetType == 'layoutSlip') {
|
|
$drawSlip($widget);
|
|
}
|
|
break;
|
|
case "switch" : // Switchboard
|
|
if ($widget.widgetType == "beanswitch" && isDefined($widget['shape'])) {
|
|
if ($widget.shape == "button") { // update div css
|
|
$('div#' + $id).text($widget['text' + $newState]); // set text to new state's text
|
|
$('div#' + $id).css({"background-color": $widget['swColor' + $newState]});
|
|
} else { // icon, symbol, slider (drawing) are directly drawn on canvas
|
|
$widget.text = $widget['text' + $newState]; // set text in Widget to new state's text
|
|
$drawWidgetSymbol($id, $newState);
|
|
} // for newly created items, reload web page to activate json binding
|
|
}
|
|
break;
|
|
}
|
|
$gWidgets[$id].state = $newState; // update the persistent widget to the new state
|
|
}
|
|
};
|
|
|
|
//return a unique ID # when called
|
|
var $gUnique = function() {
|
|
if (isUndefined($gUnique.id)) {
|
|
$gUnique.id = 0;
|
|
}
|
|
$gUnique.id++;
|
|
return $gUnique.id;
|
|
};
|
|
|
|
//clean up a name, for example to use as an id
|
|
var $safeName = function($name) {
|
|
if (isUndefined($name)) {
|
|
return "unique-" + $gUnique();
|
|
} else {
|
|
return $name.replace(/:/g, "_").replace(/ /g, "_").replace(/%20/g, "_");
|
|
}
|
|
};
|
|
|
|
//send request for state change
|
|
var sendElementChange = function(type, name, state) {
|
|
//log.log("Sending JMRI " + type + " '" + name + "' state '" + state + "'.");
|
|
jmri.setObject(type, name, state);
|
|
};
|
|
|
|
//show unexpected ajax errors
|
|
$(document).ajaxError(function(event, xhr, opt, exception) {
|
|
if (xhr.statusText != "abort" && xhr.status != 0) {
|
|
var $msg = "AJAX Error requesting " + opt.url + ", status= " + xhr.status + " " + xhr.statusText;
|
|
$('div#messageText').text($msg);
|
|
$("#activity-alert").addClass("show").removeClass("hidden");
|
|
$('dvi#workingMessage').position({within: "window"});
|
|
log.log($msg);
|
|
return;
|
|
}
|
|
if (xhr.statusText == "timeout") {
|
|
var $msg = "AJAX timeout " + opt.url + ", status= " + xhr.status + " " + xhr.statusText + " resending list....";
|
|
log.log($msg);
|
|
// TODO: need to recover somehow
|
|
}
|
|
});
|
|
|
|
//clear out whitespace from xml, function adapted from
|
|
//http://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery/3103269#3103269
|
|
jQuery.fn.xmlClean = function() {
|
|
this.contents().filter(function() {
|
|
if (this.nodeType != 3) {
|
|
$(this).xmlClean();
|
|
return false;
|
|
}
|
|
else {
|
|
return !/\S/.test(this.nodeValue);
|
|
}
|
|
}).remove();
|
|
}
|
|
|
|
// handle the toggling (or whatever) of the "next" state for the passed-in widget
|
|
var $getNextState = function($widget) {
|
|
var $nextState = undefined;
|
|
$logProperties($widget);
|
|
|
|
if ($widget.widgetType == 'signalheadicon') { //special case for signalheadicons
|
|
switch ($widget.clickmode * 1) { // logic based on SignalHeadIcon.java
|
|
case 0 :
|
|
switch ($widget.state * 1) { // (* 1 is to insure numeric comparisons)
|
|
case RED:
|
|
case FLASHRED:
|
|
$nextState = YELLOW;
|
|
break;
|
|
case YELLOW:
|
|
case FLASHYELLOW:
|
|
$nextState = GREEN;
|
|
break;
|
|
default: //also catches GREEN and FLASHGREEN
|
|
$nextState = RED;
|
|
break;
|
|
}
|
|
case 1 :
|
|
// TODO: handle lit/unlit toggle
|
|
// getSignalHead().setLit(!getSignalHead().getLit());
|
|
break;
|
|
case 2 :
|
|
// getSignalHead().setHeld(!getSignalHead().getHeld());
|
|
$nextState = ($widget.state * 1 == HELD ? RED : HELD); //toggle between red and held states
|
|
break;
|
|
case 3: // loop through all elements, finding iconX and get "next one", skipping special ones
|
|
var $firstState = undefined;
|
|
var $currentState = undefined;
|
|
for (k in $widget) {
|
|
var s = k.substr(4) * 1; //extract the state from current icon var, insure it is treated as numeric
|
|
//get valid value, name starts with 'icon', but not the HELD or DARK ones
|
|
if (k.indexOf('icon') == 0 && isDefined($widget[k]) && k != 'icon' + HELD && k != 'icon' + DARK) {
|
|
if (isUndefined($firstState))
|
|
$firstState = s; //remember the first state (for last one)
|
|
if (isDefined($currentState) && isUndefined($nextState))
|
|
$nextState = s; //last one was the current, so this one must be next
|
|
if (s == $widget.state)
|
|
$currentState = s;
|
|
// log.log('key: '+k+" first="+$firstState+" current="+$currentState+" next="+$nextState);
|
|
}
|
|
}
|
|
if (isUndefined($nextState))
|
|
$nextState = $firstState; // if still not set, start over
|
|
}
|
|
|
|
} else if ($widget.widgetType == 'signalmasticon') { // special case for signalmasticons
|
|
// loop through all elements, finding iconXXX and get next iconXXX, skipping special ones
|
|
switch ($widget.clickmode * 1) { // logic based on SignalMastIcon.java
|
|
case 0 :
|
|
var $firstState = undefined;
|
|
var $currentState = undefined;
|
|
for (k in $widget) {
|
|
var s = k.substr(4); //extract the state from current icon var
|
|
//look for next icon value, skipping Held, Dark and Unknown
|
|
if (k.indexOf('icon') == 0 && isDefined($widget[k]) && s != 'Held' && s != 'Dark'
|
|
&& s !='Unlit' && s != 'Unknown') {
|
|
if (isUndefined($firstState))
|
|
$firstState = s; // remember the first state (for last one)
|
|
if (isDefined($currentState) && isUndefined($nextState))
|
|
$nextState = s; // last one was the current, so this one must be next
|
|
if (s == $widget.state)
|
|
$currentState = s;
|
|
}
|
|
};
|
|
if (isUndefined($nextState))
|
|
$nextState = $firstState; // if still not set, start over
|
|
break;
|
|
|
|
case 1 :
|
|
//TODO: handle lit/unlit states
|
|
break;
|
|
|
|
case 2 :
|
|
//toggle between stop and held state
|
|
$nextState = ($widget.state == "Held" ? "Stop" : "Held");
|
|
break;
|
|
|
|
};
|
|
|
|
} else if ($widget.widgetType == 'slipturnouticon') {
|
|
// slipturnouticons store the current state in .slipState, not .state
|
|
switch ($widget.turnoutType) { // logic based on java/src/jmri/jmrit/display/SlipTurnoutIcon.java
|
|
case "doubleSlip" :
|
|
$nextState = ($widget.slipState == 11 ? 5 : $widget.slipState + 2);
|
|
break;
|
|
case "singleSlip" :
|
|
if ($widget.singleSlipRoute == "lowerWestToLowerEast") {
|
|
switch ($widget.slipState) {
|
|
case 5 :
|
|
$nextState = 9;
|
|
break;
|
|
case 9 :
|
|
$nextState = 11;
|
|
break;
|
|
case 11 :
|
|
$nextState = 5;
|
|
break;
|
|
}
|
|
} else if ($widget.singleSlipRoute == "upperWestToUpperEast") {
|
|
switch ($widget.slipState) {
|
|
case 5 :
|
|
$nextState = 11;
|
|
break;
|
|
case 7 :
|
|
$nextState = 5;
|
|
break;
|
|
case 11 :
|
|
$nextState = 7;
|
|
break;
|
|
}
|
|
}
|
|
break;
|
|
case "threeWay" :
|
|
if ($widget.firstTurnoutExit == "lower") {
|
|
$nextState = ($widget.slipState == 9 ? 5 : $widget.slipState + 2);
|
|
} else { // $widget.firstTurnoutExit == "upper"
|
|
switch ($widget.slipState) {
|
|
case 5 :
|
|
$nextState = 9;
|
|
break;
|
|
case 9 :
|
|
$nextState = 11;
|
|
break;
|
|
case 11 :
|
|
$nextState = 5;
|
|
break;
|
|
}
|
|
}
|
|
break;
|
|
case "scissor" :
|
|
$nextState = ($widget.slipState == 9 ? 5 : $widget.slipState + 2);
|
|
// State 11 not allowed for a scissor
|
|
// does not provide 5 after 7 as it would require extra logic
|
|
$nextState = ($widget.slipState == 9 ? 5 : $widget.slipState + 2);
|
|
break;
|
|
};
|
|
|
|
} else { // default: start with INACTIVE, then toggle to ACTIVE and back (same for turnout states: 2 <> 4)
|
|
$nextState = ($widget.state == ACTIVE ? INACTIVE : ACTIVE);
|
|
}
|
|
|
|
if (isUndefined($nextState))
|
|
$nextState = $widget.state; //default to no change
|
|
return $nextState;
|
|
};
|
|
|
|
// preload all images referred to by the widget
|
|
var $preloadWidgetImages = function($widget) {
|
|
for (k in $widget) {
|
|
if (k.indexOf('icon') == 0 && isDefined($widget[k]) && $widget[k] !== "yes") {
|
|
//if attribute names starts with 'icon', it's an image, so preload it
|
|
$("<img src='" + $widget[k] + "'/>");
|
|
}
|
|
}
|
|
};
|
|
|
|
// determine widget "family" for broadly grouping behaviors
|
|
// note: not-yet-supported widgets are commented out here so as to return undefined
|
|
var $getWidgetFamily = function($widget, $element) {
|
|
|
|
if (($widget.widgetType == "positionablelabel" || $widget.widgetType == "linkinglabel"
|
|
|| $widget.widgetType == "audioicon" || $widget.widgetType == "logixngicon")
|
|
&& isDefined($widget.text)) {
|
|
return "text"; //special case to distinguish text vs. icon labels
|
|
}
|
|
if ($widget.widgetType == "sensoricon" && $widget.icon == "no") {
|
|
return "text"; //special case to distinguish text vs. icon labels
|
|
}
|
|
if ($widget.widgetType == "memoryicon" && $($element).find('memorystate').length == 0) {
|
|
return "text"; //if no memorystate icons, treat as text
|
|
}
|
|
switch ($widget.widgetType) {
|
|
case "locoicon" :
|
|
case "trainicon" :
|
|
case "fastclock" :
|
|
case "BlockContentsIcon" :
|
|
case "reportericon" :
|
|
return "text";
|
|
break;
|
|
case "memorySpinnerIcon" :
|
|
case "memoryComboIcon" :
|
|
case "memoryInputIcon" :
|
|
case "blockContentsInputIcon" :
|
|
return "input";
|
|
break;
|
|
case "positionablelabel" :
|
|
case "audioicon" :
|
|
case "logixngicon" :
|
|
case "linkinglabel" :
|
|
case "turnouticon" :
|
|
case "outputindicator" :
|
|
case "sensoricon" :
|
|
case "LightIcon" :
|
|
case "multisensoricon" :
|
|
case "signalheadicon" :
|
|
case "signalmasticon" :
|
|
case "indicatortrackicon" :
|
|
case "indicatorturnouticon" :
|
|
case "memoryicon" :
|
|
case "slipturnouticon" :
|
|
return "icon";
|
|
break;
|
|
case 'layoutSlip' :
|
|
case "layoutturnout" :
|
|
case "tracksegment" :
|
|
case "positionablepoint" :
|
|
case "backgroundColor" :
|
|
case "layoutblock" :
|
|
case "levelxing" :
|
|
case "layoutturntable" :
|
|
case "layoutShape" :
|
|
case "positionableRectangle" :
|
|
case "positionableRoundRect" :
|
|
case "positionableCircle" :
|
|
case "positionableEllipse" :
|
|
return "drawn";
|
|
break;
|
|
case "beanswitch" :
|
|
return "switch";
|
|
break;
|
|
}
|
|
log.log("unhandled widget type of '" + $widget.widgetType +"' id = "+$widget.id);
|
|
return; //unrecognized widget returns undefined
|
|
};
|
|
|
|
function listPanels(name) {
|
|
$.ajax({
|
|
url: "/panel/?format=json",
|
|
data: {},
|
|
success: function(data, textStatus, jqXHR) {
|
|
if (data.length !== 0) {
|
|
$.each(data, function(index, value) {
|
|
$gPanelList[value.data.userName] = value.data.name;
|
|
});
|
|
}
|
|
if (name === null || typeof (panelName) === undefined) {
|
|
if (data.length !== 0) {
|
|
$("#panel-list").empty();
|
|
$("#activity-alert").addClass("hidden").removeClass("show");
|
|
$("#panel-list").addClass("show").removeClass("hidden");
|
|
$.each(data, function(index, value) {
|
|
$("#panel-list").append("<div class=\"col-sm-6 col-md-4 col-lg-3\"><div class=\"thumbnail\"><a href=\"/panel/" + value.data.name + "\"><div class=\"thumbnail-image\"><img src=\"/panel/" + value.data.name + "?format=png\" style=\"width: 100%;\"></div><div class=\"caption\">" + value.data.userName + "</div></a></div></div>");
|
|
// (12 / col-lg-#) % index + 1
|
|
if (4 % (index + 1)) {
|
|
$("#panel-list").append("<div class=\"clearfix visible-lg\"></div>");
|
|
}
|
|
// (12 / col-md-#) % index + 1
|
|
if (3 % (index + 1)) {
|
|
$("#panel-list").append("<div class=\"clearfix visible-md\"></div>");
|
|
}
|
|
// (12 / col-sm-#) % index + 1
|
|
if (2 % (index + 1)) {
|
|
$("#panel-list").append("<div class=\"clearfix visible-sm\"></div>");
|
|
}
|
|
});
|
|
// resizeThumbnails(); // sometimes gets .thumbnail sizes too small under image. TODO Fix it
|
|
} else {
|
|
$("#activity-alert").addClass("hidden").removeClass("show");
|
|
$("#warning-no-panels").addClass("show").removeClass("hidden");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function resizeThumbnails() {
|
|
tallest = 0;
|
|
$(".thumbnail-image").each(function() {
|
|
thisHeight = $("img", this).height();
|
|
if (thisHeight > tallest) {
|
|
tallest = thisHeight;
|
|
}
|
|
});
|
|
$(".thumbnail-image").each(function() {
|
|
$(this).height(tallest);
|
|
});
|
|
}
|
|
|
|
$(window).resize(function() {
|
|
resizeThumbnails();
|
|
});
|
|
|
|
//-----------------------------------------javascript processing starts here (main) ---------------------------------------------
|
|
$(document).ready(function() {
|
|
// get panel name if passed as a parameter
|
|
var panelName = getParameterByName("name");
|
|
// get panel name if part of the path
|
|
if (panelName === null || typeof (panelName) === undefined) {
|
|
var path = $(location).attr('pathname');
|
|
path = path.split("/");
|
|
if (path.length > 3) {
|
|
panelName = path[path.length - 2] + "/" + path[path.length - 1];
|
|
}
|
|
}
|
|
// setup the functional menu items
|
|
$("#navbar-panel-reload > a").attr("href", location.href);
|
|
$("#navbar-panel-xml > a").attr("href", location.pathname + "?format=xml");
|
|
// show panel thumbnails if no panel name
|
|
listPanels(panelName);
|
|
if (panelName === null || typeof (panelName) === undefined) {
|
|
$("#panel-list").addClass("show").removeClass("hidden");
|
|
$("#panel-area").addClass("hidden").removeClass("show");
|
|
// hide the Show XML menu when listing panels
|
|
$("#navbar-panel-xml").addClass("hidden").removeClass("show");
|
|
} else {
|
|
// note: the functions and parameter names must match exactly those in web/js/jquery.jmri.js
|
|
// see for example jmri/server/json/turnout/turnout-server.json
|
|
jmri = $.JMRI({
|
|
didReconnect: function() {
|
|
// if a reconnect is triggered, reload the page - it is the
|
|
// simplest method to refresh every object in the panel
|
|
log.log("Reloading at reconnect");
|
|
location.reload(false);
|
|
},
|
|
audio: function(name, state, data) {
|
|
$.each(whereUsed[name], function(index, widgetId) {
|
|
$widget = $gWidgets[widgetId];
|
|
$widget['state'] = state;
|
|
|
|
if (state == 16 && $widget['stopSoundWhenJmriStops']) { // Sound is stopped
|
|
$widget['audio_widget'].pause();
|
|
$widget['audio_widget'].currentTime = 0;
|
|
} else if (state == 17 && $widget['playSoundWhenJmriPlays']) { // Sound is playing
|
|
$widget['audio_widget'].currentTime = 0;
|
|
$widget['audio_widget'].loop = (data.playNumLoops == -1);
|
|
$widget['audio_widget'].play();
|
|
}
|
|
});
|
|
},
|
|
audioicon: function(identity, command, playNumLoops) {
|
|
$widget = audioIconIDs['audioicon:'+identity];
|
|
if (command == "Play") {
|
|
$widget['audio_widget'].loop = (playNumLoops == -1);
|
|
$widget['audio_widget'].play();
|
|
} else if (command == "Stop") {
|
|
$widget['audio_widget'].pause();
|
|
$widget['audio_widget'].currentTime = 0;
|
|
}
|
|
},
|
|
light: function(name, state, data) {
|
|
updateWidgets(name, state, data);
|
|
},
|
|
block: function(name, value, data) {
|
|
//console.log("HEARD BLOCK " + name + " value=" + value);
|
|
if (value !== null) {
|
|
if (value.type == "idTag") {
|
|
value = value.data.userName; // for idTags, use the value in userName instead
|
|
} else if (value.type == "reporter") {
|
|
value = value.data.value; // for reporters, use the value in data instead
|
|
} else if (value.type == "rosterEntry") {
|
|
if (value.data.icon !== null) {
|
|
value = "<html><img src='" + value.data.icon + "'></html>"; // for rosterEntries, create an image tag instead
|
|
} else {
|
|
value = value.data.name; // if roster icon not set, just show the name
|
|
}
|
|
}
|
|
}
|
|
updateWidgets(name, value, data);
|
|
},
|
|
oblock: function(name, status, data) { // data contains data.status (Allocated, Occupied,... not state)
|
|
//console.log("HEARD JSON OBLOCK " + name + " status=" + status + " (" + data.status + ")");
|
|
if (data.status !== null) {
|
|
updateOblocks(name, data.status); // only for indicator(turnout)trackicon widgets
|
|
}
|
|
},
|
|
layoutBlock: function(name, value, data) {
|
|
setBlockColor(name, data.blockColor);
|
|
},
|
|
memory: function(name, value, data) {
|
|
if (value !== null) {
|
|
//console.log("MEMORY " + name + " value=" + value + " data=" + data);
|
|
if (value.type == "idTag") {
|
|
value = value.data.userName; // for idTags, use the value in userName instead
|
|
} else if (value.type == "reporter"){
|
|
value = value.data.value; // for reporters, use the value in data instead
|
|
} else if (value.type == "rosterEntry") {
|
|
if (value.data.icon !== null) {
|
|
value = "<html><img src='" + value.data.icon + "'></html>"; // for rosterEntries, create an image tag instead
|
|
} else {
|
|
value = value.data.name; // if roster icon not set, just show the name
|
|
}
|
|
}
|
|
}
|
|
updateWidgets(name, value, data);
|
|
},
|
|
reporter: function(name, value, data) {
|
|
//console.log("REPORTER " + name + " value=" + value + " data=" + data);
|
|
updateWidgets(name, value, data);
|
|
},
|
|
route: function(name, state, data) {
|
|
updateWidgets(name, state, data);
|
|
},
|
|
sensor: function(name, state, data) {
|
|
updateOccupancy(name, state, data);
|
|
//console.log("Sensor " + name + " state=" + state);
|
|
updateWidgets(name, state, data);
|
|
},
|
|
signalHead: function(name, state, data) {
|
|
updateWidgets(name, state, data);
|
|
},
|
|
signalMast: function(name, state, data) {
|
|
updateWidgets(name, state, data);
|
|
},
|
|
turnout: function(name, state, data) {
|
|
//console.log("Turnout " + name + " state=" + state);
|
|
updateWidgets(name, state, data);
|
|
}
|
|
});
|
|
$("#panel-list").addClass("hidden").removeClass("show");
|
|
$("#panel-area").addClass("show").removeClass("hidden");
|
|
|
|
// include name of panel in page title. Will be updated to userName later
|
|
setTitle("Loading " + panelName + "...");
|
|
|
|
//get updates to fast clock rate
|
|
getRateFactor();
|
|
|
|
// request actual xml of panel, and process it on return
|
|
// uses setTimeout simply to not block other JavaScript since
|
|
// requestPanelXML has a long timeout
|
|
setTimeout(function() {
|
|
requestPanelXML(panelName);
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
//------------------------------------------- end of main -------------------------------------------
|
|
|
|
// Add Widget to store fastclock rate
|
|
function getRateFactor() {
|
|
$widget = new Array();
|
|
$widget.jsonType = "memory";
|
|
$widget['name'] = "IMRATEFACTOR"; // already defined in JMRI
|
|
$widget['id'] = $widget['name'];
|
|
$widget['safeName'] = $widget['name'];
|
|
$widget['systemName'] = $widget['name'];
|
|
$widget['state'] = "1.0";
|
|
$gWidgets[$widget.id] = $widget;
|
|
if (!($widget.systemName in whereUsed)) { //set where-used for this new memory
|
|
whereUsed[$widget.systemName] = new Array();
|
|
}
|
|
whereUsed[$widget.systemName][whereUsed[$widget.systemName].length] = $widget.id;
|
|
}
|
|
|
|
/******************************************************************
|
|
* ======= Switchboard functions =======
|
|
*/
|
|
|
|
// used to find largest tiles on Switchboard screen
|
|
function autoRows(screenwidth, screenheight) {
|
|
// calculations repeated from SwitchboardEditor for web display
|
|
// find cell matrix that allows largest size icons
|
|
var $cellProp = 1; // assume square tiles prop 1:1 to keep it simple for now
|
|
var $paneEffectiveWidth = Math.ceil(screenwidth / $cellProp);
|
|
var $columnsNum = 1;
|
|
var $rowsNum = 1;
|
|
var $tileSize = 0.1; // start value
|
|
var $tileSizeOld = 0;
|
|
var $totalDisplayed = Math.max($total, 1); // if all items unconnected and set to be hidden, use 1
|
|
while ($tileSize > $tileSizeOld) {
|
|
$rowsNum = ($totalDisplayed + $columnsNum - 1) / $columnsNum; // roundup int
|
|
$tileSizeOld = $tileSize; // store for comparison
|
|
$tileSize = Math.min(($paneEffectiveWidth / $columnsNum), ((screenheight - 90) / $rowsNum));
|
|
// screenheight-90px to leave room for menubar
|
|
if ($tileSize <= $tileSizeOld) {
|
|
break;
|
|
}
|
|
$columnsNum++;
|
|
}
|
|
return $rowsNum;
|
|
}
|
|
|
|
function getSwitchButtonLabel(label, subLabel) {
|
|
if (($showUserName == "no") || (subLabel == "") || isUndefined(subLabel)) {
|
|
return label;
|
|
} else {
|
|
subLabel = subLabel.substring(0, (Math.min(subLabel.length, 25)));
|
|
return label + " (" + subLabel + ")"; // will wrap but TODO show on 2 lines of text
|
|
}
|
|
}
|
|
|
|
// Draw symbol on the beanswitch widget canvas
|
|
var $drawWidgetSymbol = function(id, state) {
|
|
// draw on $widget canvas
|
|
var $canvas = document.getElementById(id + "c");
|
|
var shape = $gWidgets[id].shape;
|
|
if (shape == "button" || typeof $canvas === null) {
|
|
return; // no canvas created (shape = "buttons")
|
|
}
|
|
var ctx = $canvas.getContext("2d");
|
|
ctx.save();
|
|
// backgroundcolor shows through by inherit
|
|
ctx.clearRect(0, 0, $canvas.width, $canvas.height); // for alternating text and 'moving' items
|
|
|
|
ctx.fillStyle = (state == "2" ? $activeColor : $inactiveColor); // simple change in color
|
|
ctx.strokeStyle = "black";
|
|
ctx.translate($canvas.width/2, $canvas.height/2); // origin in center of canvas, easy!
|
|
var radius = Math.min($canvas.width * 0.3, $canvas.height * 0.3);
|
|
|
|
switch (shape) {
|
|
// draw methods
|
|
case "icon" : // slider, 1 shape for all switchtypes (S, T, L)
|
|
ctx.beginPath(); // the sliderspace
|
|
if (state == "2") {
|
|
ctx.strokeStyle = $activeColor;
|
|
} else if (state == "4") {
|
|
ctx.strokeStyle = $inactiveColor;
|
|
} else {
|
|
ctx.strokeStyle = "darkgray";
|
|
}
|
|
ctx.lineCap = "round";
|
|
ctx.lineWidth = radius;
|
|
ctx.moveTo(-radius/2, 0);
|
|
ctx.lineTo(radius/2, 0);
|
|
ctx.stroke();
|
|
ctx.beginPath(); // the knob
|
|
var knobX = (state == "2" ? radius/2 : -radius/2);
|
|
ctx.arc(knobX, 0, radius/2, 0, 2 * Math.PI);
|
|
ctx.fillStyle = "white";
|
|
ctx.fill();
|
|
ctx.strokeStyle = "black";
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
break;
|
|
case "drawing" : // Maerklin Keyboard, 1 shape for all switchtypes (S, T, L)
|
|
// red = upper rounded rect
|
|
ctx.fillStyle = (state == "2" ? $activeColor : "pink");
|
|
ctx.fillRect(-0.5*radius, -1.1*radius, radius, radius/3);
|
|
// + rounded outline
|
|
ctx.lineJoin = "round";
|
|
ctx.lineWidth = radius/5;
|
|
ctx.strokeStyle = (state == "2" ? $activeColor : "pink");
|
|
ctx.strokeRect(-0.5*radius, -1.1*radius, radius, radius/3);
|
|
// green = lower rounded rect
|
|
ctx.fillStyle = (state == "4" ? $inactiveColor : "lightgreen");
|
|
ctx.fillRect(-0.5*radius, 1.1*radius, radius, radius/-3);
|
|
// + rounded outline
|
|
ctx.lineJoin = "round";
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeStyle = (state == "4" ? $inactiveColor : "lightgreen");
|
|
ctx.strokeRect(-0.5*radius, 1.1*radius, radius, radius/-3);
|
|
// add round LED at top
|
|
var grd = ctx.createRadialGradient(-0.1*radius, -1.4*radius, 0.5*radius, 0.1*radius, -1.6*radius, 0);
|
|
grd.addColorStop(0, (state == "2" ? $activeColor : "lightgray"));
|
|
grd.addColorStop(1, "white");
|
|
ctx.fillStyle = grd;
|
|
ctx.arc(0, -1.55*radius, radius/6, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
ctx.lineWidth = 0.2;
|
|
ctx.strokeStyle = "black";
|
|
ctx.stroke();
|
|
break;
|
|
case "symbol" : // Mimic classic icons as vector drawing, specific shape per switchtype (S, T, L)
|
|
switch ($gWidgets[id].type) {
|
|
case "L" : // light
|
|
// line (wire) at back
|
|
ctx.beginPath();
|
|
ctx.lineWidth = (state == "2" ? "3" : "1"); // thinner outline if Off
|
|
ctx.moveTo(-0.4 * $canvas.width, 0);
|
|
ctx.lineTo(0.4 * $canvas.width, 0);
|
|
ctx.stroke();
|
|
// filled circle
|
|
var grd = ctx.createRadialGradient(0, 0, 1.5 * radius, 8, -8, 4);
|
|
grd.addColorStop(0, (state == "2" ? "yellow" : "lightgray"));
|
|
grd.addColorStop(1, "white");
|
|
ctx.fillStyle = grd;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
ctx.lineWidth = (state == "2" ? "3" : "1"); // thinner outline if Off
|
|
ctx.stroke();
|
|
// cross
|
|
ctx.lineWidth = 1;
|
|
ctx.moveTo(radius * -0.74, radius * -0.74);
|
|
ctx.lineTo(radius * 0.74, radius * 0.74);
|
|
ctx.stroke();
|
|
ctx.lineWidth = 1;
|
|
ctx.moveTo(radius * -0.74, radius * 0.74);
|
|
ctx.lineTo(radius * 0.74, radius * -0.74);
|
|
ctx.stroke();
|
|
break;
|
|
case "S" : // sensor
|
|
var grd = ctx.createRadialGradient(0, 0, 1.5 * radius, 8, -8, 4);
|
|
grd.addColorStop(0, (state == "2" ? $activeColor : "lightgray"));
|
|
grd.addColorStop(1, "white");
|
|
ctx.fillStyle = grd;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
ctx.lineWidth = (state == "2" ? "3" : "1"); // thinner outline if Off
|
|
ctx.stroke();
|
|
break;
|
|
case "T" : // turnout, orientation on screen same as JMRI
|
|
default :
|
|
ctx.lineWidth = radius/2.9;
|
|
// points, at the back
|
|
ctx.strokeStyle = "lightgray";
|
|
// --angled turnout shape
|
|
//ctx.moveTo(-0.4 * $canvas.width, -20);
|
|
//ctx.lineTo(0.1 * $canvas.width, 10);
|
|
//ctx.lineTo(-0.4 * $canvas.width, 10);
|
|
// --curved turnout shape
|
|
ctx.moveTo(0.4 * $canvas.width, 10);
|
|
ctx.lineTo(-0.4 * $canvas.width, 10);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(0.4 * $canvas.width, 10 - 1.5 * $canvas.width, 1.5 * $canvas.width, 0.5 * Math.PI, 0.675 * Math.PI);
|
|
// --up to here
|
|
ctx.stroke();
|
|
// active line, start with new color
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = $activeColor;
|
|
// --angled turnout shape
|
|
//var endY = (state == "2" ? "10" : "-20");
|
|
//ctx.moveTo(0.4 * $canvas.width, 10);
|
|
//ctx.lineTo(0.1 * $canvas.width, 10);
|
|
//ctx.lineTo(-0.4 * $canvas.width, endY);
|
|
// --curved turnout shape
|
|
if (state == "2") {
|
|
ctx.moveTo(0.4 * $canvas.width, 10);
|
|
ctx.lineTo(-0.4 * $canvas.width, 10);
|
|
} else {
|
|
ctx.arc(0.4 * $canvas.width, 10 - 1.5 * $canvas.width, 1.5 * $canvas.width, 0.5 * Math.PI, 0.675 * Math.PI);
|
|
}
|
|
// --up to here
|
|
ctx.stroke();
|
|
break;
|
|
}
|
|
default :
|
|
// only render label
|
|
}
|
|
|
|
// draw label (system name + state) text
|
|
//ctx.restore(); // resets origin and stroke&fill
|
|
ctx.fillStyle = (state == "0" ? $unknownColor : $gPanel.defaulttextcolor); // simple change in color
|
|
ctx.font = "16px Arial";
|
|
ctx.textAlign = 'center';
|
|
if (shape == "drawing") { // text centered vertically between Maerklin buttons
|
|
ctx.fillText($gWidgets[id].text, 0, 0);
|
|
} else {
|
|
ctx.fillText($gWidgets[id].text, 0, -0.5 * $canvas.height + 16); // +16 for text size below top
|
|
}
|
|
// draw sublabel (user name) text
|
|
ctx.font = "italic 10px Arial";
|
|
if (shape == "drawing") { // text centered between Maerklin buttons
|
|
ctx.fillText($gWidgets[id].username, 0, 0.4 * $canvas.height);
|
|
} else {
|
|
ctx.fillText($gWidgets[id].username, 0, 0.4 * $canvas.height);
|
|
}
|
|
ctx.restore(); // restore color and width back to default
|
|
};
|
|
|
|
// End of Swichboard functions
|
|
|
|
|
|
/******************************************************************
|
|
* ======= Layout Editor functions =======
|
|
*/
|
|
|
|
//draw a Tracksegment (pass in widget)
|
|
function $drawTrackSegment($widget) {
|
|
//if set to hidden, don't draw anything
|
|
if ($widget.hidden == "yes") {
|
|
return;
|
|
}
|
|
|
|
// if positional points have not been loaded...
|
|
if (Object.keys($gPts).length == 0) {
|
|
return; // ... don't try to draw anything yet
|
|
}
|
|
|
|
//get the endpoints by name
|
|
var $ep1, $ep2;
|
|
[$ep1, $ep2] = $getEndPoints$($widget);
|
|
if (isUndefined($ep1)) {
|
|
log.warn("can't draw tracksegment " + $widget.ident + ": connect1: " + $widget.connect1name + "." + $widget.type1 + " undefined.");
|
|
return;
|
|
}
|
|
if (isUndefined($ep2)) {
|
|
log.warn("can't draw tracksegment " + $widget.ident + ": connect2: " + $widget.connect2name + "." + $widget.type2 + " undefined.");
|
|
return;
|
|
}
|
|
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
//get width (assume no block assigned)
|
|
var $width = $gPanel.sidelinetrackwidth;
|
|
if ($widget.mainline == "yes") {
|
|
$width = $gPanel.mainlinetrackwidth;
|
|
}
|
|
|
|
var $color = $getTrackColor($widget);
|
|
|
|
var $blk = $gBlks[$widget.blockname];
|
|
if (isDefined($blk)) {
|
|
$color = $blk.blockcolor;
|
|
|
|
//block assigned; use block width
|
|
$width = $gPanel.sidelineblockwidth;
|
|
if ($widget.mainline == "yes") {
|
|
$width = $gPanel.mainlineblockwidth;
|
|
}
|
|
}
|
|
|
|
// set color and width
|
|
if (isDefined($color)) {
|
|
$gCtx.strokeStyle = $color;
|
|
}
|
|
if (isDefined($width)) {
|
|
$gCtx.lineWidth = $width;
|
|
}
|
|
|
|
if ($widget.dashed == "yes") {
|
|
$gCtx.setLineDash([6, 4]);
|
|
}
|
|
|
|
if ($widget.bezier == "yes") {
|
|
$drawTrackSegmentBezier($widget);
|
|
} else if ($widget.circle == "yes") {
|
|
$drawTrackSegmentCircle($widget);
|
|
} else if ($widget.arc == "yes") { //draw arc of ellipse
|
|
$drawTrackSegmentArc($widget);
|
|
} else {
|
|
$drawLine($ep1.x, $ep1.y, $ep2.x, $ep2.y, $color, $width);
|
|
}
|
|
|
|
if ($widget.dashed == "yes") {
|
|
$gCtx.setLineDash([]);
|
|
}
|
|
|
|
//draw its decorations
|
|
$drawDecorations($widget);
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
} // $drawTrackSegment
|
|
|
|
function $drawTrackSegmentBezier($widget) {
|
|
//get the endpoints by name
|
|
var ep1, ep2;
|
|
[ep1, ep2] = $getEndPoints($widget);
|
|
var $cps = $widget.controlpoints; // get the control points
|
|
var points = [[ep1[0], ep1[1]]]; // first point
|
|
$cps.each(function( idx, elem ) { // control points
|
|
points.push($getLayoutPoint(elem));
|
|
});
|
|
points.push([ep2[0], ep2[1]]); // last point
|
|
|
|
//$point_log("points[0]", points[0]);
|
|
|
|
$drawBezier(points, $gCtx.strokeStyle, $gCtx.lineWidth, 0);
|
|
}
|
|
|
|
function $drawTrackSegmentCircle($widget) {
|
|
//get the endpoints by name
|
|
var $ep1, $ep2;
|
|
[$ep1, $ep2] = $getEndPoints$($widget);
|
|
if (isUndefined($widget.angle) || ($widget.angle == 0)) {
|
|
$widget['angle'] = "90";
|
|
}
|
|
//draw curved line
|
|
if ($widget.flip == "yes") {
|
|
$drawArc($ep2.x, $ep2.y, $ep1.x, $ep1.y, $widget.angle);
|
|
} else {
|
|
$drawArc($ep1.x, $ep1.y, $ep2.x, $ep2.y, $widget.angle);
|
|
}
|
|
}
|
|
|
|
function $drawTrackSegmentArc($widget) {
|
|
//get the endpoints by name
|
|
var $ep1, $ep2;
|
|
[$ep1, $ep2] = $getEndPoints$($widget);
|
|
var ep1x = Number($ep1.x), ep1y = Number($ep1.y), ep2x = Number($ep2.x), ep2y = Number($ep2.y);
|
|
if ($widget.flip == "yes") {
|
|
[ep1x, ep1y, ep2x, ep2y] = [ep2x, ep2y, ep1x, ep1y];
|
|
}
|
|
|
|
var x, y;
|
|
var rw = ep2x - ep1x, rh = ep2y - ep1y;
|
|
|
|
var startAngleRAD, stopAngleRAD;
|
|
if (rw < 0) {
|
|
rw = -rw;
|
|
if (rh < 0) { //log.log("**** QUAD ONE ****");
|
|
x = ep1x; y = ep2y;
|
|
rh = -rh;
|
|
startAngleRAD = Math.PI / 2;
|
|
stopAngleRAD = Math.PI;
|
|
} else { //log.log("**** QUAD TWO ****");
|
|
x = ep2x; y = ep1y;
|
|
startAngleRAD = 0;
|
|
stopAngleRAD = Math.PI / 2;
|
|
}
|
|
} else {
|
|
if (rh < 0) { //log.log("**** QUAD THREE ****");
|
|
x = ep2x; y = ep1y;
|
|
rh = -rh;
|
|
startAngleRAD = Math.PI;
|
|
stopAngleRAD = -Math.PI / 2;
|
|
} else { //log.log("**** QUAD FOUR ****");
|
|
x = ep1x; y = ep2y;
|
|
startAngleRAD = -Math.PI / 2;
|
|
stopAngleRAD = 0;
|
|
}
|
|
}
|
|
|
|
$drawEllipse(x, y, rw, rh, startAngleRAD, stopAngleRAD);
|
|
}
|
|
|
|
function $getEndPoints$($widget) {
|
|
var $ep1 = $gPts[$widget.connect1name + "." + $widget.type1];
|
|
var $ep2 = $gPts[$widget.connect2name + "." + $widget.type2];
|
|
return [$ep1, $ep2];
|
|
}
|
|
|
|
function $getEndPoints($widget) {
|
|
var $ep1, $ep2;
|
|
[$ep1, $ep2] = $getEndPoints$($widget);
|
|
var ep1 = [Number($ep1.x), Number($ep1.y)];
|
|
var ep2 = [Number($ep2.x), Number($ep2.y)];
|
|
return [ep1, ep2];
|
|
}
|
|
|
|
//
|
|
//draw decorations
|
|
//
|
|
function $drawDecorations($widget) {
|
|
if (isDefined($widget.arrow)) {
|
|
$widget.arrow.draw();
|
|
}
|
|
if (isDefined($widget.bridge)) {
|
|
$widget.bridge.draw();
|
|
}
|
|
if (isDefined($widget.bumper)) {
|
|
$widget.bumper.draw();
|
|
}
|
|
if (isDefined($widget.tunnel)) {
|
|
$widget.tunnel.draw();
|
|
}
|
|
} // $drawDecorations
|
|
|
|
// draw a turntable (pass in widget)
|
|
// from jmri.jmrit.display.layoutEditor.layoutTurntable
|
|
function $drawTurntable($widget) {
|
|
$logProperties($widget);
|
|
|
|
//get the center
|
|
var $txcen = $widget.xcen * 1;
|
|
var $tycen = $widget.ycen * 1;
|
|
|
|
var $tr = $widget.radius * 1; //turntable circle radius
|
|
var $cr = $gPanel.turnoutcirclesize * SIZE; //turnout circle radius
|
|
//var $cd = $cr * 2;
|
|
|
|
//the fraction that $cr is of ($tr + $cr)
|
|
//(used to draw ray tracks from circle to ray end point (control circle))
|
|
var f = $cr / ($tr + $cr);
|
|
|
|
//loop thru raytracks drawing each one (and control circles if it has a turnout)
|
|
$widget.raytracks.each(function(i, item) {
|
|
$logProperties(item);
|
|
//var rayID = $widget.ident + "." + (50 + item.attributes.index.value * 1);
|
|
var rayID = $widget.ident + ".TURNTABLE_RAY_" + (item.attributes.index.value * 1);
|
|
var $t = $gPts[rayID];
|
|
//draw the line from ray endpoint to turntable edge
|
|
var $t1 = [];
|
|
$t1['x'] = $t.x - (($t.x - $txcen) * f);
|
|
$t1['y'] = $t.y - (($t.y - $tycen) * f);
|
|
$drawLine($t1.x, $t1.y, $t.x, $t.y, $getTrackColor($widget), $gPanel.sidelinetrackwidth);
|
|
|
|
if (isDefined(item.attributes.turnout) && ($gPanel.controlling == "yes")) {
|
|
// var turnout = item.attributes.turnout.value;
|
|
// var state = item.attributes.turnoutstate.value;
|
|
// log.log("$drawTurntable ray # " + i + " turnout: '" + turnout + "', state: " + state);
|
|
//draw the turnout control circle
|
|
$drawCircle($t.x, $t.y, $cr, $gPanel.turnoutcirclecolor, 1);
|
|
}
|
|
if (isDefined($widget.activeRayID)) {
|
|
var drawFlag = false;
|
|
if (isDefined(item.attributes.turnout)) {
|
|
var turnout = item.attributes.turnout.value;
|
|
if (turnout == $widget.activeRayTurnout) {
|
|
var state = item.attributes.turnoutstate.value;
|
|
if (state.toUpperCase() == $widget.activeRayState) {
|
|
drawFlag = true;
|
|
}
|
|
}
|
|
}
|
|
var $angle = $toRadians(item.attributes.angle.value);
|
|
var $t1 = [];
|
|
$t1['x'] = $txcen + ($tr * Math.sin($angle));
|
|
$t1['y'] = $tycen - ($tr * Math.cos($angle));
|
|
var $t2 = [];
|
|
$t2['x'] = $txcen - ($tr * Math.sin($angle));
|
|
$t2['y'] = $tycen + ($tr * Math.cos($angle));
|
|
if (drawFlag) {
|
|
$drawLine($t1.x, $t1.y, $t2.x, $t2.y, $getTrackColor($widget), $gPanel.sidelinetrackwidth);
|
|
} else {
|
|
$drawLine($t1.x, $t1.y, $t2.x, $t2.y, $gPanel.backgroundcolor, $gPanel.sidelinetrackwidth);
|
|
}
|
|
}
|
|
});
|
|
|
|
var $turntablecirclelinewidth = 2; //matches LayoutTurntableView.java
|
|
$drawCircle($txcen, $tycen, $tr, $getTrackColor($widget), $turntablecirclelinewidth);
|
|
$drawCircle($txcen, $tycen, $tr / 4, $getTrackColor($widget), $turntablecirclelinewidth);
|
|
} //$drawTurntable
|
|
|
|
//draw a LevelXing (pass in widget)
|
|
function $drawLevelXing($widget) {
|
|
//if set to hidden, don't draw anything
|
|
if ($widget.hidden == "yes") {
|
|
return;
|
|
}
|
|
//set colors and widths based on connected segments and blocks
|
|
var $colorAC = $getLegColor($gWidgets[$widget.connectaname], $widget.blocknameac);
|
|
var $colorBD = $getLegColor($gWidgets[$widget.connectbname], $widget.blocknamebd);
|
|
var $widthAC = $getLegWidth($gWidgets[$widget.connectaname], $widget.blocknameac);
|
|
var $widthBD = $getLegWidth($gWidgets[$widget.connectbname], $widget.blocknamebd);
|
|
|
|
//retrieve the points
|
|
var cen = [$widget.xcen, $widget.ycen];
|
|
var a = $getPoint($widget.ident + LEVEL_XING_A);
|
|
var b = $getPoint($widget.ident + LEVEL_XING_B);
|
|
var c = $getPoint($widget.ident + LEVEL_XING_C);
|
|
var d = $getPoint($widget.ident + LEVEL_XING_D);
|
|
|
|
//levelxing A
|
|
// D-+-B
|
|
// C
|
|
$drawLineP(a, c, $colorAC, $widthAC); //A to C
|
|
$drawLineP(b, d, $colorBD, $widthBD); //B to D
|
|
}
|
|
|
|
//draw a Turnout (pass in widget)
|
|
// see LayoutTurnout.draw()
|
|
// colors and widths based on side vs main then block color, turnout can be all one block, or several blocks
|
|
function $drawTurnout($widget) {
|
|
//if set to hidden, don't draw anything
|
|
if ($widget.hidden == "yes") {
|
|
return;
|
|
}
|
|
|
|
//set erase color and width
|
|
var $eraseColor = $gPanel.backgroundcolor;
|
|
var $eraseWidth = $gPanel.mainlinetrackwidth;
|
|
|
|
//set colors and widths based on connected segments and blocks
|
|
var $colorA = $getLegColor($gWidgets[$widget.connectaname], $widget.blockname);
|
|
var $colorB = $getLegColor($gWidgets[$widget.connectbname],
|
|
($widget.blockbname ? $widget.blockbname : $widget.blockname)); //use bname if set
|
|
var $colorC = $getLegColor($gWidgets[$widget.connectcname],
|
|
($widget.blockcname ? $widget.blockcname : $widget.blockname)); //use cname if set
|
|
var $colorD = $getLegColor($gWidgets[$widget.connectdname],
|
|
($widget.blockdname ? $widget.blockdname : $widget.blockname)); //use dname if set
|
|
|
|
var $widthA = $getLegWidth($gWidgets[$widget.connectaname], $widget.blockname);
|
|
var $widthB = $getLegWidth($gWidgets[$widget.connectbname],
|
|
($widget.blockbname ? $widget.blockbname : $widget.blockname)); //use bname if set
|
|
var $widthC = $getLegWidth($gWidgets[$widget.connectcname],
|
|
($widget.blockcname ? $widget.blockcname : $widget.blockname)); //use cname if set
|
|
var $widthD = $getLegWidth($gWidgets[$widget.connectdname],
|
|
($widget.blockdname ? $widget.blockdname : $widget.blockname)); //use dname if set
|
|
|
|
var cen = [$widget.xcen * 1, $widget.ycen * 1]
|
|
var a = $getPoint($widget.ident + ".TURNOUT_A");
|
|
var b = $getPoint($widget.ident + ".TURNOUT_B");
|
|
var c = $getPoint($widget.ident + ".TURNOUT_C");
|
|
|
|
var ab = $point_midpoint(a, b);
|
|
|
|
//turnout A--+--B
|
|
// \-C
|
|
if ($widget.type == LH_TURNOUT || $widget.type == RH_TURNOUT || $widget.type == WYE_TURNOUT) {
|
|
//always draw from a to cen
|
|
$drawLineP(a, cen, $colorA, $widthA); //a to cen
|
|
|
|
//if closed or thrown, draw the selected leg and erase the other one
|
|
if ($widget.state == CLOSED || $widget.state == THROWN) {
|
|
if ($widget.state == $widget.continuing) {
|
|
$drawLineP(cen, c, $eraseColor, $widthC+1); //erase center to C (diverging leg)
|
|
if ($gPanel.turnoutdrawunselectedleg == 'yes') {
|
|
$drawLineP(c, $point_midpoint(cen, c), $colorC, $widthC); //C to midC (diverging leg)
|
|
}
|
|
$drawLineP(cen, b, $colorB, $widthB); //center to B (straight leg)
|
|
} else {
|
|
$drawLineP(cen, b, $eraseColor, $widthB+1); //erase center to B (straight leg)
|
|
if ($gPanel.turnoutdrawunselectedleg == 'yes') {
|
|
$drawLineP(b, $point_midpoint(cen, b), $colorB, $widthB); //B to midB (straight leg)
|
|
}
|
|
$drawLineP(cen, c, $colorC, $widthC); //center to C (diverging leg)
|
|
}
|
|
} else { //if state is undefined, draw both legs
|
|
$drawLineP(cen, b, $colorB, $widthB); //center to B (straight leg)
|
|
$drawLineP(cen, c, $colorC, $widthC); //center to C (diverging leg)
|
|
}
|
|
// xover A--B
|
|
// D--C
|
|
} else if ($widget.type == LH_XOVER || $widget.type == RH_XOVER || $widget.type == DOUBLE_XOVER) {
|
|
var d = $getPoint($widget.ident + ".TURNOUT_D");
|
|
|
|
var ab = $point_midpoint(a, b);
|
|
var cd = $point_midpoint(c, d);
|
|
|
|
if ($widget.state == CLOSED || $widget.state == THROWN) {
|
|
$drawLineP(a, b, $eraseColor, $eraseWidth); //erase A to B
|
|
$drawLineP(c, d, $eraseColor, $eraseWidth); //erase C to D
|
|
$drawLineP(ab, cd, $eraseColor, $eraseWidth); //erase midAB to midDC
|
|
$drawLineP(a, c, $eraseColor, $eraseWidth); //erase A to C
|
|
$drawLineP(b, d, $eraseColor, $eraseWidth); //erase B to D
|
|
if ($widget.state == $widget.continuing) {
|
|
//draw closed legs
|
|
$drawLineP(a, ab, $colorA, $widthA); //A to mid ab
|
|
$drawLineP(b, ab, $colorB, $widthB); //B to mid ab
|
|
$drawLineP(c, cd, $colorC, $widthC); //C to mid cd
|
|
$drawLineP(d, cd, $colorD, $widthD); //D to mid cd
|
|
//draw open legs
|
|
if ($widget.type == DOUBLE_XOVER) {
|
|
var acen = $point_midpoint(a, cen);
|
|
var bcen = $point_midpoint(b, cen);
|
|
var ccen = $point_midpoint(c, cen);
|
|
var dcen = $point_midpoint(d, cen);
|
|
$drawLineP(acen, cen, $colorA, $widthA); //mid a cen to cen
|
|
$drawLineP(bcen, cen, $colorB, $widthB); //mid b cen to cen
|
|
$drawLineP(ccen, cen, $colorC, $widthC); //mid c cen to cen
|
|
$drawLineP(dcen, cen, $colorD, $widthD); //mid d cen to cen
|
|
} else if ($widget.type == RH_XOVER) {
|
|
$drawLineP($point_midpoint(ab, cen), cen, $colorA, $widthA);
|
|
$drawLineP($point_midpoint(cd, cen), cen, $colorC, $widthC);
|
|
} else if ($widget.type == LH_XOVER) {
|
|
$drawLineP($point_midpoint(ab, cen), cen, $colorB, $widthB);
|
|
$drawLineP($point_midpoint(cd, cen), cen, $colorD, $widthD);
|
|
}
|
|
} else {
|
|
var aab = $point_midpoint(a, ab);
|
|
var abb = $point_midpoint(ab, b);
|
|
var ccd = $point_midpoint(c, cd);
|
|
var cdd = $point_midpoint(cd, d);
|
|
if ($widget.type == DOUBLE_XOVER) {
|
|
//draw open legs
|
|
$drawLineP(ab, aab, $colorA, $widthA);
|
|
$drawLineP(ab, abb, $colorB, $widthB);
|
|
$drawLineP(cd, ccd, $colorC, $widthC);
|
|
$drawLineP(cd, cdd, $colorD, $widthD);
|
|
|
|
//draw closed legs
|
|
$drawLineP(a, cen, $colorA, $widthA);
|
|
$drawLineP(b, cen, $colorB, $widthB);
|
|
$drawLineP(c, cen, $colorC, $widthC); //C to cen
|
|
$drawLineP(d, cen, $colorD, $widthD); //D to cen
|
|
} else if ($widget.type == RH_XOVER) {
|
|
//draw open legs
|
|
$drawLineP(b, abb, $colorB, $widthB);
|
|
$drawLineP(d, cdd, $colorD, $widthD);
|
|
|
|
//draw closed legs
|
|
$drawLineP(a, ab, $colorA, $widthA); //A to mid ab
|
|
$drawLineP(ab, cen, $colorA, $widthA); //midAB to cen
|
|
$drawLineP(cen, cd, $colorC, $widthC); //cen to midDC
|
|
$drawLineP(c, cd, $colorC, $widthC); //C to mid cd
|
|
} else { //LH_XOVER
|
|
//draw open legs
|
|
$drawLineP(a, aab, $colorA, $widthA);
|
|
$drawLineP(c, ccd, $colorC, $widthC);
|
|
|
|
//draw closed legs
|
|
$drawLineP(b, ab, $colorB, $widthB); //B to mid ab
|
|
$drawLineP(ab, cen, $colorB, $widthB); //midAB to cen
|
|
$drawLineP(cen, cd, $colorD, $widthD); //cen to midDC
|
|
$drawLineP(d, cd, $colorD, $widthD); //D to mid cd
|
|
}
|
|
}
|
|
} else { //if state is undefined, draw all legs
|
|
$drawLineP(a, ab, $colorA, $widthA); //A to mid ab
|
|
$drawLineP(b, ab, $colorB, $widthB); //B to mid ab
|
|
$drawLineP(c, cd, $colorC, $widthC); //C to mid cd
|
|
$drawLineP(d, cd, $colorD, $widthD); //D to mid cd
|
|
if ($widget.type == DOUBLE_XOVER) {
|
|
$drawLineP(a, cen, $colorA, $widthA); //A to cen
|
|
$drawLineP(b, cen, $colorB, $widthB); //B to cen
|
|
$drawLineP(c, cen, $colorC, $widthC); //C to cen
|
|
$drawLineP(d, cen, $colorD, $widthD); //D to cen
|
|
} else if ($widget.type == RH_XOVER) {
|
|
$drawLineP(ab, cen, $colorA, $widthA); //midAB to cen
|
|
$drawLineP(cen, cd, $colorC, $widthC); //cen to midDC
|
|
} else { //LH_XOVER
|
|
$drawLineP(ab, cen, $colorB, $widthB); //midAB to cen
|
|
$drawLineP(cen, cd, $colorD, $widthD); //cen to midDC
|
|
}
|
|
}
|
|
}
|
|
|
|
// erase and draw turnout circles if enabled, including occupancy check
|
|
if (($gPanel.turnoutcircles == "yes") && ($gPanel.controlling == "yes") && ($widget.disabled !== "yes")) {
|
|
$drawCircle($widget.xcen, $widget.ycen, $gPanel.turnoutcirclesize * SIZE, $eraseColor, 1);
|
|
if (($widget.disableWhenOccupied !== "yes") || ($widget.occupancystate != ACTIVE)) {
|
|
var $color = $gPanel.turnoutcirclecolor;
|
|
|
|
if ($widget.state != CLOSED) {
|
|
$color = $gPanel.turnoutcirclethrowncolor;
|
|
}
|
|
if ($gPanel.turnoutfillcontrolcircles == "yes") {
|
|
$fillCircle($widget.xcen, $widget.ycen, $gPanel.turnoutcirclesize * SIZE, $color, 1);
|
|
} else {
|
|
$drawCircle($widget.xcen, $widget.ycen, $gPanel.turnoutcirclesize * SIZE, $color, 1);
|
|
}
|
|
}
|
|
// if disableWhenOccupied requested, disable click if enabled and active
|
|
if ($widget.disableWhenOccupied == "yes") {
|
|
if ($widget.occupancystate == ACTIVE) {
|
|
$('#'+$widget.id).removeClass("clickable");
|
|
$('#'+$widget.id).unbind(UPEVENT, $handleClick);
|
|
} else {
|
|
$('#'+$widget.id).addClass("clickable");
|
|
$('#'+$widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
}
|
|
}
|
|
} // function $drawTurnout($widget)
|
|
|
|
// compute width of turnout leg based on connected segment, then block type
|
|
function $getLegWidth(cs, bn) {
|
|
var width = $gPanel.sidelinetrackwidth;
|
|
if (isDefined(cs)) {
|
|
if (cs.mainline == "yes") {
|
|
width = $gPanel.mainlinetrackwidth;
|
|
}
|
|
var blk = $gBlks[bn];
|
|
if (isDefined(blk)) {
|
|
if (cs.mainline=="yes") {
|
|
width = $gPanel.mainlineblockwidth;
|
|
} else {
|
|
width = $gPanel.sidelineblockwidth;
|
|
}
|
|
}
|
|
}
|
|
return width*1.0; //insure numeric
|
|
}
|
|
|
|
// compute color of turnout leg based on connected segment, then its block color
|
|
function $getLegColor(cs, bn) {
|
|
var color = $gPanel.defaulttrackcolor;
|
|
if (isDefined(cs)) {
|
|
if (isDefined($gPanel.mainRailColor) && (cs.mainline == "yes")) {
|
|
color = $gPanel.mainRailColor;
|
|
} else {
|
|
if (isDefined($gPanel.sideRailColor)) {
|
|
color = $gPanel.sideRailColor;
|
|
}
|
|
}
|
|
var blk = $gBlks[bn];
|
|
if (isDefined(blk)) {
|
|
color = blk.blockcolor;
|
|
}
|
|
}
|
|
return color;
|
|
|
|
} // function $getLegColor()
|
|
|
|
//set trackcolor by default, then main/side
|
|
var $getTrackColor = function(e) {
|
|
var color = $gPanel.defaulttrackcolor;
|
|
if (isDefined($gPanel.mainRailColor) && (e.mainline == "yes")) {
|
|
color = $gPanel.mainRailColor;
|
|
}
|
|
if (isDefined($gPanel.sideRailColor) && (e.mainline != "yes")) {
|
|
color = $gPanel.sideRailColor;
|
|
}
|
|
return color;
|
|
}
|
|
|
|
//draw a Slip (pass in widget)
|
|
// see LayoutSlip.draw()
|
|
function $drawSlip($widget) {
|
|
//if set to hidden, don't draw anything
|
|
if ($widget.hidden == "yes") {
|
|
return;
|
|
}
|
|
if (jmri_logging) {
|
|
log.log("$drawSlip(" + $widget.id + "): state: " + $widget.state);
|
|
}
|
|
|
|
var $mainWidth = $gPanel.mainlinetrackwidth;
|
|
var $sideWidth = $gPanel.sidelinetrackwidth;
|
|
|
|
var $widthA = $sideWidth;
|
|
if (isDefined($gWidgets[$widget.connectaname])) {
|
|
if ($gWidgets[$widget.connectaname].mainline == "yes") {
|
|
$widthA = $mainWidth;
|
|
}
|
|
}
|
|
|
|
var $widthB = $sideWidth;
|
|
if (isDefined($gWidgets[$widget.connectbname])) {
|
|
if ($gWidgets[$widget.connectbname].mainline == "yes") {
|
|
$widthB = $mainWidth;
|
|
}
|
|
}
|
|
|
|
var $widthC = $sideWidth;
|
|
if (isDefined($gWidgets[$widget.connectcname])) {
|
|
if ($gWidgets[$widget.connectcname].mainline == "yes") {
|
|
$widthC = $mainWidth;
|
|
}
|
|
}
|
|
|
|
var $widthD = $sideWidth;
|
|
if (isDefined($gWidgets[$widget.connectdname])) {
|
|
if ($gWidgets[$widget.connectdname].mainline == "yes") {
|
|
$widthD = $mainWidth;
|
|
}
|
|
}
|
|
|
|
var cen = [$widget.xcen * 1, $widget.ycen * 1]
|
|
var a = $getPoint($widget.ident + SLIP_A);
|
|
var b = $getPoint($widget.ident + SLIP_B);
|
|
var c = $getPoint($widget.ident + SLIP_C);
|
|
var d = $getPoint($widget.ident + SLIP_D);
|
|
|
|
var $eraseColor = $gPanel.backgroundcolor;
|
|
var $trackColor = $getTrackColor($widget);
|
|
|
|
var $blkA = $gBlks[$widget.blockname];
|
|
var $colorA = isDefined($blkA) ? $blkA.blockcolor : $trackColor;
|
|
var $colorAt = isDefined($blkA) ? $blkA.trackcolor : $trackColor;
|
|
var $blkB = $gBlks[$widget.blockbname];
|
|
var $colorB = isDefined($blkB) ? $blkB.blockcolor : $colorA;
|
|
var $colorBt = isDefined($blkB) ? $blkB.trackcolor : $colorAt;
|
|
var $blkC = $gBlks[$widget.blockcname];
|
|
var $colorC = isDefined($blkC) ? $blkC.blockcolor : $colorA;
|
|
var $colorCt = isDefined($blkC) ? $blkC.trackcolor : $colorAt;
|
|
var $blkD = $gBlks[$widget.blockdname];
|
|
var $colorD = isDefined($blkD) ? $blkD.blockcolor : $colorA;
|
|
var $colorDt = isDefined($blkD) ? $blkD.trackcolor : $colorAt;
|
|
|
|
//slip A==-==D
|
|
// \\ //
|
|
// X
|
|
// // \\
|
|
// B==-==C
|
|
// var STATE_AC = 0x02;
|
|
// var STATE_BD = 0x04;
|
|
// var STATE_AD = 0x06;
|
|
// var STATE_BC = 0x08;
|
|
|
|
// ERASE EVERYTHING FIRST
|
|
var acen3rd = $point_third(a, cen);
|
|
var bcen3rd = $point_third(b, cen);
|
|
var ccen3rd = $point_third(c, cen);
|
|
var dcen3rd = $point_third(d, cen);
|
|
var ad3rd = $point_midpoint(acen3rd, dcen3rd);
|
|
var bc3rd = $point_midpoint(bcen3rd, ccen3rd);
|
|
|
|
if ($widget.state != STATE_AC) {
|
|
$drawLineP(a, acen3rd, $eraseColor, $mainWidth);
|
|
$drawLineP(acen3rd, ccen3rd, $eraseColor, $mainWidth); //erase AC
|
|
$drawLineP(ccen3rd, c, $eraseColor, $mainWidth);
|
|
}
|
|
if ($widget.state != STATE_BD) {
|
|
$drawLineP(b, bcen3rd, $eraseColor, $mainWidth);
|
|
$drawLineP(bcen3rd, dcen3rd, $eraseColor, $mainWidth); //erase BD
|
|
$drawLineP(dcen3rd, d, $eraseColor, $mainWidth);
|
|
}
|
|
if ($widget.state != STATE_AD) {
|
|
$drawLineP(a, acen3rd, $eraseColor, $mainWidth);
|
|
$drawLineP(acen3rd, dcen3rd, $eraseColor, $mainWidth); //erase AD
|
|
$drawLineP(dcen3rd, d, $eraseColor, $mainWidth);
|
|
}
|
|
if ($widget.slipType == DOUBLE_SLIP) {
|
|
if ($widget.state != STATE_BC) {
|
|
$drawLineP(b, bcen3rd, $eraseColor, $mainWidth);
|
|
$drawLineP(bcen3rd, ccen3rd, $eraseColor, $mainWidth); //erase BC
|
|
$drawLineP(ccen3rd, c, $eraseColor, $mainWidth);
|
|
}
|
|
}
|
|
|
|
// THEN DRAW ROUTE
|
|
var forceUnselected = false;
|
|
if ($widget.state == STATE_AD) {
|
|
// draw A<===>D
|
|
$drawLineP(a, acen3rd, $colorA, $widthA);
|
|
$drawLineP(acen3rd, ad3rd, $colorA, $widthA);
|
|
$drawLineP(d, dcen3rd, $colorD, $widthD);
|
|
$drawLineP(dcen3rd, ad3rd, $colorD, $widthD);
|
|
} else if ($widget.state == STATE_AC) {
|
|
// draw A<===>C
|
|
$drawLineP(a, acen3rd, $colorA, $widthA);
|
|
$drawLineP(acen3rd, cen, $colorA, $widthA);
|
|
$drawLineP(c, ccen3rd, $colorC, $widthC);
|
|
$drawLineP(ccen3rd, cen, $colorC, $widthC);
|
|
} else if ($widget.state == STATE_BD) {
|
|
// draw B<===>D
|
|
$drawLineP(b, bcen3rd, $colorB, $widthB);
|
|
$drawLineP(bcen3rd, cen, $colorB, $widthB);
|
|
$drawLineP(d, dcen3rd, $colorD, $widthD);
|
|
$drawLineP(dcen3rd, cen, $colorD, $widthD);
|
|
} else if ($widget.state == STATE_BC) {
|
|
if ($widget.slipType == DOUBLE_SLIP) {
|
|
// draw B<===>C
|
|
$drawLineP(b, bcen3rd, $colorB, $widthB);
|
|
$drawLineP(bcen3rd, bc3rd, $colorB, $widthB);
|
|
$drawLineP(c, ccen3rd, $colorC, $widthC);
|
|
$drawLineP(ccen3rd, bc3rd, $colorC, $widthC);
|
|
} // DOUBLE_SLIP
|
|
} else {
|
|
forceUnselected = true; // if not valid state force drawing unselected
|
|
}
|
|
|
|
if (forceUnselected || ($gPanel.turnoutdrawunselectedleg == 'yes')) {
|
|
if ($widget.state == STATE_AC) {
|
|
$drawLineP(b, bcen3rd, $colorBt, $widthB);
|
|
$drawLineP(d, dcen3rd, $colorDt, $widthD);
|
|
} else if ($widget.state == STATE_BD) {
|
|
$drawLineP(a, acen3rd, $colorAt, $widthA);
|
|
$drawLineP(c, ccen3rd, $colorCt, $widthC);
|
|
} else if ($widget.state == STATE_AD) {
|
|
$drawLineP(b, bcen3rd, $colorBt, $widthB);
|
|
$drawLineP(c, ccen3rd, $colorCt, $widthC);
|
|
} else if ($widget.state == STATE_BC) {
|
|
$drawLineP(a, acen3rd, $colorAt, $widthA);
|
|
$drawLineP(d, dcen3rd, $colorDt, $widthD);
|
|
} else {
|
|
$drawLineP(a, acen3rd, $colorAt, $widthA);
|
|
$drawLineP(b, bcen3rd, $colorBt, $widthB);
|
|
$drawLineP(c, ccen3rd, $colorCt, $widthC);
|
|
$drawLineP(d, dcen3rd, $colorDt, $widthD);
|
|
}
|
|
}
|
|
|
|
if (($gPanel.turnoutcircles == "yes") && ($gPanel.controlling == "yes") && ($widget.disabled !== "yes")) {
|
|
//draw the two control circles
|
|
var $cr = $gPanel.turnoutcirclesize * SIZE; //turnout circle radius
|
|
|
|
// center
|
|
var cen = [$widget.xcen, $widget.ycen];
|
|
// left center
|
|
var lcen = $point_midpoint(a, b);
|
|
var ldelta = $point_subtract(cen, lcen);
|
|
|
|
// left fraction
|
|
var lf = $cr / Math.hypot(ldelta[0], ldelta[1]);
|
|
// left circle
|
|
var lcc = $point_lerp(cen, lcen, lf);
|
|
|
|
$drawCircleP(lcc, $cr, $gPanel.turnoutcirclecolor, 1);
|
|
|
|
// right center
|
|
var rcen = $point_midpoint(c, d);
|
|
var rdelta = $point_subtract(cen, rcen);
|
|
// right fraction
|
|
var rf = $cr / Math.hypot(rdelta[0], rdelta[1]);
|
|
// right circle
|
|
var rcc = $point_lerp(cen, rcen, rf);
|
|
|
|
$drawCircleP(rcc, $cr, $gPanel.turnoutcirclecolor, 1);
|
|
}
|
|
} // function $drawSlip($widget)
|
|
|
|
function $drawPositionableRoundRect($widget) {
|
|
//log.log("drawing PositionableRoundRect")
|
|
createPanelCanvas(); //insure canvas layer is available for drawing
|
|
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
if (isDefined($widget.lineColor)) {
|
|
$gCtx.strokeStyle = $widget.lineColor;
|
|
}
|
|
if (isDefined($widget.fillColor)) {
|
|
$gCtx.fillStyle = $widget.fillColor;
|
|
}
|
|
if (isDefined($widget.lineWidth)) {
|
|
$gCtx.lineWidth = $widget.lineWidth;
|
|
}
|
|
|
|
$gCtx.beginPath();
|
|
// $gCtx.rotate($toRadians($widget.degrees));
|
|
$gCtx.roundRect($widget.x, $widget.y, $widget.width, $widget.height, $widget.cornerRadius);
|
|
$gCtx.stroke()
|
|
$gCtx.fill()
|
|
$gCtx.restore(); // restore color and width back to default
|
|
|
|
} // function $drawPositionableRoundRect($widget)
|
|
|
|
function $drawPositionableEllipse($widget) {
|
|
//log.log("drawing PositionableEllipse");
|
|
createPanelCanvas(); //insure canvas layer is available for drawing
|
|
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
if (isDefined($widget.lineColor)) {
|
|
$gCtx.strokeStyle = $widget.lineColor;
|
|
}
|
|
if (isDefined($widget.fillColor)) {
|
|
$gCtx.fillStyle = $widget.fillColor;
|
|
}
|
|
if (isDefined($widget.lineWidth)) {
|
|
$gCtx.lineWidth = $widget.lineWidth;
|
|
}
|
|
rw = $widget.width/2;
|
|
rh = $widget.height/2;
|
|
x = $widget.x * 1.0;
|
|
y = $widget.y * 1.0;
|
|
$gCtx.beginPath();
|
|
$gCtx.ellipse(x + rw, y + rh, rw, rh, $toRadians($widget.degrees), 0, 2 * Math.PI);
|
|
$gCtx.stroke()
|
|
$gCtx.fill()
|
|
$gCtx.restore(); // restore color and width back to default
|
|
|
|
} // function $drawPositionableEllipse($widget)
|
|
|
|
function $drawLayoutShape($widget) {
|
|
var $pts = $widget.points; // get the points
|
|
var len = $pts.length;
|
|
if (len > 0) {
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
if (isDefined($widget.lineColor)) {
|
|
$gCtx.strokeStyle = $widget.lineColor;
|
|
}
|
|
if (isDefined($widget.fillColor)) {
|
|
$gCtx.fillStyle = $widget.fillColor;
|
|
}
|
|
if (isDefined($widget.linewidth)) {
|
|
$gCtx.lineWidth = $widget.linewidth; //TODO: check case on this
|
|
}
|
|
|
|
$gCtx.beginPath();
|
|
|
|
var shapeType = $widget.type;
|
|
|
|
$pts.each(function(idx, $lsp) { //loop thru points
|
|
// this point
|
|
var p = $getLayoutPoint($lsp);
|
|
|
|
// left point
|
|
var idxL = $wrapValue(idx - 1, 0, len);
|
|
var $lspL = $pts[idxL];
|
|
var pL = $getLayoutPoint($lspL);
|
|
var midL = $point_midpoint(pL, p);
|
|
|
|
// right point
|
|
var idxR = $wrapValue(idx + 1, 0, len);
|
|
var $lspR = $pts[idxR];
|
|
var pR = $getLayoutPoint($lspR);
|
|
var midR = $point_midpoint(p, pR);
|
|
|
|
var lspt = $lsp.attributes.type.value; // Straight or Curve
|
|
|
|
// if this is an open shape...
|
|
if (shapeType == "eOpen") {
|
|
// and this is first or last point...
|
|
if ((idx == 0) || (idxR == 0)) {
|
|
// then force straight shape point type
|
|
lspt = "Straight";
|
|
}
|
|
}
|
|
if (lspt == "Straight") {
|
|
if (idx == 0) { // if this is the first point...
|
|
// ...and our shape is open...
|
|
if (shapeType == "Open") {
|
|
$gCtx.moveTo(p[0], p[1]); // then start here
|
|
} else { // otherwise
|
|
$gCtx.moveTo(midL[0], midL[1]); //start here
|
|
$gCtx.lineTo(p[0], p[1]); //draw to here
|
|
}
|
|
} else {
|
|
$gCtx.lineTo(midL[0], midL[1]); //start here
|
|
$gCtx.lineTo(p[0], p[1]); //draw to here
|
|
}
|
|
// if this is not the last point...
|
|
// ...or our shape isn't open
|
|
if ((idxR != 0) || (shapeType == "Open")) {
|
|
$gCtx.lineTo(midR[0], midR[1]); // draw to here
|
|
}
|
|
} else if (lspt == "Curve") {
|
|
if (idx == 0) { // if this is the first point
|
|
$gCtx.moveTo(midL[0], midL[1]); // then start here
|
|
}
|
|
$gCtx.quadraticCurveTo(p[0], p[1], midR[0], midR[1]);
|
|
} else {
|
|
log.error("ERROR: unexpected LayoutShape point type '" + lspt + "' for " + $widget.ide);
|
|
}
|
|
}); // $pts.each(function(idx, $lsp)
|
|
|
|
if (shapeType == "Filled") {
|
|
$gCtx.fill();
|
|
}
|
|
$gCtx.stroke();
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
} // if (len > 0)
|
|
}
|
|
|
|
function $getLayoutPoint($p) {
|
|
return [Number($p.attributes.x.value), Number($p.attributes.y.value)];
|
|
}
|
|
|
|
// wrap inValue around between minVal and maxVal
|
|
function $wrapValue(inValue, minVal, maxVal) {
|
|
var range = maxVal - minVal;
|
|
return ((inValue % range) + range) % range;
|
|
}
|
|
|
|
function $lerp(value1, value2, amount) {
|
|
return ((1 - amount) * value1) + (amount * value2);
|
|
}
|
|
|
|
function $half(value1, value2) {
|
|
return $lerp(value1, value2, 1 / 2);
|
|
}
|
|
|
|
function $third(value1, value2) {
|
|
return $lerp(value1, value2, 1 / 3);
|
|
}
|
|
|
|
function $store_occupancysensor(id, sensor) {
|
|
if (id && sensor) {
|
|
if (!(sensor in occupancyNames)) {
|
|
occupancyNames[sensor] = new Array();
|
|
}
|
|
occupancyNames[sensor][occupancyNames[sensor].length] = id;
|
|
//console.log("sensor " + sensor + " stored with widget " + id);
|
|
}
|
|
}
|
|
|
|
function $store_occupancyblock(id, oblock) {
|
|
if (id && oblock) {
|
|
if (!(oblock in $oblockNames)) {
|
|
$oblockNames[oblock] = new Array();
|
|
}
|
|
$oblockNames[oblock][$oblockNames[oblock].length] = id; // id = widgetId
|
|
//console.log("oblock " + oblock + " stored with widget " + id);
|
|
}
|
|
}
|
|
|
|
//store the various points defined with a Turnout (pass in widget)
|
|
//see jmri.jmrit.display.layoutEditor.LayoutTurnout.java for background
|
|
function $storeTurnoutPoints($widget) {
|
|
var $t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_B"; //store B endpoint
|
|
$t['x'] = $widget.xb * 1;
|
|
$t['y'] = $widget.yb * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_C"; //store C endpoint
|
|
$t['x'] = $widget.xc * 1;
|
|
$t['y'] = $widget.yc * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
if ($widget.type == LH_TURNOUT || $widget.type == RH_TURNOUT) {
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_A"; //calculate and store A endpoint (mirror of B for these)
|
|
$t['x'] = $widget.xcen - ($widget.xb - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.yb - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
} else if ($widget.type == WYE_TURNOUT) {
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_A"; //store A endpoint
|
|
$t['x'] = $widget.xa * 1;
|
|
$t['y'] = $widget.ya * 1;
|
|
$gPts[$t.ident] = $t;
|
|
} else if ($widget.type == LH_XOVER || $widget.type == RH_XOVER || $widget.type == DOUBLE_XOVER) {
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_A"; //calculate and store A endpoint (mirror of C for these)
|
|
$t['x'] = $widget.xcen - ($widget.xc - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.yc - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + ".TURNOUT_D"; //calculate and store D endpoint (mirror of B for these)
|
|
$t['x'] = $widget.xcen - ($widget.xb - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.yb - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
}
|
|
}
|
|
|
|
//store the various points defined with a Slip (pass in widget)
|
|
//see jmri.jmrit.display.layoutEditor.LayoutSlip.java for background
|
|
function $storeSlipPoints($widget) {
|
|
var $t = [];
|
|
$t['ident'] = $widget.ident + SLIP_A; //store A endpoint
|
|
$t['x'] = $widget.xa * 1;
|
|
$t['y'] = $widget.ya * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + SLIP_B; //store B endpoint
|
|
$t['x'] = $widget.xb * 1;
|
|
$t['y'] = $widget.yb * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + SLIP_C; //calculate and store C endpoint (mirror of A for these)
|
|
$t['x'] = $widget.xcen - ($widget.xa - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.ya - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + SLIP_D; //calculate and store D endpoint (mirror of B for these)
|
|
$t['x'] = $widget.xcen - ($widget.xb - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.yb - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
}
|
|
|
|
//store the various points defined with a LevelXing (pass in widget)
|
|
//see jmri.jmrit.display.layoutEditor.LevelXing.java for background
|
|
function $storeLevelXingPoints($widget) {
|
|
var $t = [];
|
|
$t['ident'] = $widget.ident + LEVEL_XING_A; //store A endpoint
|
|
$t['x'] = $widget.xa * 1;
|
|
$t['y'] = $widget.ya * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + LEVEL_XING_B; //store B endpoint
|
|
$t['x'] = $widget.xb * 1;
|
|
$t['y'] = $widget.yb * 1;
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + LEVEL_XING_C; //calculate and store A endpoint (mirror of A for these)
|
|
$t['x'] = $widget.xcen - ($widget.xa - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.ya - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
|
|
$t = [];
|
|
$t['ident'] = $widget.ident + LEVEL_XING_D; //calculate and store D endpoint (mirror of B for these)
|
|
$t['x'] = $widget.xcen - ($widget.xb - $widget.xcen);
|
|
$t['y'] = $widget.ycen - ($widget.yb - $widget.ycen);
|
|
$gPts[$t.ident] = $t;
|
|
}
|
|
|
|
//drawLine, passing in values from xml
|
|
function $drawLine($p1x, $p1y, $p2x, $p2y, $color, $width, dashArray) {
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
if (isDefined($color)) {
|
|
$gCtx.strokeStyle = $color;
|
|
}
|
|
if (isDefined($width)) {
|
|
$gCtx.lineWidth = $width;
|
|
}
|
|
|
|
$gCtx.beginPath();
|
|
|
|
if (isDefined(dashArray)) {
|
|
$gCtx.setLineDash(dashArray);
|
|
}
|
|
|
|
$gCtx.moveTo($p1x, $p1y);
|
|
$gCtx.lineTo($p2x, $p2y);
|
|
|
|
$gCtx.stroke();
|
|
|
|
if (isDefined(dashArray)) {
|
|
$gCtx.setLineDash([]);
|
|
}
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
|
|
function $drawLineP($p1, $p2, $color, $width) {
|
|
$drawLine($p1[0], $p1[1], $p2[0], $p2[1], $color, $width);
|
|
}
|
|
|
|
//drawLine, passing in values from xml
|
|
function $drawDashedLine($p1x, $p1y, $p2x, $p2y, $color, $width, dashArray) {
|
|
$drawLine($p1x, $p1y, $p2x, $p2y, $color, $width, dashArray);
|
|
}
|
|
|
|
// function $drawDashedLineP($p1, $p2, $color, $width, dashArray) {
|
|
// $drawDashedLine($p1[0], $p1[1], $p2[0], $p2[1], $color, $width, dashArray);
|
|
// }
|
|
|
|
//draw a Circle (color and width are optional)
|
|
function $drawCircleP($p, $radius, $color, $width) {
|
|
$drawCircle($p[0], $p[1], $radius, $color, $width);
|
|
}
|
|
|
|
function $drawCircle($px, $py, $radius, $color, $width) {
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
// set color and width
|
|
if (isDefined($color)) {
|
|
$gCtx.strokeStyle = $color;
|
|
}
|
|
if (isDefined($width)) {
|
|
$gCtx.lineWidth = $width;
|
|
}
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.arc($px, $py, $radius, 0, 2 * Math.PI, false);
|
|
$gCtx.stroke();
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
|
|
//draw a Circle (color and width are optional)
|
|
function $fillCircleP($p, $radius, $color, $width) {
|
|
$fillCircle($p[0], $p[1], $radius, $color, $width);
|
|
}
|
|
function $fillCircle($px, $py, $radius, $color, $width) {
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
// set color and width
|
|
if (isDefined($color)) {
|
|
$gCtx.fillStyle = $color;
|
|
}
|
|
if (isDefined($width)) {
|
|
$gCtx.lineWidth = $width;
|
|
}
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.arc($px, $py, $radius, 0, 2 * Math.PI, false);
|
|
$gCtx.fill();
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
|
|
//drawArc, passing in values from xml
|
|
function $drawArc(pt1x, pt1y, pt2x, pt2y, degrees, $color, $width) {
|
|
// Compute arc's chord
|
|
var a = pt2x - pt1x;
|
|
var o = pt2y - pt1y;
|
|
var chord = Math.hypot(a, o); //in pixels
|
|
if (chord > 0) { //don't bother if no length
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
// set color and width
|
|
if (isDefined($color)) {
|
|
$gCtx.strokeStyle = $color;
|
|
}
|
|
if (isDefined($width)) {
|
|
$gCtx.lineWidth = $width;
|
|
}
|
|
|
|
var halfAngleRAD = $toRadians(degrees / 2);
|
|
var radius = (chord / 2) / (Math.sin(halfAngleRAD)); //in pixels
|
|
var startRAD = Math.atan2(a, o) - halfAngleRAD; //in radians
|
|
|
|
// calculate center of circle
|
|
var cx = (pt2x * 1.0) - Math.cos(startRAD) * radius;
|
|
var cy = (pt2y * 1.0) + Math.sin(startRAD) * radius;
|
|
|
|
//calculate start and end angle
|
|
var startAngleRAD = Math.atan2(pt1y - cy, pt1x - cx); //in radians
|
|
var endAngleRAD = Math.atan2(pt2y - cy, pt2x - cx); //in radians
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.arc(cx, cy, radius, startAngleRAD, endAngleRAD, false);
|
|
$gCtx.stroke();
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
}
|
|
|
|
function $drawArcP(pt1, pt2, degrees) {
|
|
$drawArc(pt1[0], pt1[1], pt2[0], pt2[1], degrees);
|
|
}
|
|
|
|
function $drawEllipse(x, y, rw, rh, startAngleRAD, stopAngleRAD)
|
|
{
|
|
$gCtx.beginPath();
|
|
$gCtx.ellipse(x, y, rw, rh, 0, startAngleRAD, stopAngleRAD);
|
|
$gCtx.stroke();
|
|
}
|
|
|
|
// $drawBezier
|
|
var bezier1st = true;
|
|
function $drawBezier(points, $color, $width, displacement) {
|
|
$gCtx.save(); // save current line width and color
|
|
|
|
$gCtx.strokeStyle = $color;
|
|
$gCtx.lineWidth = $width;
|
|
|
|
try {
|
|
bezier1st = true;
|
|
$gCtx.beginPath();
|
|
$plotBezier(points, 0, displacement);
|
|
$gCtx.stroke();
|
|
} catch (e) {
|
|
if (jmri_logging) {
|
|
log.log("$plotBezier exception: " + e);
|
|
var vDebug = "";
|
|
for (var prop in e) {
|
|
vDebug += " ["+ prop+ "]: '"+ e[prop]+ "'\n";
|
|
}
|
|
vDebug += "toString(): " + " value: [" + e.toString() + "]";
|
|
log.log(vDebug);
|
|
}
|
|
}
|
|
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
|
|
//
|
|
//plotBezier - recursive function to draw bezier curve
|
|
//
|
|
function $plotBezier(points, depth, displacement) {
|
|
var len = points.length, idx, jdx;
|
|
|
|
// calculate flatness to determine if we need to recurse...
|
|
var outer_distance = 0;
|
|
for (var idx = 1; idx < len; idx++) {
|
|
outer_distance += $point_distance(points[idx - 1], points[idx]);
|
|
}
|
|
var inner_distance = $point_distance(points[0], points[len - 1]);
|
|
var flatness = outer_distance / inner_distance;
|
|
|
|
// depth prevents stack overflow
|
|
// (I picked 12 because 2^12 = 2048 is larger than most monitors ;-)
|
|
// the flatness comparison value is somewhat arbitrary.
|
|
// (I just kept moving it closer to 1 until I got good results. ;-)
|
|
if ((depth > 12) || (flatness <= 1.001)) {
|
|
var p0 = points[0], pN = points[len - 1];
|
|
|
|
var vO = $point_normalizeTo($point_orthogonal($point_subtract(pN, p0)), displacement);
|
|
//$point_log("vO", vO);
|
|
|
|
if (bezier1st) {
|
|
var p0P = $point_add(p0, vO);
|
|
//$point_log("p0P", p0P);
|
|
$gCtx.moveTo(p0P[0], p0P[1]);
|
|
bezier1st = false;
|
|
}
|
|
var pNP = $point_add(pN, vO);
|
|
$gCtx.lineTo(pNP[0], pNP[1]);
|
|
} else {
|
|
// calculate (len - 1) order of points
|
|
// (zero'th order are the input points)
|
|
var orderPoints = [];
|
|
for (idx = 0; idx < len - 1; idx++) {
|
|
var nthOrderPoints = [];
|
|
for (jdx = 0; jdx < len - 1 - idx; jdx++) {
|
|
if (idx == 0) {
|
|
nthOrderPoints.push($point_midpoint(points[jdx], points[jdx + 1]));
|
|
} else {
|
|
nthOrderPoints.push($point_midpoint(orderPoints[idx - 1][jdx], orderPoints[idx - 1][jdx + 1]));
|
|
}
|
|
}
|
|
orderPoints.push(nthOrderPoints);
|
|
}
|
|
|
|
// collect left points
|
|
var leftPoints = [];
|
|
leftPoints.push(points[0]);
|
|
for (idx = 0; idx < len - 1; idx++) {
|
|
leftPoints.push(orderPoints[idx][0]);
|
|
}
|
|
// draw left side Bezier
|
|
$plotBezier(leftPoints, depth + 1, displacement);
|
|
|
|
// collect right points
|
|
var rightPoints = [];
|
|
for (idx = 0; idx < len - 1; idx++) {
|
|
rightPoints.push(orderPoints[len - 2 - idx][idx]);
|
|
}
|
|
rightPoints.push(points[len - 1]);
|
|
// draw right side Bezier
|
|
$plotBezier(rightPoints, depth + 1, displacement);
|
|
}
|
|
}
|
|
|
|
function $point_log(prefix, p) {
|
|
log.log(prefix + ": {" + p[0] + ", " + p[1] + "}");
|
|
}
|
|
|
|
function $getPoint(name) {
|
|
var point$ = $gPts[name];
|
|
return [Number(point$.x), Number(point$.y)];
|
|
}
|
|
|
|
function $point_length(p) {
|
|
var dx = p[0];
|
|
var dy = p[1];
|
|
return Math.hypot(dx, dy);
|
|
}
|
|
|
|
function $point_add(p1, p2) {
|
|
return [p1[0] + p2[0], p1[1] + p2[1]];
|
|
}
|
|
|
|
function $point_subtract(p1, p2) {
|
|
return [p1[0] - p2[0], p1[1] - p2[1]];
|
|
}
|
|
|
|
function $point_distance(p1, p2) {
|
|
var delta = $point_subtract(p1, p2);
|
|
return Math.hypot(delta[0], delta[1]);
|
|
}
|
|
|
|
function $point_midpoint(p1, p2) {
|
|
return [$half(p1[0], p2[0]), $half(p1[1], p2[1])];
|
|
}
|
|
|
|
function $point_normalizeTo(p, new_length) {
|
|
var m = new_length / $point_length(p);
|
|
return [p[0] * m, p[1] * m];
|
|
}
|
|
|
|
function $point_orthogonal(p) {
|
|
return [-p[1],p[0]];
|
|
}
|
|
|
|
function $computeAngleRAD(v) {
|
|
return Math.atan2(v[0], v[1]);
|
|
}
|
|
|
|
function $computeAngleRAD2(p1, p2) {
|
|
return $computeAngleRAD($point_subtract(p1, p2));
|
|
}
|
|
|
|
// Converts from degrees to radians.
|
|
function $toRadians(degrees) {
|
|
return degrees * Math.PI / 180;
|
|
};
|
|
|
|
// Converts from radians to degrees.
|
|
function $toDegrees(radians) {
|
|
return radians * 180 / Math.PI;
|
|
};
|
|
|
|
// rotate a point vector
|
|
function $point_rotate(point, angleRAD) {
|
|
var sinA = Math.sin(angleRAD), cosA = Math.cos(angleRAD);
|
|
var x = point[0], y = point[1];
|
|
return [cosA * x - sinA * y, sinA * x + cosA * y];
|
|
}
|
|
|
|
function $point_lerp(p1, p2, amount) {
|
|
return [$lerp(p1[0], p2[0], amount), $lerp(p1[1], p2[1], amount)]
|
|
}
|
|
|
|
function $point_third(p1, p2) {
|
|
return $point_lerp(p1, p2, 1.0/3.0);
|
|
}
|
|
|
|
//set object attributes from xml attributes, returning object
|
|
var $getObjFromXML = function(e) {
|
|
var $widget = {};
|
|
$(e.attributes).each(function() {
|
|
$widget[this.name] = this.value;
|
|
});
|
|
return $widget;
|
|
};
|
|
|
|
//redraw all "drawn" elements for given block (called after color change)
|
|
function $redrawBlock(blockName) {
|
|
//log.log("redrawing all tracks for block " + blockName);
|
|
//loop thru widgets, if block matches, redraw widget by proper method
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
$logProperties($widget);
|
|
if (($widget.blockname == blockName)
|
|
|| ($widget.blocknameac == blockName)
|
|
|| ($widget.blocknamebd == blockName)
|
|
|| ($widget.blockbname == blockName)
|
|
|| ($widget.blockcname == blockName)
|
|
|| ($widget.blockdname == blockName)) {
|
|
switch ($widget.widgetType) {
|
|
case 'layoutturnout' :
|
|
$drawTurnout($widget);
|
|
break;
|
|
case 'layoutSlip' :
|
|
$drawSlip($widget);
|
|
break;
|
|
case 'tracksegment' :
|
|
$drawTrackSegment($widget);
|
|
break;
|
|
case 'levelxing' :
|
|
$drawLevelXing($widget);
|
|
break;
|
|
}
|
|
}
|
|
if ($widget.widgetType == 'layoutSlip') {
|
|
if ((isDefined($widget.connectaname) && ($gWidgets[$widget.connectaname].blockname == blockName))
|
|
|| isDefined($widget.connectbname) && ($gWidgets[$widget.connectbname].blockname == blockName)
|
|
|| isDefined($widget.connectcname) && ($gWidgets[$widget.connectcname].blockname == blockName)
|
|
|| isDefined($widget.connectdname) && ($gWidgets[$widget.connectdname].blockname == blockName)){
|
|
$drawSlip($widget);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
//redraw all "drawn" elements to overcome some bidirectional dependencies in the xml
|
|
var $drawAllDrawnWidgets = function() {
|
|
//loop thru widgets, redrawing each visible widget by proper method
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
switch ($widget.widgetType) {
|
|
case 'layoutturnout' :
|
|
$drawTurnout($widget);
|
|
break;
|
|
case 'layoutSlip' :
|
|
$drawSlip($widget);
|
|
break;
|
|
case 'tracksegment' :
|
|
$drawTrackSegment($widget);
|
|
break;
|
|
case 'levelxing' :
|
|
$drawLevelXing($widget);
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
// redraw all "icon" Control Panel elements. Called after a delay to allow loading of images.
|
|
var $drawAllIconWidgets = function() {
|
|
//loop thru widgets, repositioning each icon widget
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
switch ($widget.widgetFamily) {
|
|
case 'icon' :
|
|
$setWidgetPosition($("#panel-area > #" + $widget.id));
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
// draw all beanswitch icons first time
|
|
var $drawAllSwitchIcons = function() {
|
|
jQuery.each($gWidgets, function($id, $widget) {
|
|
switch ($widget.widgetFamily) {
|
|
case 'switch' :
|
|
if (isDefined($widget['shape']) && ($widget.shape != "button")) {
|
|
$drawWidgetSymbol($id, UNKNOWN); // draw first time UNKNOWN = 0
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
function createPanelCanvas() {
|
|
if ($gCtx == undefined) { //create canvas if not already created
|
|
$("#panel-area").prepend("<canvas id='panelCanvas' width=" + $gPanel.panelwidth + "px height=" +
|
|
$gPanel.panelheight + "px style='position:absolute;z-index:2;'>");
|
|
var canvas = document.getElementById("panelCanvas");
|
|
$gCtx = canvas.getContext("2d");
|
|
$gCtx.strokeStyle = $gPanel.defaulttrackcolor;
|
|
$gCtx.lineWidth = $gPanel.sidelinetrackwidth;
|
|
//set background color from panel attribute (single hex value)
|
|
$("#panel-area").css({'background-color': $gPanel.backgroundcolor});
|
|
}
|
|
};
|
|
|
|
function updateWidgets(name, state, data) {
|
|
// update all widgets based on the element that changed, using systemname
|
|
if (whereUsed[name]) {
|
|
//log.log("updateWidgets(" + name + ", " + state + ")");
|
|
$.each(whereUsed[name], function(index, widgetId) {
|
|
$setWidgetState(widgetId, state, data);
|
|
});
|
|
}
|
|
//update all widgets based on the element that changed, using username
|
|
if (isDefined(data.userName) && whereUsed[data.userName]) {
|
|
//log.log("updateWidgets by username (" + data.userName + "), " + state);
|
|
$.each(whereUsed[data.userName], function(index, widgetId) {
|
|
$setWidgetState(widgetId, state, data);
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateOccupancy(sensorName, state, data) {
|
|
// handle occupancy sensors by systemname
|
|
if (occupancyNames[sensorName]) {
|
|
updateOccupancySub(sensorName, state);
|
|
}
|
|
// handle occupancy sensors by username
|
|
if (occupancyNames[data.userName]) {
|
|
updateOccupancySub(data.userName, state);
|
|
}
|
|
}
|
|
|
|
function updateOccupancySub(sensorName, state) {
|
|
if (occupancyNames[sensorName]) {
|
|
$.each(occupancyNames[sensorName], function(index, widgetId) {
|
|
$widget = $gWidgets[widgetId];
|
|
|
|
updateBlockSensorState($widget.blockname, sensorName, state);
|
|
updateBlockSensorState($widget.blocknameac, sensorName, state);
|
|
updateBlockSensorState($widget.blocknamebd, sensorName, state);
|
|
updateBlockSensorState($widget.blockbname, sensorName, state);
|
|
updateBlockSensorState($widget.blockcname, sensorName, state);
|
|
updateBlockSensorState($widget.blockdname, sensorName, state);
|
|
|
|
$widget.occupancystate = state; // set occupancy for the widget to the newstate
|
|
|
|
switch ($widget.widgetType) {
|
|
case 'layoutturnout' :
|
|
$drawTurnout($widget);
|
|
break;
|
|
case 'layoutSlip' :
|
|
$drawSlip($widget);
|
|
break;
|
|
case 'indicatortrackicon' :
|
|
case 'indicatorturnouticon' :
|
|
$reDrawIcon($widget)
|
|
//console.log("IT(O)I sensor change");
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateBlockSensorState(blockName, sensorName, sensorState) {
|
|
if (isDefined(blockName)) {
|
|
var $blk = $gBlks[blockName];
|
|
if (isDefined($blk)) {
|
|
if (isDefined($blk.occupancysensor)
|
|
&& ($blk.occupancysensor == sensorName)) {
|
|
$blk.state = sensorState;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function setBlockColor(blockName, newColor) {
|
|
//log.log("setBlockColor(" + blockName + ", " + newColor + ");");
|
|
var $blk = $gBlks[blockName];
|
|
if (isDefined($blk)) {
|
|
$gBlks[blockName].blockcolor = newColor;
|
|
} else {
|
|
log.error("ERROR: block " + blockName + " not found for color " + newColor);
|
|
}
|
|
$redrawBlock(blockName);
|
|
}
|
|
|
|
function updateOblocks(oblockName, status) { // based on updateOccupancy()
|
|
// all oblocks are handled by their systemname
|
|
if ($oblockNames[oblockName]) {
|
|
$.each($oblockNames[oblockName], function(index, widgetId) {
|
|
$widget = $gWidgets[widgetId];
|
|
switch ($widget.widgetType) {
|
|
case 'indicatortrackicon' :
|
|
case 'indicatorturnouticon' : // does not receive turnout state via oblock
|
|
//console.log("updateOblocks UNFILTERED " + oblockName + " on widget " + $widget.id + " status=" + status);
|
|
if (status < 0x16) { // ignore (un)occupied
|
|
// pass on as is
|
|
} else if ((status & TRACK_ERROR) == TRACK_ERROR) { // ErrorTrack, swallow DontUse, Allocated 0x80
|
|
status = (status & 0x86);
|
|
} else if ((status & OUT_OF_SERVICE) == OUT_OF_SERVICE) { // DontUseTrack, swallow Allocated, ignore Occupied 0x40
|
|
status = (status & 0x40);
|
|
} else if ((status & RUNNING) == RUNNING) { // Running = occupied by train (via oblock) 0x20
|
|
status = (status & 0x22); // keep Occupied bit
|
|
} else if ((status & 0x12) == 0x2) { // Occupied, swallow Allocated
|
|
status = (status & 0x2);
|
|
} else if ((status & ALLOCATED) == ALLOCATED) { // Allocated 0x10
|
|
status = (status & 0x12); // only keep Occupied bit, it should overrule ALLOCATED
|
|
}
|
|
$widget.occupancystate = status; // set occupancy for the widget to the new occ.status
|
|
//console.log("updateOblocks FILTERED FOR " + oblockName + " on widget " + $widget.id + " status=" + $widget.occupancystate);
|
|
|
|
// enable/disable turnout click handling
|
|
if (status == OUT_OF_SERVICE) {
|
|
$('#'+$widget.id).removeClass("clickable");
|
|
$('#'+$widget.id).unbind(UPEVENT, $handleClick);
|
|
} else {
|
|
$('#'+$widget.id).addClass("clickable");
|
|
$('#'+$widget.id).bind(UPEVENT, $handleClick);
|
|
}
|
|
|
|
$reDrawIcon($widget);
|
|
break;
|
|
default:
|
|
break; // shouldn't get here
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// convert turnout state to string
|
|
function turnoutStateToString(state) {
|
|
result = "UKNOWN"
|
|
switch (state) {
|
|
case 2:
|
|
result = "CLOSED";
|
|
break;
|
|
case 4:
|
|
result = "THROWN";
|
|
break;
|
|
case 8:
|
|
result = "INCONSISTENT";
|
|
break;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// convert slip state to string
|
|
function slipStateToString(state) {
|
|
result = "UNKNOWN";
|
|
switch (state) {
|
|
case STATE_AC:
|
|
result = "STATE_AC";
|
|
break;
|
|
case STATE_AD:
|
|
result = "STATE_AD";
|
|
break;
|
|
case STATE_BC:
|
|
result = "STATE_BC";
|
|
break;
|
|
case STATE_BD:
|
|
result = "STATE_BD";
|
|
break;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function getTurnoutStatesForSlipState(slipWidget, slipState) {
|
|
var results = [UNKNOWN, UNKNOWN];
|
|
if (isDefined(slipWidget)) {
|
|
if (slipWidget.widgetType == 'layoutSlip') {
|
|
switch (slipState) {
|
|
case STATE_AC:
|
|
results = [slipWidget.turnoutA_AC, slipWidget.turnoutB_AC];
|
|
break;
|
|
case STATE_AD:
|
|
results = [slipWidget.turnoutA_AD, slipWidget.turnoutB_AD];
|
|
break;
|
|
case STATE_BC:
|
|
results = [slipWidget.turnoutA_BC, slipWidget.turnoutB_BC];
|
|
break;
|
|
case STATE_BD:
|
|
results = [slipWidget.turnoutA_BD, slipWidget.turnoutB_BD];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
|
|
function getTurnoutStatesForSlip(slipWidget) {
|
|
return getTurnoutStatesForSlipState(slipWidget, slipWidget.state);
|
|
}
|
|
|
|
function getSlipStateForTurnoutStatesClosest(slipWidget, stateA, stateB, useClosest) {
|
|
var result = UNKNOWN;
|
|
if ((stateA == slipWidget.turnoutA_AC) && (stateB == slipWidget.turnoutB_AC)) {
|
|
result = STATE_AC;
|
|
} else if ((stateA == slipWidget.turnoutA_AD) && (stateB == slipWidget.turnoutB_AD)) {
|
|
result = STATE_AD;
|
|
} else if ((slipWidget.slipType == DOUBLE_SLIP)
|
|
&& (stateA == slipWidget.turnoutA_BC) && (stateB == slipWidget.turnoutB_BC)) {
|
|
result = STATE_BC;
|
|
} else if ((stateA == slipWidget.turnoutA_BD) && (stateB == slipWidget.turnoutB_BD)) {
|
|
result = STATE_BD;
|
|
} else if (useClosest) {
|
|
if ((stateA == slipWidget.turnoutA_AC) || (stateB == slipWidget.turnoutB_AC)) {
|
|
result = STATE_AC;
|
|
} else if ((stateA == slipWidget.turnoutA_AD) || (stateB == slipWidget.turnoutB_AD)) {
|
|
result = STATE_AD;
|
|
} else if ((slipWidget.slipType == DOUBLE_SLIP)
|
|
&& (stateA == slipWidget.turnoutA_BC) || (stateB == slipWidget.turnoutB_BC)) {
|
|
result = STATE_BC;
|
|
} else if ((stateA == slipWidget.turnoutA_BD) || (stateB == slipWidget.turnoutB_BD)) {
|
|
result = STATE_BD;
|
|
} else {
|
|
result = STATE_AD;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function getSlipStateForTurnoutStates(slipWidget, stateA, stateB) {
|
|
return getSlipStateForTurnoutStatesClosest(slipWidget, stateA, stateB, false)
|
|
}
|
|
|
|
//slip A==-==D
|
|
// \\ //
|
|
// X
|
|
// // \\
|
|
// B==-==C
|
|
// var STATE_AC = 0x02;
|
|
// var STATE_BD = 0x04;
|
|
// var STATE_AD = 0x06;
|
|
// var STATE_BC = 0x08;
|
|
// var CLOSED = '2';
|
|
// var THROWN = '4';
|
|
|
|
function getNextSlipState(slipWidget) {
|
|
var result = UNKNOWN;
|
|
|
|
// log.log("****************************");
|
|
// log.log("slipWidget.side:" + slipWidget.side);
|
|
// log.log(" slipWidget.state:" + slipWidget.state);
|
|
switch (slipWidget.side) {
|
|
case 'left': {
|
|
switch (slipWidget.state) {
|
|
case STATE_AC:
|
|
if (slipWidget.slipType == SINGLE_SLIP) {
|
|
result = STATE_BD;
|
|
} else {
|
|
result = STATE_BC;
|
|
}
|
|
break;
|
|
case STATE_AD:
|
|
result = STATE_BD;
|
|
break;
|
|
case STATE_BC:
|
|
default:
|
|
result = STATE_AC;
|
|
break;
|
|
case STATE_BD:
|
|
result = STATE_AD;
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
case 'right': {
|
|
switch (slipWidget.state) {
|
|
case STATE_AC:
|
|
result = STATE_AD;
|
|
break;
|
|
case STATE_AD:
|
|
result = STATE_AC;
|
|
break;
|
|
case STATE_BC:
|
|
default:
|
|
result = STATE_BD;
|
|
break;
|
|
case STATE_BD:
|
|
if (slipWidget.slipType == SINGLE_SLIP) {
|
|
result = STATE_AC;
|
|
} else {
|
|
result = STATE_BC;
|
|
}
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
default: {
|
|
log.log("getNextSlipState($widget): unknown $widget.side: " + slipWidget.side);
|
|
break;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
// ======= End of Layout Editor functions =======
|
|
|
|
/******************************************************************
|
|
* ======= Layout Editor Decoration classes =======
|
|
*/
|
|
|
|
class Decoration {
|
|
constructor($widget) {
|
|
//log.log("Decoration.constructor(...)");
|
|
$logProperties(this.$widget);
|
|
this.$widget = $widget;
|
|
}
|
|
getEndPoints() {
|
|
[this.ep1, this.ep2] = $getEndPoints(this.$widget);
|
|
//log.log("ep1 = {" + this.ep1[0] + "," + this.ep1[1] + "}, ep2 = {" + this.ep2[0] + "," + this.ep2[1] + "}");
|
|
}
|
|
getAngles() {
|
|
var $widget = this.$widget;
|
|
if ($widget.bezier == "yes") {
|
|
this.getBezierAngles();
|
|
} else if ($widget.circle == "yes") {
|
|
this.getCircleAngles();
|
|
} else if ($widget.arc == "yes") {
|
|
this.getArcAngles();
|
|
} else {
|
|
this.startAngleRAD = (Math.PI / 2) - $computeAngleRAD2(this.ep2, this.ep1);
|
|
this.stopAngleRAD = this.startAngleRAD;
|
|
}
|
|
//log.log("startAngleDEG: " + $toDegrees(this.startAngleRAD) + ", stopAngleDEG: " + $toDegrees(this.stopAngleRAD) + ".");
|
|
}
|
|
getBezierAngles() {
|
|
var $widget = this.$widget;
|
|
var $cps = $widget.controlpoints; // get the control points
|
|
var $cp0 = $cps[0];
|
|
var $cpN = $cps[$cps.length - 1];
|
|
var cp0 = $getLayoutPoint($cp0);
|
|
var cpN = $getLayoutPoint($cpN);
|
|
this.startAngleRAD = (Math.PI / 2) - $computeAngleRAD2(cp0, this.ep1);
|
|
this.stopAngleRAD = (Math.PI / 2) - $computeAngleRAD2(this.ep2, cpN);
|
|
}
|
|
getCircleAngles() {
|
|
var $widget = this.$widget;
|
|
var extentAngleDEG = $widget.angle;
|
|
if (extentAngleDEG == 0) {
|
|
extentAngleDEG = 90;
|
|
}
|
|
var startAngleRAD, stopAngleRAD;
|
|
// Convert angle to radiants in order to speed up math
|
|
var halfAngleRAD = $toRadians(extentAngleDEG) / 2;
|
|
// Compute arc's chord
|
|
var a = this.ep2[0] - this.ep1[0];
|
|
var o = this.ep2[1] - this.ep1[1];
|
|
var chord = Math.hypot(a, o);
|
|
// Make sure chord is not null
|
|
// In such a case (ep1 == ep2), there is no arc to draw
|
|
if (chord > 0) {
|
|
var midAngleRAD = Math.atan2(a, o);
|
|
startAngleRAD = (Math.PI / 2) - (midAngleRAD + halfAngleRAD);
|
|
stopAngleRAD = (Math.PI / 2) - (midAngleRAD - halfAngleRAD);
|
|
}
|
|
this.startAngleRAD = startAngleRAD; this.stopAngleRAD = stopAngleRAD;
|
|
}
|
|
getArcAngles() {
|
|
var startAngleRAD, stopAngleRAD;
|
|
if (this.ep1[0] < this.ep2[0]) {
|
|
if (this.ep1[1] < this.ep2[1]) { //log.log("#### QUAD ONE ####");
|
|
startAngleRAD = 0; stopAngleRAD = Math.PI / 2;
|
|
} else { //log.log("#### QUAD TWO ####");
|
|
startAngleRAD = -Math.PI / 2; stopAngleRAD = 0;
|
|
}
|
|
} else {
|
|
if (this.ep1[1] < this.ep2[1]) { //log.log("#### QUAD THREE ####");
|
|
startAngleRAD = Math.PI / 2; stopAngleRAD = Math.PI;
|
|
} else { //log.log("#### QUAD FOUR ####");
|
|
startAngleRAD = Math.PI; stopAngleRAD = -Math.PI / 2;
|
|
}
|
|
}
|
|
this.startAngleRAD = startAngleRAD; this.stopAngleRAD = stopAngleRAD;
|
|
}
|
|
|
|
draw() {
|
|
this.getEndPoints();
|
|
this.getAngles();
|
|
}
|
|
|
|
getArcParams(rw, rh, tp1, tp2) {
|
|
var x, y;
|
|
if (rw < 0) {
|
|
rw = -rw;
|
|
if (rh < 0) { //log.log("**** QUAD ONE ****");
|
|
x = tp1[0]; y = tp2[1];
|
|
rh = -rh;
|
|
} else { //log.log("**** QUAD TWO ****");
|
|
x = tp2[0]; y = tp1[1];
|
|
}
|
|
} else {
|
|
if (rh < 0) { //log.log("**** QUAD THREE ****");
|
|
x = tp2[0]; y = tp1[1];
|
|
rh = -rh;
|
|
} else { //log.log("**** QUAD FOUR ****");
|
|
x = tp1[0]; y = tp2[1];
|
|
}
|
|
}
|
|
return [x, y, rw, rh];
|
|
}
|
|
} // class Decoration
|
|
|
|
class ArrowDecoration extends Decoration {
|
|
constructor($widget, $arrow) {
|
|
super($widget);
|
|
//<arrow style="4" end="stop" direction="out" color="#000000" linewidth="4" length="16" gap="1" />
|
|
this.style = Number($arrow.attr('style'));
|
|
this.end = $arrow.attr('end');
|
|
this.direction = $arrow.attr('direction');
|
|
this.color = $arrow.attr('color');
|
|
this.linewidth = Number($arrow.attr('linewidth'));
|
|
this.length = Number($arrow.attr('length'));
|
|
this.gap = Number($arrow.attr('gap'));
|
|
//log.log("arrow: {end:" + this.end + ", dir: " + this.direction + "}");
|
|
}
|
|
draw() {
|
|
super.draw();
|
|
$gCtx.save(); // save current line width and color
|
|
// set color and width
|
|
$gCtx.strokeStyle = this.color;
|
|
$gCtx.fillStyle = this.color;
|
|
$gCtx.lineWidth = this.linewidth;
|
|
this.drawArrowStart();
|
|
this.drawArrowStop();
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
drawArrowStart() {
|
|
var angleRAD = this.startAngleRAD;
|
|
if (this.$widget.flip == "yes") {
|
|
angleRAD = this.stopAngleRAD;
|
|
}
|
|
this.offset = 1; // draw the start arrows
|
|
if ((this.end == "start") || (this.end == "both")) {
|
|
if ((this.direction == "in") || (this.direction == "both")) {
|
|
this.drawArrowIn(this.ep1, Math.PI + angleRAD);
|
|
}
|
|
if ((this.direction == "out") || (this.direction == "both")) {
|
|
this.drawArrowOut(this.ep1, Math.PI + angleRAD);
|
|
}
|
|
}
|
|
}
|
|
drawArrowStop() {
|
|
var angleRAD = this.stopAngleRAD;
|
|
if (this.$widget.flip == "yes") {
|
|
angleRAD = this.startAngleRAD;
|
|
}
|
|
this.offset = 1; // draw the stop arrows
|
|
if ((this.end == "stop") || (this.end == "both")) {
|
|
if ((this.direction == "in") || (this.direction == "both")) {
|
|
this.drawArrowIn(this.ep2, angleRAD);
|
|
}
|
|
if ((this.direction == "out") || (this.direction == "both")) {
|
|
this.drawArrowOut(this.ep2, angleRAD);
|
|
}
|
|
}
|
|
}
|
|
drawArrowIn(ep, angleRAD) {
|
|
$gCtx.save();
|
|
$gCtx.translate(ep[0], ep[1]);
|
|
$gCtx.rotate(angleRAD);
|
|
|
|
switch (this.style) {
|
|
default:
|
|
this.style = 0;
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
this.drawArrow1In();
|
|
break;
|
|
case 2:
|
|
this.drawArrow2In();
|
|
break;
|
|
case 3:
|
|
this.drawArrow3In();
|
|
break;
|
|
case 4:
|
|
this.drawArrow4In();
|
|
break;
|
|
case 5:
|
|
this.drawArrow5In();
|
|
}
|
|
$gCtx.restore();
|
|
} // drawArrowIn
|
|
|
|
drawArrowOut(ep, angleRAD) {
|
|
$gCtx.save();
|
|
$gCtx.translate(ep[0], ep[1]);
|
|
$gCtx.rotate(angleRAD);
|
|
|
|
switch (this.style) {
|
|
default:
|
|
this.style = 0;
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
this.drawArrow1Out();
|
|
break;
|
|
case 2:
|
|
this.drawArrow2Out();
|
|
break;
|
|
case 3:
|
|
this.drawArrow3Out();
|
|
break;
|
|
case 4:
|
|
this.drawArrow4Out();
|
|
break;
|
|
case 5:
|
|
this.drawArrow5Out();
|
|
}
|
|
$gCtx.restore();
|
|
} // drawArrowIn
|
|
|
|
drawArrow1In() {
|
|
var p1 = [this.offset + this.length, -this.length];
|
|
var p2 = [this.offset, 0];
|
|
var p3 = [this.offset + this.length, +this.length];
|
|
|
|
$drawLineP(p1, p2);
|
|
$drawLineP(p2, p3);
|
|
this.offset += this.length + this.gap;
|
|
}
|
|
|
|
drawArrow1Out() {
|
|
var p1 = [this.offset, -this.length];
|
|
var p2 = [this.offset + this.length, 0];
|
|
var p3 = [this.offset, +this.length];
|
|
|
|
$drawLineP(p1, p2);
|
|
$drawLineP(p2, p3);
|
|
this.offset += this.length + this.gap;
|
|
}
|
|
|
|
drawArrow2In() {
|
|
var p1 = [this.offset + this.length, -this.length];
|
|
var p2 = [this.offset, 0];
|
|
var p3 = [this.offset + this.length, +this.length];
|
|
var p4 = [this.offset + this.linewidth + this.gap + this.length, -this.length];
|
|
var p5 = [this.offset + this.linewidth + this.gap, 0];
|
|
var p6 = [this.offset + this.linewidth + this.gap + this.length, +this.length];
|
|
|
|
$drawLineP(p1, p2);
|
|
$drawLineP(p2, p3);
|
|
$drawLineP(p4, p5);
|
|
$drawLineP(p5, p6);
|
|
this.offset += this.length + (2 * (this.linewidth + this.gap));
|
|
}
|
|
|
|
drawArrow2Out() {
|
|
var p1 = [this.offset, -this.length];
|
|
var p2 = [this.offset + this.length, 0];
|
|
var p3 = [this.offset, +this.length];
|
|
var p4 = [this.offset + this.linewidth + this.gap, -this.length];
|
|
var p5 = [this.offset + this.linewidth + this.gap + this.length, 0];
|
|
var p6 = [this.offset + this.linewidth + this.gap, +this.length];
|
|
|
|
$drawLineP(p1, p2);
|
|
$drawLineP(p2, p3);
|
|
$drawLineP(p4, p5);
|
|
$drawLineP(p5, p6);
|
|
this.offset += this.length + (2 * (this.linewidth + this.gap));
|
|
}
|
|
|
|
drawArrow3In() {
|
|
var p1 = [this.offset + this.length, -this.length];
|
|
var p2 = [this.offset, 0];
|
|
var p3 = [this.offset + this.length, +this.length];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.lineTo(p3[0], p3[1]);
|
|
$gCtx.closePath();
|
|
if (this.linewidth > 1) {
|
|
$gCtx.fill();
|
|
} else {
|
|
$gCtx.stroke();
|
|
}
|
|
this.offset += this.length + this.gap;
|
|
}
|
|
|
|
drawArrow3Out() {
|
|
var p1 = [this.offset, -this.length];
|
|
var p2 = [this.offset + this.length, 0];
|
|
var p3 = [this.offset, +this.length];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.lineTo(p3[0], p3[1]);
|
|
$gCtx.closePath();
|
|
if (this.linewidth > 1) {
|
|
$gCtx.fill();
|
|
} else {
|
|
$gCtx.stroke();
|
|
}
|
|
this.offset += this.length + this.gap;
|
|
}
|
|
|
|
drawArrow4In() {
|
|
var p1 = [this.offset, 0];
|
|
var p2 = [this.offset + (4 * this.length), -this.length];
|
|
var p3 = [this.offset + (3 * this.length), 0];
|
|
var p4 = [this.offset + (4 * this.length), +this.length];
|
|
|
|
$drawLineP(p1, p3);
|
|
$drawLineP(p2, p3);
|
|
$drawLineP(p3, p4);
|
|
this.offset += (3 * this.length) + this.gap;
|
|
}
|
|
|
|
drawArrow4Out() {
|
|
var p1 = [this.offset, 0];
|
|
var p2 = [this.offset + (2 * this.length), -this.length];
|
|
var p3 = [this.offset + (3 * this.length), 0];
|
|
var p4 = [this.offset + (2 * this.length), +this.length];
|
|
|
|
$drawLineP(p1, p3);
|
|
$drawLineP(p2, p3);
|
|
$drawLineP(p3, p4);
|
|
this.offset += (3 * this.length) + this.gap;
|
|
}
|
|
|
|
drawArrow5In() {
|
|
var p1 = [this.offset, 0];
|
|
var p2 = [this.offset + (4 * this.length), -this.length];
|
|
var p3 = [this.offset + (3 * this.length), 0];
|
|
var p4 = [this.offset + (4 * this.length), +this.length];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p4[0], p4[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.lineTo(p3[0], p3[1]);
|
|
$gCtx.closePath();
|
|
if (this.linewidth > 1) {
|
|
$gCtx.fill();
|
|
} else {
|
|
$gCtx.stroke();
|
|
}
|
|
$drawLineP(p1, p3);
|
|
this.offset += (3 * this.length) + this.gap;
|
|
}
|
|
|
|
drawArrow5Out() {
|
|
var p1 = [this.offset, 0];
|
|
var p2 = [this.offset + (2 * this.length), -this.length];
|
|
var p3 = [this.offset + (3 * this.length), 0];
|
|
var p4 = [this.offset + (2 * this.length), +this.length];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p4[0], p4[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.lineTo(p3[0], p3[1]);
|
|
$gCtx.closePath();
|
|
if (this.linewidth > 1) {
|
|
$gCtx.fill();
|
|
} else {
|
|
$gCtx.stroke();
|
|
}
|
|
$drawLineP(p1, p3);
|
|
this.offset += (3 * this.length) + this.gap;
|
|
}
|
|
} // class ArrowDecoration
|
|
|
|
class BridgeDecoration extends Decoration {
|
|
constructor($widget, $bridge) {
|
|
super($widget);
|
|
//<bridge side="both" end="both" color="#000000" linewidth="1" approachwidth="8" deckwidth="10" />
|
|
this.side = $bridge.attr('side');
|
|
this.end = $bridge.attr('end');
|
|
this.color = $bridge.attr('color');
|
|
this.linewidth = Number($bridge.attr('linewidth'));
|
|
this.approachwidth = Number($bridge.attr('approachwidth'));
|
|
this.deckwidth = Number($bridge.attr('deckwidth'));
|
|
}
|
|
draw() {
|
|
super.draw();
|
|
var $widget = this.$widget;
|
|
$gCtx.save(); // save current line width and color
|
|
// set color and width
|
|
$gCtx.strokeStyle = this.color;
|
|
$gCtx.fillStyle = this.color;
|
|
$gCtx.lineWidth = this.linewidth;
|
|
if ($widget.circle == "yes") {
|
|
this.drawBridgeCircle();
|
|
} else if ($widget.arc == "yes") {
|
|
this.drawBridgeArc();
|
|
} else if ($widget.bezier == "yes") {
|
|
this.drawBridgeBezier();
|
|
} else {
|
|
this.drawBridgeStrait();
|
|
}
|
|
this.drawBridgeEnds();
|
|
$gCtx.restore(); // restore color and width back to default
|
|
} // draw()
|
|
|
|
drawBridgeCircle() {
|
|
var $widget = this.$widget;
|
|
var halfWidth = this.deckwidth / 2;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
var v = [0, +halfWidth];
|
|
if ($widget.flip == "yes") {
|
|
v = [0, -halfWidth];
|
|
[startAngleRAD, stopAngleRAD] = [stopAngleRAD, startAngleRAD];
|
|
}
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
var tp1 = $point_add(ep1, $point_rotate(v, startAngleRAD));
|
|
var tp2 = $point_add(ep2, $point_rotate(v, stopAngleRAD));
|
|
if ($widget.flip == "yes") {
|
|
$drawArcP(tp2, tp1, $widget.angle);
|
|
} else {
|
|
$drawArcP(tp1, tp2, $widget.angle);
|
|
}
|
|
}
|
|
if ((this.side == "left") || (this.side == "both")) {
|
|
var tp1 = $point_subtract(ep1, $point_rotate(v, startAngleRAD));
|
|
var tp2 = $point_subtract(ep2, $point_rotate(v, stopAngleRAD));
|
|
if ($widget.flip == "yes") {
|
|
$drawArcP(tp2, tp1, $widget.angle);
|
|
} else {
|
|
$drawArcP(tp1, tp2, $widget.angle);
|
|
}
|
|
}
|
|
}
|
|
drawBridgeArc() { //draw arc of ellipse
|
|
var $widget = this.$widget;
|
|
var tp1 = this.ep1, tp2 = this.ep2;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
if ($widget.flip == "yes") {
|
|
[tp1, tp2] = [tp2, tp1];
|
|
startAngleRAD += Math.PI;
|
|
stopAngleRAD += Math.PI;
|
|
}
|
|
var halfWidth = this.deckwidth / 2;
|
|
var x, y;
|
|
var rw = tp2[0] - tp1[0], rh = tp2[1] - tp1[1];
|
|
[x, y, rw, rh] = this.getArcParams(rw, rh, tp1, tp2);
|
|
|
|
rw -= halfWidth; rh -= halfWidth;
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawEllipse(x, y, rw, rh, Math.PI + stopAngleRAD, startAngleRAD);
|
|
}
|
|
rw += this.deckwidth; rh += this.deckwidth;
|
|
if ((this.side == "left") || (this.side == "both")) {
|
|
$drawEllipse(x, y, rw, rh, Math.PI + stopAngleRAD, startAngleRAD);
|
|
}
|
|
} // drawBridgeArc()
|
|
|
|
drawBridgeBezier() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var points = [[ep1[0], ep1[1]]]; // first point
|
|
var $cps = $widget.controlpoints; // get the control points
|
|
$cps.each(function( idx, elem ) { // control points
|
|
points.push($getLayoutPoint(elem));
|
|
});
|
|
points.push([ep2[0], ep2[1]]); // last point
|
|
var halfWidth = this.deckwidth / 2;
|
|
if (((this.side == "left") || (this.side == "both"))) {
|
|
$drawBezier(points, this.color, this.linewidth, -halfWidth);
|
|
}
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawBezier(points, this.color, this.linewidth, +halfWidth);
|
|
}
|
|
}
|
|
drawBridgeStrait() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var halfWidth = this.deckwidth / 2;
|
|
var vector = $point_orthogonal($point_normalizeTo($point_subtract(ep2, ep1), halfWidth));
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawLineP($point_add(ep1, vector), $point_add(ep2, vector));
|
|
}
|
|
if (((this.side == "left") || (this.side == "both"))) {
|
|
$drawLineP($point_subtract(ep1, vector), $point_subtract(ep2, vector));
|
|
}
|
|
}
|
|
drawBridgeEnds() {
|
|
if ((this.end == "entry") || (this.end == "both")) {
|
|
this.drawBridgeEntry();
|
|
}
|
|
if ((this.end == "exit") || (this.end == "both")) {
|
|
this.drawBridgeExit();
|
|
}
|
|
}
|
|
drawBridgeEntry() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
var halfWidth = this.deckwidth / 2;
|
|
var isRight = ((this.side == "right") || (this.side == "both"));
|
|
var isLeft = ((this.side == "left") || (this.side == "both"));
|
|
if ($widget.flip == "yes") {
|
|
[isRight, isLeft] = [isLeft, isRight];
|
|
[startAngleRAD, stopAngleRAD] = [stopAngleRAD, startAngleRAD];
|
|
}
|
|
var p1, p2;
|
|
if (isRight) {
|
|
p1 = [-this.approachwidth, +this.approachwidth + halfWidth];
|
|
p2 = [0, +halfWidth];
|
|
p1 = $point_add($point_rotate(p1, startAngleRAD), ep1);
|
|
p2 = $point_add($point_rotate(p2, startAngleRAD), ep1);
|
|
$drawLineP(p1, p2);
|
|
}
|
|
if (isLeft) {
|
|
p1 = [-this.approachwidth, -this.approachwidth - halfWidth];
|
|
p2 = [0, -halfWidth];
|
|
p1 = $point_add($point_rotate(p1, startAngleRAD), ep1);
|
|
p2 = $point_add($point_rotate(p2, startAngleRAD), ep1);
|
|
$drawLineP(p1, p2);
|
|
}
|
|
}
|
|
drawBridgeExit() {
|
|
var $widget = this.$widget;
|
|
var ep2 = this.ep2;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
var halfWidth = this.deckwidth / 2;
|
|
var isRight = ((this.side == "right") || (this.side == "both"));
|
|
var isLeft = ((this.side == "left") || (this.side == "both"));
|
|
if ($widget.flip == "yes") {
|
|
[isRight, isLeft] = [isLeft, isRight];
|
|
[startAngleRAD, stopAngleRAD] = [stopAngleRAD, startAngleRAD];
|
|
}
|
|
var p1, p2;
|
|
if (isRight) {
|
|
p1 = [+this.approachwidth, +this.approachwidth + halfWidth];
|
|
p2 = [0, +halfWidth];
|
|
p1 = $point_add($point_rotate(p1, stopAngleRAD), ep2);
|
|
p2 = $point_add($point_rotate(p2, stopAngleRAD), ep2);
|
|
$drawLineP(p1, p2);
|
|
}
|
|
if (isLeft) {
|
|
p1 = [+this.approachwidth, -this.approachwidth - halfWidth];
|
|
p2 = [0, -halfWidth];
|
|
p1 = $point_add($point_rotate(p1, stopAngleRAD), ep2);
|
|
p2 = $point_add($point_rotate(p2, stopAngleRAD), ep2);
|
|
$drawLineP(p1, p2);
|
|
}
|
|
}
|
|
} // BridgeDecoration
|
|
|
|
class BumperDecoration extends Decoration {
|
|
constructor($widget, $bumper) {
|
|
super($widget);
|
|
//<bumper end="stop" color="#000000" linewidth="2" length="16" />
|
|
this.end = $bumper.attr('end');
|
|
this.color = $bumper.attr('color');
|
|
this.linewidth = Number($bumper.attr('linewidth'));
|
|
this.length = Number($bumper.attr('length'));
|
|
}
|
|
draw() {
|
|
super.draw();
|
|
$gCtx.save(); // save current line width and color
|
|
// set color and width
|
|
$gCtx.strokeStyle = this.color;
|
|
$gCtx.fillStyle = this.color;
|
|
$gCtx.lineWidth = this.linewidth;
|
|
var $widget = this.$widget;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
if ($widget.flip == "yes") {
|
|
[startAngleRAD, stopAngleRAD] = [stopAngleRAD, startAngleRAD];
|
|
}
|
|
var bumperLength = this.length;
|
|
var halfLength = bumperLength / 2;
|
|
// common points
|
|
if ((this.end == "start") || (this.end == "both")) {
|
|
var p1 = [0, -halfLength], p2 = [0, +halfLength];
|
|
var p1 = $point_add($point_rotate(p1, startAngleRAD), this.ep1);
|
|
var p2 = $point_add($point_rotate(p2, startAngleRAD), this.ep1);
|
|
$drawLineP(p1, p2); // draw cross tie
|
|
}
|
|
if ((this.end == "stop") || (this.end == "both")) {
|
|
var p1 = [0, -halfLength], p2 = [0, +halfLength];
|
|
var p1 = $point_add($point_rotate(p1, stopAngleRAD), this.ep2);
|
|
var p2 = $point_add($point_rotate(p2, stopAngleRAD), this.ep2);
|
|
$drawLineP(p1, p2); // draw cross tie
|
|
}
|
|
$gCtx.restore(); // restore color and width back to default
|
|
}
|
|
} // class BumperDecoration
|
|
|
|
class TunnelDecoration extends Decoration {
|
|
constructor($widget, $tunnel) {
|
|
super($widget);
|
|
//<tunnel side="right" end="both" color="#FF00FF" linewidth="2" entrancewidth="16" floorwidth="12" />
|
|
this.side = $tunnel.attr('side');
|
|
|
|
this.end = $tunnel.attr('end');
|
|
this.color = $tunnel.attr('color');
|
|
this.linewidth = Number($tunnel.attr('linewidth'));
|
|
this.entrancewidth = Number($tunnel.attr('entrancewidth'));
|
|
this.floorwidth = Number($tunnel.attr('floorwidth'));
|
|
}
|
|
draw() {
|
|
super.draw();
|
|
var $widget = this.$widget;
|
|
$gCtx.save(); // save current line width and color
|
|
// set color and width
|
|
$gCtx.strokeStyle = this.color;
|
|
$gCtx.fillStyle = this.color;
|
|
$gCtx.lineWidth = this.linewidth;
|
|
$gCtx.setLineDash([6, 4]);
|
|
if ($widget.circle == "yes") {
|
|
this.drawTunnelCircle();
|
|
} else if ($widget.arc == "yes") {
|
|
this.drawTunnelArc();
|
|
} else if ($widget.bezier == "yes") {
|
|
this.drawTunnelBezier();
|
|
} else {
|
|
this.drawTunnelStrait();
|
|
}
|
|
$gCtx.setLineDash([]);
|
|
this.drawTunnelEnds();
|
|
$gCtx.restore(); // restore color and width back to default
|
|
} // draw()
|
|
|
|
drawTunnelCircle() {
|
|
var $widget = this.$widget;
|
|
var halfWidth = this.floorwidth / 2;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
var v = [0, +halfWidth];
|
|
if ($widget.flip == "yes") {
|
|
v = [0, -halfWidth];
|
|
[startAngleRAD, stopAngleRAD] = [stopAngleRAD, startAngleRAD];
|
|
}
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
var tp1 = $point_add(ep1, $point_rotate(v, startAngleRAD));
|
|
var tp2 = $point_add(ep2, $point_rotate(v, stopAngleRAD));
|
|
if ($widget.flip == "yes") {
|
|
$drawArcP(tp2, tp1, $widget.angle);
|
|
} else {
|
|
$drawArcP(tp1, tp2, $widget.angle);
|
|
}
|
|
}
|
|
if ((this.side == "left") || (this.side == "both")) {
|
|
var tp1 = $point_subtract(ep1, $point_rotate(v, startAngleRAD));
|
|
var tp2 = $point_subtract(ep2, $point_rotate(v, stopAngleRAD));
|
|
if ($widget.flip == "yes") {
|
|
$drawArcP(tp2, tp1, $widget.angle);
|
|
} else {
|
|
$drawArcP(tp1, tp2, $widget.angle);
|
|
}
|
|
}
|
|
}
|
|
drawTunnelArc() { //draw arc of ellipse
|
|
var $widget = this.$widget;
|
|
var tp1 = this.ep1, tp2 = this.ep2;
|
|
var startAngleRAD = this.startAngleRAD, stopAngleRAD = this.stopAngleRAD;
|
|
if ($widget.flip == "yes") {
|
|
[tp1, tp2] = [tp2, tp1];
|
|
startAngleRAD += Math.PI;
|
|
stopAngleRAD += Math.PI;
|
|
}
|
|
var halfWidth = this.floorwidth / 2;
|
|
var x, y;
|
|
var rw = tp2[0] - tp1[0], rh = tp2[1] - tp1[1];
|
|
[x, y, rw, rh] = this.getArcParams(rw, rh, tp1, tp2);
|
|
|
|
rw -= halfWidth; rh -= halfWidth;
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawEllipse(x, y, rw, rh, Math.PI + stopAngleRAD, startAngleRAD);
|
|
}
|
|
rw += this.floorwidth; rh += this.floorwidth;
|
|
if ((this.side == "left") || (this.side == "both")) {
|
|
$drawEllipse(x, y, rw, rh, Math.PI + stopAngleRAD, startAngleRAD);
|
|
}
|
|
} // drawTunnelArc()
|
|
|
|
drawTunnelBezier() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var points = [[ep1[0], ep1[1]]]; // first point
|
|
var $cps = $widget.controlpoints; // get the control points
|
|
$cps.each(function( idx, elem ) { // control points
|
|
points.push($getLayoutPoint(elem));
|
|
});
|
|
points.push([ep2[0], ep2[1]]); // last point
|
|
var halfWidth = this.floorwidth / 2;
|
|
if (((this.side == "left") || (this.side == "both"))) {
|
|
$drawBezier(points, this.color, this.linewidth, -halfWidth);
|
|
}
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawBezier(points, this.color, this.linewidth, +halfWidth);
|
|
}
|
|
}
|
|
drawTunnelStrait() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1, ep2 = this.ep2;
|
|
var halfWidth = this.floorwidth / 2;
|
|
var vector = $point_orthogonal($point_normalizeTo($point_subtract(ep2, ep1), halfWidth));
|
|
if ((this.side == "right") || (this.side == "both")) {
|
|
$drawLineP($point_add(ep1, vector), $point_add(ep2, vector));
|
|
}
|
|
if (((this.side == "left") || (this.side == "both"))) {
|
|
$drawLineP($point_subtract(ep1, vector), $point_subtract(ep2, vector));
|
|
}
|
|
}
|
|
drawTunnelEnds() {
|
|
if ((this.end == "entry") || (this.end == "both")) {
|
|
this.drawTunnelEntry();
|
|
}
|
|
if ((this.end == "exit") || (this.end == "both")) {
|
|
this.drawTunnelExit();
|
|
}
|
|
}
|
|
drawTunnelEntry() {
|
|
var $widget = this.$widget;
|
|
var ep1 = this.ep1;
|
|
var angleRAD = this.startAngleRAD;
|
|
var isRight = ((this.side == "right") || (this.side == "both"));
|
|
var isLeft = ((this.side == "left") || (this.side == "both"));
|
|
if ($widget.flip == "yes") {
|
|
[isRight, isLeft] = [isLeft, isRight]; // swap left and right
|
|
angleRAD = this.stopAngleRAD;
|
|
}
|
|
|
|
$gCtx.save();
|
|
$gCtx.translate(ep1[0], ep1[1]);
|
|
$gCtx.rotate(angleRAD);
|
|
|
|
if (isRight) {
|
|
this.drawTunnelEntryRight();
|
|
}
|
|
if (isLeft) {
|
|
this.drawTunnelEntryLeft();
|
|
}
|
|
$gCtx.restore();
|
|
}
|
|
drawTunnelEntryRight() {
|
|
var halfWidth = this.floorwidth / 2;
|
|
var halfEntranceWidth = this.entrancewidth / 2;
|
|
var halfFloorWidth = this.floorwidth / 2;
|
|
var halfDiffWidth = halfEntranceWidth - halfFloorWidth;
|
|
var p1, p2, p3, p4, p5, p6, p7;
|
|
p1 = [0, 0];
|
|
p2 = [0, +halfFloorWidth];
|
|
p3 = [0, +halfEntranceWidth];
|
|
p4 = [-halfEntranceWidth - halfFloorWidth, +halfEntranceWidth];
|
|
p5 = [-halfEntranceWidth - halfFloorWidth, +halfEntranceWidth - halfDiffWidth];
|
|
p6 = [-halfFloorWidth, +halfEntranceWidth - halfDiffWidth];
|
|
p7 = [-halfDiffWidth, 0];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.quadraticCurveTo(p3[0], p3[1], p4[0], p4[1]);
|
|
$gCtx.lineTo(p5[0], p5[1]);
|
|
$gCtx.quadraticCurveTo(p6[0], p6[1], p7[0], p7[1]);
|
|
$gCtx.closePath();
|
|
$gCtx.stroke();
|
|
}
|
|
drawTunnelEntryLeft() {
|
|
var halfWidth = this.floorwidth / 2;
|
|
var halfEntranceWidth = this.entrancewidth / 2;
|
|
var halfFloorWidth = this.floorwidth / 2;
|
|
var halfDiffWidth = halfEntranceWidth - halfFloorWidth;
|
|
var p1, p2, p3, p4, p5, p6, p7;
|
|
p1 = [0, 0];
|
|
p2 = [0, -halfFloorWidth];
|
|
p3 = [0, -halfEntranceWidth];
|
|
p4 = [-halfEntranceWidth - halfFloorWidth, -halfEntranceWidth];
|
|
p5 = [-halfEntranceWidth - halfFloorWidth, -halfEntranceWidth + halfDiffWidth];
|
|
p6 = [-halfFloorWidth, -halfEntranceWidth + halfDiffWidth];
|
|
p7 = [-halfDiffWidth, 0];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.quadraticCurveTo(p3[0], p3[1], p4[0], p4[1]);
|
|
$gCtx.lineTo(p5[0], p5[1]);
|
|
$gCtx.quadraticCurveTo(p6[0], p6[1], p7[0], p7[1]);
|
|
$gCtx.closePath();
|
|
$gCtx.stroke();
|
|
}
|
|
drawTunnelExit() {
|
|
var $widget = this.$widget;
|
|
var ep2 = this.ep2;
|
|
var angleRAD = this.stopAngleRAD;
|
|
var isRight = ((this.side == "right") || (this.side == "both"));
|
|
var isLeft = ((this.side == "left") || (this.side == "both"));
|
|
if ($widget.flip == "yes") {
|
|
[isRight, isLeft] = [isLeft, isRight];
|
|
angleRAD = this.startAngleRAD;
|
|
}
|
|
|
|
var halfWidth = this.floorwidth / 2;
|
|
var halfEntranceWidth = this.entrancewidth / 2;
|
|
var halfFloorWidth = this.floorwidth / 2;
|
|
var halfDiffWidth = halfEntranceWidth - halfFloorWidth;
|
|
|
|
var p1, p2, p3, p4, p5, p6, p7;
|
|
|
|
$gCtx.save();
|
|
$gCtx.translate(ep2[0], ep2[1]);
|
|
$gCtx.rotate(angleRAD);
|
|
|
|
if (isRight) {
|
|
this.drawTunnelExitRight();
|
|
}
|
|
if (isLeft) {
|
|
this.drawTunnelExitLeft();
|
|
}
|
|
$gCtx.restore();
|
|
}
|
|
drawTunnelExitRight() {
|
|
var halfWidth = this.floorwidth / 2;
|
|
var halfEntranceWidth = this.entrancewidth / 2;
|
|
var halfFloorWidth = this.floorwidth / 2;
|
|
var halfDiffWidth = halfEntranceWidth - halfFloorWidth;
|
|
var p1, p2, p3, p4, p5, p6, p7;
|
|
p1 = [0, 0];
|
|
p2 = [0, +halfFloorWidth];
|
|
p3 = [0, +halfEntranceWidth];
|
|
p4 = [halfEntranceWidth + halfFloorWidth, +halfEntranceWidth];
|
|
p5 = [halfEntranceWidth + halfFloorWidth, +halfEntranceWidth - halfDiffWidth];
|
|
p6 = [halfFloorWidth, +halfEntranceWidth - halfDiffWidth];
|
|
p7 = [halfDiffWidth, 0];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.quadraticCurveTo(p3[0], p3[1], p4[0], p4[1]);
|
|
$gCtx.lineTo(p5[0], p5[1]);
|
|
$gCtx.quadraticCurveTo(p6[0], p6[1], p7[0], p7[1]);
|
|
$gCtx.closePath();
|
|
$gCtx.stroke();
|
|
}
|
|
drawTunnelExitLeft() {
|
|
var halfWidth = this.floorwidth / 2;
|
|
var halfEntranceWidth = this.entrancewidth / 2;
|
|
var halfFloorWidth = this.floorwidth / 2;
|
|
var halfDiffWidth = halfEntranceWidth - halfFloorWidth;
|
|
var p1, p2, p3, p4, p5, p6, p7;
|
|
p1 = [0, 0];
|
|
p2 = [0, -halfFloorWidth];
|
|
p3 = [0, -halfEntranceWidth];
|
|
p4 = [halfEntranceWidth + halfFloorWidth, -halfEntranceWidth];
|
|
p5 = [halfEntranceWidth + halfFloorWidth, -halfEntranceWidth + halfDiffWidth];
|
|
p6 = [halfFloorWidth, -halfEntranceWidth + halfDiffWidth];
|
|
p7 = [halfDiffWidth, 0];
|
|
|
|
$gCtx.beginPath();
|
|
$gCtx.moveTo(p1[0], p1[1]);
|
|
$gCtx.lineTo(p2[0], p2[1]);
|
|
$gCtx.quadraticCurveTo(p3[0], p3[1], p4[0], p4[1]);
|
|
$gCtx.lineTo(p5[0], p5[1]);
|
|
$gCtx.quadraticCurveTo(p6[0], p6[1], p7[0], p7[1]);
|
|
$gCtx.closePath();
|
|
$gCtx.stroke();
|
|
}
|
|
}
|
|
|
|
// End of Layout Editor Decoration classes =======
|