Crearea de pagini web de utilizator

Sistemele noastre SlimLine e Netsyst au un server web integrat, este posibil să transferați pagini de utilizator care pot fi vizualizate din browser în sistem. Paginile trebuie create cu propriul editor HTML și transferate în sistemul de fișiere al sistemului. Pe sistemele ARM 7 acestea pot fi transferate în foldere Storage ed SDCard, în sisteme CortexM7 pot fi transferate în folder C:/Web crearea propriilor subdosare. Paginile încărcate vor fi accesibile direct din browser prin simpla introducere a IP-ului dispozitivului și a căii paginii. Pentru aplicații web mai complexe, FB este disponibil HTTPServer care vă permite să rulați programul PLC pentru a compila conținutul pentru a reveni la browser. Este prevăzut pentru descărcați un program, în folderele de programe găsite.

• LogicLab, Programul de gestionare a paginii care urmează să fie transferat în sistem SlimLine.
• Web, Folder WPages cu pagini web de transferat în folder C:/Web pe sistem SlimLine.

Tastând adresa IP a sistemului din browser, urmată de calea către pagina de index (Exemplu http://xxx.xxx.xxx.xxx/WPages/Index.html) puteți naviga între diferitele exemple. Toate exemplele sunt editabile folosind un editor de text simplu (Exemplu Notepad++).

Pur și simplu pagina

În exemplul din partea paginii SPage.html, o pagină simplă care afișează un mesaj de prezentare. Pentru cei care nu au cunoștințe de HTML recomand să testeze prin editarea fișierului cu un editor de text sau un editor HTML SPage.html. Prin salvarea fișierului modificat și actualizarea paginii în browser vom vedea modificările făcute. Apoi, va fi posibil să inserați diferitele elemente HTML și să vedeți cum funcționează.

Gestionarea paginilor dinamice, TAG-urilor și ARG-urilor

În exemplul din partea paginii DPage.htm afișează valoarea variabilei PLC VView de tip UINT alocat adresei DB100.10 și vă permite să setați valoarea variabilei PLC VSet de tip REAL alocat adresei DB100.12. Exemplul evidențiază cea mai importantă caracteristică a serverului web, capacitatea de a gestiona pagini al căror conținut este modificat de server. Exemplul demonstrează cum se poate gestiona o interactivitate cu utilizatorul care, prin TAG-uri inserate în pagină, poate afișa variabile PLC și își poate modifica valoarea cu ARG-uri. TAGs ed ARGs se referă la variabilele alocate în DB100 a PLC-ului și trebuie introdus în pagini cu extensie htm.

TAGs: Pentru a vizualiza valoarea variabilelor PLC pe pagina web, puteți introduce TAGs care indică formatul de afișare, tipul și adresa variabilei de afișat (Exemplu <!–[‘%d’, UINT, 10]->, variabilă de afișare UINT atribuit către DB100.10). TAG-urile vor fi înlocuite de server cu valoarea variabilei la trimiterea conținutului paginii către browser.

ARGs: Pentru a permite setarea variabilelor PLC de pe pagina web, este posibilă trimiterea către server în POST de ARGs indicând tipul și adresa variabilei urmate de valoarea care trebuie setată (Exemplu UINT 12=100, setați valoarea 100 în variabilă UINT atribuit către DB100.12). Mai multe definiții pot fi adăugate folosind simbolul & (Exemplu UINT 12=100&REAL 14=1.3). Pentru a seta variabilele PLC de pe pagina web, cea mai simplă metodă este utilizarea modulelor, toate obiectele conținute între ele <form> e </form>atunci când formularul este trimis, acestea sunt puse automat în coadă și trimise către sistemul care actualizează variabilele.

<!--["%d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di cifre intere variabili in base al valore.
<!--["%04d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di 4 cifre.
<!--["%3.0f", REAL, 32]--> Visualizza variabile REAL allocata a DB 100.32 con numero di 3 cifre intere senza decimali.
<!--["%4.2f", REAL, 50]--> Visualizza variabile REAL allocata a DB 100.50 con numero di 1 cifra intera ed 2 decimali.
<!--["%s", STRING, 128]--> Visualizza variabile STRING allocata a DB 100.128.

UINT 12=10 Imposta variabile UINT allocata a DB 100.12 al valore 10.
REAL 128=185.5 Imposta variabile REAL allocata a DB 100.128 al valore 185.5.
STRING 1000 16="Hello!" Imposta variabile STRING allocata a DB 100.1000 con "Hello!". Lunghezza testo limitata a 16 caratteri.

Actualizarea paginilor cu AJAX

AJAX, acronim pentru JavaScript asincron și XML, este o tehnică de dezvoltare pentru crearea de aplicații web interactive. Dezvoltarea aplicațiilor HTML cu AJAX se bazează pe un schimb de date de fundal între browser web și server, care permite actualizarea dinamică a unei pagini web fără reîncărcare explicită de către utilizator. Această tehnică permite o actualizare automată a datelor dintr-o pagină web fără a fi nevoie să reîncărcați pagina, permițând afișarea automată a variabilelor PLC. Solicitările AJAX sunt procesate folosind fișierul API fetch.

În exemplul din partea paginii DPAjax.html care afișează valoarea variabilei IValue de tip UDINT DB100.20 la care se adaugă valoarea variabilei în fiecare secundă IFactor de tip USINT DB100.24. Toate valorile sunt actualizate automat în AJAX în fiecare secundă. Este de asemenea prezentat exemplul de introducere a unei variabile șir alocate DB100.52. Funcțiile de gestionare a API-ului de preluare sunt în fișier Scripts.js Există o funcție de actualizare a câmpului pe pagină:

• GetPage(Page, RFlag), Efectuează API Fetch reamintind în GET pagina indicată în Page (În exemplu DPAjax.htm) și la returnarea datelor execută funcția SetupValues care actualizează câmpurile de pe pagină.
• SubmitData(Page), Execută API Fetch trimiterea POST pe pagina indicată în Page (În exemplu DPAjax.htm) datele variabilelor setate și la întoarcerea datelor execută funcția SetupValues care actualizează câmpurile de pe pagină.
• LoadPage(Page), Executat când pagina este încărcată execută funcția GetPage pentru a actualiza imediat toate câmpurile paginii și apoi a activa execuția temporizată a funcției GetPage pentru a actualiza automat câmpurile.
• SetupValues(RData,RFlag), Valorifică obiectele de pe pagină cu valorile primite în RData. RFlag dacă este activ, permite actualizarea obiectelor din atribut. În acest fel este posibil să îl dezactivați permițând să scrieți valoarea din browser fără a fi rescris prin actualizarea automată în AJAX.

Când pagina este încărcată, funcția este executată <body onLoad=”LoadPage(‘DPAjax.htm’)”> arătând spre pagină DPAjax.htm, această pagină conține TAG-urile care, la încărcare, vor fi înlocuite cu valoarea variabilei relative. Pagina este scrisă în așa fel încât să returneze un șir JSON cu indicarea id-ului obiectului și a valorii la care să-l setați.

{
    "IValue":<!--['%d', UDINT, 20]-->,
    "IFactor":<!--['%d', USINT, 24]-->,
    "VStr":"<!--['%s', STRING, 52]-->"
}

În acest fel în funcție SetupValues va fi suficient să analizați revenirea pentru a putea îmbunătăți obiectele. Rețineți că pe pagina de încărcare RFlag este activ în acest mod și câmpul de intrare va fi evaluat IFactor. În timp ce alergați în interval RFlag nu este activ blocând actualizarea.

Utilizarea obiectelor HTML

În exemplul din partea paginii WObjects.html afiseaza o serie de obiecte puse la dispozitie de limbajul HTML cu ajutorul carora poti crea pagini cu un impact grafic placut. Gestionarea obiectelor se realizează în Ajax folosind funcțiile discutate anterior.

Pentru a crea pagini web cu grafice, indicatori, histograme și multe altele, puteți insera obiecte Google Chart (Vezi galeria). În acest articol au fost folosite manometre pentru a afișa valorile de temperatură, umiditate și presiune pe un dispozitiv Amazon Echo Show.

• Check box: Prin executarea bifării o variabilă BOOL este activată, starea primelor 2-uri este de asemenea transferată la ieșirile logice ale modulului CPU.
• Radio button (A): Aceste butoane radio raportează starea intrărilor modulului CPU. După cum puteți vedea că au atribute de nume diferite, în acest fel ele sunt obiecte unice și fără legătură. Deoarece sunt afișate numai, acestea au fost dezactivate pentru a nu putea fi editate de pe o pagină web.
• Radio button (B): Aceste butoane radio au același atribut de nume, deci acționând pe unul dezactivează celălalt. Acestea acționează pe o variabilă USINT, care este evaluată în funcție de selecție.
• Input field: Prin definirea valorii, se evaluează o variabilă UINT cu valoarea definită.
• Progress bar: Este afișată o bară de progres cu valoarea setată în câmpul de intrare.
• Select: Prin alegerea uneia dintre opțiuni este evaluată o variabilă USINT.

Pagini receptive

Astăzi este esențial ca paginile web să fie utilizabile de pe o mare varietate de terminale, nu doar computer, ci și tablete și smartphone-uri, de aceea este necesară dezvoltarea paginilor responsive astfel încât acestea să se poată adapta automat la diferitele dispozitive.

aplicaţia eDoorkeeper cu codul sursă (Download) ilustrează modul în care prin utilizarea adecvată a stilurilor CSS este posibil să se dezvolte pagini simple receptive pentru gestionarea controlului accesului cu identificare prin TAG RFiD.

pagină home.htm afișează starea de funcționare, I/O digitală, valoarea TAG-ului achiziționat și eventualele erori, pagina este actualizată în AJAX. Pagină etichete.htm vă permite să definiți până la 16 TAG-uri cu codul relevant și utilizatorul asociat acestuia.