ICONICS Worldwide Customer Summit - © 2013 Windows and HTML5 Solutions for Smart Devices André Lange Roberto Raimondo Guest Speaker: Joshua Davidson, Progression

ICONICS Worldwide Customer Summit - © 2013

Mobilize

Windows and HTML5 Solutions for Smart DevicesAndré LangeRoberto Raimondo

Guest Speaker: Joshua Davidson, Progression

MC301


Customer PresentationProgression

Live Demonstration

MobileHMI IntroductionFeaturesBenefits

Agenda


Cloud

Post-PC Era

Mobile Devices

Information and Displays accessed from anywhere with smart-phones or tablets

PC to Thin Clients

Tethered to mobile Devices

Wired to wireless

Client-Server to cloud-based

Centralized Deterministic to Distributed peer-to-peer based

Machine-to-machine (M2M)

Robotics & smart Machinery

Digital Technology Shift


Increased throughput using existing people and resources

Improved operating efficiency

Boost productivity

Reduced costs

Supports BYOD

More Functions

Exploding commercial use generating industrial applications growth

Mobile Devices

PC

BrowserPhone


By 2020…By 2016…

1/3 of worldwide population connected through 20 billion devices

…plus new connections to a broad range of

devices

An explosion in connected personal devices…

Avera

ge d

evices

per

per

son

Pop

ulat

ion

(billio

ns)

Con

nect

ed d

evices

(billio

ns)

0

20

40

60

2020

2010

50b

7.6b6.6

Source: Microsoft


Clod

anytime, anywhere, on any device.

Access visualization and information

Alarms KPI´s Trends Graphics


Introducing: MobileHMI

Linux/Mac W8 Phone Windows 8 Surface Pro/RT iPhone/iPad Android

WIFI/3G/4G/Cable


Form FactorsPhone Aspect Ratio Resolution

iPhone 4S 4:3 960 x 640

iPhone 5 16:9 1136 x 640

Galaxy S3 16:9 1280 x 720

Lumia 920 15:9 1280 x 768

Tablet Aspect Ratio Resolution

iPad 4:3 1st/2nd - 1024 x 768 3rd/4th - 2048 x 1536

Surface 16:9 Standard - 1366 x 768Pro – 1920 x 1080

Galaxy Tab 16:10 10.1 - 1280 x 800


Download MobileHMI

Connect to your ServerGo to Store

Easy Set-Up

Stores


Immediate Access

Total Device independent

Runs in every browser

Install the native APP

Connect to a demo server

Announcing: mobilehmi.com


HTML5 clients run in Browsers on desktops Browsers on mobile

devices Nothing to install

HTML5 Apple and Android Stores

iPhone, iPad, Android phones and tablets, and others

Pros: download AppHub from the app store, customize it, use device capabilities

Native HTML5 Apps

HTML5 Browser vs. HTML5 Native App


Native application to download and keep locally

Entry point to projects

Layout support

Automatic selection of the best fitting layout

Smart Tile Technology

AppHub is a native WinRT and HTML5 app available in the stores

Why AppHub?

MobileHMI User Interface


Windows / HTML5 Architecture


Win 8 GUI Style Desktop

Win 8 Standard

New API with Windows 8 Runs Win 7 desktop apps &

Win 8 GUI style apps Metro style designed for

mobile apps XAML with .NET with VB

and C# HTML with JavaScript

For Microsoft Devices

Windows 8 Architecture


World Wide Web

Consortium (W3C)

HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C).

For Any Device

Any Glass Technology


Why HTML5?

Objective COpen GL / ES

JavaOpen GL / ES

JavaOpen GL / ES

C#XNA


Text 4Text 3

…combined with Client – Server approach

HTML Scalable Vector GraphicsVideo with streaming3D and Sound

Technology


MobileHMI Architecture


Client – Server Architecture

On Premise Cloud

Visualization Server

HTML5 Clients


Live Gauge = 2 Circles + Polygon + Rotation

To draw a gauge we need 2 circles

and 1 polygon

To update the gauge we need only 1 rotation

WIFI/3G/4G/Cable



