"Bahnhofsuhr" im Homescreen einbinden? Bitte um Hilfe

Hallo liebe Smart`ler,

ich wollte eine Bahnhofsuhr integrieren, und habe auch im Englischen Forum von 2020 einen Eintrag gefunden. Ich werde da nicht schlau draus. Weis jemand bitte wie ich das einbinden bzw. realisieren kann?
grafik
Analog Clock for Lovelace - Share your Projects! - Home Assistant Community ( das ist der Eintrag aus dem englischen Forum von 2020 )

Wenn ich das richtig lese, sollst du eine normale Webseite erstellen, mit der gewünschten Uhr, und diese dann per iFrame einbinden. Hast du so eine Webseite schon?

nein habe ich nicht. ich hoffte das dies einfacher zu bewerkstelligen wäre…

Schau mal diesen Beitrag.

Hier macht jemand das direkt in HA.

Ja das ist doch mein Link von oben, wie bereits erwähnt von mir. Und da komm ich nicht klar mit. Auch ist das von 2020 da könnte es sein, dass sich da eniges geändert hat. Wenns nicht is, isses halt nicht. Wollts nur sehr gerne mit integrieren, weil schön und so. :sweat_smile: und weil einfach, einfach einfacher ist, wollt ichs gern einfach umsetzen. :rofl: ich bitte um Verzeihung…

Aber da steht doch alles beschrieben. Müsstest du jetzt testen. Oder was genau stellst du dir vor?

1 „Gefällt mir“

Wenn ich`s übersetze kommt mist bei raus, und im englischen versteh ichs leider nicht. Ausserdem bin ich absolut noch nicht so firm mit dem bearbeiten von cofigurations Datein. Der letzte Eintrag da im Englischen Forum ist von mir.

Warum schaltest du hier nicht auf deutsch um?

Und ich dachte schon das ich der einzige verrückte bin der die SBB nachbaut :smiley:

Aber geht auch mit dem Bus :wink:

2 „Gefällt mir“

Hast du es zum Luafen bekommen?
Gefällt mir irgendwie, aber meine HTML sieht immer gleich aus komischer Weise, obwohl ich eigentlich andere Einstellungen gewählt habe.
Naja aber so richtig eingebunden kriege ich das in HA nicht, davon mal abgesehen

Nein, darum habe ich ja nach einer to-do-Anleitung auf deutsch gefragt. Ich bin halt irgendwie auch zu blöd dafür…sag ja die Anleitung ist aus 2020, da hat sich bei HA auch viel geändert. Ich verstehe das mit dem html - code nicht, wohin muss er, was passiert wann und wie, ich checks nicht. = Layer 8 —>ich gehe gerne ins Detail und kann neue Sachen auch logisch verarbeiten, und versuche zumeist bevor ich ein neues Thema anfrage, alles selbst zu lösen, mit den Ansätzen die ich zur Verfügung habe. Problem ist mein “Fachenglisch”. Wenn ich eine Integration für diese Uhr schreiben könnte, würd ichs tun… :sweat_smile:

Moin,
das ist gar nicht so schwer eine Bahnhofsuhr zu realisieren.
Lade Dir hier die Bahnhofsuhr Dateien herunter.

Gehe in Deine HA Instanz.
Ich nutze den File editor, erstelle damit im “www” Ordner einen neuen Ordner “bahnhofsuhr” und lade alle Dateien dort rein.
In der index.html kann man die Größe der Uhr in Zeile 31 einstellen.

Nun gehst Du auf dein Dashboard “bearbeiten”, “Karte hinzufügen”, “benutzerdefiniert”

Da gibst Du einfach deniframe Code ein:

type: iframe
url: /local/bahnhofsuhr/index.html
aspect_ratio: 60%

aspect_ratio die gewünschte Kartengröße eingeben. Fertig.
Die Bahnhofsuhr läuft Lokal auf deiner HA-Instanz
Wenn Du häufig die größe änderst zum teste, muss HA häufiger komplett neu geladen werden bzw. der Cache vom Browser geleert werden.

1 „Gefällt mir“

Danke für deine Anleitung, damit habe ich zumindest eine Anzeige :blush:
Ich habe das Design erst einmal gelassen und nur in der index.html die Variablen:
Width und height angepasst. Im Dashboard sehe ich aber immer nur eine vollständige Uhr, wenn ich die ratio der Kachel auf 100% Stelle. Neustart von HA und Cache leeren bringen da keine Änderung.

Noch so eine vielleicht blöde Frage:
Was ist der Unterschied zwischen dieser Bahnhofsuhr und der svg-Bahnhofsuhr?!
Ich versuche es die ganze Zeit mit der zweiten Variante :face_in_clouds:

2 „Gefällt mir“

