Antworten
Nov 28, 2017 - 18:04
Ich würde empfehlen so was nicht mit einem gif zu lösen, da hast Du keinerlei Einfluss darauf wann dies wie abgespielt wird. Stattdessen würde ich mit einem Webseitenelement arbeiten und einer PHP Seite, die eine Grafik oder auch CSS anzeigt. Die kannst wenn Du den Timer aufrufst zeitgleich in einem Makro die Webseite mit einem Parameter aufrufen. Dann zeigt Dir die Webseite exakt den Timer an und das auch nur dann wenn wirklich ein Timer gestartet wurde und nicht jedes mal wenn die Seite aufgerufen wird wie bei einem gif.
Timer findet Du jede Menge Vorlagen für Dein Vorhaben.
Timer findet Du jede Menge Vorlagen für Dein Vorhaben.
Nov 30, 2017 - 08:08
ok
zuerst erstellst du auf dem webspace einen ordner namens countdown oder wie auch immer du willst...
das machst du mit einem ftp programm direkt vom pc aus z.b filezilla ist ok oder kannst du auch den von lima benutzen direkt auf deren webseite...musst dort lesen wie das geht.
diesen code was ich poste kopierst du in eine datei namens index.php
am besten du benutzst notepad ++
und dann mit dem ftp programm in den ordner den du erstellt hast im deinem webserver uploaden
kmedia.lima-city.de lautet und dein ordner den du für diesen timer erstellt hast, timer heisst dan greifst du darauf so:
zuerst erstellst du auf dem webspace einen ordner namens countdown oder wie auch immer du willst...
das machst du mit einem ftp programm direkt vom pc aus z.b filezilla ist ok oder kannst du auch den von lima benutzen direkt auf deren webseite...musst dort lesen wie das geht.
diesen code was ich poste kopierst du in eine datei namens index.php
am besten du benutzst notepad ++
und dann mit dem ftp programm in den ordner den du erstellt hast im deinem webserver uploaden
<?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.fill
ctx.fillRect(0,0,cWidth,cHeight);
//========== base arc
ctx.beginPath();
ctx.stroke
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.stroke
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.stroke
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.stroke
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.stroke
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.fill
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.fill
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>
kmedia.lima-city.de lautet und dein ordner den du für diesen timer erstellt hast, timer heisst dan greifst du darauf so:
http://kmedia.lima-city.de/timer/index.php?minuten=3wenn du es als standard 5 minuten benutzen willst dann reicht:
http://kmedia.lima-city.de/timer/wie gesagt wenn du meinst es soll über https gehen dann einfach so schreiben statt http
viel spass :)
Nov 30, 2017 - 08:22
Ich würde ehrlich gesagt zumindest per Basic Auth absichern sonst kann ja jeder Honk die Seite aufrufen wenn die schon im Internet liegt.
Entweder so auf einem Webserver legen oder besser lokal. In IP-Symcon würdest Du so was einfach in ein Skript kopieren und setzt einen Webhook drauf fertig.
Für IP-Symcon:
Für einen Webserver:
Damit das ganze sinnvoll funktioniert must Du in NEO ein Makro anlegen, in dem Du dann einerseits den Befehl absetzt als auch einen HTTP Request absetzt, entweder an den Webserver oder aber den Webhook.
Aus NEO muss der HTTP Request dann so aussehen
durch die IP bzw. URL ersetzen.
Entweder so auf einem Webserver legen oder besser lokal. In IP-Symcon würdest Du so was einfach in ein Skript kopieren und setzt einen Webhook drauf fertig.
Für IP-Symcon:
<?
$webhookusername = "neo";
$webhookpassword = "ips4";
if(!isset($_SERVER['PHP_AUTH_USER']))
$_SERVER['PHP_AUTH_USER'] = "";
if(!isset($_SERVER['PHP_AUTH_PW']))
$_SERVER['PHP_AUTH_PW'] = "";
if(($_SERVER['PHP_AUTH_USER'] != $webhookusername) || ($_SERVER['PHP_AUTH_PW'] != $webhookpassword)) {
header('WWW-Authenticate: Basic Realm="Tasker WebHook"');
header('HTTP/1.0 401 Unauthorized');
echo "Authorization required";
return;
}
echo "Webhook Countdown IP-Symcon 4";
//workaround for bug
if(!isset($_IPS))
global $_IPS;
if($_IPS['SENDER'] == "Execute")
{
echo "This script cannot be used this way.";
return;
}
// get seconds
$seconds = 240;
if (isset($_GET["seconds"]))
{
$seconds = $_GET["seconds"];
}
if (isset($_GET["minutes"]))
{
$minutes = $_GET["minutes"];
$seconds = $minutes*60;
}
$html = '<!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;
var countTo="'.$seconds.'";
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.fill
ctx.fillRect(0,0,cWidth,cHeight);
//========== base arc
ctx.beginPath();
ctx.stroke
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.stroke
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.stroke
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.stroke
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.stroke
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.fill
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.fill
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>';
echo $html;
?>Für einen Webserver:
<?
$webhookusername = "neo";
$webhookpassword = "secretpassword";
if(!isset($_SERVER['PHP_AUTH_USER']))
$_SERVER['PHP_AUTH_USER'] = "";
if(!isset($_SERVER['PHP_AUTH_PW']))
$_SERVER['PHP_AUTH_PW'] = "";
if(($_SERVER['PHP_AUTH_USER'] != $webhookusername) || ($_SERVER['PHP_AUTH_PW'] != $webhookpassword)) {
header('WWW-Authenticate: Basic Realm="Tasker WebHook"');
header('HTTP/1.0 401 Unauthorized');
echo "Authorization required";
return;
}
echo "Countdown NEO";
// get seconds
$seconds = 240;
if (isset($_GET["seconds"]))
{
$seconds = $_GET["seconds"];
}
if (isset($_GET["minutes"]))
{
$minutes = $_GET["minutes"];
$seconds = $minutes*60;
}
$html = '<!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;
var countTo="'.$seconds.'";
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.fill
ctx.fillRect(0,0,cWidth,cHeight);
//========== base arc
ctx.beginPath();
ctx.stroke
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.stroke
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.stroke
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.stroke
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.stroke
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.fill
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.fill
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>';
echo $html;
?>Damit das ganze sinnvoll funktioniert must Du in NEO ein Makro anlegen, in dem Du dann einerseits den Befehl absetzt als auch einen HTTP Request absetzt, entweder an den Webserver oder aber den Webhook.
Aus NEO muss der HTTP Request dann so aussehen
http://neo:secretpassword@<ip or url>/hook/countdown?seconds=360durch die IP bzw. URL ersetzen.
Von
Vielen Dank für die Info...aber, dafür müßte ich einen PHP Server aufsetzen. Dies wollte ich umgehen.
Von
den server kannst du bei lima-city.de kostenlos bekommen und solche spielereien umsetzen.
Von
kannst ja im neo testen ob das richtig läuft:
http://neoremote.lima-city.de/countdown/
Von
das läuft, aber ich habe leider keine ahnung wie ich so etwas selber erstellen kann.
Von
das ist kein problem, wenn du es haben willst musst du dir erstmal einen account bei lima erstellen
dann schreibe ich dir den code hier
teste jetzt das um dem timer die anzahl der minuten vorzugeben
http://neoremote.lima-city.de/countdown1/index.php?minuten=4
und einmal ohne diese vorgabe von minuten, dann macht er wieder 5 als standard
http://neoremote.lima-city.de/countdown1/
also im neo als webseite wieder einbinden
Von
Du kannst entweder einen Webserver lokal aufsetzten, oder eine Webseite nutzten, diese sollte dann aber gesichert sein über https da die Daten ja über das Internet laufen. Alternativ kannst Du so ein Skript auch einfach in IPS in eine String Variable mit Profil ~HTMLBox schreiben, dann kannst Du das einfach in NEO über ein Webseitenelement einbinden. Egal was Du wählst Du kommst ohne PHP nicht weiter, da sich das mit nur einem gif nicht lösen lässt. Ich selber nutzte IPS, da musst Du gar keinen PHP Server aufsetzten sondern kopierst das Skript einfach in eine Variable der Aufruf des Timers erfolgt über einen Webhook der per Basic Authentication abgesichert ist aus NEO per HTTP Befehl.
Von
Ich weiss nicht was er mit den gifs realisieren wollte, wenn einen countdown von 5 min bis 0, aber keine aktion, dann braucht er kein php und die erste version oben läuft nur mit javascript und html.
Von
Wenn die Zeit immer gleich ist ja, wenn sich die Zeit aber unterscheidet und z.B. aus NEO an die Seite übergeben werden soll braucht er PHP. Wenn immer ein fester Timer aufrufen werden soll mit stets der gleichen Zeit würde es auch eine HTML Seite mit CSS oder JavaScript tun.
Von
habe ich im oben 2 beispiele gemacht :)
Von
ausserdem bietet lima-city.de auch kostenlos https aufruf:
siehe die links oben
einfach https anstatt http schreiben
Von
Webspace bei lima ist organisiert. Ich würde dann gerne auf das Hilfsangebot zur Programmierung zurück kommen.
Von
@zdenko33
Wenn musst Du schon den gesamten Quellcode der PHP Seite posten ;-), nur mit dem Source kann er nichts anfangen, da sieht er ja das PHP nicht sondern nur das HTML und Javascript.
Von
mache ich auch wenn er lust dazu hat :)
Von
oh habe ich nicht gesehen sein kommentar....ich poste gleich den quellcode
Neuen Kommentar hinzufügen