Template Button - How do I Change its Appearance?

eddee54455 · 27 October 2021 19:24

Hi All,

I have made the most basic of basic dashboard buttons...

[
    {
        "id": "5773e8c258209a92",
        "type": "debug",
        "z": "bb0c8939b7b482ce",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 350,
        "y": 250,
        "wires": []
    },
    {
        "id": "3e94509d52886ac7",
        "type": "ui_template",
        "z": "bb0c8939b7b482ce",
        "group": "c713dff5.21ab3",
        "name": "Press_Me",
        "order": 1,
        "width": "2",
        "height": "2",
        "format": "<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\">Some text</div>\n<md-button\n    ng-mousedown=\"send({payload: true})\"\n    ng-mouseup=\"send({payload: false})\"\n    >Press_Me\n</md-button>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 180,
        "y": 250,
        "wires": [
            [
                "5773e8c258209a92"
            ]
        ]
    },
    {
        "id": "c713dff5.21ab3",
        "type": "ui_group",
        "name": "Test",
        "tab": "a2b4d00e.93a548",
        "order": 1,
        "disp": false,
        "width": "10",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a2b4d00e.93a548",
        "type": "ui_tab",
        "name": "Test",
        "icon": "book",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Press on it with any mouse button and hold the button in, it sends true .... Release the mouse button and it sends false .... Press and hold the mouse button, it sends true then drag the cursor off the button and release, it does not send an accompanying false ... (Acts like a latched button).... Great!!

Now, the question is: How can I change the appearance of this button by using a .png file in my static folder? I would like the button to have a unpressed and a pressed .png image/icon which changes on mouse click?

Are there any easy solutions to this?

TIA
Ed

UnborN · 27 October 2021 20:24

Hello ..

instead of simply sending a msg with those Angular ng- click events ..
you could trigger intermediate functions that do the extra job of changing the background image of your buttons (and also send the msg to NR)

Example code:
(in the example i just change the css color but you have code commented out to test for backgroundImage)



<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >Press_Me 1
</md-button>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >Press_Me 2
</md-button>

<script>

(function(scope) {
  
scope.mousedown = function(event) {
// event.target.style.backgroundImage = "url('btn_down.png')";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
// event.target.style.backgroundImage = "url('btn_up.png')";
event.target.style.color = "blue";
scope.send({payload: false})
}


})(scope);

</script>

eddee54455 · 28 October 2021 10:56

Thanks for coming back to me!!

I plugged it in, the colour change works a treat!!

---but---

Couldn't get the image to change... an excerpt from the code:

event.target.style.backgroundImage = "url('/home/ed/.node-red/node-red-static/png/Left_Arrow_Button1')";

I tried the above as well as:

event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1')";

(/home/ed/.node-red/node-red-static is obviously the static directory as set in settings.js)

Another question that is going to come up once the button pic changes, will be "How do I set the 'initial' picture of the button before it is pressed?"

As you can gather, I am of the "codingly challenged" society!!

TIA
Ed

UnborN · 28 October 2021 11:08

hello ..

you need to add the extension .png after each image (Left_Arrow_Button1.png)
make sure the images are in png folder under the node-red-static folder you defined in settings.js

eddee54455 · 28 October 2021 11:14

Bwahahahaha.... What an ass I am!! .... Shows my inexperience!!

Shotto! Working!!

A quick way to "scale" it maybe? (so it only shows one image)....

screenshot-127.0.0.1_1880-2021.10.28-13_13_09

(And no background if possible)

TIA
Ed

UnborN · 28 October 2021 11:26

missed that part .. hmm .. maybe with inline css style on each element or define styles in <style> tags
<md-button style="background-image= url('/png/btn_initial_state.png');" ...

im not sure but you can experiment with different background-repeat , background-size image css
a list of them on w3schools

note.as you have noticed the css name is a bit different with how you call it js.
for example css : background-image will be backgroundImage camelcase? in JS

eddee54455 · 28 October 2021 12:37

Thanks for the pointer!!!!!

And... Believe it or not, one critical bit I have missed till now:

Cheers
E

eddee54455 · 28 October 2021 13:26

Ok, got the image scaling right and kinda understand it too!! Bonus!!

The camelCase hint explains why everything I tried didn't work (Remember, not only am I a NooB, but also an honorary member of the DNA...."National Dyslexic's Association")

I just cant seem to get the initial image to work... I know it's something basic, just a whole lot of clueless on my side... I must apologise @UnborN .... I'm not so bright at this!!

Here is what I have got so far, but the initial image is not working..

<div id="{{'my_'+$id}}" style="backgroundImage=url('/png/Left_Arrow_Button.png')">UnBorn</div>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >1
</md-button>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >2
</md-button>

<script>
//style="{{'color:'+theme.base_color}}" 
//style="backgroundImage= url('/png/Left_Arrow_Button.png')"

(function(scope) {
scope.mousedown = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1.png')";
event.target.style.backgroundRepeat = "no-repeat";
event.target.style.backgroundSize = "100% 100%";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button.png')";
event.target.style.backgroundSize = "100% 100%";
event.target.style.color = "blue";
scope.send({payload: false})
}


})(scope);

</script>

Ed

UnborN · 28 October 2021 13:34

wait a second .. what image background you want to change ? the div's ?
i was under the impression that it was the md-button's.
if its for the md-button then the initial inline css style should be on the md-button

<md-button style="background-image=url('/png/Left_Arrow_Button.png')"
   ng-mousedown="mousedown($event)"
   ng-mouseup="mouseup($event)"
   >1
</md-button>

eddee54455 · 28 October 2021 13:56

Ok... Noob Alert... Start running!!

I have not an inkling of what the div's do... I am parroting to the n'th degree... But if I do try the code you put in above, the initial image "unclicked", looks like (1) until it's clicked and released, then it looks like (2) .... See below:

screenshot-127.0.0.1_1880-2021.10.28-15_52_28

To explain, I would like both buttons to look like (2) initially, before even clicked...

I tried adding the section but no change was visible - Immediately I deployed it, the buttons both looked like (1) until they were clicked...

Thanks so much for your time and help!!

Ed

UnborN · 28 October 2021 16:13

can you tell us the file names + extensions of the images (x3) for :

initial image
mousedown image
mouseup image

ahem! .. someone has some studying to do .. div is an html element that is more or less a container for other elements or text
for a better description read here
or even better an HTML, CSS, JS crash course here

eddee54455 · 28 October 2021 16:42

Might sound a bit cryptic, but initial image would usually be the same as mouseup image...

Up:
Down:

Already having a brainfreeze.... But will try!!

UnborN · 28 October 2021 17:13

so initial image should be /png/Left_Arrow_Button.png

like this ?

<div id="{{'my_'+$id}}">UnBorn</div>

<md-button
    style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"
    ng-mousedown="mousedown($event)" ng-mouseup="mouseup($event)">1</md-button>

<md-button
    style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"
    ng-mousedown="mousedown($event)" ng-mouseup="mouseup($event)">2
</md-button>

<script>


(function(scope) {
    
scope.mousedown = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1.png')";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button.png')";
event.target.style.color = "blue";
scope.send({payload: false})
}


})(scope);

