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

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