Adding control elements and other objects

Various objects for operation can be added to the user interface. All objects are based on a template and can be edited in a similar way. See also Templates for touch pad interfaces.

In the main menu click on tab Insert, choose one particular type of object and by dragging the mouse draw a rectangle of the desired size on the page. Position and size can also be edited at a later time by dragging the mouse, for rotation grab it at the green dot. The following objects can be added this way:

• Label is used for labeling. Double-click the created label to enter the text to appear on the label. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

   

• Text field  ...is used for displaying texts which can be added via Avio, e.g. querying device statuses and displaying them in the text field. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu: Copy Template transfers the design of the highlighted element to the clicked object. The options above Fonts allow font, font size, alignment, color, etc. to be adjusted. Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files. Click Size & Position to display the options for numeric entry of size, position and rotation of an object. Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc. Double-clicking the object gives you access to the following editing tools in the menu: Copy Template transfers the design of the highlighted element to the clicked object. The options above Fonts allow font, font size, alignment, color, etc. to be adjusted. Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files. Click Size & Position to display the options for numeric entry of size, position and rotation of an object. Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.   Textfield Specific Settings: Check-marking Disable User Input blocks input on the user interface. When Show OnScreen Keyboard is enabled a keypad appears on the screen after clicking the text window.

   

• Button ...is used for triggering certain functions. In Avio Manager buttons are displayed as Channels. Double-click the created button to enter the text to be displayed on the button. Further edition options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited.

  • The following functions are available under Button Specific Settings:

  • Click Sound ...allows output of an audio file which is played when the button is pressed.

  • Activate Hold Down Event  ...offers an additional channel which is set to 1 when a button is pressed for a period specified under Hold Down Interval.

  • Activate Repeat Events  ...offers an additional channel which keeps being set to 1 within the Repeat Interval while the button is being pressed.

  These two events can be used to trigger certain functions using a button.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

• Indicator ...offers two different types of indicators to be selected from a dropdown menu. The active type of indicator is illustrated by the following icons:

• On/Off Indicator  ...shows two conditions, for example whether there is a connection to a device or not, and is displayed as a Channel in Avio Manager. Double-click the Indicator to enter the texts for on and off condition and to specify the condition to be displayed during editing. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

• Multistate Indicator  ...can take any type of condition. By default only two conditions are configured but it is possible to add further ones. Adding further conditions.

  Additional states are assigned a value which can later be called up via Avio. A new state is created on tab Edit in the Multistate Specific Settings area by clicking button  and entering a value. Following this the indicator design can be changed as desired. See further below. The required condition can be selected for editing at State Value by selecting the corresponding value. The value of a state can be changed by clicking . The selected state can be deleted by clicking . Moreover, there is also the option State Is Blinking which causes the display to blink. In Avio Manager the indicator is listed in the folder on the corresponding page under Multistate Indicators where it can be connected with channels. When a suitable value is sent to the indicator the corresponding state is displayed. If a device is to return text only you need to convert the text into a value via the Script ???. See also Avio Scripts. Graphic design can be done as follows: Copy Template transfers the design of the highlighted element to the clicked object. The options above Fonts allow font, font size, alignment, color, etc. to be adjusted. Shape Style allows shape fill and borders of the object to be edited. Click Size & Position to display the options for numeric entry of size, position and rotation of an object. Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

• Toggle Button  ...is a button with two conditions (ON and OFF) that are displayed graphically (color and labelling).

• Switch  ...switch with two conditions (ON and OFF) . Can be actuated by clicking or sliding it.

• Media field  ...currently only supports display of images .

• Fader is used for adjusting values via sliders controls and are displayed as Channels in Avio Manager. Further options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

  Control Specific Settings:

  • At Minimum Value and Maximum Value you can enter the fader's value range. The default range is 0 to 100.

  If the slider is to be restricted to just a part of the overall value range you need to disable automatic scaling for connecting the fader in Avio Manager by right-clicking the connection under Connections and selecting Change scaling. The fader's value range must then refer to the actual range of the device, e.g. 0 to 255 for DMX.

  • Current Value allows you to specify the fader setting that is to be displayed when the user interface is opened.

   

