Arduino MEGA i BLYNK, LCD odchodzi do lamusa...

SOYER · Luty 12, 2019

Słusznie dzięki, świetny przykład. W Twoim echo ma być tak jak napisałeś echo "${wynik} ${miano}"; czy echo ${wynik}. ${miano};

Zerknij jeszcze na mój przykładowy kod w poprzednim poscie...

nowy skrypt php działa:

<?php
include 'logMeteo.php';

$poczatek = $_REQUEST['from'];
$koniec = $_REQUEST['to'];
$base = $_REQUEST['baza'];
$typ = $_REQUEST['nazwa'];

$result = array();

$polaczenie = new mysqli($host, $db_user, $db_pass, $db_name);

if($polaczenie->connect_errno!=0){
    die("Error: ".$polaczenie->connect_errno."Opis: ".$polaczenie->connect_error);
}
      $typ = $polaczenie->real_escape_string($typ);
      $sqlOdczyt="select unix_timestamp(czas) * 1000, ${typ} from ${base} where czas between ${poczatek} and ${koniec} order by czas";
      $odczyt=$polaczenie->query($sqlOdczyt);
      while($row = $odczyt->fetch_row()){
      $result[] = $row[];
      }
      $odczyt->close();
      
    echo json_encode($result);

?>

$.ajax({url: "getChart.php", dataType: 'json', data:{from: 'xxx', to:'xxx', baza:'mega', nazwa: 'tempZew'}, success: function(res){$('#w14').text(res);}});

teraz muszę wykombinować jak zamiast do wnętrza diva wstawić te dane do mojego var data w scrypcie wykresów....

i jak określić okresy wyszukiwania? wpisywanie daty i godziny(xxx-xx-xx yy:yy:yy)w kwerendę nie działa... trza to jakoś konwertować do unixa?

ethanak · Luty 13, 2019

10 godzin temu, SOYER napisał:

W Twoim echo ma być tak jak napisałeś echo "${wynik} ${miano}"; czy echo ${wynik}. ${miano};

Praca domowa: przeczytać ze zrozumieniem http://pl.php.net/manual/en/language.types.string.php i więcej nie zawracać głowy podstawami które powinieneś znać od dwóch tygodni. Szczególny nacisk należy położyć na rozdział o ekspansji zmiennych.

11 godzin temu, SOYER napisał:

teraz muszę wykombinować jak zamiast do wnętrza diva wstawić te dane do mojego var data w scrypcie wykresów....

Normalnie, nie wywoływać swojego ulubionego kodu wstawiającego wyniki do wnętrza diva (sam go wymyśliłeś) tylko funkcję wstawiającą do tego diva wykres...

10 godzin temu, SOYER napisał:

i jak określić okresy wyszukiwania? wpisywanie daty i godziny(xxx-xx-xx yy:yy:yy)w kwerendę nie działa... trza to jakoś konwertować do unixa?

Nie... a jak wygląda stała datetime w mysql-u? nie jest to przypadkiem string razem z jego apostrofami?

I tu masz efekty tego o czym wspominał Elvis - uczysz się wszystkiego na raz i w efekcie nic nie umiesz. Masz co prawda swoją wymarzoną stronę internetową, ale - sam przyznaj - nie do końca wiesz jak ona działa...

Tak przy okazji - sprawa menu pewnie została uznana za mało ważną i stwierdziłeś, że nie będziesz się takimi duperelkami zajmować? Bo nie pochwaliłeś się działającym...

SOYER · Luty 13, 2019

55 minut temu, ethanak napisał:

sprawa menu pewnie została uznana za mało ważną i stwierdziłeś, że nie będziesz się takimi duperelkami zajmować? Bo nie pochwaliłeś się działającym...

sprawa menu? o czym piszesz?

ethanak · Luty 13, 2019

Nie pochwaliłeś się menu na stronie działającym z klawiatury?

Bo co prawda kodów nie znalazłem, ale mógłbym je odtworzyć; tylko jeśli to zrobiłeś to nie mam po co.

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

SOYER · Luty 13, 2019

aaa, chodzi o to podmenu którego nie daje się podświetlić tabem... pisałeś, że trudno to zrobić ale da się tylko musisz poszukać te swoje szkice.... tak, zostawiłem to bo pisałeś że to odtworzysz w wolnej chwili...

Działający skrypt pobierający dane z bazy i rysujący wykres:

