Developing with HTML5 for POEM

Tweet Like

To HTML5

As applications expand into the mobile phones’ and devices’ market, languages, runtimes and technologies have been developed to complement this shift from stationary platforms to portable and dynamic form factors. One of these runtime technologies is Adobe* Integrated Runtime (AIR*) software, which was used to develop the original POEM application described below.

Energy efficiency has become an area of interest in many industries and academia in which end-users are an integral part of improving the usage model in the work place. POEM (Personal Office Energy Monitor) has been developed to handle end-user environment feedback where personalized energy usage and user comfort settings are displayed for providing complete awareness between a person and the building. The application collects user input and informs the building manager immediately, so corrective action can be taken. POEM is part of the Eco-Sense Buildings (ESB) project, whose objective is to provide IT specialists with the necessary data to maximize energy efficiency as well as their clients’ safety and comfort. The two key concepts of POEM are:
1. To leverage IT-based sensing infrastructure to provide holistic sensing of energy consumption, ambient environment, and user activities;
2. To provide personal eco-feedback to give meaningful, personalized and intuitive insights to inform users and encourage them to adopt energy saving behavior.

The Original POEM App

POEM AIR

Chart AIR

Visual metaphors are a prominent aspect of the POEM user experience to illustrate the meaning of data in a simple manner. Various phases of a flower’s lifespan and bubbles are used to interpret reported data and results for a more engaging and effective way in contrast to only showing numerical values. A flower phase is used to correlate the relationship between the energy consumption for the last seven days and weekly target value. Trending statuses are represented by different colors of bubbles based on the comparison of the running daily snapshot of energy consumption with the mean of comparable snapshots for the last seven days.

The overview screen shows the office energy consumption at the center as the focus area. Personal ambient data such as temperature, humidity and light is also viewable for their primary (personal computer) location. In the upper right corner of the screen, the “I Feel” segment allows users the ability to give feedback to the building manager of their personal comfort settings from cold to hot on a seven point scale. The seven point thermal scale is based on the desired warmth on the ASHRAE scale. This data is collected together with users over the same cooling or heating zone for the build manager to adjust temperature set points.

The singular detailed view behind each item of focus shows the personalized graphical representation of averages for each day of the previous week, as well as comparable information, such as department, floor and building data. The energy consumption data is represented as a series of bar graphs and colored markers for an intuitive review of the week. A horizontal line is created when setting a consumption target for any item of focus (Office, Personal Computer, Printer, and Pluggables). The target dictates that the status of the energy consumption rate compared to the user’s set expectation.

For building rich internet applications with Adobe* Flash*, Apache* Flex*, HTML and AJAX (Asynchronous JavaScript* and XML) that can be run as desktop applications or on mobile devices, Adobe Systems has developed a cross-operating system runtime called Adobe* AIR*. For desktop systems, Adobe* AIR* is only supported on Microsoft* Windows* and Apple* OS X systems. But on mobile platforms, Google* Android, Apple* iOS* and Blackberry* Tablet OS are included. ­ For iOS, apps built with AIR install a version of the runtime necessary for the application instead of a dedicated version for the entire system. In order to package apps for use on desktop or mobile system, the AIR ADT (AIR Developer Tool) command line tool is required to produce AIR packages, EXEs, DMG installer files along with APK and IPA files. Applications are written in MXML and Adobe* ActionScript*. The tools used in creating Adobe* AIR* apps are Adobe* Dreamweaver*, Flash Builder*, Flash* Professional and NotePad or similar text editors.

HTML5

As web standards progress to provide a wider support of features, HTML5 represents this shift into the world that was only accessible through plug-ins. HTML5 is the fifth revision of the HTML standard published as a candidate recommendation by World Wide Web Consortium (W3C*). The main objective of HTML5 is to provide common source for HTML and XHTML which was developed to make HTML more extensible with data formats such as Extensible Markup Language (XML).

HTML5 introduces various new syntactical tags such as <video>, <audio>, and <canvas>. With these tags, dependence on proprietary plug-ins, APIs and software platforms like Adobe Flash are avoided when designing web content to handle multimedia. Scalable Vector Graphics (SVG), Cascading Style Sheets (CSS3), and Mathematical Markup Language (MathML) tags are supported to expand the features of HTML development. The canvas element makes it possible to create 2D drawings with HTML5 through scripting with JavaScript. Some of the other features introduced are media playback, offline support, drag-and-drop, web storage, Geolocation, and HTML5 file API. HTML5 is an open standard that allows developers to write once and run anywhere even on mobile devices. This cross-platform approach greatly increases a developer’s total potential audience while providing users a more consistent experience across different screen sizes. The next implementation of POEM was developed with features of HTML5 in mind.

The HTML5 Version of POEM

POEM HTML5

Chart HTML

The initial idea of implementing POEM end-user application solely with HTML5 was to investigate if an open cross-platform and cross-browser perspective was even possible without Adobe* software tools. Google* Chrome*, Mozilla* Firefox*, Microsoft* Internet Explorer*, Opera*, and Apple* Safari* all support most of the specifications for HTML5 and are increasing use with every update. Along with focusing on portability, the design layout of the application was based on a responsive design. With the growing number of mobile devices and mobile computing, inclusion of a layout for tablets as well as phones was of interest.

