<div id="container">
<div id="btn-4ways">
<!-- Freccia verso l'alto -->
<svg viewBox="0 0 20 10" id="up" class="direction">
<path d="M10,2 L0,10 L20,10 Z" />
<div id="su" ng-click="send({payload: 1})"></div>
</svg>
<!-- Freccia verso il basso -->
<svg viewBox="0 0 20 10" id="down" class="direction">
<path d="M0,0 L20,0 L10,8 Z" />
<div id="giu" ng-click="send({payload: -1})"></div>
</svg>
<!-- Nuovi pulsanti -->
<div id="btn-centrocinq" ng-click="send({payload: 50})">
<span id="text5">Eco</span>
</div>
<div id="btn-centrosei" class="click" ng-click="send({payload: 60})">
<span id="text6">Med</span>
</div>
<div id="btn-centros" ng-click="send({payload: 70})">
<span id="text7">High</span>
</div>
<!-- Pulsanti originali -->
<div id="btn-centeruno" ng-click="send({payload: 45})">
<span id="text1">45°</span>
</div>
<div id="btn-centerdue" ng-click="send({payload: 40})">
<span id="text2">40°</span>
</div>
<div id="btn-centertre" ng-click="send({payload: 35})">
<span id="text3">35°</span>
</div>
<div id="btn-centerquattro" ng-click="send({payload: 30})">
<span id="text4">30°</span>
</div>
<div id="bloccouno" style="background: blue;"></div>
<div id="bloccodue" style="background: blue;"></div>
<div id="bloccotre" style="background: #1b1b1b;"></div>
</div>
<div id="btn-center" ng-click="send({payload: 100})">
<span id="text"></span>
</div>
<div class="cardt">
<div class="ratingt">
<h3><span class="countert" data-target="">0°</span></h3>
<div class="blockt"></div>
</div>
<div id="tempDiv"></div>
</div>
</div>
</head>
<body>
<script>
// Aggiunge la classe CSS per animazione blocchi
document.getElementById('btn-centrocinq').addEventListener('click', function() {
document.getElementById('bloccouno').style.background = 'blue';
document.getElementById('bloccodue').style.background = '#1b1b1b';
document.getElementById('bloccotre').style.background = '#1b1b1b';
});
document.getElementById('btn-centrosei').addEventListener('click', function() {
document.getElementById('bloccouno').style.background = 'blue';
document.getElementById('bloccodue').style.background = 'blue';
document.getElementById('bloccotre').style.background = '#1b1b1b';
});
document.getElementById('btn-centros').addEventListener('click', function() {
document.getElementById('bloccouno').style.background = 'blue';
document.getElementById('bloccodue').style.background = 'blue';
document.getElementById('bloccotre').style.background = 'blue';
});
document.getElementById('su').addEventListener('click', function() {
var arrow = document.getElementById('up').querySelector('path');
arrow.setAttribute('fill', 'blue'); // Cambia il colore in blu
arrow.classList.add('pulse'); // Aggiunge la classe CSS per l'effetto di pulsazione
setTimeout(function() {
arrow.setAttribute('fill', '#1b1b1b'); // Ripristina il colore originale dopo 5 secondi
arrow.classList.remove('pulse'); // Rimuove la classe CSS per l'effetto di pulsazione
}, 5000); // Ritardo di 5 secondi (5000 millisecondi)
});
document.getElementById('giu').addEventListener('click', function() {
var arrow = document.getElementById('down').querySelector('path');
arrow.setAttribute('fill', 'blue'); // Cambia il colore in blu
arrow.classList.add('pulse'); // Aggiunge la classe CSS per l'effetto di pulsazione
setTimeout(function() {
arrow.setAttribute('fill', '#1b1b1b'); // Ripristina il colore originale dopo 5 secondi
arrow.classList.remove('pulse'); // Rimuove la classe CSS per l'effetto di pulsazione
}, 5000); // Ritardo di 5 secondi (5000 millisecondi)
});
const btn_center = document.getElementById('btn-center');
const btn_centeruno = document.getElementById('btn-centeruno');
const btn_centerdue = document.getElementById('btn-centerdue');
const btn_centertre = document.getElementById('btn-centertre');
const btn_centerquattro = document.getElementById('btn-centerquattro');
function toggleClickedClass(button) {
button.addEventListener('click', (e) => {
const isClicked = e.target.classList.contains('clicked');
// Se il pulsante è già attivo, rimuovi la classe "clicked" da tutti i pulsanti
if (isClicked) {
btn_center.classList.remove('clicked', 'pulsate');
btn_centeruno.classList.remove('clicked', 'pulsate');
btn_centerdue.classList.remove('clicked', 'pulsate');
btn_centertre.classList.remove('clicked', 'pulsate');
btn_centerquattro.classList.remove('clicked', 'pulsate');
} else {
// Altrimenti, attiva il pulsante cliccato e disattiva gli altri
e.target.classList.add('clicked', 'pulsate');
btn_center !== e.target && btn_center.classList.remove('clicked', 'pulsate');
btn_centeruno !== e.target && btn_centeruno.classList.remove('clicked', 'pulsate');
btn_centerdue !== e.target && btn_centerdue.classList.remove('clicked', 'pulsate');
btn_centertre !== e.target && btn_centertre.classList.remove('clicked', 'pulsate');
btn_centerquattro !== e.target && btn_centerquattro.classList.remove('clicked', 'pulsate');
// Se btn-center non è già attivo, attivalo
if (!btn_center.classList.contains('clicked')) {
btn_center.classList.add('clicked');
}
}
});
}
toggleClickedClass(btn_center);
toggleClickedClass(btn_centeruno);
toggleClickedClass(btn_centerdue);
toggleClickedClass(btn_centertre);
toggleClickedClass(btn_centerquattro);
function toggleClickClass(button) {
button.addEventListener('click', (e) => {
const isClick = e.target.classList.contains('click');
// Rimuove la classe 'click' da tutti i pulsanti
document.getElementById('btn-centrocinq').classList.remove('click');
document.getElementById('btn-centrosei').classList.remove('click');
document.getElementById('btn-centros').classList.remove('click');
// Aggiunge la classe 'click' solo al pulsante cliccato
e.target.classList.add('click');
});
}
const btnCentrocinq = document.getElementById('btn-centrocinq');
const btnCentrosei = document.getElementById('btn-centrosei');
const btnCentros = document.getElementById('btn-centros');
toggleClickClass(btnCentrocinq);
toggleClickClass(btnCentrosei);
toggleClickClass(btnCentros);
function updateRatingt(newValue) {
const counter = document.querySelector('.countert'); // Corretto countert a counter
let currentTarget = parseInt(counter.getAttribute('data-target'));
if (newValue === 2 || newValue === -2) {
currentTarget += newValue;
} else {
currentTarget = newValue;
}
currentTarget = Math.max(12, Math.min(100, currentTarget));
counter.setAttribute('data-target', currentTarget);
counter.textContent = Math.floor(currentTarget) + "C°";
const rating = document.querySelector('.ratingt');
let blocks = rating.querySelectorAll('.blockt');
const currentBlocks = blocks.length;
const diff = currentTarget - currentBlocks;
if (diff > 0) {
for (let i = 0; i < diff; i++) {
const newBlock = document.createElement('div');
newBlock.classList.add('blockt');
rating.appendChild(newBlock);
}
} else if (diff < 0) {
for (let i = 0; i < Math.abs(diff); i++) {
rating.removeChild(blocks[currentBlocks - 1 - i]);
}
}
const numberOfBlocks = 50;
const anglePerBlock = 360 / numberOfBlocks;
blocks.forEach((block, index) => {
block.style.transform = "rotate(" + (anglePerBlock * index) + "deg)";
block.style.animationDelay = (index / 40) + "s";
});
aggiornaTemperatura(newValue);
}
function aggiornaTemperatura(valore) {
document.getElementById("tempDiv").innerText = valore;
const blocks = document.querySelectorAll('.blockt');
blocks.forEach((block, index) => {
let color;
if (valore <= 25) {
color='blue';
} else if (valore <=30){
color='green';
} else if (valore <= 35) {
color = 'brown';
} else {
color = 'red';
}
block.style.background = color;
});
}
setInterval(function() {
var temperaturaText = $(".nr-dashboard-text.temp .value").text();
var temperaturaNumero = parseFloat(temperaturaText);
updateRatingt(temperaturaNumero);
}, 100); // Aggiorna ogni secondo
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* pulsanti navigazione */
.doccia {
position: absolute;
width: 50px%;
height: 50px%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 20px;
left: 20px;
}
/* Aggiungiamo blocchi */
#bloccouno {
width: 23px;
height: 7px;
position: absolute;
top: 142px;
left: 265px;
background-color: blue;
}
#bloccodue {
width: 23px;
height: 7px;
position: absolute;
top: 129px;
left: 265px;
background-color: blue;
}
#bloccotre {
width: 23px;
height: 7px;
position: absolute;
top: 115px;
left: 265px;
background-color: blue;
}
/* Aggiungiamo frecce */
#btn-4ways #up {
width: 40px;
height: 20px;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
#btn-4ways #down {
width: 40px;
height: 20px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/* freccia che pulsa */
.pulse {
animation: pulse 1s ease infinite;
}
@keyframes pulse {
0%,
50%,
100% {
fill: #1b1b1b;
}
25%,
75% {
fill: blue;
}
}
/* Aggiungiamo l'animazione di pulsazione */
@keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.pulsate {
animation: pulsate 1s infinite;
}
.masonry-container>.visible {
opacity: 1;
left: 0px;
top: 8px;
border: none;
}
.nr-dashboard-cardpanel {
box-sizing: border-box;
background: #373434;
}
body.nr-dashboard-theme md-content {
background: #373434;
height: 100%;
color: #1bbdff;
}
.nr-dashboard-theme .nr-dashboard-template {
background-color: #373434;
left: 0px;
top: 0px;
width: 450px;
height: 350px !important;
}
body.nr-dashboard-theme md-content md-card {
background-color: transparent;
color: transparent;
}
#container {
position: relative;
width: 416px;
height: 309px;
border-radius: 50%;
background-color: #111111;
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.19), inset 0 1px 2px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
top: 21px;
left: 30px;
}
#container::before {
position: absolute;
content: '';
width: 97%;
height: 97%;
border-radius: 50%;
background: linear-gradient(60deg, #868281 45%, white, #868281 55%);
box-shadow: inset -3px 3px 3px rgba(0, 0, 0, 0.7),
inset -3px -2px 3px rgba(0, 0, 0, 0.7),
inset 3px -3px 3px rgba(0, 0, 0, 0.7),
inset 3px 2px 3px rgba(0, 0, 0, 0.7);
}
#container::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #111111;
box-shadow: 3px -3px 5px rgba(0, 0, 0, 0.9),
-3px 3px 5px rgba(0, 0, 0, 0.9);
}
#btn-4ways {
position: absolute;
width: 88%;
height: 88%;
border-radius: 50%;
background: linear-gradient(to bottom, #222423, #2f2f2f);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
transition: box-shadow 0.5s;
z-index: 1;
}
#btn-4ways .direction {
position: absolute;
fill: #1b1b1b;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.1));
pointer-events: none;
}
#btn-4ways .direction.pressed {
fill: #2f878f;
stroke: #48bcff;
stroke-width: 2;
filter: drop-shadow(0 0 5px rgb(47, 185, 249));
}
.nr-dashboard-theme .nr-dashboard-template path{
fill: blue;
}
#su {
position: absolute;
width: 50px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 8px;
left: 158px;
}
#giu {
position: absolute;
width: 50px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
left: 158px;
top: 209px;
}
#btn-center {
position: absolute;
width: 105px;
height: 105px;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
}
#btn-centeruno {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 24px;
left: 63px;
}
#btn-centerdue {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: -79px;
left: 10px;
}
#btn-centertre {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: -198px;
left: 10px;
}
#btn-centerquattro {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: -301px;
left: 63px;
}
#btn-centrocinq {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 39px;
left: 250px;
}
#btn-centrosei {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 49px;
left: 299px;
}
#btn-centros {
position: relative;
width: 17%;
height: 20%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 64px;
left: 250px;
}
#text5 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text6 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text7 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#btn-center::before {
position: absolute;
content: '';
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centeruno::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centerdue::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centertre::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centerquattro::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centrocinq::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centrosei::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-centros::before {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #202020, #181818);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
#btn-center::after {
position: absolute;
content: '';
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centeruno::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centerdue::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centertre::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centerquattro::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centrocinq::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centrosei::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-centros::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background: linear-gradient(to bottom, #255b8d, #4393c9);
box-shadow: 0 0 10px 3px rgba(0, 174, 255, 0.7);
opacity: 0;
transition: opacity 0.5s;
}
#btn-center.clicked::after {
opacity: 1;
}
#btn-centeruno.clicked::after {
opacity: 1;
}
#btn-centerdue.clicked::after {
opacity: 1;
}
#btn-centertre.clicked::after {
opacity: 1;
}
#btn-centerquattro.clicked::after {
opacity: 1;
}
#btn-centrocinq.click::after {
opacity: 1;
}
#btn-centrosei.click::after {
opacity: 1;
}
#btn-centros.click::after {
opacity: 1;
}
#btn-center:active::before {
transform: scale(0.98);
}
#btn-centeruno:active::before {
transform: scale(0.98);
}
#btn-centerdue:active::before {
transform: scale(0.98);
}
#btn-centertre:active::before {
transform: scale(0.98);
}
#btn-centerquattro:active::before {
transform: scale(0.98);
}
#btn-centrocinq:active::before {
transform: scale(0.98);
}
#btn-centrosei:active::before {
transform: scale(0.98);
}
#btn-centros:active::before {
transform: scale(0.98);
}
#text {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text1 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text2 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text3 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#text4 {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
#btn-center.clicked .countert {
color: #45e6ff;
text-shadow: #45e6ff 0 0 5px;
}
#btn-centeruno.clicked #text1 {
color: #45e6ff;
text-shadow: #45e6ff 0 0 5px;
}
#btn-centerdue.clicked #text2 {
color: #45e6ff;
text-shadow: #45e6ff 0 0 5px;
}
#btn-centertre.clicked #text3 {
color: #45e6ff;
text-shadow: #45e6ff 0 0 5px;
}
#btn-centerquattro.clicked #text4 {
color: #45e6ff;
text-shadow: #45e6ff 0 0 5px;
}
.countert {
color: #616161;
z-index: inherit;
transition: color 0.5s, text-shadow 0.5s;
user-select: none;
pointer-events: none;
}
.blockt {
position: relative;
top: -11px;
left: -25px !important;
}
.cardt {
position: relative;
width: 100px;
height: 100px;
left: 74px;
top: 10px;
}
.cardt .ratingt {
position: relative;
width: 200%;
height: 100%;
}
.cardt .ratingt .blockt {
position: absolute;
width: 2px;
height: 11px;
background: #000;
left: 0%;
transform-origin: 50% 50px;
opacity: 0;
animation: animate 0.01s linear forwards;
z-index: 3;
}
.cardt .ratingt h3 {
position: absolute;
top: 31%;
left: -10%;
transform: translate(-50%, -50%);
color: #616161 !important;
font-size: 1.5em;
font-weight: 500;
text-align: center;
line-height: 1em;
background: transparent !important;
z-index: 3;
}
@keyframes animate {
to {
opacity: 1;
}
}
#tempDiv {
width: 50px;
height: 50px;
color: transparent;
position: relative;
top: 20px;
left: 124px;
font-size: 25px;
z-index: 3;
}
.nr-dashboard-text .value {
color: transparent;
}
</style>
[moderator note: this is the original title and an English translation]
Problema sincronizzazione dashboard su piu dispositivi:Se premo un pulsante su dashboard pc o su node red remote i payload non hanno problemi mentre l’animazione dei pulsanti no qualcuno mi puo’ aiutare ? grazie
Dashboard synchronization problem on multiple devices: If I press a button on the PC dashboard or on Node Red Remote, the payloads have no problems but the button animation doesn't, can anyone help me? Thank you.
@pesentiivan Ivan, welcome to the forum.
You haven't given enough information to get help. Please create a small flow demonstrating your issue, then export it and paste the export to a reply.
Non hai fornito informazioni sufficienti per ottenere aiuto. Crea un piccolo flusso che illustri il tuo problema, quindi esportalo e incolla l'esportazione in una risposta.
e' troppo grande sono piu' di 50000 caratteri e non me lo fa inviare 
A small flow that shows the problem will consist of no more than about 5 nodes, so will not be large.
Does the button animate on the browser where you pressed it, but not on other browsers ?
If so then you may need to delete the msg.socketid property from the message before sending it to the "button". This will cause the message to be sent to all browsers sessions, otherwise it will only be sent to the original session.
this is my dashboard on pc on phone app node red remote . problem if i push on 30 on pc on phone nothing happen.
<div id="container">
<div id="btn-4ways">
<!-- Freccia verso l'alto -->
<svg viewBox="0 0 20 10" id="up" class="direction">
<path d="M10,2 L0,10 L20,10 Z" />
<div id="su" ng-click="send({payload: 1})"></div>
</svg>
<!-- Freccia verso il basso -->
<svg viewBox="0 0 20 10" id="down" class="direction">
<path d="M0,0 L20,0 L10,8 Z" />
<div id="giu" ng-click="send({payload: -1})"></div>
</svg>
<!-- Nuovi pulsanti -->
<div id="btn-centrocinq" ng-click="send({payload: 50})">
<span id="text5">Eco</span>
</div>
<div id="btn-centrosei" class="click" ng-click="send({payload: 60})">
<span id="text6">Med</span>
</div>
<div id="btn-centros" ng-click="send({payload: 70})">
<span id="text7">High</span>
</div>
<!-- Pulsanti originali -->
<div id="btn-centeruno" ng-click="send({payload: 45})">
<span id="text1">45°</span>
</div>
<div id="btn-centerdue" ng-click="send({payload: 40})">
<span id="text2">40°</span>
</div>
<div id="btn-centertre" ng-click="send({payload: 35})">
<span id="text3">35°</span>
</div>
<div id="btn-centerquattro" ng-click="send({payload: 30})">
<span id="text4">30°</span>
</div>
i have not msg.socketid on my flow
I cannot see anything in the flow that feeds back into the template nodes?
When you press a button, you need to send a message to the template node, in order to change the appearance of the "buttons"
Nice looking interface by the way 
no e' il css che modifica l'aspetto dei pulsanti . quando premo il pulsante html ad esempio 30 comincia a lampeggiare e diventa blue. non e' node red che li modifica
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* pulsanti navigazione */
.doccia {
position: absolute;
width: 50px%;
height: 50px%;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 20px;
left: 20px;
}
/* Aggiungiamo blocchi */
#bloccouno {
width: 23px;
height: 7px;
position: absolute;
top: 142px;
left: 265px;
background-color: blue;
}
#bloccodue {
width: 23px;
height: 7px;
position: absolute;
top: 129px;
left: 265px;
background-color: blue;
}
#bloccotre {
width: 23px;
height: 7px;
position: absolute;
top: 115px;
left: 265px;
background-color: blue;
}
/* Aggiungiamo frecce */
#btn-4ways #up {
width: 40px;
height: 20px;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
#btn-4ways #down {
width: 40px;
height: 20px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/* freccia che pulsa */
.pulse {
animation: pulse 1s ease infinite;
}
@keyframes pulse {
0%,
50%,
100% {
fill: #1b1b1b;
}
25%,
75% {
fill: blue;
}
}
/* Aggiungiamo l'animazione di pulsazione */
@keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.pulsate {
animation: pulsate 1s infinite;
}
.masonry-container>.visible {
opacity: 1;
left: 0px;
top: 8px;
border: none;
}
.nr-dashboard-cardpanel {
box-sizing: border-box;
background: #373434;
}
body.nr-dashboard-theme md-content {
background: #373434;
height: 100%;
color: #1bbdff;
}
.nr-dashboard-theme .nr-dashboard-template {
background-color: #373434;
left: 0px;
top: 0px;
width: 450px;
height: 350px !important;
}
body.nr-dashboard-theme md-content md-card {
background-color: transparent;
color: transparent;
}
#container {
position: relative;
width: 416px;
height: 309px;
border-radius: 50%;
background-color: #111111;
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.19), inset 0 1px 2px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
top: 21px;
left: 30px;
}
#container::before {
position: absolute;
content: '';
width: 97%;
height: 97%;
border-radius: 50%;
background: linear-gradient(60deg, #868281 45%, white, #868281 55%);
box-shadow: inset -3px 3px 3px rgba(0, 0, 0, 0.7),
inset -3px -2px 3px rgba(0, 0, 0, 0.7),
inset 3px -3px 3px rgba(0, 0, 0, 0.7),
inset 3px 2px 3px rgba(0, 0, 0, 0.7);
}
#container::after {
position: absolute;
content: '';
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #111111;
box-shadow: 3px -3px 5px rgba(0, 0, 0, 0.9),
-3px 3px 5px rgba(0, 0, 0, 0.9);
}
#btn-4ways {
position: absolute;
width: 88%;
height: 88%;
border-radius: 50%;
background: linear-gradient(to bottom, #222423, #2f2f2f);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
transition: box-shadow 0.5s;
z-index: 1;
}
#btn-4ways .direction {
position: absolute;
fill: #1b1b1b;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.1));
pointer-events: none;
}
#btn-4ways .direction.pressed {
fill: #2f878f;
stroke: #48bcff;
stroke-width: 2;
filter: drop-shadow(0 0 5px rgb(47, 185, 249));
}
.nr-dashboard-theme .nr-dashboard-template path{
fill: blue;
}
#su {
position: absolute;
width: 50px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
top: 8px;
left: 158px;
}
#giu {
position: absolute;
width: 50px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
left: 158px;
top: 209px;
}
#btn-center {
position: absolute;
width: 105px;
height: 105px;
border-radius: 50%;
background-color: black;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
}
se inviassi un payload al nodo template che emulasse il click del pulsante hmtl potrebbe funzionare ?
Each browser loads a copy of the template, your CSS is only activated locally on each browser, so there has to be a mechanism to update the other connected sessions.
e.g. you need to send a message back to the template to trigger a change.
Each payload that comes from the template node will have a msg.socketid property which indicates which browser session it came from.
This is the property you need to delete, before sending messages back to the template, so the messages are sent to ALL the open sessions, not just the one it originated from.
how i can do u can help me ?
I'm afraid I'm no CSS expert, basically based on the incoming payload to Node Red, you need to send a message back to the template to change the appropriate attributes on your buttons.
So you need some JS script in the template to listen for these messages and act accordingly.
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
