populating radio buttons

[MarkJames]

First off - I just want to say THANKS!

 

I've not been paying too much attention to my HA system for the last year or more as everything has been running quite smoothly.  I've gotten back into it in the last week or two having done some changes and noticed HAD.  This is a HUGE improvement to the already great ISY experience so thanks ever so much.

 

I purchased the networking module this morning and have a custom HAD up and running - it really only took a few minutes to get going with it - the sign of well written code, imho.  I've created a few tabs with my custom device lists and have moved on to some radio buttons to control toggles in my home.

 

To use a real example I have two hot water tanks in my home - one for the main house and one for the addition we did a few years ago.  I have the hot water tanks on ISY controlled 220v relays and depending on who's home or visiting I have the tanks either on full time or on a timer.

 

So... every 5 minutes the ISY runs a series of checks and if a state variable, say HotWaterToggle is 1 then it checks the schedule and turns the tank on or off accordingly.  If it's 0 then it just turns it on.

 

I have the toggle controlled now by the input type radio and it works perfectly.  The only drawback is that the initial radiobutton value is not indicated.  When the page loads both radio buttons are blank so you can't tell what it's set for currently.

 

I'm sure this is a some sort of call that I'm missing in custom.js but I can't find it.

 

Oh... and while I'm asking questions - tell me - do the radiobuttons have to live in a div?  Can they live in a table so that I can adjust alignment more accurately?

 

Thanks in advance for your help,

 

mark

 

[edit]

I think I found the answer to the population of radio buttons here http://forum.universal-devices.com/topic/14913-sprinkler-control/?hl=radio&do=findComment&comment=125973

 

The loader looks for a div so I imagine if I put my table within a div that should work?

 

mark

[bmercier]

Hi Mark,

 

Thanks for your comments on HAD.

 

 

I have the toggle controlled now by the input type radio and it works perfectly.  The only drawback is that the initial radiobutton value is not indicated.  When the page loads both radio buttons are blank so you can't tell what it's set for currently.

 

I'm sure this is a some sort of call that I'm missing in custom.js but I can't find it.

 

Does your toggle represent a device, or a variable?

 

If it's a variable, the initialization is done when vars are loaded, in UDFvarDataLoaded. In the sample, there is commented code you can use as an example.

 

So, let's say that in your web page you have a toggle like this:

<div id="exteriorAutoOnToggle">
    <input type="radio" id="exteriorAutoOnToggle1" name="exteriorAutoOnToggle" onclick="varSetValue('1', '17', '1')" />
    <label for="exteriorAutoOnToggle1">Sample Var Enable Button</label> 
    <input type="radio" id="exteriorAutoOnToggle2" name="exteriorAutoOnToggle" onclick="varSetValue('1', '17', '0')" />
    <label for="exteriorAutoOnToggle2">Disable Button</label> <!-- runElse sets variable to 0 --> 
</div><br />      

Then, to properly initialize it at page load, you need to have a block of code like this in UDFvarDataLoaded:

var radio4 = "#exteriorAutoOnToggle"
var value = varFindValue(vars1data, "17"); // Find the value of variable 17 in Integer variables
var id = radio4 + (value==0?"2":"1");
$(id).attr('checked', 'checked');	
$(radio4).buttonset("refresh");	 // When radio button is changed programmatically, UI needs to be refreshed

Also, make sure that variables are loaded at page load time.

At the top of custom.js, look for the following:

var loadVar1Data = 2; // Set to 1 to load integer variable data and run UDFvarDataLoaded at page load time. 
var loadVar2Data = 2; // Set to 1 to load state variable data and run UDFvarDataLoaded at page load time. 

If your var is a state var, you want to have var loadVar2Data = 1. The appropriate rest call will be run when the page is loaded, and UDFvarDataLoaded will be triggered with the content.

 

 

Oh... and while I'm asking questions - tell me - do the radiobuttons have to live in a div?  Can they live in a table so that I can adjust alignment more accurately?

 

The tables UI structure is somewhat fixed. The table is flexible, in a sense that it can accomodate a lot of different use cases. Both your important vars, devices and programs can live there. When you want something different in terms of UI, then, you need to develop it yourself. You will have helper functions to deal with the ISY, like varSetValue in the example above.

 

Benoit

[MarkJames]

.Then, to properly initialize it at page load, you need to have a block of code like this in UDFvarDataLoaded:

var radio4 = "#exteriorAutoOnToggle"
var value = varFindValue(vars1data, "17"); // Find the value of variable 17 in Integer variables
var id = radio4 + (value==0?"2":"1");
$(id).attr('checked', 'checked');	
$(radio4).buttonset("refresh");	 // When radio button is changed programmatically, UI needs to be refreshed

