You have no idea how much debate this caused internally! Not just the actual design of the polycarbonate printed label, but how it shows on the web interface...
The "clever" bit was to make the FB2900 status page have an image of the front panel. Previously we have had simple rectangular boxes with colour and labels for speed/duplex. This time it was made using the design drawings and hand crafted SVG. I originally had the SVG made from a PDF made from the drawings, but that was massive by comparison and did not really help with what I need. I had an SVG but some parts of it needed to have id tags to allow some dynamic changes.
In the end I had to manually draw all the physical bits, the USB socket, the power socket, and the Ethernet sockets. My digital callipers were useful. The end result is pretty damn good.
We then have, within the ports, a rectangle with text to show a port connected. The green is port up and the purple is actually "remote fault" which I was testing. It works well.
Technical bits included the fact that "className" is not a thing in SVG, you need "className.baseVal". That fooled me for ages. Also, for a bit, I forgot CSS does not allow // comments and just causes next thing to be ignored - arg! I hate CSS!
The labels under the SVG are simple divs with controls on width. This is because SVG makes it almost impossible to have a wrapped block of text.
So what caused all of the debate exactly? Guess!
The power connector. I spent ages drawing that to get it just right. It looks just like the real thing. Only issue is, of course, nothing is plugged in to it, and that does not reflect reality does it? But seriously this is a diagram, the RJ45s have nothing plugged in, just some green rectangles with the port speed/duplex.
So, we tried making the power green like the plugged in Ethernet or USB port - looked messy. We tried an green outline - maybe better. But both just draw attention to what is essentially a cosmetic detail like the logo and the grey background.
Final solution, add a label under it with the voltage range, sort of shows we know there is a power connection maybe? In fact the code has to handle three different power supply options on the FB2900, so not that daft.
Personally, I like the un-plugged power. It is like a deliberate grammatically error so that people post saying that it is not plugged in and create free advertising for you.
But all in all we are catching up with switches from the late 90s that show the switch graphically. I think it is really neat, and the fact it is live via web sockets even more so. The live status of ports is a really useful thing to have in many ways - this is just "pretty" as well...
P.S. We have live port LEDs now (optional), and as expected that creates blinking on the port that is used for the web socket to report the LEDs blinking :-) We may be able to improve that...