I made a mess of the previous post, so I redacted it.
This is the problem as it is now that I am facing:
I can control a template's button text and background colour on a machine.
I move it to another machine and all I can do is control the text.
Why?
Working machine template node (configuration for CSS):
<style id="baseline">
:root {
--dashboard-unit-width: 48px;
--dashboard-unit-height: 48px;
}
/* Best so far to fit 1x1 area */
.baseline {
background-color: var(--program-names-background);
color: var(--program-names-foreground);
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;
}
.starthere{
width: 100%;
border-radius: 10px;
font-size:1.0em;
font-weight:normal;
margin: 0;
border: none;
border-radius: 8px;
text-align: center;
padding: 0px 0px;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 0px 0px;
cursor: pointer;
}
.baseline.small{
font-size:0.8em;
}
.tiny{
font-size: 0.5em;
}
</style>
Button (other template) node:
<div id="GButtonM_AckEv">
<md-button style="background-color:{{msg.colour}}" class="md-button baseline">{{msg.payload}}
<md-tooltip>Ack Event</md-tooltip>
</md-button>
</div>
<script>
(function($scope) {
$('#GButtonM_AckEv').on('click', function(e) {
e.preventDefault(); //prevent default behavior
$scope.send({"topic":"momentary_regular","payload": true});
});
})(scope);
</script>
New machine's configuration code:
I am going through trying to find out if anything else is causing the problems by commenting out bits of the code.
To now I haven't found anything that does.
<style id="program-names">
:root {
--dashboard-unit-width: 48px;
--dashboard-unit-height: 48px;
}
.nr-dashboard-template {
padding: 0px;
}
/*
.program-names.disabled{
cursor: not-allowed;
pointer-events: none;
color: #aaaaaa !important;
}
.program-names:not([disabled]):hover{
background-color: #232323 !important;
}
*/
/* This is the normal button definition */
.program-names{
background-color: var(--program-names-background);
color: var(--program-names-foreground);
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 program-names bigger"> */
/* note the (space) "bigger" at the end. */
.program-names.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 */
.program-names.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;
}
.program-names.black{
background-color: var(--program-names-background) !important;
color: var(--program-names-foreground) !important;
}
.program-names.red{
background-color: red !important;
color: var(--program-names-foreground) !important;
}
.program-names.red:not([disabled]):hover{
background-color: orange !important;
}
.program-names.darkred{
background-color: darkred !important;
color: black !important;
}
</style>
Other machine's button node:
<div id="GButtonM_AckEv">
<md-button style="background-color:{{msg.colour}}" class="md-button program-names">{{msg.text}}
<md-tooltip>Ack Event</md-tooltip>
</md-button>
</div>
<script>
(function($scope) {
$('#GButtonM_AckEv').on('click', function(e) {
e.preventDefault(); //prevent default behavior
$scope.send({"topic":"momentary_regular","payload": true});
});
})(scope);
</script>
Given they use different parts of the msg to display the text (either payload or text) on the new machine I can't get the background colour to change.
Please.
Someone?
Another update
After getting fed up with it, shutting down and coming back to it later, it works.
Go figure!
