[Viewer] Fix toolbar UI

- Slider updates accordingly to thickness change.
- ColorPicker opens up with current color.

hadaly/app.py

@@ -568,11 +568,11 @@ class Manager(ScreenManager):
         elif key == 258 and self.current == 'viewer':
             current_slide = self.get_screen('viewer').carousel.current_slide
             current_slide.viewer.painter.current_tool = 'line'
-        elif key == 268 and self.current == 'viewer':
+        elif key == 269 and self.current == 'viewer':
             current_slide = self.get_screen('viewer').carousel.current_slide
             painter = current_slide.viewer.painter
-            painter.tools[painter.current_tool]['thickness'] -= 0.1
+            painter.thickness -= 0.5
         elif key == 270 and self.current == 'viewer':
             current_slide = self.get_screen('viewer').carousel.current_slide
             painter = current_slide.viewer.painter
-            painter.tools[painter.current_tool]['thickness'] += 0.1
+            painter.thickness += 0.5

hadaly/painter.py

@@ -4,27 +4,33 @@ import math
 from kivy.uix.widget import Widget
 from kivy.graphics import Color, Line
 from kivy.vector import Vector
-from kivy.properties import StringProperty, DictProperty, BooleanProperty
+from kivy.properties import StringProperty, DictProperty, BooleanProperty, BoundedNumericProperty, ListProperty
 
 
 class Painter(Widget):
-    tools = DictProperty({'arrow': {'color': (1, 0, 1, 1), 'thickness': 0.4},
+    tools = DictProperty({'arrow': {'color': (1, 1, 1, 1), 'thickness': 0.4},
                           'line': {'color': (1, 1, 1, 1), 'thickness': 0.4},
                           'eraser': {'thickness': 0.4}
                           })
     current_tool = StringProperty('arrow')
+    thickness = BoundedNumericProperty(1, min=0.5, max=10, errorvalue=0.5)
+    color = ListProperty((1, 1, 1, 1))
     locked = BooleanProperty(False)
 
+    def on_thickness(self, instance, value):
+        self.thickness = value
+
+    def on_color(self, instance, value):
+        self.color = value
+
     def on_touch_down(self, touch):
         if not self.locked and self.collide_point(*touch.pos):
             touch.grab(self)
-            color = self.tools[self.current_tool]['color']
-            thickness = self.tools[self.current_tool]['thickness']
             with self.canvas:
-                Color(*color, mode='rgba')
-                touch.ud['line'] = Line(points=(touch.x, touch.y), width=thickness, cap='round', joint='miter')
+                Color(*self.color, mode='rgba')
+                touch.ud['line'] = Line(points=(touch.x, touch.y), width=self.thickness, cap='round', joint='miter')
                 if self.current_tool == 'arrow':
-                    touch.ud['arrowhead'] = Line(width=thickness, cap='square', joint='miter')
+                    touch.ud['arrowhead'] = Line(width=self.thickness, cap='square', joint='miter')
                 touch.ud['initial_pos'] = touch.pos
         else:
             return False
@@ -52,8 +58,8 @@ class Painter(Widget):
         # TODO: Adjust arrowhead size according to line thickness.
         A = Vector(start)
         B = Vector(end)
-        h = 5 * math.sqrt(3)
-        w = 5
+        h = 10 * math.sqrt(3)
+        w = 10
         U = (B - A) / Vector(B - A).length()
         V = Vector(-U.y, U.x)
         v1 = B - h * U + w * V

hadaly/viewer.kv

@@ -127,7 +127,6 @@
     id: _toolbar
     orientation: 'horizontal'
     color_picker: _color_picker
-    thickness: _slider.value
     size_hint: None, None
     size: (200, 40)
     spacing: dp(3)
@@ -146,18 +145,20 @@
         border_color: [1,1,1,1]
         text: u'\uf111'
         color: root.paint_color
+        on_color: root.paint_color = self.color
         font_name: 'data/fonts/fontawesome-webfont.ttf'
         font_size: '30sp'
         size_hint: (None, None)
         size: (dp(30), dp(30))
-        on_press: root.show_color_picker()
+        on_press: root.show_color_picker(self.color)
     Slider:
         id: _slider
         orientation: 'horizontal'
-        min:0.5
-        max:10
+        min: 0.5
+        max: 10
         step: 0.5
-        value: 0.5
+        value: root.thickness
+        on_value: root.thickness = self.value
 
 
 

hadaly/viewer.py

@@ -195,9 +195,12 @@ class SlideViewer(ScatterLayout):
             self.do_rotation = False
             self.do_scale = False
             self.do_translation = False
-            self.slidebox.toolbar.add_widget(PainterToolBar(painter=self.painter,
-                                                            paint_color=self.painter.tools[self.painter.current_tool][
-                                                                'color']))
+            toolbar = PainterToolBar(painter=self.painter,
+                                     paint_color=self.painter.tools[self.painter.current_tool]['color'],
+                                     thickness=self.painter.thickness)
+            self.painter.bind(thickness=toolbar.on_thickness)
+            toolbar.bind(paint_color=self.painter.on_color)
+            self.slidebox.toolbar.add_widget(toolbar)
             self.app.root.get_screen('viewer').carousel.scroll_timeout = 50
         elif self.locked:
             Logger.info('Application: Unlocking Slide.')
@@ -218,21 +221,22 @@ class SlideViewer(ScatterLayout):
 class PainterToolBar(BoxLayout):
     painter = ObjectProperty(None)
     paint_color = ListProperty((1, 1, 1, 1))
-    thickness = NumericProperty(None)
+    thickness = NumericProperty(0.5)
 
-    def show_color_picker(self):
+    def show_color_picker(self, current_color):
         popup = Popup(title='Color Picker',
                       size_hint=(0.5, 0.5))
-        color_picker = ColorPicker()
-        color_picker.bind(color=self.on_color)
+        color_picker = ColorPicker(color=current_color)
+        color_picker.bind(color=self.on_paint_color)
         popup.content = color_picker
         popup.open()
 
-    def on_color(self, instance, value):
-        self.paint_color = self.painter.tools[self.painter.current_tool]['color'] = value
+    def on_paint_color(self, instance, value):
+        self.paint_color = value
 
     def on_thickness(self, instance, value):
-        self.painter.tools[self.painter.current_tool]['thickness'] = value
+        self.thickness = value
+        self.painter.thickness = value
 
 
 class SlidesDialog(Popup):