Text field

[MarkJames]

Hi Benoit,

 

It's been a while since I've worked on my custom page but I'm back at it for a bit.  

 

I'm not a coder so it's a bit of a tough slog getting my custom page up.  I'm trying to get it to display text in a field such that if the variable 'doorclosed' is 1 then it will display 'garage door closed' and if the variable is zero then it will display 'garage door open'.  Could I impose on you to post the basics of this?  I know the index.htm will have the layout and the custom.js will do the filling in.

 

Also - if you're feeling particularly charitable - I'd also like a way to put a button on the page that allows me to close the garage door.  So a button press would run the 'closegaragedoor' program

 

 

Thanks ever so much.  I really like the HAD interface.

 

mark

 

[edit] I figured out the text field business doing it like this

value = varFindValue(vars1data, "47"); 
if (value==0)  { document.getElementById("statusGarageDoor").innerHTML = "Garage door is open";}
else  { document.getElementById("statusGarageDoor").innerHTML = "Garage door is closed";}

That seems to work fine.  On to the button issue!

 

[bmercier]

Hi Mark,

 

Your above suggestion would work on initial page load only, not on a refresh.

 

I just did it using a generic approach. The idea is to have a convert function that takes a value and returns a string, which you attach to one of your custom table entries.

 

The recipe below works for variables:

 

First, create a convert function like this in custom.js:

function modeConvert(value) {
	var thermostatModeOptions = [ "Off", "Heat", "Cool", "Auto" ];
	return thermostatModeOptions[parseInt(value)]
}

Add it to your device table like this (see valConvert, which contains your convert function):

{ name : "Heat", typeControl:"Pgm", programId:"009F", refreshOpt:"Var", varType:"2", varId:"13", labelOn:"Heat", valConvert: "modeConvert" },

Now to the generic part, you need to do 3 changes;

1. Modify the template to keep track of the convert function within the HTML tag. Locate the line to display variable status slighty below {* STATUS IS DISPLAYED HERE *}, and change it to:

<td varname="{$T.line.variable}" vartypeid="{$T.line.varType}{$T.line.varId}" {#if $T.line.valConvert}valconvert="{$T.line.valConvert}"{#/if}></td>  {* Variable output displayed here *}

2. In isyrest.js, locate function varUpdateAllStatus. This one is called at load time and displays variables.

Locate the line which displays the status, $(node).html(value), and insert the following just above.

			var convertFunc = $(node).attr('valconvert')

			if (convertFunc) {
				value = window[convertFunc](value);
			}

3. In isyrest.js, locate function varUpdateStatus. This one is called when updating an individual variable.

 

Replace it with this new version (I included all of it for simplicity):

function varUpdateStatus(id, type) // displays the var status after a refresh
{
	var defer = varGetStatus(id, type);

	defer.done(function(value){
		var $status = $('[vartypeid=' + type + id + ']')
		var convertFunc = $status.attr('valconvert')

		if (convertFunc) {
			value = window[convertFunc](value);
		}

		$status.html(value);

		slider = $('[slvartypeid="'+ type + id +'"]');

		if (slider.hasClass("ui-slider")) // Check if slider has been initialized
		{
			slider.slider("option", "value", parseInt(value)); // Set the corresponding slider
		}

		setTimeout("feedback('');", noerrFeedbackDelay); // Resets feedback message 	
	});		
}

And your done.

 

I will make a separate post for the button.

 

Benoit.

[bmercier]

Hi Mark,

 

To handle your button, you did not specify if you were looking to do it inside the device table, or in a custom location of the HTML.

 

The easiest is to do it in the device table.

 

A  device entry like this would do the trick:

{ name : "Heat Mode", typeControl:"Pgm", programId:"009F", refreshOpt:"Var", varType:"2", varId:"13", labelOn:"Heat", valConvert: "modeConvert" },

 

On the same line, you can display your variable, optionally with the value converter posted earlier, and also have 2 buttons that control a program like above, or perhaps directly a device. If you want to control a device directly, remove typeControl and programId, and just use control:"yourDevice"

 

Benoit.

[MarkJames]

Thanks for your help, Benoit. 

 

I'll go through and digest the text field info you posted.  It's going to take me a bit to understand and I've had a couple of glasses of wine now so it's going to be tomorrow.

 

I actually figured out the button thing earlier but hadn't posted yet.  My choices all live in a table and I just made a cell like this

 

  <td> <button onclick="pgmRunWithRefresh('0062', 'run', '', '', '', '');">CLOSE DOOR</button></td>

 

Works a treat!  Press the button and the door closes.  The only change I'd like to make is to gray the button if the door is already closed - or change the text to OPEN DOOR if it's already closed.  

 

Your HAD much improves the wife acceptance factor of my HA system.  Much appreciated.

 

mar