<![CDATA[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.

]]>https://forum.mango-os.com/topic/2646/custom-angular-directivesRSS for NodeWed, 13 May 2026 16:39:39 GMTMon, 30 Jan 2017 12:05:43 GMT60<![CDATA[Reply to Custom Angular Directives on Fri, 07 Jul 2017 15:37:24 GMT]]>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 :)

]]>https://forum.mango-os.com/post/14842https://forum.mango-os.com/post/14842Fri, 07 Jul 2017 15:37:24 GMT<![CDATA[Reply to Custom Angular Directives on Thu, 06 Jul 2017 17:49:55 GMT]]>@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 under examples > basics > svg graphics in 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-class to 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.

]]>https://forum.mango-os.com/post/14822https://forum.mango-os.com/post/14822Thu, 06 Jul 2017 17:49:55 GMT<![CDATA[Reply to Custom Angular Directives on Tue, 04 Jul 2017 11:52:50 GMT]]>

'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 :)

]]>https://forum.mango-os.com/post/14798https://forum.mango-os.com/post/14798Tue, 04 Jul 2017 11:52:50 GMT<![CDATA[Reply to Custom Angular Directives on Tue, 04 Jul 2017 11:03:05 GMT]]>@Will-Geller said in Custom Angular Directives:

2_1486146172329_svgRect.js
1_1486146172329_svgDisplay.js
0_1486146172328_svgCircle.js

Hi @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

]]>https://forum.mango-os.com/post/14796https://forum.mango-os.com/post/14796Tue, 04 Jul 2017 11:03:05 GMT<![CDATA[Reply to Custom Angular Directives on Tue, 07 Feb 2017 13:41:27 GMT]]>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.

]]>https://forum.mango-os.com/post/13821https://forum.mango-os.com/post/13821Tue, 07 Feb 2017 13:41:27 GMT<![CDATA[Reply to Custom Angular Directives on Mon, 06 Feb 2017 19:51:52 GMT]]>@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.

]]>https://forum.mango-os.com/post/13811https://forum.mango-os.com/post/13811Mon, 06 Feb 2017 19:51:52 GMT<![CDATA[Reply to Custom Angular Directives on Fri, 03 Feb 2017 18:27:12 GMT]]>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.js

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:
0_1486146395970_maDashboards.js

]]>https://forum.mango-os.com/post/13795https://forum.mango-os.com/post/13795Fri, 03 Feb 2017 18:27:12 GMT