API tools faq
paste
Advertisement
saper_2

test easpeasy

saper_2
Oct 30th, 2019
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.75 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"> <!-- kodowanie UTF-8 tego pliku teksotwego -->
  4. <!-- sciągnij z https://jquery.com/download/ najnowszy "compressed, production jQuery x.y.z" ,
  5. wrzuć sciągnięty plik 'jquery-x.y.z.min.js' do tego samego katalogu co ten plik html.
  6. Ah, jak klikniesz "Download ...." to otworzy się strona z "tekstem" - po prostu uzyj Plik->Zapisz aby zapisać 'jquery-x.y.z.min.js' :)
  7. Dla innych ludzi którzy dotrą do tego :) : popraw wersję jquery jak będziesz ściągał ("x.y.z" to będzie numer wersji) w tagu poniżej "script src=...."
  8. -->
  9. <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  10. <script>
  11. //http://<espeasyip>/control?cmd=<command>
  12. // globalne zmienne
  13. // adres espEasy - popraw na swój
  14. var espip = "192.168.x.x";
  15. // numer GPIO
  16. var espgpio = 15;
  17.  
  18. function get_status(ip,gpio) {
  19.     // sprawdzmy czy argumenty nie są "null" (czyli funkcja zostałą wywołana bez przekazanych argumentów)
  20.     if (typeof(gpio) === "undefined") return;
  21.     if (typeof(ip) === "undefined") return;
  22.     // dodatkowe sprawdzenie
  23.     if (!Number.isInteger(gpio)) {
  24.         console.log("GPIO nie jest liczbą!");
  25.         return;
  26.     }
  27.     if (gpio<0 || gpio>16) {
  28.         console.log("GPIO ("+gpio+") poza zakresem!");
  29.         return;
  30.     }
  31.    
  32.     // ajax request
  33.     // zwróć uwagę na sposób zapisu funkcji które są wywoływane po request'cie
  34.     $.ajax({
  35.         url: "http://"+ip+"/control?cmd=Status,GPIO,"+gpio,
  36.         dataType: "json" // spodziewamy się odpowiedzi w fomracie json
  37.     }) // <<-- tutaj nie ma średnika, ponieważ chcemy aby zostały wywołane funkcje w done lub fail :)
  38.     // to jest wywoływane jeśli request się udał (http result code = 200)
  39.     .done(function(data) {
  40.         // ustawmy zawartość tagu span ze statusem
  41.         // debug, uzyteczne jak nie jestes pewien co dostajesz :) , mozesz uzyc Developers Tools i tam krok po kroku
  42.         //    analizować skrypt JS i podglądać jakie są dane w jakich zmiennych ^u^
  43.         //console.log("Status led: ");
  44.         //console.log(data);
  45.         if (data.state == 0) {
  46.             $("#led-status").html("OFF");
  47.             // zmieniamy kolor :)
  48.             $("#led-status").css("background-color","#ff9673");
  49.         } else if (data.state == 1) {
  50.             $("#led-status").html("ON");
  51.             // zmieniamy kolor :)
  52.             $("#led-status").css("background-color","#79ff4c");
  53.         } else {
  54.             $("#led-status").html("-? ("+data.state+")-");
  55.             // zmieniamy kolor :)
  56.             $("#led-status").css("background-color","#ffff26");
  57.         }
  58.     })
  59.     // jeśli będzie jakiś błąd (e.g. brak urządzenia , zły IP, etc...) to to się wykona:
  60.     .fail(function(jqxhr, text, err) {
  61.         console.log("AJAX query error! text="+text+" , error="+err);
  62.         console.log(jqxhr);
  63.        
  64.         $("#led-status").html("ERROR: "+text);
  65.         // zmieniamy kolor :)
  66.         $("#led-status").css("background-color","#ff4000");
  67.     })
  68.     ; // tutaj jest koniec definicji .ajax(.........)
  69. }
  70.  
  71.  
  72. function set_status(ip,gpio,state) {
  73.     // sprawdzmy czy argumenty nie są "null" (czyli funkcja zostałą wywołana bez przekazanych argumentów)
  74.     if (typeof(gpio) === "undefined") return;
  75.     if (typeof(ip) === "undefined") return;
  76.     if (typeof(state) === "undefined") return;
  77.     // dodatkowe sprawdzenie
  78.     if (state != 0 && state != 1) return;
  79.     if (!Number.isInteger(gpio)) {
  80.         console.log("GPIO nie jest liczbą!");
  81.         return;
  82.     }
  83.     if (gpio<0 || gpio>16) {
  84.         console.log("GPIO ("+gpio+") poza zakresem!");
  85.         return;
  86.     }
  87.    
  88.     // ajax request - praktycznie kopiuj-wklej z "get_status" :)
  89.     // zwróć uwagę na sposób zapisu funkcji które są wywoływane po request'cie
  90.     $.ajax({
  91.         url: "http://"+ip+"/control?cmd=GPIO,"+gpio+","+state, // dodajemy state do url :)
  92.         dataType: "json" // spodziewamy się odpowiedzi w fomracie json
  93.     })
  94.     // to jest wywoływane jeśli request się udał (http result code = 200)
  95.     .done(function(data) {
  96.         // ustawmy zawartość tagu span ze statusem
  97.         // debug, uzyteczne jak nie jestes pewien co dostajesz :) , mozesz uzyc Developers Tools i tam krok po kroku
  98.         //    analizować skrypt JS i podglądać jakie są dane w jakich zmiennych ^u^
  99.         //console.log("Status led: ");
  100.         //console.log(data);
  101.         // aktualizacja tag'a ze stanem
  102.         $("#led-status").html("-- &#128472; --");
  103.         // zmieniamy kolor :)
  104.         $("#led-status").css("background-color","#99b3ff");
  105.         // odpytajmy stan GPIO za 500msec
  106.         setTimeout(function() { get_status(ip,gpio); }, 500);
  107.     })
  108.     // jeśli będzie jakiś błąd (e.g. brak urządzenia , zły IP, etc...) to to się wykona:
  109.     .fail(function(jqxhr, text, err) {
  110.         console.log("AJAX query error! text="+text+" , error="+err);
  111.         console.log(jqxhr);
  112.        
  113.         $("#led-status").html("ERROR: "+text);
  114.         // zmieniamy kolor :)
  115.         $("#led-status").css("background-color","#ff4000");
  116.     })
  117.     ; // tutaj jest koniec definicji .ajax(.........)
  118. }
  119.  
  120. // funkcja wywoływana na klik butona
  121. function ledon() {
  122.     set_status(espip,espgpio,1);
  123. }
  124.  
  125. // funkcja wywoływana na klik butona
  126. function ledoff() {
  127.     set_status(espip,espgpio,0);
  128. }
  129.  
  130. function ledstatus() {
  131.     // ' espip,espgpio ' = globalne zmienne , dla przenośności kodu :)
  132.     get_status(espip,espgpio);
  133. }
  134.  
  135. // i kolejny fajny "feature" z jQuery, możemy wywołać z łatwością funkcję po pełnym załądowaniu dokumentu :) (bez uzycia body onload=....)
  136. // mozna to zadeklarować w różnych miejscach i wiele razy wywołując inne funkcje
  137. $(document).ready(function() {
  138.     ledstatus(); // (^o^)
  139. });
  140.  
  141. </script>
  142. </head>
  143.  
  144. <body>
  145. <!-- STatus led'a -->
  146. <div>
  147.     Status: <span style="background-color: #ffff26;" id="led-status">-- ? --</span>
  148. </div>
  149. <!-- input'y pownny być w form tagu, onsubmit=return false - zapobiega wysłaniu formularza -->
  150. <form onsubmit="return false;">
  151. <input type="button" value="Włącz" onClick="ledon();">
  152. <input type="button" value="Wyłącz" onClick="ledoff();">
  153. <br />
  154. <br />
  155. <input type="button" value="Status" onClick="ledstatus();">
  156.  
  157. </body>
  158. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!