Hello all. I am a relatively new user to Ignition and have been trying to develop a way to zoom and pan on an Ignition screen similar to that of Google Maps. I am slightly limited in my development and am currently unable to import external libraries to aid in my scripting. I will give a brief description of my thought process and then provide some code.
I am currently able to zoom, however I am limited to zooming into where the transform-origin is defined. My zoom mechanic works by using an onWheel event listener, here is the code:
def runAction(self, event):
self.custom.Transform_Scale_Variable = self.custom.Transform_Scale_Variable + 0.10
return self.custom.Transform_Scale_Variable
Essentially, everytime the scroll wheel is used I increase the scale value by 0.1. (transform: scale(x)). My issue arises due to the fact the transform: scale(x) CSS function by default zooms in to wherever the transform origin is defined to be. I was it to zoom in to wherever my mouse cursor is. So my logic is that if I create an onMouseMove script that records the current mouser position, I could then bind the Transorm-Origin to that x and y value. My current attempt at this can be seen below.
def runAction(self, event):
coords = clientX + "px " + clientY + "px"
self.custom.Mouse_Position = coords
return self.custom.Mouse_Position
If anyone can help point me in another direction, or give some advice on my current attempt that would be great. I would be happy to answer any further questions. Thank you all a bunch!
Note: I haven't even gotten into panning yet. Nor do I know how to make myself zoom out if I use the scroll wheel in the other direction.