'Inteligenty' dom ze sterownikiem PLC

 Language:
Szukanie zaawansowane  

Aktualności:

Powrót do strony głównej: www.edom-plc.pl

Autor Wątek: Panel administracyjny bootstrap - kod źródłowy  (Przeczytany 13616 razy)

viper_lasser

  • Newbie
  • *
  • Wiadomości: 7
    • Zobacz profil
Panel administracyjny bootstrap - kod źródłowy
« dnia: Maja 25, 2015, 05:36:05 pm »

Czy jest gdzieś dostępny opis w jaki sposób można uzyskać taki panel administracyjny
http://www.edom-plc.pl/index.php/pl/wiecej-o-plc/sterowanie/191-panel-administracyjny-wszystko-w-jednym
?
Gdzie mogę znaleźć najnowszą wersję biblioteki e-dom ?
Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #1 dnia: Maja 26, 2015, 02:49:58 pm »

Cześć,

Napisać program to co innego niż udostępnić kod do stosowania.  Trzeba go wyczyścić, opisać, uczynić uniwersalnym.  Stworzyłem panel administracyjny na szybko, dla siebie i kod jest pełen skrótów.  Nie bardzo mam jak zrobić z niego coś, co wykorzystają inni - tak, jak w przypadku wtyczki do jquery.  Mogę ew. pomóc i opowiedzieć jak wszystko działa.

Co do samej wtyczki - nie była aktualizowana.  Wszelką komunikację piszę teraz z wykorzystaniem protokołu do webvisu, czyli |0|....

Pozdrawiam,
Zapisane

viper_lasser

  • Newbie
  • *
  • Wiadomości: 7
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #2 dnia: Maja 26, 2015, 03:12:36 pm »

Templatkę z pulpitem można znaleźć w internecie
http://startbootstrap.com/template-overviews/sb-admin-2/

Czy wszystkie ekrany były edytowane w jakimś edytorze do html'a np pspadzie czy może jednak zostało to stworzone przy użyciu jakiegoś narzędzia ?
Czy dane są zapisywane za pomocą jakimiś skryptami wywołanymi z cron'a czy jednak jakiegoś deamona chodzącego w tle.


Zastanawiam się w jaki sposób zdefiniować sobie jakąś bazę danych sygnałowych (w oparciu o modbusa tcp).
W jaki sposób nie mając możliwości odczytu danych w sposób Wago jednocześnie odczytywać interesujące dane i je zapisywać.
Chyba potrzebna będzie jakaś implementacja zapytań grupowych do odczytu i zapisu ale żadnych skryptów w internecie nie znalazłem.

Kiedyś dawno temu odczyt rejestrów z modbusa rozwiązałem poprzez zdefiniowanie danych w pliku xml gdzie określałem czy rejestr typu Holding Registers ma być traktowany jako liczba czy bit i czy ma być skalowany ale to trochę na około było zrobione. Oczywiście adres startowy musiałbyć też określony.
Szukam jakiegoś lepszego i prostszego sposobu do dostania się danych po modbusie tcp w html'u.
Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #3 dnia: Maja 27, 2015, 10:01:26 am »

Cześć,

Templatka, jak piszesz, jest opensource do ściągnięcia.

Dopisałem skrypt php, który wg parametru p (np. index.php?p=dashboard) importuje do kontentu templatki jakąś podstronę, Innymi słowy: górny pasek jest stały, menu po lewej jest stałe, zmienia się kontent po prawej.

Każda z takich podstron to też plik php, choć PHP jest wykorzystywany TYLKO do weryfikacji uprawnień.  Sam w sobie zwraca kontent HTML składający się z elementów i załączonych plików js.  Przykładowo podstrona z głownym dashboardem dashboard.php wygląda tak:

<?php

   defined('_DASH') or die;
   
   echo '
   <script src="js/raphael.2.1.0.min.js"></script>
   <script src="js/justgage.1.0.1.min.js"></script>
   <script src="js/bootstrap-slider.js"></script>
