Skip to content

Customising Web

Jump to bottom Edit New page
ggodart edited this page Jan 5, 2021 · 3 revisions

If you want to just update parts of the default web interface, use this mh.ini parameter to point to your own dir:

html_alias2_ia7 = /misterhouse/web/ia7

Then override just the members from the default mh/web/ia7 directories that you want to change. For example, to override the security menu, copy mh/web/ia7/security/menu.html to /misterhouse/web/ia7/security and modify. The other files will still be picked up from the default distribution directories.

You can write your own Web page interface. The examples under mh/web are frame html files that dictate the shape and positions of various mh-generated html frames.

You can use the html_root and html_file mh.ini parameters to point to the directory and default web page. The html_default parameter is the member name used when the URL points to a directory.

The html_style mh.ini parameter points to a style sheet that will be loaded for all MisterHouse-generated pages. Style sheets allow default control of colors and fonts.

There are other, html_* parameters in the mh.ini file to control how the auto-generated html data looks. For example, you can control table sizes and auto refresh rates. See the mh.ini file for more info.

If you want to enable MsAgent support, use the mh.ini html_msagent_script* parameter. MsAgent allows remote IE web browsers to do TTS and VR on the remote box. Note, you can do this even if you are running MisterHouse on a linux box as long as your remote box is running IE. To enable, add the new mh.ini html_msagent_script* parameter that points to a mh/web file with the agent code (currently only Jeff's miniJeff agent is available). Then click on the MSAgent checkbox at the top of the Web menu to turn him on or off.

IE, by default, will run each command only once, unless you change this setting: Tools, Internet Options, General, Settings button on Temporary Internet Files, under "Check for new versions of stored pages" select the option "Every visit to the page."

The web Items and Groups displays will use icons to indicate the item state. Icons will be searched for in the mh/graphics directory according to the item icon method, the item name, the item state, and the item type. For example, given this code:

    $fountain = new X10_Appliance('C3');
    set_icon $fountain 'water';

The search order for the ON state will be:

    water-on.gif
    fountain-on.gif
    x10_appliance-on.gif
    on.gif

The web Category display will try to match icons to Voice_Cmd items using the icon method, item name, voice command text, and filename. For example, given this code from the member internet_data.pl:

 $v_set_clock = new  Voice_Cmd('Set the clock via the internet');
 set_icon $v_set_clock 'time';

The search order will be:

 Look for icons that match time
 Look for icons that match set_clock
 Look for icons that match words in 'Set the clock via the internet'
 Look for icons that match internet_data.pl

All icons in the graphics directory are compared to each of the above. The first match (by search order) is used. If there are multiple matches, the match with the longest word is used. For example, if we had icons names 'clock.gif' and 'internet.gif' (but no 'time.gif'), 'internet.gif' would be used.

In all of the above examples, .gif was used as an example, but any browser compatible graphics file can be used (e.g. .png and .jpg). If you want to add new icons, some good sources are at (https://www.freegraphicland.com/) , https://www.graphsearch.com/ Broken link , https://www.add-soft.com/icons/index.html Broken link , http://www.rad.kumc.edu/icons/icons.htm Broken link and http://www.engineeringplastics.com/HomeSeerIcons/ Broken link

Important note: If you do play with adding/deleting/renaming icons, you will want to do a reload before refreshing your browser. The icon directory is cached by MisterHouse (for efficiency). If no code has changed, the reload will run very quickly.

You can use the following html addresses to have MisterHouse return dynamically generated html:

  /category
    This will list all the Voice_Cmds, sorted by categories.  Categories are the member names of the
    user code, or the value in the Category=value field specified in the user code.
    Items are also listed by Group, and Object Type

  /list?category_name
    This can be used to list just the commands in the specified Category.

  /list;h_response?category_name
    As above, but it also passes h_response to the RUN commands (see h_response below)

  /groups
    This will return all the Group Items

  /list?group=$group_name
    This will return all the items in $group_name

  /items
    This will return all the non Voice items (e.g. X10_Items)

  /list?item_type
    This will return all the items of type item_type

  /widgets
    This lists all the Tk widgets.

  /widgets_label
    This returns just the label widgets

  /widgets_entry
    This returns just the entry widgets

  /widgets_radiobutton
    This returns just the radiobutton widgets

  /widgets_checkbox
    This returns just the checkbox widgets

  /speech
    This lists the most recently spoken text

  /print_log
    This lists the most recent print_log text

  /error_log
    This lists the most recent error_log text

If you want to generate your own html on-the-fly (like a cgi program would), instead of pointing to a .html file or one of the above pre-defined MisterHouse-generated lists, point to a .pl file and have that perl code return the desired html. Note, this currently differs from how a classic cgi program would work (they return the html as STDOUT). Some examples of this can be found in the mh/web/bin/*.pl files.

If you want to run with a classic cgi that return html so STDOUT, specify #!/local/bin/perl on the first line of your file. An example is in mh/web/bin/test_cgi.pl

One other note on .pl web files. You can have them use variables you define in your MisterHouse user code, but only if those variables are defined with use vars '$my_var1', '$my_var2'. Variables defined with my ($my_var1, $my_var2) are local only to the MisterHouse loop, and would not be available to any web .pl program. To pass arguments to your .pl file, append them to the URL in normal CGI fashion after a ?. For example:

   http://misterhouse.net/test/test1.pl?argument1&argument2

In addition to calling the above MisterHouse-generated html directly, you can embed these lists in your own html using the server-side-include syntax. If the extension on your html is .shtml (for server-side html) then MisterHouse will parse the html, looking for the following string:

   <!--#include file="your_directive"-->

Anytime the above string is found, it will replace that record with whatever you specify in "your_directive". "your_directive" can either be another html (or shtml) file, or it can be one of the MisterHouse-generated lists from above. For example:

  <!--#include file="/mh/other_links.html"-->
  <!--#include file="category"-->
  <!--#include file="/mh_default/test/test1.pl"-->

You can use an #include var= directive, like file= above except it returns the contents of an mh variable. For example:

  <li><b>Version:</b> <!--#include var="$Version"-->

or

  Missing page: <!--#include var="$Misc{missing_url}"-->

MisterHouse global variables (including %Save and %Misc values) are accessible to .shtml pages. To make other variables accessible to .shtml pages you need to declare them with use vars '$variable_name'.

If you use svar=, instead of var=, the var contents will be returned only if the web user is authorized (i.e. logged in or from an ip address listed in password_allow_clients).

This what is used in the MisterHouse 'About' web button to return the MisterHouse version.

You can also define your own functions in your code files to return html, and then call them with the code= include directive or as a h_response to a /SET or /RUN command (see below). For example, add these to any of your code files:

  sub web_func1 {
     return "uptime = " . &time_diff($Time_Startup_time,$Time , undef, 'numeric');
  }
  sub web_func2 {
     my ($arg1, $arg2) = @_;
     return "results from function 2: $arg1, $arg2";
  }

Add this if you want unauthorized web access to these functions

  if ($Reload) {
    $Password_Allow{'&web_func1'} = 1;
    $Password_Allow{'&web_func2'} = 1;
  }

Then call them like this:

 <p>Test web functions
 <!--#include code="&web_func1"-->
 <!--#include code="&web_func2(myarg1,myarg2)"-->

Or with this:

 http://localhost:8080/SET;&web_func2(myarg1,myarg2)

One example of a built in function is html_item, which will return html for one item. For example:

  <!--#include code="&html_item('v_what_speed')"-->
  <!--#include code="&html_item('mode_mh')"-->

Another useful built in function is &dir_index, which can be used to create a directory listing of files in selected directories. For example, if you have a web directory called pictures, create an index.shtml file, and include the following line:

    <!--#include code="&dir_index('/pictures','name',0)"-->

You can have &dir_index sort by name, type, size, or date. Set the 3rd argument to 1 for reverse sort order. An optional 4th parameter is a regular expresion that can be used to subset to matching files. See mh/web/graphics/index.shtml and mh/data/email/index.shtml for examples.

If you want to have only a few specific html controls, you can write your own html using the RUN and SET (or SET_VAR) URL keywords to control MisterHouse. Here are a few examples:

 <a href=http://localhost:8080/SET?$test_lights?off >Turn the test light off</a>
 <a href=http://localhost:8080/SET?$Save{test_input1}?abc >Load test_input1 with abc</a>
 <a href=http://localhost:8080/RUN?WebCam_light_on >WebCam light on</a>

The SET (or SET_VAR ... they are now the same) command can set any item or variable defined in your user code. The RUN command can run any voice command. Use '_' to replace blanks in the command string.

SET, RUN, or SUB can use an optional h_response field to decide what html will be returned:

  Format:
   SET;h_response?$item?value
   RUN;h_response?command
   SUB;h_response?sub_name(arg1,arg2)

  $var and $item are the variable and item names, with or without the $ prefix.

  h_response is optional and can be one of the following:
   &function        The results of &function will be returned
   &function(args)  The results of &function(arg) will be returned
   no_response      Tells the browser to do nothing (page is not changed).
   last_response    The last displayed or spoken text.
   last_response_## As above, but only the first ## characters.
   last_displayed   The last displayed text will be returned
   last_spoken      The last spoken item will be returned
   filexyz.html     The contents of filexyz.html will be returned
   string           string will be returned
   referer          The browser will be re-directed back to the calling page
   referer/URL      The browser will be re-directed to the referer_root/URL
   &referer(URL)    The browser will be re-directed to the referer_root/URL.
   http://url       The browser will be re-directed to URL
   blank:           A list of recently spoken text will be returned

Here are some examples demonstrating these options:

This returns the last spoken line:

  <li><a href=http://localhost:8080/RUN;last_spoken?WebCam_light_on>Light on</a>

This returns the string "Thanks for playing"

  <li><a href=http://localhost:8080/RUN;Thanks_for_playing?WebCam_light_off>Light off</a>

This returns the contents of the mh/web/test/test3.html file:

  <li><a href=http://localhost:8080/RUN;test/test3.html?WebCam_light_+50>+50</a>

This returns a list of recently spoken text:

  <li><a href=http://localhost:8080/RUN?WebCam_light_-50>-50</a>

This will allow for text input, using a html FORM, and returning the results form the user defined function &my_response (Note, to give anyone access to this function you will need to authorize &my_response with this in your code:

 $Password_Allow{'&my_response'} = 1):

HTML:

   <form action="SET;&my_response">Test 2<input size=9 name="$test_form"></form>

User code:

   $test_form = new Generic_Item;
   print_log $state if $state = state_now $test_form;
   sub my_response {
     return "You entered " . state $test_form;
   }

This will set a $barcode_scan Generic_Item, then display a web page that was updated by user code:

  <FORM ACTION="SET;barcode_search.html"  target='speech'>
  <p>Scan data into here: <INPUT SIZE=60 NAME="$barcode_scan" value=""></FORM>

This will redirect the browser back to the calling page (note the $ from the $camera_light item is optional):

  <a HREF="http://misterhouse.net:8090/SET;Referer?camera_light=on">Light on</a>

This will redirect the browser to MisterHouse page ia7/lights/main.shtml page:

  <a HREF="http://misterhouse.net:8090/SET;referer/ia7/lights/main.shtml?$camera_light=on">Light on</a>

This will redirect the browser to misterhouse.net

  http://localhost:8080/RUN;http://misterhouse.net?test_volume_at_60

You can also use RUN;h_response without a command. For example, if you want to get a directory listing, sorted by date (recent on top):

  <a href=http://localhost:8080/RUN;&dir_index('/pictures','date',1)>List pictures by date </a>

Here is an example of using a subroutine to generate html:

   http://misterhouse.net:8090/SUB;tellme_menu(,,html)

You can also use a separate web server (e.g. Apache or ISS) to serve pages that control MisterHouse. For example:

  Turn lamp
  <a href="http://localhost:8080/SET;referer?$light1?on">on</a>
  <a href="http://localhost:8080/SET;referer?$light1?off">off</a>

To enable on-the-fly icons to that show current item states, add this function to your code:

 sub web_icon_state {
     my ($item) = @_;
     my $obj   = &get_object_by_name($item);
     my $state = $obj->state;
     my $icon  = "$main::config_parms{html_dir}/graphics/$state.gif";
     print "db icon=$icon s=$state i=$item\n";
     my $image = file_read $icon;
     return $image;
 }

Then add this to your html:

  <img src=http://localhost:8081/sub?web_icon_state('$light1')>

Main page

Add a custom sidebar
Clone this wiki locally