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.
The trick was a websocket feed of live status changes causing a simple javascript function to update the content and classes on the SVG objects in real time. It works! Next step is probably live port LEDs as 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...
"we tried making the power green like the plugged in Ethernet"
ReplyDeleteCan we safely assume that, if you can see the web interface, the power side of things is working?
Err, well, yeah. But only on a single PSU box. Adrian said the bigger/better Firebricks have dual PSU, so green/red status on those power sockets would be useful to see graphically.
DeleteFair point about the dual supply ones :)
DeleteHow are you going to show what type of SFP is plugged into port 5? :)
ReplyDeleteLike the other ports, just a green box and speed. Bit we were thinking tool tip or something to show the vendor ID, etc.
Delete"deliberate grammatically error" :D
ReplyDelete:-)
Delete"Also, for a bit, I forgot CSS does not allow // comments and just causes next thing to be ignored - arg! I hate CSS!"
ReplyDeleteSurely, "causes next thing to be ignored" is the very essence of a comment introduction sequence? ;-)
Not the bit on the line after the // but the whole next line of css, because the // line all becomes part of the selector.
DeleteAnother thing that looks odd to me is the input power voltage range; it is depicted as 85 - 264V ac which may be technically correct in that the PSU guarantees to work over that range but in reality a user will have a limited set of values to work with: 110V, 230V, etc.
ReplyDeleteI'm just thinking that it may cause some confusion, it really shouln't but when people get confused when "up to" is used for breadband speeds it may well happen here.
This is just a small nit-pick and I bet your users a generally savvy enough for this not to bother them though.
I say this as an ex-electronic engineer who has designed powers supplies albeit for military applications not civil.
Funnily enough, that also caused debate. Sadly a live voltage reading is not available. The product rating is 85-264V~, as per the product label. I did put 110/230V~ on the web page and then we had some debate on the fact that it did not match the product label. You can't win some times :-). Other option may be just to say "Mains" or something..
Delete/me dusts off three-phase to figure 8 cable ;)
DeleteOn a serious note, I think most networky types will get what 85-264V means.
I wouldn't bet on that. 90% of the people I meet in the IT game are people that "do IT" (and scarper) rather than people who "understand IT". There is a huge difference. My litmus test is to talk about a 25-bit subnet mask. If they understand me then that's a good (but rare) indicator and I have a proper IT person in front of me. Most haven't a clue what I am on about. All subnets are on a mask of 255.255.255.0, obviously, they tell me.
DeleteOh god... you remind me of a change request (that was sponsored by the server team leader no less to change subnet masks in the DHCP scopes to /24s so they all matched) - argh...... My similar litmus test is asking what the difference is between a forward and a reverse DNS lookup
Delete