Graphic View - Image Clicking

[cyberoblivion]

Here is a simple solution to this...
This isnt how I ended up implementing it but I'm sure most people won't want to modify the DB so you could do it this way very easily.

First in the javascript tag on the views.jsp page you can add

 var TOGGLE = 0;
        var SET_TRUE = 1;
        var SET_FALSE = 2;
        var buttonType=TOGGLE;
        
        function getCurrentValue(divId){
            var theDiv = $(divId);
            var temp = null;
            var inputElems = theDiv.getElementsByTagName("input");
            for (var i=0; i<inputElems.length; i++) {
                if (inputElems*.id.startsWith("txtChange")) {
                    temp = inputElems*.value;
                }
            }
            return temp;
        }
        function buttonController(pointId, pointType, setable, pointViewId){
            var divId = "c"+pointViewId+"Change";            
            if(pointType==1 && setable){
                if (buttonType==TOGGLE) {
                    mango.view.setPoint(pointId, pointViewId, getCurrentValue(divId)>0?0:1);
                } else if (buttonType==SET_TRUE) {
                    mango.view.setPoint(pointId, pointViewId, 1);
                } else if (buttonType==SET_FALSE) {
                    mango.view.setPoint(pointId, pointViewId, 0);
                }
            }
        }

then in the div with ```
id="c${pv.id}"

add a onmousedown event handler like this

onmousedown="buttonController(${pv.dataPoint.id},${pv.dataPoint.pointLocator.dataTypeId},${pv.dataPoint.pointLocator.settable},${pv.id});"

Thats it.. you can now click on the image to change its value! :-)
you can set the mode in the javascript to toggle, set true, set false, of course you which ever way you choose it will act the same for all...
The script also only allow action on binary type datapoints.

Maybe its usefull for someone who knows.. :-D

[mlohbihler]

Nice work. Coming in 1.6.0 there will be an alternate solution as well. The point and pointView objects have been added to the server-side script graphic renderer, which will provide you with the context you need to call the set point function. There is a bunch of quote escaping to do to turn the server-side script into a client-side script, but i made a binary point toggle-able with the following:

var result = "";
result += "<span onclick='mango.view.setPoint("+ point.id+", "+ pointView.id +", \""+ !value +"\")'>";

if (value)
    result += "i'm ON. click me";
else
    result += "i'm OFF. click me";

result += "</span>";
return result;

[mlohbihler]

Oh, note that this script doesn't work in view editing mode. You need to save the view and test the script in read-only mode.

[mjbcomputers]

For some reason MANGO did not like the "pointView.id"... What I did to get it to work was to manually place in the number based upon the graphic views url "http://localhost:8080/mango/views.shtm?viewId=2" so I placed a 2.

var result = "";
result += "<span onclick='mango.view.setPoint("+ point.id+", "+ 2 +", ""+ !value +"")'>";

if (value)
result += "i'm ON. click me";
else
result += "i'm OFF. click me";

result += "</span>";
return result;

[mlohbihler]

The dangers of trusting dated information...

I don't recall what version it was, but somewhere the var was changed from pointView to pointComponent.

[mjbcomputers]

Thanks for the info! I'll change my code!

[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!