Re: [mh] How to build a web-based keypad in IA7
Jeff Siddall via misterhouse-users <[email protected]> Wed, 20 Apr 2022 10:44:55 -0400
| Newsgroups | gmane.comp.misc.misterhouse.user |
|---|---|
| Message-ID | <[email protected]> |
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>" 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]> 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) 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
>>
>> and here:
>>
>> 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
>>
>
________________________________________________________
To unsubscribe from this list, go to: https://lists.sourceforge.net/lists/listinfo/misterhouse-users