some update

ChangeLog

@@ -1,5 +1,6 @@
 2020-12-05:
 - locomotive fixed division by zero
+- webinterface: speed 0 was not displayed corecctly in ctrl screen.
 
 2020-11-29:
 - lococtrl display is now working with reverse and forward.

server/railway.cc

@@ -62,7 +62,7 @@ JSONParse Railways::_GetJSONRailway(int x, int y) {
 	JSONParse json;
 	JSONElement je;
 	int idx = GetRIdx(x,y);
-	string name = "";
+	string text = "";
 
 	json.Clear();
 	json.AddObject("x", x);
@@ -72,8 +72,10 @@ JSONParse Railways::_GetJSONRailway(int x, int y) {
 	json.AddObject("type", railways[idx].type);
 	json.AddObject("maxspeed", railways[idx].maxspeed);
 	json.AddObject("flags", railways[idx].flags);
-	name = railways[idx].name;
+	text = railways[idx].name;
-	json.AddObject("name", name);
+	json.AddObject("name", text);
+	text = railways[idx].lockedby;
+	json.AddObject("lockedby", text);
 
 	return json;
 };
@@ -168,6 +170,7 @@ int Railways::Change(Railway *rw) {
 			r->x = rw->x;
 			r->y = rw->y;
 			r->name[0] = 0;
+			r->lockedby[0] = 0;
 		}
 
 		//
@@ -249,6 +252,7 @@ void Railways::_New (int neww, int newh) {
 		r->x = x;
 		r->y = y;
 		r->name[0] = 0;
+		r->lockedby[0] = 0;
 	}
 };
 

server/railway.h

@@ -51,6 +51,7 @@ struct s_Railway {
 	int maxspeed;
 	int flags;									// not defined yet
 	char name[REFERENCENAME_LEN];				// reference name
+	char lockedby[REFERENCENAME_LEN];			// element locked by locreference
 } typedef Railway;
 
 

server/server.cc

@@ -166,6 +166,20 @@ void Server::CycleModeReset() {
 		data_reset.mr_idx = -1;
 		data_reset.mr_step++;
 	}
+	else if (data_reset.mr_step == SMRESET_STEP_LOCKS) {
+		//
+		// clear all locks
+		debug (0, "* Clear all Locks", data_reset.mr_lastelm.c_str());
+
+		data_reset.mr_idx = -1;
+		data_reset.mr_step++;
+	}
+	else if (data_reset.mr_step == SMRESET_STEP_INTERFACES) {
+		//
+		// clear locks
+		data_reset.mr_idx = -1;
+		data_reset.mr_step++;
+	}
 	else if (data_reset.mr_step == SMRESET_STEP_LOCOMOTIVES) {
 		//
 		// reset locomotives, cycle 30ms per locomotive
@@ -234,12 +248,6 @@ void Server::CycleModeReset() {
 		data_reset.mr_idx = -1;
 		data_reset.mr_step++;
 	}
-	else if (data_reset.mr_step == SMRESET_STEP_INTERFACES) {
-		//
-		// reset interfaces
-		data_reset.mr_idx = -1;
-		data_reset.mr_step++;
-	}
 	else {
 		SetModeManual();
 	}

server/server.h

@@ -39,7 +39,8 @@ enum SMODE {
 };
 
 enum SMRESET {
-	SMRESET_STEP_INIT,
+	SMRESET_STEP_INIT = 0,
+	SMRESET_STEP_LOCKS,
 	SMRESET_STEP_LOCOMOTIVES,
 	SMRESET_STEP_TURNOUTS,
 	SMRESET_STEP_SENSORS,

webinterface/index.html

@@ -51,6 +51,9 @@
 	<button class="side_btn" id="btn-onoff" onclick="sideBtnOnOffClick(this);" value="0">
 		<img src="images/btnonoff.png"></button>
 	<br><br>
+	<button class="side_btn_mode" id="sidebtn-reset" onclick="sideBtnResetClick(this);" value="none">
+		<img src="images/btnreset.png"></button><br><br>
+	<br><br>		
 	<div class="page_side_edit" id="side_trackeditbuttons" style="display: none;">
 	<button class="side_btn_mode side_btn_selected" id="mode-none" onclick="sideBtnModeClick(this);" value="none">
 		<img src="images/btnarrow.png"></button>
@@ -66,11 +69,8 @@
 	</div>
 
 	<div class="page_side_edit" id="side_normalbuttons" style="display: block;">
-	<button class="side_btn_mode" id="sidebtn-reset" onclick="sideBtnResetClick(this);" value="none">
-		<img src="images/btnreset.png"></button><br><br>
 	<button class="side_btn_mode" id="sidebtn-loco" onclick="sideBtnLocoClick(this);" value="none">
 		<img src="images/btnloco.png"></button><br><br>
-	<br><br>		
 	</div>
 
 </div>

webinterface/layout.css

@@ -9,6 +9,29 @@ body {
 	--bottom-height: 132px;
 	--menu-bg-color: #333;
 	--menu-fg-color: linen;
+
+    --track-bg: #939393;
+    --track-color-select: #F88;
+    --track-color-selectframe: #00F;
+    --track-border: #000;
+	--track-color: #BBB;
+	--track-color-locked: #FF0;
+	--track-color-closed: #F00;
+	--track-color-error: deeppink;
+	--track-text: lightblue;
+	--track-connector: #FFF;
+	--track-element-fg: #FFF;
+	--track-element-fgborder: #000;
+	--block-bg: #DDD;
+	--block-fg: #000;
+	--block-bg-locked: #FF0;
+	--block-fg-locked: #000;
+    --block-bg-closed: #800;
+    --block-fg-closed: #FFF;
+    --turnout-this: var(--track-color);
+    --turnout-other: #666;
+    --sensor-active: #0F0;
+    --sensor-inactive: #666;
 }
 
 .page_side {

webinterface/locomotive.js

@@ -470,6 +470,14 @@ function lococtrl_show(name) {
 		       min=\"0\" value=\"0\" max=\"100\" >  \
 		    <br><button id=\"lococtrl_"+name+"_REVBTN\" type=\"button\">REV</button> \
 		</td><td> \
+		<fieldset><legend>Speed</legend> <table>\
+			<tr><td><button id=\"lococtrl_"+name+"_btnvstop\" type=\"button\" value=\"vstop\">Stop</button> </td></tr>\
+			<tr><td><button id=\"lococtrl_"+name+"_btnvmin\" type=\"button\" value=\"vmin\">Min</button></td></tr>\
+			<tr><td><button id=\"lococtrl_"+name+"_btnvslow\" type=\"button\" value=\"vslow\">Slow</button></td></tr> \
+			<tr><td><button id=\"lococtrl_"+name+"_btnvmid\" type=\"button\" value=\"vmid\">Mid</button></td></tr> \
+			<tr><td><button id=\"lococtrl_"+name+"_btnvfast\" type=\"button\" value=\"vfast\">Fast</button></td></tr> \
+			<tr><td><button id=\"lococtrl_"+name+"_btnvmax\" type=\"button\" value=\"vmax\">Max</button></td></tr> \
+			</table></td></fieldset> \
 		</td></tr></table></div> \
 		<div align=right> \
 		<button id=\"lococtrl_"+name+"_CLOSE\" type=\"button\" value=\""+name+"\">Close</button> \
@@ -477,6 +485,13 @@ function lococtrl_show(name) {
 		      \
 		");
 
+		gAddEventListener("lococtrl_"+name+"_btnvstop", 'click', lococtrl_cb_btnmove);
+		gAddEventListener("lococtrl_"+name+"_btnvmin", 'click', lococtrl_cb_btnmove);
+		gAddEventListener("lococtrl_"+name+"_btnvslow", 'click', lococtrl_cb_btnmove);
+		gAddEventListener("lococtrl_"+name+"_btnvmid", 'click', lococtrl_cb_btnmove);
+		gAddEventListener("lococtrl_"+name+"_btnvfast", 'click', lococtrl_cb_btnmove);
+		gAddEventListener("lococtrl_"+name+"_btnvmax", 'click', lococtrl_cb_btnmove);
+
 		gAddEventListener("lococtrl_"+name+"_RANGE", 'click', lococtrl_speed);
 		gAddEventListener("lococtrl_"+name+"_REVBTN", 'click', lococtrl_reverse);
 		gAddEventListener("lococtrl_"+name+"_CLOSE", 'click', lococtrl_close);
@@ -508,12 +523,36 @@ function lococtrl_reverse() {
 };
 
 
+function lococtrl_cb_btnmove () {
+	var name = getTextBetween(this.id, "lococtrl_", "_btn" + this.value);
+	var reverse = document.getElementById("lococtrl_"+name+"_REVBTN");
+	var cursel = -1;
+	var speed = 0;
+	
+	for (var i = 0; i < locomotives.length; i++) {
+		if (name == locomotives[i].name) cursel = i;
+	}
+    if (cursel == -1) return;
+
+	if (this.value == "vmin") speed = Number(locomotives[cursel].vmin);
+	if (this.value == "vslow") speed = Number(locomotives[cursel].vslow);
+	if (this.value == "vmid") speed = Number(locomotives[cursel].vmid);
+	if (this.value == "vfast") speed = Number(locomotives[cursel].vfast);
+	if (this.value == "vmax") speed = Number(locomotives[cursel].vmax);
+	
+    if (reverse.innerHTML == "REV") speed = 0 - speed;
+
+	locomotive_server_Set ({name: name, speed: speed});
+	debug ("Locomotive: '" + name +"' Speed: " + speed);
+};
+
+
 function lococtrl_speed() {
 	var name = getTextBetween(this.id, "lococtrl_", "_RANGE");
 	var reverse = document.getElementById("lococtrl_"+name+"_REVBTN");
 
     let speed = this.value;
-    if (reverse.innerHTML == "REV") speed = -speed;
+    if (reverse.innerHTML == "REV") speed = 0 - speed;
 
 	debug ("Speed Loco:'"+name+"' Speed:'"+speed+"'");
 	for (var i = 0; i < locomotives.length; i++) {
@@ -529,14 +568,14 @@ function lococtrl_setData(data) {
 	var reverse = document.getElementById("lococtrl_"+data.name+"_REVBTN");
 	
 	if (range && reverse) {
-		debug ("lococtrl: speed:" + data.speed + "  vmax:" + 
+		debug ("lococtrl: " + data.name + "  speed:" + data.speed + "  vmax:" + 
 		        data.vmax + "  flags:" + data.flags);
 		if (data.flags & LOCO_F_REVERSE)    reverse.innerHTML = "REV";
 		else 	                            reverse.innerHTML = "FWD";
 		
 		range.min = 0;
 		if (data.vmax) range.max = data.vmax;
-		if (data.speed) range.value = Math.abs(data.speed);
+		range.value = Math.abs(Number(data.speed));
 	}
 };
 

webinterface/track.js

@@ -96,13 +96,21 @@ function trackDrawTrack(ctx, pos, dirtype) {
 	}
 }
 
+
+function cssVar(name,value){
+    if(name[0]!='-') name = '--'+name //allow passing with or without --
+    if(value) document.documentElement.style.setProperty(name, value)
+    return getComputedStyle(document.documentElement).getPropertyValue(name);
+}
+
+
 function trackDrawElement(ctx, element, mode) {
 	var dx = 0, dy = 0;
-	var modcol = "#B0B0B0";
+	var modcol = cssVar('--track-color');
 	
 	if (element) {
 	
-		if (mode == 1) modcol = "#FF0000";
+		if (mode == 1) modcol = cssVar('--track-color-select');
 	
 		if (element.type) {
 			if (element.type == RAILWAY_TURNOUT) {
@@ -118,11 +126,15 @@ function trackDrawElement(ctx, element, mode) {
 				}
 				ctx.lineWidth = 4;
 				ctx.setLineDash([0,0]);
-				ctx.strokeStyle = modcol;
+                if (element.lockedby && element.lockedby != "")  
+                    ctx.strokeStyle = cssVar('--track-color-locked');
+				else                         
+				    ctx.strokeStyle = ctx.strokeStyle = cssVar('--turnout-this');
 				trackDrawTrack (ctx, {x: element.x, y: element.y}, dir);
 				ctx.setLineDash([0,0]);
-				if (element.name == "") ctx.strokeStyle = "DeepPink";
+				if (element.name == "") ctx.strokeStyle = cssVar('--track-color-error');
-				else 					ctx.strokeStyle = "DimGray";
+				else 					ctx.strokeStyle = cssVar('--turnout-other');
+
 				trackDrawTrack (ctx, {x: element.x, y: element.y}, altdir);
 			}
 			else if (element.type == RAILWAY_NORMAL || element.type == RAILWAY_SENSOR || element.type == RAILWAY_BLOCK) {
@@ -146,11 +158,11 @@ function trackDrawElement(ctx, element, mode) {
 				ctx.font = "14px Arial";
 				ctx.textAlign = "left";
 				if (element.name != "")	{
-					ctx.fillStyle = "lightblue";
+					ctx.fillStyle = cssVar('--track-text');
 					ctx.fillText(element.name, (element.x+0.5) * track.scale, 6+(element.y+0.5) * track.scale);
 				}
 				else {
-					ctx.fillStyle = "DeepPink";
+					ctx.fillStyle = cssVar('--track-color-error');
 					ctx.fillText("------", (element.x+0.5) * track.scale, (element.y+0.5) * track.scale);
 				}
 			}
@@ -158,11 +170,11 @@ function trackDrawElement(ctx, element, mode) {
 				ctx.font = "bold 12px Arial";
 				ctx.textAlign = "center";
 				if (element.name != "")	{
-					ctx.fillStyle = "#FFFFFF";
+					ctx.fillStyle = cssVar('--track-connector');
 					ctx.fillText(element.name, (element.x+0.5) * track.scale, 6+(element.y+0.5) * track.scale);
 				}
 				else {
-					ctx.fillStyle = "DeepPink";
+					ctx.fillStyle = cssVar('--track-color-error');
 					ctx.fillText("------", (element.x+0.5) * track.scale, (element.y+0.5) * track.scale);
 				}
 			}
@@ -170,7 +182,7 @@ function trackDrawElement(ctx, element, mode) {
 				ctx.beginPath();
 				ctx.lineWidth = 2;
 				ctx.setLineDash([0,0]);
-				ctx.strokeStyle = "DeepPink";
+				ctx.strokeStyle = cssVar('--track-color-error');
 				ctx.moveTo((element.x+0.25) * track.scale, (element.y+0.25) * track.scale);
 				ctx.lineTo((element.x+0.75) * track.scale, (element.y+0.75) * track.scale);
 				ctx.moveTo((element.x+0.75) * track.scale, (element.y+0.25) * track.scale);
@@ -183,24 +195,25 @@ function trackDrawElement(ctx, element, mode) {
 			if (element.type == RAILWAY_SENSOR) {
    				ctx.beginPath();
 				ctx.arc((element.x+0.5) * track.scale, (element.y+0.5) * track.scale, track.scale*0.25, 0, 2 * Math.PI);
-				if (element.name == "") 				ctx.fillStyle = 'DeepPink';
+				if (element.name == "") 				ctx.fillStyle = cssVar('--track-color-error');
-				else if (sensor_IsActive(element.name)) ctx.fillStyle = 'LightGreen';
+				else if (sensor_IsActive(element.name)) ctx.fillStyle = cssVar('--sensor-active');
-				else 									ctx.fillStyle = 'DimGray';
+				else 									ctx.fillStyle = cssVar('--sensor-inactive');
 				
 				ctx.fill();
       			ctx.lineWidth = 2;
-				ctx.strokeStyle = "#000000";
+				ctx.strokeStyle = cssVar('--track-border');
 				ctx.stroke();
 			}
 			
 			//
 			// draw ref. name
 			if (element.name && sideBtnModeGet() == "mode-turn") {
-				if (element.type != RAILWAY_TEXT && element.type != RAILWAY_CONNECTOR) {
+				if (element.type != RAILWAY_TEXT && element.type != RAILWAY_CONNECTOR 
+				       && element.type != RAILWAY_BLOCK) {
 					ctx.font = "10px Arial";
 					ctx.textAlign = "left";
 					if (element.name != "")	{
-						ctx.fillStyle = "black";
+						ctx.fillStyle = cssVar('--track-element-fgborder');
 						ctx.fillText(element.name, (element.x) * track.scale -1, 6+(element.y+0.5) * track.scale   );
 						ctx.fillText(element.name, (element.x) * track.scale +1, 6+(element.y+0.5) * track.scale   );
 						ctx.fillText(element.name, (element.x) * track.scale   , 6+(element.y+0.5) * track.scale -1);
@@ -210,7 +223,7 @@ function trackDrawElement(ctx, element, mode) {
 						ctx.fillText(element.name, (element.x) * track.scale +1, 6+(element.y+0.5) * track.scale -1);
 						ctx.fillText(element.name, (element.x) * track.scale +1, 6+(element.y+0.5) * track.scale +1);
 						ctx.fillText(element.name, (element.x) * track.scale -1, 6+(element.y+0.5) * track.scale +1);
-						ctx.fillStyle = "white";
+						ctx.fillStyle = cssVar('--track-element-fg');
 						ctx.fillText(element.name, (element.x) * track.scale , 6+(element.y+0.5) * track.scale );
 					}
 				}			
@@ -222,15 +235,80 @@ function trackDrawElement(ctx, element, mode) {
 
 
 function trackDrawBlock(ctx, blockelm) {
-	ctx.beginPath();
+
-	ctx.lineWidth = 2;
+	if (blockelm.dir == 1 || blockelm.dir == 2) {           //  1 .. | 2.. -
-	ctx.setLineDash([0,0]);
+	    let x1, y1, x2, y2, a, b;
-	ctx.strokeStyle = "DeepPink";
+	    let text, color;
-	ctx.moveTo((blockelm.x+0.25) * track.scale, (blockelm.y+0.25) * track.scale);
+
-	ctx.lineTo((blockelm.x+0.75) * track.scale, (blockelm.y+0.75) * track.scale);
+	    // select color depending on referecedBy
-	ctx.moveTo((blockelm.x+0.75) * track.scale, (blockelm.y+0.25) * track.scale);
+
-	ctx.lineTo((blockelm.x+0.25) * track.scale, (blockelm.y+0.75) * track.scale);
+
-	ctx.stroke();
+	    // Fill Box
+		x1 = 0 * track.scale + 2;
+		y1 = (-1) * track.scale + 2;
+		x2 = ( 1) * track.scale - 2;
+		y2 = ( 2) * track.scale - 2;
+
+	    if (blockelm.dir == 2) {
+	    	a = y1; y1 = x1; x1 = a;
+	    	b = y2; y2 = x2; x2 = b;
+   	    }
+
+        x1 = x1 + (blockelm.x) * track.scale;
+        x2 = x2 + (blockelm.x) * track.scale;
+        y1 = y1 + (blockelm.y) * track.scale;
+        y2 = y2 + (blockelm.y) * track.scale;
+
+		if (blockelm.lockedby && blockelm.lockedby != "") ctx.fillStyle = cssVar('--block-bg-locked');
+		else                         ctx.fillStyle = cssVar('--block-bg');
+	    ctx.fillRect (x1, y1, (x2-x1), (y2-y1));
+
+		ctx.beginPath();
+		ctx.lineWidth = 2;
+		ctx.setLineDash([0,0]);
+		ctx.strokeStyle = cssVar('--track-border');
+		ctx.moveTo(x1+0.5, y1+0.5);
+		ctx.lineTo(x2+0.5, y1+0.5);
+		ctx.lineTo(x2+0.5, y2+0.5);
+		ctx.lineTo(x1+0.5, y2+0.5);
+		ctx.lineTo(x1+0.5, y1+0.5);
+		ctx.stroke();
+    
+	    if (blockelm.dir == 2) {
+			x1 = (0.5 + blockelm.x) * track.scale;
+			y1 = (0.5 + blockelm.y) * track.scale + 5;
+
+			ctx.font = "10px Arial";
+			ctx.textAlign = "center";
+			if (blockelm.lockedby && blockelm.lockedby != "") ctx.fillStyle = cssVar('--block-fg-locked');
+			else                         ctx.fillStyle = cssVar('--block-fg');
+			ctx.fillText(blockelm.name, x1, y1);
+	    } else {
+			x1 = (0.5 + blockelm.x) * track.scale + 5;
+			y1 = (0.5 + blockelm.y) * track.scale;
+
+	    	ctx.save();
+	    	ctx.translate(x1, y1);
+	    	ctx.rotate(-Math.PI/2);
+			ctx.font = "10px Arial";
+			ctx.textAlign = "center";
+			if (blockelm.lockedby && blockelm.lockedby != "") ctx.fillStyle = cssVar('--block-fg-locked');
+			else                         ctx.fillStyle = cssVar('--block-fg');
+			ctx.fillText(blockelm.name, 0, 0);
+			ctx.restore();
+	    }
+	}
+	else {
+		ctx.beginPath();
+		ctx.lineWidth = 1;
+		ctx.setLineDash([0,0]);
+		ctx.strokeStyle = cssVar('--track-color-error');
+		ctx.moveTo((blockelm.x+0.25) * track.scale, (blockelm.y+0.25) * track.scale);
+		ctx.lineTo((blockelm.x+0.75) * track.scale, (blockelm.y+0.75) * track.scale);
+		ctx.moveTo((blockelm.x+0.75) * track.scale, (blockelm.y+0.25) * track.scale);
+		ctx.lineTo((blockelm.x+0.25) * track.scale, (blockelm.y+0.75) * track.scale);
+		ctx.stroke();
+	}
 };
 
 
@@ -245,7 +323,7 @@ function trackDraw() {
 	
 	//
 	// clear screen
-	ctx.fillStyle = "#808080";
+	ctx.fillStyle = cssVar('--track-bg');
 	ctx.fillRect(0, 0, track.size.x * track.scale, track.size.y * track.scale);
 
 	//
@@ -292,7 +370,7 @@ function trackDraw() {
 		ctx.lineJoin="round";
 		ctx.miterLimit = 1;
 		ctx.setLineDash([2,2]);
-		ctx.strokeStyle = "#0000FF";
+		ctx.strokeStyle = cssVar('--track-color-selectframe');
 		ctx.beginPath();
 		ctx.moveTo(0.5+(p1.x + 0) * track.scale, 0.5+(p1.y+0) * track.scale);
 		ctx.lineTo(0.5+(p2.x + 1) * track.scale, 0.5+(p1.y+0) * track.scale);
@@ -308,7 +386,7 @@ function trackDraw() {
 	ctx.lineJoin="round";
 	ctx.miterLimit = 1;
 	ctx.setLineDash([2,2]);
-	ctx.strokeStyle = "#000000";
+	ctx.strokeStyle = cssVar('--track-element-fgborder');
 	ctx.beginPath();
 	ctx.moveTo(0.5+(trackMouse.pos.x + 0) * track.scale, 0.5+(trackMouse.pos.y+0) * track.scale);
 	ctx.lineTo(0.5+(trackMouse.pos.x + 1) * track.scale, 0.5+(trackMouse.pos.y+0) * track.scale);