Questo sito utilizza i cookie per migliorare servizi ed esperienza degli utenti. Se decidi di continuare la navigazione consideriamo che accetti il loro uso.

Info
  1. Forum
  3. Automazione
  5. PLC
  7. Siemens
  9. Creazione di un controllo HTML per web server CPU Siemens

Creazione di un controllo HTML per web server CPU Siemens

  • Vindro
  • Avatar di Vindro Autore della discussione
  • Offline
  • New Member
  • New Member
Di più
4 Anni 1 Mese fa - 4 Anni 1 Mese fa #326 da Vindro
Creazione di un controllo HTML per web server CPU Siemens è stato creato da Vindro
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:
  1. Perchè non cambia più l'immagine del led ? Non vedo errori di sintassi !
  2. E giusto il codice per cambiare il colore del quadrato e della casella di testo ?
  3. Le immagini si vedono se apro il file .htm singolarmente ma non si vedono quando accedo tramite web server ... Da cosa dipende ?
  4. C'è un modo per scrivere il bit sul PLC e chiamare una funzione JS dallo stesso pulsante ?
Ultima Modifica 4 Anni 1 Mese fa da Vindro.

Si prega Accedi o Crea un account a partecipare alla conversazione.

  • Vindro
  • Avatar di Vindro Autore della discussione
  • Offline
  • New Member
  • New Member
Di più
4 Anni 1 Mese fa #327 da Vindro
Risposta da Vindro al topic Creazione di un controllo HTML per web server CPU Siemens
Ho risolto rifacendo tutto da capo e questo è il codice che mi ha portato a ciò che volevo, manca solo una parte di CSS per stilizzare i pulsanti trasparenti. L'unica cosa che al momento non mi è ancora chiara e se con lo stesso pulsante si può scrivere sul PLC e al tempo stesso richiamare una funzione JS.

<html>

    <!-- AWP_In_Variable Name='"DBData".I1' -->    
    <!-- AWP_In_Variable Name='"DBData".I2' -->
    <!-- AWP_In_Variable Name='"DBData".I3'  -->
    <!-- AWP_In_Variable Name='"DBData".I4'  -->
    
    <!-- AWP_In_Variable Name='"DBData".B1' -->    
    <!-- AWP_In_Variable Name='"DBData".B2' -->


    <head>
    
        <title> MyServer </title>
        <meta http-equiv="refresh" content="10">
        
    </head>
    
    <body>
                
        <div style="position:absolute; width:330px; height:120px; left:10px; top:100px; background:#DCDCDC">
            
            <div style="position:absolute; width:100px; height:100px; left:10px; top:10px">
                <img src="btnGreen.png">
            </div>
            
            <form style="position:absolute; left:25px; top:10px; border:solid 1px" method="post">
                <input type="submit" name='"DBData".B1' value="1" style="width:70px; height:70px; background:rgb(255,0,0,0)">
            </form>
            
            <div style="position:absolute; width:100px; height:100px; left:200px; top:10px">
                <img src="btnRed.png">
            </div>
                
            <form style="position:absolute; left:230px; top:10px; border:solid 1px" method="post">
                <input type="submit" name='"DBData".B1' value="0" style="width:70px; height:70px; background:rgb(255,0,0,0)">
            </form>
            
            <div style="position:absolute; width:100px; height:100px; left:115px; top:10px">
                <img id="led1" src="ledOff.png">
            </div>
            
            <script>
                
                function set1() {
                    var img1 = document.getElementById("led1");
                    img1.src = "ledOn.png";
                }
                    
                function rst1() {
                    var img1 = document.getElementById("led1");
                    img1.src = "ledOff.png";
                }
                    
            </script>
            
        </div>
        
        <div style="position:absolute; width:120px; height:120px; left:10px; top:300px; background:#DCDCDC">
            
            <div style="position:absolute; width:100px; height:100px; left:10px; top:10px">
                <img id="led2" src="ledOff.png">
            </div>
            
            <script>
                
                function set2() {
                    var img2 = document.getElementById("led2");
                    img2.src = "ledOn.png";
                }
                    
                function rst2() {
                    var img2 = document.getElementById("led2");
                    img2.src = "ledOff.png";
                }
                    
            </script>
            
        </div>
        
        <script>
                
            function toggle() {
                var val1 = :="DBData".B1: ;
                var val2 = :="DBData".B2: ;
                    if(val1==1) {
                        set1();
                    }
                    else {
                        rst1();
                    }
                    if(val2==1) {
                        set2();
                    }
                    else {
                        rst2();
                    }
            }
                
            function PageRefresh() {
                toggle();
                setTimeout("AutoRefresh()",500);
            }
                                
            PageRefresh();
                    
        </script>
            
    </body>
    
</html>
 

Si prega Accedi o Crea un account a partecipare alla conversazione.

Di più
4 Anni 1 Mese fa #328 da cisco
Risposta da cisco al topic Creazione di un controllo HTML per web server CPU Siemens
Ciao Vindro
la tua scelta di rifare tutto da capo è stata la soluzione migliore, in questo modo hai potuto anche ottimizzare il codice, anche se leggendo il codice da te postato avrei fatto altre scelte, ma è una mia oppinione e magari non so bene cosa devi fare.

Si prega Accedi o Crea un account a partecipare alla conversazione.

  • Vindro
  • Avatar di Vindro Autore della discussione
  • Offline
  • New Member
  • New Member
Di più
4 Anni 1 Mese fa - 4 Anni 1 Mese fa #329 da Vindro
Risposta da Vindro al topic Creazione di un controllo HTML per web server CPU Siemens
Certo, ci sono diversi modi per fare le stesse cose. In ogni caso ... L'obiettivo finale era quello di creare un controllo su una pagina del web server della CPU S7-1200 atto fare un set/reset di un bit la cui funzione era avviare/fermare a distanza il ciclo automatico di una ipotetica macchina. Con il codice che ho postato si riesce a farlo. Questo fa parte di una serie di prove che mi sono servite per creare una sorta di HMI sottoforma di pagine web.
Ultima Modifica 4 Anni 1 Mese fa da Vindro.

Si prega Accedi o Crea un account a partecipare alla conversazione.

Moderatori: papy, roby
  1. Forum
  3. Automazione
  5. PLC
  7. Siemens
  9. Creazione di un controllo HTML per web server CPU Siemens
Tempo creazione pagina: 0.070 secondi

.

.