HomeMatic CCU2 bei ELV bestellen

gif Animation als Timer

Haussteuerung mittels mediola

Werbung


gif Animation als Timer

Beitragvon 33zdenko » 30.11.2017, 19:31

Da der User kmedia im Mediola Forum nach einem php Script für einen countdown Timer gefragt hat, hier die Lösung:
Code: Alles auswählen
<?php 
 
if(isset($_GET['minuten']))
{
$slide = $_GET['minuten'];
$slide = $slide *60;
}
else $slide = 300; //wenn kein wert für minuten übergeben, timer auf 5 minuten setzen

?>

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Countdown</title>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

 
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background:#2e3032;
}
canvas {
  display:block;
  margin:20px auto;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <canvas id="mycanvas" width="250" height="250"></canvas>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script >
/*===============================

Countdown.
Based on Kerem Suer dribble shot:
http://dribbble.com/shots/560534

change value of the variable --countTo-- to set the timer.
Would love to see someone adding a UI to this one.

=================================*/



(function drawCanvas(){
  var canvas=document.getElementById('mycanvas');
  var ctx=canvas.getContext('2d');
  var cWidth=canvas.width;
  var cHeight=canvas.height;
 
//hier wird die php variable slide in die javascript countTo variable übergeben
  var countTo="<?php echo $slide; ?>";
 
  var min=Math.floor(countTo/60);
  var sec=countTo-(min*60);
  var counter=0;
  var angle=270;
  var inc=360/countTo;
 
 
  function drawScreen() {
   
   
   
    //======= reset canvas
   
    ctx.fillStyle="#2e3032";
    ctx.fillRect(0,0,cWidth,cHeight);
   
    //========== base arc
   
    ctx.beginPath();
    ctx.strokeStyle="#252424";
    ctx.lineWidth=14;
    ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
    ctx.stroke();
    ctx.closePath();
   
    //========== dynamic arc
   
    ctx.beginPath();
    ctx.strokeStyle="#df8209";
    ctx.lineWidth=14;
    ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*270,(Math.PI/180)*angle,false);
    ctx.stroke();
    ctx.closePath();
   
    //======== inner shadow arc
   
    grad=ctx.createRadialGradient(cWidth/2,cHeight/2,80,cWidth/2,cHeight/2,115);
    grad.addColorStop(0.0,'rgba(0,0,0,.4)');
    grad.addColorStop(0.5,'rgba(0,0,0,0)');
    grad.addColorStop(1.0,'rgba(0,0,0,0.4)');
   
    ctx.beginPath();
    ctx.strokeStyle=grad;
    ctx.lineWidth=14;
    ctx.arc(cWidth/2,cHeight/2,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
    ctx.stroke();
    ctx.closePath();
   
    //======== bevel arc
   
    grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
    grad.addColorStop(0.0,'#6c6f72');
    grad.addColorStop(0.5,'#252424');
   
    ctx.beginPath();
    ctx.strokeStyle=grad;
    ctx.lineWidth=1;
    ctx.arc(cWidth/2,cHeight/2,93,(Math.PI/180)*0,(Math.PI/180)*360,true);
    ctx.stroke();
    ctx.closePath();
   
    //====== emboss arc
   
    grad=ctx.createLinearGradient(cWidth/2,0,cWidth/2,cHeight);
    grad.addColorStop(0.0,'transparent');
    grad.addColorStop(0.98,'#6c6f72');
   
    ctx.beginPath();
    ctx.strokeStyle=grad;
    ctx.lineWidth=1;
    ctx.arc(cWidth/2,cHeight/2,107,(Math.PI/180)*0,(Math.PI/180)*360,true);
    ctx.stroke();
    ctx.closePath();
   
    //====== Labels
   
    var textColor='#646464';
    var textSize="12";
    var fontFace="helvetica, arial, sans-serif";
   
    ctx.fillStyle=textColor;
    ctx.font=textSize+"px "+fontFace;
    ctx.fillText('MIN',cWidth/2-46,cHeight/2-40);
    ctx.fillText('SEC',cWidth/2+25,cHeight/2-15);
   
    //====== Values
   
   
   
    ctx.fillStyle='#6292ae';
   
    if (min>9) {
      ctx.font='84px '+fontFace;
      ctx.fillText('9' ,cWidth/2-55,cHeight/2+35);
     
      ctx.font='24px '+fontFace;
      ctx.fillText('+' ,cWidth/2-72,cHeight/2-5);     
    }
    else {
      ctx.font='84px '+fontFace;
      ctx.fillText(min ,cWidth/2-60,cHeight/2+35);
    }
   
    ctx.font='50px '+fontFace;
    if (sec<10) {
      ctx.fillText('0'+sec,cWidth/2+10,cHeight/2+35);
    }
    else {
      ctx.fillText(sec,cWidth/2+10,cHeight/2+35);
    }
   
   
    if (sec<=0 && counter<countTo) {
      angle+=inc;
      counter++;
      min--;
      sec=59;
    } else
      if (counter>=countTo) {
        sec=0;
        min=0;
      } else {
        angle+=inc;
        counter++;
        sec--;
      }
  }
 
  setInterval(drawScreen,1000);
 
})()


</script>

</body>
</html>


hier die datei zum download:
Dateianhänge
countdown1.zip
entpacken und den ganzen ordner auf den server uploaden, vorher umbenennen wie gewünscht
(4.08 KiB) 14-mal heruntergeladen
33zdenko
 
Beiträge: 277
Registriert: 21.12.2013, 16:50

Re: gif Animation als Timer

Beitragvon K_Media » 30.11.2017, 19:41

Das funktioniert.....


Kann man die Farben noch ändern ? Der hintergrund sollte tief schwarz sein


Vielen Dank
CCU2mit FHZ 2000 , Homeputer Studio 4 CL, Fht80b, FS20RSU, FS20 DI-5, FS20ST, FS20FMS-2, FS20DWT, HM-Sen_MDIR-O, HM SCI3-FM, HM-LC-Sw1PBU-FM, HM-LC-SW4-WM, HM-CC-TC, HM-CC-VD, HM-Sec-RHS, HM-Sec-SC, HM-LC-SW4-SM, HM-Sec-TiS, HM-PB-6-WM55, HM-Sec-Key, Mediola Gateway V2.....uvm
K_Media
 
Beiträge: 238
Registriert: 18.05.2013, 18:42


Zurück zu mediola

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste







© homematic-forum.de & Lizenzgebern. Alle Rechte vorbehalten. Alle Bilder & Texte auf dieser Seite sind Eigentum
der jeweiligen Besitzer und dürfen ohne deren Einwilligung weder kopiert noch sonstwie weiter verwendet werden.