Uhrzeit darstellen im Webfront (HTML, Flash Lösung?)

Tetrapack · 10. Januar 2015 um 12:50

Moin

Meine Frau hat mir gerade die Aufgabe gestellt die Uhrzeit im Webfront größer darzustellen.
Hat schon mal jemand eine alternative Uhrzeitanzeige gebastelt? Also entweder als analoge Uhr oder eben Digital, nur deutlich größer als das Uhrzeit Widget?
Digitalanzeige wird wohl einfach nur ein String genommen und per HTML formatiert und dann in einer HTML Box ausgegeben und minütlich aktualisiert, oder?
Es gibt im Netzt einige Anbieter, bei denen die Anzeige dann aber über eine externe Webseite läuft. Wie kann ich das mit lokalen Mitteln lösen und evtl. optisch etwas aufhübschen?

Gruß
Jens

PeterChrisben · 10. Januar 2015 um 13:15

Schau dir mal den Link an.

FlipClock.js

Gruss,
Peter

Tetrapack · 10. Januar 2015 um 14:32

Hallo Peter,

vielen Dank.
Hast du auch ne Idee wie ich das umsetze? Welche Dateien/Ordner wohin müssen? Irgendwie komme ich mit den Pfadangaben nicht zurecht

Sekundenanzeige muss eigentlich gar nicht sein, falls also noch jemand Alternativen hat …
Gerne auch komplett nur mit lokalen Mitteln!

Gruß
Jens

nancilla · 10. Januar 2015 um 15:01

Als transparenter Bildschirmschoner?

Vlt. ist hier schon etwas für dich dabei?
Oder auch nur als Anregung…

Tetrapack · 10. Januar 2015 um 15:12

Achso, als Info ist vielleicht wichtig, das das Ganze auf einem iPad laufen muss … daher ist mit Windows Bildschirmschoner nix. Die Uhrzeit soll in einem Splitscreen im Webfront dargestellt werden.

wolfgang · 10. Januar 2015 um 15:36

    $timex = date("H:i:",time());
    echo $timex;
    $str = "<font color=grey size=8pt > $timex";
    setvalue(49746  /*[Test\WF\Diverse\Uhrzeit\Zeit]*/,$str);

sekündlich laufen lassen. Die Variable ist eine String ~html.

Bei mir ist allerdings size=7 das Maximum grösser wirds nicht. Hat jemand eine Idee warum?

JoeXXL · 10. Januar 2015 um 15:47

Moin,
bei mir läuft das in eigenständig einer htmlBox.
-Joe


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function updateTime() {
	var date = new Date();
	var stunden = date.getHours();
	var minuten = date.getMinutes();
  	var sekunden = date.getSeconds();
   var vor_std = (stunden < 10) ? "0" : "";
   var vor_min = (minuten < 10) ? "0" : "";
   var vor_sek = (sekunden < 10) ? "0" : "";

	var tag = date.getDate();
	var monatDesJahres = date.getMonth();
	var jahr = date.getFullYear();
	var tagInWoche = date.getDay();
	var wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
	var monat = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");


	var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr + " " + stunden + ":" + minuten;
  	var zeit = vor_std + stunden + ":" + vor_min + minuten + ":" + vor_sek + sekunden;

	document.getElementById("time").innerHTML = zeit;
	setTimeout(updateTime, 1000);
}

window.addEventListener("load", updateTime);

</script>
</head>
<body>

	<div id="time" style="font-weight:bold; font-size: 15em;">
	</div>

</body>
</html>

Tetrapack · 11. Januar 2015 um 14:06

Hi Joe,

wie hast du denn die Box gefüllt?
Ich habe jetzt eine String Variable als Html Box Profil erstellt und den Code in die Variable geschrieben. Eine Uhrzeit wird im WF aber nicht angezeigt !? Was mache ich falsch ?

@Wolfgang: Danke, warum max. 7 geht weiß ich nicht …

Gruß
Jens

wolfgang · 11. Januar 2015 um 14:40

Hallo Tetrapack,

viel einfacher. Du kopierst Dir das Script in eine .html irgend wo unter webfront/user.

Dann erstellst Du im WF-Configurator an gewünschter Stelle ein neues Element „Externe Seite“ und gibst unter „URL“ den Pfad zur html an.

