Graphic View - Image Clicking

[Jokke]

Hello

The code for clicking the text works nicely. I am more intrested to have image(button/checkbox/light bulb) which can be clicked to togle the value. with such the usability would be better. Is there any new methods for this? How is the "have drinks" in mango example implemeted?

The code posted by cyberoblivion seems intresting. Can you please explain some details. Where is the codes to "in div" and the onmousebutton event handler to be put?

thanks
Jokke

[mlohbihler]

Hi Jokke,

The "have a drink" control in the sample remote view is coded as follows:

var s = "";
if (value)
    s += "<img style='cursor:pointer;' src='graphics/Drinks/drink.png' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"false\");return false;'/&gt";
else
    s += "<img src='graphics/Drinks/drink_empty.png'/&gt";
return s;

The backing point has a change detector that triggers an event handler after 30 seconds.

If you're more interested in the flashing light toggle, the code for that is:

var s = "";
s += "Or, use these scripted controls to turn the light ";
s += "<a href='#' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"false\");return false;'&gt";
s += value ? "Off" : "<b>Off</b&gt";
s += "</a&gt, ";
s += "<a href='#' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"true\");return false;'&gt";
s += value ? "<b>On</b&gt" : "On";
s += "</a&gt, or to ";
s += "<a href='#' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \""+ !value +"\");return false;'>Toggle</a&gt";
s += " its state.";
return s;

[Jokke]

Excelent, thanks for the hints. Now I got the image click working. Your example was also simple enough for other js noobs like me :D .

-Jokke

[diegoferreira]

Hello,

Great topic, but let´s say I wanna alter other datapoint values not related to this server side script.

I tried something like:

s += "<a href='#' onclick='mango.view.setPoint("+ "\"DP_900421\"" +", \""+ pointComponent.id +"\", \"false\");return false;'>"

And it returns me simple error message box, with no info, and no JS error.

What should be the proper way to set other datapoint values?

Thanks,

[diegoferreira]

Something I tried too:

var s = "";
var dpVO = new com.serotonin.mango.db.dao.DataPointDao();
 if (value){
     s += "<img style='cursor:pointer;' src='graphics/U27-12/Button/bt_On.jpg' onclick='mango.view.setPoint(" + dpVO.getDataPoint("DP_403189").getId() +", \""+ pointComponent.id +"\", \"false\");return false;'/>";
} else {
     s += "<img style='cursor:pointer;' src='graphics/U27-12/Button/bt_Off.jpg' onclick='mango.view.setPoint("+ dpVO.getDataPoint("DP_403189").getId() +", \""+ pointComponent.id +"\", \"true\");return true;'/>";
}
 return s;

I set an "input" data point as my reference datapoint, and this is my attempt to configure or set an "output" datapoint by server side script.

[mlohbihler]

Setting of points not added to the view is not allowed because it could violate permissions.

[diegoferreira]

That is true, but even if add the "output" datapoint beside my server side script I the error persists.

The question rests... no way to do this?

[mlohbihler]

Well, i spoke a bit generally there. Setting of points not in a view is a potential violation of permissions, and pretty much for this reason there is no support in view components for what you are trying to do (i.e. use the XID to reference a point to set, or for any other reason for that matter).

Can you not just use a script component for the point in question? Otherwise, what you can do is create a point change detector on the scripts point that triggers set point handler(s) that sets another point(s).

[diegoferreira]

Thanks, I´ll try this approach!