Note: This hack is no longer necessary! Custom widgets and plugins are here! Take a look at the support article and get involved in the developer program. The use cases are endless… have fun!
------- original post below-----
Here is a neat little hack for how you can use SVGs and connector functions to make dynamic custom gages or images.
Code in NoCode Platform! Great Is it a SQL connector?
Yep! It is a sql connector that returns an image variable. The image itself is created within the function and can accept variables that help to define the size, color, or shape of the image.
Hey everyone, just wanted to give a quick update - the new function STRING_TO_IMAGE_URL() within the expression editor makes it so you no longer need to use the connector to accomplish this.
This is great and will allow so much more control for guys like me that focus more on the UX side of an app. Will this feature need to be enabled for each Tulip instance?
The release should happen automatically but the exact timing will be based on your instance.
Is it plan to explain in detail what we can do with new STRING_TO_IMAGE_URL() function() Which format will be support (base64, SVG, …)?
New features are documented in the support docs (Technical Details of the Expression Editor | Tulip Knowledge Base - Support for Building Operations Apps) but I like to push the features and the platform whenever possible. I would still generally regard the SVG and base64 stuff as a Hack. Personally though, I like hacks. I’m always impressed by what people come up with and I don’t think we’ve fully explored all that is possible. The simplicity, power, and diversity of the platform’s features make me wonder if we’ll ever fully document every possibility. The more we explore and share, the better.
For this, at least, I’ll be making an updated video that uses the expression editor (instead of the connectors demo) and exploring what can be done with it. What I’d like to continue to do is document as many tricks, tips, techniques, and solutions that I can and categorize them.
Are you sure that the STRING_To_IMAGE_URL function allows the conversion? My tests are not positive!
Sorry, it works! I use Image to Base64 | Base64 Encode | Base64 Converter | Base64 and convert in Data URI
Very cool discussion here Mark/Youri, I’m playing around to move simple shapes in my apps (without changing steps now !)
Hope it can spark cool idee here is the expression I’m using on the example above :
string_to_image_url(‘data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%22200%22%20height%3D%22250%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%0A%20%20%3Crect%20x%3D%22’ + @Variable.input_position_x + ‘%22%20y%3D%22’ + @Variable.input_position_y + ‘%22%20width%3D%22’ + @Variable.input_width + ‘%22%20height%3D%22’ + @Variable.input_height + ‘%22%20stroke%3D%22’ + @Variable.input_color_name + ‘%22%20fill%3D%22transparent%22%20stroke-width%3D%225%22%2F%3E%0A%0A%3C%2Fsvg%3E’)
I just realized looking at r216 that we can encode a SVG code from the expression editor (with Encode_URI() ) so here is an app builder friendly expression :
string_to_image_url('data:image/svg+xml,' + encode_uri('<?xml version="1.0" standalone="no"?><svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="' + @Variable.input_position_x + '" y="' + @Variable.input_position_y + '" width="' + @Variable.input_width + '" height="' + @Variable.input_height + '" stroke="' + @Variable.input_color_name + '" fill="transparent" stroke-width="5"/></svg>'))
@freedman exciting and a bit of a game changer for ux design in Tulip, thanks for sharing! Is there any plan or hack to store the “value” of an image variable like this in a Tulip Table? Like in pte’s example above, except the image of the square is stored in a tulip table vs. a local app variable (and thus updates wherever referenced in other apps)? Thanks!
Interesting @aaronbroussard , I’d be curious what you had in mind here. I’m sure that would be very useful. I tried saving to a table and got an error so I just submitted a feature request.
It does seem to work in test / dev mode, but that doesn’t really help that much.
In the short term you could just store the raw text in a table and update the image variable from the tulip table on app open/step open or on a timer.
Does anyone know why gradients in an svg do not display? Most modern UX design styles such as Flat 2.0 and Neumorph rely heavily on gradients and it would be great have more options and abilities than just the drop shadow effect on text boxes and buttons.
@Jeff I think gradients do work. Check this out
HI Freedman, did you have a chance to update the video/info to show how to use the expression instead of connectors to make this gauge?
@Hoss1 I haven’t made a new video but the process is a few steps simpler when using the expression editor. Let’s use @pte 's example from above. Just create the variables that you want to use to adjust the image (shown in the image below as blue)
Here is the code:
string_to_image_url('data:image/svg+xml,' + encode_uri('<?xml version="1.0" standalone="no"?><svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="' + @Variable.input_position_x + '" y="' + @Variable.input_position_y + '" width="' + @Variable.input_width + '" height="' + @Variable.input_height + '" stroke="' + @Variable.input_color_name + '" fill="transparent" stroke-width="5"/></svg>'))
Clicking the button transforms the string into an image that can be displayed as a variable in the player, as shown below.
Does this make sense?
Yes thanks, i’ll try that. Simpler to do and follow without encoding it to a URL!
Having tested both now, i actually prefer the connector method. Yes its a few more steps to create, but once done its much easier to plug the variables in via the action dropdowns than edit the expression code.