gitproxy/RTLPlayground
1
0
Fork 0
mirror of https://github.com/logicog/RTLPlayground.git synced 2026-08-30 14:52:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltips for ports

Browse Source
This commit is contained in:
logicog
2025-12-16 20:08:47 +01:00
parent 87717a0790
commit b442417a8a
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/main.js
+22 -2
View File
@@ -8,13 +8,21 @@ var pIsSFP = new Int8Array(10);
var numPorts = 0; var numPorts = 0;
const logToPhysPort = [0, 0, 0, 5, 1, 2, 3, 4, 6]; const logToPhysPort = [0, 0, 0, 5, 1, 2, 3, 4, 6];
const physToLogPort = [ 4, 5, 6, 7, 3, 8]; const physToLogPort = [ 4, 5, 6, 7, 3, 8];
// <div class="tooltip"><div id="ports"><span class="tooltiptext">The text for the Tooltip.</span></div></div>
function drawPorts() { function drawPorts() {
var f = document.getElementById('ports'); var f = document.getElementById('ports');
console.log("DRAWING PORTS: ", numPorts); console.log("DRAWING PORTS: ", numPorts);
for (let i = 0; i < numPorts; i++) { for (let i = 0; i < numPorts; i++) {
console.log("DRAWING isSFP: ", pIsSFP[i]); console.log("DRAWING isSFP: ", pIsSFP[i]);
const d = document.createElement("div");
d.classList.add('tooltip');
const s = document.createElement("span");
s.classList.add("tooltiptext");
s.innerHTML = "Tooltip text";
s.id="tt_" + (i+1);
const l = document.createElement("object"); const l = document.createElement("object");
d.appendChild(l);
d.appendChild(s);
l.type = "image/svg+xml"; l.type = "image/svg+xml";
if (!pIsSFP[i]) { if (!pIsSFP[i]) {
l.data = "port.svg"; l.data = "port.svg";
@@ -26,7 +34,7 @@ function drawPorts() {
l.height = "60"; l.height = "60";
} }
l.id="port" + (i+1); l.id="port" + (i+1);
f.appendChild(l); f.appendChild(d);
} }
console.log("DRAWING DONE "); console.log("DRAWING DONE ");
} }
@@ -49,9 +57,11 @@ function update() {
p = s[i]; p = s[i];
let n = p.portNum; let n = p.portNum;
let pid = "port" + n; let pid = "port" + n;
let ttid = "tt_" + n;
n--; n--;
txG[n] = BigInt(p.txG); txB[n] = BigInt(p.txB); rxG[n] = BigInt(p.rxG); rxB[n] = BigInt(p.rxB); txG[n] = BigInt(p.txG); txB[n] = BigInt(p.txB); rxG[n] = BigInt(p.rxG); rxB[n] = BigInt(p.rxB);
var psvg = document.getElementById(pid); var psvg = document.getElementById(pid);
var tt = document.getElementById(ttid);
if (psvg == null || !psvg.contentDocument) if (psvg == null || !psvg.contentDocument)
continue; continue;
var bgs = psvg.contentDocument.getElementsByClassName("bg"); var bgs = psvg.contentDocument.getElementsByClassName("bg");
@@ -61,6 +71,7 @@ function update() {
bgs[0].style.fill = "red"; bgs[0].style.fill = "red";
leds[0].style.fill = "black"; leds[1].style.fill = "black"; leds[0].style.fill = "black"; leds[1].style.fill = "black";
psvg.style.opacity = 0.4; psvg.style.opacity = 0.4;
tt.innerHTML = "Not enabled.";
} else { } else {
psvg.style.opacity = 1.0; psvg.style.opacity = 1.0;
pState[n] = p.link; pState[n] = p.link;
@@ -72,6 +83,15 @@ function update() {
leds[0].style.fill = "black"; leds[1].style.fill = "black"; leds[0].style.fill = "black"; leds[1].style.fill = "black";
psvg.style.opacity = 0.4 psvg.style.opacity = 0.4
} }
tt.innerHTML = "Link speed: " + linkS[p.link + 1] + "<br>";
if (p.isSFP) {
tt.innerHTML += "T = " + (Number(p.sfp_temp) >> 8) + "." + ((Number(p.sfp_temp) & 0xff)/256.0 * 100).toFixed(0) + "&deg;C<br>";
tt.innerHTML += "Vcc = " + (Number(p.sfp_vcc) / 10000.0).toFixed(2) + "V<br>";
tt.innerHTML += "TX-Bias = " + (Number(p.sfp_txbias) / 500.0).toFixed(1) + "mA<br>";
tt.innerHTML += "TX-Power = " + (Number(p.sfp_txpower) / 10.0).toFixed(0) + "mW<br>";
tt.innerHTML += "RX-Power = " + (Number(p.sfp_rxpower) / 10.0).toFixed(0) + "mW<br>";
console.log(tt.innerHTML);
}
} }
} }
} }