Buongiorno a tutti. Sto cercando di creare un controllo personalizzato da inserire in una pagina web personalizzata del web server della CPU Siemens. Per creare questo controllo sto usando HTML e parte di JS, ragruppando più oggetti base tra loro, o meglio ... e quello che sto tentando di fare. Ho già un paio di esempi simili e vorrei metterli insieme in modo da creare una cosa unica che abbia entrambe le funzionalità. Il primo esempio legge e scrive dati nella CPU Siemens tramite i comandi AWP, il secondo è puro HTML è cambia immagine di un led per fare l'animazione on/off del led stesso. Quello a cui voglio arrivare è avere un unico oggetto che imposti lo stato di un bit sul PLC ( tramite 2 pulsanti set/reset ) e un'animazione che cambi l'immagine del led a seconda dello stato di questo bit ( questo leggendo dalla CPU il valore effettivo del bit stesso ). Di seguito il sorgente della pagina web:
<!-- Pulsante per impostare il bit a 1 -->
<form style="position:absolute; left:20px; top:55px; border:solid 1px" method="post">
<input type="submit" style="width:70px; height:70px; background:rgb(255,0,0,0); border:solid 0px" name='"DBData".B1' value="1">
</form>
<!-- Pulsante per impostare il bit a 0 -->
<form style="position:absolute; left:230px; top:55px; border:solid 1px" method="post">
<input type="submit" style="width:70px; height:70px; background:rgb(255,0,0,0); border:solid 0px" name='"DBData".B1' value="0">
</form>
<!-- Casella di testo per visualizzare il valore reale del bit -->
<p id="test1" style="position:absolute; top:70px; left:170px; background:yellow"> :="DBData".B1: </p>
<!-- Immagine del pulsante "set" -->
<div style="position:absolute; width:50px; height:100px; left:10px; top:140px">
<input type="image" src="btnGreen.PNG" onClick="set()">
</div>
<!-- Immagine del pulsante "reset" -->
<div style="position:absolute; width:50px; height:100px; left:200px; top:140px">
<input type="image" src="btnRed.PNG" onClick="reset()">
</div>
<!-- Immagine del led ( sarà animata dallo stato reale del bit ) -->
<div style="position:absolute; width:100px; height:100px; left:110px; top:120px">
<img id="status" src="ledOff.PNG">
</div>
<!-- Quadrato inserito temporaneamente per testare le funzioni JS -->
<svg height="100" width="100">
<rect x="68" y="40" rx="2" ry="2" width="30" height="30" id="test2" style="stroke:black; stroke-width:3; fill:yellow"/>
</svg>
<script> // Funzioni JS per gestire le animazioni
function set() {
var immagine = document.getElementById("status");
immagine.src = "ledOn.PNG";
var sfondo1 = document.getElementById("test1").style.background;
sfondo1 = "green";
var sfondo2 = document.getElementById("test2").style.fill;
sfondo2 = "green";
}
function reset() {
var immagine = document.getElementById("status");
immagine.src = "ledOff.PNG";
var sfondo1 = document.getElementById("test1").style.background;
sfondo1 = "red";
var sfondo2 = document.getElementById("test2").style.fill;
sfondo2 = "red";
}
</script>
I primi 3 oggetti per leggere e scrivere sul PLC stanno funzionando e derivano dal primo esempio, invece i due pulsanti con immagine ed il led derivano dal secondo esempio ma messi in questo modo non funzionano più. A questo mi sorgono le segunti domande:
Perchè non cambia più l'immagine del led ? Non vedo errori di sintassi !
E giusto il codice per cambiare il colore del quadrato e della casella di testo ?
Le immagini si vedono se apro il file .htm singolarmente ma non si vedono quando accedo tramite web server ... Da cosa dipende ?
C'è un modo per scrivere il bit sul PLC e chiamare una funzione JS dallo stesso pulsante ?