Graphical objects¶

Introduction

Q Studio has a library of default graphical objects for creating Q Application user interfaces. These objects are available in the Types panel, inside the User interface folder. For the details of each type of graphical object, refer to the chapter Object and variable references.

Graphical Object Family

All graphical objects can be grouped in the following families:

Base controls: base objects, e.g. labels, text boxes, buttons, and analog indicators.
Containers: objects that contain other child graphical objects, including other containers, with which to create the basic graphical structure of an application. For example, they can be windows, panels or sections with automatic content alignment.
Contents: web browser, video, and PDF viewer.
Data controls: objects that present and/or allow to select data obtained from a model of project nodes or from a database. For example they can be data grids, combo boxes or trend graphs.
Drawings: shapes and images.

List of Basic controls objects

Object	Description	Application examples
Check box	Set and display a Boolean value using select/deselect.	-
Text box	Inserts and displays a text at runtime.	-
Date and time	Display DateTime data.	Configure and filter a Data grid object with model based on objects
Duration	Display Duration-type data.	-
Label	Visualizes a text.	-
Editable label	Display an editable text.	-
Circular gauge	Set and/or display an integer value within a range of possible values.	Design a widget to display the values of multiple motors
Linear gauge	Set and/or display an integer value within a range of possible values.	Design a widget to display the values of multiple motors
Switch	Set and display a Boolean value.	-
LED	Display a Boolean value in the form of on or off LED.	-
Button	Generate events to run methods.	-
Option button	Select a mutually exclusive option in an option group.	-
Spin box	Increase/decrease a numerical value using buttons or keyboard.	-

List of Container objects

Object	Description	Application examples
Accordion	Expand or collapse content blocks on user click.	-
Horizontal layout	Panel that automatically arranges the directly child graphical objects horizontally next to each other.	-
Vertical layout	Panel that automatically arranges the directly child graphical objects vertically next to each other.	-
Window	Root graphic container. In a Presentation engine, this can be set to determine the initial user interface at runtime.	-
Dialog box	Window that can be made modal, i.e. not allowing interaction with other interface elements.	-
Panel	Simple objects container. Display the graphical objects it contains and that can be a clickable area.	-
Navigation panel	Panel that contains other panels and automatically organizes them into navigable tabs.	-
Panel loader	Container that displays different alternative panels at runtime according to the set logics.	-
Popup	-	-
Dropdown button	Button that opens/closes a pop-up panel when clicked.	-
Scroll view	Panel with the possibility of scrolling, to display content larger than the panel itself.	-

List of Contained objects

Object	Description	Application examples
Web browser	Display an online web page or a local HTML file at runtime.	-
Video	Display a video at runtime.	-
PDF Viewer	Display a PDF file at runtime.	-

List of Data controls objects

Object	Description	Application examples
Combo box	Drop-down selection whose elements are obtained from a model of the project nodes or from one or more database tables.	-
List box	List whose selectable elements are obtained from project nodes or from one or more database tables.	-
Data grid	Table that presents data obtained from project nodes or from one or more database tables.	Configure and filter a Data grid object with model based on objects
Trend	Display the trend of values of one or more variables read in real time and/or logged.	-
XY chart	Display the value of two-dimensional variables in a Cartesian chart.	-
Pie chart	Display the model or database data in a pie chart.	-
Histogram chart	Display the model or database data in a histogram.	-

List of Drawings objects

Object	Description	Application examples
Rectangle	Object container similar to Panel but more customizable in appearance. May be a clickable area.	-
Image	Display an image.	-
Advanced SVG Image	Visualizza un’immagine SVG di cui è possibile modificare a design time e a runtime alcune proprietà grafiche.	Tutorial: design a dynamic image in relation to the status of an alarm