What I am trying to do is to get center lines and background “bound” to the top left and bottom right corners without distorting the width of the lines and background so everything lines up correctly. I know I could technically do this through property change event but the issue with that is that it will only run in the client so that won’t do plus you can’t reference a template instances width or height.
My best guess on how to do this is either through an objectScript() function or through a paintable canvas. The only issue with the paintable canvas is that when I was testing out load times it took significantly longer on initial load to boot using a paintable canvas versus a svg(with flashy graphics). Maybe I’m using them wrong then I’m not really sure.
I was able to make this work when there was no angle on the conveyor belt through layout bindings but there is no option to bind to only a corner and not the sides. Plus you can’t rotate template instances which would make this easy.
Edit: Also any advice/tips for redesigning a flashy HMI would be helpful. I am going for a grayscale design.
I would definitely say the paintable canvas is the way to go here.
Nothing in the paintable canvas should really be slow as long as you’re using it ‘right’ - make sure you’re at most checking property references in repaint() - if you try to execute any system functions to read a tag, query a DB, etc, you’re going to have a very bad time.
Yea that makes the most sense. Thank you. So with the paintable canvas is it best to use component functions to creat the different shapes then call those functions in the repaint or how is it best to organize the code? Also is it possible to only have the canvas repaint the specific part that needs animated?
Edit: I’m not really sure why mine was so slow then. I must have had a tag being read or some really inefficient code. I did have a bunch of separate canvases that couldve been combined into one. That might have been the reason.
Ok so I actually managed to make it work without the paintable canvas. I used lines instead of squares for the center as stroke size doesn’t change and then bound them to all 4 sides. The only caveat is that it doesn’t line up at 30 degrees by expanding the template size with ctrl + resize. To make it line up where I want to I just align it with the edge of square template in the center.
Edit:
That doesn’t work as good as I had originally thought. I got to actually using it at work and trying to manipulate the line positioning and size which was pretty terrible to work with. Especially when the lines were layered on top of each other as I would try to select one line and press right where the line is, not the stroke but the actual line, and a good part of the time it would select something else entirely, or I would need to displace where I press to select it. Plus the angle positioning wouldn’t scale correctly with the template to top that off so I decided that the hassle of lining up the components wasn’t worth it. I guess there is a good reason that this isn’t a widespread use case of lines.
Plus once I thought about it a paintable canvas is property driven to where it only runs the script when a property changes while a svg(color change) is expression driven to where it changes the property based on the conditional, which runs much more often. So it should be that as long as I am not animating it constantly it will be much faster, though I haven’t tested it.
Edit 2&3: Grammar
