Let's try to add something
In styling template find .remote-button class and replace with this
.remote-button{
background-color: black !important;
color: #cccccc !important;
height: var(--dashboard-unit-height);
width: 100%;
font-size:1.0em;
font-weight:bold;
margin: 0;
min-height: 36px;
min-width: unset;
line-height: unset;
}
Wow!
That's interesting.
Slightly annoyingly, I don't know what the old stuff is now and so can't compare.
(Not against you. Just saying.)
I'll dig up the old code and see if I can work it out.
You are using angular theme in ui_template opiton. That's fine if it works for other stuff in your dashboard. We just adjusted to be fine with it as you see.
Don't yet do much to modify.
Just look at your original stuff and copy and modify to get additional buttons which are different:
Add them, show the result, and then lets talk about what is needed to be changed
Then we prepare best strategy ho to change
And then finally it's time to modify the look of texts and icons.
I don't know. But there are no other tabs active - if that is relevant.
Sorry: yes it is selected!
Sorry? Alas just now the machine is starting afresh (after recent events) so I don't know how to answer that.
Would the different numbers in the dashboard site which were/are different: 48 6 0 6 where you have 48 6 4 4
Just that I have looked at the other machines (some) and they are set with 48 6 0 6.
Which would mean if I change this machine any stuff I design may not work on others.
So sorry, I'm not understanding what I need to do.
All the template nodes I made were all work in progress as I didn't fully understand what was what and its effect on other things.
Look up from this thread, there is images of you previous stuff. And only you know what kind of buttons you will need
Explaining a little more why.
If we have similary looking buttons like just single digit as text - they can have same CSS rules to look ok. If something different needed to be shown, the rules may be needed to be adjusted.
Just to be sure we have all different buttons to create, we need to know what they will be.
Well until now I am using the button from the standard dashboard.
I am diversifying to use the template node too...
Just for clarity this is the screen grab of the icons used:
Does that help?
This is fine. Keep it.
And go back to adding different looking buttons step.
So you want me to look at the other template nodes I used to set up things for my buttons?
1 -
<style>
.nr-dashboard-cardtitle {
text-align:center;
}
</style>
That is just to centre text in headings.
2 -
<style>
.nr-dashboard-cardtitle {
text-align:center;
}
body {
background-image: url("/Pictures/metal_4.jpg");
background-repeat: repeat;
}
#HDMI_TV_control_Full_Remote,#HDMI_TV_control_Full_Remote2,#HDMI_TV_control_Audio,#HDMI_TV_control_Navigation,#HDMI_TV_control_Playback_Ctl,#HDMI_TV_control_POWER{
background-image: url("/Pictures/metal_2.jpg");
}
</style>
Remote control for TV. Background pictures and text centring again.
3 -
<style>
/* Best so far to fit 1x1 area */
.RCButtons1 {
border: none;
border-radius: 10px;
text-align: center;
background-color: black; /* Backfound colour */
color: white;
padding: 15px 0px;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 0px 0px;
cursor: pointer;
}
</style>
This is also on the TV remote tab which I had for the remote controls I have shown.
4 -
<style>
.nr-dashboard-cardtitle {
text-align:center;
}
body {
background-image: url("/Pictures/metal_4.jpg");
background-repeat: repeat;
}
#IR_Remote_Controler_TV-1,#IR_Remote_Controler_TV-2,#IR_Remote_Controler_Amp{
background-image: url("/Pictures/metal_2.jpg");
}
}
</style>
IR remote control screen
5 -
<style>
.bigIcon{
font-size:2em;
text-shadow: 1px 1px 5px #00000099;
}
.bigIcon.red{
color:red;
}
.bigIcon.blue{
color:blue;
}
.bigIcon.green{
color:lime;
}
#Home{
background-color:yellow;
}
</style>
Another button thing.
6 -
<style>
/* Best so far to fit 1x1 area */
.baseline {
border: none;
border-radius: 8px;
text-align: center;
background-color: black; /* Backfound colour */
color: {{msg.colour}}; /* "Font" (forground) colour */
padding: 15px 0px;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 0px 0px;
cursor: pointer;
}
</style>
That one was nearly working.
But I think that is really going to be a lot of work to get through.
Sorry.
No.
Do copy from one of my prepared button
and add it with name or icon of what ever needed (but only if it is graphically really different from others)
Like NETFLIX button. Looong text to show.
And it will be look bad currently and this is also fine 
But that's why we need all of them. To be manipulated with CSS in correct manner.
Just to keep your attention, do you see that there is different buttons prepared for you?
Just a button
Button with momentary action
And Buttons with icons in it.
When you copy, just copy the correct one (as you only know what is needed)
Sorry, I am not understanding what you mean.
There are (so far)
1 - buttons that are happy with only text in them.
They are usually a simple button that just sends a message when pressed.
2 - buttons that have one (or more) icons on them.
(pause/play as an example) that send an alternating message. Though that is handled outside the button.
3 - buttons with icons that send a pulsed stream when pressed - and held.
Though again: that is handled outside the button.
4 - colour changing buttons when pressed - and held.
So I don't understand what you want me to give you.
Ideally I am going for a button (or group of nodes that work as a button) that can accommodate all that and....
being able to be disabled.
But that is a whole other thing, as turning on the button's opacity is not going to work.
What I need is an overlay of the font-awesome-ban icon. (Stack) and that would be over the existing icon (though that may cause problems with md-icons and text.
Well, that is the best solution I can think of for now.......
Another option is to just change the font colour to match the background colour.
Then the button is invisible and can't be pressed.
Oh, though when disabled, no output is sent even if pressed. But that's a given.
I want to have all buttons made and put into that group which are graphically different
Do not think about the behavior of buttons too much yet.
Just the graphical difference.
As we are preparing CSS to make them all look ok currently. This is the task. Stick to it.
Ok, I think I get you.
Ok:
#1
template node.
2 x 1 size
<md-button class="vibrate filled touched bigfont rounded" style="background-color:#000000" ng-click="send({payload: 'X'})">
<i class="material-icons">
<span style="color:{{msg.payload.pause}}">pause</span> / <span style="color:{{msg.payload.play}}">play_arrow</span>
</i>
</md-button>
#2
template node
2 x 1 size
<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})"> <i class="material-icons"> <span style="color:{{msg.colour}}"> volume_up </i> </button>
#3
button node
1 x 1 size
[{"id":"e1cf7fd.54c678","type":"ui_button","z":"1781e581.31721a","name":"i","group":"48d9dd9c.267f3c","order":10,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"black","icon":"fa-info-circle fa-2x","payload":"i","payloadType":"str","topic":"","x":260,"y":600,"wires":[["4d74506f.7cf048"]]},{"id":"48d9dd9c.267f3c","type":"ui_group","z":"","name":"Full_Remote","tab":"b128eb09.9f681","order":1,"disp":false,"width":"3","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false}]
There are more like that last one.
Different icons and sizes.
Do you need them also?
Is that what you are meaning?
P.S.
To establish the "What I want":
This is a button - though a simple one.
(two nodes as one sets the environment for it)
[{"id":"b11b2dfa.681818","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"","order":32,"width":0,"height":0,"format":"<style>\n/* Best so far to fit 1x1 area */\n.RCButtons1 {\n border: none;\n border-radius: 10px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: white;\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":1330,"wires":[[]]},{"id":"fa5496b7.143f98","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"3","order":3,"width":"1","height":"1","format":"<button class=\"RCButtons1\" ng-click=\"send({payload: 'bar'})\">3</button>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1370,"wires":[["80b64ca.c7a903"]]},{"id":"eabe7d43.b23f48","type":"ui_group","z":"","name":"Full_Remote2","tab":"b128eb09.9f681","order":3,"disp":false,"width":"3","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false}]
I think we agreed that we will left the regular buttons and do them all with template?
Let's keep that route.. No regular buttons. Cos you don't want to have another session on topic of how to style them to get same result as with template buttons.
And copy my template and just modify the content to have text or icon or what is needed.
100% agree.
What I showed you just then is a cross section of buttons I use now, and want to not use.
We agree on that.
Some of them are thinner than the others. The play/pause button for instance.
The others are just tricky for me, because when I try to use them, I can't scale the icon, or something like that.
So, I am sorry, but as I see it, I am waiting for you to explain/show me the main template node which sets up things to get these things happening.
I also agree/accept there is/was a problem with the numbers I had in my dashboard configuration for sizes.
I'm not sure that will propagate down to the other machines easily.
However if we get it working at this stage, any changes should only be Procedural in getting the other values to work too.
Just after you are ready with adding all the strange - looking (play pause) and long text (netflix) templates, we start to find solution in CSS to show them correctly. Trust me, it will work.
I do trust you.
I believe in you too. I know you know more than me. (That isn't hard to do.)
I am sorry I sometimes get stuck on details.
But I am glad we are now going in very close to the same direction at this point in time.
The long text example (netflix) as you pointed out is/was just a band aide to the problem.
I don't have netlfix anyway. I just did that to keep the virtual remote looking as much the same as the real one.
The font could be smaller - don't know if that is easy or not - or I could just ignore the button.
I'm not really going to be using it as far as I know.
It is just the icons that trip me up. Some font-awesome and some material-design.
And maybe having to mix them? (The ban icon for disabled)
But really the disabled is out of the scope of things for this project.
That is used more for future things I need to get done.
But I shall try to not get too far ahead of myself - or us - but I think it would be strategic to get it implemented here/now rather than in the future.
You are still one step ahead of me. Do copy's. We need to have them side by side always visible cos if we start to add or modify, we need to be sure that we don't break any of them by modifications.
I'll need go to do some other stuff for a while, and hope you can do the buttons ready and share to me the flow with buttons waiting to be styled.
Keep concentrated ..
I'll try.
But understand I am stuck between a rock and hard place, because (now) all the other tabs are disabled so there is/are no CSS conflicts.
I'll enable a sheet/page/tab (I can't get the names right) and show you the GUI side then post the code.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy