Custom Gage Widget Hack

So i’m using the connector method, and it would be very nice to add the gauge scaling into the code instead of having to do a data manipulation for each variable.
So e.g one of my values would be:

((100-0) * ($Value$-$Scale_L$) / ($Scale_H$-$Scale_L$))::text

But i’m getting a connector failure. It’s something in those formulas. I’ve checked brackets balance - all ok, I’ve stripped back and checked the connector works with contstants - ok.
So something in my formula syntax?

@Hoss1 can you paste the entire code so I can take a look at it?
Thanks

So, I’m not exactly sure what is going on here, but I did notice this part of the code is breaking


((100-0)*($G_High$-$Scale_L$)/($Scale_H$-$Scale_L$)) - ((100-0)*($G_Low$-$Scale_L$)/($Scale_H$-$Scale_L$))::text

This part of the code is trying to subtract a text value from a numeric value.

Ah yes, i’d missed that one of my inputs was incorrectly defined as text.
Fixed now, thanks for your help.
The syntax works like this and provides any scale factor for the gauge (the SVG is set to 0-100 pixels):

(100 * ($Y_Low$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20y%3D%225%22%20width%3D%22'||
(100 * ($Y_High$ - $Scale_L$) / ($Scale_H$ - $Scale_L$) - 100 * ($Y_Low$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20height%3D%2215%22%20fill%3D%22%23F1C62C%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20filter%3D%22url(%23filter3_i_1_6)%22%3E%0A%3Crect%20x%3D%22'||
(100 * ($G_Low$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20y%3D%225%22%20width%3D%22'||
(100 * ($G_High$ - $Scale_L$) / ($Scale_H$ - $Scale_L$) - 100 * ($G_Low$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20height%3D%2215%22%20fill%3D%22%2357BF26%22%2F%3E%0A%3C%2Fg%3E%0A%3Cline%20x1%3D%22'||
(100 * ($Value$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20y1%3D%222%22%20x2%3D%22'||
(100 * ($Value$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20y2%3D%2218%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%0A%3Cline%20x1%3D%22'||
(100 * ($Value$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text
||'%22%20y1%3D%222%22%20x2%3D%22'||
(100 * ($Value$ - $Scale_L$) / ($Scale_H$ - $Scale_L$))::text

Gauge looks like this:
2022-01-10 11_49_33-Tulip _ Dev Mode and 6 more pages - Personal - Microsoft​ Edge

2 Likes

p.s heres the thigma svg if anyone wants it Thigma SVG horizontal gauge

1 Like

I think the Tulip code develops faster than the “show and tell” category can update.

String_to_image_url became “texttoimageurl” and encode_uri became “encode_uri_component” for this concept to work. Just a hint if others are struggling with this.

Would it be an idea to make a new accurate post about this that steps through the use case again matching release 225 ?

@ASharp-J I think you are right. In fact… we have a new feature (currently in beta) that renders this entire method obsolete - and adds an incredible amount of capabilities. If you are interested in the beta, let me know!

1 Like

I would be interested in taking a look at the beta. We use a lot of SVGs for visual indicators.

@ASharp-J @Jeff
I’m so glad to finally be able to share this! We just announced custom widgets. In short - they are AWESOME.
Here is a video overview:

Here is a support article:
https://support.tulip.co/en/articles/5921815-custom-widgets-overview

And here is an example of making a radial gage:

There are also some you can download from the library:

Here is the official announcement:

And there is also a developer program that you might be interested in if you’d like to create your own and get involved more…

This is a huge announcement for us. Thank you for listening to the customer.

1 Like

Hi Mark,

Very cool feature indeed. It think it would be quite beneficial for my plant / room overview diagrams.

Is it part of an upcoming LTS release, and also which base release includes the custom widgets?

I am currently on release 226 and logged in as an account owner. Do I need extended rights beyond that to access custom widgets?

@ASharp-J Currently, widgets are available to all via the Library, however, if you’d like to create your own please sign up for the new developer program