WebHMI Docs

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
{{ :level2:screens:screens_icon.png?nolink&100}}
 ====== Level2 screens ====== 

<WRAP round info 100%>

In the Level2 there is a __minor difference__ of the [[screens|screen]] concept from that one in the WebHMI:

In the WebHMI, you can change screen layout right on the screen page, while in the Level2 you make screen layout on a special Manage page, afterwards you can only change the properites of the widgets from the screen view, not detailed settings. 

</WRAP>

===== Adding a screen =====

You create new screens in the side panel Screens/Manage sub-menu with a //+New screen// button:
| {{ :level2:screens:l2_screen_manage_page.png?direct&800 |}} |

By clicking the screen's title or {{:level2:l2_eye_icon_.png?nolink&15}} button you'll get to the [[l2_screens#editing_screen_visual_layout|screen edit page]].

**Template** means that the screen was cloned with keeping binding with the parent screen. Then in the cloned screen the parent's name will be listed in this column. Read more in the further article.

**Group** property wraps a set of screens belonginng to it into one side panel pull-down sub-menu. 

**Enable** property switchs the screen visibility in the side panel on or off. 

===== Editing screen's properties =====

| {{ :level2:screens:l2_screen_data.png?direct&400 |}} |

  * **Title** - a name the screen will be listed with
  * **Group** - see previous paragraph
  * **Theme** - 2 options are available (Gray, White)
  * **Available to roles** - who mays to access the screen
===== Editing screen visual layout =====

By clicking the screen's title or {{:level2:l2_eye_icon_.png?nolink&15}} button you'll get to the screen edit page. Then by dragging & dropping & setting up available widgets onto the screen page you can create your screen layout. 

{{ :level2:screens:l2_screen_edit_links.png?direct&800 |}}


===== Level2 screen widgets =====

Every widget places on a screen has several common controls to adjust its appearance. They are located in the top right corner of widgets.

| {{:level2:screens:l2_widget_controls.png?direct&600|}} |

The setting up otions for the widget are given in the following short video:

| {{:level2:screens:icons:l2_widgets_control_explanation.gif|}} |

The **Setting** {{:level2:screens:icons:l2_widget_settings.png?direct&30|}}control is individual for a widget type while others are common for all widgets.

=== Widget size control ===
You can select either auto or specific size in % the widget will occupy on a screen page. 
{{:level2:screens:l2_edit_widget_size.png?direct&600 |}}


=== Paddings ===
You can adjust paddings for the widget content inside the widtet: 
{{:level2:screens:l2_edit_widget_paddings.png?direct&600 |}}

=== Copy tab ===
Makes a copy of the selected widget.

=== Background color ===

Quick color picker to select background color for the widget.


| {{:level2:screens:l2_widget_color_picker.png?direct&600 |}} |

=== Open widget in a new window ===

{{:level2:screens:l2_widget_in_a_new_window.png?nolink |}}


----
{{ :level2:screens:icons:l2_scr_reg_value_icon.png?nolink&30|}}
==== Register value widget ====

This widget shows just a value from the register:

| {{ :level2:screens:icons:l2_reg_value_widget_example.png?direct&600 |}} |

Press Settings {{:level2:screens:icons:l2_widget_settings.png?direct&30|}} control to edit the widget content.

=== Component tab ===

Is for setting a title. 
{{::l2_reg_value_widget_title.png?direct&800|}}

=== Register tab ===

In this tab to bind the source of the data, i.e. register to the widget and set data format:

{{:level2:screens:reg_value:l2_reg_value_register_prop.png?direct&800|}}

== Value type ==
You can show the value "as is" or represent it as a time value. For the latter two options are available - time or duration.

== Measure units ==
The units will be appended to the value (right to it).

== Link ==
Upon clicking on a register value with a link set, you will be forwarded to the link URL. 

=== Properties tab ===

In the register value tab, the tab are actually alignment properties. For align there are 3 settings: left, center, right.

{{:level2:screens:reg_value:l2_reg_value_alignment.png?direct&600|}}

=== Main colors ===

{{:level2:screens:reg_value:l2_reg_value_colors.png?direct&600|}}

=== State === 

The states for the register can be either derived from the states of the register value which was sent to the Level2:
{{:level2:screens:reg_value:l2_reg_value_states_derived.png?direct&600|}}

 or redefined (the rules are the same as in [[registers#states_tab|WebHMI registers state setup]]):

{{:level2:screens:reg_value:l2_reg_value_states_redefined.png?direct&600|}}

----

{{ :level2:screens:icons:l2_text_widget_icon.png?direct&30|}}
==== Text widget ====

With this widget you can add rich-formatted text blocks including real-time values with option to change format based on registers' values. 

The widget has few settings (show scrollbar means the one inside the widget):

{{:level2:screens:test_widget:l2_text_widget_props_1.png?direct&600|}}

as well as a background color to select:

{{:level2:screens:test_widget:l2_text_widget_colors.png?direct&600|}}

In the widget settings you can invoke a text editor by pressing this:

{{:level2:screens:test_widget:l2_text_widget_toolbar_invoke.png?direct&600|}}

Then a full toolbar will pop-up:

{{:level2:screens:test_widget:l2_text_widget_toolbar.png?direct|}}