Template node send data from function

Using template node i created a html page
there are image that switch when i click them
at a click it sends a payload.
What i want to do now is when i click it first time i want to send x if i click it again i want to send y and so on
How can i do this? Send data from the function? but how then?
Or is there another way to send this information?

What i created is this

Thanks

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bomb</title>
	<style>
	img:visited,
    img:active,
    img:focus {
      outline:none;
    }
	.image {
			 text-align: center;
			 border-style:0;
			 border: 0;
			 border: none !important;
            background: transparent !important
            outline: none;
            
		}
        .sevenseg {

            color: rgba(255, 0, 0, 0.8);
            font-size: 85px;
            font-family: "Seven Segment";
            text-align: center;
            margin-top:10px;
        }

    </style>
</head>

<body>
<table width="95%" border="0" class="image">
  <tbody>
    <tr>
      <td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 1 })" id="imageOne" onclick="changeImage('imageOne')" /></td>
      <td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 2 })" id="imageTwo" onclick="changeImage('imageTwo')" /></td>
    </tr>
    <tr>
      <td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 3 })" id="imageThree" onclick="changeImage('imageThree')" /></td>
      <td><img src="/image.png" width="65" height="65" alt="" ng-click="send({button: 4 })" id="imageFour" onclick="changeImage('imageFour')" /></td>
    </tr>
  </tbody>
</table>

    <span class="sevenseg"> {{msg.payload}} </span>


<script language="javascript">
 function changeImage(x) {
    var photo;
    var image = document.getElementById(x);
            if (image.src.match("Neg.png")) {
                photo = image.src.replace( "Neg.png", ".png");
                image.src = photo;
                
            }
            else {
                photo = image.src.replace(".png", "Neg.png");
                image.src = photo;
            }
 }
</script>

</body>

</html>

  1. x is the string eg. 'imageOne' that you pass in your changeImage(x) function ?
  2. can you clarify a bit more what is x, what is y and what happens when an image is clicked more than two times ?
  3. and when do you want the actual image src replacement to happen ? on the very first click ?

x can be the actual file name
y can be the actual file name after image is changed

what i want to do is a simple puzzle
you need to click in the correct order on the image for this i need output from the view wich image is selected or de selected

Ohhh another devious puzzleā€¦. :rofl:

if there is a way to do it less devious please let me know...
this is always trial and error for me to get something working

Here is an example to give you some ideas

Created a dataset attribute in order to track the button clicks (data-clicked)

[{"id":"b11293a5f92bf98a","type":"ui_template","z":"5847b7aa62131d37","group":"61db9c3f37fc1036","name":"","order":1,"width":"12","height":"7","format":"<!doctype html>\n<html>\n\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Bomb</title>\n  <style>\n    img:visited,\n    img:active,\n    img:focus {\n      outline: none;\n    }\n\n    .image {\n      text-align: center;\n      border-style: 0;\n      border: 0;\n      border: none !important;\n      background: transparent !important outline: none;\n\n    }\n\n    .sevenseg {\n\n      color: rgba(255, 0, 0, 0.8);\n      font-size: 25px;\n      font-family: \"Seven Segment\";\n      text-align: center;\n      margin-top: 10px;\n    }\n  </style>\n</head>\n\n<body>\n  <table width=\"95%\" border=\"0\" class=\"image\">\n    <tbody>\n      <tr>\n        <td><img src=\"/image.jpg\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageOne\" ng-click=\"changeImage($event)\" />\n        </td>\n        <td><img src=\"/image.jpg\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageTwo\" ng-click=\"changeImage($event)\" />\n        </td>\n      </tr>\n      <tr>\n        <td><img src=\"/image.jpg\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageThree\" ng-click=\"changeImage($event)\" />\n        </td>\n        <td><img src=\"/image.jpg\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageFour\" ng-click=\"changeImage($event)\" />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  \n  <h2 style=\"margin-top:50px\">Last message sent : </h2>\n  <pre class=\"sevenseg\">{{msg.payload}}</pre>\n\n  <script>\n    (function(scope) {\n        scope.changeImage = function(event) {\n        console.log(\"Triggered\", event)\n        if (event.target.dataset.clicked == \"0\")\n         {\n            scope.send({ payload: { image: event.target.id, selected: true }})\n            event.target.dataset.clicked = 1 // increment clicks to 1\n            event.target.src = \"/neg.jpg\"; // change image src\n         }\n         else {\n           scope.send({ payload: { image: event.target.id, selected: false }})\n            event.target.dataset.clicked = 0 // reset clicks to 0\n            event.target.src = \"/image.jpg\"; // change back to original image src\n         }\n\n}\n\n})(scope);\n  </script>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":540,"y":1500,"wires":[["75d8d7a42c1072d4"]]},{"id":"75d8d7a42c1072d4","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":770,"y":1500,"wires":[]},{"id":"61db9c3f37fc1036","type":"ui_group","name":"test","tab":"74b1d602a9d252c0","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"74b1d602a9d252c0","type":"ui_tab","name":"Bom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

8CCE50F5-1AF4-4047-8DE5-F4D6F280D802

1 Like

Thanks for creating an example!
Really appreciated!

How can i get the actual image source to the function?
Like i did in the original with "image.src"

this because the images are different
so regarding to the example a fish, a cow, a chicken and a doggy :wink:
original file is xxx.png and the selected image is xxxNeg.png
So Neg is added to the file name for selected image

love your animated example!

we are passing in the function the $event (as i recommended in you previous thread .. hint)
which is what is console logged as soon as we click an image.
(you can see what it contains in your browser's developers tools)

the actual image source should be in event.target.src

replace scope.send({ payload: { image: event.target.src, selected: true }})

1 Like

i tried only 'event' but that gave a lot of info.
Thanks again for helping!

indeed passing the $event in the function sends a lot of info ..
the whole element that was clicked
but you never know what you going to need from it in the future (like in this case)
so its better to send the whole thing and choose what you need in code (src, id, dataset attrib)

1 Like