# Paintable Canvas Hacks

**URL:** <https://forum.inductiveautomation.com/t/paintable-canvas-hacks/85437>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [February 8, 2024, 3:25pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-hacks/85437 "2024-02-08T15:25:06Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 30, 2024, 3:35pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-hacks/85437/8 "2024-04-30T15:35:32Z")

</div>

**On Screen Presentation Mouse:**  
 ![Presentation3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/a/5aea56fdb51cce3e866c974cbe8208730464f39a.gif)

I was doing a demo video for [a tutorial I made about modifying a slider's click behavior](https://forum.inductiveautomation.com/t/bug-slider-bar-click-behavior/89650/4), and to make the mouse clicks visible, I created a simple demo mouse with the paintable canvas. It's useful, so I'm posting the tutorial on how to create it here in case anybody else would like to use it.

**First:** add two custom boolean properties to the paintable canvas called `leftClick` and `rightClick`:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cf2fe8517f09d15de95f471b8c5d64c924faf79a.png)

**Second:** Add this script to the paintable canvas's repaint event handler:

```python
# Get the graphics object from the event
graphics = event.graphics

# Create the main body of the mouse
graphics.setColor(system.gui.color('grey'))
graphics.fillOval(40, 20, 120, 200)

# Set the button colors according to whether or not they have been clicked
# and create the buttons

# Left Button
if event.source.leftClick:
	graphics.setColor(system.gui.color('lightgreen'))
	graphics.fillArc(50, 50, 100, 60, 90, 180)
	
else:
	graphics.setColor(system.gui.color('lightgrey'))
graphics.fillArc(50, 50, 100, 60, 90, 180)

# Right Button
if event.source.rightClick:
	graphics.setColor(system.gui.color('lightgreen'))
	graphics.fillArc(50, 50, 100, 60, 270, 180)

else:
	graphics.setColor(system.gui.color('lightgrey'))
graphics.fillArc(50, 50, 100, 60, 270, 180)

graphics.setColor(system.gui.color('black'))
#Draw a centerline between the buttons
graphics.drawLine(100, 50, 100, 110)

# Create a center mouse wheel
graphics.setColor(system.gui.color('grey'))
graphics.fillOval(95, 65, 10, 30)

# Create a shadow around the buttons when they are clicked,
# ...to create a depressed effect
if event.source.leftClick:
	graphics.setColor(system.gui.color('black'))
	graphics.drawArc(50, 50, 100, 60, 90, 180)
if event.source.rightClick:
	graphics.setColor(system.gui.color('black'))
	graphics.drawArc(50, 50, 100, 60, 270, 180)

```

**Finally:** On the component that is being clicked on for the demonstration, add this script to the mousePressed event handler:

```python
if event.button == 1: # left click
	event.source.parent.getComponent('Paintable Canvas').leftClick = True
elif event.button == 3: # right click
	event.source.parent.getComponent('Paintable Canvas').rightClick = True

```

...and add this script to the same component's mouseReleased event handler:

```python
if event.button == 1:
	event.source.parent.getComponent('Paintable Canvas').leftClick = False
elif event.button == 3:
	event.source.parent.getComponent('Paintable Canvas').rightClick = False

```

```python

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/paintable-canvas-hacks/85437)._