Graphic View - Image Clicking

[mjbcomputers]

As a wish list item:
It would be nice if you could allow users viewing scada status in the "graphic view" the ability to click on the images as an "on", "off", sort of thing. When editing an images properties, you could add two fields:
Image Click Toggle value 1:
Image Click Toggle value 2:

If I have a device that I want to turn on when I click the image, I would fill the fields out like this:

Image Click Toggle value 1: 0
Image Click Toggle value 2: 1

Bottom Line:
The ability to click on images placed in the "Graphic View" to set a toggle status. I do understand that currently I can move the mouse the top corner and change the value, but I think it would be a nice feature if you could simply click the image.

[cyberoblivion]

Craig,
This is something I have been working on as well only thing I was thinking about here is the fact that in logic there could be multiple types of "toggles buttons" to use...
1.) just set a binary value to it's opposite
2.) transition, e.i. set a normally open to closed for a period like 1 second than back to normal state and vise versa for normally closed
3.) set a binary value to its opposite as long as the mousedown action was in effect... I think this is the way most PLC hmi's do it.

However I'm a computer guy not a PLC guy so wanted input. I do know that in PLC logic you can look for different transition types "edges" but not sure the most effective route or if all methods would be desired.

[craig]

Personally I set up all the remote controls to the PLC as individual commands. Nothing is interactive or based on mousedown events.

Instead of moving a hydraulic ram out while the operator has their finger on a button (mousedown) the operator gives a command like "move ram out for 5s" or if there is a position sensor "move ram to this position".

I have the PLC programs execute a command on the positive edge transition of a bit set from mango and then the PLC resets that "execute command" bit once the command has started.

An advantage of this setup is that if something happens (ie network failure) and the onmouseup event gets lost the PLC isn't performing the requested action forever. Also latency (which I have lots of) isn't a factor.

I don't know how other people and brands make this work for them

mjbcomputers I think wanted to be able to set a bit without navigating the pop up layer, I know you mentioned this in the thread at http://mango.serotoninsoftware.com/forum/posts/list/128.page as well.

Since it is already possible to set a bit from graphical views I haven't thought too much about adding buttons, but as you said that is what operators are used to seeing.

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