I am using perspective with SVG and I have found that embedding them to get access to binding elements is a huge help with the project I am currently working on.
The SVG is created in inkscape from there I have 30+ bindings setup on the individual elements.
Here is the issue, there is a very good chance that when this project is reviewed by the client they will want changes to the SVG. Some of this chances I might be able to do by manipulating the elements but there is a good chance that I will need to go back to inkscape.
If I need to go back to inkscape for "major" changes the only way I can bring in the new changes is by deleting the existing embedded SVG but from what I can see this would also delete my bindings on that existing SVG.
The only way I can see to make this less impact full would be to:
Breakup the SVG into smaller chunks so it minimises the amount of bindings I need to re-do when re-embedding
Try to import most of the changes directly into the "elements" array
Is there anything I am missing?
I am sure the long awaited drawing tools will fix this issue?
For anyone reading this (including me) in the future this is how I ended up doing it. There are other ways that maybe better or more efficient.
For my case my SVG was being used in a template with a UDT so:
Created my SVG in inkscape making sure to give all the object I will interact with names (and Id's)
Created some custom properties on the root of the view template. The idea being these will be the "interface" to hold the script code (to run on property change); I can then just bind tags to these properties. If the SVG is deleted these props remain as they are on the root.
Right clicked on the property and added the code to transverse the SVG structure and change the property I wanted. In one of my cases the code looked like this:
Debug = False
if Debug: system.perspective.print("Starting")
GroupName = "Alarm_Box"
ElementName = "Alarm_indicator"
ElementProperty = "fill"
ElementSubProperty = "paint"
#here is the logic for the new value of the property based off the tag value (currenValue)
if currentValue.value:
value = "#ff0000" #red
else:
value = "#00ff00" # green
#Link to the SVG drawing elements
SVG_Groups = self.getChild("ProtectionRelay").props.elements[1].elements
#Find the group we are intrested in
for SVG_Group in SVG_Groups:
if Debug: system.perspective.print("Searching Group:"+ SVG_Group.name)
if SVG_Group.name == GroupName:
#Now search for the Element we want to edit
SVG_Elements = SVG_Group.elements
for SVG_Element in SVG_Elements:
if Debug: system.perspective.print("Searching Elements:"+ SVG_Element.name)
if SVG_Element.name == ElementName:
if Debug: system.perspective.print("Found it")
#Now we look for the property and sub property and update its value
setattr(getattr(SVG_Element,ElementProperty),ElementSubProperty,value)
if Debug:
test = getattr(getattr(SVG_Element,ElementProperty),ElementSubProperty)
system.perspective.print("Read back: " + test)
system.perspective.print("Attempted: " + value)
# No need to search the rest of the elements
break
# No need to search the rest of the groups
break
Now I can just bind my tags to the property I created on the root.
Now I can delete and re-import the SVG as much as I want provide I keep the group and element names the same.
Thanks to nader.chinichian for the inspiration for this idea from this post:
You also give all of your elements meaningful ids and then reference the ids instead of structures. Then it doesn't matter where you move your elements, it'll always just work. This is how I believe Nader does it as well
It went through a few more iterations but I ended up deploying it as a function in the gateway scripting module.
This way I was able to call it from anywhere in my project as a single line of code and just pass it the path to the embedded SVG, name of the properties I wanted to change and the value to change it to.
I wonder what the performance of this method is given that you are putting a script on every property change? My standard design philosophy would say this kind of solution should be avoided.
It depends what has to be changed.
Some changes requires this.
For thinks like colors/animations i would suggest using css though, but that probably is harder if they change the image often