Alternative Interfaces

The user interface, which is fairly frugal in the eyes of many users, has been hotly debated within the FHEM scene for years. Rudolf Koenig, the founder of FHEM, was never really interested in creating a sexy user interface. Besides changing the foreground and background colors, and changing the logo, you have very few options for customizing the user interface.

A Floorplan extension (Figure 3) was created to map out FHEM objects on a 2D floor plan, visualize status messages, and let users output switching commands. As the use of mobile devices grew, however, Floorplan was marginalized due to its less than responsive design.

Figure 3: The FHEM floor plan offers users a 2D visualization.

smartVISU

FHEM supports smartVISU, the intelligent "visualization framework for better home experience," which was originally designed to create HTML-based visualizations for home automation based on the commercial KNX system.

You can map many simple elements, such as dimmers or buttons, but also more complex components, such as a comprehensive heating control system. Users can create individual pages for rooms using standard HTML expressions. The smartVISU framework provides tags that are embedded in an HTML structure to establish a connection between the visualization and the smart home devices set up in FHEM.

In order for FHEM integration to work, some preparations have to be made on the software side. These preparations include installing the required packages – including a web server, which is usually Apache 2 (Listing 4, lines 1 and 2). In addition, you need to download smartVISU (line 3), install the files in the /var/www/smartvisu/ directory, and set the required user permissions. At the FHEM command line, you can then finally install the module and transfer it to the configuration with a define command (Listing 5).

01 $ apt-get update
02 $ apt-get -y install php5 libapache2-mod-php5 apache2 git
03 $ git clone https://github.com/herrmannj/smartvisu-cleaninstall.git

01 update force https://raw.githubusercontent.com/herrmannj/fronthem/master/controls_fronthem.txt
02 define fronthem fronthem

Now you need to look at the visualization elements that represent the devices contained on the room pages. For each room, you create an HTML file, which in turn is stored in the rooms_menu.html file (Figure 4). The individual devices are then entered in rooms.html as the block content. The syntax is shown in Figure 5 using a switch as an example.

Figure 4: The smartVISU files have to be included in rooms_menu.html.

Figure 5: This code visualizes a switch in smartVISU.

It takes some hard work to map the desired objects from FHEM to smartVISU. Anyone who is not deterred by this, and is also prepared to tackle smartVISU's installation and configuration overhead, will be rewarded with a smart user interface. The interface even works extremely well on mobile devices. Step-by-step instructions (in German) are available on the web [3].

TabletUI

Meanwhile, TabletUI (Figure 6), another extensive visualization environment based on HTML, is enjoying increasing popularity. Similar to smartVISU, TabletUI lets users map information in a smart way. The GUI's focus, which can display a multitude of functions simultaneously, is – as the name suggests – tablets.

Figure 6: TabletUI offers an attractive alternative user interface.

If you want to use TabletUI, first update the FHEM packages using the FHEM console (Listing 6, line 1) and then import the TabletUI module (line 2). You now need to define all the desired elements in an HTML file. The ./www/tablet/index.html file is primarily used for these element definitions.

01 update all
02 define TabletUi HTTPSRV ftui/ ./www/tablet/ TabletUI

The sample file index-example.html, which you can copy and save as index.html, is conveniently located in the same directory. This makes it possible to test the functionality more precisely.

Familiarize yourself with the syntax in order to establish the necessary links with the elements you wish to integrate from FHEM. In particular, the widgets in the TabletUI user interface need to be populated with the desired values (data-get), and the switching commands need to be sent to FHEM (data-set).