Wykreślanie wykresów oraz wykonywanie tygodniowego harmonogramu - strona HTML.

0

Witam,

Jako że jestem tu nowy i początkujący to z góry proszę o wyrozumiałość :)

Otóż mam pewien pomysł na polepszenie mojej strony internetowej tylko nie mam pojęcia jakimi narzędziami się posłużyć i jak to zrobić.

  1. Chciałbym na swojej stronie pobierać dane ze sterownika PLC i wyświetlać z jakimś tam założonym przeze mnie czasem odświeżania charakterystyki odczytywanych wartości (np wykres zależności temperatury z odczytanej z czujnika od czasu). Odczyty te pobierane byłyby do pliku .csv. Nie mam pojęcia czy dałoby się to zrobić z poziomu jakiegoś html'a, javy pobierając dane bezpośrednio z pliku pomiarowego nadpisywanego co jakiś czas odświeżania. Wgrywanie bazy danych raczej by nie wchodziło w grę, jako że webserwer na sterowniku ma bardzo małą pamięć (ledwo kilka MB).

  2. Na tej samej stronie chciałbym zrobić możliwość ustawiania tygodniowego harmonogramu dla użytkownika; np aby użytkownik sobie ustawił na stronie że wentylator ma się włączać w poniedziałek, wtorek, piątek w godz 11:00-17:00 i takie też dane byłyby wysłane na sterownik o tych godzinach jeśli użytkownik wyjechałby na urlop.

Mam nadzieję, że moje intencje i post zostanie zrozumiany :) Jeśli nie to proszę o pytania to dojaśnię co i jak :) Z góry dzięki za każdą pomoc :) Pozdrawiam.

1

Mogę jedynie rzucić hasło jeśli chodzi o wykresy, to polecam jqplot - biblioteka JS umożliwiająca generowanie wykresów. Samą logikę ustawiania harmonogramu można wykonać w PHP + baza danych, najprościej MySQL, jeśli szukałbyś konkretniejszego silnika bazodanowego to PostgreSQL. Użytkownik zapisywałby z poziomu strony WWW ustawienia do bazy, a z bazy czytałoby jakieś inne urządzenie, które wysyłałoby dane na sterownik, bo strona WWW zostanie zamknięta w końcu. Można umieścić mały programik na jakimś serwerze, jeśli posiadasz, który byłby cyklicznie uruchamiany i czytałby z bazy danych ustawienia, jednak nie wiem, jak z wysyłaniem danych na sterownik. Ale w C, C++ na pewno by było do zrobienia. Jeśli chodzi o generowanie pliku .csv to również z poziomu PHP nie byłoby problemu.

0

Ok a jakieś konkretne przykłady pokazujące jak to zrobić wraz z wytłmaczeniem? W sieci można znaleźć kilka przykładów o których wspomniał kolega powyżej, lecz bezmyślne skopiowanie kawałka kodu i wklejenie go na stronę nie wiedząc co tak do końca w nim się dzieje i co w nim zmienić to raczej nie wchodzi w grę... :)

0

Ale o jakie konkretnie przykłady Ci chodzi? Jak generować wykres na WWW, jak wyeksportować dane do .csv? Jest pełno tutoriali z przykładami. Chyba, że masz na myśli coś bardziej zaawansowanego jeśli chodzi o przedstawienie przykładu. Wyjaśnij, jeśli możesz.

0

Dane już są zapisywane w pliku .csv. Tylko że z tego co zauważyłem teraz to ten plik mi się nie nadpisuje co jakiś czas próbkowania (nie wiem czy to błąd oprogramowania sterownika czy coś...). Próbuję coś zrobić korzystając z szablonu wykresów AmCharts, póki co wyświetla mi się zmienna ale ta sama wartość jest wyświetlana dla każdej daty.
Generalnie biorąc pod uwagę, że zmienna Temp_zewn jest zapisywana w html jako <%var(0,2,7)%> natomiast data jest zapisywana jako zmienne <%var(0,3,101)%> (rok), <%var(0,3,102)%> (miesiąc), <%var(0,3,103)%> (dzień), <%var(0,3,104)%> (godzina), <%var(0,3,105)%> (minuta) jak zrobić żeby była jedna wartość na minutę i aby wykres po odświeżeniu się zostawił poprzednio odczytaną wartość i pokazał kolejną przy okazji łącząc te dwie wartości linią?
Data na sterowniku jest ustawiona prawidłowo a i tak na osi wykresu te wartości są błędne.

Póki co wygląda to u mnie tak:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--tagparser="/pcotagfilt"-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta  http-equiv="Refresh" content="30">
        <title>Wykres Temp_zewn(t)</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="amcharts/amcharts.js" type="text/javascript"></script>
        <script src="amcharts/serial.js" type="text/javascript"></script>
        <script src="amcharts/themes/dark.js" type="text/javascript"></script>

        <script>
            var chart = AmCharts.makeChart("chartdiv", {
                "type": "serial",
                "theme": "dark",
                "dataDateFormat": "YYYY-MM-DD",  

                "dataProvider": [{
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+1,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+2,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+3,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+4,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+5,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+6,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+7,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+8,
                    "value": <%var(0,2,7)%>
                }, {
                    "date": <%var(0,3,101)%>-<%var(0,3,102)%>-<%var(0,3,103)%>+9,
                    "value": <%var(0,2,7)%>
                }],
                "valueAxes": [{
                    "maximum": 140,
                    "minimum": -10,
                    "axisAlpha": 0,
					"title": "Temp_zewn [st. C]",
                    "guides": [{
                        "fillAlpha": 0.1,
                        "fillColor": "#CC0000",
                        "lineAlpha": 0,
                        "toValue": 120,
                        "value": 0
                    }, {
                        "fillAlpha": 0.1,
                        "fillColor": "#0000cc",
                        "lineAlpha": 0,
                        "toValue": 200,
                        "value": 120
                    }]
                }],
                "graphs": [{
                    "bullet": "round",
                    "dashLength": 4,
                    "valueField": "value"
                }],
                "chartCursor": {
                    "cursorAlpha": 0
                },
                "categoryField": "date",
                "categoryAxis": {
                    "parseDates": true
                }
            });
        </script>
    </head>

    <body style="background-color:#3f3f4f;">
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>

</html> 

1 użytkowników online, w tym zalogowanych: 0, gości: 1