dankeschön mischl & großen Respekt für deine Mühe uns das zu erklären ! Ich werde mich heute mal dran setzen es umzusetzten. :+1: :green_heart:

1 „Gefällt mir“

Der offensichtliche Unterschied ist die Optik, der technische Unterschied liegt in der Datei.
Für die SVG sind keine Plugins notwendig. Die von mir verlinkte Version ist in Javascript geschrieben.

Ich bin mir jetzt nicht sicher ob ich änderungen am html Quellcode vorgenommen habe.
Ich nutze diese Bahnhofsuhr seit mehreren Jahren als Platzhalter für meine nichtgenutzten Domains.
Bei mir ist die Uhr mittig zentriert auf der Seite.
Hier ist der html-Quellcode den ich verwende. Kannst ja mal Vergleichen ob Zeile 30/31 identisch ist.

<html>

  <head>
    <title>Bahnhofsuhr</title>
    
<!--[if lt IE 9]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

<script type="text/javascript" src="station-clock.js"></script>
<script type="text/javascript">

  var clock = new StationClock("clock");
  clock.body = StationClock.RoundBody;
  clock.dial = StationClock.GermanStrokeDial;
  clock.hourHand = StationClock.PointedHourHand;
  clock.minuteHand = StationClock.PointedMinuteHand;
  clock.secondHand = StationClock.NewHoleShapedSecondHand;
  clock.boss = StationClock.RedBoss;
  clock.minuteHandBehavoir = StationClock.CreepingMinuteHand;
  clock.secondHandBehavoir = StationClock.ElasticBouncingSecondHand;

  window.setInterval(function() { clock.draw() }, 50);

</script>
	
  </head>
  
  <body>
    <div style="text-align: center; padding-top: 50px">
      <canvas id="clock" width="200px" height="200px">
        Fehlermeldung       
      </canvas>
    </div>


  </body>
  
</html>


2 „Gefällt mir“

Einfach geil = Dankeschön ! ( Ich dacht es sei komplizierter )

Bei mir fehlt nur die “Spitze” des Zeigers, sprich auf der Webseite wird rechts eine andere “die Grundkonfiguration” angezeigt ind HA so wie mein Screenshot, ich starte HA mal neu, evtl. hilft es.

edit: Neustart von HA behob das Optik Problem nicht…

:green_heart: Mischl

1 „Gefällt mir“

Das müsste dieser Part aus der index.html sein

1 „Gefällt mir“

Ich Noob ich, ich habe auf der Seite unten die Bsp. Datei geladen. Ich dachte man kann sich die idex.html schon dort zusammenbauen und runterladen, also muss man händisch sein Layout einfügen ? ansonsten versteh ich eben nur “bahnhof”.

Anbei die _macosx datei in der zip brauchen wir als windows user nicht, korrekt?

" Es geht mir auf den Zeiger, bei mir läuft nicht der Zeiger ! " :rofl: :rofl: :rofl: :rofl:

Man benötigt die
-excanvas.js
-station-clock.js
-index.html
alles andere wird i.d.R. nicht benötigt.

excanvas.js und station-clock.js sind config Dateien wo die html drauf zugreift.
index.html ist die Seite, die die Uhr anzeigt.

Und mit Noob hat es nichts zu tun.
Es gibt dinge die weiß man und für alles andere benötigt man halt Unterstützung.

Die _macosx wird in unserem Fall nicht benötigt, es sei denn, Du hast HA auf einem Mac am laufen :wink:

Habe lange nicht mehr die Bahnhofsuhr verändert. Liegt halt seit ewigkeiten auf meinem Webspace/Server. Hab es halt auch nur aus der Quelle.

Du kannst auch die Optik über die Seite verändern.

Da hast Du auch die Live-Vorschau.
Wenn die Optik so ist wie Du es wünscht, dann kopierst Du bei dem Abschnitt Javascript einfach den Code und tauscht ihn in der index.html aus (Zeile 6-25 ist es bei mir).


1 „Gefällt mir“

Ah jetzt Check !!! :white_check_mark: doch ich hab mich etwas sehr dumm angestellt heute…omg…ich schäm mich richtig…mischl von Herzen vielen Dank ! Jetzt klappt alles perfekt. Du hättest mir / uns nicht so helfen müssen, ich sehe das als nicht selbstverständlich an. Es mag wie Geschleime klingen, ich bin aber sehr dankbar für deine Hilfe. Und bin jetzt Happy die Uhr eingebunden zu haben !!! total happy als bahnfan !

Edit: habe es genauso gemacht, die optik ändert sich doch nicht, war etwas voreilig mit schreiben, da ich 100 % dachte das sein mein fehlendes Objekt = mit dem Code. Code angepasst & eingefügt = Neustart HA = keine Änderung an der Uhr…hmmm

1 „Gefällt mir“