Adding canvas Widget

rawpython · int-0 · Nov 29, 2017 · Nov 30, 2017 · Jan 1, 2018 · Jan 1, 2018
commit b393ca07093bca80bb2cbc2a5fae47b951dadbc3
diff --git a/examples/canvas.py b/examples/canvas.py
@@ -0,0 +1,57 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+import os
+import remi.gui as gui
+from remi.game import Color, Rect
+from remi.game.canvas import Canvas
+from remi.game.draw import line, lines, circle, rect
+from remi import start, App
+
+
+class MyApp(App):
+    canvas = None
+    def __init__(self, *args):
+        super(MyApp, self).__init__(*args)
+
+    def main(self, name='world'):
+        #margin 0px auto allows to center the app to the screen
+        container = gui.Widget(width=600, height=600)
+        self.canvas = Canvas(self, resolution=(600, 400), margin='0px auto')
+        button = gui.Button('Go!')
+        button.set_on_click_listener(self.draw)
+        container.append(self.canvas)
+        container.append(button)
+        # returning the root widget
+        return container
+
+    def draw(self, widget):
+        line(self.canvas, Color(255, 0, 0), (0, 0), (200, 100))
+        lines(self.canvas, Color(0, 0, 255), [(200, 100),
+                                              (100, 0),
+                                              (150, 400)])
+        circle(self.canvas, Color(0, 255, 0), (200, 100), 10, width=1)
+        circle(self.canvas, Color(255, 0, 0), (300, 150), 10)
+        rect(self.canvas, Color(255, 255, 0), Rect((10, 10), (30, 30)), width=1)
+        rect(self.canvas, Color(128, 128, 255), Rect((5, 5), (15, 100)))
+
+if __name__ == "__main__":
+    print 'Starting with pid: %s' % os.getpid()
+    # starts the webserver
+    # optional parameters
+    # start(MyApp,address='127.0.0.1', port=8081, multiple_instance=False,enable_file_cache=True, update_interval=0.1, start_browser=True)
+    start(MyApp, debug=True)
diff --git a/remi/game/__init__.py b/remi/game/__init__.py
@@ -0,0 +1,19 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+from remi.game.rect import Rect
+from remi.game.color import Color
diff --git a/remi/game/canvas.py b/remi/game/canvas.py
@@ -0,0 +1,42 @@
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+from remi.server import App
+from remi.gui import Widget
+from remi.gui import decorate_constructor_parameter_types
+
+
+def _pixels_(amount):
+    if isinstance(amount, int):
+        return '%spx' % amount
+    else:
+        return amount
+
+
+class Canvas(Widget):
+    @decorate_constructor_parameter_types([tuple, App])
+    def __init__(self, app_instance, resolution=(0, 0), **kwargs):
+        kwargs['width'] = _pixels_(resolution[0])
+        kwargs['height'] = _pixels_(resolution[1])
+        super(Canvas, self).__init__(**kwargs)
+        self._app = app_instance
+        self.type = 'canvas'
+
+    @property
+    def id(self):
+        return self.attributes['id']
+
+    def draw(self, js_code):
+        print js_code
+        self._app.execute_javascript(js_code)
diff --git a/remi/game/color.py b/remi/game/color.py
@@ -0,0 +1,27 @@
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+def _hex_(c):
+    return hex(c)[2:].zfill(2)
+
+class Color(object):
+    def __init__(self, r, g, b, a=255):
+        self.r = r
+        self.g = g
+        self.b = b
+
+    def __str__(self):
+        return '#%s%s%s' % (_hex_(self.r), _hex_(self.g), _hex_(self.b))
+
+
diff --git a/remi/game/draw.py b/remi/game/draw.py
@@ -0,0 +1,70 @@
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+from remi.game.canvas import Canvas
+from remi.game.color import Color
+
+def rect(canvas, color, rect, width=0):
+    canvas.draw('''var canvas = document.getElementById('%s');
+var ctx = canvas.getContext('2d');
+%s
+ctx.%s(%s);%s''' % (
+        canvas.id,
+        ('ctx.fillStyle = "%s";' % color) if width == 0 else (
+            'ctx.lineWidth = "%spx"; ctx.strokeStyle = "%s"' % (width, color)),
+        'fillRect' if width == 0 else 'rect',
+        rect,
+        '' if width == 0 else 'ctx.stroke();'
+    ))
+
+def line(canvas, color, start_pos, end_pos, width=1):
+    canvas.draw('''var canvas = document.getElementById('%s');
+var ctx = canvas.getContext('2d');
+ctx.lineWidth = "%spx";
+ctx.strokeStyle = "%s";
+ctx.beginPath();
+ctx.moveTo(%s, %s);
+ctx.lineTo(%s, %s);
+ctx.stroke();''' % (canvas.id, width, color,
+                    start_pos[0], start_pos[1],
+                    end_pos[0], end_pos[1]))
+
+def lines(canvas, color, pointlist, width=1):
+    start = pointlist[0]
+    pointlist = pointlist[1:]
+    js = '''var canvas = document.getElementById('%s');
+var ctx = canvas.getContext('2d');
+ctx.lineWidth = "%spx";
+ctx.strokeStyle = "%s";
+ctx.beginPath();
+ctx.moveTo(%s, %s);
+''' % (canvas.id, width, color, start[0], start[1])
+    for point in pointlist:
+        js += 'ctx.lineTo(%s, %s);' % (point[0], point[1])
+    js += 'ctx.stroke();'
+    canvas.draw(js)
+
+def circle(canvas, color, pos, radius, width=0):
+    canvas.draw('''var canvas = document.getElementById('%s');
+var ctx = canvas.getContext('2d');
+ctx.lineWidth = "%spx";
+ctx.strokeStyle = "%s";%s
+ctx.beginPath();
+ctx.arc(%s, %s, %s, 0, 6.30);%s
+ctx.stroke();''' % (
+    canvas.id,
+    width, color,
+    ('ctx.fillStyle="%s";' % color) if (width == 0) else '',
+    pos[0], pos[1], radius,
+    'ctx.fill();' if (width == 0) else ''))
diff --git a/remi/game/rect.py b/remi/game/rect.py
@@ -0,0 +1,99 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+
+class Rect(object):
+    def __init__(self, position, size):
+        self.x = position[0]
+        self.y = position[1]
+        self.w = size[0]
+        self.h = size[1]
+
+    def __str__(self):
+        return '%s, %s, %s, %s' % (self.x, self.y, self.w, self.h)
+
+    @property
+    def width(self):
+        return self.w
+
+    @property
+    def height(self):
+        return self.h
+
+    @property
+    def centerx(self):
+        return self.x + (self.w / 2)
+
+    @property
+    def centery(self):
+        return self.y + (self.h / 2)
+
+    @property
+    def center(self):
+        return (self.centerx, self.centery)
+
+    @property
+    def size(self):
+        return (self.w, self.h)
+
+    @property
+    def top(self):
+        return self.y
+
+    @property
+    def bottom(self):
+        return self.y + self.h
+
+    @property
+    def left(self):
+        return self.x
+
+    @property
+    def right(self):
+        return self.x + self.w
+
+    @property
+    def topleft(self):
+        return (self.left, self.top)
+
+    @property
+    def bottomleft(self):
+        return (self.left, self.bottom)
+
+    @property
+    def topright(self):
+        return (self.right, self.top)
+
+    @property
+    def bottomright(self):
+        return (self.right, self.bottom)
+
+    @property
+    def midtop(self):
+        return (self.centerx, self.top)
+
+    @property
+    def midleft(self):
+        return (self.left, self.centery)
+
+    @property
+    def midbottom(self):
+        return (self.centerx, self.bottom)
+
+    @property
+    def midright(self):
+        return (self.right, self.centery)
diff --git a/remi/server.py b/remi/server.py
@@ -695,6 +695,7 @@ def set_root_widget(self, widget):
 
     def _send_spontaneous_websocket_message(self, message):
         global update_lock
+        self._log.debug('spontaneous message, lock: %s' % update_lock)
         with update_lock:
             for ws in self.client.websockets:
                 # noinspection PyBroadException

diff --git a/setup.py b/setup.py
@@ -7,7 +7,7 @@
       author='Davide Rosa',
       author_email='dddomodossola@gmail.com',
       license='Apache',
-      packages=['remi'],
+      packages=['remi', 'remi.game'],
       include_package_data=True,
 	  zip_safe=False,
-)
+)