</script>

eddee54455 · 28 October 2021 17:39

Brilliant!! That works a treat!!

I struggled to get that single line out: style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"

Dromedary text, amongst other things, messed me around....

I will try and read up on the crash course... If for nothing else, just to try find out how to get rid of the "default" blue/green background...

eddee54455 · 28 October 2021 21:42

And.... after well a lot of scratching..... I found this:

background-color:transparent

Added it to this line:

style="background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; background-color:transparent; background-size: 100% 100%;"

And now I have this:
screenshot-127.0.0.1_1880-2021.10.28-23_41_28

Happiness in the land!!

Edit: Made bigger and clearer.... old eyes et al:

screenshot-127.0.0.1_1880-2021.10.28-23_53_10

eddee54455 · 8 November 2021 12:27

Hi Andy,

I have been trying a few things and come up with a question regarding "cramming" of 2x Buttons onto a single tile/widget...

With these nodes, I can get an up and a down arrow onto a single tile...

[
    {
        "id": "49d39c46ac6b092b",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile",
        "order": 10,
        "width": 1,
        "height": 1,
        "format": "<div id=\"{{'my_'+$id}}\" \nstyle=\"{{'color:'+theme.base_color}}\" ></div>\n\n\n<md-button \n   style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n   background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n   ng-mousedown=\"mousedownT($event)\"\n   ng-mouseup=\"mouseupT($event)\"\n   >\n</md-button>\n\n<md-button \n    style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent; background-size: 100% 25%;button-size: 100% 25%\"\n    ng-mousedown=\"mousedownB($event)\"\n    ng-mouseup=\"mouseupB($event)\"\n    >\n</md-button>\n\n<script>\n(function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 50,
        "wires": [
            [
                "4ff1e912ccebdb0e"
            ]
        ]
    },
    {
        "id": "4ff1e912ccebdb0e",
        "type": "debug",
        "z": "c5c2730f3af33875",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 380,
        "y": 50,
        "wires": []
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

Now, the question is: I can scale the "icon" perfectly, it works beautifully, but the widget has a "scroll bar" come up when I resize it down to a single "tile" vertically....
2 Tiles vertical span:
screenshot-127.0.0.1_1880-2021.11.08-14_23_37
1 Tile:

Any idea as to how I can get rid of the scroll bar?

Regds
Ed

UnborN · 8 November 2021 13:12

Hi Ed,

the dimensions of your widget is so small that its little difficult to control its size precisely.
you can try to give your ui_template a unique class name so you can target it with css

then at the top of the code

<style>
    .myButtons {
  overflow: hidden; /* Hide scrollbars */
}
</style>

...

i havent tested it fully since i dont have your button images

eddee54455 · 10 November 2021 18:06

Take a look at these if you would be so kind...

Here is the template:

[
    {
        "id": "49d39c46ac6b092b",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile",
        "order": 1,
        "width": 1,
        "height": 1,
        "format": "<div id=\"{{'my_'+$id}}\" \nstyle=\"{{'color:'+theme.base_color}}\" ></div>\n\n\n<md-button \n   style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n   background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n   ng-mousedown=\"mousedownT($event)\"\n   ng-mouseup=\"mouseupT($event)\"\n   >\n</md-button>\n\n<md-button \n    style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent; background-size: 100% 25%;button-size: 100% 25%\"\n    ng-mousedown=\"mousedownB($event)\"\n    ng-mouseup=\"mouseupB($event)\"\n    >\n</md-button>\n\n<script>\n(function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 50,
        "wires": [
            [
                "4ff1e912ccebdb0e"
            ]
        ]
    },
    {
        "id": "4ff1e912ccebdb0e",
        "type": "debug",
        "z": "c5c2730f3af33875",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 380,
        "y": 50,
        "wires": []
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

And the associated png files:

This might give you more of an idea...

Thanks for the help!!

Ed

UnborN · 10 November 2021 18:59

i see .. the problem was that the md-button element had a default style with a set min-width.
that didnt allow the widget to show up in the 1x1 size.
(without showing scrollbars that is)

so create a style tag and override that property

<style>
    .md-button {
        min-width: 0px;
    }
</style>

Flow:

[{"id":"49d39c46ac6b092b","type":"ui_template","z":"5847b7aa62131d37","group":"0778f2d6568500cc","name":"Up/Dn + Press - Single Tile","order":1,"width":"1","height":"2","format":"<style>\n    .md-button {\n        min-width: 0px;\n    }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n   background-color:transparent; background-size: 25px 20px; button-size: 25px 20px\" ng-mousedown=\"mousedownT($event)\"\n    ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent;  background-size: 25px 20px; button-size: 25px 20px\"\n    ng-mousedown=\"mousedownB($event)\" ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n    (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":380,"y":1460,"wires":[["4ff1e912ccebdb0e"]]},{"id":"4ff1e912ccebdb0e","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1460,"wires":[]},{"id":"0778f2d6568500cc","type":"ui_group","name":"Group 1","tab":"026fcdc7367db27f","order":1,"disp":true,"width":"1","collapse":false,"className":""},{"id":"026fcdc7367db27f","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":2}]

eddee54455 · 11 November 2021 12:20

Hi Andy,

Thanks for coming back to me!

Here is what I have accomplished:

[
    {
        "id": "a666512dc3f3d340",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile 3",
        "order": 4,
        "width": 1,
        "height": 1,
        "format": "<style>\n    .md-button {\n        min-width: 0%;\n        min-height:0%;\n        overflow: hidden\n    }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n   ng-mousedown=\"mousedownT($event)\"\n   ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent;  background-size: 100% 25%; button-size: 100% 25%\"\n    ng-mousedown=\"mousedownB($event)\" \n    ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n    (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 230,
        "wires": [
            []
        ]
    },
    {
        "id": "b4bfe2d1ec854367",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile 3",
        "order": 3,
        "width": 1,
        "height": 2,
        "format": "<style>\n    .md-button {\n        min-width: 0%;\n        min-height:0%;\n        overflow: hidden\n    }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n   ng-mousedown=\"mousedownT($event)\"\n   ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n    background-color:transparent;  background-size: 100% 25%; button-size: 100% 25%\"\n    ng-mousedown=\"mousedownB($event)\" \n    ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n    (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 190,
        "wires": [
            []
        ]
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

If you look at the below screen capture, as long as I spread the "dual button" across two tiles vertically, the scroll bar disappears and both arrows are visible...

screenshot-127.0.0.1_1880-2021.11.11-14_18_31

To recap, I am trying to fit both the up and down buttons onto a single tile, trying to get a similar effect to this:

screenshot-127.0.0.1_1880-2021.11.11-14_19_36

Almost there!!

Thanks heaps yet again!!

Regds
Ed

Topic		Replies	Views
Help with (yet another) button Dashboard	9	478	14 May 2020
Template Button Dashboard	3	250	20 October 2023
Button colour (using TEMPLATE node) help - the next stage Dashboard	3	1289	25 April 2020
Going in circles with `CSS` buttons Dashboard	8	758	23 June 2020
Ui-Template Button samples for dashboard-1 Share Your Projects node-red-dashboard	1	88	11 September 2024

Template Button - How do I Change its Appearance?

Related topics