itd..

Każda pod-storna ma dedykowany skrypt js zawierający definicje obiektów i funkcje specyficzne dla danej strony.

Każdy 'klocek' na podstronie jest osobnym obiektem, np na dashboardzie element odpowiedzialny za wyświetlanie ostatniego ruchu:

{"id" : "LastMovement", "movement" : "PLC_PRG.Move_lastMoveTime", "time" : ".CURRENT_TIME", "moveID": "PLC_PRG.Move_lastMoveID", "RefreshInterval": 1000},

Skrypt startowy w $(document).ready(function() {...  zbiera wszystkie nazwy zmiennych (np. PLC_PRG.Move_lastMoveTime) i wysyła je do pliku checkAddresses.php prosząc o sprawdzenie adresów w pamięci PLC.  Ów plik php zczytuje z PLC plik wizualizacji.xml, na której muszą być umieszczone obiekty odpowiadające za potrzebne zmienne, parsuje go i zwraca listę adresów w postaci:

4|63024|4|20;4|175300|4|20;4|62627|1|2;4|62328|2|3;1|14|2|1;4|76708|2|1;4|76718|2|1;

Te adresy przypisywane są do obiektów i uruchamiana jest funkcja odśwież, która przez plik read.php komunikuje się z PLC.  read.php zwraca listę stanów w JSONie .  Zwrócone dane są parsowane w JS.  Uniwersalna funkcja read wygląda tak:

function read(readAddresses, onSuccess) {
   var start = new Date();
   ReadAjax = $.ajax({
         type: 'POST',
         url: "WAGO/read.php",
         timeout: 8000,
         dataType : "json",
         data: {ADRs: readAddresses},
         success: function(data){
            var finish = new Date();
            var duration = finish-start;
            if (typeof onSuccess !== "undefined") onSuccess(data, duration);
         }
      }); // -ajax
}

Po prawdzie to wszystko jest trochę bardziej skomplikowane bo kolejkuję zapytania read i wykonuję je kolejno, by nie zasypać PLC kwerendami. 

... no i tak to się wszystko kręci.  Nie ma modbusa.  Można czytać wiele zmiennych na raz.  Można zapisywać kilka równocześnie. 

Co do edytora - korzystam wyłącznie z Notepad++.  Przykłady widgetów zawarte w templacie w zasadzie są gotowe do wykorzystania.

Pozdrawiam,
« Ostatnia zmiana: Maja 27, 2015, 10:03:57 am wysłana przez admin »
Zapisane

Lukasz-Z

  • Newbie
  • *
  • Wiadomości: 3
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #4 dnia: Kwietnia 22, 2016, 03:03:03 pm »

Witam,

Mam pytanie odnośnie kafla z prognozą pogody pobieraną z forecast.io.
Jest jakaś szansa by dostać kod odpowiedzialny za jej wyświetlanie?

Pozdrawiam.
Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #5 dnia: Września 09, 2016, 02:38:04 pm »

... no i tak to się wszystko kręci.  Nie ma modbusa.  Można czytać wiele zmiennych na raz.  Można zapisywać kilka równocześnie.

Czy jest szansa namówić na ściągawkę jak przerobić toto na modbus? Adresowanie po komórkach pamięci wydaje mi się bardziej logiczne niż tworzenie visu aby mieć adresy zmiennych. Przy okazji jedna robota mniej. Problem w tym, że zupełnie nie rozumiem logiki javascriptu i nie potrafię przepisać istniejącego kodu zapytującego ssi czy przez visu na modbus.
Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #6 dnia: Marca 11, 2018, 10:01:30 pm »

Pytanie do Admina: Dlaczego w przykładowym dashboardzie zmienne dotyczące temperatury wyświetlają się w innym formacie niż w pamięci sterownika? Domyślam się, że w ten sposób od razu można wyświetlić wprost z czujnika, np 100 i dashboard pokaże 10,0 stC, ale jeśli mam w programie już temperatury skorygowane, to na www wyświetla się 1,0 stC. Nie mogę nigdzie znaleźć gdzie to jest przestawione. Mogę prosić o trzy słowa naprowadzenia?
Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #7 dnia: Marca 12, 2018, 09:03:44 pm »

Cześć,

przeszukaj pliki js, np. visu.js, tam w funkcji RefreshStates() znajdziesz

case "temp_is":
   Elements[element].target.text(data[index]/10+" °C");

Tu można usunąć to dzielenie przez 10.
Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #8 dnia: Marca 13, 2018, 12:54:26 am »

Ok, jest. Dziękuję.
Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #9 dnia: Marca 13, 2018, 10:56:54 pm »

Grubszy problem namierzyłem. Jak widać po kodzie, dashboard Admina, działa tak:

- Po wybraniu, z menu wychodzi adres http://strona/index.php?p=[nazwa podstrony].
- Plik index.php inkluduje stronę o nazwie pliku [nazwa podstrony].php
- Inkuldowana podstona dołącza skrypt o nazwie [nazwa podstrony].js
- Skrypt wywołuje check_addresses.php z podaniem [nazwa podstrony]
- check_addresses.php ładuje ze sterownika [nazwa podstrony]_xml.zip lub jeśli nie ma, domyślną

No i problem jest taki, że zawsze ładuje się domyślny xml. Jeśli wołana wizualizacja dotyczy innej podstrony niż główna, nie ma danych. Wszak zmienna przechowująca [nazwa podstrony] jest kluczowa. Wywołanie check_addresses.php jest js, którego nie cierpię i nie rozumiem, więc nie wiem gdzie "znika" potrzebny parametr w postaci nazwy xml-a do ściągnięcia. Przeanalizowałem wszystkie skrypty i nie potrafię znaleźć błędu. Admin, pomóż proszę.
« Ostatnia zmiana: Marca 13, 2018, 11:00:22 pm wysłana przez Tom01 »
Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #10 dnia: Marca 13, 2018, 11:40:14 pm »

PS. Przejrzałem cały kod, nigdzie nie ma wywołania check_addresses.php z przekazaniem POST zmiennej source. Czyli nie ma prawa działać.
Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #11 dnia: Marca 16, 2018, 11:45:18 am »

Cześć,

układ stron/plików/skryptów nie powstał w jakiś przemyślany i mądry sposób... tylko został poklejony w trakcie pracy.  Stąd trochę mi głupio, jak to wszystko wygląda, ale tylko trochę ;)  chodziło raczej o pokazanie koncepcji niż o sprzedaż ostatecznego produktu.

skrypt check_addresses.php sprawdza, czy w tablicy $_POST podana jest wartość pod kluczem 'source'. Jeśli jest, to go wykorzysta.  Jeśli nie, bierze domyślne $zipSource = 'v_datatransfer_xml.zip'; $xmlSource = 'v_datatransfer.xml';

w visu.js faktycznie jest funkcja, która sprawdza adresy:

$.ajax({
      type: 'POST',
      url: "WAGO/check_addresses.php",
      timeout: 8000,
      data: {ADRs: Variables},
      success: function(data){
         var Reply = data.split(";"); (...)

ale nie podajemy w niej source i check_addresses.php korzysta z wartości domyślnych.  By dodać source, trzeba by rozszerzyć tablicę data czyli

(...)
data: {ADRs: Variables, source: "nazwa_pliku_xml_bez_xml_bo_w_PHP_dokleimy_rozszerzenie"},
success: (...)

Tak właśnie działa funkcja GetWagoAddresses (file, Request, onSuccess) w WagoCommon.js:

(...)
$.ajax({
      type: 'POST',
      url: "WAGO/check_addresses.php",
      timeout: 8000,
      data: {ADRs: Variables, source: file},
      success: function(data){ (...)


Pozdrawiam,



Zapisane

oley

  • Newbie
  • *
  • Wiadomości: 10
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #12 dnia: Stycznia 05, 2019, 06:38:02 pm »

Jak zliczane i potem wyświetlane są np. ilości zapalonych świateł ?? Czy zlicza to sterownik i wysyła konkretną wartość czy robione jest to na poziomie PHP. Można dostać przykład jak zrobić taki widget który będzie wyświetlał jakąś wartość ??
Zapisane

oley

  • Newbie
  • *
  • Wiadomości: 10
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #13 dnia: Stycznia 05, 2019, 07:28:23 pm »

Generalnie chodzi mi o to, że mam np coś takiego:

   <div class="row">
            <div class="col-xl-3 col-sm-6 mb-3">
              <div class="card text-white bg-primary o-hidden h-100">
                <div class="card-body">
                  <div class="card-body-icon">
                    <i class="fas fa-fw fa-comments"></i>
                  </div>
                  <div class="mr-5"> Ilość świateł: ??????????????????</div>
         
                </div>
               
              </div>
            </div>
                  </span>
                </a>
              </div>
            </div>

no właśnie i jak w miejsce ??????????? wsadzić tą ilość zaczytaną ze sterownika ??

Zapisane

Tom01

  • Full Member
  • ***
  • Wiadomości: 101
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #14 dnia: Stycznia 05, 2019, 10:16:04 pm »

Moim zdaniem zliczanie trzeba zrobić w programie. Być może jest jakaś gotowa funkcja, ale w prosty sposób zrobić to tak, że każdej funkcji włączającej światło, wraz z wyjściem, ustawić zmienną pomocniczą z wartością 1 jeśli włączone i 0 jeśli wyłączone, np light0 := 1. Następnie gdziekolwiek w programie głównym zrobić sumowanie, np lights := light0 + light1 + light2 + ....;

Co do samego interfejsu, dobrze radzę zwrócić się w stronę gotowego frameworka. Ja po miesiącach walki z bootstrapem użyłem iobrokera i w końcu wszystko stało sie proste. Wymiana danych ze sterownikiem za pomocą modbus. Wystarczy podać w konfiguracji zmiennych adres modbusowy, typ zmiennej i voila. Wizualizację rysuje się przez klikanie w edytorze, całość oczywiście wyświetla się html5 + js, integruje się w zasadzie dowolne inne systemy, np monitoring. Genialne rozwiązanie i zero walki z surowym php czy niech go grom zawali, javascryptem.

W załączeniu panel sterowania rekuperatorem, który robi się w pół godziny, za pomocą myszki.
« Ostatnia zmiana: Stycznia 05, 2019, 10:21:51 pm wysłana przez Tom01 »
Zapisane

oley

  • Newbie
  • *
  • Wiadomości: 10
    • Zobacz profil
Odp: Panel administracyjny bootstrap - kod źródłowy
« Odpowiedź #15 dnia: Stycznia 07, 2019, 05:47:03 pm »

 Nadal nie rozwiązałem problemu ;(
Na razie doszedłem do tego, że w pliku visu-1.js wrzuciłem:

document.cookie = 'username='+data[0] ;

a w pliku index.php w miejscu gdzie ma się wyświetlić dana wartość pobrana ze sterownika
  <?php
if ( ! empty( $_COOKIE['username'] ) ) {
            
                echo "Hi " . $_COOKIE['username']; // Outputs : Hi John Doe
               
             }
 ?>


Wszystko niby działa problem pojawia się taki, że to zrobiłem na ciasteczkach i jak sterownik zmieni wartość to u mnie na stronie nic się nie zmieni do ponownego odświeżenia strony. Generalnie mogę ustawić cykliczne odświeżanie strony, ale pewnie jest na to lepszy sposób niż ciasteczka.
Zapisane