Description

HTML can be used in several places in Ignition such as labels, buttons, tables, and tooltips.

Video recorded using: Ignition 8.1

Transcript

(open in window)

[00:00] In this lesson, we will explore Ignitions ability to integrate HTML code into your vision projects. One of the more common places where people like to use HTML, is in a labels text. With my label selected, I'm gonna head over to its text property and I'll click on this little pencil so I can edit it. Now I can begin typing my HTML code directly into my labels text to modify its appearance. I'm gonna say something like here is some text. And if I wanted, for example, the word some to be underlined, all I have to do is put in my underline tag like so. And if I wanted the word text to be bolded, I could just put it in my bolded tag like so. And now when I click out of my text area, I will notice that my labels text became here is some text, but more importantly, the word sum is underlined and the word text is bolded.

[01:07] Another common place where people like to put HTML code is in a buttons text property. Now with my button selected, I'm gonna head over to its text property, and I'll click on the little pencil again to modify it. Here, I'm gonna type in HTML once more. And I'm going to say save to disk. But maybe I want the word disk to be in its own line and I want this to be multi line text. All I have to do is add a line break. And maybe I want this whole text to be centered. All I have to do is type in center and add my center tag. And now when I click out of my text area, I notice that my text is centered and I notice the line break was respected as well. One interesting place where HTML can also be used is in a components mouse over text. A components mouse over text is the text that appears when you hover your mouse over that specific component.

[02:05] With my label selected here, I'm gonna head over to it's mouse over text property, and I'll click on the little pencil here to configure it. Here I'm going to say HTML. Here are some instructions. Here I'm going to start an unordered list where my first list item is going to be step one. Then I'm going to add another list item that is going to be. Then finally, I'll end my unordered list. And now when I click out of my text area, I can put my designer in preview mode. And when I hover my mouse over my label, I see my nicely formatted mouse over text.

[03:07] I can also put HTML code on a specific cell on a table. Here on this table, I'm gonna head over to its data property, which is essentially the property that drives the underlying data of the table. I'm going to click on the data set button here, and I can directly double click on one of these cells and I can start typing HTML into here as well. If I wanted, for example, the word row to be bolded, all I have to do is add my bold tag, like so. Now you'll notice that the word row becomes bolded here in the data set editor. And if I hit, okay, the word row becomes bolded directly on the table component as well. So in conclusion, you can use HTML pretty much anywhere in your vision project to modify the appearance of its text.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.