Fertig.

Tetrapack · 11. Januar 2015 um 16:48

Hmm … hab ich jetzt genau so gemacht … Ergebnis im Webfront:

Not found

Wird dafür noch etwas benötigt?

edit
Ah, Wolfgang hat geantwortet … ich meinte aber Joe!

wolfgang · 11. Januar 2015 um 17:09

Stimmt der Pfad zur html?
Zeig mal Screenshots Deines Verzeichnisses wo die html liegt und vom WF-Configurator der Element-Config.

Tetrapack · 11. Januar 2015 um 20:39

Pfad: \IPS-SERVER2\IP-Symcon\user\Uhrzeit\Uhrzeit_IPS.html

Verweis im Webfront: user/Uhrzeit/Uhrzeit_IPS.html

wolfgang · 11. Januar 2015 um 20:41

user muss unter webfront liegen.

Tetrapack · 11. Januar 2015 um 23:42

arghs … ich Depp :(:rolleyes:

Danke!

Tetrapack · 12. Januar 2015 um 08:19

Wie mache ich das am einfachsten, um die Ausgabe so zu formatieren ?
Datum und Zeilenumbruch bekomme ich ja noch hin, aber wie den Rest (Hintergrundgrafik)?

Gruß
Jens

PeterChrisben · 12. Januar 2015 um 16:37

Moin…

… also ich hab mal das zip auf der flipclock website runter geladen und in mein user-ordner entpackt.
In dem zip befinden sich mehrere Beispiel-Html-Seiten in einem Ordner namens „examples“.
Eine dieser Beispiel-Seiten habe ich als externe Seite zum testen in meine Spielwiese eingefügt… das ist das Ergebnis:

URL zur Seite bei mir: user/flipclock/examples/twenty-four-hour-clock.html

Gruß,
Peter

Tetrapack · 12. Januar 2015 um 19:59

Hallo Peter,

Flipclock war jetzt nicht so ganz das was ich mir vorgestellt hatte.
Übergangsweise habe ich das jetzt so gelöst (Lösung von Joe umgebaut):

PeterChrisben · 13. Januar 2015 um 07:26

Das war nur ne Antwort auf deine Frage! Ich hab’s bei mir gleich eingebaut. Eventuell nehm ich die Sekunden noch raus.

Gruss,
Peter

Tetrapack · 13. Januar 2015 um 08:04

Achso, hatte ich schon als erledigt abgespeichert
Danke!

JoeXXL · 13. Januar 2015 um 08:57

Das wie auf dem Bild oben geht sicherlich nur über Stylesheet …
… hier noch eine Version mit Hilfe einer Tabelle.
Man kann da auch noch den Font ändern etc. etc.

-Joe

function updateTime() {
	var date = new Date();
	var stunden = date.getHours();
	var minuten = date.getMinutes();
        var sekunden = date.getSeconds();
        var vor_std = (stunden < 10) ? "0" : "";
        var vor_min = (minuten < 10) ? "0" : "";
       var vor_sek = (sekunden < 10) ? "0" : "";

	var tag = date.getDate();
	var monatDesJahres = date.getMonth();
	var jahr = date.getFullYear();
	var tagInWoche = date.getDay();
	var wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
	var monat = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");


	var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr 
	document.getElementById("date").innerHTML = datum;
	document.getElementById("hours").innerHTML = vor_std + stunden;
	document.getElementById("minutes").innerHTML = vor_min + minuten;
	document.getElementById("seconds").innerHTML = vor_sek + sekunden;
	setTimeout(updateTime, 1000);
}

window.addEventListener("load", updateTime);

</script>

</head>
<body>

<table border="0" cellspacing="10" cellpadding="10">
	<tr>
		<td id="date"colspan="3" rowspan="1" style="vertical-align: top; font-weight:bold; font-size: 2em;" align="center"></td>
	</tr>

  <tr>
       <td id="hours"   style="font-weight:bold; font-size: 5em; color:white; background-color:black" align="center"></td>
       <td id="minutes" style="font-weight:bold; font-size: 5em; color:white; background-color:black" align="center"></td>
       <td id="seconds" style="font-weight:bold; font-size: 5em; color:white; background-color:black" align="center"></td>
  </tr>
</table>
</body>
</html>