Re: [mh] How to build a web-based keypad in IA7

H Plato <[email protected]> Wed, 20 Apr 2022 17:34:36 -0600
Newsgroups	gmane.comp.misc.misterhouse.user
Message-ID	<[email protected]>
There probably is a better way with aliases, since I have just the one static page mine is MHROOT/web/ia7/house

I’m not sure, and I can’t remember why I called it shtml — I think I had a garage.shtml in ia5 and I just migrated it over.

ia7 uses an older version of bootstrap, which defines the button style. For a phone, it will display buttons the width of the screen, and not like the keypadlinc picture that you included. With the demise of the keypadlinc, I like the idea of recreating it virtually however. 

It might be neat to have a separate keypad.html that uses a slimmed down javascript.js and a different UI (I like the square buttons on material Design bootstrap 5) I’d be challenged to find the time right now, but could offer assistance if there is any interest.

> On Apr 20, 2022, at 8:44 AM, Jeff Siddall via misterhouse-users <[email protected]> wrote:
> 
> Thanks!  Those examples explain a lot.  I'll give that a try.  At first glance it looks like I had the wrong name in my entity= parameter on my test page so maybe I was closer than I thought.
> 
> Regarding your link "/ia7/house/garage.shtml", where exactly did you put that file?  I realize I could put it in the system folder (/usr/local/mh/web/ia7/ on my machine) but then when I replace the MH folder with a new one I need to remember to replace that file. Is there a better way?
> 
> Also, I believe that .shtml extension is intended to be included with SSI in another page but I am not clear on how to tell the server not to add in the includes on one particular page.  I am guessing it isn't as simple as adding <html> and <body> tags and renaming it .html.
> 
> Jeff
> 
> 
> On 2022-04-19 20:19, H Plato wrote:
>> Hi Jeff,
>> 
>>   Interesting idea. You can set IA7 objects to be ‘direct controlled’ that is a press will toggle the object state rather than bring up the sub menu. You need to configure that item in the ia7_config.json file, will look something like:
>> 
>>   "objects" : {
>>   "basement_blinds_1" : {
>>   "direct_control" : "yes"
>>   },
>> 
>> You can tell if the item is direct controlled as it will have a black border on the button:
>> 
>> 
>> IA7 does have the ability to manage a ’static’ page. Below is what I do for the garage page, which has some buttons, temperature sensors, and a zoneminder image. Would this work if the header and footer would be removed? That might be as simple as just an index2.html file that has some slight modifications.
>> 
>> collections.json:
>>    "126" : {
>>       "icon" : "fa-truck",
>>       "link" : "/ia7/house/garage.shtml",
>>       "name" : "Garage"
>>    },
>> 
>> garage.shtml
>> <div id='buffer0' class='row top-buffer'>
>>   <div id='row0' class='col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2'>
>> 
>>         <div class="col-sm-4">
>>            <div style="vertical-align:middle">
>>                 <button entity='AA_temp_garage' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Garage Temp<br><span class='pull-right object-state'>loading...</span>
>>                 </button>
>>           </div>
>>         </div>
>> 
>>         <div class="col-sm-4">
>>             <div style="vertical-align:middle">
>>                 <button entity='sensor_garage_motion2' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Garage Motion<br><span class='pull-right object-state'>loading...</span>
>>                 </button>
>>              </div>
>>        </div>
>> 
>>         <div class="col-sm-4">
>>                    <div style="vertical-align:middle">
>>                 <button entity='garage_light' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Garage Light<br><span class='pull-right object-state'>loading...</span>
>>                 </button>
>>                 </div>
>>         </div>
>>  </div>
>> </div>
>> 
>> <div id='buffer1' class='row top-buffer'>
>>   <div id='row0' class='col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2'>
>>   </div>
>> </div>
>> 
>> <table cellSpacing=0 cellPadding=0 width="100%" border=0>
>> <center>
>> <img src="http://10.0.0.1/zm/cgi-bin/nph-zms?mode=jpeg&monitor=1&scale=100&maxfps=15 <http://10.0.0.1/zm/cgi-bin/nph-zms?mode=jpeg&monitor=1&scale=100&maxfps=15> <http://10.0.0.1/zm/cgi-bin/nph-zms?mode=jpeg&monitor=1&scale=100&maxfps=15 <http://10.0.0.1/zm/cgi-bin/nph-zms?mode=jpeg&monitor=1&scale=100&maxfps=15>>" width="320" height="240"></img>
>> </center>
>> </table>
>> <div id='buffer2' class='row top-buffer'>
>>   <div id='row0' class='col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2'>
>> 
>> <div class="col-sm-4">
>>    <div style="vertical-align:middle">
>> <button entity='garage_lock' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Garage Door Lock<br><span class='pull-right object-state'>loading...</span>
>> </button>
>> </div>
>> 
>> </div>
>> <div class="col-sm-4">
>>    <div style="vertical-align:middle">
>> <button entity='garage_iolinc_door' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Infiniti Garage Door<br><span class='pull-right object-state'>loading...</span>
>> </button>
>> </div>
>> </div>
>> 
>> <div class="col-sm-4">
>>    <div style="vertical-align:middle">
>> <button entity='garage_iolinc_door_2' class='btn btn-default btn-lg btn-list btn-popover btn-block btn-state-cmd navbutton-padding'>Highlander Garage Door<br><span class='pull-right object-state'>loading...</span>
>> </button>
>> </div>
>> </div>
>>    </div>
>>  </div>
>> 
>> <script>
>>  updateStaticPage();
>> </script>
>> 
>> 
>> 
>>> On Apr 19, 2022, at 3:17 PM, Jeff Siddall via misterhouse-users <[email protected] <mailto:[email protected]>> wrote:
>>> 
>>> I would like to build a web interface to implement the function of a hardware keypad (ex: https://m.media-amazon.com/images/I/71jaCjRVlxL._AC_SL1500_.jpg <https://m.media-amazon.com/images/I/71jaCjRVlxL._AC_SL1500_.jpg>) on a small touchscreen with a web browser like an old mobile phone.  As such I want a totally clean UI (no banners, footers, etc.) with a specific set of buttons that have a state indication and will toggle when the button is pressed (ex: green when on like the default UI).  Some way to make a button set a specific state for an item would be handy too (i.e.: like scenes) but I could use a 2 state item and some user code that automatically turns itself off.
>>> 
>>> Unfortunately, by default, IA7 pops open a sub-control that lets you select the state instead of directly controlling it, which isn't great on a small touchscreen.  I did some digging on this but didn't get very far given my limited knowledge on how the whole web interface works.  I had a look here:
>>> 
>>> https://github.com/hollie/misterhouse/wiki/Customising-Web <https://github.com/hollie/misterhouse/wiki/Customising-Web>
>>> 
>>> and here:
>>> 
>>> https://github.com/hollie/misterhouse/wiki/Modern-Web-Interface---IA7 <https://github.com/hollie/misterhouse/wiki/Modern-Web-Interface---IA7>
>>> 
>>> but neither really seemed to cover what I am trying to do.  I did figure out how to make a child menu with a custom collections.json, but that is a pretty small step in the whole task.  Here is where I am at:
>>> 
>>> Problem 1: how to include some user defined pages into IA7?  I tried setting html_alias2_ia7 to the location of my HTML files, but it appears it only looks for in the alias location if the file already exists in the system ia7 folder.  Is there some other way to inject new user files into the MH web server without removing all the default stuff?
>>> 
>>> Problem 2: how to implement a toggle button?  I did some reading from a mailing list posts from many years back titled "Custom IA7 pages with direct control" and while I followed some of it, when I built the button it didn't actually do anything when clicked, and I really don't know where to go next.  Maybe that isn't even what I need.
>>> 
>>> Problem 3: how to build/arrange buttons that fit the format of the screen I want to display the page on
>>> 
>>> If anyone has some tips on how to do this and could point me in the right direction I would appreciate it.  When I am done I could add some info to the wiki pages about it in case others are interested.
>>> 
>>> 
>>> 
>>> ________________________________________________________
>>> To unsubscribe from this list, go to: https://lists.sourceforge.net/lists/listinfo/misterhouse-users <https://lists.sourceforge.net/lists/listinfo/misterhouse-users>
>>> 
>> 
> 
> 
> ________________________________________________________
> To unsubscribe from this list, go to: https://lists.sourceforge.net/lists/listinfo/misterhouse-users <https://lists.sourceforge.net/lists/listinfo/misterhouse-users>

________________________________________________________
To unsubscribe from this list, go to: https://lists.sourceforge.net/lists/listinfo/misterhouse-users