Does anyone know how to use the markdown component with a bound tag value? I would like to outline the returned value, as in the example in the User Manual under Markdown. The tag returns a number to the markdown component, and I can momentarily add markdown to the value in the designer, but once the tag value refreshes, the markdown disappears and the number is in plain text again, with no outline. Thanks.
Show us how you've set up the tag binding and post the markdown code so that we understand what you're trying to achieve. (Use the </> button to format your code.)
Sounds like you're binding to the markdown component's source property and not transforming it with an expression transform to add whatever markdown you want applied with it. Hard to know though how to help without knowing exactly what you've got and what you want, as @Transistor said (I didn't know you could add an 'outline' to text using markdown 
)
2 Likes
Thanks for both replies. I don't know if it's markdown or html, but I saw it in the Ignition 8.1 User Manual under the markdown section, at the bottom, the last example. I tried to do this same thing in the markdown component's source property, putting the returned tag value inside the html, and it displays fine until the tag refreshes and the value changes, at which point everything in the source component disappears except for the raw tag value. I don't have any code to paste here because I haven't gotten anything to work, and I'm not sure if I should use a Tag, Property, or Expression binding. I tried them all but haven't been able to figure it out. I just wanted to use the markdown component to apply some styling not available in Ignition's style section to a tag value that changes every few seconds. Our widget uses white text on a yellow background. It's hard to read so I wanted to outline the text in black.
None of the examples in the user manual add a text outline though? The bottom example makes the text bold and magenta
To add markdown to the binding, you need to use a tag binding to read the tag value, and then add an expression transform which will add the markdown formatting.
Eg. In the expression transform, this will make the tag value bold and display with 1000s sep and 1dp
'**' + numberFormat({value}, '#,##0.0') + '**'
What the heck am I talking about? Sorry about that. I originally added "-webkit-text-stroke: 1px black" to the html in that last example to see if the outline works. It does, but I still haven't figured out how to apply html to a tag value. I just tried setting up a transform but just keep getting errors. I will keep trying different "Configure expression bindings" and "Configure Transforms", etc. until something works. Thanks.
What's the error? (mouse over the error to get a tool tip)
1 Like
The markdown should work as long as you get an expression that properly formats the html tags around it, but just in case I wanted to suggest an alternative that achieves an outline using textShadow, as in the following thread:
Try just having a label with your number and add the following two items to style:
color: magenta
textShadow: black -1px 0px 1px, black 0px -1px 1px, black 1px 0px 1px, black 0px 1px 1px
If you make the shadow any bigger than 1px you'll need to add in the corner shadows as well, but beyond 1px it usually looks a bit wrong anyway.
bonus with all corner shadows:
textShadow: black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px, black 1px 1px 1px, black -1px 0px 1px, black 0px -1px 1px, black 0px 1px 1px, black 1px 0px 1px
3 Likes
This is correct and it can be applied to a regular label. There is no need for markdown or HTML.
However,
is the real problem. I'd have you up with the HR department for abuse of employees! Use proper, proven good GUI design and themed colors.
https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes?searchId=ZW38C3WVR
3 Likes
Thanks so much for the suggestion, for adding an example of exactly how it's done, and for the helpful links! The result looks good!
1 Like
Sounds like something you should be doing with css.
Can you describe in details what you hope to achieve ?
edit: Well I should have read the whole thing first, seems like css has been suggested already.
1 Like
It's done. You're right. The shadow was good, but the result using '<p style="color:#FFFFFF; -webkit-text-stroke: .5px black">'+{value}+'</p' in Configure Transform Expression is much crisper and looks better. To be honest, the problem was all with me. Because the result in Binding Preview was a CSS string, not the actual result, I thought the transform didn't work so I posted the question in the forum. In actuality, the markdown component 'source' was expecting that kind of string. All I had to do was hit Apply and it worked like it was supposed to.
2 Likes
Seems like if you find that this looks better, you could try to use the exact same value through css directly.
Should look exactly the same, AND be much simpler.
edit: What version of ignition are you on ?
2 Likes
If you have a version before advanced stylesheets (8.1.22), I found this (really hacky) workaround:
This would go on a binding on the style
def transform(self, value, quality, timestamp):
style = {}
style['fontSize'] = 60
style['color']='magenta'
style['-webkit-text-stroke']='2px green'
return style
I don't really recommend it but it does seem to work:
2 Likes
Wouldn't "classical" css injection work just as well ?
I mean putting } .psc-class_name { -webkit-text-stroke: 2px green;} { on a background property in a perspective style class.
2 Likes
Also an option, and better if it's not just going to be a one-off label.
If that's simpler, I'm definitely interested, but I don't know where to put that.
Make a custom style:
Then, in some innocuous property like background-image, add something like what is shown:
}.psc-MagentaWithTealOutline{-webkit-text-stroke: 2px teal; color: magenta}{
Finally, you can apply the class to whatever you want:
3 Likes
Wow, this is really slick! Thanks!
1 Like
This is a pretty cool option and works well. Thanks!
1 Like