In this video, we’re going to continue covering the UI Design view and look at the Rectangle and Oval shape objects. Both objects can be found in the COMMON CONTROLS section of the CONTROL LIBRARY. These objects can be used to create images or to help clarify a system’s design. Here’s an example where the shapes were used and color coordinated to represent a simple system. These colors make it easy for us to understand which of the controls will control a particular area.
These objects have deeper functionality than just this, because we can bind binary parameters to them. In this panel, I’ve already brought in a mute that we’re going to bind to the Rectangle and Oval. This mute is going to act as a fire alarm mute that’s triggered by an external control. Drag the mute from the Parameters Tree directly on to the objects to bind them. Just like some of our other binary COMMON CONTOLS, the shapes have both an On and Off state that we can make changes to. Let’s change the Rectangle to be a red color for the On state, or when the mute is engaged. The Oval let’s make transparent in the On state, then make it green for the Off state. Let’s take a quick look at the panel now and see how this behaves. Notice right now that we can see both objects with the mute in the off state. When the mute is engaged, the Oval becomes transparent and the Rectangle changes to red. 
Let’s take this a step further and incorporate the Label object to help the look of our fire alarm indicator here. I’m going to start by making this rectangle a little longer, and increase the border width and corner radius to round the rectangle out a little. I’m going to make a quick detour and grab the color hex value of the background to use and apply that to the border of the rectangle in the On state. For the Off state, I’m going to make the rectangle invisible by lowering the opacity. For the Oval, I’m going to leave the Off state to be this green color, that way it’s nice and clear to us that everything is good and operating normally. The On state we’ll change to match the background color. 
Let’s add the Label object now. We want this to be the same size as our rectangle, so I’ll start by matching the size in the Properties window. Let’s change some of the text now. Make it bigger, change the font style, center it, and last change the color of the text to match the background color. Let’s also change the display format to Marquee, so we get that nice movement of the text within the rectangle. Finally, the text should be changed to fit our goal, so let’s make it “Fire alarm active”. You can use the alignment controls on the top pane to make sure that the label and rectangle objects are perfectly layered. Run the panel and let’s see how it looks. Right now, the mute is off and our green circle is visible to indicate all good for the user. If the fire mute is triggered, the green circle goes away and this display is shown with the nice moving text to indicate that the fire alarm is active.