Changeset 8285 in genesis


Ignore:
Timestamp:
Aug 10, 2010, 12:11:07 PM (14 years ago)
Author:
rick
Message:

Some serious effort in making it look useable

Location:
nodes
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • nodes/make-map.py

    r8282 r8285  
    44# Build topological network graph
    55# Rick van der Zwet <info@rickvanderzwet.nl>
     6
     7import cgi
     8import gformat
    69import re
    710import sys
    8 import glob
    9 import tempfile
    10 import subprocess
    11 import gformat
    12 
    1311import urllib
    14 import re
    1512import yaml
    1613
    … …  
    6562def make_graph():
    6663  f = open('kmlfile.kml', 'w')
    67   f.write("""
    68 <?xml version="1.0" encoding="UTF-8"?>
     64  f.write("""<?xml version="1.0" encoding="UTF-8"?>
    6965<kml xmlns="http://earth.google.com/kml/2.0">
    7066  <Document>
    71     <name>KML Samples</name>
     67    <name>WirelessLeiden Nodemap</name>
    7268    <open>1</open>
    73     <description>Unleash your creativity with the help of these examples!</description>
    74     <Style id="downArrowIcon">
     69    <description>Generated realtime status of all Wireless Leiden AccessPoints</description>
     70    <Style id="node_status_up">
    7571      <IconStyle>
    76         <Icon>
    77           <href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
    78         </Icon>
     72        <scale>0.5</scale>
     73        <Icon><href>http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png</href></Icon> 
    7974      </IconStyle>
    8075    </Style>
    81     <Style id="globeIcon">
     76    <Style id="node_status_down">
    8277      <IconStyle>
    83         <Icon>
    84           <href>http://maps.google.com/mapfiles/kml/pal3/icon19.png</href>
    85         </Icon>
     78        <scale>0.5</scale>
     79        <Icon><href>http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png</href></Icon> 
    8680      </IconStyle>
    87       <LineStyle>
    88         <width>2</width>
    89       </LineStyle>
    9081    </Style>
    91     <Style id="transPurpleLineGreenPoly">
    92       <LineStyle>
    93         <color>7fff00ff</color>
    94         <width>4</width>
    95       </LineStyle>
    96       <PolyStyle>
    97         <color>7f00ff00</color>
    98       </PolyStyle>
    99     </Style>
    100     <Style id="yellowLineGreenPoly">
    101       <LineStyle>
    102         <color>7f00ffff</color>
    103         <width>4</width>
    104       </LineStyle>
    105       <PolyStyle>
    106         <color>7f00ff00</color>
    107       </PolyStyle>
    108     </Style>
    109     <Style id="thickBlackLine">
    110       <LineStyle>
    111         <color>87000000</color>
    112         <width>10</width>
    113       </LineStyle>
    114     </Style>
    115     <Style id="redLineBluePoly">
    116       <LineStyle>
    117         <color>ff0000ff</color>
    118       </LineStyle>
    119       <PolyStyle>
    120         <color>ffff0000</color>
    121       </PolyStyle>
    122     </Style>
    123     <Style id="blueLineRedPoly">
    124       <LineStyle>
    125         <color>ffff0000</color>
    126       </LineStyle>
    127       <PolyStyle>
    128         <color>ff0000ff</color>
    129       </PolyStyle>
    130     </Style>
    131     <Style id="transRedPoly">
    132       <LineStyle>
    133         <width>1.5</width>
    134       </LineStyle>
    135       <PolyStyle>
    136         <color>7d0000ff</color>
    137       </PolyStyle>
    138     </Style>
    139     <Style id="transBluePoly">
    140       <LineStyle>
    141         <width>1.5</width>
    142       </LineStyle>
    143       <PolyStyle>
    144         <color>7dff0000</color>
    145       </PolyStyle>
    146     </Style>
    147     <Style id="transGreenPoly">
    148       <LineStyle>
    149         <width>1.5</width>
    150       </LineStyle>
    151       <PolyStyle>
    152         <color>7d00ff00</color>
    153       </PolyStyle>
    154     </Style>
    155     <Style id="transYellowPoly">
    156       <LineStyle>
    157         <width>1.5</width>
    158       </LineStyle>
    159       <PolyStyle>
    160         <color>7d00ffff</color>
    161       </PolyStyle>
    162     </Style>
    163     <Style id="noDrivingDirections">
    164       <BalloonStyle>
    165         <text><![CDATA[
    166           <b>$[name]</b>
    167           <br /><br />
    168           $[description]
    169         ]]></text>
    170       </BalloonStyle>
     82    <Style id="node_status_planned">
     83      <IconStyle>
     84        <scale>0.5</scale>
     85        <Icon><href>http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png</href></Icon> 
     86      </IconStyle>
    17187    </Style>
    17288    <Folder>
    173       <name>Paths</name>
     89      <name>Nodes</name>
    17490      <visibility>0</visibility>
    175       <description>Examples of paths. Note that the tessellate tag is by default
    176         set to 0. If you want to create tessellated lines, they must be authored
    177         (or edited) directly in KML.</description>
     91      <description>All active nodes and links</description>
    17892    """)
    17993
    … …  
    201115          poel[addr] = [host]
    202116          # Assume all eth2wifibridge to be 11a for a moment
    203           if datadump[iface_key].has_key('eth2wifibridge'):
     117          iface_parent = '_'.join(iface_key.split('_')[0:2])
     118          if datadump[iface_parent].has_key('extra_type') and datadump[iface_parent]['extra_type'] == 'eth2wifibridge':
    204119            link_type[addr] = '11a'
    205120          else:
    206             link_type[addr] = datadump[iface_key]['type']
     121            link_type[addr] = datadump[iface_parent]['type']
    207122          print "### %s [%s] is of type %s" % (gformat.showaddr(addr), iface_key, link_type[addr])
    208123      lam, phi = rd2etrs(datadump['rdnap_x'], datadump['rdnap_y'])
    209124      node[host] = (lam, phi)
    210125      f.write("""
    211                 <Placemark>
    212                         <name>Blue Icon</name>
    213                         <description>Just another blue icon.</description>
    214                         <styleUrl>./styles.kml#blueIcons</styleUrl>
    215                         <Point>
    216                                 <coordinates>%s,%s,630</coordinates>
    217                         </Point>
    218                 </Placemark>
    219    """ % (lam, phi))
     126      <description>All active nodes</description>
     127      <Placemark>
     128        <name>Node %(name)s</name>
     129        <description>%(desc)s></description>
     130        <styleUrl>#node_status_up</styleUrl>
     131        <Point><coordinates>%(lam)s,%(phi)s,0</coordinates></Point>
     132      </Placemark>
     133   """ % {'name' : host, 'desc' : cgi.escape(datadump['location']), 'lam' : lam, 'phi' : phi})
    220134      nodes += [("POINT(%s, %s)" % (lam, phi))]
    221135  except (KeyError, ValueError), e:
    222136    print "[FOUT] in '%s' interface '%s'" % (host,iface_key)
    223     print e
     137    raise
    224138    sys.exit(1)
    225139
     140  f.write("""
     141    </Folder>
     142    <Folder>
     143      <name>Links</name>
     144      <visibility>0</visibility>
     145      <description>All links</description>
     146  """)
    226147  for addr,leden in poel.iteritems():
    227148    if link_type[addr] == '11a':
    228       color = 'red'
     149      color = '#ff0000ff'
     150      weight = 2
     151    elif link_type[addr] == 'eth':
     152      color = '#ffff0000'
    229153      weight = 4
    230     elif link_type[addr] == 'eth':
    231       color = 'blue'
    232       weight = 8
    233154    else:
    234       color = 'black'
     155      color = '#ff000000'
    235156      weight = 1
     157
    236158    leden = sorted(set(leden))
    237159    for index,lid in enumerate(leden[:-1]):
    … …  
    239161        f.write("""
    240162      <Placemark>
    241         <name>Untessellated</name>
     163        <name>%(name)s</name>
    242164        <visibility>0</visibility>
    243         <description><![CDATA[If the <tessellate> tag has a value of 0, the line follow a simple straight-line path from point to point]]></description>
     165        <description>%(desc)s</description>
    244166        <LineString>
    245167          <tessellate>0</tessellate>
    246           <coordinates> %s, %s, 0
    247             %s , %s, 0 </coordinates>
     168          <coordinates> %(lam1)s, %(phi1)s, 0
     169            %(lam2)s , %(phi2)s, 0 </coordinates>
    248170        </LineString>
     171        <Style>%(style)s</Style>
    249172      </Placemark>
    250       """ % (node[lid][0], node[lid][1], node[buur][0], node[buur][1]))
     173      """ % { 'lam1' : node[lid][0],
     174              'phi1' : node[lid][1],
     175              'lam2' : node[buur][0],
     176              'phi2' : node[buur][1],
     177              'name' : "Interlink: %s --- %s" % (lid, buur),
     178              'desc' : "%s [%s]" % (gformat.showaddr(addr), link_type[addr]),
     179              'style' : "<LineStyle><color>%s</color><width>%s</width></LineStyle>" % (color, weight),
     180              })
    251181  f.write("""
    252182    </Folder>

  • nodes/nodemap.html

    r8283 r8285  
    99      }
    1010    </style>
    11     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
     11  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"></script>
    1212
    1313    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    … …  
    6060                extractStyles: true,
    6161                extractAttributes: true,
    62                 maxDepth: 2
     62                maxDepth: 5
    6363              }
    6464            });
    6565        map.addLayer(kml);
    6666
     67        select = new OpenLayers.Control.SelectFeature(kml);
     68        kml.events.on( {
     69               "featureselected": onKMLFeatureSelect,
     70               "featureunselected": onKMLFeatureUnselect
     71        });
     72        map.addControl(select);
     73        select.activate();
    6774
    6875        var vectors = new OpenLayers.Layer.Vector("Vector Layer")
    … …  
    7582        map.addControl(new OpenLayers.Control.ScaleLine());
    7683        map.addControl(new OpenLayers.Control.KeyboardDefaults());
     84        map.addControl(new OpenLayers.Control.ZoomBox());
    7785
    7886        //var in_options = {
    … …  
    162170      }
    163171
     172      function onPopupClose(evt) {
     173          select.unselectAll();
     174      }
     175
     176
     177      function onKMLFeatureSelect(event) {
     178        var feature = event.feature;
     179        var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
     180        popup = new OpenLayers.Popup.FramedCloud("chicken",
     181                                 feature.geometry.getBounds().getCenterLonLat(),
     182                                 new OpenLayers.Size(100,100),
     183                                 content,
     184                                 null, true, onPopupClose);
     185        feature.popup = popup;
     186        map.addPopup(popup);
     187      }
     188
     189      function onKMLFeatureUnselect(event) {
     190        var feature = event.feature;
     191        if(feature.popup) {
     192          map.removePopup(feature.popup);
     193          feature.popup.destroy();
     194          delete feature.popup;
     195        }
     196      }
    164197
    165198      function handleMeasurements(event) {
    … …  
    199232      }
    200233
     234      function toggleInfo() {
     235        var e = document.getElementById('infofield');
     236        if (e.style.visibility == "hidden") {
     237          e.style.visibility = "visible";
     238        } else {
     239          e.style.visibility = "hidden";
     240        };
     241      }
     242
    201243      // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
    202244    </script>
    … …  
    204246  <body onload="init();">
    205247    <div id="basicMap">
    206     <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
    207         <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
    208         <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
    209         <div id="output"></div>
    210     </div>
     248      <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
     249          <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
     250          <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
     251          <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" alt="Information" onclick="toggleInfo()" />
     252          <div id="output"></div>
     253      </div>
     254      <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
     255        <ul>
     256          <li>holding down shift, whilst dragging the mouse to do box zooming</li>
     257          <li>Keyboard Navigation is enabled</li>
     258        </ul>
     259      </div>
    211260    </div>
    212261  </body>
Note: See TracChangeset for help on using the changeset viewer.