Also, make sure that variables are loaded at page load time.

At the top of custom.js, look for the following:

var loadVar1Data = 2; // Set to 1 to load integer variable data and run UDFvarDataLoaded at page load time. 
var loadVar2Data = 2; // Set to 1 to load state variable data and run UDFvarDataLoaded at page load time. 

If your var is a state var, you want to have var loadVar2Data = 1. The appropriate rest call will be run when the page is loaded, and UDFvarDataLoaded will be triggered with the content.

 

.

 

 

Thanks for the speedy reply.

 

My variable is actually a state variable so in your call

 

var value = varFindValue(vars1data, "17"); // Find the value of variable 17 in Integer variables

 

should I just be substituting vars2data for vars1data and then it's appropriate variable ID?

 

mark

 

[edit]

Sorry - already tried it and that is, indeed, the way it works.   This is great.  The tables work perfectly as well!

This is going to increase the W.A.F of my system by 10,000%

 

Thanks,

 

mark

[bmercier]

Thanks for the speedy reply.

 

My variable is actually a state variable so in your call

 

var value = varFindValue(vars1data, "17"); // Find the value of variable 17 in Integer variables

 

should I just be substituting vars2data for vars1data and then it's appropriate variable ID?

 

mark

 

Exactly!

 

And make sure you have var loadVar2Data = 1;

 

Benoit.

[MarkJames]

Hi again, Benoit.

 

I notice that devices with multiple entires - such as an EZ-flora - only show the primary entry.  Is this by design or is this a byproduct of the algorithm used to populate the devices?  Will I need to write a custom devicelist to access the sub-devices on a device?

 

mark

[bmercier]

Hi Mark,

 

In your device list, you have to specify the sub-devices that you want to be included, just like you do for other devices,

 

Benoit.

[MarkJames]

Hi Mark,

 

In your device list, you have to specify the sub-devices that you want to be included, just like you do for other devices,

 

Benoit.

Thanks Benoit,

 

I figured that would be the case with the custom device lists.  I was wondering, though, about the default device list.  The one that you've provided the code for in the default /web/had.htm.  That one doesn't enumerate all the sub devices in something like a KPL8 or EZFlora.

 

mark

[bmercier]

Thanks Benoit,

 

I figured that would be the case with the custom device lists.  I was wondering, though, about the default device list.  The one that you've provided the code for in the default /web/had.htm.  That one doesn't enumerate all the sub devices in something like a KPL8 or EZFlora.

 

mark

 

Oh, I never noticed that.

 

I will look into fixing that.

 

Thanks,

 

Benoit.

[MarkJames]

Oh, I never noticed that.

 

I will look into fixing that.

 

Thanks,

 

Benoit.

 

Thanks Benoit,

 

I also have a request if  you have the time.  I wish I was a Java programmer but I'm not and it'll take me a bit to figure out the syntax of a function you could probably write in 5 minutes by reusing your current code.

 

I use a lot of flags in my system and it would be great to use HAD to toggle them from a web page.  I could use radio buttons as in your sample but that requires two radio buttons for each flag - one for value 1 and one for value 0.  That makes the screen a bit unwieldy.  A checkbox would be much tidier.

 

I've written a page using checkboxes for the status of flags - so when the checkbox is ticked the flag is set and vice versa.  It works fine except that the onclick method attached to the checkbox runs the varsetvalue function and I don't have a value to specify as the value depends on the current value which I have no way of knowing.  What would be really great is a function call like 'vartogglevalue(varset, varID)' where I could pass it the variable table and variable ID and have the call simply use the REST interface to perform a ! function on the current value ISY holds for that variable.

 

I added a bit of code to isyrest.js that looks like t his

function varToggleValue(type,id) {
    if (parseInt(varGetValue(type,id)) > 0)    {
        varSetValue(type,id,'0');
    }
    else {
        varSetValue(type,id,'1');
    }
}

But it doesn't seem to work - I wonder if it has to do with the refreshOpt flag.

 

Thanks Benoit - sorry to trouble you.

 

mark

[bmercier]

Thanks Benoit,

 

I also have a request if  you have the time.  I wish I was a Java programmer but I'm not and it'll take me a bit to figure out the syntax of a function you could probably write in 5 minutes by reusing your current code.

 

