User:Eleanorg/Prototyping Yr 1 Timester 1/Cookbook: Percentages: Difference between revisions

Revision as of 18:02, 30 November 2011

Percentages for the mathematically impaired

Here are some examples of cool things you can do by grabbing numbers from the internet, and converting them into percentages. Once you've converted your number into a percentage, you can do more things with it - for example, using it to determine CSS styles. (Conversion to % also has the added benefit of making your randomly scraped data seem "scientific".)

Grabbing a number

Here is a basic way to extract a number live from a website - in this case, the current longitudinal position of a ship.

(coming soon)

Converting to a % value

In this example, I convert the ship's current position into a % distance from its destination. First, establish the ship's starting point (001.2528), and its destination (004.1285). These will act as 0% and 100% respectively. The percentage is worked out based on the ship's current position within this range.

import re
 
### convert longitude into 5 digit integer
longitude = str(001.2528) 			# must be a string for regex to work
longint = int(re.sub("\.", "", longitude)) 	# removes decimal point and converts back to an integer
 
### convert integer into percentage of given range
# converts longitude into a percentage, where 001.2528 = 0% and 004.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.
percent = str(int((longint - 12528) / 287.03))       # convert to int to avoid nasty decimals, then to str for concatenation with html

Using % value in CSS Styling

Here, we use our % value to determine the size of a div in an html document:

print "Content-Type: text/html"
print
print """
  <html>
    <body>
       <div style="width:""" + percent + """%; height:""" + percent + """%; background-color: #ddd;">
         <p>""" + percent + """</p>
       </div>
    </body>
  </html>""

Here, we use the % value to change the opacity of an image. CSS opacity value must be in the form of 0.45, however, rather than 45%. So first, add 0. onto the start of your percentage. Replace this:

percent = str(int((longint - 12528) / 287.03))

with this:

percent = "0." + str(int((longint - 12528) / 287.03))

Now you can use it in your html like this:

print "Content-Type: text/html"
print
print """
  <html>
    <body>
       <div>
         <img src="foo.jpg" alt="an image of varying opacity" style="opacity:""" + percent + """;" />
       </div>
    </body>
  </html>"""

@@ Line 37: / Line 37: @@
    <html>
      <body>
-        <div style="width:""" + percentstr + """%; height:""" + percentstr + """%; background-color: #ddd;">
+        <div style="width:""" + percent + """%; height:""" + percent + """%; background-color: #ddd;">
-          <p>""" + percentstr + """</p>
+          <p>""" + percent + """</p>
         </div>
      </body>