$('#14dni').click(function(){
 $('#container').hide();
 $('#w14').show();
	$.ajax({url: "getChart.php", dataType: 'json', data:{from: 'tempZew', to:'*C', baza:'mega', nazwa: 'tempZew'}, success: function(res){
				var data=res;
				var dataset = [
		{label: "temperatura",data: data}
		
		];
		
		var options = {
            series: {
                lines: { show: true,
				lineWidth:1,
				color: "#FF00CC"},
                points: {
                    radius: 1,
					fill: false,
					fillColor: "#FF00CC",
                    show: true
                }
            },
			colors:['#FF00CC','#CC0000'],
			grid: {
				hoverable: true,
				clickable: false,
				borderColor: '#CC0000',
				borderWidth: 1,
				labelMargin: 1,
				backgroundColor: '#FFF'
			},
			yaxis: {
			axisLabel: 'tempZew',
				min: 0,
				max:50
			},
			xaxis: {
			mode: "time",
			axisLabel: 'czas',
			
			},
		}
		
    
				
				$.plot($("#w14"), dataset, options);
			}});
   
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

Co poprawić?

Oczywiście chętnie skorzystam z Twojej pomocy przy tym podmenu...

Edytowano Luty 13, 2019 przez SOYER

ethanak · Luty 13, 2019

Co poprawić?

Przede wszystkim nie używać funkcji anonimowych bo to zaciemnia sytuację.

Masz coś takiego:

success: function(res) { /* i dalej cała funkcja */ }

Rozumiem, że jak będzie drugie wywołanie ajaxa to jeszcze raz tę samą funkcję skopiujesz? A jak będziesz poprawiać (bo nie znam nikogo kto za pierwszym razem napisze coś bezbłędnie) to będziesz pamiętał, że masz to poprawić w 17 miejscach na stronie A i w 13 na stronie B?

Dlaczego nie zrobisz:

function wykres(data)
{
  /* tu funkcja rysująca wykres */
}

/* i teraz wywołanie */

success: wykres

Możesz zrobić coś takiego - np. dla wykresów z nagłówkami:

function wykres(data, hdr)
{
  
  /* tu rysowanie wykresu i wstawienie tytułu */
}

/* a w wywołaniu */

success: function(res) {wykres(res,"Temperatura zewnętrzna");}

Ogólnie - funkcje anonimowe (poza pewnymi szczególnymi przypadkami, które tu nie występują) powinny być jak najkrótsze.

Pisząc w ten sposób możesz zasymulować sobie działanie poprzez wykonanie funkcji wykres z danymi z przygotowanej tablicy, bez konieczności każdorazowego łączenia z serwerem. Ponadto w przypadku błędu poprawiasz go w jednym miejscu (w funkcji wykres) a nie w fafnastu 🙂

W szczególności: możesz poprosić kogoś o pomoc przekazując mu pełny kod który powinien działać bez Twojego (ani jakiegokolwiek innego) serwera. Trudno się poprawia błędy jeśli się nie ma możliwości sprawdzenia, czy poprawiło się dobrze...

Co do menu - OK, spróbuję odtworzyć to co robiłem.

SOYER · Luty 13, 2019

o tej funkcji to od razu pomyślałem jak pisałem ten kod, bo bez sensu byłoby przepisywanie go dla każdego wykresu osobno... jednak rano sprawdzałem czy mi to w ogóle zadziała, a jak zadziałało to się pochwaliłem i do pracy trza było iść... nawet dobrze, że się pochwaliłem, bo podrzuciłeś fajne przykłady;-).

SOYER · Luty 14, 2019

Zrobiłem ten skrypt obsługi wykresów i ich wywolywanie:

<script>
function wykres(dane, naglowek, div, czujnik){
        var dataset = [{label: naglowek, data: dane}];
        
        var options = {
            legend: {
                show: true,
                labelBoxBorderColor: "#FF00CC",
                margin: -50,
                backgroundOpacity: 0.9,
            
            },
            series: {
                lines: { show: true,
                lineWidth:1,
                color: "#FF00CC"},
                points: {
                    radius: 1,
                    fill: false,
                    fillColor: "#FF00CC",
                    show: false
                }
            },
            colors:['#FF00CC','#CC0000'],
            grid: {
                hoverable: true,
                clickable: false,
                borderColor: '#CC0000',
                borderWidth: 1,
                labelMargin: 1,
                backgroundColor: '#FFF'
            },
            yaxis: {
                axisLabel: czujnik,
                min: -20,
                max: 35,
            },
            xaxis: {
                mode: "time",
                axisLabel: 'czas',
            
            },
        }
        $.plot($(div), dataset, options);
}
</script>

$('#7dni').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').show();
 $.ajax({url: "getChart.php", dataType: 'json', data:{b:'mega', c: 'tempZew', o: '7'}, success: function(res){
                wykres(res, "Wykres 7-dniowy", '#w7', "Temperatura zewnętrzna");
            }});
 $('#mnie').hide();
});

