circles.pyΒΆ

open in new tab
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"""
Example that shows animated circles. Note that it would probably be more
efficient to use a canvas for this sort of thing.
"""

from time import time

from flexx import flx


class Circle(flx.Label):

    CSS = """
    .flx-Circle {
        background: #f00;
        border-radius: 10px;
        width: 10px;
        height: 10px;
    }
    """

class Circles(flx.Widget):

    def init(self):
        with flx.PinboardLayout():
            self._circles = [Circle() for i in range(32)]
        self.tick()

    def tick(self):
        global Math, window
        t = time()
        for i, circle in enumerate(self._circles):
            x = Math.sin(i*0.2 + t) * 30 + 50
            y = Math.cos(i*0.2 + t) * 30 + 50
            circle.apply_style(dict(left=x + '%', top=y + '%'))
        window.setTimeout(self.tick, 30)


if __name__ == '__main__':
    m = flx.App(Circles).launch('app')
    flx.run()