I have an SVG image of a hydraulic schematic. I want to draw lines on top of the schematic and animate those lines to show the flow of hydraulic oil. I can accomplish this; however, the schematic is very large, so I need the ability to zoom and pan. I found the anvaka panzoom javascript library and have been able to get that to work partially. I also tried another pan / zoom javascript library. Both of these work; however, objects don’t pan and zoom at the same rate. The lines I drew on top of the schematic don’t appear on top of the schematic in the right place anymore once you zoom / pan. I’ve tried grouping the schematic and the line on top of it. Any ideas? This is the last big piece of the puzzle for what I need to do.
It’d be good to see a .hype document of your setup and how it is interacting with your zoom and pan library; any suggestions otherwise are a shot in the dark.
I assume you are using Hype’s vector shapes on top of the SVG? You may want to group them and then use the zoom and pan on the group, if you are not already doing that.
If you’re using a group it could also just have the Content Overflow (in the Metrics Inspector) set to Scrollbars and the user can just scroll, though this does not solve zoom.
If it is more of a guided tour where the user cannot arbitrarily move the file, you could think about a solution like a camera element outlined in this post.
generic_schematic_test2.hype.zip (47.9 KB) generic_schematic_panzoom.hype.zip (58.9 KB)
I attached the Hype documents (I modified my original reply and just made new files with some generic schematics that I found; wasn’t sure how proprietary the other ones were; my schematics are similar; however, there’s 10 times the components (hence the need to pan and zoom)). There’s only one line so far as this is really a proof of concept to see if I can make it work before really jumping in. Also trying to determine if Hype is the right tool (seems to be the best I’ve found so far; and I feel like I’m close to making this work).
Yes, I’m using Hypes vector shapes to create a line on top of the SVG schematic. I’ve tried grouping the line and the schematic and that didn’t seem to help either. I’ve also tried using two different Javascript libraries to see if it was maybe a limitation of the first one; however, both seem to be working the same (I uploaded both files).
Now for some reason the line isn’t even matching up with the schematics in the preview; I had that working at one point, but have tried so many things that I’m not sure what messed it up.
I really appreciate any help.
Thanks
Thanks a lot! I really appreciate the help. I’m a newbie with this tool, so I apologize that it was basic.
it’s not basic, in fact it’s tricky as the panZoom and Hype will try to control elementspositions. this’ll lead to unexpected behavior if you try to animate the panZoom-controled element with hype tools. also important the coordinatespace … FYI