Controls - an Overview

Each Page in your SKipper UI will consist mostly of Controls - they are the main graphical components of SKipper. Content Controls display Signal K data, and Action Controls allow you to make something happen. There are also Controls that don't display Signal K data - they are used simply to enhance the appearance of your UI. This chapter will introduce you to each of the Controls, so you can decide which of them you want to use. In another chapter, we'll get into the details of how to add each type of Control to your UI.

Control Size

Each Control will be placed into a specific place in a Layout (covered in the next Chapter), and it will use as much of the space you allocate for it as is practical. The next four images illustrate this: the first shows a Wind Gauge Control taking up the entire screen; the second shows a Wind Gauge Control and a Compass Control sharing the screen; the third shows four Round Gauges sharing the screen; the fourth shows how small the Controls get if you put a lot of them on a Page. This is important when designing your Pages - you don't want to put too many Controls on a Page, or they might be too small to read - especially when designing Pages for a small device such as a phone.

Action controls

Action Controls allow you to initiate an action. There are two of these: Button and Toggle Button, and you can modify the color, icon, font size, and text for each one.

Button

With a Button Control, you can initiate any of these actions:

• Signal K PUT request. - you can define a Signal K path and value that will be sent in the PUT request. The value can be True, False, a number, or a string, or it can modify an existing value by adding a number to it, or by toggling a boolean or 0/1 value.
• Go to a specific Page in SKipper.
• Execute a command to the operating system. (Only on Linux, MacOS, and Windows.)
• Open a page in browser (available from 1.0.16)

Toggle Button

The Toggle Button allows you to toggle the value of a Signal K path whose value is a boolean (true/false/0/1/yes/no). The current value of the path is shown, and it changes each time you press or click the Toggle Button. There are three styles of Toggle Button:

• This is the default. The icon can change depending on the state of the boolean value of the path.

• Switch (like a wall switch). When off, the bottom half is dimmed, and when on, the top half is in full color.

• Toggle with Text. It shows the icon on the left, text in the center, and a toggle to indicate the current state on the right.

Content controls

Content Controls provide various ways to display Signal K data.

Label

The Label Control gives you a way to provide a text label to your entire Page, or to any section of your Page. It can display one item of information from Signal K (for example, the boat's Lat/Long position), or static text. You can change the text, foreground and background colors, font size and weight, and you can enable or disable word wrap. A Label is great way to add helpful information to your Pages, as in the examples below. You can even display different colors for the data depending on the value of the data; for example, red text on a yellow background if the temperature being displayed is too high!

Above, the text with the pink background is a static-value Label. Below, the top pair of Lat/Longs is displayed with a Label. The second pair of Lat/Longs is displayed with a TitleValue Control, described below. The main difference is that the Label shows only the Lat/Longs, but the TitleValue also displays the title of the data being displayed: the word "Position".

TitleValue

The TitleValue control displays two or three things at once: data from one Signal K path, a text title for the data, and the units in which the data is presented. You can define the font size for all 3 bits of information, foreground and background colors. It supports autosizing that will fill all available space with these three bits of information. In the image above, the second pair of Lat/Longs is a TitleValue showing just the title and the value, but no units. The bottom Control, showing Speed Over Ground, is also a TitleValue, but it's showing all three things: title, value, and units.

TitleValue default appearance shows the title at top left, units at bottom right and value in the center. It's great to be used in a Grid Layout to show values like speed, depth, etc. There's also a "one-line" option that shows the same information in the same basic positions, but flattens it vertically. It's great to use in a Stack Layout with several other TitleValues. (Example below.)

HorizontalBar

The HorizontalBar Control displays an optional icon, optional title, value, and optional units, plus the "progress bar" that shows the value between the minimum and maximum set by the user. The color of the progress bar can be tied to Zones in Signal K so that it's a different color depending on the value.

HorizontalBar has two different styles: Default and Filled. The Default style shows the icon, the title, and the value along the top, with the progress bar and the units on the bottom. The Filled style shows only the title on the top, with everything else on the bottom. The icon, value and units are auto-sized to fit the available space in the progress bar. The image below shows the same data displayed in both styles.

VerticalBar

The VerticalBar Control shows an optional icon, optional title, value, optional units, plus the "progress bar" that shows the value between the minimum and maximum set by the user. The color of the progress bar can be tied to Zones in Signal K so that it's a different color depending on the value.

Below are three variations of the VerticalBar: on the left, the title is shown in the default font size; in the middle, the title is hidden, so the progress bar fills the space; on the right, the title is shown, but in a smaller font, and there is no icon.

Digital Gauge

The Digital Gauge Control displays a numeric value in a modern arc-style gauge. The arc indicates the current value between user-defined minimum and maximum values. The Digital Gauge shows an optional title, optional minimum and maximum points on the arc, optional units, and the value. The color of the arc can be tied to Zones in Signal K so that it's a different color depending on the value.

Analog Gauge

The Analog Gauge display a number from Signal K in the form of a circular gauge with a needle and tickmarks, emulating typical real-world analog gauges. It can display an optional title and units. Minimum and maximum values are user-defined, as is the color of the needle. The colors of the circle can be tied to Zones in Signal K so that each segment of the gauge is in a different color. Font sizes are set automatically.

Wind Gauge

The Wind Gauge shows wind direction and speed. Displays whatever type of wind you have available in Signal K (true, apparent, etc.). Title and units are user-defined, and the font sizes are set automatically.

Modern Compass

The Moder Compass combines a lot of information into a single graphic display: Course Over Ground, Heading, Wind Speed and Wind Heading, and Next Waypoint Heading. (If you don't have all of that info in your instance of Signal K, just use as much of it as you have.)

Compass

The Compass shows magnetic or true heading. The title is user-defined, and the font sizes are set automatically.

Layout Controls

Layout Controls are very different from all of the Content Controls described above. They simply allow you to define the organization of each page - its "layout". You add them to a Page the same way that you add any of the Content Controls to a Page, but that's the only way they are similar. The next page of this document explains Layout Controls.