User:Eleanorg/Thematic1.1/Ship Tracker 1 - image opacity
This script displays an image of Hoek van Holland harbour. Its opacity is determined by the current location of the Stena Britannica passenger ferry to Harwich. When the ship is docked in Hoek van Holland the image appears at full opacity, fading away as the ship travels to England.
Thoughts:
- Could it cross-fade with an image of Harwich harbour?
- Would a video (or audio) equivalent be possible?
#!/usr/bin/python
#-*- coding:utf-8 -*-
import re, urllib2
### -----------------GET LONGITUDE------------------
def getlong():
page = urllib2.urlopen("http://www.marinetraffic.com/ais/shipdetails.aspx?mmsi=235080274&header=true")
text = page.read().decode("utf8")
index = text.find('aspx?mmsi=235080274¢erx=')
startlong = index + 28
endlong = index + 34
return text[startlong:endlong]
## ------------------CONVERT TO INTEGER---------------
longitude = str(getlong()) #must be a string for regex to work
longint = int(re.sub("\.", "", longitude)) #removes decimal point and converts back to an integer
## -------------------CONVERT TO %-------------------
#converts longitude into a percentage, where 1.2528 = 0% and 4.1285 = 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 = str(int((longint - 12528) / 287.03))
# if % is under 100, prefix with "0.": (todo: make exception if % is less than 1)
if percent < 100:
percent = "0." + str(int((longint - 12528) / 287.03)) #converted first to int to avoid decimals, then to str to concatenate with text
### ------------------USE IN HTML---------------------
#determines opacity of an image
print "Content-Type: text/html"
print
print """
<html>
<body>
<div>
<p>percent is: """ + percent + """</p>
<img src="ccWhiteknuckled.jpg" alt="http://www.flickr.com/photos/whiteknuckled/4552559587/" style="opacity:""" + percent + """;" />
</div>
</body>
</html>"""