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

[ethanak]

No więc wbij sobie wreszcie do głowy, że to nie do tego służy.

Masz problem że tabem nie przechodzisz przez swoje wydumane divy - bo do tego służą a, button i input a nie div.

Masz problem że enter nie działa (bo jak ma działać) - bo do tego służą a, button i input a nie div.

Z myśliwca (zwłaszcza z gatunku tych starszych) od biedy można zrzucić bombę (zwłaszcza z gatunku tych mniejszych) - ale bombowiec się do tego dużo lepiej nadaje. A Ty w tej chwili chcesz na siłę załadować bomby do w miarę nowoczesnego myśliwca a potem będziesz się zastanawiać jak je zrzucić...

Edytowano Luty 9, 2019 przez ethanak

[SOYER]

 napisałem:

18 godzin temu, SOYER napisał:

znaczy, że jak jest zrobione przez js np.

$(). click(function{});

 

to już o sterowaniu klawiaturą mogę zapomnieć?? 

ty odpowiedziałeś:

 

18 godzin temu, ethanak napisał:

a jakim elementem jest ten, do którego click podłączasz?

jeśli to a, input czy button - nie ma problemu.

i ja

 

18 godzin temu, SOYER napisał:

click podłączyć chcę do elementów a zawartych w div... 

i ty

18 godzin temu, ethanak napisał:

jeśli to a, to wystarczy zwrócić false z funkcji, aby zablokować domyślne zachowanie. wtedy zostanie wykonane to co masz w onclick, a przeglądarka nie wlezie w nowy adres.

to w końcu da się w takiej stronie sterowac klawiaturą czy nie, czy zamiast jquery i podmian zawartości trzeba by zrobić wszystko na a href...

 

Dzisiaj bomby to przeszłość, owszem czasem łatwa do użycia przeciw turbaniarzom, ale w wojnie symetrycznej, absolutnie niepotrzebne koszty i ryzyko.... 

 

 

Wczoraj dołożyłem wstępnie wykresy w jquery flot:

<script type="text/javascript">
        var data = [[1, -20], [2, 0], [3, 0], [4, 10], [5, 19], [6, 37], [7, 33], [8, 35], [9, 37], [10, 4], [11, 33], [31, 3]];
 		var data1 = [[1, 20], [2, 10], [3, 10], [4, 20], [5, 1], [6, 3], [7, 13], [8, 5], [9, 7], [10, 4], [11, 9], [31, 3]];
 		var dataset = [
        	{label: "temperatura",data: data},
        	{label: "wilgotność",data: data1}
        ];
        
 
        var options = {
            series: {
                lines: { show: true },
                points: {
                    radius: 1,
                    fill: true,
                    show: true
                }
            }
        }
        
    </script>

i potem

$('#7dni').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').show();
 $(document).ready(function () {
            $.plot($("#w7"), dataset, options);
        });
 $('#mnie').hide();
});

Jak teraz wstawić do przykładowych data i data1 dane z mojej bazy?

Edytowano Luty 9, 2019 przez SOYER

[ethanak]

26 minut temu, SOYER napisał:

 zamiast jquery i podmian zawartości trzeba by zrobić wszystko na a href...

Nie. Wyobraź sobie, że oprócz czerni i bieli jest jeszcze dość dużo stopni szarości, a i parę bardziej kolorowych kolorków by się znalazło...

Niech "podajdane.php" będzie skryptem zwracającym jakąś tam wartość wraz z mianem.

Fragment kodu:
 

<a href="podajdane.php?param=temp" onclick="return getData('temp');">temperatura</a>

<a href="podajdane.php?param=wilg" onclick="return getData('wilg');">wilgotność</a>

fukcja getData to zwykła funkcja pobierająca ajaxem dane in wkładająca je do jakiegoś kontenera - różnica taka, że musi zwrócić false.

I teraz spójrz jak to będzie działać:

Ponieważ masz element a z href (bez href nie działa), będzie on możliwy do wybrania w dowolny przewidziany przez przeglądarkę sposób. Może być to myszka, klawiatura, polecenie głosowe czy interfejs telepatyczny - Ty się tym nie zajmujesz, nad kodem przeglądarki ludzie siedzieli paręnaście lat i jest duża szansa, że zrobili coś lepiej 🙂

Jeśli już ów element wybrałeś i aktywowałeś, zostanie wykonane onclick (nieważny jest sposób aktywacji, w tym miejscu "click" zadziała zawsze). Ponieważ click zwróci false, dalsza natywna działalność przeglądarki będzie zablokowana i Twoje dane po pobraniu przez Ajaxa zostaną we właściwym miejscu wyświetlone. Niezależnie, czy kliknąłeś myszką, plasnąłeś w enter czy masz interfejs reagujący na klaskanie.

I teraz co się stanie, jeśli z jakichś przyczyn funkcja nie zostanie wykonana? Wiem że Lynx do Ciebie nie przemawia, ale weź choćby dość popularne rozszerzenie noscript. W takim przypadku przeglądarka po prostu przejdzie do adresu wskazanego przez href - czyli wyświetli wynik. Co prawda nie będzie on taki śliczny jak z Javascriptem ale zawsze będzie.

Masz tu i jquery z podmiankami, i natywną nawigację przez a href, i działanie w każdych warunkach...

Przy okazji - te Twoje linki tworzą bardzo ładną listę. Dlaczego elementy a chcesz wkładać w div a nie w li?

 

[SOYER]

Nie jest tego dużo to wklejam tu cały html zamiast na githuba, może będzie łatwiej mio zrozumieć o czym piszesz.

Jak kiedyś napisałeś, łatwiej się nauczyć jak się widzi kod,  a nie rozważa teoretycznie, gdybym mógl prosić o jeden przykład oparty na moim pliku html, jak to przerobić by działało z klawiszy....

kod:

<!DOCTYPE HTML>
<html lang="pl">

<head>

<meta charset="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>

    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="flot-master/source/jquery.flot.min.js"></script>

<script type="text/javascript">
     var data = [[1, -20], [2, 0], [3, 0], [4, 10], [5, 19], [6, 37], [7, 33], [8, 35], [9, 37], [10, 4], [11, 33], [31, 3]];
    var data1 = [[1, 20], [2, 10], [3, 10], [4, 20], [5, 1], [6, 3], [7, 13], [8, 5], [9, 7], [10, 4], [11, 9], [31, 3]];
 
        var dataset = [
        {label: "temperatura",data: data},
        {label: "wilgotność",data: data1}
        ];
        
        var options = {
            series: {
                lines: { show: true },
                points: {
                    radius: 1,
                    fill: true,
                    show: true
                }
            }
        }
        
    </script>

<script>
function jakoscPowietrza(){
$.ajax({url: "getData.php", data:{nazwa: 'pm2', baza:'pms'}, success: function(res){
    if(res<13){$('#jakosc').text("Jakość powietrza w tej chwili: BARDZO DOBRA");}
    else if((res>12) && (res<37)){$('#jakosc').text("Jakość powietrza w tej chwili: DOBRA");}
    else if((res>36) && (res<61)){$('#jakosc').text("Jakość powietrza w tej chwili: UMIARKOWANA");}
    else if((res>60) && (res<85)){$('#jakosc').text("Jakość powietrza w tej chwili: DOSTATECZNA");}
    else if((res>84) && (res<121)){$('#jakosc').text("Jakość powietrza w tej chwili: ZŁA");}
    else {$('#jakosc').text("Jakość powietrza w tej chwili: BARDZO ZŁA");}
}});
setTimeout("jakoscPowietrza()",60000);
}
</script>

<script>

function odswierzanieCzasu()
{
var dzisiaj = new Date();
var dzien = dzisiaj.getDate();
if(dzien<10) dzien = "0"+dzien;
var miesiac = dzisiaj.getMonth()+1;
if(miesiac<10) miesiac = "0"+miesiac;
var rok = dzisiaj.getFullYear();

var godzina = dzisiaj.getHours();
if(godzina<10) godzina = "0"+godzina;
var minuta = dzisiaj.getMinutes();
if(minuta<10) minuta = "0"+minuta;
var sekunda = dzisiaj.getSeconds();
if(sekunda<10) sekunda = "0"+sekunda;

document.getElementById("data").innerHTML = dzien+"-"+miesiac+"-"+rok;
document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda;

setTimeout("odswierzanieCzasu()",1000);
}
</script>

<meta name="description" content="Oto parametry jakości powietrza w miejscowości Kryry"/>
<meta name="keywords" content="kryry, pogoda, smog, jakosc powietrza, temperatura, cisnienie, wilgotnosc, pm1, pm2.5, pm10"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Charm" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aleo" rel="stylesheet">
</head>

<body onload="odswierzanieCzasu();jakoscPowietrza();">
<header>
    <div class="menu">
        <ol>
            <li id="zegar"></li>
            <li><a id="glowna" href="#">Strona główna</a></li>
            <li><a href="#">Dane historyczne</a>
                <ul>
                    <li><a id="7dni" href="#">Dane z 7 dni</a></li>
                    <li><a id="14dni" href="#">Dane z 14 dni</a></li>
                    <li><a id="miesiac" href="#">Dane z miesiąca</a></li>
                    <li><a id="3miesiace" href="#">Dane z 3 miesięcy</a></li>
                </ul>
            </li>
            <li><a id="oMnie" href="#">O stacji</a></li>
            <li id="data"></li>
        </ol>
    </div>
</header>
<div id="tytul">Jakość powietrza w Kryrach</div>
    <div style="clear:both;"></div>

<div id="jakosc"></div>

<div id="w7">TU BĘDZIE WYKRES ZA 7 DNI</div>
    <script>$('#w7').hide();</script>
<div id="w14">TU BĘDZIE WYKRES ZA 14 DNI</div>
    <script>$('#w14').hide();</script>
<div id="m1">TU BĘDZIE WYKRES ZA MIESIĄC</div>
    <script>$('#m1').hide();</script>
<div id="m3">TU BĘDZIE WYKRES ZA 3 MIESIĄCE</div>
    <script>$('#m3').hide();</script>
<div id="mnie">TU BĘDZIEINFORMACJA O STACJI</div>
    <script>$('#mnie').hide();</script>

<div id="container">
    <div id="glowny1">
      <ul class="czujniki"> 
       <li><a id="temp">Temperatura powietrza</a></li>
    
       <li><a id="wilg">Wilgotność powietrza</a></li>
   
       <li><a id="cis">Ciśnienie</a></li>
  
       <li><a id="tempS">Temperatura w słońcu</a></li>
  
       <li><a id="tempG">Temperatura przy gruncie</a></li>
  
       <li><a id="pm1">Stężenie pyłów PM 1</a></li>
      
       <li><a id="pm2">Stężenie pyłów PM 2,5</a></li>
    
       <li><a id="pm10">Stężenie pyłów PM 10</a></li>
     </ul>
    </div>

    <div id="glowny2">
       <div id="odczytCzujnik"></div>
          <script>$('#odczytCzujnik').hide();</script>
       <div id="wyniki"></div>
          <script>$('#wyniki').hide();</script>
  
     
       <div id="odczytGlowny">Witaj :-) <br/> <br/> Kliknij na wybrany parametr powietrza po lewej stronie, aby zobaczyć aktualny wynik odczytu...</div>
    </div>
   <div style="clear:both;"></div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

<script>
$('#7dni').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').show();
 $(document).ready(function () {
            $.plot($("#w7"), dataset, options);
        });
 $('#mnie').hide();
});

$('#14dni').click(function(){
 $('#container').hide();
 $('#w14').show();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#miesiac').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').show();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#3miesiace').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').show();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#glowna').click(function(){
 $('#container').show();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').hide();
});

$('#oMnie').click(function(){
 $('#container').hide();
 $('#w14').hide();
 $('#m1').hide();
 $('#m3').hide();
 $('#w7').hide();
 $('#mnie').show();
});

 $('#temp').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualna temperatura wynosi: "); 
 $.ajax({url: "getData.php", data:{nazwa: 'tempZew', mian:'*C', baza:'mega'}, success: function(res){$('#wyniki').text(res);}});
   });

 $('#wilg').click(function(){
  $('#odczytGlowny').hide();
  $('#odczytCzujnik').show();
  $('#wyniki').show();
  $("#odczytCzujnik").html("Aktualna wilgotność wynosi: ");
  $.ajax({url: "getData.php", data:{nazwa: 'wilgZew', mian:'%RH', baza:'mega'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#cis').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualne ciśnienie wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'cisnienie', mian:'hPa', baza:'mega'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#tempG').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualna temperatura przy gruncie wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'tempGrunt', mian:' *C', baza:'mega'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#tempS').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualna temperatura w słońcu wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'tempSlonce', mian:' *C', baza:'mega'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#pm1').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualne stężenie PM 1 wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'pm1', mian:'µg/m³', baza:'pms'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#pm2').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualne stężenie PM 2,5 wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'pm2', mian:'µg/m³', baza:'pms'}, success: function(res){$('#wyniki').text(res);}});
   });
   
 $('#pm10').click(function(){
 $('#odczytGlowny').hide();
 $('#odczytCzujnik').show();
 $('#wyniki').show();
 $("#odczytCzujnik").html("Aktualne stężenie PM 10 wynosi: ");
 $.ajax({url: "getData.php", data:{nazwa: 'pm10', mian:'µg/m³', baza:'pms'}, success: function(res){$('#wyniki').text(res);}});
   });
</script>

</body>

</html>

Jak widzisz, mam i ul i ol, div też, jako główne pojemniki na resztę...

[Polecacz 101]

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

[ethanak]

Bo ten nieszczęsny element a ma dwie funkcje, pierwsza to link (jeśli ma href) a druga (przestarzała) to anchor (jak nie ma hrefa). Od czasu HTML4 jako anchor może służyć dowolny element, ale to głupie zachowanie a pozostało.

Po prostu - musimy założyć, że a zawsze musi mieć href. A w "czujniki" tego nie masz i dlatego przeglądarka nie traktuje tego jako link.

Dodaj tam testowo (uwaga: to błędna konstrukcja ale prowizorycznie będzie działać):

href="javascript:void(0)"

i sprawdź czy zadziała.

 

 

[SOYER]

OK działa, przynajmniej dal czujników, dołożyłem też do css :focus i ładnie podświetla, jest problem z wyświetlaniem podmenu i menu, pomimo dołożenia:

ol > li:hover >ul{
    display: block;
}
ol > li:focus >ul{
    display: block;
}

oraz

ol > li:nth-child(2):hover{
    background-color:#11AADD;
}
ol > li:nth-child(2):focus{
    background-color:#11AADD;
}
ol > li:nth-child(3):hover{
    background-color:#11AADD;
}
ol > li:nth-child(3):focus{
    background-color:#11AADD;
}
ol > li:nth-child(4):hover{
    background-color:#11AADD;
}
ol > li:nth-child(4):focus{
    background-color:#11AADD;
}

ani nie podświetla menu, ani nie wyswietla podmenu po najechaniu tabem...

w stanie nieaktywnym menu jest display:none; :

ol > li > ul{
    list-style-type:none;
    paddnig:0;
    margin:0;
    height:40px;
    display:none;
}

 

Edytowano Luty 9, 2019 przez SOYER

[ethanak]

focus musi być na a bo to on łapie ogniskowanie.

[SOYER]

No tak, podswietlanie menu przez tab-a zadziałało po wypisaniu w css:

ol li a:focus{
    background-color:#11AADD;
}

jednak już to:

ol li a:focus ul{
    display: block;
}

niestety nie wyświetla podmenu po najechaniu tabem...

ok zrobiłem

ol li a:focus + ul{     display: block; }

Działa już, poprawiłem, tzn nie do końca... tabem preskakuję po menu, ładnie się podświetla, ale jak najadę tabem na dane historyczne to owszem wyświetla się prawidłowo podmenu ale kolejne naciśnięcie taba nie powoduje wybierania opcji podmenu tylko jakby wyjscie z tego menu i kolejny tab to juz o mnie 

Edytowano Luty 9, 2019 przez SOYER

[ethanak]

z menu w czystym css zawsze były problemi i chyba do dziś nie udało się nikomu osiągnąć pełnego efektu - zawsze coś gdzieś szwankuje.

ja stosowałem swoje rozwiązanie - drastyczne co prawda, ale działające w każdych warunkach. przy wyłączonym javascripcie menu to była zwykła dwupoziomowa lista, jakoś fajnie ostylowana ale widoczna w całości. przy włączonym js nie bawiłem się w żadne css-owe focusy - po prostu podpinałem onfocus/onblur i onmouseover/onmouseout do każdej pozycji menu i na tej podstawie mogłem sterować całym wyświetlaniem.

niestety, kody gdzieś przepadły, ale mógłbym postarać się opisać to dokładniej (tylko to nie jest zadanie na pół godziny).

[SOYER]

Jak znajdziesz chwilę i opiszesz, to będzie bonusowy artykuł do kursu webowego na Forbocie:-)

To moze teraz o jquery FLOT

4 godziny temu, SOYER napisał:

Jak teraz wstawić do przykładowych data i data1 dane z mojej bazy?

Ja bym to widział tak, że wchodzę w menu dane historyczne  wybieram okres historyczny z podmenu i tam mam klika z nazwą każdego czujnika, po kliknięciu na banner z nazwą wyswietla mi wykres dla konkretnego czujnika z okresu wybranego w podmenu(7,14dni, 1,3 miesiące).

Kupa danych do wysłania do PHP i kombinacje jak napisać kwerendę.... 

Jakieś podpowiedzi?

 

Film ze sterownia TABem i pierwszy wykres próbny:

 

Edytowano Luty 9, 2019 przez SOYER

[SOYER]

Ok, @ethanak, mam taki skrypt do obsługi wykresów flot:

<script type="text/javascript">
     var data = [[1, -20], [2, 0], [3, 0], [4, 10], [5, 19], [6, 37], [7, 33], [8, 35], [9, 37], [10, 4], [11, 33], [31, 3]];
        var dataset = [
        {label: "temperatura",data: data},
        {label: "wilgotność",data: data1}
        ];
        
        var options = {
            series: {
                lines: { show: true,
                lineWidth:1,
                color: "#FF00CC"},
                points: {
                    radius: 4,
                    fill: true,
                    fillColor: "#FF00CC",
                    show: true
                }
            },
            colors:['#FF00CC','#CC0000'],
            grid: {
                hoverable: true,
                autoHighlight: false,
                clickable: false,
                borderColor: '#CC0000',
                borderWidth: 10,
                labelMargin: 5,
                backgroundColor: '#FFF'
            },
            yaxis: {
                min: 0,
                max:50,
                color: '#FF00CC'
            },
            xaxis: {
            tickSize : 1,
            tickDecimals: 0,
                color: '#FF00CC',

            },
        }
        
    </script>

 

Dane w var data oczywiście przykładowe. Gdzieś czytałem, że w javascrypcie nie ma tablic dwuwymiarowych tylko właśnie takie tablice tablic [ [],[] ]... 

Druga rzecz, wyczytałem, że flot nie przyjmuje danych daty jako datę tylko jako liczbę (ms od 70r), ale wyczytałem też, że format daty jaki mi kazałeś ustawić w bazie danych TIMESTAMP to właśnie liczba milisekund od tam 70roku, czyli rozumiem, że ta data i czas jako TIMESTAMP jest zapisana w bazie jako ms i po pobraniu jej z bazy nie trzeba jej nijak konwertować do formatu odpowiedniego dla flota...tak?

Rozumiem, że teraz muszę pobrać z bazy do var data [ [czas], [odczyt z konkretnego czujnika] ] i tak wszystko za jakiś tam okres, np. kwerenda będzie wyglądać nastepująco:

pobierz wszystko z tempZew gdzie czas t.j. rok 2019 || miesiac 02 i to zapisujemy do [odczyt z konkretnego czujnika] oraz

poberz wszystko z czas gdzie rok 2019 || miesiac 02 i to zapisujemy do [czas]

jak to teraz zapisać w PHP?

<?php
include 'logMeteo.php';

$b = $_REQUEST['mian'];
$typ = $_REQUEST['nazwa'];
$base = $_REQUEST['baza'];
$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 `${typ}` FROM `${base}` 'np.pobierzczas'";
      $odczyt=$polaczenie->query($sqlOdczyt);
      $row = $odczyt->fetch_array();
      $odczyt->close();
      
if ($row) {
    $result = $row[];
     print_r($result)
    }
 else {
    echo "0 results";
}

?>

 

czy takie $result = $row[] zapisuje wszystkie dane z zapytania (wszystkie datetime z zapytanego okresu np 02.2019)za jednym razem do tablicy $result?

Wiem, że chaotycznie to wszystko, ale nie wiem czego się uczepić na początek...

[ethanak]

38 minut temu, SOYER napisał:

format daty jaki mi kazałeś ustawić w bazie danych TIMESTAMP

A nie DATETIME przypadkiem? CURRENT_TIMESTAMP to wartość domyślna dla pola, ale typ to DATETIME.

Co do php i tak dalej:

przede wszystkim nie pobierasz jednego wiersza tylko ileś tam wierszy (tyle ile było w danym okresie).

Czyli:

select ${czujnik}, czas from ${tabelka} where czas between ${poczatek} and ${koniec} order by czas

oczywiście początek i koniec musisz sobie jakoś tam określić ale to trywialna sprawa.

Do formatowania i odczytywania czasu w php masz funkcje strftime, strptime, mktime, time i parę jeszcze, ale mysql też cos potrafi....

Do komunikacji wymyślono swego czasu notację JSON, obsługę masz chyba we wszystkich językach.

Czyli docelowo będzie to co w stylu:

$sel = "select unix_timestamp(czas) * 1000, ${typ} from ${tabelka} where czas between ${poczatek} and ${koniec} order by czas";
$result = $conn -> query($sel);
$wynik=array();
while ($row = $result->fetch_row()) {
  $wynik[] = $row;
}
// nie robisz żadnych wyjątków dla zerowej ilości wyników,
// to zrobisz po stronie javascriptu

echo json_encode($wynik);

mnożenie przez 1000 w query jest dlatego, że chciałeś mieć czas w milisekundach a unix_timestamp ma rozdzielczość sekund.

Teraz jeśli wynik tego odczytasz ajaxem (pamiętaj, aby ustawić typ danych na json) - dostaniesz w wyniku śliczną tablicę tak, jak sobie wymarzyłeś 🙂

Na razie tyle wystarczy?

 

 

[SOYER]

starczy, siądę wieczorem i spróbuję coś z tego ogarnąć... 

[SOYER]

Ok, takie pytanie: w PHP ma już jedno zapytanie "SELECT `${typ}` FROM `${base}` order by `czas` desc limit 1";  do obsługi przycików na stronie. Teraz chcę  zrobic kilka kolejnych dla zapytań o różne okresy czasowe dla wykresów.  Czy można poprostu ajaxem przeslać całą treść kwerendy do zmiennej w PHP...?

$.ajax({url: "getData.php", data:{kwerenda: '"select unix_timestamp(czas) * 1000, ${typ} from ${tabelka} where czas between jakiś and jakiś order by czas"'}, success: function(res){$('#wyniki').text(res);}});

a w php:

$xyz = $_REQUEST['kwerenda'];

$odczyt=$polaczenie->query($xyz);

Czy zrobić osobny skrypt php do którego będziemy odnosić się w ajaxie, a który będzie odpowiadał za wykresy...

Chyba tak lepiej... bo przecież tu jeszcze inaczej zapisujemy, zwracamy wynik przez json_encode... czyli drugi skrypt PHP?

ok, napisałem drugi skrypt:

<?php
include 'logMeteo.php';

$poczatek = $_REQUEST['od'];
$koniec = $_REQUEST['do'];
$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);

?>

@ethanakpytania: coś do poprawy?

$row = $odczyt->fetch_row()    gdzieś widziałem zapis fetch_array()... który jest poprawny i dlaczego?

napisałeś: // nie robisz żadnych wyjątków dla zerowej ilości wyników, // to zrobisz po stronie javascriptu czyli brak słynnego  if($row){}, możesz rozwinąć temat? jak to sprawdzić po stronie JS?

Edytowano Luty 12, 2019 przez SOYER

[ethanak]

27 minut temu, SOYER napisał:

Czy można poprostu ajaxem przeslać całą treść kwerendy do zmiennej w PHP...?

Można ale po co? W ten sposób otwierasz drogę każdemu kto chciałby tę Twoja stronę w powietrze wysadzić... co powiesz na przesłanie do serwera kwerendy "delete from pms"? A do tego żadnego mastahaka nie trzeba, wystarczy spojrzeć w kod strony...

Aplikacja po stronie przeglądarki nie powinna nic wiedzieć o jakichkolwiek bazach danych, dla niej te skrypty na serwerze to taka czarna skrzynka w której czort wie skąd biorą się jakieś wyniki. I tak masz za dużo o kilka parametrów...

Taki przykład:
 

$typy=array(
	"tz"=>array("tempZewn", "meteo","°C"),
	"pm10"=>array("pm10","pms","µg/m³"),
	"pm2"=>array("pm2","pms","µg/m³"),
/* i tak dalej */
);

$what = $_SERVER['typ'];
if (empty($typy[$what])) die();
$miano = $typy[$what][2];
$tabela = $typy[$what][1];
$typ = $typy[$what][0];

$q="select ${typ} from ${tabela} order by czas desc limit 1";
...
echo "${wynik} ${miano}";

Przesyłam do serwera jeden parametr, który nawet nie odpowiada nazwie pola w bazie danych (bo po co), aplikacja po stronie przeglądarki nie wie nic o jakichkolwiek tabelach i bazach bo jej to do szczęścia niepotrzebne.

A jak Ty to robisz? Przesyłasz explicite nazwy pól i tabel, prawda?

Co do skryptów po stronie PHP: najłatwiej zrobić oddzielny, szczególnie w przypadku kiedy różne wywołania potrzebują różnych danych.

 

Edytowano Luty 12, 2019 przez ethanak