# Template canvas blinking/refreshing/loading

**URL:** <https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [September 9, 2019, 2:04pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105 "2019-09-09T14:04:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tordvd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tordvd/32/11525_2.png) [@tordvd](https://forum.inductiveautomation.com/u/tordvd)\
**Post date:** [September 9, 2019, 2:04pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/1 "2019-09-09T14:04:25Z")

</div>

Hi,  
I am using the template canvas to illustrate positions of robots. Meaning that the templates used are rectangles moving around the layout.

I am doing this by using cell update bindings on the x,y coordinates of the individual robots.  
We have 15 robots so this means 30 cell update lines(x+y).

My problems is that everytime one position changes, the screen “blinks”. It is just a few ms, but its easely observable. I am pretty sure it is due to loading the canvas.

The second problem is that I have a drawing behind the template repeater. (illustration of the factory floor). And everytime the reapeater blinks/loads, the graphic behind is also blinking. Even though the template repeater(which is in front) has a transparent background.

Is there any way around this?  
Maybe a fix to “disable loading indication”.  
Or some code to turn the canvas.visible=0 during a cell update. and then back to 1 after the update has been finished.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 9, 2019, 2:19pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/2 "2019-09-09T14:19:32Z")

</div>

Consider using a paintable canvas to draw your robot rectangles in the desired locations. Or more complicated robot imagery. As long as all of the data needed for the paint operation is kept local to the component/window, its update will be effectively instant. (No DB or other gateway callouts in the python.)

---

<div class="post-metadata">

**Author:** ![tordvd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tordvd/32/11525_2.png) [@tordvd](https://forum.inductiveautomation.com/u/tordvd)\
**Post date:** [September 9, 2019, 2:25pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/3 "2019-09-09T14:25:49Z")

</div>

That is a good alternative to the template canvas i guess. It would be nice to be able to click on the various robots and open popups with details. Will this still be posible throught the paintable canvas?

Its a bit sad not to utilize the power of templates though 😕

Is there any other way to place a normal template on a display, and set the position dynamically? For example, I have tried writing “component.x=100” but that is a read only property.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 9, 2019, 2:33pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/4 "2019-09-09T14:33:43Z")

</div>

> [@tordvd](#):
>
> It would be nice to be able to click on the various robots and open popups with details.

Yes, you can use mouse events with the paintable canvas. You'll have to to "find" the right rectangle within the canvas yourself, though.

> [@tordvd](#):
>
> Its a bit sad not to utilize the power of templates though

Just a trade-off. Templates are low-performance overkill for drawing rectangles, as you've seen. If you want more complex imagery, you could write a generic "draw my robot" subroutine in a project script, including whatever text and animations you wish, called by the paint event multiple times. Re-use is re-use, whatever form it takes in the end.

> [@tordvd](#):
>
> and set the position dynamically?

Yes:  
[https://docs.inductiveautomation.com/display/DOC79/system.gui.transform](https://docs.inductiveautomation.com/display/DOC79/system.gui.transform)

---

<div class="post-metadata">

**Author:** ![tordvd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tordvd/32/11525_2.png) [@tordvd](https://forum.inductiveautomation.com/u/tordvd)\
**Post date:** [September 9, 2019, 2:54pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/5 "2019-09-09T14:54:35Z")

</div>

I see, im trying out the paintable canvas now.

(Got quite far on just a few lines of code:  
xCoords=system.tag.readBlocking(tagListX)  
yCoords=system.tag.readBlocking(tagListY)  
for i in range(0,15):  
robot =Rectangle2D.Float(xCoords[i].value, yCoords[i].value, 50 , 50)  
g.draw(robot))

Thanks for the answers!

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 9, 2019, 4:15pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/6 "2019-09-09T16:15:34Z")

</div>

You should not read tags inside your paint event–you can lock up your GUI. Bring all of your coordinates and any other dynamic information to the component in a dataset or other collection of properties. The paint event should only look up data that is already present in the client. Also, changes to custom properties on the canvas is what triggers repainting.

---

<div class="post-metadata">

**Author:** ![tordvd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tordvd/32/11525_2.png) [@tordvd](https://forum.inductiveautomation.com/u/tordvd)\
**Post date:** [September 10, 2019, 6:29am UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/7 "2019-09-10T06:29:48Z")

</div>

Thank you for the advice! That was actually my next question, how to trigger repainting.

How about the gui.transform, I like that one can include animation effects. How would you most efficiently trigger a for loop for gui.transform(s)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 10, 2019, 12:00pm UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/8 "2019-09-10T12:00:54Z")

</div>

> [@tordvd](#):
>
> efficiently trigger a for loop for gui.transform(s)

Don't use a for loop. Just fire the transform when coordinates change. (And its built-in animations do not require you to call it again.)

---

<div class="post-metadata">

**Author:** ![tordvd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tordvd/32/11525_2.png) [@tordvd](https://forum.inductiveautomation.com/u/tordvd)\
**Post date:** [October 9, 2019, 6:50am UTC](https://forum.inductiveautomation.com/t/template-canvas-blinking-refreshing-loading/28105/9 "2019-10-09T06:50:31Z")

</div>

Just an update. The problem regarding this topic was fixed in the 8.06 Nightly build.

**15065: Template Canvas - Changes to instance position shouldn’t reload all instances**  
Making positioning changes to an instance in a template canvas will no longer force all instances to reload.
