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

Port images show configuration in Webbrowser

Browse Source
This commit is contained in:
logicog
2025-08-17 21:03:43 +02:00
parent d79ac79f2f
commit dbd60fc810
5 changed files with 98 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+15 -3
View File
@@ -1,16 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<script src="/main.js"></script>
<head> <head>
<link rel="stylesheet" href="style.css">
<title>FreeSwitchOS Main Page</title> <title>FreeSwitchOS Main Page</title>
</head> </head>
<body> <body>
<div id="ports"> <img id="port1" width="40" height="40" src="port.svg"/> <img id="port2" width="40" height="40" src="port.svg"/> <ul> <li><a href="index.html">Overview</a></li> <li><a href="vlan.html">VLAN</a></li>
<img id="port3" width="40" height="40" src="port.svg"/> <img id="port4" width="40" height="40" src="port.svg"/> <img id="sfp1" width="60" height="60" src="sfp.svg"/> <li><a href="mirror.html">Mirroring</a></li> <li><a href="trunk.html">Port Aggregation</a></li></ul>
<img id="sfp2" width="60" height="60" src="sfp.svg"/> </div> <div style="margin-left:25%;padding:1px 16px;height:1000px;">
<div id="ports">
<object type="image/svg+xml" data="port.svg" id="port1" width="40" height="40"></object>
<object type="image/svg+xml" data="port.svg" id="port2" width="40" height="40"></object>
<object type="image/svg+xml" data="port.svg" id="port3" width="40" height="40"></object>
<object type="image/svg+xml" data="port.svg" id="port4" width="40" height="40"></object>
<object type="image/svg+xml" data="sfp.svg" id="port5" width="60" height="60"></object>
<object type="image/svg+xml" data="sfp.svg" id="port6" width="60" height="60"></object>
</div>
<h1>Switch Configuration</h1> <h1>Switch Configuration</h1>
<table> <table>
<tr> <th>Setting</th> <th></th> </tr> <tr> <th>Setting</th> <th></th> </tr>
#{html_index} #{html_index}
</table> </table>
</div>
</body> </body>
</html> </html>
html/main.js
+44
View File
@@ -0,0 +1,44 @@
function update() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const s = JSON.parse(xhttp.responseText);
console.log("Request returned", JSON.stringify(s));
s.forEach(function (p, i) {
let pid = "port" + p.portNum;
console.log(p.txG, pid);
var psvg = document.getElementById(pid);
var bgs = psvg.contentDocument.getElementsByClassName("bg");
console.log(JSON.stringify(bgs));
var leds = psvg.contentDocument.getElementsByClassName("led");
if (p.enabled == 0) {
bgs[0].style.fill = "red";
leds[0].style.fill = "black";
leds[1].style.fill = "black";
psvg.style.opacity = 0.4;
} else {
psvg.style.opacity = 1.0;
if (p.link == 5) {
leds[0].style.fill = "green";
leds[1].style.fill = "orange";
} else if (p.link == 2) {
leds[0].style.fill = "green";
leds[1].style.fill = "green";
} else {
leds[0].style.fill = "black";
leds[1].style.fill = "black";
psvg.style.opacity = 0.4
}
console.log(JSON.stringify(leds));
}
});
}
};
xhttp.open("GET", "/status.json", true);
xhttp.send();
}
window.addEventListener("load", function() {
update();
const interval = setInterval(update, 5000);
});
html/port.svg
+3 -3
View File
@@ -4,7 +4,7 @@
<g id="g1" transform="translate(256.16 417.12)"> <g id="g1" transform="translate(256.16 417.12)">
<rect id="r1" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:4;fill:#ffffff" rx="4.514" ry="4.514" height="90.625" width="117.88" y="69.93" x="59.896"/> <rect id="r1" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:4;fill:#ffffff" rx="4.514" ry="4.514" height="90.625" width="117.88" y="69.93" x="59.896"/>
<g id="g2"> <g id="g3"> <g id="g2"> <g id="g3">
<path id="rect3787" <path class="bg" id="rect3787"
d="m73.958 75.66h89.41c2.3083 0 4.1667 1.8583 4.1667 4.1667l0.00028 52.653h-21.742v9.414h-8.694l0.00004 12.586h-36.871l-0.00004-12.586h-8.694v-9.414h-21.742l-0.000336-52.653c-0.000011-2.3083 1.8583-4.1667 4.1667-4.1667z" d="m73.958 75.66h89.41c2.3083 0 4.1667 1.8583 4.1667 4.1667l0.00028 52.653h-21.742v9.414h-8.694l0.00004 12.586h-36.871l-0.00004-12.586h-8.694v-9.414h-21.742l-0.000336-52.653c-0.000011-2.3083 1.8583-4.1667 4.1667-4.1667z"
style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2.5;fill:#dcdcdc"/> style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2.5;fill:#dcdcdc"/>
<g id="g4" transform="translate(-0.368)" style="stroke:#191919;stroke-linecap:square;fill:#666666"> <g id="g4" transform="translate(-0.368)" style="stroke:#191919;stroke-linecap:square;fill:#666666">
@@ -18,8 +18,8 @@
<rect id="r9" height="22.786" width="3.9062" y="75.747" x="143.17"/> <rect id="r9" height="22.786" width="3.9062" y="75.747" x="143.17"/>
</g> </g>
</g> </g>
<rect id="r10" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2;fill:#1dfe0a" height="13.89" width="17.1" y="137.03" x="69.542"/> <rect class="led" id="r10" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2;fill:#1dfe0a" height="13.89" width="17.1" y="137.03" x="69.542"/>
<rect id="r11" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2;fill:#ffd10a" height="13.89" width="17.1" y="137.03" x="150.68"/> <rect class="led" id="r11" style="stroke:#0a0a0a;stroke-linecap:square;stroke-width:2;fill:#ffd10a" height="13.89" width="17.1" y="137.03" x="150.68"/>
</g> </g>
</g> </g>
</g> </g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

