Html input from table with images

General
1

Hi!

Trying to create a html page with iamges that sends a payload to nr.
Found some examples but cannot get it to work that it sends the id as a payload.
Can somebody help me to tell me what i do wrong?
My flow is below

[{"id":"b11293a5f92bf98a","type":"ui_template","z":"a9c11d25de2e5544","group":"61db9c3f37fc1036","name":"","order":1,"width":"6","height":"7","format":"<!doctype html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<title>Test</title>\n</head>\n\n<body>\n<table width=\"95%\" border=\"0\">\n  <tbody>\n    <tr>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg()\" id =\"99\"/></td>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg()\"/></td>\n    </tr>\n    <tr>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg()\"/></td>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg()\"/></td>\n    </tr>\n  </tbody>\n</table>\n\n\t<script>\n    (function(scope) {\n        scope.sendMsg = function() {\n    scope.send({ payload: { button: Number(scope)}})\n}\n\n})(scope);\n</script>\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":240,"wires":[["75d8d7a42c1072d4"]]},{"id":"75d8d7a42c1072d4","type":"debug","z":"a9c11d25de2e5544","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":240,"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}]
2

A quick search on the internets on how to pass event with Angular's ng-click
ng-click="sendMsg($event)"

then in your function :

 scope.sendMsg = function(event) {
        console.log("Triggered", event)
        scope.send({ payload: { button: Number(event.target.id)}})
}

Flow :

[{"id":"b11293a5f92bf98a","type":"ui_template","z":"5847b7aa62131d37","group":"61db9c3f37fc1036","name":"","order":1,"width":"6","height":"7","format":"<!doctype html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<title>Test</title>\n</head>\n\n<body>\n<table width=\"95%\" border=\"0\">\n  <tbody>\n    <tr>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg($event)\" id =\"99\"/></td>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg($event)\"/></td>\n    </tr>\n    <tr>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg($event)\"/></td>\n      <td><img src=\"image.jpg\" width=\"65\" height=\"65\" alt=\"\" ng-click=\"sendMsg($event)\"/></td>\n    </tr>\n  </tbody>\n</table>\n\n\t<script>\n    (function(scope) {\n        scope.sendMsg = function(event) {\n        console.log(\"Triggered\", event)\n        scope.send({ payload: { button: Number(event.target.id)}})\n}\n\n})(scope);\n</script>\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":400,"y":1240,"wires":[["75d8d7a42c1072d4"]]},{"id":"75d8d7a42c1072d4","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1240,"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}]

ps. you'll need id's for the rest of the images

1 Like
3

Thanks! for your reply!

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.