WinCC Unified: Basics of responsive design: client size, browser size, zoom factor & decluttering

Опубликовано: 16 Октябрь 2024
на канале: DerHecht4.0

9,796

In this video I will show the basics of a responsive design:
You need the client size and the mode of the client (landscape or portrait) The browser size with the zoom factor you client use. Based on this information’s a decluttering is possible by hide the layers

00:00 Intro
00:12 Get client size
02:08 Landscape or portrait
03:42 Browser size
04:24 Zoom Factor
05:21 Decluttering
07:04 active screen size

minimum require Version: V17 Update1
//JS Client Dimension
let ClientDisplayWidth = UI.GetClientInfo(UI.Enums.HmiClientInfoType.PrimaryDisplayWidth);
let ClientDisplayHeight = UI.GetClientInfo(UI.Enums.HmiClientInfoType.PrimaryDisplayHeight);

if (ClientDisplayHeight "Greater-than sign" ClientDisplayWidth) {
HMIRuntime.UI.SysFct.ChangeScreen("StartScreenPotrait",".");
} else {
HMIRuntime.UI.SysFct.ChangeScreen("StartScreenLandscape",".");

//JS Client Browser size
let RootDisplayWidth = UI.RootWindow.Width
let RootDisplayHeight = UI.RootWindow.Height
let RootDisplayCurrentZoomFactor = UI.RootWindow.CurrentZoomFactor

Screen.Items("txtBox").Text += "RootDisplayWidth: " + RootDisplayWidth + ", RootDisplayHeight: " + RootDisplayHeight + ", RootDisplayCurrentZoomFactor: " + RootDisplayCurrentZoomFactor + "\n\r";

if (RootDisplayCurrentZoomFactor "Greater-than sign" 1.2) {
Screen.Layers("Layer_1").Visible = false;
} else {
Screen.Layers("Layer_1").Visible = true;
}

//JS Active Screen
let ActiveScreenWidth = UI.ActiveScreen.Width
let ActiveScreenHeight = UI.ActiveScreen.Height
Screen.Items("txtBox").Text += "ActiveScreenWidth: " + ActiveScreenWidth + ", ActiveScreenHeight: " + ActiveScreenHeight + "\n\r";

Music from Unicorn Heads- Drifting at 432 Hz • Unicorn Heads - Drifting at 432 Hz

#DerHecht #WinCC #Unified #TIAPortal