Graphical Interface Scaling in InduSoft Web Studio

Graphical Interface Scaling

Webinar

November 29, 2017

www.InduSoft.com | info@InduSoft.comAgenda

• Reasons to scale your screen• Understanding Aspect Ratio• Project Resolution vs. Screen Resolution• Auto Screen Scaling check box• Convert Resolution• Manual Change of Screen Attributes• Open() optional parameters• Span Multiple screens, SetViewerPos()• VK scaling

www.InduSoft.com | info@InduSoft.comPlease Vote!

Please Cast Your Vote Here!

www.InduSoft.com | info@InduSoft.comReasons to scale

• Machine builders can offer “Standard”, “Low-end”, and “High-end” offerings

• Obsolete or failing hardware• Large production monitoring or Andon• Video Wall (matrix)• Mobile view (example, tablets, phones)

www.InduSoft.com | info@InduSoft.comUnderstanding Aspect Ratio

• Common Aspect Ratios• 4:3 (1.33:1)

• 320x240• 640x480• 800x600• 1024x768

• 16:9 (1.78:1)• 1600x900• 1920x1080 (1080p)• 2560x1440• 3840x2160 (4K)

• Others See “Resources”

4:3

16:9

640/480 = 1.334/3 =1.33

1920/1080 = 1.7816/9 = 1.78

www.InduSoft.com | info@InduSoft.comDisplay Resolutions

Source: https://en.wikipedia.org/wiki/File:Vector_Video_Standards4.svg

www.InduSoft.com | info@InduSoft.comResources

Best resolution to choosehttp://www.indusoft.com/blog/2011/03/28/what-is-the-best-resolution-for-a-project-in-indusoft-web-studio/

1. Native, if you know it2. Aspect ratio, if you know it3. Popular

https://www.w3counter.com/globalstats.php

Aspect Ratio blog posthttp://www.indusoft.com/blog/2013/10/01/aspect-ratios-and-your-indusoft-web-studio-project/

Multi Monitor Samplehttp://www.indusoft.com/Products-Downloads/SampleApplications?EntryId=1070&Command=Core_Download

http://www.indusoft.com/Documentation/Technical-Notes?EntryId=955&Command=Core_Download

www.InduSoft.com | info@InduSoft.comProject Resolution vs. Screen

Resolution

Project Resolution Screen

Resolution

Can’t change in GUI

www.InduSoft.com | info@InduSoft.comProj vs. Screen vs Container

5 x 5

Project Resolution

5 x 5

Screen Resolution

5 x 5

Container Resolution

www.InduSoft.com | info@InduSoft.comAuto Screen Scaling

• Enlarges (or shrinks) keeping aspect ratio until it fits the container (bottom or right side)

• Project – Viewer (Local Viewer and Secure Viewer)• Thin Clients different check box

• Web Settings (Web Thin Client)• Graphics – Thin Clients - Mobile Access – Global Settings (SMA)

www.InduSoft.com | info@InduSoft.comProj vs. Screen vs Container

5 x 5

Project Resolution

5 x 5

Screen Resolution

10 x 10

Container Resolution

Auto Screen Scale OFF

5 x 5

www.InduSoft.com | info@InduSoft.comProj vs. Screen vs Container

5 x 5

Project Resolution

5 x 5

Screen Resolution

10 x 10

Container Resolution

Auto Screen Scale ON

Project Resolution is only used withAuto Screen Scaling

www.InduSoft.com | info@InduSoft.comConvert Resolution

• Suggested use, when you want to change the aspect ratio

• May need additional clean up

• Check Box, Keep original aspect ratio for each object• Resize objects, keep aspect ratio, changes spacing

www.InduSoft.com | info@InduSoft.comManual Change of Screen

Attributes

• Change the screen dimensions

• Use to make screen groups

• Alter an individual screen for use on a particular device

• Size/position screen to fill area left by Auto Screen Scale

www.InduSoft.com | info@InduSoft.comIf changing Aspect Ratio

1. Make backup of project2. Change resolution of monitor (depends on graphics card)3. Use Auto Screen Scale. Fill in “bar” with optional screen/objects4. Convert Resolution5. Redevelop screens. Can copy and paste

www.InduSoft.com | info@InduSoft.comOpen() optional parameters

• The Open() Function supports optional screen coordinates, could be different than original size

• Open(strScreenAndProperties,optNumX1,optNumY1,optNumX2,optNumY2,optNumResizeFlag,optNumID,optStrMnemonicList)

• Useful for popup and dialog

www.InduSoft.com | info@InduSoft.comSpan Multiple Screens

• SetViewerPos()• SetViewerPos(numLeft,numTop,optNumWidth,optNumHeight)• Don’t execute in Startup Script• Use Graphics Script, OnStart()

1920x1080 1920x1080

• Start another Viewer• WinExec() in Background Script• View.exe in Graphic Script “Sub Graphics_OnStart()”• SetViewerPos

0, 0W = 3840

H = 1920

www.InduSoft.com | info@InduSoft.comPop up keyboard scaling

www.InduSoft.com

info@InduSoft.com

Q & A

www.InduSoft.com | info@InduSoft.com

Email(US) info@indusoft.com(Brazil) info@indusoft.com.br(Germany) info@indusoft.com.de

Support support@indusoft.comWeb site

(English) www.indusoft.com(Portuguese) www.indusoft.com.br(German) www.indusoft.com.de

Phone +1 (512) 349-0334 (US)+55 (11) 3293-9139 (Brazil)+49 (0) 6227-732510 (Germany)

Toll-Free 877-INDUSOFT (877-463-8763)Fax +1 (512) 349-0375

Contact InduSoft Today

Germany

USA

Brazil

www.InduSoft.com

info@InduSoft.com

Thank you!