graphical interface scaling in indusoft web studio
TRANSCRIPT
![Page 1: Graphical Interface Scaling in InduSoft Web Studio](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/1.jpg)
Graphical Interface Scaling
Webinar
November 29, 2017
![Page 2: Graphical Interface Scaling in InduSoft Web Studio](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/18.jpg)
www.InduSoft.com | [email protected] up keyboard scaling
![Page 20: Graphical Interface Scaling in InduSoft Web Studio](https://reader034.vdocuments.us/reader034/viewer/2022050623/5a6489207f8b9a70568b48e3/html5/thumbnails/20.jpg)
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