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

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

Schau dir mal den Link an.

FlipClock.js

Gruss,
Peter

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 :frowning:

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

Gruß
Jens

Als transparenter Bildschirmschoner?

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

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.

    $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?

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>

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

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.

Zwischenablage-1.png

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

Not found

Wird dafür noch etwas benötigt?
:confused:

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

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

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

Verweis im Webfront: user/Uhrzeit/Uhrzeit_IPS.html

user muss unter webfront liegen.

arghs … ich Depp :(:rolleyes:

Danke!

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

Screenshot.png

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

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):

Screenshot_neu.png

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

Gruss,
Peter

Achso, hatte ich schon als erledigt abgespeichert :wink:
Danke!

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>