Skip to content

iPhone iPod touch skins

Jump to bottom Edit New page
Lieven Hollevoet edited this page Sep 22, 2014 · 1 revision

Table of Contents

NEW - to Misterhouse Version 2.105 is the iPhone or iPod touch interface skins

  • =====this is the setup HowTo note provided by the iPhone interface author.=====
  • and the basic setup was tested by a Linux user.
  • and followed by yet another Linux user (clean up and additions are being added)

Basic Steps

Overview

  1. Requirements - Misterhouse 2.105 or better, a iPhone or iPodtouch, or a firefox or Safari browser.
  2. Move code and a directory into directories where they can be activated.
  3. Create the "Main" group of groups - this drives the "tree structure of the iPhone menus".
  4. Activate the code and reboot.
  5. Test the basic installation.
  6. (optionally) change labels, icons, etc.
  7. (optionally) add more functionality to the iphone.pl perl script.
  8. (optionally) add more functionality to the javascript running on the iPhone or iPodtouch.

Requirements

Of course you need a running Misterhouse Installation at at least version 2.105 or better.The Firefox or Safari browser might become in handy for testing purposes. At this moment the iPhone interface is built around EIB/KNX. More device support will be added.

Internet Explorer //**does NOT display**// the pages properly!

Installation

There are several files included in the Misterhouse 2.105 distribution that need to moved and activated in order for the iphone to work.

  • Copy the directory ~mh/web/iphone (and all its files) into your web directory of Misterhouse. (**Tester comment:** Note this does not seem to overide the files in the mh directory ???? - leaving the mh/web/iphone as the active directory - how to fix? NJC - Just use the http://example.com:8080/ia5/iphone/ URL, perhaps? This step does seem a bit odd.)
  • Copy the ~mh/code/public/iphone.pl into your code directory making sure the security permissions are correctly set for your operating system.
__**Note:**__ When I attempted to restart with the iphone.pl (with no additonal changes) I got this: code Error in user code file /home/mh/data/mh_temp.user_code 
  12/13/10 11:34:24 AM: Global symbol "$EG_Wohnen" requires explicit package name at (eval 860) line 1615.

Global symbol "$EG_Kueche" requires explicit package name at (eval 860) line 1616. Global symbol "$EG_Arbeiten" requires explicit package name at (eval 860) line 1617. Global symbol "$EG_Flur" requires explicit package name at (eval 860) line 1618. Global symbol "$OG_Flur" requires explicit package name at (eval 860) line 1620. Global symbol "$OG_Lena" requires explicit package name at (eval 860) line 1621. Global symbol "$OG_Franka" requires explicit package name at (eval 860) line 1622. Global symbol "$OG_Eltern" requires explicit package name at (eval 860) line 1623. Global symbol "$OG_Bad" requires explicit package name at (eval 860) line 1624. Global symbol "$F_Haustuere" requires explicit package name at (eval 860) line 1625. Global symbol "$F_HWRTuer" requires explicit package name at (eval 860) line 1626. Global symbol "$Kueche_Temperatur" requires explicit package name at (eval 860) line 1627. Global symbol "$Bad_Temperatur" requires explicit package name at (eval 860) line 1628. Global symbol "$Aussentemp" requires explicit package name at (eval 860) line 1629. Global symbol "$Bad_Heizung" requires explicit package name at (eval 860) line 1630. Global symbol "$Kueche_Heizung" requires explicit package name at (eval 860) line 1631. Global symbol "$HeizungBadZwang" requires explicit package name at (eval 860) line 1632. Global symbol "$HeizungKuecheZwang" requires explicit package name at (eval 860) line 1633. BEGIN not safe after errors--compilation aborted at (eval 860) line 4482. Line 1610: # noloop=start Line 1611: my $list_name = ""; Line 1612: my $object = ""; Line 1613: # noloop=stop Line 1614: $gEG = new Group; Line 1615: $gEG -> add($EG_Wohnen); Line 1616: $gEG -> add($EG_Kueche); Line 1617: $gEG -> add($EG_Arbeiten); Line 1618: $gEG -> add($EG_Flur); Line 1619: $gOG = new Group; Line 1620: $gOG -> add($OG_Flur); 

                                                           [FAILED]

code It's pretty easy to fix, just add the missing 'symbols' to your //mht// file (see below for an example of //Kitchen//). I'll add that later, so a bit more work needs to be done with this HowTo.

Groups in Misterhouse

As you might know MH has a sort of groups concept. You can define groups including several other items. The iPhone/iPod Touch visual uses these defined groups. Think of a bulb in the kitchen. You might have something like the following in your //mht// files:

code EIB1, 1/1/0, Kitchen, FF_Kitchen|Lights, code

Here is:

  • EIB1: Type of the Object
  • Kitchen: The Name of the Object
  • FF_Kitchen|Lights: These are the Names of Groups the Object Kitchen is a Member of. In this case a group for the room Kitchen named FF_Kitchen.
Think of other groups for rooms you might have in your installation (e.g..: FF_Room1, FF_Room2, FF_Room3, SF_Room1, SF_Room2, ...) FF stands for First Floor, SF for Second Floor, but this is only an example to give you the idea. Any name will do!

Access these Groups within the iPhone Skin

The principle behind the iPhone skin is that you define a sort of "Tree" with groups and objects on the "Leaves". This Tree is the basis of the Menu you are seeing in the iPhone Skin.

Now the first new thing!

With a patch provided with 2.105 it is possible to define group of groups (where is this patch available?).

To get access to these groups we define one group per floor (gFF, gSF).

  • FFg
    • FF_Room1
    • FF_Room2
    • FF_Room3
    • FF_Room4
    • FF_Room5
  • gSF
    • SF_Room1
    • SF_Room2
    • SF_Room3
    • SF_Room4
    • SF_Room5
You can do this with plain perl code. Creating your own .pl file in your code directory would be a good idea (e.g. groups.pl):

code $gFF = new Group; $gFF -> add($FF_Room1); $gFF -> add($FF_Room2); ..

$gSF = new Group; $gSF -> add($SF_Room1); $gSF -> add($SF_Room2); .. code

In addition to that we add a group Main **(Name is important!).**

code $Main = new Group; $Main -> add($gFF); $Main -> add($gSF); code (**Tester note:** for those users that have followed the floorplan setup approach adding the group //$Property// to the main menu adds all it's subgroups) code $Main -> add($Property); code You might also add to Main groups like Lights, Blinds, and other objects.

Of course the names of the groups are only an example (except for Main!). The principle behind is that you define a sort of "Tree" with groups and objects on the "Leaves". Again this Tree is the basis of the Menu you are seeing in the iphone Skin.

First Success

Almost done! If you do a restart of MH you should see at http://ip:8080/iphone something useable. (note ip is either the ip address of the computer running misterhouse, or the name that resolves to the ip address).

(**Tester Note:** using an iPod Touch the basic functionality is there for menu navigation but the X10 items in a room only display the action for the last item on the list ... some kind of bug, also we need to find a way to add the grouped menu items to the possible selection items)

Further Customization!

If you are gone all the way through up to here you might add some fancy icons, customized labels or other things. Of you go!

One singe line of the Menu

You might get notice of the fact that a line in the menu consists of the Name of the Variable on the left side and the status on the right. However, the name of the Variable (e.g. KitchenLightNorth) is not what your wife would expect in a Visualization.

In principle a Line in the menu consists of 4 elements:

  • Icon: On the left you can add an icon. More on this later.
  • Name: The Name is derived somehow from the Object Name. It is prompt somehow. For example an underscore is substituted with a space.
  • Status: The status like on/off, or a value like 21.4
  • Indicator for next level: If you can get one level deeper you find a ">" at the right of the line.

Icons

The standard MH solution has a very strong (mostly unknown feature) which I use here. You can configure in mh.ini a search path for graphic files. The name of the file can be derived from Type of the Object, Its State, ... . Think of the kitchen light a view lines back.

code EIB1, 1/1/0, Kitchen, FF_Kitchen|Lights, code

MH does a conversion from an *.MHT file automatically into a *.MPH file. The line above results in something like:

code format="perl" $Kitchen = new EIB1_Item('1/1/10',); $FF_Kitchen = new Group(); $FF_Kitchen -> add($Kitchen);

$Lights = new Group(); $Lights -> add($Kitchen); code

You can see that "Kitchen" is an object of the Type "EIB1_Item" and its Name is "Kitchen". Assuming that the light is switched off than MH will search for graphic files in the following order (Note that PNG is only an example, jpeg, gif, etc is also possible).

  • ====kitchen-off.png====
  • ====kitchen.png====
  • ====eib1_item-off.png====
  • ====eib1_item.png====
  • ====off.png====

Optional you can add the following line to your user code.

$Kitchen -> set_icon('Light_FirstFloor');

With this the search path is enhanced to:

  • ====[set_icon-status] light_firstfloor-off.png====
  • ====[set_icon] light_firstfloor.png====
  • ====[name-status] kitchen-off.png====
  • ====[name] kitchen.png====
  • ====[type-status] eib1_item-off.png====
  • ====[type] eib1_item.png====
  • ====[status] off.png====

If you add/rename some icons using that principle you have BOOM - without adding one line of HTML Code - Icons in your Menus.

Name

As already stated the skin uses the name of the objects. This can be enhanced with the method set_label. But remember the kitchen example once again.

With the following perl line in your user code (e.g. labels.pl) you change the Name in the Webinterface:

code format="perl" $Kueche -> set_label('Kitchen Light');

code

Status

If you use an object representing some dynamic values like temperature it might be a good idea to add some info about the value. Think of an object like:

code EIB5, 1/1/1, Temperature_Kitchen, Kitchen|, Temperatures code

It might be handy to get something like "C" or "F" behind it, right? Nothing easier than that.

Just add a line like this in your user code (labels.pl):

code format="perl" $Temperature_Kitchen-> set_label('Kitchen Temp [%.1f]');

code

The part with the brackets is a printf statement and thus extremely powerful.

Currently EIB is supported best

However, other Types should be displayed quite well. I tried to insert some sort of generic code which tries to handle also other type of object. Give it a try. You can enhance iphone.pl somewhere around line 104++ for your own objects.

Page Syntax of these WebApps

If this is not enough for you might get even further, However only with limited support from my end ;).

I am using a sort of framework to create this nice looking iphone like web pages from http://webapp.net.free.fr/ . You can find very useful documentation there.

Using this framework a Web page has the following structure: code 

 <body>
  <div id="WebApp">

    <div id="iHeader">
      ...
    </div>

    <div id="iGroup">

      <div class="iLayer"> ...
        <div class="iMenu"> ...
        </div>
      </div>

      <div class="iLayer"> ... </div>
      ...
    </div>

    <div id="iFooter">
      ...
    </div>

  </div>

Main page

Add a custom sidebar
Clone this wiki locally