Custom Angular Directives
Matteo Cusmai last edited by
I would like to integrate some svg widget into my custom dashboards.
I think the best way is to develop custom directive, isn't it?
If so, could you give me some documentation or resources about this kind of stuff?
Will Geller last edited by
We are working on creating some SVG components for the post 3.0 releases but in the mean time you could create an SVG directive to do some cool things.
Three questions: How interactive do you want to get with the SVG widget? Are you planning on loading custom SVG images prebuilt in a graphics editor? Are you working off of the Admin Template or built in editable pages for your custom dashboards?
A while back I worked on some SVG directives and I will attach the code here:
The rect and circle ones should be pretty straightforward but the svgDisplay is designed to work with a custom SVG image doc that you tag the groups with ids and use those to control stroke and opacity attributes.
You will need to put these js files in your js/mango-3.3/directives folder then update js/mango-3.3/maDashboards.js to import them into the app:
Jared Wiltshire last edited by
@Matteo-Cusmai we also have an easier method in the works for including additional AngularJS modules (i.e. directives/components/controllers/filters) into the dashboards app.
Matteo Cusmai last edited by
now I am trying to develop custom directive under directive folder. I have some problem with requirejs.
Thanks a lot for your advice, I will take it into account if I cannot develop the directives.
The links are broken :(
Would it be possible to update them please, as I'm looking into how to change stroke style of a SVG file with CSS styling? 'fill' is ok, but not 'stroke' or derivatives. I might be able to get some ideas from your files.
'fill' is ok, but not 'stroke' or derivatives.
'stroke' and others are working now.
Inkscape was over-writing the CSS properties, so I deleted all the 'style' properties within Inkscape and now the paths take any options.
Still, it'd be good to have a look at your documentation :)
Will Geller last edited by Will Geller
@silvia I would not worry about those directive files as they are outdated and I wrote those before we released the
We now have
<ma-svg>which can be used to link to your svg file and select and style tagged groups or elements within the svg. There is a video tutorial here https://help.infiniteautomation.com/interactive-svg-graphics/ and two example pages under
examples > basics > svg graphicsin the app menu.
As far as your question regarding SVG stroke, you will want to make sure you are specifically targeting the svg element within the svg as indicated in the video/examples and you should then be able to use
ng-classto style the stroke using css. More info on CSS on SVG strokes here: https://css-tricks.com/almanac/properties/s/stroke/
If you are still having difficulties perhaps you could post your code and attach your svg element and we can help futrher.
Thanks for your answer @Will-Geller :)
I managed to sort it deleting the 'stroke' properties from the XML definition in Inkscape and using ma-selector and ng-class :)