$('#14dni').click(function(){
 $('#container').hide();
 $('#w14').show();
    $.ajax({url: "getChart.php", dataType: 'json', data:{b:'mega', c: 'tempZew', o: '14'}, success: function(res){
                wykres(res, "Wykres 14-dniowy", '#w14', "Temperatura zewnętrzna");
            }});
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#miesiac').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').show();
 $.ajax({url: "getChart.php", dataType: 'json', data:{b:'mega', c: 'tempZew', o: '30'}, success: function(res){
                wykres(res, "Wykres 30-dniowy", '#m1', "Temperatura zewnętrzna");
            }});
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#3miesiace').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').show();
 $.ajax({url: "getChart.php", dataType: 'json', data:{b:'mega', c: 'tempZew', o: '90'}, success: function(res){
                wykres(res, "Wykres 90-dniowy", '#m3', "Temperatura zewnętrzna");
            }});
 $('#w7').hide();
 $('#mnie').hide();
});

argumenty do wykres() będę musiał do tablicy zapisać jak pięknie pokazałeś, bo dużo się ich robi... i przy okazji też tablice do php-a...

i zapytanie:

$sqlOdczyt="select unix_timestamp(czas) * 1000, ${czujnik} from ${base} WHERE czas > DATE(DATE_SUB(NOW(), INTERVAL ${okres} DAY))";

Teraz to i tak muszę poprzerabiać, bo chcę w każdej podstronie z menu 7/17/30/90 dni mieć wybór którego czujnika ma dotyczyc wykres.... jakieś przyciscki, rozwiajane menu czy cóś...

Choć może prościej by było zrobić na głównej podmenu historyczne z czujnikami, a potem wybór okresu czasowego.

Pewnie na jedno wychodzi...

Jakiś ciekawy pomysł na to??

Edytowano Luty 14, 2019 przez SOYER

ethanak · Luty 14, 2019

Nie bardzo mam pomysł bo ja bym to robił zupełnie inaczej...

Takie ważne pytanie: czy jesteś w stanie nałożyć na siebie dwa - trzy wykresy? Bo chyba najbardziej interesująca jest korelacja między kilkoma wartościami... wtedy to można całkiem zgrabnie rozwiązać.

Aha, bardzo zręcznie ominąłeś kwestię literałów przy datetime 😉 Ale i tak będziesz musiał zrobić dane historyczne (np. w lipcu będziesz chciał wykresy z trzeciego tygodnia lutego).

SOYER · Luty 14, 2019

17 minut temu, ethanak napisał:

Nie bardzo mam pomysł bo ja bym to robił zupełnie inaczej...

Jak?

18 minut temu, ethanak napisał:

Takie ważne pytanie: czy jesteś w stanie nałożyć na siebie dwa - trzy wykresy? Bo chyba najbardziej interesująca jest korelacja między kilkoma wartościami... wtedy to można całkiem zgrabnie rozwiązać.

Tak, bez problemu, odpisujesz w funkcji wykres tylko dodatkową wartość dane, no i trzeba je pobrać...

20 minut temu, ethanak napisał:

Aha, bardzo zręcznie ominąłeś kwestię literałów przy datetime 😉 Ale i tak będziesz musiał zrobić dane historyczne (np. w lipcu będziesz chciał wykresy z trzeciego tygodnia lutego).

Jeśli chodzi o opisy przy osi czasu to wyskakują automatycznie, zależnie od zasięgu, tyle że miesiąc in English, ale to jest ustawialne jak kojarzę...

Druga kwestia to właśnie myślałem nad takim kalendarzem gdzie sobie wybieram okres od do i wyświetla wykres.

Ale to na razie poza moim zasięgiem...

ethanak · Luty 14, 2019

No to wyobrażam sobie coś takiego:

Strona z wykresami (oddzielna). Oprócz głównego kontenera (samego wykresu), mamy:

checkboxy odpowiadające konkretnym czujnikom
selektor (7/17/30/90), docelowo jeszcze pozycja "podaj okres", ale o tym za chwilę...
oczywiście jakiś button "pokaż wykres".

Możesz javascriptem ograniczyć, że nie może by więcej niż n czujników na jednym wykresie.

1 godzinę temu, SOYER napisał:

myślałem nad takim kalendarzem gdzie sobie wybieram okres od do i wyświetla wykres.

Ale to na razie poza moim zasięgiem..

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Tylko przeczytaj wszystko do końca!

SOYER · Luty 14, 2019

27 minut temu, ethanak napisał:

Strona z wykresami (oddzielna). Oprócz głównego kontenera (samego wykresu), mamy:

checkboxy odpowiadające konkretnym czujnikom

selektor (7/17/30/90), docelowo jeszcze pozycja "podaj okres", ale o tym za chwilę...

oczywiście jakiś button "pokaż wykres".

no i max, min i średnia za podany okres...

ten selektor 7/14/30...może faktycznie już na podstronie, było by wygodniejsze...

Ale kto to napisze i zgra;))?

27 minut temu, ethanak napisał:

Tylko przeczytaj wszystko do końca!

Siądę wieczorem... jak masz jeszcze jakieś pomysły to dajesz... 🙂

Edytowano Luty 14, 2019 przez SOYER

ethanak · Luty 14, 2019

8 minut temu, SOYER napisał:

Ale kto to napisze i zgra;))?

Właśnie zostałeś wyznaczony na ochotnika 🙂

SOYER · Luty 14, 2019

taki mały offtopic, @Treker, ten licznik odwiedzin wątku dobrze działa? Bo pamiętam jak patrzyłem koło 2 miesiące temu było 5000, a teraz dobija do 15000. Nie wiem ile z tego jest unikalnych użytkowników ale jakoś dziwnie, teatr dwóch aktorów:), nikt się nie dołącza...? ;))

SOYER · Luty 16, 2019

<div id="tytul"><u>WYKRESY:</u></div>
    
<div class="wstWybor" ><select id="okres">
                    <option selected disabled >Wybierz zakres czasu</option>
                    <option value="7">Dane z 7 dni</option>
                    <option value="14">Dane z 14 dni</option>
                    <option value="30">Dane z 30 dni</option>
                    <option value="90">Dane z 90 dni</option>
                    <option>Dowolny okres czasu</option>
                </select>
                <select id="czujnik">
                    <option selected disabled>Wybierz czujnik</option>
                    <option value="tempZew">Temperatura zewnętrzna</option>
                    <option value="tempSlonce">Temperatura w słońcu</option>
                    <option value="tempGrunt">Temperatura przy gruncie</option>
                    <option value="cisnienie">Ciśnienie</option>
                    <option value="wilgZew">Wilgotność</option>
                    <option value="pm1">Stężenie pyłu PM1</option>
                    <option value="pm2">Stężenie pyłu PM2,5</option>
                    <option value="pm10">Stężenie pyłu PM10</option>
                </select>
</div>
<div id="wykresy"></div>

function okresCzujnik() {
  var okres = $( "#okres" ).val();
  var czujnik = $( "#czujnik" ).val();
  
    if (czujnik == "cisnienie"){var m = "hPa";var b = "mega";}
    else if (czujnik == "wilgZew"){var m = "%RH";var b = "mega";}
    else if ((czujnik == "tempZew")||(czujnik == "tempGrunt")||(czujnik == "tempSlonce")){var m = "°C";var b = "mega";}
    else if((czujnik == "pm1") || (czujnik == "pm2") || (czujnik == "pm10")){ var b = "pms";var m = "µg/m³";}
    
 $.ajax({url: "getChart.php", dataType: 'json', data:{b: b, c: czujnik, o: okres}, success: function(res){
                wykres(res, "Wykres "+okres+"-dniowy", '#wykresy', m);
            }});
}
$( "select" ).change(okresCzujnik);

function wykres(dane, naglowek, div, miano){
        var dataset = [{label: naglowek, data: dane}];
        
        var options = {
            legend: {
                show: true,
                labelBoxBorderColor: "#FF00CC",
                margin: [250,-50],
                backgroundOpacity: 0.9,
            
            },
            series: {
                lines: { show: true,
                lineWidth:1,
                color: "#FF00CC"},
                points: {
                    radius: 1,
                    fill: false,
                    fillColor: "#FF00CC",
                    show: false
                }
            },
            colors:['#FF00CC','#CC0000'],
            grid: {
                hoverable: true,
                clickable: false,
                borderColor: '#CC0000',
                borderWidth: 1,
                labelMargin: 1,
                backgroundColor: '#FFF'
            },
            yaxis: {
                axisLabel: miano,
                
            },
            xaxis: {
                mode: "time",
                axisLabel: 'czas',
            
            },
        }
        $.plot($(div), dataset, options);
}

Z telefonu:

Zrobiłem osobną stronę, jak radziłeś. Znacząco to rozjaśniło kod. Pozmieniałem menu, wszystko działa z taba.

Zostały mi max, min i średnia, odczytywanie głosowe;-), i co jeszcze?

Edytowano Luty 16, 2019 przez SOYER

Arduino MEGA i BLYNK, LCD odchodzi do lamusa...

Pomocna odpowiedź

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Polecacz 101

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach