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

Revision as of 19:34, 30 November 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 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

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. CSS opacity value must be in the form of 0.45, however, rather than 45%. So, if your % is less than 100 it needs to be converted into this format.

After this:

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

add this:

if percent < 100:
    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 49: / Line 49: @@
 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%.
+CSS opacity value must be in the form of 0.45, however, rather than 45%. So, if your % is less than 100 it needs to be converted into this format.
-So first, add 0. onto the start of your percentage.
-Replace this:
+After this:
 <source lang=python>percent = str(int((longint - 12528) / 287.03))</source>
-with this:
+add this:
-<source lang=python>percent = "0." + str(int((longint - 12528) / 287.03))</source>
+<source lang=python>
+if percent < 100:
+    percent = "0." + str(int((longint - 12528) / 287.03))
+</source>
 Now you can use it in your html like this: