Page 1 of 1

SVG Plugin

PostPosted: Fri Jul 07, 2017 7:44 pm
by jblackburn
Hi everyone,

Today, I share one of my plugin. I've designed it for my own needs but it's can help others! Sometime I prefer to represent some data in graphic dials instead of text/numbers. In some cases, heuristic images can do the job but in certain situation, you need a more sophisticated tool. It's why I've designed SVG plugin! Big advantage of SVG file, you can modify it with a text editor (XML)! SVG is based on this concept!

You'll find all information on my web site (basic page):

SVG Page

But at first, I strongly recommend starting with the help file:

SVG help file (pdf)

If you have any questions or comments, don't hesitate!

NOTE1: Thanks for my beta testers!
NOTE2: This is a beta release even if I've ran it for three months without major issues!

Thanks!

Joël

Re: SVG Plugin

PostPosted: Fri Jul 07, 2017 8:04 pm
by DaveL17
Let me say that I have tried the SVG plugin and it is amazing. Very powerful and a great addition to the Indigo community!

Joël, I think you meant to say "NOTE2: This is a beta release even if I've ran it for three months without major issues!"

Congratulations on your Beta!

Re: SVG Plugin

PostPosted: Fri Jul 07, 2017 9:33 pm
by jblackburn
Lol! Corrected! Thanks Dave! :D

Re: SVG Plugin

PostPosted: Mon Jul 10, 2017 3:39 pm
by jay (support)
Thanks for the contribution!

Re: SVG Plugin

PostPosted: Tue Jul 11, 2017 9:48 am
by matt (support)
This looks really neat, and your example control page image is very slick. As Jay said, thanks for the contribution!

Re: SVG Plugin

PostPosted: Tue Jul 11, 2017 9:57 am
by matt (support)
Also, good job on the thorough documentation. We need to come up with some mechanism by which plugins can more automatically rasterize control page images.

Re: SVG Plugin

PostPosted: Tue Jul 11, 2017 4:58 pm
by howartp
Here the formula used depend of value type

Docs bug on page 6.


Sent from my iPhone using Tapatalk Pro

Re: SVG Plugin

PostPosted: Tue Jul 11, 2017 5:01 pm
by howartp
matt (support) wrote:
Also, good job on the thorough documentation. We need to come up with some mechanism by which plugins can more automatically [s]rasterize control page images[/s] generate their own documentation.

I agree!


Sent from my iPhone using Tapatalk Pro

Re: SVG Plugin

PostPosted: Thu Jul 13, 2017 7:54 pm
by jblackburn
matt (support) wrote:
....and your example control page image is very slick. ....


Thanks! This is my current dashboard (with extended info.) displayed on a TV all day... :wink:

Joēl

Re: SVG Plugin

PostPosted: Tue May 01, 2018 4:43 am
by srkinard
jblackburn wrote:
Hi everyone,

Today, I share one of my plugin. I've designed it for my own needs but it's can help others! Sometime I prefer to represent some data in graphic dials instead of text/numbers. In some cases, heuristic images can do the job but in certain situation, you need a more sophisticated tool. It's why I've designed SVG plugin! Big advantage of SVG file, you can modify it with a text editor (XML)! SVG is based on this concept!

You'll find all information on my web site (basic page):

SVG Page

But at first, I strongly recommend starting with the help file:

SVG help file (pdf)

If you have any questions or comments, don't hesitate!

NOTE1: Thanks for my beta testers!
NOTE2: This is a beta release even if I've ran it for three months without major issues!

Thanks!

Joël


This is very cool...a few questions tho...would it be possible to add a stroke function with 3 or 4 colors?

Like for battery gauges I'd like to have <10% as red, 10-20% as orange, 30-40% as yellow, and >40% as green.

Temp gauges would be even more complex...if possible...from dark blue at freezing to red at 100+ (F scale)
dark blue, blue, cyan, light green, green, yellow, orange, red, dark red

I really like the dials you have as an example...how would it need to be changed for the 0 to start at top...like 12 noon on a clock?

Thanks
Ross

Re: SVG Plugin

PostPosted: Wed May 02, 2018 6:32 pm
by jblackburn
This is very cool...a few questions tho...would it be possible to add a stroke function with 3 or 4

You can add mutiple commands related to the same element. See my exemple below...

Like for battery gauges I'd like to have <10% as red, 10-20% as orange, 30-40% as yellow, and >40% as green.

You can use multiple “Fill Color 1x” function in sequential:

Fill Color 1x. - 0 to 9 -> Red
Fill Color 1x. - 10 to 20 -> Orange
Fill Color 1x. - 21 to 40 -> Yellow
Fill Color 1x. - 41 to 100 -> green

Conditions are evaluated in order. The last condition is applied to the svg file

Temp gauges would be even more complex...if possible...from dark blue at freezing to red at 100+ (F scale)
dark blue, blue, cyan, light green, green, yellow, orange, red, dark red

You can do the same as previously! Same for stoke command.

I really like the dials you have as an example...how would it need to be changed for the 0 to start at top...like 12 noon on a clock?

In my example, the “0” is located at 3 o’clock. In your SVG editor (e.g. Inkscape), rotate this element by -90 (or 270) to setup your “0” at 12 o’clock.

Note to myself: Add buttons to change command order (e.g. up & down)

Thanks

Joel