html/sfp.svg
+5 -5
View File
@@ -6,18 +6,18 @@
<path id="p1" <path id="p1"
d="m 117.94442,272.67478 h 7.64646 c 0.21062,0 0.38018,0.16649 0.38018,0.3733 v 4.69239 c 0,0.2068 -0.16956,0.3733 -0.38018,0.3733 h -2.1027 v 0.31956 h -3.44117 v -0.31956 h -2.1027 c -0.21062,0 -0.38018,-0.16649 -0.38018,-0.3733 v -4.69239 c 0,-0.20681 0.16956,-0.3733 0.38018,-0.3733 z" d="m 117.94442,272.67478 h 7.64646 c 0.21062,0 0.38018,0.16649 0.38018,0.3733 v 4.69239 c 0,0.2068 -0.16956,0.3733 -0.38018,0.3733 h -2.1027 v 0.31956 h -3.44117 v -0.31956 h -2.1027 c -0.21062,0 -0.38018,-0.16649 -0.38018,-0.3733 v -4.69239 c 0,-0.20681 0.16956,-0.3733 0.38018,-0.3733 z"
style="fill:#ffffff;stroke:#000000;stroke-width:0.4"/> style="fill:#ffffff;stroke:#000000;stroke-width:0.4"/>
<path id="p2" <path class="bg" id="p2"
d="m 118.36775,273.15632 h 6.79794 c 0.18725,0 0.338,0.14695 0.338,0.32946 v 4.14153 c 0,0.18252 -0.15074,0.32946 -0.338,0.32946 h -6.79794 c -0.18724,0 -0.338,-0.14695 -0.338,-0.32946 v -4.14153 c 0,-0.18252 0.15074,-0.32946 0.338,-0.32946 z" d="m 118.36775,273.15632 h 6.79794 c 0.18725,0 0.338,0.14695 0.338,0.32946 v 4.14153 c 0,0.18252 -0.15074,0.32946 -0.338,0.32946 h -6.79794 c -0.18724,0 -0.338,-0.14695 -0.338,-0.32946 v -4.14153 c 0,-0.18252 0.15074,-0.32946 0.338,-0.32946 z"
style="fill:#000000;stroke-width:0.26" /> style="fill:#000000;stroke-width:0.26" />
<path d="m 118.65,273.53 h 6.24 v 4.05 h -6.24 z" style="fill:#1a1a1a;stroke-width:0.26" id="p3" /> <path d="m 118.65,273.53 h 6.24 v 4.05 h -6.24 z" style="fill:#1a1a1a;stroke-width:0.26" id="p3" />
<path d="m 118.86,276.61 h 5.82" style="fill:#1a1a1a;stroke:#000000;stroke-width:0.26" id="p4" /> <path d="m 118.86,276.61 h 5.82" style="fill:#1a1a1a;stroke:#000000;stroke-width:0.26" id="p4" />
<path d="m 124.05,274.25 h 1.39 v 0.72 h -1.39 z" style="fill:url(#linearGradient63614);stroke-width:0.26" id="p5" /> <path d="m 124.05,274.25 h 1.39 v 0.72 h -1.39 z" style="fill:#1a1a1a;stroke-width:0.26" id="p5" />
<path d="m 124.05,276 h 1.39 v 0.72 h -1.39 z" style="fill:url(#linearGradient63616);stroke-width:0.26" id="p6" /> <path d="m 124.05,276 h 1.39 v 0.72 h -1.39 z" style="fill:#1a1a1a;stroke-width:0.26" id="p6" />
<path transform="matrix(0.26,0,0,0.26,116.9,272.11)" d="M 7.3648613,7.0152205 H 29.369861" style="opacity:0.61257;fill:#4d4d4d;stroke:#4d4d4d;filter:url(#filter17794-0)" id="p7" /> <path transform="matrix(0.26,0,0,0.26,116.9,272.11)" d="M 7.3648613,7.0152205 H 29.369861" style="opacity:0.61257;fill:#4d4d4d;stroke:#4d4d4d;filter:url(#filter17794-0)" id="p7" />
</g> </g>
<g id="g3" style="opacity:1;fill:#37d733;" transform="matrix(0.93,0,0,0.92,62.18,-43.11)"> <g id="g3" style="opacity:1;fill:#37d733;" transform="matrix(0.93,0,0,0.92,62.18,-43.11)">
<circle id="c1" cx="176.86" cy="125.7" r="0.93"/> <circle class="led" id="c1" cx="176.86" cy="125.7" r="0.93"/>
<circle id="c2" r="0.93" cy="125.7" cx="180.84"/> <circle class="led" id="c2" r="0.93" cy="125.7" cx="180.84"/>
</g> </g>
</g> </g>
</g> </g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

html/style.css
+31
View File
@@ -0,0 +1,31 @@
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 12%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}