PHP

PHP Klimat Nov zavihek

<?php // <a href="python.php">PHP</a> Klimat diagram.php ?>
<html>
<head>
  <title>Diagram</title>
  <meta http-equiv="refresh" content="60;URL=./diagram.php" />
  <link rel="stylesheet" href="stili.css">
</head>
<body >
  <form method="post"><button name="relativno">Relativno</button><button name="absolutno">Absolutno</button></form>
  <div style='position:absolute;top:40pt;left:4pt'><canvas id="diagram" width=792 height=420 style='border:1px solid #d3d3d3;'/></div>
  <div style='position:absolute;top:370pt;left:4pt' id='meritev'></div>
<?php
   print("<script language=JavaScript>\n");
   date_default_timezone_set('Europe/Ljubljana');
   print("var y = [");
   $povezava = new mysqli("localhost", "pi", "raspberry","test");
   if ($povezava->connect_error) die("Napaka: " . $povezava->connect_error);
   $podatki = $povezava->query("SELECT * FROM podatektipala ORDER by casodcitka DESC");
   while($vrstica = $podatki->fetch_assoc())
     print(strtotime($vrstica["casodcitka"]).",".$vrstica["temperatura"].",".$vrstica["vlaga"].",".$vrstica["tlak"].",");
   $povezava->close();print("];\n");

print("const diagram = document.getElementById('diagram');");
   print("const context = diagram.getContext('2d');");
   print("diagram.addEventListener('mousemove', e => {vrednosti();});");

$w=date("w");if($w==0) $w=6;else $w=$w-1;
   print("var t=".($w*96+date("H")*4+date("i")/15).";\n");
   if (isset($_POST['relativno'])){echo "t=672;";}
   print("y[0]=".time().";\n");
   #print("document.write('t=',t);");
?>
  var dan = ["Pon", "Tor", "Sre", "\u010Cet", "Pet", "Sob", "Ned"];  vl = new Array(1200); te = new Array(1200); tl = new Array(1200); ca = new Array(1200);
  function vrednosti(){
    var x = document.getElementById("meritev");var dt = new Date("January 1, 1970 00:00:00");dt.setSeconds( dt.getSeconds() + ca[event.clientX-106] + 3600 );
    if(ca[event.clientX-106] && event.clientY>120 && event.clientY<460){document.getElementById("meritev").innerHTML = dt.getDate()+"."+(dt.getMonth()+1)+"."+dt.getFullYear()+" "+dt.getHours()+":"+dt.getMinutes()+"<br>Temperatura = "+te[event.clientX-106]+"\u00baC<br>Vlaga = "+vl[event.clientX-106]+"%<br>Tlak = "+tl[event.clientX-106]+"hPa";}
    else {document.getElementById("meritev").innerHTML = "";};
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  }
  function izris(){var c = document.getElementById("diagram");var ctx = c.getContext("2d");
   ctx.font="22px Verdana";
   ctx.fillStyle = '#ff0000';ctx.fillText("Temperatura "+y[1]+"\u00baC", 100, 50);
   ctx.fillStyle = '#0000ff';ctx.fillText("Vlaga "+y[2]+"%", 390, 50);
   ctx.fillStyle = '#000000';ctx.fillText("Tlak "+y[3]+"hPa", 600, 50);
   ctx.beginPath();ctx.strokeStyle = '#aaaaaa'; ctx.lineWidth = 0.5;
   for ( x = 0 ; x < 8 ; x++ ){
		ctx.moveTo(100+x*96, 380); ctx.lineTo(100+x*96, 100);                        //y - koordinata
		ctx.moveTo(100, 100+x*40); ctx.lineTo(772, 100+x*40);                        //x - koordinata
		}
   ctx.stroke();
   ctx.font="9px Verdana";
   for ( x = 0 ; x < 8 ; x++ ){
        ctx.textAlign = 'right';ctx.fillStyle = '#ff0000';ctx.fillText(50-x*10 + "\u00baC", 25, 107+x*40);   //oznake temperature
        ctx.fillStyle = '#0000ff';ctx.fillText(90-x*10+"%", 55,107+x*40); //oznake vlage
        ctx.fillStyle = '#000000';ctx.fillText(1080-x*40+"hPa", 96,107+x*40); //oznake tlaka
        if(t!=672) {ctx.textAlign = 'center';if(x<7) {ctx.fillStyle = '#0000ff';ctx.fillText(dan[x], 148+96*x, 400);}}     //oznake cas
        else      {if(x<7) {ctx.fillStyle = '#0000ff';ctx.fillText(-x+"d", 772-96*x, 400);}}     //oznake cas
		}

ctx.lineWidth = 1.5;ca[t]=y[0];

var x1=100;
   for ( x = 0 ; x < 3600 ; x=x+4 ){//cas
     if(t<(-(y[x]-y[0]))/900) if(x1==100){x1=772;ca[x1-100]=y[x];}
     ca[Math.trunc(x1-100+t+(y[x]-y[0])/900)]=y[x];}

ctx.beginPath();var x1=100;ctx.strokeStyle = '#ff0000';ctx.moveTo(x1+t,300-y[1]*4);te[t]=y[1];
   for ( x = 0 ; x < 3600 ; x=x+4 ){//temperatura
     if(t<(-(y[x]-y[0]))/900) if(x1==100){x1=772;ctx.moveTo(x1,300-y[x+1]*4);te[x1-100]=y[x+1];}
     ctx.lineTo(x1+t+(y[x]-y[0])/900,300-y[x+1]*4);te[Math.trunc(x1-100+t+(y[x]-y[0])/900)]=y[x+1];}
   ctx.stroke();

ctx.beginPath();var x1=100;ctx.strokeStyle = '#0000ff';ctx.moveTo(x1+t,460-y[2]*4);vl[t]=y[2];
   for ( x = 0 ; x < 3600 ; x=x+4 ){//vlaga
     if(t<(-(y[x]-y[0]))/900) if(x1==100){x1=772;ctx.moveTo(x1,460-y[x+2]*4);vl[x1-100]=y[x+2];}
     ctx.lineTo(x1+t+(y[x]-y[0])/900,460-y[x+2]*4);vl[Math.trunc(x1-100+t+(y[x]-y[0])/900)]=y[x+2];}
   ctx.stroke();

ctx.beginPath();var x1=100;ctx.strokeStyle = '#000000';ctx.moveTo(x1+t,1180-y[3]);tl[t]=y[3];
   for ( x = 0 ; x < 3600 ; x=x+4 ){//tlak
     if(t<(-(y[x]-y[0]))/900) if(x1==100){x1=772;ctx.moveTo(x1,1180-y[x+3]);tl[x1-100]=y[x+3];}
     ctx.lineTo(x1+t+(y[x]-y[0])/900,1180-y[x+3]);tl[Math.trunc(x1-100+t+(y[x]-y[0])/900)]=y[x+3];}
   ctx.stroke();

ctx.beginPath();ctx.strokeStyle = '#00ff00';ctx.moveTo(100+t,380);ctx.lineTo(100+t,100);//crta trenutnega casa
   ctx.stroke();
   }
   izris();
<?php
  echo "</script>\n";
?>
</body>
</html>