Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Custom Angular Directives
-
Hi all,
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?Best,
Matteo. -
Hi Matteo,
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:
2_1486146172329_svgRect.js
1_1486146172329_svgDisplay.js
0_1486146172328_svgCircle.jsThe 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:
0_1486146395970_maDashboards.js -
@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.
-
Hi Jared,
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. -
@Will-Geller said in Custom Angular Directives:
2_1486146172329_svgRect.js
1_1486146172329_svgDisplay.js
0_1486146172328_svgCircle.jsHi @Will-Geller,
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.
Thanks :)
Silvia
-
'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 :)
-
@silvia I would not worry about those directive files as they are outdated and I wrote those before we released the
<ma-svg>component.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 underexamples > 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
ma-selector+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 :)
