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

Latest revision as of 02:25, 15 December 2011

Fun with 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 use it to determine CSS styles. (Conversion to % also has the added benefit of making your randomly scraped data seem "scientific".)

Converting to a % value

In this example, I have the longitudinal position of a ship. I want to turn its position into a percentage, based on its distance from its final 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.

Note how the data type changes several times in order to undergo the various manipulations necessary:

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 = 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)

Using % value in CSS Styling

CSS uses percentages in the format of floats (eg, 0.5 rather than 50%), and for concatenation with html, they must then be converted to a string (as in the example above).

Div size

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>""

Image opacity

Here, we use the % value to change the opacity of an image.

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 1: / Line 1: @@
-==Percentages for the mathematically impaired==
+Fun with 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".)
+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 use 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.
+In this example, I have the longitudinal position of a ship. I want to turn its position into a percentage, based on its distance from its final 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.
+Note how the data type changes several times in order to undergo the various manipulations necessary:
 <source lang=python>
@@ Line 25: / Line 24: @@
 # 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
+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)
 </source>
 ===Using % value in CSS Styling===
+CSS uses percentages in the format of floats (eg, 0.5 rather than 50%), and for concatenation with html, they must then be converted to a string (as in the example above).
 ====Div size====
@@ Line 49: / Line 52: @@
 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:
-<source lang=python>percent = str(int((longint - 12528) / 287.03))</source>
-with this:
-<source lang=python>percent = "0." + str(int((longint - 12528) / 287.03))</source>
-Now you can use it in your html like this:
 <source lang=python>