Skip to content

TouchUI

Jump to bottom Edit New page
Thomas E.-E. edited this page Nov 21, 2013 · 11 revisions

Description of GreenT UI

GreenT UI Website

Introduction

The GreenT UI is a web-app developed with Sencha 2.0 !JavaScript Framework.

The communication between the GreenT UI and the openHAB runtime is achieved via the openHAB REST API over websockets, HTTP streaming or HTTP long-polling. This allows instantaneous communication, without any negative network impact.

To see what we are talking about, you can directly try it out on our demo server!

Features

  • Runs on Safari, Chrome, iOS, Android OS, other Webkit browsers and systems
  • Instantaneous communication between the GreenT UI and the openHAB runtime.
  • Three types of devices are supported - Phone, Tablet and PC. The app automatically detects the device type and renders the appropriate interface.
  • All widget types are supported, including Switch, Selection (using mappings), Slider, List (using mappings), Text, Group, Image, Frame, Chart, Spinner, Video, Webview.
  • Internationalization (i18n) is supported. All interface texts are translatable. Current translations are: English, Spanish, German and Bulgarian. New translations can be added by editing "settings.cfg" file, located in ${openhab.home}/webapps/greent/.
  • Per device settings:
  1. Choosing default sitemap to load automatically on app start-up
  2. Choosing device type
  3. Choosing interface language
  4. Choosing interface theme
  5. Choosing desired transport protocol
  6. Turn ON/OFF page transition animations (keep "OFF" for for low-end devices)
  • Full support on openHAB security (authentication and HTTPS encrypted connection)
  • 3 different transport interfaces supported - websockets, HTTP streaming and HTTP long-polling. The transport interface is choosen automatically by the app. If the browser doesn't support websockets, it falls back to HTTP streaming or HTTP long-polling for Android 2.3 and below.

Known Bugs

None. Be a discoverer and find some :-)

How to Install

  1. Download the GreenT UI.

  2. Unzip and put the folder "greent" in ${openhab.home}/webapps/.

  3. Install openHAB Exec binding.

  4. Place ${openhab.home}/webapps/greent/greent.items file in ${openhab.home}/configurations/items folder.

  5. If necessary edit ${openhab.home}/webapps/greent/configs/settings.cfg

  6. Point your browser to one of the following addresses:

Notice: You have to replace "server" with the address of the server where openHAB is installed, for example "localhost".

Updates

GreenT UI has built-in update facility. Every time GreenT starts, it checks if a new version is available. You can enable, disable or password protect the access to GreenT update by editing the UPDATES section in ${openhab.home}/webapps/greent/configs/settings.cfg

The update mechanism preserves the config files in config folder, so all configurations made by you stay after the update. However, it overwrites all other files, including themes and translations. This is due to the fact we want to update them. In the future themes and translations will be generated by online service and will be shipped right away as GreenT update. For now if you make changes to translations or make a new translation or theme, please send it to me at mishoboss(at)gmail(dot)com. It will be included in the next build and will be shipped via the update facility.

Before every update, GreenT makes a backup of itself and place it in _${openhab.home}/webapps/greent_backup/* If anything goes wrong, you can always restore the previous version!

Theming

GreenT UI supports interface theming. There are 5 preset themes, but anyone can create his own theme relatively easy. Themes are found under this path:

*${openhab.home}/webapps/greent/themes_

To create a new theme:

  1. Copy the folder named "GreenT" for example. Rename the new folder using latin chars, numbers, but without spaces, for example - "my_theme".

  2. Open ${openhab.home}/webapps/greent/app/themes.cfg

  3. Find the following text: OpenHAB.themes = [ 'GreenT', 'blue', 'red', 'black', 'black-glass' ];

  4. Add 'my_theme' to this list.

Done! We have a new theme, named "my_theme" and you can choose it from the Settings window.

Now we will want to customize the new theme. GreenT UI themes are plain CSS files. But we won't modify the CSS file. It is compressed for best browser performance and thus it's hardly readable by humans. Sencha Touch uses SASS language (Syntactically Awesome Stylesheets) for CSS generation. CSS files are generated by a tool called Compass. It's a Ruby GEM, so you will need installed and configured Ruby (Mac users have it out of the box). Please, google for how to install Ruby and Compass for Windows or Linux.

We assume you have working Compass now. Open the file ${openhab.home}/webapps/greent/themes/my_theme/scss/style.scss

Under "THEME SETTINGS" are found the SASS variables used in this theme. You can modify them, as well as add other SASS variables. A full list of all Sencha Touch SASS variables and mixins is found HERE.

After you're done with modifying the style.scss file, it needs to be compiled to CSS. To do that, just run ${openhab.home}/webapps/compass/themes/my_theme/scss/compile.sh script (for Linux and Mac. I didn't succeed to compile SASS under Windows, seems there is a path issue with Sencha SCSS files). You will see something like this:

Compiling SCSS...
overwrite style.css
---- DONE! ----

And done means DONE! The new theme is compiled and ready to be used.

Pictogram Icons

GreenT UI supports pictogram style icons. These are PNG icons used as masks. There is no official openHAB pictogram icon set yet, but there are plans to provide one soon. To enable pictogram icons, open ${openhab.home}/webapps/greent/configs/settings.cfg and find the text OpenHAB.usePictogramIcons = false;. Change it's value to true, save and refresh the browser.

Interface translations

GreenT UI supports full internationalization. All interface texts can be translated to any language.

To add a new translation:

  1. Open ${openhab.home}/webapps/app/translations.cfg

  2. Find the following text: {{{ OpenHAB.i18n_strings[= { language_name: 'English',

     // -------- Interface texts ---------
 back: 'Back',

    interfaces: 'Interfaces', ... } }}}

  3. Copy it somewhere below and edit the texts.

IMPORTANT: You have to change the language signature in the first line. For example OpenHAB.i18n_strings'en' becomes _OpenHAB.i18n_strings[Don't forget to change language_name too.

Screenshots

Samsung Galaxy Note:

![](http://m-design.bg/greent/note1_small.png]

Windows 7 with Google Chrome:

Add a custom footer

Installation

Community

Features

Samples

Release Notes

Clone this wiki locally