linking canvas color with picker?

[Jake-Jasper]

Hello,

Sorry if this is the wrong place for this!
I am modifying the hand drawing example but I am having trouble linking the color picker with a change in canvas color and wondered if anyone could take a look and see what I am doing wrong.

Here is my modified code:

`from ipywidgets import Image, ColorPicker, link, AppLayout, HBox, VBox, widgets

from ipycanvas import hold_canvas, Canvas

class JupyterBlackboard:

  def __init__(self):
      self.width = 1000
      self.height = 500
      
      self.canvas = Canvas(width=self.width, height=self.height, sync_image_data=True)
      self.drawing = False
      self.position = None
      self.shape = []
      self.canvas.stroke_style = '#FFFFFF'
      self.canvas.fill_style = '#000000'
      self.canvas.fill_rect(0, 0, 1000, 500)

  def on_mouse_down(self, x, y):
      '''
      When left click mouse
      '''
      self.drawing = True
      self.position = (x, y)
      self.shape = [self.position]


  def on_mouse_move(self, x, y):
      '''
      When moving the mouse
      '''
      
      if not self.drawing:
          return

      with hold_canvas(self.canvas):
          self.canvas.stroke_line(self.position[0], self.position[1], x, y)

          self.position = (x, y)

      self.shape.append(self.position)


  def on_mouse_up(self, x, y):
      '''
      I think this is when you let go of left click
      '''
      self.drawing = False

      with hold_canvas(self.canvas):
          self.canvas.stroke_line(self.position[0], self.position[1], x, y)
      
      self.shape = []
  
  #not implemented yet   
  def undo_last(self, *args):
      print(self.canvas.restore())
      #del self.shape[-1]
      
  def redraw(self, *args):
      '''
      Reset Canvas
      '''
      self.canvas.clear()
      self.canvas.fill_style = '#000000'
      self.canvas.fill_rect(0, 0, 1000, 500)
      self.canvas.stroke_style = '#FFFFFF'
      
  def save_to_file(self, *args, **kwargs):
      self.canvas.to_file('blackboard.png')
      
      # Listen to changes on the ``image_data`` trait and call ``save_to_file`` when it
      # changes
      self.canvas.observe(self.save_to_file, 'image_data')
      


  def Draw(self):
      
      self.canvas.on_mouse_down(self.on_mouse_down)
      self.canvas.on_mouse_move(self.on_mouse_move)
      self.canvas.on_mouse_up(self.on_mouse_up)
      

      self.line_col = ColorPicker(description='Line color:', value='#FFFFFF')
      self.canvas_col = ColorPicker(description='Canvas color:', value='#000000')
      
      #https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Events.html
      link((self.line_col, 'value'), (self.canvas, 'stroke_style'))
      link((self.canvas_col, 'value'), (self.canvas, 'fill_style'))
      
      self.reset_button = widgets.Button(description='Reset')
      self.reset_button.on_click(self.redraw)
      
      self.save_button = widgets.Button(description='Save')
      self.save_button.on_click(self.save_to_file)
      
      return VBox((self.canvas, self.line_col, self.canvas_col, self.reset_button, self.save_button))

if name == "main":
JupyterBlackboard()`

I was expecting link((self.canvas_col, 'value'), (self.canvas, 'fill_style')) to update the canvas color, but clearly this is not the case. What have I misunderstood here? As this works fine for the fill style.

[martinRenou]

Hey 😊 your way to link the color picker to the fill style should work. You are not drawing anything with a fill style yet though, you are only using stroke_line for making lines, which doesnt make use of the fill_style, or did I miss something?

[Jake-Jasper]

Hi Martin,

Thanks for the response. I think I see where I was going wrong. I was thinking that when I changed the color of the line via the color picker and linking it, that was what was changing the line color, but of course it doesn't get changed until there is a mouse action!

[martinRenou]

Yes 😊 once lines are drawn, you will not be able to change their color unless you redraw them.