Simple image rotation with Python and DOM

34 views
Skip to first unread message

roberci...@gmail.com

unread,
Sep 25, 2016, 11:38:34 AM9/25/16
to Pyjs.org Users
Hello I want to rotate image (cog) wit Python code and DOM elements.

I have this code write in Python adn work with Brython. How can I change it to use it on PyJS? I want use Python, not JavaScript.

<!DOCTYPE html>
<html>
<head>

<!-- load Brython -->
<script src="http://brython.info/src/brython_dist.js"></script>


<!-- the main script; after loading, Brython will run all 'text/python3' scripts -->
<script type='text/python'>
from browser
import window, timer, document, html
import time

<!-- I know that here, I must use this t0 = Date.now() -->

t0
= time.time()


def user_agent
():
   
""" Helper function for determining the user agent """
   
if window.navigator.userAgent.find('Chrome'):
       
return 'chrome'
   elif window
.navigator.userAgent.find('Firefox'):
       
return 'firefox'
   elif window
.navigator.userAgent.find('MSIE'):
       
return 'msie'
   elif window
.navigator.userAgent.find('Opera'):
       
return 'opera'
       
# Dict Mapping UserAgents to Transform Property names
rotate_property
= {
   
'chrome':'WebkitTransform',
   
'firefox':'MozTransform',
   
'msie':'msTransform',
   
'opera':'OTransform'
}

degrees
= 0
def animation_step
(elem_id):
   
""" Called every 30msec to increase the rotatation of the element. """
   global degrees
, tm

   
# Get the right property name according to the useragent
   agent
= user_agent()
   prop
= rotate_property.get(agent,'transform')

   
# Get the element by id
   el
= document[elem_id]

   
# Set the rotation of the element
   setattr
(el.style, prop, "rotate("+str(degrees)+"deg)")
   document
['status'].innerHTML = "rotate("+str(degrees)+" deg)"
   
   
   
# Increase the rotation
   degrees
+= 1
   
if degrees > 360:
       
# Stops the animation after 360 steps
       timer
.clear_interval(tm)
       degrees
= 0

# Start the animation
tm
= timer.set_interval(lambda id='img1':animation_step(id),30)

document
['status3'].innerHTML = "Time of execution python code("+str(time.time()-t0)+" ms)"

<!-- I know that here i must use this: "Time of execution python code", Date.now()-t0, "ms") -->
</script>

</head>

<!-- After the page has finished loading, run bootstrap Brython by running
     the Brython function. The argument '1' tells Brython to print error
     messages to the console. -->

<body onload='brython(1)'>

<img id="img1" src="cog1.png" alt="cog1">
<script>animation_step("img1",30);</script>
<h2 style="width:200px;" id="status"></h2>
<h2 style="width:800px;" id="status3"></h2>


</body>  
</html>
Reply all
Reply to author
Forward
0 new messages