From c9fb7383e09e86bb6ca8bdf21d6bc52d8a1ea52c Mon Sep 17 00:00:00 2001 From: steffen Date: Sun, 3 Jan 2021 00:26:00 +0000 Subject: [PATCH] some update --- ChangeLog | 1 + server/railway.cc | 10 ++- server/railway.h | 1 + server/server.cc | 20 ++++-- server/server.h | 3 +- webinterface/index.html | 6 +- webinterface/layout.css | 23 +++++++ webinterface/locomotive.js | 47 +++++++++++-- webinterface/track.js | 136 +++++++++++++++++++++++++++++-------- 9 files changed, 201 insertions(+), 46 deletions(-) diff --git a/ChangeLog b/ChangeLog index d283fb9..3b31c28 100644 --- a/ChangeLog +++ b/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. diff --git a/server/railway.cc b/server/railway.cc index 568004b..baa7bb2 100644 --- a/server/railway.cc +++ b/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; - json.AddObject("name", name); + text = railways[idx].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; } }; diff --git a/server/railway.h b/server/railway.h index f8ad975..432ed46 100644 --- a/server/railway.h +++ b/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; diff --git a/server/server.cc b/server/server.cc index bdf187a..f20fdd5 100644 --- a/server/server.cc +++ b/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(); } diff --git a/server/server.h b/server/server.h index a84026b..62dd65f 100644 --- a/server/server.h +++ b/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, diff --git a/webinterface/index.html b/webinterface/index.html index 9e458d1..aae1f37 100644 --- a/webinterface/index.html +++ b/webinterface/index.html @@ -51,6 +51,9 @@

+

+

-



-

diff --git a/webinterface/layout.css b/webinterface/layout.css index bf1ec32..58b850d 100644 --- a/webinterface/layout.css +++ b/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 { diff --git a/webinterface/locomotive.js b/webinterface/locomotive.js index 4e7fd2b..e85a44a 100644 --- a/webinterface/locomotive.js +++ b/webinterface/locomotive.js @@ -470,6 +470,14 @@ function lococtrl_show(name) { min=\"0\" value=\"0\" max=\"100\" > \
\ \ +
Speed \ + \ + \ + \ + \ + \ + \ +
\ \
\ \ @@ -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); @@ -501,19 +516,43 @@ function lococtrl_reverse() { else { reverse = 1; this.innerHTML = "REV"; - } + } locomotive_server_Set ({name: name, reverse: 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)); } }; diff --git a/webinterface/track.js b/webinterface/track.js index 579c8c1..6521aa9 100644 --- a/webinterface/track.js +++ b/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"; - else ctx.strokeStyle = "DimGray"; + if (element.name == "") ctx.strokeStyle = cssVar('--track-color-error'); + 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'; - else if (sensor_IsActive(element.name)) ctx.fillStyle = 'LightGreen'; - else ctx.fillStyle = 'DimGray'; + if (element.name == "") ctx.fillStyle = cssVar('--track-color-error'); + else if (sensor_IsActive(element.name)) ctx.fillStyle = cssVar('--sensor-active'); + 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; - ctx.setLineDash([0,0]); - ctx.strokeStyle = "DeepPink"; - 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(); + + if (blockelm.dir == 1 || blockelm.dir == 2) { // 1 .. | 2.. - + let x1, y1, x2, y2, a, b; + let text, color; + + // select color depending on referecedBy + + + // 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);