26
InduSoft.com [email protected] Using InduSoft Web Studio to create HTML5 SCADA / HMI Graphics

Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

Embed Size (px)

DESCRIPTION

Coming soon in InduSoft Web Studio 7.1 + SP2, InduSoft will be launching an improved Studio Mobile Access (SMA) Web Thin Client, which will allow users to create mobile SCADA/HMI applications with fully functional screens, using HTML 5.

Citation preview

Page 1: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Using InduSoft Web Studio to create

HTML5 SCADA / HMI Graphics

Page 2: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Agenda

Introduction Benefits HTML5 Installation Walkthrough Q&A

Page 3: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Introduction

Page 4: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Introduction – Lourenço Teodoro

VP of Engineering @ InduSoftI have been working for InduSoft in Austin since 2002. I currently manage the InduSoft worldwide development team.

Page 5: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Benefits

Page 6: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

What does it mean to live in a Mobile World?

Rich user experiencePC applications do not work well on Mobile Devices. Creating solutions for mobile devices that are exactly the same as their PC counterparts usually causes disappointment and frustration. A mobile device solution has to understand the mobile device requirements and provide functionality suitable for technologies such as multi-touch, the lack of mouse and keyboard, etc.

Platform AgnosticYou do not have a complete solution unless it works across the major operating systems, i.e., iOS, Android, and Windows. While the PC world is still dominated by Microsoft, Mobile devices offer a completely different challenge. Your solution must be ready for this challenge.

Cost / BenefitTo have a solution consistent across different platforms and situated for the devices you are using is great. But if the effort to implement the solution is too high it defeats the entire purpose. A Mobile ready solution should make these differences transparent and require as little effort as possible.

Page 7: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

How does InduSoft solve the problem?

Page 8: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

HTML5

Page 9: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Browser History

1993: MosaicEven though not the first browser in history, the Mosaic was the first easy to use and multi-platform browser. It was also the first browser to display images inline with document’s text.

1994: NetscapeBy 1996 Netscape had 86% of the browser market. First browser to introduce JavaScript and SSL.

Page 10: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Browser History

1995: Internet ExplorerMicrosoft includes the browser in the Windows 95 operating system and by 2002 takes 95% market share.

2003-2004: Safari and FirefoxInternet Explorer still dominates the market, but Safari and Firefox now offer real competition. Firefox has 19% Market Share.

Page 11: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Browser History

2008: Chrome is launchedGoogle launches the Chrome browser. By 2011 Chrome had over 17% market share.

Page 12: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Browser History – Current Market

Page 13: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Browser History – Current Market

Page 14: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Mobile Devices – iPhone and Android

2007: iPhoneiPhone changes the game and Desktop is no longer the only way to access the internet. According to International Data Corporation, by 2015 mobile devices will take over Desktop as the preferred way to access internet.

2008: Android PhoneGoogle launches the Android phone

Page 15: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Mobile Devices – Tablets

2010: TabletsiPad offers a new way of interacting with computers. At an accessible price it becomes a threat for the PC. Android tablets do not take long to appear and are released in the same year.

2012: Windows 8Microsoft launches Windows 8 and try to gain space on the tablet market.

Page 16: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Mobile Devices vs PC

Page 17: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

HTML5An

y D

evic

eAn

y Br

owse

rAn

y Pl

atfor

m

Windows Android iOS

IE Chrome Safari

Desktops Notebooks Tablets Phones

SMAStudio Mobile Access

Page 18: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

What is HTML5?

Transformations

SVG Tag

Canvas

Gradients

Animations

Sockets

Page 19: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

HTML5 progress

Page 20: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

What should you know about HTML5?

Page 21: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Installation

Page 22: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Step 1: Internet Information Services

Page 23: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Step 2: Install Mobile Access

Page 24: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Walkthrough

Page 25: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Mobile Access Requirements

Android iOS Win 8(V 4.0.3)Ice Cream Sandwich

(V 4.1)Jelly Bean 6.1.3

Page 26: Using InduSoft Web Studio to Create HTML5 SCADA/HMI Graphics

InduSoft.com [email protected]

Q&A