aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSteve McIntyre <steve.mcintyre@linaro.org>2015-10-30 18:28:32 +0000
committerSteve McIntyre <steve.mcintyre@linaro.org>2015-10-30 18:28:32 +0000
commitbfef5069a1aa476dedb1578c8405659fc026664c (patch)
tree6421d5da1c3237fc2b6c433ebe6784a5567d2a05
parent8179f610f609054c762c7918964f13699de413b4 (diff)
Major change to the tooltip code design - switch to javascript
Some browsers will do the imagemap and span CSS, but IE and Konqueror (Safari?) won't. Ugh. Give up on that, and switch to trivial Javascript functions to trigger on onMouseOver() and onMouseOut() events instead. Generate all the port tooltip boxes in the right place but invisible, and when desired simply make the right one visible. Works on all of IE, Firefox, Chrome and Konqueror here, so this will do. Change-Id: I9062ff02c09f275d570148542bcf994f6698c9fc
Diffstat
-rw-r--r--visualisation/visualisation.py129
1 files changed, 80 insertions, 49 deletions
diff --git a/visualisation/visualisation.py b/visualisation/visualisation.py
index 8418135..e1b000b 100644
--- a/visualisation/visualisation.py
+++ b/visualisation/visualisation.py
@@ -139,6 +139,8 @@ class GetHandler(BaseHTTPRequestHandler):
page.append('<meta http-equiv="refresh" content="%d">' % config.refresh)
page.append('</HEAD>')
page.append('<body>')
+
+ # Generate left-hand menu with links to each VLAN diagram
page.append('<div class="menu">')
if len(switches) > 0:
page.append('<h2>Menu</h2>')
@@ -152,46 +154,84 @@ class GetHandler(BaseHTTPRequestHandler):
page.append('</div>')
page.append('</div>')
+ # Now the main content area with the graphics
page.append('<div class="content">')
page.append('<h1>VLANd visualisation</h1>')
+ # Bail early if we have nothing to show!
if len(switches) == 0:
page.append('<p>No switches found in the database, nothing to show...</p>')
- else:
- for vlan in vlans:
- this_image = cache.graphics[vlan.vlan_id]
- page.append('<a name="vlan%d"></a>' % vlan.vlan_id)
- page.append('<h3>VLAN ID %d, Tag %d, name %s</h3>' % (vlan.vlan_id, vlan.tag, vlan.name))
- page.append('<p><img src="/images/vlan/%d.png" ' % vlan.vlan_id)
- page.append('width="%d" height="%d" ' % ( this_image['image']['width'], this_image['image']['height']))
- page.append('alt="VLAN %d diagram" usemap="#MAPVLAN%d">' % (vlan.vlan_id,vlan.vlan_id))
- page.append('<map name="MAPVLAN%d">' % vlan.vlan_id)
- for switch in this_image['ports'].keys():
- for portnum in this_image['ports'][switch].keys():
- this_port = this_image['ports'][switch][portnum]
- # Grab the data about the port that we stored
- # earlier when generating the image
- port = this_port['db']
- ((ulx,uly),(lrx,lry),upper) = this_port['location']
- page.append('<area shape="rect" ')
- page.append('coords="%d,%d,%d,%d" ' % (ulx,uly,lrx,lry))
- page.append(' />')
- page.append('<span>Port ID: %d Port number: %d<br>' % (port.port_id, port.number))
- if port.is_locked:
- page.append('Locked<br>')
- if port.is_trunk:
- page.append('Trunk')
- if port.trunk_id != -1:
- page.append(' (Trunk ID %d)' % port.trunk_id)
- page.append('<br>')
- else:
- page.append('Current VLAN ID: %d (Tag %d)<br>' % (port.current_vlan_id, vlan_tags[port.current_vlan_id]))
- page.append('Base VLAN ID: %d (Tag %d)<br>' % (port.base_vlan_id, vlan_tags[port.base_vlan_id]))
- page.append('</span>')
- page.append('</map></p>')
- page.append('<hr>')
+ page.append('</div>')
+ page.append('</body>')
+ self.wfile.write('\r\n'.join(page))
+ return
+
+ # Trivial javascript helpers for tooltip control
+ page.append('<SCRIPT LANGUAGE="javascript">')
+ page.append('function popup(v,p) {')
+ page.append('a=v.toString();')
+ page.append('b=p.toString();')
+ page.append('id="port".concat("",a).concat(".",b);')
+ page.append('document.getElementById(id).style.visibility="visible";')
+ page.append('}')
+ page.append('function popdown(v,p) {')
+ page.append('a=v.toString();')
+ page.append('b=p.toString();')
+ page.append('id="port".concat("",a).concat(".",b);')
+ page.append('document.getElementById(id).style.visibility="hidden";')
+ page.append('}')
+ page.append('</SCRIPT>')
+
+ # For each VLAN, add a graphic
+ for vlan in vlans:
+ this_image = cache.graphics[vlan.vlan_id]
+ page.append('<a name="vlan%d"></a>' % vlan.vlan_id)
+ page.append('<h3>VLAN ID %d, Tag %d, name %s</h3>' % (vlan.vlan_id, vlan.tag, vlan.name))
+
+ # Link to an image we generate from our data
+ page.append('<p><img src="images/vlan/%d.png" ' % vlan.vlan_id)
+ page.append('width="%d" height="%d" ' % ( this_image['image']['width'], this_image['image']['height']))
+ page.append('alt="VLAN %d diagram" usemap="#MAPVLAN%d">' % (vlan.vlan_id,vlan.vlan_id))
+
+ # Generate an imagemap describing all the ports, with
+ # javascript hooks to pop up/down a tooltip box based on
+ # later data.
+ page.append('<map name="MAPVLAN%d">' % vlan.vlan_id)
+ for switch in this_image['ports'].keys():
+ for portnum in this_image['ports'][switch].keys():
+ this_port = this_image['ports'][switch][portnum]
+ port = this_port['db']
+ ((ulx,uly),(lrx,lry),upper) = this_port['location']
+ page.append('<area shape="rect" ')
+ page.append('coords="%d,%d,%d,%d" ' % (ulx,uly,lrx,lry))
+ page.append('onMouseOver="popup(%d,%d)" onMouseOut="popdown(%d,%d)">' % (vlan.vlan_id, port.port_id, vlan.vlan_id, port.port_id))
+ page.append('</map></p>')
+ page.append('<hr>')
+ page.append('</div>') # End of normal content, all the VLAN graphics shown
+
+ # Now generate the tooltip boxes for the ports. Each is
+ # fully-formed but invisible, ready for our javascript helper
+ # to pop visible on demand.
+ for vlan in vlans:
+ this_image = cache.graphics[vlan.vlan_id]
+ for switch in this_image['ports'].keys():
+ for portnum in this_image['ports'][switch].keys():
+ this_port = this_image['ports'][switch][portnum]
+ port = this_port['db']
+ page.append('<div class="port" id="port%d.%d">' % (vlan.vlan_id, port.port_id))
+ page.append('Port ID: %d Port number: %d<br>' % (port.port_id, port.number))
+ if port.is_locked:
+ page.append('Locked<br>')
+ if port.is_trunk:
+ page.append('Trunk')
+ if port.trunk_id != -1:
+ page.append(' (Trunk ID %d)' % port.trunk_id)
+ page.append('<br>')
+ else:
+ page.append('Current VLAN ID: %d (Tag %d)<br>' % (port.current_vlan_id, vlan_tags[port.current_vlan_id]))
+ page.append('Base VLAN ID: %d (Tag %d)<br>' % (port.base_vlan_id, vlan_tags[port.base_vlan_id]))
+ page.append('</div>')
- page.append('</div>')
page.append('</body>')
self.wfile.write('\r\n'.join(page))
@@ -247,30 +287,21 @@ class GetHandler(BaseHTTPRequestHandler):
page.append('ol { margin-top: 1pt; text-indent: 0 }')
page.append('div.date { font-size: 8pt; }')
page.append('div.sig { font-size: 8pt; }')
- page.append('map { ')
- page.append(' position: relative;')
- page.append(' text-indent: 0;')
- page.append('}')
- page.append('area + span {')
- page.append(' position: absolute;')
- page.append(' margin-left: -9999em;')
- page.append(' background: #00FFFF;')
- page.append('}')
- page.append('area:hover + span {')
+ page.append('div.port {')
page.append(' display: block;')
page.append(' position: fixed;')
- page.append(' left: 9999em;')
+ page.append(' left: 0px;')
page.append(' bottom: 0px;')
page.append(' z-index: 99;')
page.append(' background: #FFFF00;')
- page.append(' border-style:solid;')
- page.append(' border-width:3pt;')
+ page.append(' border-style: solid;')
+ page.append(' border-width: 3pt;')
page.append(' border-color: #3B3B3B;')
- page.append(' margin: 2;')
- page.append(' width: 300px;')
+ page.append(' margin: 1;')
page.append(' padding: 5px;')
page.append(' font-size: 10pt;')
page.append(' font-family: Courier,monotype;')
+ page.append(' visibility: hidden;')
page.append('}')
self.wfile.write('\r\n'.join(page))
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-25 09:53:25 +0000