Top Banner
Graphical Interface Scaling Webinar November 29, 2017
21

Graphical Interface Scaling in InduSoft Web Studio

Jan 21, 2018

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Graphical Interface Scaling in InduSoft Web Studio

Graphical Interface Scaling

Webinar

November 29, 2017

Page 2: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected]

• 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

Page 4: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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)

Page 5: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 6: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] Resolutions

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

Page 7: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected]

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

Page 8: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] Resolution vs. Screen

Resolution

Project Resolution Screen

Resolution

Can’t change in GUI

Page 9: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] vs. Screen vs Container

5 x 5

Project Resolution

5 x 5

Screen Resolution

5 x 5

Container Resolution

Page 10: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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)

Page 11: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 12: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 13: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 14: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 15: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 16: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected]() 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

Page 17: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] 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

Page 18: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected] up keyboard scaling

Page 19: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com

[email protected]

Q & A

Page 20: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com | [email protected]

Email(US) [email protected](Brazil) [email protected](Germany) [email protected]

Support [email protected] 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

Page 21: Graphical Interface Scaling in InduSoft Web Studio

www.InduSoft.com

[email protected]

Thank you!