Re: How to rotate simple image with Python and DOM?

51 views

Skip to first unread message

Message has been deleted

Jonathan Verner

unread,

Sep 24, 2016, 9:15:00 AM9/24/16

to brython

<!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/python3'>
from browser import window, timer, document, html

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 > 359:
       # 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)
</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>rotateAnimation("img1",30);</script>
<h2 style="width:200px;" id="status"></h2>
</body>  
</html>

On Friday, September 23, 2016 at 9:46:53 PM UTC+2, roberci...@gmail.com wrote:

Hello, I am new at programming se please have patience for me :)

How can I translate this code from JS to Python+DOM? I want to use it with brython.

I have this code:

<!DOCTYPE html> <html> <head> <script> var looper; var degrees = 0; function rotateAnimation(el,speed){ var elem = document.getElementById(el); if(navigator.userAgent.match("Chrome")){ elem.style.WebkitTransform = "rotate("+degrees+"deg)"; } else if(navigator.userAgent.match("Firefox")){ elem.style.MozTransform = "rotate("+degrees+"deg)"; } else if(navigator.userAgent.match("MSIE")){ elem.style.msTransform = "rotate("+degrees+"deg)"; } else if(navigator.userAgent.match("Opera")){ elem.style.OTransform = "rotate("+degrees+"deg)"; } else { elem.style.transform = "rotate("+degrees+"deg)"; } looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed); degrees++; if(degrees > 359){ degrees = 1; } document.getElementById("status").innerHTML = "rotate("+degrees+"deg)"; } </script> </head> <body> <img id="img1" src="cog1.png" alt="cog1"> <script>rotateAnimation("img1",30);</script> <h2 style="width:200px;" id="status"></h2> </body> </html>