User Tools

Site Tools


advanced_gui

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
advanced_gui [2018/05/16 07:42]
admin [Label]
advanced_gui [2018/05/16 07:50]
admin [Slider]
Line 271: Line 271:
  
 ==== Text Input ==== ==== Text Input ====
 +{{ ::​textinput.png |}}
 +
 +  * Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +  * Text: The text that is displayed
 +  * String Join Caption: The join number to set the Text.
 +  * String Join Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * String Join Border Color: The border color of the label
 +  * String Join Text Color: The Text color of the label. Use all the String Color Joins to change the color of the widget by V-Control.
 +  * Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * Border Color: The border color of the label
 +  * Text Color: The Text color of the label. ​
 +  * Top, Left, Width, Height: Position and size of the button
 +  * Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +  * Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
 +  * Font: The font of the Caption
 +  * Size: Font size of the caption
 +  * Bold, Italic, Underline: Style of the Caption
 +  * Multilie: Show multiple lines of text
 +
 +==== Combo Box ====
 +{{ ::​combobox.png |}}
 +
 +Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +Edit Items: Opens an editor to edit the items in the combo box
 +Integer Join: The join number to select an item.
 +Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +Border Color: The border color of the label
 +Text Color: The Text color of the label. ​
 +Top, Left, Width, Height: Position and size of the button
 +Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +Font: The font of the Caption
 +Size: Font size of the caption
 +Bold: Style of the Caption
 +
 +
 +Spin Button
 +
 +  * Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +  * Integer Join: The join number
 +  * Min: The minimum integer value
 +  * Max: The maximum integer value 
 +  * Top, Left, Width, Height: Position and size of the button
 +  * Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +  * Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
 +  * Font: The font of the items
 +  * Size: Font size of the items
 +  * Bold: Style of the items
 +
 +==== Slider ====
 +{{ ::​slider.png |}}
 +
 +  * Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +  * Integer Join: The join number ​
 +  * Min: The minimum integer value that the progress bar can show (no progress)
 +  * Max: The maximum integer value that the progress bar can show (full progress)
 +  * Orientation:​ Horizontal or vertical orientation
 +  * Back Color: The back color of the widget. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * Border Color: The border color of the widget
 +  * Inner Color: The inner color of the widget. ​
 +  * Handle Color: Color of the handle
 +  * Scale Ticks: every Scale Tics pixel a marker is set
 +  * Show Scale: Show or hide the scale
 +  * Sep Width: Minimum width of a step
 +  * Knob Image: Image for the handle
 +  * Inline Image: image for the inner part
 +  * Top, Left, Width, Height: Position and size of the button
 +  * Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +  * Resend Received: If a widget receive a message, then it can send the message back the message to the RemoteScreenReceiver. Imagine the button receives a message with value 0, the message was sent from the RemoteScreenSender. Then the RemoteScreenreceiver doesn’t know that the value has changed and does not update the corresponding device variable.
 +
 +The image properties of the slider allow custom sliders. It depends only on the graphical skills how they look.
 +
 +{{ ::​slider2.png |}}
 +
 +==== Ellipse ====
 +
 +{{ ::​elipse.png |}}
 +
 +  * Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +  * String Join Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * String Join Border Color: The border color of the label
 +  * Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * Border Color: The border color of the label
 +  * Top, Left, Width, Height: Position and size of the button
 +  * Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +
 +The Ellipse is often used a background for other widgets to visualize a function group.
 +
 +==== Rectangle ====
 +
 +{{ ::​rectangel.png |}}
 +
 +  * Name: The name of the widget. Try to use meaningful names, this will help in complex projects to keep the overview.
 +  * Radius: Corner radius.
 +  * String Join Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * String Join Border Color: The border color of the label
 +  * Back Color: The back color of the label. Color values are in the format AA,​RR,​GG,​BB. AA = alpha (00..FF), 00 means transparent,​ FF full visible, RR = red (00..FF), GG= green (00..FF) and BB = blue (00..FF). All Color values are two digit hex numbers.
 +  * Border Color: The border color of the label
 +  * Top, Left, Width, Height: Position and size of the button
 +  * Z: The Z-Order of the button. The higher this value, the more on top the widget is displayed if overlapping with other widgets.
 +
 +The Rectangle is often used a background for other widgets to visualize a function group.
 +
 +
 +
 ===== Web Server ===== ===== Web Server =====
 One way to create fast responsive web sites is to use the build in web server and WebSockets. This allows us to establish a stable, bidirectional connection between a web application and V-Control. The benefit of a bidirectional connection is, that our web application does not have to poll the V-Control web server to get status changes. As far as a status change of a device occurs, the information is sent to the web application. All we need is to write a handler for this status message and show the new status in our GUI. One way to create fast responsive web sites is to use the build in web server and WebSockets. This allows us to establish a stable, bidirectional connection between a web application and V-Control. The benefit of a bidirectional connection is, that our web application does not have to poll the V-Control web server to get status changes. As far as a status change of a device occurs, the information is sent to the web application. All we need is to write a handler for this status message and show the new status in our GUI.
advanced_gui.txt · Last modified: 2018/05/16 07:50 by admin