On Premise Cloud


HTML5 Clients


Same principles apply to nicer objects, too

WIFI/3G/4G/Cable



On Premise Cloud


Client Device

MobileHMI Server

Client

Server

AnyGlass Server

MobileHMI client

WebViewAnyGlass

Client


Q1 Q4Q2 Q3

2015

Q1 Q4Q2 Q3

2014

Q1 Q4Q2 Q3

2013

Q1 Q4Q2 Q3

2012

MobileHMI Roadmap

DECEMBER 2012

SEPTEMBER 2013 V 10.85

Q1/2014

V 10.8

V 11

Q4/2014

SPC/SQC Charts

Windows 8.13D DisplaysAnalytiX ChartsRedundancy SupportImproved scalabilityAssetWorX Support

Only GENESIS32Windows CE 5 (Phone 6)Pocket GraphWorXTMPocket AlarmWorXTMPocket TrendWorXTMPocket VCRWorXTMPocket DataSpyTM

PocketGENESIS

V 10.71

Windows 7 Phone

Any GlassHTML5Native Windows 8 RT GUIWindows 8 PhoneApp-HubWindows StoreGoogle Play StoreApple StoreMobile GWX AppMobile TWX AppMobile AWX App


Live Demonstration


Industries for MobileHMI


Abercrombie & FitchMobile allows a gateway for a new population of people, interacting virtuallyto produce feedback and trackable data.

INDUSTRY Leaders using Mobile Data Now

Corporate Engineering-Wrigley

Mobile applications free

up resources for additional

productivity.

American Axle“Mobile” is the natural evolution of the virtual experience.

Teurmo MedicalUsing iPads for consistency in communication-talking points, sell sheets, presentations, sharing data, etc.

DematicMobile data

offers companies a very valuable

monetization landscape.

City of Holly, MI“Mobile” presents operators with a new medium to interact with the system.


MobileHMI Performance Tips


• Can greatly reduce file size• Faster download of the file over the network• Files are cached on the device uncompressed• So no need to decompress every time the display is

loaded

Use “compressed” displays (.gdfxpz)

Performance Tips


• Use smallest possible PNG/JPG images• Don’t import huge images and stretch them down in

GWX64• By default, this still stores all the image data

(embedded) or causes a larger external file to be downloaded (referenced)

• so the full size image must be loaded into memory and scaled down on-the-fly

• Use an external photo app to reduce image dimensions• Or, for embedded images, do it directly in GWX64: resize

the image smaller, right-click, convert to image – will permanently reduce the image size

• For JPG, adjust the quality of the encoding to reduce file size.

Use smallest possible PNG/JPG images

Performance Tips


• Mobile devices are powerful, but they are not desktop PCs

• Don’t expect the same performance on a smart phone as on a desktop PC

• Fewer objects = less graphics to load and render = faster

• “Make every object count”

Use a few objects as possible in a display

Performance Tips


• If you don’t need a high data rate, set the ScanRate in GraphWorX to a larger value

• Reduce network/server usage

Reduce the Scanrate

Performance Tips


• If it works well on a weak device, it will be even better on a powerful device.

• Ex. Test on Surface RT (ARM), it should run great on Surface Pro (Intel)

Test on the weakest device you expect to use

Performance Tips


Customer Presentation


? Q&A Analyze MobilizeVisualize


1st Place: Surface Pro

2nd Place: Surface RT

3rd Place: Surface RT

Take the challenge and take the quiz!

Take the quiz at end of each breakout. Top Scores can win a Microsoft Surface Pro or Surface RT Tablet.

Microsoft Surface Pro & Surface RT Prizes

Play to Win at ICONICS 2013 WWCS!Each breakout helps achieve points toward

winning


Thank You, Sponsors!

PLATINUM PARTNERS

GOLD PARTNERS

Visit our Partner Expo!


Thank you! Analyze MobilizeVisualize

Documents

ICONICS Worldwide Customer Summit - © 2013 Windows and HTML5 Solutions for Smart Devices André Lange Roberto Raimondo Guest Speaker: Joshua Davidson, Progression