aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/nms.gathering.org/index.html2
-rw-r--r--web/nms.gathering.org/nms2/index.html46
-rw-r--r--web/nms.gathering.org/nms2/js/nms-map-handlers.js3
-rw-r--r--web/nms.gathering.org/nms2/js/nms.js128
4 files changed, 123 insertions, 56 deletions
diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index ffcb09b..8043c7d 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -6,7 +6,7 @@
<p>tg light &amp; magic. :-)</p>
<ul>
- <li><a href="nms2/map.html">NMS 2 NG (Ping, Temp, Uplink, Trafikk, Info)</a>
+ <li><a href="nms2/">NMS 2 NG (Ping, Temp, Uplink, Trafikk, Info)</a>
<br /><i>Trykk på svitsjene (Work in progress)</i>
</li>
<br />
diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html
index 304cece..81f68e5 100644
--- a/web/nms.gathering.org/nms2/index.html
+++ b/web/nms.gathering.org/nms2/index.html
@@ -46,12 +46,11 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" onclick="toggleLayer('aboutBox'); //document.getElementById('aboutBox').style.display = 'block'; hideSwitch();" style="cursor: pointer;" >NMS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Map mode
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -66,45 +65,36 @@
<li><a href="#" onclick="toggleLayer('nowPickerBox');document.getElementById('nowPicker').focus();">Travel in time</a></li>
<li><a href="#" onclick="startReplay();" title="Replay from opening 120 minutes per second">Replay TG</a></li>
<li class="divider"> </li>
- <li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">View<span class="caret"></span></a>
- <ul class="dropdown-menu" role="menu">
+ <li class="dropdown-header">View</li>
<li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li>
<li><a href="#" onclick="showBlurBox()">Tweak Night Mode blur</a></li>
<li><a href="#" onclick='showLayer("layerVisibility");'>Set layer visibility</a></li>
<li class="divider"> </li>
<li class="dropdown-header">Map scale</li>
<li><a href="#"><label id="scaler-text" for='scaler'></label><input type="range" id="scaler" name="points" min="0.2" max="3" step="0.01" onchange="scaleChange()" /></a></li>
+ <li class="divider"> </li>
+ <li class="dropdown-header">Help</li>
+ <li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
+ <li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
+ <li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
+ <li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
+ <li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
</ul>
</li>
<li><p id="updater_name" class="navbar-text"></p></li>
<div class="navbar-form navbar-left">
<div class="form-group">
- <button class="btn btn-default" id="legend-1"></button>
- <button class="btn btn-default" id="legend-2"></button>
- <button class="btn btn-default" id="legend-3"></button>
- <button class="btn btn-default" id="legend-4"></button>
- <button class="btn btn-default" id="legend-5"></button>
+ <button class="btn btn-default btn-xs" id="legend-1"></button>
+ <button class="btn btn-default btn-xs" id="legend-2"></button>
+ <button class="btn btn-default btn-xs" id="legend-3"></button>
+ <button class="btn btn-default btn-xs" id="legend-4"></button>
+ <button class="btn btn-default btn-xs" id="legend-5"></button>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p id="speed" class="navbar-text" title="Client port speed / Total port speed"></p></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu" role="menu">
- <li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
- <li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
- <li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
- <li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
- </ul>
- </li>
</ul>
</div><!--/.nav-collapse -->
</div>
@@ -494,6 +484,13 @@
</td>
</tr>
<tr>
+ <td>TextInfo</td>
+ <td>
+ <button onclick='hideLayer("textInfoCanvas");'>Hide</button>
+ <button onclick='showLayer("textInfoCanvas");'>Show</button>
+ </td>
+ </tr>
+ <tr>
<td>Timestamp</td>
<td>
<button onclick='hideLayer("topCanvas");'>Hide</button>
@@ -509,6 +506,7 @@
<canvas id="blurCanvas" width="1920" height="1032" style="position: absolute; z-index: 20;"> </canvas>
<canvas id="switchCanvas" width="1920" height="1032" style="position: absolute; z-index: 30;"> </canvas>
<canvas id="textCanvas" width="1920" height="1032" style="position: absolute; z-index: 40;"> </canvas>
+ <canvas id="textInfoCanvas" width="1920" height="1032" style="position: absolute; z-index: 45;"> </canvas>
<canvas id="topCanvas" width="1920" height="1032" style="position: absolute; z-index: 50;"> </canvas>
<canvas id="inputCanvas" width="1920" height="1032" style="position: absolute; z-index: 60; cursor: pointer;" onclick="canvasClick(event)">
</canvas>
diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js
index 9b2d44c..ddb50a1 100644
--- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js
+++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js
@@ -232,11 +232,14 @@ function tempUpdater()
{
for (sw in nms.switches_now["switches"]) {
var t = "white";
+ var temp = "";
if (nms.switches_now["switches"][sw]["temp"]) {
t = temp_color(nms.switches_now["switches"][sw]["temp"]);
+ temp = nms.switches_now["switches"][sw]["temp"] + "°C";
}
setSwitchColor(sw, t);
+ switchInfoText(sw, temp);
}
}
diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js
index d4cf4e8..30d6ba8 100644
--- a/web/nms.gathering.org/nms2/js/nms.js
+++ b/web/nms.gathering.org/nms2/js/nms.js
@@ -7,6 +7,8 @@ var nms = {
ping_data:undefined, // JSON data for ping history.
drawn:false, // Set to 'true' when switches are drawn
switch_showing:"", // Which switch we are displaying (if any).
+ switchInfo:{},
+ switchInfoDrawn:{},
repop_switch:false, // True if we need to repopulate the switch info when port state updates (e.g.: added comments);
repop_time:false, // Timestamp in case we get a cached result
nightMode:false,
@@ -23,7 +25,8 @@ var nms = {
textDrawn:{}, // Have we drawn text for this switch?
now:false, // Date we are looking at (false for current date).
fontSize:16, // This is scaled too, but 16 seems to make sense.
- fontFace:"Arial Black",
+ fontFace:"Verdana",
+ fontLineFactor:3,
/*
* This is used to track outbound AJAX requests and skip updates if
* we have too many outstanding requests. The ajaxOverflow is a
@@ -203,6 +206,9 @@ function initDrawing() {
dr['text'] = {};
dr['text']['c'] = document.getElementById("textCanvas");
dr['text']['ctx'] = dr['text']['c'].getContext('2d');
+ dr['textInfo'] = {};
+ dr['textInfo']['c'] = document.getElementById("textInfoCanvas");
+ dr['textInfo']['ctx'] = dr['textInfo']['c'].getContext('2d');
dr['top'] = {};
dr['top']['c'] = document.getElementById("topCanvas");
dr['top']['ctx'] = dr['top']['c'].getContext('2d');
@@ -649,6 +655,7 @@ function setUpdater(fo)
{
nms.updater = undefined;
resetColors();
+ resetTextInfo();
fo.init();
nms.updater = fo;
var foo = document.getElementById("updater_name");
@@ -932,8 +939,8 @@ function updateSpeed()
nms.speed = speed_in;
nms.speed_full = speed_full;
if (speedele) {
- speedele.innerHTML = byteCount(8 * parseInt(nms.speed)) + "bit/s";
- speedele.innerHTML += " / " + byteCount(8 * parseInt(nms.speed_full)) + "bit/s";
+ speedele.innerHTML = byteCount(8 * parseInt(nms.speed)) + "b/s";
+ speedele.innerHTML += " / " + byteCount(8 * parseInt(nms.speed_full)) + "b/s";
}
}
@@ -1008,10 +1015,11 @@ function drawSwitch(sw)
drawBox(box['x'],box['y'],box['width'],box['height']);
dr.switch.ctx.shadowBlur = 0;
if (!nms.textDrawn[sw]) {
- if ((box['width'] + 10 )< box['height'])
- drawSideways(sw,box['x'],box['y'],box['width'],box['height']);
- else
- drawRegular(sw,box['x'],box['y'],box['width'],box['height']);
+ if ((box['width'] + 10 )< box['height']) {
+ drawSideways(dr.text.ctx, sw,box['x'],box['y'],box['width'],box['height']);
+ } else {
+ drawRegular(dr.text.ctx,sw,box['x'],box['y'],box['width'],box['height']);
+ }
nms.textDrawn[sw] = true;
}
@@ -1046,6 +1054,15 @@ function drawSwitches()
}
nms.drawn = true;
}
+function drawSwitchInfo()
+{
+ if (!nms.switches_now || !nms.switches_now.switches)
+ return;
+ for (var sw in nms.switchInfo) {
+ switchInfoText(sw, nms.switchInfo[sw]);
+ }
+ nms.drawn = true;
+}
/*
* Draw current time-window
@@ -1063,9 +1080,9 @@ function drawNow()
dr.top.ctx.clearRect(0,0,Math.floor(800 * canvas.scale),Math.floor(100 * canvas.scale));
dr.top.ctx.fillStyle = "white";
dr.top.ctx.strokeStyle = "black";
- dr.top.ctx.lineWidth = Math.floor(2 * canvas.scale);
+ dr.top.ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
if (dr.top.ctx.lineWidth == 0) {
- dr.top.ctx.lineWidth = Math.round(2 * canvas.scale);
+ dr.top.ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
}
dr.top.ctx.strokeText(now, 0 + margin.text, 25 * canvas.scale);
dr.top.ctx.fillText(now, 0 + margin.text, 25 * canvas.scale);
@@ -1083,8 +1100,10 @@ function drawNow()
function drawScene()
{
dr.text.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace;
+ dr.textInfo.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace;
drawLinknets();
drawSwitches();
+ drawSwitchInfo();
}
/*
@@ -1096,11 +1115,17 @@ function setScale()
canvas.height = orig.height * canvas.scale ;
canvas.width = orig.width * canvas.scale ;
for (var a in dr) {
+ /*
+ * Resizing this to a too small size breaks gradients on smaller screens.
+ */
+ if (a == 'hidden')
+ continue;
dr[a].c.height = canvas.height;
dr[a].c.width = canvas.width;
}
nms.nightBlur = {};
nms.textDrawn = {};
+ nms.switchInfoDrawn = {};
if (nms.gradients)
drawGradient(nms.gradients);
drawBG();
@@ -1192,6 +1217,15 @@ function resetColors()
}
}
+function resetTextInfo()
+{
+ if (!nms.switches_now)
+ return;
+ for (var sw in nms.switches_now.switches) {
+ switchInfoText(sw, undefined);
+ }
+
+}
/*
* onclick handler for the canvas.
*
@@ -1259,6 +1293,26 @@ function setNightMode(toggle) {
}
setScale();
}
+
+function switchInfoText(sw, text)
+{
+ var box = nms.switches_now['switches'][sw]['placement'];
+ var c = canvas.scale;
+ if (nms.switchInfo[sw] == text && nms.switchInfoDrawn[sw]) {
+ return;
+ }
+ nms.switchInfo[sw] = text;
+ nms.switchInfoDrawn[sw] = true;
+ dr.textInfo.ctx.clearRect(c* box['x'], c*box['y'], c*box['width'], c*box['height']);
+ if (text != undefined && text != "") {
+ if ((box['width'] + 10 )< box['height']) {
+ drawSideways(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end");
+ } else {
+ drawRegular(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end");
+ }
+ }
+}
+
/*
* Draw a box (e.g.: switch).
*/
@@ -1269,9 +1323,9 @@ function drawBox(x,y,boxw,boxh)
var myX2 = Math.floor((boxw) * canvas.scale);
var myY2 = Math.floor((boxh) * canvas.scale);
dr.switch.ctx.fillRect(myX,myY, myX2, myY2);
- dr.switch.ctx.lineWidth = Math.floor(0.5 * canvas.scale);
+ dr.switch.ctx.lineWidth = Math.floor(1.0 * canvas.scale);
if (canvas.scale < 1.0) {
- dr.switch.ctx.lineWidth = 0.5;
+ dr.switch.ctx.lineWidth = 1.0;
}
dr.switch.ctx.strokeStyle = "#000000";
dr.switch.ctx.strokeRect(myX,myY, myX2, myY2);
@@ -1293,19 +1347,25 @@ function drawBoxBlur(x,y,boxw,boxh)
*
* XXX: This is pretty nasty and should also probably take a box as input.
*/
-function drawSideways(text,x,y,w,h)
+function drawSideways(ctx,text,x,y,w,h,align)
{
- dr.text.ctx.rotate(Math.PI * 3 / 2);
- dr.text.ctx.fillStyle = "white";
- dr.text.ctx.strokeStyle = "black";
- dr.text.ctx.lineWidth = Math.floor(3 * canvas.scale);
- if (dr.text.ctx.lineWidth == 0) {
- dr.text.ctx.lineWidth = Math.round(3 * canvas.scale);
+ ctx.rotate(Math.PI * 3 / 2);
+ ctx.fillStyle = "white";
+ ctx.strokeStyle = "black";
+ if (align == "end") {
+ ctx.textAlign = align;
+ y = y-h + margin.text*2;
+ } else {
+ ctx.textAlign = "start";
+ }
+ ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
+ if (ctx.lineWidth == 0) {
+ ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
}
- dr.text.ctx.strokeText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
- dr.text.ctx.fillText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
+ ctx.strokeText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
+ ctx.fillText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
- dr.text.ctx.rotate(Math.PI / 2);
+ ctx.rotate(Math.PI / 2);
}
/*
@@ -1336,16 +1396,22 @@ function invertCanvas() {
*
* XXX: Both should be renamed to have 'text' or something in them
*/
-function drawRegular(text,x,y,w,h) {
-
- dr.text.ctx.fillStyle = "white";
- dr.text.ctx.strokeStyle = "black";
- dr.text.ctx.lineWidth = Math.floor(3 * canvas.scale);
- if (dr.text.ctx.lineWidth == 0) {
- dr.text.ctx.lineWidth = Math.round(3 * canvas.scale);
+function drawRegular(ctx,text,x,y,w,h,align) {
+
+ ctx.fillStyle = "white";
+ ctx.strokeStyle = "black";
+ ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
+ if (align == "end") {
+ ctx.textAlign = align;
+ x = x+w - margin.text*2;
+ } else {
+ ctx.textAlign = "start";
+ }
+ if (ctx.lineWidth == 0) {
+ ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
}
- dr.text.ctx.strokeText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
- dr.text.ctx.fillText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
+ ctx.strokeText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
+ ctx.fillText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
}
/*
@@ -1397,7 +1463,7 @@ function initNMS() {
nms.timers.ping = new nmsTimer(updatePing, 1000, "Ping updater", "AJAX request to update ping data");
nms.timers.ping.start();
- nms.timers.replay = new nmsTimer(timeReplay, 500, "Time machine", "Handler used to change time");
+ nms.timers.replay = new nmsTimer(timeReplay, 1000, "Time machine", "Handler used to change time");
detectHandler();
updatePorts();
updatePing();
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-28 10:46:05 +0000