there are fa-globe (www?) and fa-video-camera (video?) and fa-sign-in (bottom right icon?)
sign-in may do.
I might just leave the www button as is.
Any ideas why I can't get fa-indent to work?
I just realized that all icons have fa-fw class, but it actually doesn't make any good for them. So It will be better to remove it.
No problems.
I'll do that.
Back soon.
But thoughts on the indent?
Works here...
<md-button class="md-button remote-button">
<i class="fa fa-indent remote-icon"></i>
</md-button>
Maybe it was a problem with the other gremlins I had.
I also want it left/right swapped. That's rotate-horizontal yes?
Yeah, works now.
This is the screen for what it looks like
I think I may win a badge for the most screen shots posted the way I am going.
It is 00:56 local here.
I think I had better call it a day. The eye lids are getting heavy.
(Just the mute and the volume buttons.)
Could they be done tomorrow? Though it is already tomorrow here. 
Quite of step forward 
Good job!
Thank you very much for the time and effort.
I am really thankful.
1 Like
See you in about ...... 18 hours?
We are covid-prisoners so I'm easy to find 
Not to annoy you, but I'm up.
I got the mute button working better.
This is the code:
<div id="regular_plus">
<md-button class="md-button remote-button">
<i class="material-icons"> volume_off</i>
</md-button>
</div>
<script>
(function($scope) {
$('#regular_plus').on('click', function(e) {
e.preventDefault(); //prevent default behavior
$scope.send({"topic":"regular_plus","payload": "mute"});
});
})(scope);
</script>
So I think I am starting to get the idea.
Though what I may do (or try to) is sit down and study the format of how this is being done.
Something is still niggling away at me though.
You showed me about the bold option for the numbered buttons.
Where each button looked similar to this:
<div id="regular_1">
<md-button class="md-button remote-button num">8
</md-button>
</div>
<script>
(function($scope) {
$('#regular_1').on('click', function(e) {
e.preventDefault(); //prevent default behavior
$scope.send({"topic":"momentary_regular","payload": 8});
});
})(scope);
</script>
Which is derived from md-button remote-button num (though yes, I did say bold.)
Anyway, that is clear.
So why the change of format when we did the icon ones to:
.remote-icon{
font-size:2.0em;
}
Not a bit problem. It works. It just seems strange to suddenly do it that way.
Anyway, I'm not sweating on a quick reply. As I said: I want to sit down and look at what we did and try to get a better understanding of how it all works together.
It seems I will have just a little time for computer today. My wife gave me some tools like vacuum cleaner, a mop and some soft chemicals and stuff like that and 200+ square meters to play with them.
So you can do experiments on top what is done and gain your knowledge meantime.
2 Likes
Don't get in trouble with the boss for me.
It isn't critical, and where I am at, I am kind of curious to try things myself anyway.
Just those questions I asked would be helpful.
(This post is getting edited a bit.... But I think it is better than flooding the thread with accidental threads.)
Just thinking of the look of the page....... Or buttons, sorry.
To try and make it look as much the same as the real one, some new things came to mind:
1 - Two icons on a button. (One, maybe two at most)
2 - Icon and text. Icon over text.
I'll stop there for this edit.
(oh, going back to something which I posted about, deleted but then worked out the cause.)
(Read update at the end of this part)
This is the template node I am using:
<style id="remote-buttons">
:root {
--dashboard-unit-width: 48px;
--dashboard-unit-height: 48px;
}
.nr-dashboard-template {
padding: 0px;
}
.remote-button:not([disabled]):hover{
background-color: #232323 !important;
}
/* This is the normal button definition */
.remote-button{
background-color: black !important;
color: #cccccc !important;
height: var(--dashboard-unit-height);
width: 100%;
border-radius: 10px;
font-size:1.0em;
font-weight:normal;
margin: 0;
min-height: 36px;
min-width: unset;
line-height: unset;
}
/* This is a sub-set which is invoked by */
/* <md-button class="md-button remote-button bigger"> */
/* note the (space) "bigger" at the end. */
.remote-button.bigger{
font-weight:bold;
font-size:1.5em;
}
/* This is for buttons with a lot of text. `font-size:0.7em` */
/* makes the font 70% normal size */
.remote-button.small{
font-size:0.7em;
}
/* This is for buttons with just icons, to upsize the size */
/* of the icon with the line: */
/* <i class="fa fa-fw fa-plus remote-icon"> in the other node */
.remote-icon{
font-size:2.0em;
}
/* This is the same as the other one, but it makes the icon smaller */
.remote-iconS{
font-size:0.5em;
}
.remote-button.red{
background-color: red !important;
color: #cccccc !important;
}
.remote-button.red:not([disabled]):hover{
background-color: orange !important;
}
</style>
The problem came about when I activated another tab.
This is that template node:
<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,#IR_Remote_Controler_DVD{
background-image: url("/Pictures/metal_2.jpg");
}
}
</style>
When this second node is active, the icons are not resized to the larger size.
After thinking, testing etc, I worked out it is cause.
So if I disable the second template node, the icons are the larger size.
It isn't that complicated, but looking at it, I can't really understand the conflict that causes the problem.
(End of this part)
Update:
Ok, part of the problem was that it was widget in group.
Once I changed that it worked.
So that is now working, but I guess the question remains.
Andrew, I dont want to muddy the waters or divert the conversation between yourself and hotnipi, but if you are interested - i did this demo...
I can send flow privately to not pollute this thread if you wish. Not a problem, if you dont need it, not a problem.
1 Like
No, thanks.
(Re-reading this, I had maybe clarify that)
I don't mind you helping.
The mute is a bit tricky to which icon to use.
The volume off (I think it is) doesn't imply to me MUTE. The volume off is more intuitive to me.
I toggle that with the other speaker icon. volume up.
So your code would be interesting.
(If you don't mind)
I am really stuck with how the different classes are applied to the node.
One way it is done like:
<md-button class="md-button remote-button num">
But another way is:
(From my post)
So why the change of format when we did the icon ones to:
.remote-icon{
font-size:2.0em;
}
Not a bit problem. It works. It just seems strange to suddenly do it that way.
I am missing the why in why it is being done.
If you want to post the code, I will look at it. As you (probably) have seen, @hotNipi is a bit busy.
I'll send it privately to avoid pollution.
There are somethings you can, somethings you cant and somethings you shouldnt do.
I trust hotnipi is directing you (without spelling this out)
To address your particular points...
<md-button class="md-button remote-button num">- This is USING the class
.remote-icon{ font-size:2.0em; }- This is CREATING the class
Some pointers on multiple classes - click to reveal
the below is conceptual - (NOT code for you to use).
I'll try to give you an easy example to back up your knowledge.
- sometimes you might have 2 or 3 or even 10 classes applied to a button
- e.g.
<button class="fancy-shadow animated big round red"></button>
- e.g.
The reason for this is, you can REUSE them classes in other things for example, an input...
<input class="fancy-shadow big"></input>- here, it makes no sense to animate an input BUT we do want it the same size (
big) and we do want the exact same shadow (fancy-shadow) applied
- here, it makes no sense to animate an input BUT we do want it the same size (
Also, you can create other buttons/inputs/divs/etc where they are ALL the same size (setup in the big class) and have all the beautiful fancy stuff( setup in these 2 classes fancy-shadow animated) BUT some are RED and some are BLUE e.g...
<button class="fancy-shadow animated big round red"></button>
<button class="fancy-shadow animated big round blue"></button>
In essence,
- you only created
bigclass once but used it 4 times - and EVERYTHING you used it on, is exactly the same size and font etc - you only created
fancy-shadowclass once but used it 4 times - and EVERYTHING you used it on, has the exact same shadows
1 Like
The answer is in post #144. And there is no difference at all. The count of classes may differ and the classes itself differ. Everything else is just a same.
Sorry, it isn't I was (am) not appreciating your help. Steve was here now, and I just wanted to bounce the stuff off him.
I have got it all working great (to where we were).
I will re-post what we have again, as I got bored and tidied up the names of the classes so it fitted my mindset better.
(But I'll wait for you to ask, as you may be busy just now)
(Though at the end of the day I guess I am going to post it anyway)
Though maybe a bit Off topic (how can it be in this thread?) I actually have documented that post.
I am trying to get two icons on one button. Not having any luck.
I tried to do a few things but putting two icons consecutively wasn't working.
I give up after 20 minutes. Possibly because I was missing something in the structure of how you put two icons together on the same button.
I think it was complicated because they were material-design and not font-awesome.
No. They were both fa icons.
Anyway, we will get to that in due time.
You have it done previously. The play/pause button. If it was template based then you just need to replicate the content of it. Just you'll need to adjust it to use new classes to get them visually similar to other buttons.
It may happen that you will need to create another class for this kind of button cos it is different.
<div id="regular_1">
<md-button class="md-button remote-button">
// here will be your elemets (2 icons and a "/" in between)
// <span> tag will be needed cos you want to make them align
</md-button>
</div>