I use a lot of flags in my system and it would be great to use HAD to toggle them from a web page.  I could use radio buttons as in your sample but that requires two radio buttons for each flag - one for value 1 and one for value 0.  That makes the screen a bit unwieldy.  A checkbox would be much tidier.

 

I've written a page using checkboxes for the status of flags - so when the checkbox is ticked the flag is set and vice versa.  It works fine except that the onclick method attached to the checkbox runs the varsetvalue function and I don't have a value to specify as the value depends on the current value which I have no way of knowing.  What would be really great is a function call like 'vartogglevalue(varset, varID)' where I could pass it the variable table and variable ID and have the call simply use the REST interface to perform a ! function on the current value ISY holds for that variable.

 

I added a bit of code to isyrest.js that looks like t his

function varToggleValue(type,id) {
    if (parseInt(varGetValue(type,id)) > 0)    {
        varSetValue(type,id,'0');
    }
    else {
        varSetValue(type,id,'1');
    }
}

But it doesn't seem to work - I wonder if it has to do with the refreshOpt flag.

 

Thanks Benoit - sorry to trouble you.

 

mark

 

Hi Mark,

 

If all that you want is a toggle, you can do it without any change to HAD. You could have one program per flag, and use function pgmRun.

 

Example: pgmRun('0017', 'run')

 

Note: There are extra parameters to this function you can ignore. Not sure why they are there

 

But quite frankly, I'm not sure why you would want a toggle. Why not send a '1' if the checkbox is checked and '0' if it's unchecked? Of course, the checkbox also has to be properly initialized, just like a 2-buttons toggle.

 

An easier way to do it is to use the device table, showing the variable on the left, and using the buttons to run a program to set it to 1 or 0. But of course, it's not as nice as having checkboxes layed out as you want it.

 

Benoit.

[MarkJames]

Well, I'll show you what I'm doing and maybe the reason will make more sense - a picture being worth a thousand words.

 

An image of the HAD page can be seen here (I can't figure out how to put the image inline on this forum)

 

http://imgur.com/T9yiB9M

 

This is the start of an alerts/sensors page.

 

The top section is for the timers that run my hot water tanks - either they're on all the time or they're timed.  That's self explanatory and done with the radio button call you have in the sample

 

The alarms below that are flags that indicate whether each of the areas in the house should arm automatically at night or not.  They're just integer variables that are 0 or 1.

 

The code I've been trying to use looks like this

<input type="checkbox" id="autoarmMain" name="autoarmMainToggle" onclick="varToggleValue('1', '3')" />
                    <label for="autoarmMain">Auto Arm Main House</label>

function varToggleValue(type,id) {
    if (parseInt(varGetValue(type,id)) > 0)    {
        varSetValue(type,id,'0');
    }
    else {
        varSetValue(type,id,'1');
    }
}

With your first suggestion - to run a program for each checkbox - I'd have to have a whole bunch of programs that do nothing but change variables.  That's a bit unwieldy as I have dozens of flags.  My insteon system is very large.  I have 108 individual devices which totals well over 200 unique insteon addresses when you consider KPL's and EZfloras.  That means a couple of hundred programs already.  I've already maxed out my previous PLM and have been contemplating a second ISY if my system gets much larger.

 

Your second suggestion- to send a 1 if the checkbox is checked and a 0 if it's unchecked is what I'm trying to do using the onclick attribute.  Is there another way that I don't know about?

 

Your third suggestion - using buttons to toggle 0 or 1 would work but for wives and kids that's a meaningless procedure.  Checked/unchecked is intuitive but 0 or 1 isn't.

 

The checkbox method seems to be ideal - I just can't figure out how to make it change the ISY value.  Do you see what I'm doing wrong?

 

 

 

Thanks

[bmercier]

Hi Mark, 

 

You don't need a toggle function. A checkbox by definition will toggle it's value when you click it. What you need is to capture the change, and send it to your ISY.

 

This is how I would do it (I have tested it).

 

In your HTML:

<div><input id="flag1" type="checkbox" name="flag1" value="1"/><label for="flag1">Flag 1</label></div>

 

In custom.js, in UDFvarDataLoaded:

 

// Initialize the checkbox with initial value

$('#flag1').prop('checked', varFindValue(vars1data, "17")); // a value of 0 equals uncheck, anything elses sets the checkbox checked

 

// This will set the ISY variable when the input field is changed

$('#flag1').change(function() {

     varSetValue('1', '17', $(this).is(":checked")?'1':'0');

});

 

NOTE: $('#flag1') refers to the id of your input checkbox

 

Benoit.

[MarkJames]

merci bien, Benoit

 

That works perfectly!

 

mark