Hi folks, I'm new to raspberry pi, node-red and Angular JS so this is a steep learning curve for me!
My objective:
I am building on Robert Lando's Security Pin Dialog UI Template for Node-Red-Dashboard to create a touch screen interface on a 5" HDMI LCD with resistive touch overlay, driven by a Pi zero.
The problem:
I'm using dashboard template widgits to create the "touch" buttons but I'm having some issues.
-
The icon - I can't work out how to get the icon colour set to white. It appears to default to
#0099ff which I think is the default colour for dashboard widgits. -
Using the layout tab in the dashboard panel to set the size of the "button" (16 x 9) appears to be over-ridden by some thing because the buttons rendered are 16 units wide but only one unit high.
I would like to achieve the following:
Doorbell button
Touch button size = 16x9 (Dashboard grid)
Touch button colour = #0099ff
Icon size = 80px
Icon colour = white
Entry button
Touch button size = 16x3 (Dashboard grid)
Touch button colour = #0099ff
Icon size = 80px
Icon colour = white
![image|608x359](upload://rwasVZqE1J744DmkMMq2G3BKjw0.png) [{"id":"1cb74bb0.d2a2dc","type":"tab","label":"Button Testing","disabled":false,"info":""},{"id":"ac624975.4c0e9","type":"ui_template","z":"1cb74bb0.d2a2dc","group":"a9ce1485.b86988","name":"My test button","order":1,"width":12,"height":3,"format":"<md-button class=\"vibrate touched bigfont rounded\" style=\"background-color: pink\" ng-click=\"send({payload: 'Hello World'})\">\n<g>\n<ng-md-icon icon=\"notifications_active\" style=\"fill: white\" size=\"60\"></ng-md-icon>\n</g>\n</md-button>\n\n\n ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":380,"y":100,"wires":[[]]},{"id":"6387952c.e3f664","type":"ui_template","z":"1cb74bb0.d2a2dc","group":"a9ce1485.b86988","name":"My button","order":2,"width":"0","height":"0","format":"<md-button class=\"vibrate filled touched rounded\" width=\"200px\"height=\"100px\" style=\"background-color:#aa00ff\" ng-click=\"send({payload: 'Hello World'})\"> \n<g>\n<ng-md-icon icon=\"notifications_active\" style=\"fill: white\" size=\"80\"></ng-md-icon>\n</g>\n</md-button>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":400,"y":160,"wires":[[]],"icon":"node-red-dashboard/ui_button.png"},{"id":"a9ce1485.b86988","type":"ui_group","z":"","name":"Button Test","tab":"56eef930.4f00d","disp":true,"width":"12","collapse":false},{"id":"56eef930.4f00d","type":"ui_tab","z":"","name":"Button Testing","icon":"dashboard","disabled":false,"hidden":false}]
Icon size = 80px
Node-red start-up
C:\Users\richb>node-red
7 Jan 08:32:32 - [info]
Welcome to Node-RED
7 Jan 08:32:32 - [info] Node-RED version: v1.0.3
7 Jan 08:32:32 - [info] Node.js version: v12.14.0
7 Jan 08:32:32 - [info] Windows_NT 6.1.7601 x64 LE
7 Jan 08:32:33 - [info] Loading palette nodes
7 Jan 08:32:36 - [info] Dashboard version 2.19.2 started at /ui
7 Jan 08:32:37 - [warn] rpi-gpio : Raspberry Pi specific node set ina
7 Jan 08:32:37 - [info] Settings file : \Users\richb.node-red\setti
7 Jan 08:32:37 - [info] Context store : 'default' [module=memory]
7 Jan 08:32:37 - [info] User directory : \Users\richb.node-red
7 Jan 08:32:37 - [warn] Projects disabled : editorTheme.projects.enab
7 Jan 08:32:37 - [info] Flows file : \Users\richb.node-red\flows
op.json
7 Jan 08:32:37 - [info] Starting flows
7 Jan 08:32:37 - [info] Started flows
7 Jan 08:32:37 - [info] Server now running at http://127.0.0.1:1880/
Thank you for any help or suggestions,
rwvb