Screen .hmi file example overview

The following is an example of an .hmi file content of a user-defined screen. 
namespace viewdesigner;

using HMICatalog;

Screen Sample_Screen {

	ShowDefaultBanner := true;

	FillColor := "#ffffff";

	UpdateRate := EnumUpdateRate._500_ms;

	Button Sample_Button {

		FillColor := "#263a4e";

		Border {

			Color := "#262324";

			BorderStyle {

				Line := PenStyle.SolidLine;

				Cap := CapStyle.SquareCap;

				Join := JoinStyle.MiterJoin;

			}

			Width := 2;

		}

		CornerRadius := 3;

		TextAlignment := EnumAlignment.HCENTER_VCENTER;

		FontName := "Arial Unicode MS";

		FontSize := 12;

		FontColor := "#ffffff";

		Bold := true;

		Text := "Sample Button";

		UsePredefinedDisabled := true;

		BehaviorNavigateToScreen BehaviorNavigateToScreen_001 {

			screenName := "Navigation Menu\Settings";

			Key := EnumBezelKeys.VK_NONE;

			RequiresFocus := false;

			AlwaysTriggerReleaseEvent := false;

		}

		X := 15.14;

		Y := 265.26;

		Width := 123.92;

		Height := 42.6;

		Angle := 0;

		Enabled := true;

		^Visible := true;

		Opacity := 100;

		Access := EnumElementAccessFamily.Inherit;

		ForceAnimations := false;

	}

	TextDisplay Remaining_Time {

		Text := "Text Display" -> "::Local:HMIDevice.AutoLogoff.RemainingTime";

		FontName := "Arial Unicode MS";

		FontSize := 15;

		Bold := true;

		Underline := false;

		FontColor := "#000000";

		TextAlignment := EnumAlignment.HLEFT_VCENTER;

		Padding := 0;

		CornerRadius := 0;

		Border {

			Color := "#000000";

			BorderStyle {

				Line := PenStyle.NoPen;

				Cap := CapStyle.SquareCap;

				Join := JoinStyle.MiterJoin;

			}

			Width := 1;

		}

		FillColor := "#00000000";

		StateTable StateTable {

			Expression := "" -> "::Local:HMIDevice.AutoLogoff.Enable";

			State State0 (

				^visible := "False")

			{

				value := "0";

			}

			State State1 (

				^visible := "true")

			{

				value := "1";

			}

			State DefaultState (

				^visible := "true")

			{

			}

		}

		X := 183.38;

		Y := 265.26;

		Width := 109;

		Height := 26;

		Angle := 0;

		Enabled := true;

		^Visible := true;

		Opacity := 100;

		Access := EnumElementAccessFamily.Inherit;

		ForceAnimations := false;

	}

	BarGraph1 Sample_Bar_Graph {

		FillColor := "#4d4d4d";

		FillOpacity := 100;

		TickMarkOpacity := 100;

		TextOpacity := 100;

		LevelColor := "#29abe2";

		Value := 0 -> "::Local:HMIDevice.Display.BacklightIntensity";

		MinValue := 0;

		MaxValue := 100;

		HousingColor := "#333333";

		TickMarkColor := "#f2f2f2";

		FontName := "Arial Unicode MS";

		FontSize := 12;

		FontColor := "#ffffff";

		X := 310.79;

		Y := 265.26;

		Width := 108.74;

		Height := 201.56;

		Angle := 0;

		Enabled := true;

		^Visible := true;

		Opacity := 100;

		Access := EnumElementAccessFamily.Inherit;

		ForceAnimations := false;

	}

	Width := 1280;

	Height := 981;

	ForceAnimations := false;

}
In this .hmi file, the following graphic elements are described:
  • Button
  • TextDisplay
  • BarGraph1
  • Border
     (as part of the button)
Each graphic element in the above example has properties configured and animations or events applied. All properties and their values and events, behaviors, and animations in the .hmi file match those displayed in the View Designer Properties tab. This .hmi file sample defined the following graphic element properties:
  • General properties:
    • ShowDefaultBanner
    • UpdateRate
    • Value
    • MaxValue
    • MinValue
    • Text
  • Appearance properties:
    • Opacity
    • FillOpacity
    • TickMarkOpacity
    • TextOpacity
    • FillColor
    • Color
    • TextAlignment
    • FontName
    • FontSize
    • FontColor
    • Bold
    • Underline
    • UsePredefinedDisabled
    • Border Style
    • Line
    • Cap
    • Join
    • Padding
    • CornerRadius
    • ^Visible
    • Enabled
      TIP:
      If you want to you use W3C color keywords instead of hex values, you can configure them as bound properties. For example:
      FillColor := "" -> "'lightblue'"
  • Position and size properties:
    • X
    • Y
    • Width
    • Height
    • Angle
    • ForceAnimations
  • Security Properties:
    • Access
For detailed information about the
View Designer
 graphic element properties, refer to "Graphic elements library" in the Studio 5000™ View Designer Help.
The .hmi also contains the
StateTable
 animation, and the
BehaviorNavigateToScreen
behavior.
Bound properties
The following is an example of how bound properties are expressed in the .hmi:
Text := "Text Display" -> "::Local:HMIDevice.AutoLogoff.RemainingTime";
Expression := "" -> "::Local:HMIDevice.AutoLogoff.Enable";
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal