View source for User:Eleanorg/Prototyping Yr 1 Timester 1/Ship Tracker

This script finds out the current location of the passenger ship between Harwich (UK) and Hoek van Holland, representing its location visually. You'll either see an image of the harbour where it is currently docked, or a composite image of the two harbours with their relative opacity corresponding to the ship's location between them. 

http://pzwart3.wdka.hro.nl/~egreenhalgh/cgi-bin/shipTrack/shipTrack4.cgi


<div style="margin-bottom:3px;">
[[file: shipTrack1.png]]
[[file: shipTrack2.png]]
</div>
[[file: shipTrack3.png]]
[[file: shipTrack4.png]]


<source lang = python>
#!/usr/bin/python
#-*- coding:utf-8 -*-

import urllib2, re

#----------------- GET CURRENT LONGITUDE------------

text = urllib2.urlopen("http://www.marinetraffic.com/ais/shipdetails.aspx?mmsi=235080274&header=true").read()
    
for m in re.findall(r"(\d+\.\d+) ?˚ ?/ ?\d*(\d+\.\d\d\d\d)\d* ?˚", text):
    longitude = str(m[1])                        # must be a string for next regex to work


# ------------------CONVERT TO INTEGER---------------

longint = int(re.sub("\.", "", longitude)) 	 ##removes decimal point and converts back to an integer


# -------------------CONVERT TO %-------------------

	 ##converts longint into a percentage, where 12528 = 0% and 41285 = 100%
	 ##range between numbers is 28703, so 1% of range is 28703/100 ---> 287.03. Longitude equivalent to 1% will be 12528 + (28703/100)
	 ##thus to convert longitude to percentage, work out its distance from 12528 and divide this distance by 287.03.
# for testing (comment out when running for real):
#percent = 20
percent = float(int((longint - 12528) / 287.03))
         ## now move decimal point two places left and convert to a string, for use with CSS
opacity = str(percent / 100)


### ------------------USE IN HTML---------------------

print "Content-Type: text/html"
print
print """
<!DOCTYPE html>
  <html>
    <head>
      <title>Harwich - Holland Ship Tracker</title>
      <style>
        body {
          background-color: #567;
        }
        #fading {
          position: absolute;
          width: 100%;
          margin-left:-9px; 
          margin-top:-50px;
          opacity: """ + opacity + """;
        }
        #underlay {
          width: 100%; 
          margin-left:-9px; 
          margin-top:-45px;
        } 
        #text {
          position: absolute; 
          z-index:100; top:100px;
          margin-left:70%; 
          margin-right:20%; 
          font-family:sans; 
          color: #89a;
        }
      </style>
    </head>
    <body> 
         <img id="fading" src="http://farm5.staticflickr.com/4039/4552559587_d35d7942ab_b.jpg" alt="http://www.flickr.com/photos/whiteknuckled/4552559587/" />
         <img id="underlay" src="http://farm3.staticflickr.com/2665/4228521046_0c421e03f0_o.jpg" />
         <div id="text">Stena Britannica is at longitude """ + longitude + """</p>    
    </body>
  </html>"""


</source>