Skip to content

Modern Web Interface IA7

Jump to bottom Edit New page
ggodart edited this page Jan 10, 2021 · 30 revisions

Testing it out

Get the master branch from hollie/misterhouse.git, start MisterHouse and navigate to http://<ip>/IA7/

IA7 is now the default, however other releases are still included. The default interface is defined in mh.ini.

INI PARAMETERS

For example to enable IA7 as a default, put the following in your mh.ini

#ia7_enable=all|mobile|none
ia7_enable=all
  • mobile - if using an iPhone or android, open the IA7 interface by default. Since MisterHouse doesn't have a good mobile interface, this might be a good option for some
  • all - enable mobile and if the browser is 'modern' then by default go to IA7.
  • none - disable the IA7 as default. It can still be accessed via the direct URL.

Features

  • dynamically updating print and speak logs
  • buttons change color and state dynamically and in real time
  • If you want to set an object to one of the less common states, press the gear button on the states modal dialog box. All the possible states will be displayed.
  • MisterHouse is now a webapp on an iPad! create a shortcut on the home screen, and if MisterHouse/IA7 is launched from that location it should start full screen.
  • Responsive Dynamic Tables! display information in real-time, with the interface shrinking automatically for mobile devices.
  • Real-time floorplans! Still a bit in progress, and different from IA5 floorplan. Needs a picture (png) for your floorplan, and dynamically show the status of lights, motion sensors, and doors. Image and location scale with the window, so it seems to work on the mobile devices as well.

Customization

The IA7 interface uses the file collections.json to determine the structure of the web pages. There is also a config file ia7_config.json to change settings and behavior. For both files there is an example file to start from located under /data/web in the MisterHouse folder.

The search path for those files is, in descending order of priority:

  • Path declared in $ia7_data_dir in mh.private.ini
  • Path declared in $data_dir/web in mh.private.ini
  • /data/web

It is recommended to make a local copy of the files with your changes. This way you don't loose your custom interface when updating MisterHouse to a new version in the future. See here on how to set this up.

Web page structure

The file collections.json should be somewhat self explanatory;

  • "name" : "text", This is the text that is displayed on the button
  • "icon" : "fa-" or "wi-", fa = font-awesome, can be found here. http://fortawesome.github.io/Font-Awesome/icons/ wi = weather-icons, can be found here. http://erikflowers.github.io/weather-icons/
  • "mode" : "advanced", This hides elements from the general display. To view, click the upper right gear, and select 'advanced' mode. 'Simple' mode hides them again
  • "link" / "external" / "iframe" : link = an ia7 page, external = redirects the browser to an external page, iframe = attempts to load the external content in a frame with ia7 navigation

Each entity needs its own ID number. pretty much all of them could be reused / repurposed, with the following exceptions:

  • 0 : This is the root
  • 500: This collection ID is used to populate the buttons in the gear display. Useful to consolidate all the settings.
  • 600: This entity controls where the 'checking' button is linked to. the checking button will reflect whatever state a MisterHouse object called ia7_status is set to. Example code.

To create 'mixed content' look at sample.shtml in the MisterHouse directory. Future enhancements, be nice to just specify <button entity="MisterHouse object name"> and not worry about the formatting.

After making a change to collections.json you will need to click Refresh (it is not sufficient just to navigate to a new location within ia7).

Web page behaviour and general configuration

See settings and behaviour.

Responsive data tables

You can create dynamically updating tables with the example code below. To see the table: http://<MHIP>/ia7/#path=/display_table?hvac_temps

if ($Startup or $Reload) {
	&json_table_create("hvac_temps");
    my @hvac_headers =  ("Room","Idle","State","Temp","Humid","Alert Low","Low","High","Alert High");
	for my $i (0 .. $#hvac_headers) {
		&json_table_put_header("hvac_temps",$i,$hvac_headers[$i]);
	}
}

if ($New_Second) {
  my $index = 0;
  for my $temp_item (list $Temp_Sensors) {
	
	my $room_name = $temp_item->{object_name};
	$room_name =~ s/\$//g;
	$room_name =~ s/temp_//g;
	&json_table_put_data("hvac_temps",$index,0,$room_name);
	
    my $idleduration = $temp_item->get_idle_time;
    my $idleminutes = sprintf("%d",($idleduration % (60* 60)) / 60);
    my $idleseconds = ($idleduration % (60*60)) % 60;
    my $timeidle = $idleseconds . " seconds" if defined($idleduration);
    $timeidle = $idleminutes . " minutes" if $idleminutes;
    $timeidle = "(unknown)" unless $timeidle;
    $timeidle = "(error)" if ($idleduration > 300);
    &json_table_put_data("hvac_temps",$index,1,$timeidle);

	my $temp_state = state $temp_item;
    &json_table_put_data("hvac_temps",$index,2,$temp_state);
    
    my $temp_deg = $temp_item->measurement;
    &json_table_put_data("hvac_temps",$index,3,$temp_state);
    
	my $humid_state = &get_object_by_name("\$humid_$room_name");
	my $humid_data = "";
	$humid_data = $humid_state->measurement . " %"	if ($humid_state->{object_name});
    &json_table_put_data("hvac_temps",$index,4,$humid_data);

	my $temp_alert_low = $temp_item->token('alert_low');
    &json_table_put_data("hvac_temps",$index,5,$temp_alert_low);

	my $temp_low = $temp_item->token('normal_low');
    &json_table_put_data("hvac_temps",$index,6,$temp_low);

	my $temp_high = $temp_item->token('normal_high');
    &json_table_put_data("hvac_temps",$index,7,$temp_high);

	my $temp_alert_high = $temp_item->token('alert_high');
    &json_table_put_data("hvac_temps",$index,8,$temp_alert_high);

    &json_table_push("hvac_temps");
    $index++;
  }
}

Floorplan

Please see here for how to set up Floorplan. Below is a summary of the main steps involved.

  • Add all the relevant objects to a specific group (say Floor1)
  • Add a fp_location property to the _item_. In order for this to scale, it needs to be a percentage location, so $object->fp_location(10,20) means draw this object at 10% down from the top of the image, and 20% from the left side of the image
  • IA7 Floorplan supports multiple icons per object, (ie a switch can control multiple lights), additional icons can be created by adding more coordinates (i.e. $object->fp_location(10,20,10,30,10,40) will draw 3 icons
  • each icon is controllable, so clicking or touching it will bring up the object modal screen.

Main page

Add a custom sidebar
Clone this wiki locally