• Progress Bar ...is used for displaying values in a progress bar and is displayed as a Channel in Avio Manager. After double-clicking the progress bar its position (horizontal/vertical), the direction (from right to left or vice versa), maximum and minimum and the current value, the labeling (percentage, text, or both) and the color fill and its gradient can be entered. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

• Web Browser  ...adds a browser for displaying websites.

• Touchpad  ...adds a touch area for finger entry by typing or swiping. The X/Y values are transferred to the Avio System and can be used for controlling other resources. Further options.

  Double-clicking the object gives you access to the following editing tools in the menu: Copy Template transfers the design of the highlighted element to the clicked object. The options above Fonts allow font, font size, alignment, color, etc. to be adjusted. Shape Style allows shape fill and borders of the object to be edited. Click Size & Position to display the options for numeric entry of size, position and rotation of an object. Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc. Touchpad-specific settings: Touchpoint Center X and Touchpoint Center Y allow entry of the touch point relative to the touchpad surface. The values are dependent on the selected touch pad value range. The position of the touch point is only relevant as a preset value for starting the touch pad interface. The touch pad value range is defined via the four entry fields from Horizontal Min Value to Vertical Max Value. The touch pad resolution is the result of the value range and its geometric dimensions. Use Invert X and Invert Y to change the reference point which is usually located in the top right corner. Show Grid enables a grid for graphic display of the resolution.

   

• Analog Clock ...shows the current time on a classical clock face (PC clock); the seconds can be turned off. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu: Copy Template transfers the design of the highlighted element to the clicked object. The options above Fonts allow font, font size, alignment, color, etc. to be adjusted. Shape Style allows shape fill and borders of the object to be edited. Click Size & Position to display the options for numeric entry of size, position and rotation of an object. Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc. Date-specific settings  ...here you can choose whether seconds are to be on or off.

   

• Digital Clock ...as above but with numbers.

• Date ...displays the current date (as set in the PC). After double-clicking the date field you can select the date format and the separator between the numbers. Further editing options.

  Double-clicking the object gives you access to the following editing tools in the menu:

  • Copy Template transfers the design of the highlighted element to the clicked object.

  • The options above Fonts allow font, font size, alignment, color, etc. to be adjusted.

  • Category Shape Style allows shape fill and borders (Shape Border) of the object to be edited. Shape Fill also allows selection of images or graphics files.

  • Click Size & Position to display the options for numeric entry of size, position and rotation of an object.

  • Arrange offers various options to change the position of the object with reference to other objects, e.g. Bring forward, etc.

   

• Internal commands, such as jumping to a page or closing the user interface can be selected by right-clicking it. Functions for external resources are linked up via Avio Manager. See also Assigning and testing functions.

• You can group several indicators, switches or toggle buttons into an indicator group in order to achieve radio button behavior. See Creating a group with radio button behavior.

• When you edit an object you need to decide whether you want to change only this one object in which case you select Create Template. If the existing template and the objects based on it are to be changed you select Edit Template.

• The design of an object or a page can be defined as default design for new objects by right-clicking it and selecting Set as Default Template.

• On tab Insert you can also find Rectangle and Ellipse, which allow you to create areas with or without frames for visually organizing the control elements. Double-click them to get access to design options.

• By dragging the mouse and drawing a rectangle around an object it can be highlighted and copied and pasted to any other location.

• You can save time during editing by using shortcuts. See Shortcuts in Wings Touch.

• Several highlighted objects can be grouped by means of a Layer.

• For easy alignment of objects use tab View and enable Grid Lines. Moreover, function Snap to Grid, which is independent of any enabled grid lines, can also be enabled and disabled.

See also

Adding pages

Assigning and testing functions

Graphic design of the touch interface