Hi all,
I want to place an image onto the dash board and make the image clickable, so that it makes you go to the next tab.
Any suggestions on how to do this?
I tried making a background image then floating a transparent button over the image but its not working. The inbuilt dashboard button will not do it, so I have tried using a dasbhoard UI_Template. I placed an image into the background. I borrowed some code from scargill (https://tech.scargill.net/node-red-dashboard-template-buttons-updated/) and made the button transparent using opacity function.
I was hoping the button would float over the image that you could see behind. But it is not working as expected. I think there must be a better way to do this, is there a way to just make an image clickable? Any help appreciated. Thanks!
[{"id":"4bb58e63.67338","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"164c35e1.6ad53a","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","waitfor":"","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"8b6aea82.5fc018","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"Arial,Arial,Helvetica,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"kallos_display","default":"#4B7930","baseColor":"#000000","baseFont":"Arial,Arial,Helvetica,sans-serif","reset":false},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":true},"page-titlebar-backgroundColor":{"value":"#097479","edited":true},"page-backgroundColor":{"value":"#111111","edited":true},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":true},"group-borderColor":{"value":"#555555","edited":true},"group-backgroundColor":{"value":"#333333","edited":true},"widget-textColor":{"value":"#eeeeee","edited":true},"widget-backgroundColor":{"value":"#097479","edited":true},"widget-borderColor":{"value":"#333333","edited":true},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"true","allowSwipe":"false","lockMenu":"false","allowTempTheme":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":24,"sy":24,"gx":24,"gy":24,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"5fe7bd86.2270e4","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"ed346673.8581d8","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b1cd1006.8b583","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"3e54fac6.1cf0c6","type":"modbus-client","z":"","name":"PTronik ECO","clienttype":"serial","bufferCommands":false,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"2","serialParity":"none","serialConnectionDelay":"500","unit_id":"5","commandDelay":"10","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"86200213.ed3e2","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"b83b9a00.e641f8","type":"modbus-client","z":"","name":"2ndser","clienttype":"simpleser","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"COM8","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"ed14a9a6.314878","type":"ui_group","z":"","name":"Main_Page_Room_1","tab":"5fe7bd86.2270e4","order":2,"disp":false,"width":"20","collapse":false},{"id":"b52d7e75.0cd7","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","waitfor":"","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"ec644a88.dab798","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"a928dc16.e3367","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"e89bc95b.c65ec8","type":"modbus-client","z":"","name":"PTronik ECO","clienttype":"serial","bufferCommands":false,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"2","serialParity":"none","serialConnectionDelay":"500","unit_id":4,"commandDelay":10,"clientTimeout":1000,"reconnectTimeout":2000},{"id":"a05375c4.202d58","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"6a63be45.ebe96","type":"modbus-client","z":"","name":"2ndser","clienttype":"simpleser","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"COM8","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"78f0a934.552d68","type":"ui_group","z":"","name":"Main_Page_Room_2","tab":"5fe7bd86.2270e4","order":3,"disp":false,"width":"20","collapse":false},{"id":"ba5c6f1f.f927a","type":"ui_group","z":"","name":"Main_Page_Button","tab":"5fe7bd86.2270e4","order":1,"disp":false,"width":"60","collapse":false},{"id":"2125a22c.0b384e","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2},{"id":"65d810ec.bb4df","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button Image","order":1,"width":"23","height":"13","format":"<style>\n #Home_Main_Page_Button{\n background-image:url(\"../Bottom_Logo_Horizontal.jpg\" );\n background-repeat:no-repeat;\n background-size:contain;\n background-position:center center;\n }\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":100,"wires":[[]]},{"id":"7e048166.e96df","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button_Style","order":2,"width":"9","height":"5","format":"<style>\n \n:root {\n --myHighlight:url('');\n}\n \n.filled { \n height: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n \n.filled { \n height: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n background-color: transparent !important;\n }\n \n.nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n.rounded {\n border-radius: 10px 10px 10px 10px;\n font-size: 18px;\n}\n \n.highlight {\n background-color: gray !important;\n}\n \n.images {\n background-size: 100% 100%;\n background-repeat: no-repeat; \n }\n \n.highlight-image {\n background-image: var(--myHighlight) !important;\n}\n \n</style>\n \n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(80);\n});\n \n$('.touched').on('mousedown', function() {\n$(this).addClass('highlight');\nsetTimeout(() => $(this).removeClass('highlight'), 100);\n});\n \n$('.touched-image').on('mousedown', function() {\n$(this).addClass('highlight-image');\nsetTimeout(() => $(this).removeClass('highlight-image'), 200);\n});\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":390,"y":160,"wires":[["5bd0e443.b18d8c"]]},{"id":"5bd0e443.b18d8c","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button","order":3,"width":"9","height":"5","format":"<md-button class=\"vibrate filled touched rounded\"\n style=\"background-color:#000000; opacity:0.5\"\n ng-click=\"send({payload: 'on'})\"> \n On\n</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":550,"y":160,"wires":[[]]}]
