diff --git a/webinterface/block.js b/webinterface/block.js
index d738fd6..f804970 100644
--- a/webinterface/block.js
+++ b/webinterface/block.js
@@ -45,6 +45,59 @@ function block_Delete(name) {
};
+
+function block_contextmenu(name) {
+ gContextmenuCreate(name);
+
+ gContextmenuAdd("Locomotives", 0, 0);
+ for (var i = 0; i < locomotives.length; i++) {
+ if (locomotives[i].name)
+ gContextmenuAdd(locomotives[i].name, block_ctxmenu_LocoSelect, locomotives[i].name);
+ }
+ gContextmenuAdd("", 0, 0);
+ gContextmenuAdd("Set DestinationFWD", block_ctxmenu_LocoDestinationFWD, 0);
+ gContextmenuAdd("Set DestinationREV", block_ctxmenu_LocoDestinationREV, 0);
+ gContextmenuAdd("", 0, 0);
+ gContextmenuAdd("AssignFWD", block_ctxmenu_LocoAssignFWD, 0);
+ gContextmenuAdd("AssignREV", block_ctxmenu_LocoAssignREV, 0);
+ gContextmenuAdd("", 0, 0);
+ gContextmenuAdd("Clear", block_ctxmenu_Clear, 0);
+ gContextmenuAdd("Offservice", block_ctxmenu_Clear, 1);
+};
+
+
+function block_ctxmenu_LocoSelect (element, value) {
+ alert ("LocoSelect:" + value);
+};
+
+
+function block_ctxmenu_LocoDestinationFWD (element, value) {
+ alert ("DestinationFWD:" + value);
+};
+
+
+function block_ctxmenu_LocoDestinationREV (element, value) {
+ alert ("DestinationREV:" + value);
+};
+
+
+function block_ctxmenu_LocoAssignFWD (element, value) {
+ alert ("AssignFWD:" + value);
+};
+
+
+function block_ctxmenu_LocoAssignREV (element, value) {
+ alert ("AssignREV:" + value);
+};
+
+
+function block_ctxmenu_Clear (element, value) {
+ // value == 0 ... clear
+ // value == 1 ... Put Off Service
+ alert ("Clear / Off Service");
+}
+
+
//
// send new element to server
//
diff --git a/webinterface/gui/gui.css b/webinterface/gui/gui.css
index 921ddaa..2d4b2e4 100644
--- a/webinterface/gui/gui.css
+++ b/webinterface/gui/gui.css
@@ -1,6 +1,13 @@
:root {
+ --head-bg-color: #0018ff;
+ --head-fg-color: #ffffff;
--bg-color: #dddddd;
+ --fg-color: #000000;
+ --contextmenu-bg-color: #b2ccb5;
+ --contextmenu-fg-color: #000000;
+ --contextmenu-head-bg-color: #10ff39;
+ --contextmenu-head-fg-color: #000000;
--input-bg-color: #c8c8c8;
--input-fg-color: black;
}
@@ -11,16 +18,19 @@
margin: 1px;
padding: 0px;
position: absolute;
+ font-family: system-ui;
}
.GUIwindowHead {
border: 1px solid black;
- background: #0018ff;
- color: white;
+ background: var(--head-bg-color);
+ color: var(--head-fg-color);
margin: 0px;
- padding: 5px;
+ padding: 4px;
cursor: move;
text-align: center;
+ font-family: system-ui;
+ font-weight: bold;
}
.GUIwindowClient {
@@ -30,10 +40,48 @@
color: var(--input-fg-color);
}
-
.GUIbutton {
}
+
+.GUIcontextmenu {
+ float:left;
+ border: 2px solid black;
+ margin: 1px;
+ padding: 0px;
+ position: absolute;
+ text-size: small;
+ font-family: "Liberation Sans Narrow", "Cantarell Thin", Sans;
+}
+
+.GUIcontextmenuHead {
+ border: 1px solid black;
+ background: var(--contextmenu-head-bg-color);
+ color: var(--contextmenu-head-fg-color);
+ margin: 0px;
+ padding: 1px;
+ text-align: center;
+ text-size: small;
+ font-family: "Liberation Sans Narrow", "Cantarell Thin", Sans;
+ font-weight: bold;
+}
+
+.GUIcontextmenuClient {
+ overflow: auto;
+ padding: 0px;
+ background-color: var(--contextmenu-bg-color);
+ color: var(--contextmenu-fg-color);
+ text-size: small;
+ font-family: system-ui;
+}
+
+ul.GUIcontextmenuElements {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+}
+
+
button {
background-color: var(--input-bg-color);
color: var(--input-fg-color);
@@ -44,6 +92,7 @@ input {
border: 1px solid var(--input-bg-color);
background-color: var(--input-bg-color);
color: var(--input-fg-color);
+ font-family: "Lucida Console", Courier, monospace;
}
td {
diff --git a/webinterface/gui/gui.js b/webinterface/gui/gui.js
index 1ca603e..0148952 100644
--- a/webinterface/gui/gui.js
+++ b/webinterface/gui/gui.js
@@ -1,4 +1,7 @@
+var MousePosX = null;
+var MousePosY = null;
+
//
// init all variables with the class givin
@@ -8,9 +11,28 @@ $(document).ready(function() {
$(".GUIwindow").each( function (i) {
gWindowDragElement(this);
});
+
+ document.addEventListener('mousemove', onMouseUpdate, false);
+ document.addEventListener('mouseenter', onMouseUpdate, false);
+
});
+function onMouseUpdate(e) {
+ MousePosX = e.pageX;
+ MousePosY = e.pageY;
+}
+
+function getMouseX() {
+ return MousePosX;
+}
+
+function getMouseY() {
+ return MousePosY;
+}
+
+
+
//
//
function gAddEventListener (id, eventname, callback) {
@@ -32,3 +54,74 @@ function getTextBetween(fulltext, text1, text2) {
else return "";
};
+
+
+//
+// Context Menus
+function gContextmenuCreate(title) {
+ let cm = document.getElementById("ContextMenu");
+ if (cm) {
+ let parent = cm.parentNode;
+ parent.removeChild(cm);
+ }
+
+ debug("create Contextmenu:" + title);
+
+ var head = document.createElement("div");
+ head.setAttribute("id", "ConextMenuHead");
+ head.setAttribute("class", "GUIcontextmenuHead");
+ head.innerHTML = title;
+
+ var ul = document.createElement("ul");
+ ul.setAttribute("id", "ContextMenuElements");
+ ul.setAttribute("class", "GUIcontextmenuElements");
+
+ var client = document.createElement("div");
+ client.setAttribute("id", "ContextMenuClient");
+ client.setAttribute("class", "GUIcontextmenuClient");
+ client.setAttribute("style", "max-height: 400px; max-width:150px;");
+ client.innerHTML = "";
+ client.appendChild (ul);
+
+ cm = document.createElement("div");
+ cm.setAttribute("id", "ContextMenu");
+ cm.setAttribute("class", "GUIcontextmenu");
+ cm.appendChild (head);
+ cm.appendChild (client);
+
+ document.body.appendChild(cm);
+ cm.style.top = getMouseY();
+ cm.style.left = getMouseX();
+
+ return cm;
+};
+
+
+function gContextmenuAdd(text, callback_function, value) {
+ let ul = document.getElementById("ContextMenuElements");
+
+ if (ul) {
+ let li = document.createElement("li");
+
+ li.innerHTML = text;
+ li.value = value;
+ if (typeof callback_function === 'object' && callback_function !== null) {
+ li.addEventListener("click", callback_function);
+ debug ("add event listener.");
+ }
+ else {
+ debug ("add event listener.");
+ }
+
+ ul.appendChild(li);
+ }
+};
+
+
+function gContextmenuClose() {
+ let cm = document.getElementById("ContextMenu");
+ if (cm) {
+ let parent = cm.parentNode;
+ parent.removeChild(cm);
+ }
+};
diff --git a/webinterface/images/btnclose.png b/webinterface/images/btnclose.png
new file mode 100644
index 0000000..f000c1c
Binary files /dev/null and b/webinterface/images/btnclose.png differ
diff --git a/webinterface/images/btnsettings.png b/webinterface/images/btnsettings.png
new file mode 100644
index 0000000..43344c1
Binary files /dev/null and b/webinterface/images/btnsettings.png differ
diff --git a/webinterface/index.html b/webinterface/index.html
index aae1f37..8645ee3 100644
--- a/webinterface/index.html
+++ b/webinterface/index.html
@@ -53,6 +53,8 @@
+
diff --git a/webinterface/layout.css b/webinterface/layout.css
index 58b850d..49e9847 100644
--- a/webinterface/layout.css
+++ b/webinterface/layout.css
@@ -1,6 +1,7 @@
body {
margin: 0px;
+ font-family: system-ui;
}
:root {
diff --git a/webinterface/railways.js b/webinterface/railways.js
index 3ad1460..e825211 100644
--- a/webinterface/railways.js
+++ b/webinterface/railways.js
@@ -209,10 +209,38 @@ function rw_Click(x,y) {
//
// Sensor
- if (track.elements[idx].type == RAILWAY_SENSOR) {
+ else if (track.elements[idx].type == RAILWAY_SENSOR) {
if (track.elements[idx].name != "") {
}
}
+
+ //
+ // Block
+ else if (track.elements[idx].type == RAILWAY_BLOCK) {
+ block_contextmenu(track.elements[idx].name);
+ }
+ else if (y > 0 && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 1 &&
+ track.elements[x + (y-1)*track.size.x].type == RAILWAY_BLOCK) {
+ block_contextmenu(track.elements[x + (y-1)*track.size.x].name)
+ }
+ else if (y < track.size.y && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 1 &&
+ track.elements[x + (y+1)*track.size.x].type == RAILWAY_BLOCK) {
+ block_contextmenu(track.elements[x + (y+1)*track.size.x].name)
+ }
+ else if (x > 0 && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 2 &&
+ track.elements[(x-1) + y*track.size.x].type == RAILWAY_BLOCK) {
+ block_contextmenu(track.elements[(x-1) + y*track.size.x].name)
+ }
+ else if (x < track.size.x && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 2 &&
+ track.elements[(x+1) + y*track.size.x].type == RAILWAY_BLOCK) {
+ block_contextmenu(track.elements[(x+1) + y*track.size.x].name)
+ }
+
+ //
+ //
+ else if (track.elements[idx].type == RAILWAY_NORMAL) {
+// track_selectsegment(x, y);
+ }
}
};
diff --git a/webinterface/side.js b/webinterface/side.js
index d2f3dcc..622a5b4 100644
--- a/webinterface/side.js
+++ b/webinterface/side.js
@@ -31,7 +31,6 @@ function side_Display(type) {
//
// value 0-off, 1-on, 2-stop, 3-shortciruit
function sideBtnOnOffClick (obj) {
- side_Display(SIDE_DISPLAY_NONE);
if (obj.value == 0) {
serverinout_Power(1);
}
@@ -89,6 +88,14 @@ function sideBtnLocoClick () {
};
+//
+// close buttons to default
+//
+function sideBtnCloseClick () {
+ side_Display(SIDE_DISPLAY_NONE);
+};
+
+
//
// send sensor and turnout reset to server.
//
@@ -107,8 +114,6 @@ function sideBtnModeGet () {
if (objiter.className == "side_btn_mode side_btn_selected") selected = objiter.id;
});
- // debug ("Selected: '" + selected + "'");
-
return selected;
};
diff --git a/webinterface/track.js b/webinterface/track.js
index 6521aa9..6741e78 100644
--- a/webinterface/track.js
+++ b/webinterface/track.js
@@ -419,6 +419,8 @@ function trackDraw() {
var t = trackGetTurnout({x: trackMouse.pos.x, y: trackMouse.pos.y});
}
+ else if (!mode == "mode-none") alert("track.js: unknown mode:" + mode);
+
//
// flip screen - double buffering
trackFlipScreen();
@@ -492,6 +494,8 @@ function trackMouseup(event) {
debug ("trackMouseup down: " + trackMouse.down.x + "," + trackMouse.down.y);
debug ("trackMouseup pos: " + trackMouse.pos.x + "," + trackMouse.pos.y);
+ gContextmenuClose();
+
if (mode == "mode-rail") {
var pos = {};
var selected = new Array();
@@ -502,7 +506,7 @@ function trackMouseup(event) {
selected.length = 0;
}
- else if (mode == "mode-turn") {
+ else if (mode == "mode-detail") {
rwdetail_show(trackMouse.pos.x, trackMouse.pos.y);
}
@@ -543,6 +547,7 @@ function trackMouseup(event) {
selected.length = 0;
}
else {
+ debug ("rw_Click was das?");
rw_Click(trackMouse.pos.x, trackMouse.pos.y);
}