Premise Input buttons

chucklyons · Jun 7, 2011

I'm not sure why I am having this problem, but something is stuck..I'm trying to use a standard javascript input button/submit action in the minibrowser. No problem, works fine. I haven't been able to get the action to work against a Premise function. For instance, I want to have a manual 'Get RSS' button ..the action works (looks like a normal submit button), but it doesn't cause the Premise 'Get RSS' action to work. Any ideas how to do this most basic of coding tasks?

etc6849 · Jun 7, 2011

If I understand everything, you're wanting to call a Premise method when a form button is pressed? To do this, you're using javascript which calls the Premise method...?

I figured this out a month or so back when I developed a lock keypad, garage door opener and alarm panel for minibrowser. If you want to study my example, I can send it to you when I get home. I would study it in notepad++ by comparing the xdo with 123's xdo; that way you can easily see any changes. I plan on posting the minibrowser improvements, but I want to add a few more devices first.

chucklyons · Jun 8, 2011

You got it, pal! I don't know why my peanut brain can't get thru the hurdle, but...so if you could post, that would be great. I'll add it to the 'I owe you' bucket!

etc6849 · Jun 8, 2011

Sorry forgot to post last night... I'll remember tonight.

etc6849 · Jun 8, 2011

Here you go. Don't import without deleting the existing Minibrowser mmodule or unchecking the add-in first. Also if you're using my home classes: GarageDoorOpener or Lock, delete those too as I've included them in the file. Also, copy the included images to: ...Premise\SYS\web\Plugins\Images

etc6849 · Jun 8, 2011

example image

chucklyons · Jun 26, 2011

etc6849 said:
example image

I'm just looking for a simple example of javascript - onclick does something with an object. I'm not sure if I don't have my syntax right, or what the problem is..anybody have an easy example?

etc6849 · Jun 26, 2011

The syntax is too confusing if you try to examine it in the XDO file. It's much easier to examine it in your web browser by clicking view source and examining the page header, then comparing it to the XDO file. You'll see something like this if you examine the header:

Code:

function addKeyPress(key){ var code = document.forms[0].code; if(code.value.length < 10){ code.value = code.value + key; }}
function clearKeyPresses(){ document.forms[0].code.value = ""; }
function refreshShortly(){ setTimeout( "refresh()",3000); }
function doKeypadEnter(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbKeypadEnter(0,"+ document.forms[0].code.value +")"; }
function doKeypadCancel(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbKeypadCancel(0,"+ document.forms[0].code.value +")"; }
function doAway(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbExit(0,"+ document.forms[0].code.value +")"; }
function doStay(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbStay(0,"+ document.forms[0].code.value +")"; }
function doDisarm(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbDisarm(0,"+ document.forms[0].code.value +")"; }
function refresh() { window.location.href = "/ppc"; }

For example:

Code:

function doKeypadEnter(){ parent.location="/sys/{AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9}?d??mbKeypadEnter(0,"+ document.forms[0].code.value +")"; }

This line defines a javascript method called doKeypadEnter. doKeypadEnter calls the mbKeypadEnter method for the Home object with GUID = AB85C303-AD46-4FD8-A0D2-1ED8E6676DF9. In this case, this Home objectID (aka GUID) is that of the alarm panel. Note how the form's value are passed from javascript into the SYS method (e.g. java-script->SYS). This is what passes the alarm code back to SYS. This works because as you recall each Minibrowser class is Extended to the home object.

Now examine sys://Schema/Modules/MiniBrowser/GlobalScripts/MiniBrowserFunctions and note these lines:

Code:

		'ETC_CHANGE: Added keypad support
		sHTML = sHTML & ("function addKeyPress(key){ var code = document.forms[0].code; if(code.value.length < 10){ code.value = code.value + key; }}")
		sHTML = sHTML & ("function clearKeyPresses(){ document.forms[0].code.value = """"; }")
		sHTML = sHTML & ("function refreshShortly(){ setTimeout( ""refresh()"",3000); }")
		sHTML = sHTML & ("function doKeypadEnter(){ parent.location=""/sys/" & this.objectID &_
		"?d??mbKeypadEnter(0,""+ document.forms[0].code.value +"")""; }")
		sHTML = sHTML & ("function doKeypadCancel(){ parent.location=""/sys/" & this.objectID &_
		"?d??mbKeypadCancel(0,""+ document.forms[0].code.value +"")""; }")

this.objectID passes the current home object to the java-script method; this is how variables are passed from SYS->java-script. I placed all of my java-script in the header so that other objects such as my garage door opener can make use of the keypad. This works because MiniBrowser will grab a Home object's ID each time you drill into a Home object.

Further, you should examine how the form is shown in your browser:

Code:

<form><input type="text" name="code" value="" maxlength="4" class="display" readonly="readonly" size="8" style="border: 0px; color: white; font-size: 30px; background-color: dimgray;" /></form>

and how a button passes data to the form:

Code:

<IMG SRC="/Plugins/Images/Three.gif" onclick="addKeyPress(3)" border="0"></a></TD></TR><TR><TD align=center><a href="#">

The SYS code that makes the keypad is found in:
sys://Schema/Modules/MiniBrowser/Classes/mbSecuritySystemEx/mbRenderPage

Code:

...
sTextFont = "<FONT face=""Verdana,Arial,Helvetica,sans-serif"" color=""yellow"" size=""4"">"

' define input box to be used by javascript functions defined in the header (see GlobalScripts MiniBrowserFunctions
sInputBox = "<form><input type=""text"" name=""code"" value="""" maxlength=""4"" class=""display"" readonly=""readonly"" size=""8"" style=""border: 0px; color: white; font-size: 30px; background-color: dimgray;"" /></form>"

sHTML = sHTML & ("<BR><CENTER><TABLE border=""0"" cellpadding=""0"" cellspacing=""5"" margin=""0"">")
sHTML = sHTML & ("<TR><TD colspan=6 align=center bgcolor=gray>" & sTextFont & "Status: " & sSecurityReady & ", " & sSecurityState & "</FONT></TD></TR>")			
sHTML = sHTML & ("<TR><TD align=""center"" colspan=""3"">" & sInputBox & "</TD>")
		
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/One.gif"" onclick=""addKeyPress(1)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Two.gif"" onclick=""addKeyPress(2)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Three.gif"" onclick=""addKeyPress(3)"" border=""0""></a></TD></TR>")

' javascript is used for these functions to pass code from form input named code
' if code is not at least 4 in length, the associated mb method will ignore the code parameter  
sHTML = sHTML & ("<TR><TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Stay.gif"" onclick=""doStay()"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Disarm.gif"" onclick=""doDisarm()"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Exit.gif"" onclick=""doAway()"" border=""0""></a></TD>")

sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Four.gif"" onclick=""addKeyPress(4)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Five.gif"" onclick=""addKeyPress(5)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Six.gif"" onclick=""addKeyPress(6)"" border=""0""></a></TD></TR>")
		
' CAUTION! if you're security system requires a code for panic buttons to work, you'll need to modify mini browser		
sHTML = sHTML & ("<TR><TD align=center>" & this.mbGetAnchor("mbFire", "Fire.gif") & "</TD>")
sHTML = sHTML & ("<TD align=center>" & this.mbGetAnchor("mbPolice", "Police.gif") & "</TD>")
sHTML = sHTML & ("<TD align=center>" & this.mbGetAnchor("mbMedical", "Medical.gif") & "</TD>")

sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Seven.gif"" onclick=""addKeyPress(7)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Eight.gif"" onclick=""addKeyPress(8)"" border=""0""></a></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Nine.gif"" onclick=""addKeyPress(9)"" border=""0""></a></TD></TR>")
		
' make a transparent spacer so table looks correct
sHTML = sHTML & "<TR><TD colspan=3 rowspan=1></TD>"

' if cancel is pressed, clear the form data by called the javascript clearKeyPresses(), but also clear the SYS DisarmCode usind doKeypadEnter
sHTML = sHTML& ("<TD align=center><INPUT TYPE=""image"" SRC=""/Plugins/Images/Cancel.gif"" onClick=""clearKeyPresses();doKeypadEnter()""></TD>")
sHTML = sHTML& ("<TD align=center><a href=""#""><IMG SRC=""/Plugins/Images/Zero.gif"" onclick=""addKeyPress(0)"" border=""0""></a>" & sCellEnd)

' doKeypadEnter will get keypad value from form input called code, then pass it to SYS method mbKeypadEnter
sHTML = sHTML& ("<TD align=center><INPUT TYPE=""image"" SRC=""/Plugins/Images/Enter.gif"" onClick=""doKeypadEnter()""></TD></TR>")
sHTML = sHTML & "</TABLE></CENTER>"

chucklyons · Jun 28, 2011

Getting there slowly...in Chrome, if I inspect element, for refreshShortly, when I hit the input (onclick), Chrome gives me 'Uncaught ReferenceError: refreshShortly is not defined'...wonderful!

123 · Jan 9, 2012

I downloaded "MiniBrowser V2.3.zip", from the post above, extracted "MiniBrowser V2.1.xdo" and opened it in Notepad++. It doesn't look like a MiniBrowser module; all I see are three classes called HomeStatus, Locks, and GarageDoorOpener.

Where is the version of MiniBrowser that supports the SecuritySystem class (as pictured above) using all of that lovely JavaScript code (also pictured above)? :huh:

etc6849 · Jan 9, 2012

Sorry, it looks like I didn't check all of the boxes when I exported the modules, only those for locks? If you want to use the garage door opener or lock, download them separately from the downloads section and install them first before importing this version of minibrowser. This is necessary since the lock and garage door opener minibrowser classes extend the original lock and garage door classes. Perhaps when one extends a non-standard module, the extended class belongs with the original non-standard module. However, then if a user doesn't have minibrowser installed an error would occur during importing...

As before, be sure to follow all of 123's instructions found here:
http://cocoontech.co...ser-interfaces/

123 · Jan 9, 2012

I checked the updated MiniBrowser module and it includes support for classes that are not part of the Premise standard library of classes (zWaveLock and GarageDoorOpener). It includes dependencies that are fulfilled by your Premise system but not on other Premise systems (unless they install the dependent modules). As a result, errors are generated when one imports the modified MiniBrowser module.

It's possible you were never planning to distribute your modified version of MiniBrowser but, now that the cat is out of the bag, it demonstrates the need to constrain MiniBrowser to rendering only standard classes. 'SecuritySystem' is part of the standard library and can be included in an updated version of MiniBrowser.

To enable MiniBrowser to support non-standard classes, like zWaveLock and GarageDoorOpener, all that is needed is to create a function called "mbRenderPage". When MiniBrowser encounters an unknown class, it searches for a function called "mbRenderPage", within the unknown class, and executes it.

Here's the boilerplate for an mbRenderPage function:

Code:

' Display the standard MiniBrowser page-header.
sHTML = gMBRenderHeader()
' Determine what flavour of Minibrowser we are working with and adjust ourselves accordingly.
if sysevent.ClientSession.UIAdvanced then
' Do something fancier
else ' Simple
with sysevent.ClientSession
  select case .UIID
   case 0: sWidth="98%"
   case 1: sWidth="80%"
   case 2: sWidth="98%"
   case else: sWidth="98%"
  end select
  ' Initialize fonts based on predefined styles
  sFont = "<FONT face=""Verdana,Arial,Helvetica,sans-serif"" size=""" & .UITextSize & """ color=""" & GetHTMLColor(.UITextColor) & """>"
  sTitleFont = "<FONT face=""Verdana,Arial,Helvetica,sans-serif"" size=""" & _
	  .UIToolbarTextSize & """ color=""" & GetHTMLColor(.UIToolbarTextColor) & """ ><STRONG>"
end with
'''''''''''
' HTML Code that displays the contents of our class goes here.
'''''''''''
end if
' Display the standard MiniBrowser page-header.
method.mbRenderPage =  sHTML & gMBRenderFooter()

Having an mbRenderPage function in one's custom class ensures it will be rendered by MiniBrowser, without having to modify MiniBrowser itself. One's custom class and MiniBrowser remain loosely-coupled entities with no error-causing dependencies.

123 · Jan 9, 2012

etc6848, you've done a top-notch job with the SecuritySystem class in MiniBrowser. However, I think it may overwhelm my poor old 3COM Audreys!

While going through the Javascript code you added to gMBRenderHeaderEx, I found a Javascript function, doKeypadCancel, that calls a non-existent class function named mbKeypadCancel. mbKeypadCancel exists in the zWaveLock and GarageDoorOpener classes but not in the SecuritySystem class .. or at least not in the version I downloaded from the post above.

Clicking the Cancel button makes a call to the non-existent function and also causes the browser to refresh (normal). The refresh purges the code-entry box (normal) and seems to lead one to believe all is well but, in fact, the button-press made a call to a function that doesn't exist. Is mbKeypadCancel supposed to do some additional clean-up chores?

chucklyons · Jan 9, 2012

I have added a number of MB supported classes - TV, Cable, Tivo, DVD Changer and Receiver...I think I followed your advice; the MBRenderPage for each device is modified to let it be displayed in the appropriate location (primarily MediaZone); the MBRenderControls is modified for each layout. I would have liked to made on set of functions that each device would share, but this approach was easier - and I don't think its loaded until called, so the code size issue should not be a problem,...

etc6849 · Jan 10, 2012

So it's not necessary for the object's name to be under the enumeration called "ValidClasses"? If I remember correctly, things wouldn't work until I added the class name here, but I could be wrong.

123 said:
I checked the updated MiniBrowser module and it includes support for classes that are not part of the Premise standard library of classes (zWaveLock and GarageDoorOpener). It includes dependencies that are fulfilled by your Premise system but not on other Premise systems (unless they install the dependent modules). As a result, errors are generated when one imports the modified MiniBrowser module.

The mbSecuritySystem buttons never actually call the doKeypadCancel functions (I think?!?):

Code:

  ' if cancel is pressed, clear the form data by called the javascript clearKeyPresses(), but also clear the SYS DisarmCode using doKeypadEnter
  sHTML = sHTML& ("<TD align=center><INPUT TYPE=""image"" SRC=""/Plugins/Images/Cancel.gif"" onClick=""clearKeyPresses();doKeypadEnter()""></TD>")

I put all of the javascript functions in the common header so that I could pick and choose from them as I developed code for other classes such as the Television class (which never happened). I always figured (perhaps incorrectly) that if a function was never called, it wouldn't matter if it pointed to a non-existent method?

Premise Input buttons

chucklyons

Guest

etc6849

Senior Member

chucklyons

Guest

etc6849

Senior Member

etc6849

Senior Member

Attachments

etc6849

Senior Member

Attachments

chucklyons

Guest

etc6849

Senior Member

chucklyons

Guest

123

Senior Member

etc6849

Senior Member

Attachments

123

Senior Member

123

Senior Member

chucklyons

Guest

Attachments

etc6849

Senior Member

Similar threads