In the development process for creating this version of POEM, the only assets that were reused were the image files. Due to the dependence on Adobe* ActionScript*, Flash* files and minimal use of html, many of the files were rendered unusable unless writing primarily an Adobe* Flash* application. Supplementing for this omission in this current version, CSS3 features were used in regards to styling text, transitions and the containment bubbles.

#tag-id{ border:1px solid #467D0B; background:#DAF0E9; background: -moz-linear-gradient(top, #DAF0E9 0%, #FFFFFF 100%); background: -webkit-linear-gradient(top, #DAF0E9 0%, #FFFFFF 100%); background: -o-linear-gradient(top, #DAF0E9 0%, #FFFFFF 100%); background: linear-gradient(top, #DAF0E9 0%, #FFFFFF 100%); /*……*/ border-radius:25px 25px 25px 25px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; }

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Scalable Vector Graphics (svg) were used in creating simple dividers between the bubble’s title and contents.

<svg width="280" height="5"> <line x1="0" y1="0" x2="280" y2="0" fill="none" stroke="pink"></line> </svg> 

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

As the user experience was being recreated with HTML5, a few changes were made to the design to increase simplicity and intuitiveness. The “I Feel” section was expanded by default and requires one click as opposed to the original three click process of submitting personal comfort feedback. Notification boxes were implemented unobtrusively to provide details to the user as an action is taken or as a helper. One of the missing elements in terms of user interaction was that user’s input feedback was minimal but the implementation of notification box made that clearer. One of the notable aesthetic changes is the rounding of all of the content bubbles for uniformity which was implemented with CSS border-radius property. With these changes, the source code is more portable and reusable for future plans.

Using the Intel® XDK to Develop the POEM HTML5 App

During the development process of the POEM HTML5 end-user implementation, the Intel® XDK was used to write, test and emulate the application. The goal for using this tool was to write the application in a manner that would be adaptive to run on a PC, tablet, and even a smart phone. With the Intel® XDK, developers can “write it once, deploy to many.”

XDK Src Editor

One of the key features of the Intel® XDK is the source editor. The source editor is a simple text editor program that provides syntax highlighting for programming languages such as HTML, XML, JavaScript, CSS, CoffeeScript, PHP, Ruby, Perl, Python as well as C/C++, Microsoft Visual C#, and Java* languages. Other features available are text coloring themes, word wrapping, and line number label. The editor presents a basic user experience similar to software programs like Notepad++.

XDK Emulator

Another prominent feature of the Intel® XDK is its Device Emulator. After uploading or constructing your source code for your HTML5 project, a variety of devices can be selected to view the look and feel that application may present to the end user at various form factors. The Device Gallery below contains smart phones, tablet and Intel Ultrabook® skins. When viewing the application in any skin, actions can be taken to exercise the app’s user interface.

XDK Emulation panels

The Device Emulator screen for mobile devices presents users with the ability to insert accelerometer values on x-, y- and z axes as well as view flat, title of axis and playback of capture values. Data Connection is simulated with the emulated device connected to Wi-Fi, 3G or none. Geolocation data can also be feed to your application to simulate GPS usage. Device Orientation is essential in user interaction since the variation in screen real estate provides flexibility with the user interface (UI) design.

App Tester

The Intel® XDK also bridges the gap to real world interaction through the App Tester app. This app is available from iOS App Store* and Google Play* for both smartphones and tablets. The app allows users to test their application within the confines of an actual device in their possession to gain a more accurate user experience position. With the App Tester mobile app and the Device Emulation screen, user experience can be visualized and optimized for the best usage.
Apple iOS* AppStore- https://itunes.apple.com/us/app/app-lab/id395691569?mt=8
Google Play* - https://play.google.com/store/apps/details?id=com.appMobi.applab&feature=search_result#?t=W251bGwsMSwxLDEsImNvbS5hcHBNb2JpLmFwcGxhYiJd

App Dev Center

The App Dev Center provides a Control Center resource for accessing a free packaging service that allows developers to build HTML5 and Adobe PhoneGap* apps for iOS, Android, Windows 8, Windows Phone 8*, Tizen*, Amazon*, Facebook* and other app stores. The Control Center also provides a New App wizard that presents development paths with App Starter, App Framework kitchen sink demo app, XDK Game Dev Mode, Sample App Gallery, or even uploading a preexisting app. The App Starter is a drag and drop tool that allows developers to create a simple app that sets up pages and navigation with App Framework UI components. App Framework is an open source mobile framework. The three key features of the App Framework 2.0 are:

  • A query selector library with syntax similar to jQuery*
  • A UI/UX library that delivers high performance
  • Plug-ins

The Intel XDK Game Dev Mode offers developers the tools to create a game app with ImpactJS and App Game interfaces (AGI). The Sample App Gallery showcases various apps that are available for using as a template for your app. The POEM project was initially uploaded to the Intel XDK since preexisting graphical assets from the original Adobe AIR version were needed for this implementation.