Простое вращение изображения с помощью Python и DOM с использованием RapydScript

Question

Простое вращение изображения с помощью Python и DOM с использованием RapydScript

У меня есть этот код написать на Python и отлично работает с Brython. Этот код повернуть изображение в этом случае винтик. Как я могу изменить это, и что изменить, чтобы работать с RapydScript? Я новичок в программировании, поэтому, пожалуйста, наберитесь терпения:D

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

2

python rapydscript

Источник

user6753275 25 сен '16 в 17:07

1 ответ

Решение

Другие вопросы по тегам python rapydscript

user507078 25 сен '16 в 18:36 2016-09-25 18:36 · Accepted Answer · 2016-09-25 18:36

Я не слишком знаком с Brython, но сразу могу сказать, что для переноса его на RapydScript вам просто нужно отбросить большую часть ненужных абстракций, которые я вижу при импорте кода, поскольку RapydScript ближе к нативному JavaScript. Что касается кода RapydScript в браузере, у вас есть несколько вариантов:

(рекомендуется) скомпилировать код заранее и включить файл.js в html (аналогично Babel, UglifyJS и т. д.), таким образом, код будет работать намного быстрее и не потребует от вас включения компилятора на страницу.
используйте встроенный в браузер RapydScript-компилятор (он кажется наиболее актуальным, если вы не хотите возиться с компиляцией: https://github.com/adousen/RapydScript-pyjTransformer) и включите код внутри <script type="text/pyj"> тег похож на то, что вы сделали в примере.

Теперь, если вы выберете рекомендуемую опцию выше, следующий шаг - удалить шаблон кода Brython из кода, вот как будет выглядеть ваша логика в RapydScript (обратите внимание, что я также немного изменил ее рефакторинг, удалив ненужное двухэтапное вращение разрешение метода и ненужный лямбда-вызов):

t0 = Date.now()

def rotate_property():
   """ Helper function mapping user agents to transform proeprty names """
   if 'Chrome' in window.navigator.userAgent: return 'webkitTransform'
   elif 'Firefox' in window.navigator.userAgent: return 'MozTransform'
   elif 'MSIE' in window.navigator.userAgent: return 'msTransform'
   elif 'Opera' in window.navigator.userAgent: return 'OTransform'
   return 'transform'

degrees = 0
def animation_step(elem_id='img1'):
   """ Called every 30msec to increase the rotatation of the element. """
   nonlocal degrees

   # Get the right property name according to the useragent
   prop = rotate_property()

   # Get the element by id
   el = document.getElementById(elem_id)

   # Set the rotation of the element
   el.style[prop] = "rotate(" + degrees + "deg)"
   document.getElementById('status').innerHTML = "rotate(" + degrees + "deg)"

   # Increase the rotation
   degrees += 1
   if degrees > 360:
       # Stops the animation after 360 steps
       clearInterval(tm)
       degrees = 0

# Start the animation
tm = setInterval(animation_step, 30)
document.getElementById('status3').innerHTML = "Time of execution python code(" + (Date.now() - t0) + " ms)"

Несколько вещей, на которые стоит обратить внимание:

импорт больше не нужен, RapydScript не нуждается в шаблоне для взаимодействия с JavaScript
вещий timer.set_interval а также timer.clear_interval были заменены эквивалентами JavaScript (setInterval и clearInterval)
document вы видите в моем коде сам DOM, document у вас в коде Brython есть обертка вокруг него, поэтому доступ к нему работает немного по-другому
RapydScript упал global давным-давно в пользу Python 3 безопаснее nonlocal, что я использовал в коде вместо
вместо time Модуль RapydScript имеет прямой доступ к JavaScript Date класс, который я использовал в коде для определения времени
Я бы также порекомендовал переехать prop = rotate_property() вызов вне функции, поскольку пользовательский агент не будет меняться между вызовами функций (в этом случае операция является относительно дешевой, но для более сложной логики это повысит вашу производительность)
вы запускаете Brython из HTML через тело onloadизбавиться от этого, а также строки, которая говорит <script>animation_step("img1",30);</script>приведенный выше код должен сработать автоматически, как только страница загрузится благодаря вызову setInterval
поскольку RapydScript использует символы Юникода, чтобы избежать конфликтов имен, необходимо указать HTML, чтобы он воспринимал документ как Юникод, добавив следующую строку в заголовок: <meta charset="UTF-8">
для дальнейшего использования, ни один из ваших onload вызовы RapydScript будут работать, потому что, в отличие от Brython, RapydScript защищает себя в своей собственной области, невидимой для внешних (это было общепринятой практикой в мире JavaScript в течение длительного времени), ваши варианты для создания onload работы являются:
- (не рекомендуется) скомпилировать файл с -b флаг, чтобы опустить самозащитную область
- (рекомендуется) внутри вашего кода, прикрепите свои функции к глобальному window возражать, если вы хотите, чтобы они были доступны извне

Ваш фактический HTML-код, который вызывает скомпилированную версию приведенного выше кода, будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="img1" src="cog1.png" alt="cog1">
<h2 style="width:200px;" id="status"></h2>
<h2 style="width:800px;" id="status3"></h2>
<script src="myfile.js"></script>
</body>
</html>