Hallo zusammen,
aufgrund der Diskussion in http://forum.fhem.de/index.php/topic,26182.msg191934.html#msg191934 (http://forum.fhem.de/index.php/topic,26182.msg191934.html#msg191934) habe ich mich etwas damit beschäftigt anstelle des grinsenden Hauses eine Uhr in FHEM anzuzeigen. Das Ergebnis - eine animierte digitale und eine animierte analoge Uhr auf Basis von Javascript und CSS - stelle ich hier gerne zur Verfügung.
Disclaimer:
- Die Uhren wurden für "dark" style entworfen, die analoge Uhr ist auch im default style einigermaßen ok.
- Die digitale Uhr ist ein ziemlich Gefrikkel mit der CSS-Positionierung, für den standard-"dark"-style passt das so weit, alle anderen styles sollten die Finger davon lassen.
- Javascript und CSS stammen überwiegend von joncom.be/code/css-clocks/ (http://joncom.be/code/css-clocks/) und wurden von mir für FHEM angepasst
- Getestet habe ich das Ganze mit Chrome, Firefox und Safari (IOS)
Installation:
- Angehängtes ZIP file entpacken und das komplette Verzeichnis "niceclocks" in das FHEM www-Verzeichnis legen (typischerweise /opt/fhem/www
In der Datei niceclocks.js (im Verzeichnis niceclocks) die Variablen (s.u.) anpassen- In der FHEMWEB-Instanz in der die Uhr angezeigt werden soll folgende Attribute setzen:
attr <FHEMWEB-Device> CssFiles niceclocks/niceclocks.css
attr <FHEMWEB-Device> JavaScripts niceclocks/fhem_niceclocks.js
attr <FHEMWEB-Device> niceclocksParam {"clockStyle" : "analog","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
"Konfiguration" der Uhr:In den ersten Zeilen der .js-Datei sind folgende Parameter möglich:Über das niceclocksParams Attribut kann die Uhr pro FHEMWEB-Device individuell konfiguriert werden. Wird ein Parameter/Wert-Paar nicht angegeben, werden die default-Werte genomen.
- clockStyle: "analog" oder "digital" (default ist "analog")
- fixMenu: Bei "false" (default) verhält sich das Menu wie gewohnt und scrollt mit. Bei "true" scrollt nur der Content, das Menu bleibt immer erreichbar. Funktioniert natürlich nur, wenn das Menu nicht zu lang ist
- keepBg: Das Logo im darkstyle ist tatsächlich ein Hintergrundbild, daher wird dieses in der default-Einstellung ("false") ausgeendet. Durch setzen von "true" bleibt ein eigenes Hintergrundbild erhalten
- keepHeader: Wenn keine Kommandozeile eingeblendet ist, klafft eine Lücke am oberen Rand. Diese kann durch setzen von "true" entfernt werden. Default ist "false".
- clockCircle: Farbe des Rahmens um die Uhr, default "white", rgb-Werte wie "rgb(110,186,110)" möglich
- clockHours: "white", Farbe der Striche für Stunden
- clockSeconds: "white", Farbe der Striche für Minuten
- hourHand: "white", Farbe des Stundenzeigers
- minuteHand: "white", Farbe des Minutenzeigers
- secondHand:"white", Farbe des Sekundenzeiger
- visCircle: "inline", Sichtbarkeit des äußeren Randes
- visHours: "inline", Sichtbarkeit der Striche für Stunden
- visSeconds: "inline", Sichtbarkeit der Striche für Minuten
- visHourHand: "inline", Sichtbarkeit des Stundenzeigers
- visMinuteHand: "inline", Sichtbarkeit des Minutenzeigers
- visSecondHand: "inline", Sichtbarkeit des äußeren Sekundenzeigers
Damit sollte die Uhr statt des Logos erscheinen.
Wenn der default style verwendet wird, bitte noch folgende Anpassung in niceclocks.js vornehmen:
logo.style.left="40px";durch
logo.style.left="10px";ersetzen.
Der Floorplan unterstützt derzeit noch keine eigenen Javascripts, daher funktioniert die Uhr dort nicht. Es gibt aber einen patch: http://forum.fhem.de/index.php/topic,31293.msg243580.html#msg243580 (http://forum.fhem.de/index.php/topic,31293.msg243580.html#msg243580) oder quick'n'dirty: http://forum.fhem.de/index.php/topic,31898.msg243595.html#msg243595 (http://forum.fhem.de/index.php/topic,31898.msg243595.html#msg243595)
Um die Uhr in den Floorplan einzubinden sind die o.g. Attribute entsprechend für den jewweiligen Floorplan anzugeben. Bevor die niceclocksParams gepflegt werden können muss das Attribut als userAttribut erlaubt werden:
attr <myFloorplan> userattr niceclocksParamWenn sich FHEM längere Zeit im Hintergrund befindet, kommt die Uhr irgendwie aus dem Tritt. Das passiert auch bei der Original-Uhr auf joncom.be/code/css-clocks/ (http://joncom.be/code/css-clocks/) und ich habe noch keine Lösung dafür gefunden. Ein Refresh (oder click z.B. auf einen anderen Raum) syncht die Uhr wieder - oder man wartet einfach, bis die Uhr im high-speed Tempo die aktuelle Uhrzeit wieder erreicht hat.
Für Anregungen und Erweiterungen bin ich natürlich immer zu haben.
Viel Spaß,
Oli
Update 06.02.2018nochmal kleine Anpassungen für f18 Style
Update 16.01.2018Die angehängte Version geht nun auch einigermassen mit dem neuen f18 style. Die Uhr ist dann nur bei angepinntem Menu sichtbar.
super, sieht gut aus, schöne Spielerei ;)
Analog werde ich mal probieren, gefällt mir... und ab ins Wiki damit :D
Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.
Irgendeine Idee, woran das liegen könnte?
Zitat von: Brockmann am 12 Januar 2015, 08:56:17
Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.
Irgendeine Idee, woran das liegen könnte?
Mir geht's genauso...
Habe auch keine Idee...
..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...
Gruß Kai
Zitat von: Brockmann am 12 Januar 2015, 08:56:17
Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.
Irgendeine Idee, woran das liegen könnte?
Bei mir das gleiche
seit dem letzten FHEM Update ist bei mir die Uhr auch verschwunden, da das logo invisible gesetzt ist. Folgende Zeile sollte Abhilfe schaffen (aus dem Kopf, heute abend kann ich ein Update posten):
logo.style.visibility="visible";
Grüße,
Oli
Danke für die tolle Arbeit. Nach dem Eintrag von logo.style.visibility="visible"; in die niceclocks.js sieht es bei mir allerdings jetzt so aus:
Ich warte dann mal bis heute Abend, bin schon gespannt.
Zitat..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...
sieht bei mir genauso aus wie bei TomWest
meine digitale funktioniert noch...! ;)
Bei mir werden weder die digitale noch die analoge Uhr angezeigt, dafür aber das Logo. logo.style.visibility="visible"; habe ich in niceclocks.js eingefügt.
@mahowi, welchen style verwendest du?
@moonsorrox: das ist ja noch die "alte" clock.js - hast du in letzter Zeit mal ein Update des FHEM gemacht?
@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?
Grüße,
Oli
Zitat@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?
...ja, liegen im Verzeichnis /niceclocks/images und haben 644
Gruß Kai
Zitat von: KernSani am 12 Januar 2015, 17:57:22
@moonsorrox: das ist ja noch die "alte" clock.js - hast du in letzter Zeit mal ein Update des FHEM gemacht?
ja klar gerade gestern erst und große Probleme gehabt (nicht mit der Uhr) und heute wieder ein Update gemacht.
Was ist daran alt ;) zeigt doch die Zeit :D
Zitat von: KernSani am 12 Januar 2015, 17:57:22
@mahowi, welchen style verwendest du?
[...]
@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?
Manchmal stellt man sich einfach ein bißchen doof an. :-[ Ich hatte die Datei direkt in /opt/fhem anstatt /opt/fhem/www entpackt.
Aber die Uhren werden trotzdem nicht richtig angezeigt. Die Analoguhr hat wie bei den anderen keine Zeiger:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_analog.png)
Bei der digitalen Uhr wackelt dafür ein Zeiger durchs Bild, es wird aber keine Uhrzeit angezeigt:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_digital.png)
In beiden Fällen läßt sich die Menüleiste nicht mehr scrollen.
Die Rechte für alle Dateien sind fhem.root 644.
Lange Fehlersuche für ein triviales Problem... das Javascript hat noch auf pgm2 verwiesen, wo bei mir die Bilder noch rumlagen, bei euch aber natürlich nicht. Ich habe das ZIP in Post #1 aktualisiert, oder einfach niceclocks.js in /niceclocks mit der angehängten Version überschreiben.
Ich habe auch die Fixierung von Uhr und Menü auskommentiert (bei mir ist die Fixierung gewollt, da die WAF-Ansicht ein recht übersichtliches Menu hat)
Grüße,
Oli
Hallo KernSani
Das musste ich natürlich gleich testen - und nun funktioniert es wie beschrieben. :) Danke.
Gruß
Gigafix
also ich habe die analog auch mal testen wollen, aber irgend etwas ist da faul bei mir.
1.Bild
alte Digitaluhr, mein Hintergrund alles da und die Uhr funktioniert
2.Bild
neue analog Uhr, mein Hintergund weg, Uhr funktioniert wohl weil ich sehe das eines der kleinen Bildchen sich bewegt.
alte clock.js raus genommen, alle Dateien wie beschrieben eingepflegt, Rechte angepasst, musste ich aber nicht da sie schon auf 755 standen
Hast du die Version von ca. 23:40 henommen?
... noch nicht alles gut...
also ich habe nur die analoge Uhr getestet, die läuft und sieht gut aus. Allerdings rutscht der Teil auf der rechten Seite etwas zu hoch hinaus nachdem die Uhr geladen wurde - ist im zweiten Bild von moonsorrox auch sehr gut zu erkennen.
Das mit dem eigenen Hintergrund wäre auch schön, wenn der nicht überschrieben wird. Ich hatte mir hier auch ursprünglich das Wabenmuster eingebaut...
Gruß
Gigafix
Zitat von: KernSani am 13 Januar 2015, 00:20:10
Hast du die Version von ca. 23:40 henommen?
ja klar...! muss in der Datei noch etwas geändert werden und wie Gigafix schon sagt die Schrift nach einem neu einlesen von Fhem rutscht nach oben in meinem zweiten Bild zu sehen
Aber nicht so schlimm, weil ich nutze solange die alte DigiUhr ;)
Die Uhren werden mit der neuen Version angezeigt. :)
Aber wie von den anderen beschrieben rutscht der Hauptbereich der Seite jetzt hoch bis ins Befehlfenster:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_digital2.png)
Es liegt an der Zeile document.getElementById('content').style.top="5px";
Nach dem Auskommentieren sitzt wieder alles an der richtigen Stelle.
Moin Mahowi,
danke für die Lösung.. Heute abend gibt's ein Update. Um ein eigenes Hintergrundbild wieder zu bekommen ist noch eine weitere Zeile auszukommentieren.
Grüße,
Oli
Moin!
Da ist also noch jemand um die Zeit wach?! ;)
Ich vermute mal, für ein Hintergrundbild muß man document.body.style.backgroundImage="None"; auskommentieren, oder?
Genau :-) Wach aber noch nicht am Rechner. Danke für die Code-Zeile.
Sieht schick aus
Gruß Hannes
Aber ich bekomme einfach nicht die Analog Uhr zu sehen immer noch so wie auf meinem Screenshot, keine Zeiger
Oh nach nochmaligem Neustart und F5 sind jetzt die Zeiger da..!! :D
Ich habe den ersten Post nochmal angepasst, mit neuem ZIP und Beschreibung der neuen Konfigurationseinstellungen. Änderungen waren nur in niceclocks.js, d.h. wer die Uhr schon am laufen hat und nicht alles kopieren will kann einfach das ZIP entpacken und nur die niceclocks.js nach fhem/www/niceclocks schieben.
Grüße,
Oli
Hallo,
so wie es aussieht wurde der Patch für Floorplan gestern per Update verteilt. Die Uhr funktioniert in meinem fhem WEB einwandfrei. Jetzt habe ich das ganze genauso im Floorplan angelegt. Leider werden die Zeiger der Uhr nicht angezeigt. Man kann allerdings erkennen, dass die angezeigten Platzhalter sich im Sekundentakt bewegen.
Kann das wieder ein Problem mit dem Pfad sein? Muss ich für den Floorplan ein eigenes Java/CSS File anlegen, in dem die Pfade entsprechend angepasst wurden?
Installiert hatte ich die letzte Version der Uhr aus dem Thread hier.
#Floorplan - Wohnung
define Wohnung FLOORPLAN
attr Wohnung CssFiles niceclocks/niceclocks.css
attr Wohnung JavaScripts niceclocks/niceclocks.js
attr Wohnung fp_arrange 0
attr Wohnung fp_default 1
attr Wohnung group Wohnung
attr Wohnung room Floorplan
Danke schon mal für Hilfe vorab!
Grüße
Hanky
was mir aufgefallen ist in jeden Room funktioniert die Analog Uhr, nur nicht wenn ich auf Logfile gehe, da werden keine Zeiger angezeigt
Zitat von: moonsorrox am 17 Januar 2015, 19:39:59
was mir aufgefallen ist in jeden Room funktioniert die Analog Uhr, nur nicht wenn ich auf Logfile gehe, da werden keine Zeiger angezeigt
Bei mir ebenso. Auch im Dashboard.
Hallo zusammen,
das Logfile-Problem wurde in der neuesten Version (siehe post #1: http://forum.fhem.de/index.php/topic,31912.msg243635.html#msg243635) gefixt.
Floorplan geht mit dieser Version auch (Voraussetzung ist, dass die neueste Floorplan-Version installiert ist, die vor 1 oder 2 Tagen per update kam)
Zudem habe ich das Ganze etwas besser in FHEM eingebunden. Konfiguration läuft jetzt über ein Attribut im FHEMWEB-Device (siehe post #1)
Grüße,
Oli
EDITH://
das scroll Problem habe ich erst einmal hinbekommen...!
folgendes auskommentiert:
/* document.getElementById('menu').style.position="fixed"; */
aber das überdecken der Eingabezeile noch nicht... habe jetzt auch keine Lust mehr zu suchen...!
und wieder ist das alte Problem da...
es läßt sich nicht mehr scrollen und die Eingabezeile wird überdeckt
Siehe post #1 - Beschreibung der Parameter...
bekomme auch noch folgenden Fehler wenn ich fhem neu einlese..
WEB: unknown attribute niceclocksParams. Type 'attr WEB ?' for a detailed list.
welcher Parameter ist denn aber dafür das er die Zeile oben nicht überdeckt...! sie screenshot
Asche auf mein Haupt, das Attribut muss niceclocksParam heissen (ohne "s" am Ende). Beschreibung habe ich angepasst.
Du müsstest "keepHeader" auf true setzen. Und "fixMenu" auf false.
Grüße,
Oli
Zitat von: KernSani am 19 Januar 2015, 06:24:33
Asche auf mein Haupt
;) kein Problem... alles ist lösbar :D
Super klappt jetzt
hallo,
habe die Uhr auch eingefügt. Funktioniert ganz gut.
Hab nur ein Problem. Das Menü im Floorplan geht seid dem nicht mehr. Ich kann keine anderen Floorplan oder ins fhem zurückkehren.
An was kann das liegen?
Hmmm... bei mir funktioniert auch das menu im Floorplan.
Welchen style verwendest du? Welchen Browser?
Bekommst du irgendwelche Javascript-Fehler in der Debug-Console (in Chrome: STRG-SHIFT-C) angezeigt?
Ich habe gerade in post #1 eine aktualisierte Version hochgeladen, die eventuelle Probleme mit anderen "Fremdskripten" vermeiden sollte. Vielleicht hilft das bei dir?
Grüße,
Oli
ich benutze Safari.
Habe gerade die Dateien ausgetauscht. Aber das Problem besteht immer noch.
Ist das normal, wenn ich das Datum markiere das so ein großer Bereich markiert wird?
Hi Thomas ;-)
Ich habe das gerade auf dem Ipad probiert, da habe ich das selbe Verhalten (Ich nutze den Floorplan normalerweise nicht, daher ist mir das noch nicht aufgefallen). Werde das mal untersuchen. Sieht aus, als würde da irgendwas das Menu überlagern. Wenn ich's schnell finde kommt heute noch ein Fix...
ging schnell... Fix ist in post #1 eingebaut. Danke für den Hinweis mit dem großen markierten Bereich.
Grüße,
Oli
Hallo Oli,
TOP! jetzt funktioniert es wieder.
Danke.
Hallo,
"Schöne Uhr" habt ihr da.
macht sich auch verdammt gut und wertet die Seite extrem auf. ;-)
Nur mal ne frage:(auch wenn sie doof klingt als Neuling)
wo kann man den Style bzw Farbe anpassen bzw ändern ?
Grüße
Heiko
Zitat von: Pi-Heiko am 26 Januar 2015, 20:17:17
wo kann man den Style bzw Farbe anpassen bzw ändern ?
Im Zweifel (immer) erst mal in der commandref (z.B. in diesem Fall nach "style"?) suchen.
Oder in der linken Spalte deiner Fhem-Seite direkt auf "Select Style" klicken...
Okay
Sorry glaub ich habe mich da etwas Falsch ausgedrückt.
mit dem Style meinte ich nicht den FHEM Style..
sondern die Farb anpassung der reinen UHR.
Ob bzw wie die Möglichkeit besteht die Farbe der Uhr zu ändern z.B. von weiß/grau auf Orange.
Gruß
Heiko
Ich sehe eine Möglichkeit, bei den Images im Ordner /opt/fhem/www/niceclocks/images die Farbe weiß nach orange mit einem Bildbearbeitungsprogramm (z.B. GIMP) zu verändern und dann wieder zurück zu packen.
Der Sekundenzeiger in orange sähe gut aus, da gebe ich Dir Recht. Ich habe Dir mal einen orangenen Sekundenzeiger angefügt. Beim Zurückspeichern auf die Rechte achten!
Die Rechte der Datei im Ordner überprüfen mit: ls -l
Soll: -rw-r--r-- 1 fhem root 332 Jan 26 18:23 analogseconds.png
Notfalls ändern mit sudo chown fhem.root analogseconds.png und sudo chmod 644 analogseconds.png)
und abschließend nochmal mit ls -l überprüfen
Das Grau in der digitalen Uhr ist lediglich ein Opacity-Parameter (Opacity = durchscheinen). Das wirst Du nicht so einfach ändern können, da hier die Hintergrungdfarbe mit 80% greift.
Gruß Eberhard
Hallo
an was könnte das liegen, dass der Sekundenzeiger ab und zu viel zu schnell ist. (mindestens 5 mal so schnell)
Minute passt aber.
Gruß Hannes
Gesendet von Tapatalk
Das kommt dann, wenn du das Browserfenster im Hintergrund hast.....Dann bleibt die Uhr "stehen" und läuft, sobald sie wieder im Vordergrund ist, nach.
lg, Ici
Mich hat das analoge Zifferblatt genervt, weil es nur auf grauen Hintergrund funktioniert. Ich habe ein neues "gebastelt" mit transparentem Hintergrund. Dadurch passt sich die Uhr an background-color an. Einige Farben sind wegen mangelndem Kontrast ungünstig. Ich hätte da vielleicht ein helleres Blau nehmen sollen. Bei schwarzem Hintergrund ist das blau nicht leuchtend genug.
Bitte beachten: Das "alte" ziffernblatt war eine gif-Datei, die keine Transparenz kennt. Ich musste deswegen auf eine png-Datei umschwenken. Dass die Datei analog.png in den Ordner /opt/fhem/www/niceclocks/images gehört versteht sich von selbst. In der Datei niceclocks.css muss in der dritten Zeile die url geändert werden in url("images/analog.png") .
Gruß
Eberhard
Ich habe noch ein weißes und ein schwarzes Ziffernblatt hergestellt.
Gruß Eberhard
Hallo,
wow da habt ihr ja echt was getan,
bin leider erst seit heute wieder am Rechner um mal wieder weiter zu machen. ;-)
Danke für die vorlagen und das eingehen meiner fragen bzw dessen Umsetzung, muss mich nun mal dran machen und die für mich
richtige vorlauge nun auswählen.
Gruß Heiko
Hi,
erstmal herzlichen Dank für diese Uhr!
Aber eine Frage bzw. Feature Request:
Gibt es eine Möglichkeit einen Rahmen oder eine Box um Uhr und Datum zu ziehen?
Speziell im Dark Design sieht die Ur ein wenig "verloren" aus zwischen den schwarzen Kästen von Menü und CMD-Line.
(Disclaimer: persönlicher Geschmack, etc ...)
Herzliche Grüße, elfrinjo
Hallo,
gerade eben bin ich über die Uhr hier gestolpert.
Sehr schön.
Nur im Modus Digital tut sich bei mir nicht wirklich viel.
Kommt mir ein wenig unstimmig vor die Uhrzeit :)
Analg ist alles prima.
Aha. Das scheint wohl ein Safari Feature zu sein.
Im IE, FF wird auch die digitale Uhr korrekt dargestellt.
@elfrinjo
ich habe Dir mal einen Rahmen für style=dark und uhr=analog gemacht. Das sieht dann wie unten dargestellt aus:
In der CSS-datei niceclocks.css folgende Änderungen vornehmen:
#clockanalog {
background: url("images/analog.png") no-repeat 9px 9px #000;
float: left;
height: 175px;
overflow: hidden;
position: absolute;
width: 120px;
margin-left: -10px;
margin-top: 1px;
box-shadow: 5px 5px 5px #060606;
background-color: #000;
border-radius: 8px;
border-spacing: 0px;
border: 1px solid #CCC;
padding: 9px;
z-index: -1;
ebenso in der gleichen Datei:
#clockanalog img { border: 0; left: 9px; position: absolute; top: 9px; }
Gruß Eberhard
@FHEm2005,
herzlichen Dank! Das sieht klasse aus!
Sehr schön :-) Eine Woche nicht da und schon hat die Community die Uhr weiter aufgehübscht. Ich habe mir erlaubt, die neuen Zifferblätter in das ZIP im post #1 zu packen und habe der Uhr zugleich einen neuen Parameter verpasst. Mit "clockFace" lässt sich jetzt die Farbe des Zifferblattes einstellen.
Großes Lob an FHEm2005!
Grüße,
Oli
Ich täume noch von einer Zifferblattversion als svg-Version, bei der die Farbe wie bei Icons einstellbar ist (zifferblatt@blue). Ich habe das mal versucht, bin aber immer daran gescheitert, dass die svg-Bilder noch nicht mal -nachdem die Bilder in den Ordner openautomation gepackt wurden- angezeigt werden.
Hat da jemand von euch bessere Erfahrungen als ich? Eine SVG-Datei des Zifferblatts, die mit Inkscape gebaut wurde, würde ich zur Verfügung stellen.
@oli: Ließe sich so etwas in die Programmierung einbauen? Wenn nein, brauche ich nicht weiterbasteln.
Gruß Eberhard
Hi Eberhard,
Ich habe keine große Erfahrung mit SVG. es wäre aber mal einen Versuch wert, kannst du mir die Datei zu Verfügung stellen?
Danke,
Grüße
Oli
Hi Oli,
ist 1200 x1200px groß. Viel Erfolg!
Gruß
Eberhard
Hi Eberhard,
ich habe viel gelernt und - Google sei Dank - einen funktionsfähigen Prototypen mit deiner SVG Graphik als Hintergrund.
- Wie gehabt nach /opt/fhem/www entpacken
- der niceclocksParam "clockFace" ist weiterhin für die Farbe verantwortlich, frisst jetzt aber alle HTML-Farben ("red", "#FF0000", oder "rgb(255,0,0)")
Offen ist noch:
- Coding muss noch aufgeräumt werden
- Nur rudimentär getestet
- Die Striche der SVG-Graphik sind sehr dünn, daher ist das Zifferblatt schlecht zu sehen (bei Skalierung auf 1/10 des Originals). Vielleicht kannst du da nochmal helfen?
Viel Spaß,
Oli
Hi Oli,
das mit der Strichstärke ist damals von mir bewusst so gewählt worden, weil ich gelesen hatte, dass die einzelnen Elemente (Kreis, Sekunden und Stunden) ja mit Farbe gefüllt werden sollen. Die Umrisse sollen zu einem Pfad umgewandelt werden und letztendlich ohnehin nicht mehr sichtbar sein, da FHEM die Farbe schwarz durch die vorgegebene Farbe ersetzt.
Versuchen wir mal Deinen Weg. Wähle eine Strichstärke zwischen 1 und 100px ( ;) :D ) . Ich werde die Grafik überabreiten, aber leider erst im Laufe des Nachmittages dazu kommen.
Gruß
Eberhard
Ging doch schneller, als ich dachte.
Gruß
Eberhard
Edit: habe noch im Angebot:
- FHEM-Zifferblatt, Füllung: schwarz, Kontur: ohne
- FHEM-Zifferblatt, Füllung: schwarz, Kontur: mit
Hi Eberhard,
komme leider erst heute Abend wieder ans System...
FHEM tickt relativ einfach und ersetzt alles was die Füllfarbe #000000 hat durch die gewählte Farbe. Das hat bei deinem ursprünglichem Ziffernblatt nicht funktioniert (Füllfarbe war "none" - hätte ich darauf abgefragt wäre zudem das komplette Ziffernblatt auch gefüllt worden), daher ersetze ich jetzt Konturfarbe schwarz durch die gewählte Farbe. Um dem FHEM-Ansatz zu folgen würde ich in Zukunft der Variante "FHEM-Zifferblatt, Füllung: schwarz, Kontur: ohne" folgen wollen. Dazu ist eine kleine Anpassung im JS-Coding notwendig.
Grüße,
Oli
Hi Oli.
... hier ist sie.
Ich musste zuerst die Elemente ausfüllen und dann die Kontur entfernen. Erstaunlicherweise wurde über die Kontur hinaus ausgefüllt. Nach Entfernen der Kontur bedeutete das, dass da, wo früher die Kontur war, nun die Farbe fehlt. Das sollte man/frau aber bei einer Verkleinerung auf 10% nicht mehr sehen.
Gruß Eberhard
hi Oli,
ich habe mir die Datei mal mit Notepad++ angesehen und siehe da: alle Elemente hatten trotzdem noch fill:none. Das habe ich jetzt manuell geändert und die erforderlichen Elemente mit fill:#000000 überschrieben.
Ich glaube im Kopf der Datei muss noch etwas geändert werden.
Gruß
Eberhard
Hallo,
habe die Uhr mit dem letzten SVG-Bild: "FHEM-Ziffernblatt_sw_mit_Kontur_fill_SW.svg" installiert. Es lief gleich mit dem ersten Versuch (danke für die Anleitung und Hilfe).
Ein kurioses Problem: Im Zifferblatt fehlen die Sekundenstriche 1 bis 4 und 31 bis 33. Schaue ich mir nur das Bild in einem Browser (IE, Mozilla, Chrome, Safari) an, dann ist alles komplett !
Aber irgendwo klemmt da was bei der neuen Version.
In einen Raum genehmigt sich mein Firefox eine kurze Gedenkpause von 50s mit einen voll ausgelasteten Kern und nimmt bis zu 2,1GB zusätzlichen Speicher.
Hallo PNinBB, hallo Oli,
ich weiß nicht welches Zifferblatt Du benutzt; das in dem ZIP-File. Ich bin gerade dabei das finale Ziffernblatt zu erstellen. Da dürften die fehlenden Zifferstriche vorhanden sein.
KernSani ist ja noch nicht fertig - und ich auch noch nicht.
ZitatOffen ist noch:
Coding muss noch aufgeräumt werden
Nur rudimentär getestet
Die Striche der SVG-Graphik sind sehr dünn, daher ist das Zifferblatt schlecht zu sehen (bei Skalierung auf 1/10 des Originals). Vielleicht kannst du da nochmal helfen?
Bitte noch ein/zwei Tage Geduld.
@KernSani
Das finale Zifferblatt hat in den relevanten Teilen zwei Farbangaben je Element. Die Füllfarbe (fill:#000000) und der Zeichenrand (stroke:#000000). Die Füllungen sind eigene Elemente. Das Laden der Zeichnung mit 125 einzelnen Elementen braucht seine Zeit. Hinzu kommt, dass die Elemente viele Angaben enthalten, die nicht notwendig sind. Das werde ich noch mal ausmisten.
Gruß
Eberhard
Hallo,
bezüglich der Fragen:
ZIP-File ist von Antwort #61 und das Ziffernblatt ist: "FHEM-Ziffernblatt_sw_mit_Kontur_fill_SW.svg" von der Antwort #66.
Ein paar Tage warten, ist natürlich kein Problem !
Hi PNinBB,
ich habe mir die Grafik angesehen und nichts gefunden.
Bist Du bereit den Tester zu spielen? Ich habe hier meine (bisher) letzte Arbeitskopie shau mal ob da alles da ist? Störe Dich nicht an der Farbe, und ausgemistet ist die Grafik noch nicht komplett.
Gruß
Eberhard
Gerne wirke ich mit !
Habe es gleich probiert; nun fehlen die Sekundenstriche 46 bis 59 !!!
Mehr kann ich momentan nicht sagen; ich muss auch weg ! Habe morgen Nachmittag wieder Zeit.
Gruß
Peter
Hi,
das Fehlen der Sekundenstriche liegt nicht an der Grafik, das habe ich auch. Die alte Hintergrundgrafik bleibt hartnäckig im Hintergrund stehen.
Die finale Grafik liegt als Anlage bei. Die Datei kann mit Notepad++ editiert werden.
Durch Austauschen der Werte nach fill: und stroke: kann die Farbe geändert werden. Hier dürfen hex-Werte (z.B.:#0000FF), Farbbezeichnungen (z.B. blau) und RGB-Werte (z.B.: rgb(0,0,255) eingetragen werden. Das abschließende ';' nicht vor Begeisterung löschen! Als Default steht #000000 drin.
Gruß
Eberhard
Hi Eberhard,
habe soeben das js. nochmal umgebaut. Die fehlenden Sekundenstriche sind beim Laden der SVG-Datei in Javascript verloren gegangen. Ich bau mal deine neueste Version ein, teste noch ein bisschen und poste es dann... bin aber zuversichtlich dass wir dem Ziel nahe kommen ;-)
Grüße,
Oli
and here we go.
Änderungen in der angehängten Test-Version:
- das Ganze SVG-Einfärben-Geraffel neu gemacht. Sekundenstriche gehen nichtmehr verloren, Aufruf asynchron...
- FHEm2005s letzte SVG-Datei eingebunden
- Coding (.js und .css) aufgeräumt
Falls die Variante zufrieden stellend läuft würde ich sie an post #1 anhängen und dann habe ich schon weitere Ideen:
- Die Zeiger noch SVGen (keine Ahnung ob das überhaupt geht)
- Das Ziffernblatt farblich abstufen (z.B. die Stundenstriche in einer anderen Farbe
Viel Spass,
Oli
Es sind alle Teilstriche da, und mein FF klemmt auch nicht mehr.
auf meinen Handy braucht Chrome noch ca 15 Sekunden für die eine Raumansicht, das waren vorher 2:10 min
Zitatdas waren vorher 2:10 min
und ohne Uhr?
Sind es 2 sek.
Ich glaube die Umrechnung der 61 Elemente von 1200x1200 auf 120x120 frisst viel Zeit. Nächste Stufe wäre dann ein Grafik in der Größe 120x 120 nativ zu befüllen. Mal sehen was sich da heute noch machen läßt.
Gruß
Eberhard
Edit:
@oli: Die Zeiger in *.svg kannste haben. Bezüglich der unterschiedlichen Farben bei den Sekundenstrichen, musst Du die Grafik teilen auf Stunden und Sekunden. Da der Hintergrund transparent ist kannst Du sie übereinanderlegen. Deine Vorstellungen sind m.E. umsetzbar, gehen aber auf Kosten der Ladezeit. Vielleicht 2 Versionen, je nach Web-Instanz?
Beim save fhem.cfg kommt bei mir sogar immer ein timeout.
Ohne Uhr gehts schnell-
Gruß
Carlos
Hi Oli,
in der Anlage habe ich ein Zifferblatt in der Größe 120px x 120px. Dieses hat weitere Besonderheiten. Die Grafik besteht jetzt aus 3 verschiedenen Ebenen, die dadurch getrennt angesprochen werden können.
1. Der äußere Kreis ist mit id="layer1" ansprechbar.
<g
transform="translate(-539.74471,-539.75957)"
id="layer1"
style="display:inline"> ............... </g>
2. Die 12 Stundenstriche sind mit id="layer2" ansprechbar.
<g
transform="translate(-539.74471,-539.75957)"
id="layer2"
style="display:inline"> ............... </g>
3. Die 60 Minutenstriche sind mit id="layer3" ansprechbar.
<g
transform="translate(-539.74471,-539.75957)"
id="layer3"
style="display:inline"> ............... </g>
Jedes Element für sich kann aus- bzw. eingeblendet werden und so das Design des Zifferblattes verändern.
Einschalten: style="display:inline" ; Ausschalten: style="display:none"
Gruß
Eberhard
So, jetzt habe ich auch die neueste Version (aus #75) installiert.
Alles soweit ok, bis auf drei Sachen:
1. Ich habe keinen Rahmen passend zum Design "dark" mehr.
2. In der linken oberen Ecke habe ich ein Mini_Ziffernblatt. Das war wieder normal, nachdem ich in der fhem_niceclocks.js in Zeile 246 - 248 die Werte 1200 in 120 geändert habe.
3. Bei mir ist das Zifferblatt gegenüber den Zeigern nicht exakt positioniert. Das war zu beheben indem ich im Element svg{... margin: 2px 0px} nach margin: 0px 0px geändert habe. In der CSS-Datei habe ich das Element nicht gefunden; in der JS-datei auch nicht. KernSani müsste wissen wo es liegt.
Gruß Eberhard
Edit: Ich konnte nicht bis drei zählen :-)
Hier nunr die drei Zeiger als SVG im Format 120 x 120.
analoghours.svg: layer1 = Zeiger, layer2 = Achse;
analogminutes.svg: layer4 = Zeiger, layer5 = Achse;
analogseconds.svg: layer6 = Zeiger, ohne Achse, deshalb in der Darstellung ganz nach unten.
Ich habe mal mein Zifferblatt "verbogen"; ob das Sinn der Sache wäre, sei mal dahingestellt. 8) :o ;D :)
Grüße
Eberhard
Hallo,
ich habe die zip-Datei von #75 installiert. Alles funktioniert, insbesondere sind alle Striche da !
Wo/wie kann ich denn nun die Farben ändern ?
Besten Dank an die "Macher" !
Gruß
Peter
Daumen hoch
Die Uhr ist genial.
@PNinBB:
Zur Farbänderung des gesamten Zifferblattes siehe #71 .
Zitatder niceclocksParam "clockFace" ist weiterhin für die Farbe verantwortlich, frisst jetzt aber alle HTML-Farben ("red", "#FF0000", oder "rgb(255,0,0)")
Beispiel für eine Web-Instanz mit limettengünem Zifferblatt:
attr <deine Web-Instanz> niceclocksParam {"clockStyle" : "analog","clockFace" : "limegreen","keepBg" : false,"fixMenu" : false,"keepHeader" : true }Eine gute Tabelle für Farben (auch für Farbschwache :) ) befindet sich unter:
https://i-msdn.sec.s-msft.com/dynimg/IC24340.png (https://i-msdn.sec.s-msft.com/dynimg/IC24340.png)
Das was ich oben gezeigt habe, ist Zukunftsmusik. Ich wollte zeigen, wie flexibel die Uhr mal geplant ist. Wer sich mit Notepad++ auskennt, kann sich schon heute sein individuelles Zifferblatt basteln. Besser ist es aber zu warten, bis KernSani die Parameter einprogrammiert hat. Das ist eine Nummer zu hoch für mich.
Gruß
Eberhard
@KernSani
Hi Oli,
was hältst Du davon, als nächstes die Digital-Uhr anzupacken und die Ziffern zu "färben". Allerdings würde ich gerne wissen, ob dafür Bedarf vorhanden ist. Will Jemand so etwas haben, oder arbeitet die "Meute" mit analoger Uhr?
Analog :)
@ FHEm2005:
Danke für die Hinweise. Habe mal mit Notepad++ an den Farben "gedreht". Alles gelungen (geht zwar wie "Steine sägen"!), ich habe aber keine Möglichkeit gefunden, den äußeren Ring einzufärben. Ich warte da lieber auf die "Zukunftsmusik.
Und was die Frage "digital" oder "analog" betrifft: ich bevorzuge die analoge Uhr.
Gruß
Peter
Analog :D
Digital (Text only)
Danke!
Analog
LG
Hallo zusammen,
da kommt man nach einigen Tag mal wieder zurück und ihr habt gewaltig was umgesetzt.
Da muss man auch einmal ein Lob aussprechen. ;-)
Ich habe nun einmal eine Frage:
wie kann ich die Größe des Tages und des Datums verändern ?
Gruß Heiko
Hi Heiko,
ich habe mir für jede Web-Instanz eine eigene CSS_Datei angelegt, die nur nur bei Aufruf über deren Port verwendet wird. Es gibt bei mir eine myCSS_8083.css, myCss_8084.css und eine myCSS_8085.css im Ordner /opt/fhem/www/pgm2 . Sie war leer bis auf /* für den port 8083*/ usw. in der ersten Zeile.
Danach sind die CSS-Dateien über das Menue Edit files im Bereich der css-Dateien zu finden. In Deine verwendete CSS-Datei fügst Du mi copy/past den nachfolgenden Code ein.
/* Schrifteinstellung für den Wochentag*/
#ncDate > p:nth-child(1) {
font-size: 9px;
color:yellow;
}
/*Schrifteinstellung für das Datum */
#ncDate > p:nth-child(2) {
font-size: 15px;
color: blue;
}
Damit die CSS-Datei auch aktiv wird habe ich sie natürlich mit einem Attribut eingebunden:
attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css
Wenn alles geklappt hat, sieht Dein Datum wie das Photo zeigt aus. Das ist nur zum Zeigen, ich werde das bei mir wieder ändern.
Viel Erfolg!
Gruß
Eberhard
Die bisherige Anweisung, in der die Uhr an den style = dark angepasst wird, passt seit der letzten SW-Änderung nicht mehr. Deshalb gibt es hier eine neue Anweisung auf Basis einer eigenen CSS-Datei. Hierzu siehe auch der vorherige Thread. Dazu ist in der myCSS_8083.css (oder wie die eigene CSS_Datei auch heißen mag) folgendes hinzuzufügen:
#logo {
/* left: 31px;
in fhem_niceclocks Zeile 229 geändert
Zeile 229: logo.style.left="31px";*/
box-shadow: 5px 5px 5px #060606;
background: none repeat scroll 0% 0% #111;
border-radius: 8px;
border-spacing: 0px;
border: 1px solid #CCC;
padding: 9px;
}
Leider muss zur exakten Positionierung die Datei fhem_niceclocks.js in der Zeile 229 (bezogen auf notepad++) wie folgt geändert werden:
logo.style.left="31px";
Gruß
Eberhard
Hallo,
woran kann das nur liegen?
habe die Aktuelle Niceclock mal heruntergeholt und mir eine css angelegt mit den beiden Erweiterungen in den 2 letzten Thread.
Dabei ist die Uhr über meinem FHEM logo angezeigt und ohne die eingegebenen Farben und Rahmen.
und in meiner Hauptseite hat es etliche sachen zerschossen und komplett falsch dargestellt.
Kann das mit dem Webbrowser zusammenhängen zufällig ?
Grüße
Welchen Browser hast Du?
Hast Du vielleicht vergessen, die CSS-Dateien aus #93 einzubinden? Aufpassen, wenn Du bereits eine eingebunden hast, dann ist es erforderlich die Zweite mit Leerzeichen getrennt hinter die Bestehende zu schreiben (Siehe Muster in #93).
Gruß
Eberhard
Ich habe die SVG-Datei nocheinmal überarbeitet. In der bisherigen Version wurde jedes der 73 Elemente bezüglich ihrer Farbe nacheinander geändert.
Durch Verschiebung der Eigenschaften nach oben in die Ebenen hinein, wird je Ebene die Farbe einmal verändert. Damit müssen aus der js-Datei heraus nur noch drei Elemente angesprochen werden. Ich erhoffe mir von der schlankeren Struktur eine (vielleicht) schnellere Ladezeit und für Oli eine leichtere Programmierung. :)
Die Gesamtstruktur aus #81 bezgl. der Ebenen und der zugeörigen ID's hat sich nicht verändert.
Die Datei arbeitet mit der aktuelle fhem_niceclocks.js zusammen.
Grüße
Eberhard
@Oli: Ich habe Dir eine PN geschickt. Die digitale Variante hat sich wohl erledigt.
Nach der hervorragenden Vorarbeit von KernSani habe ich mir erlaubt die js-Datei in der Darstellung in einigen Punkten zu ändern.
Die Variable 'clockface' wird in dieser Version (momentan) nicht mehr verwendet! Wer das nicht möchte, sollte diese Version NICHT verwenden! Diese js-Datei funktioniert nur richtig mit der SVG-Datei aus dem vorherigen Thread #97.
Dafür gibt es die drei Bildelemente einzeln: clockCircle, clockHours und clockSeconds. Damit können die einzelnen Bildelemente (bis auf die Zeiger) unabhängig von einander eingefärbt werden.
Damit man zur Gestaltung freie Hand hat, besteht nun die Möglichkeit jedes Element auszublenden. Dafür gibt es die Variablen:
visCircle, visHours und folgerichtig auch visSeconds. Alle diese Variablen können lediglich zwei unterschiedliche WErte annehmen: 'inline' (default-Wert) oder 'none'
Beispiel:
"visCircle" : "none"
blendet den Kreis aus. Eine Variable "visCircle" : "inline" macht keinen Sinn, da bereits default.
Alle anderen Parameter habe ich nicht angefasst!
In dem Bild habe ich euch ein paar Muster aufgezeigt. So sollte für jeden Geschmack etwas dabei sein. :D
Viele Grüße
Eberhard
Edit: die Beschreibung des letzten Bildes ist falsch!! richtig:
Default-Werte mit:
"visHours": "none" und
"clockSeconds":"red"
"clockCircle":"limegreen"
Noch eine kleine kosmetische Änderung:
Die Layer waren wie folgt verteilt.
layer3 = Sekunden
layer2 = Stunden
layer1 = Kreis
Die Sekundenstriche legten sich auf die Stundenstriche. das sah blöd aus. Deshalb habe ich die Hirarchie geädert, dass sich die Stundenstriche auf die Sekundenstriche legen.
Es muss owohl die svg-Datei im niceclocks/image-Ordner als auch die js-Datei im niceclocks-ordner getauscht werden.
Gruß
Eberhard
Ich habe von #99 die js-Datei und auch die Uhr-Datei eingebaut. Farben und Sichtbarkeit soweit OK.
Nur verschiebt sich etwas im Webfrontend (oben links); die Kommandozeile ist überdeckt und nicht mehr funktionstüchtig !?
Gruß
Peter
(//)
Nachtrag: habe fhem auch neu gestartet; gleiches Bild.
Echt cool
Eine sehr nette spielerei.
Danke
Guten Abend,
ich habe das Script aus der Seite1 in Verwendung und wollte nun heute endlich mal mein iPad als Wandanzeige in Betrieb nehmen.
Leider läuft hier die "Digital" Uhr nicht, es stehen nun 0000 da.
Hat hier bereits jemand eine Lösung für das Problem?
Bin für jeden Tipp dankbar!
Grüße
Simon
@PNinBB:
Schau mal bei #34 bis #36 nach, da war das Problem schon mal.
Gruß
Eberhard
@ SimonHipp:
Safari-Browser?
Wenn ja, ist das Problem wohl bekannt, aber noch offen (siehe #53 ff). Analog müsste aber gehen.
Gruß
Eberhard
Zitat von: FHEm2005 am 08 Februar 2015, 21:00:09
@ SimonHipp:
Safari-Browser?
Wenn ja, ist das Problem wohl bekannt, aber noch offen (siehe #53 ff). Analog müsste aber gehen.
Gruß
Eberhard
Jup, Analog geht.
Hat bisher noch keiner eine Lösung für das Problem gefunden. Denke auch das es mal wieder an Safari liegt!
@ FHEm2005:
Vielen Dank ! Es war genau dieses Problem.
Gruß
Peter
Ich hab mich nun mal dem Problem mit dem Safari und der Digital-UHR angenommen.
Hier das korrigierte File.
Ich habe es auf Firefox 35.0.1 / IE 10 / IE 11 / Safari 5.1.7 auf Windows, sowie Safari auf dem iPad/iPhone getestet, bei mir läuft es.
Könnt Ihr das bitte gegenprüfen und mir Rückmeldungen geben, danke!
Irgendwie hab ich wohl jetzt den Überblick verloren. Ich habe die fhem_niceclocks.js und svg_analog.svg aus #99, analoghours.svg, analogminutes.svg und analogseconds.svg aus #83, den Rest aus dem Original.
Meine Konfiguration sieht so aus:
attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam {"clockStyle" : "analog","clockFace" : "white","clockSeconds" : "red","analogBorder" : true,"keepBg" : false,"fixMenu" : false,"keepHeader" : true }
Allerdings sieht die Uhr jetzt so aus:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_svg_fehler.PNG)
Muß das CSS aus #94 noch eingebunden werden?
Könnte vielleicht jemand den kompletten Ordner niceclocks mit aktuellem Stand hochladen?
Windows Firfox 35.01: Zickt bei digital, dass sich das Fenster verschiebt und beim Rückgang auf analog auch nicht mehr normalisiert. das Zifferblatt fehlt. Auch nach dem Motto "Reboot tut gut" bleibt der Fehler. Erneutes Downloaden der Version von #99 und shutdown + restart hat alles normalisiert.
Apple IOS 6.1.6 (ja, ich habe ein altes iPhone! :) ): Keine Anzeige der digitalen Uhr.
Wir müssen nur aufpassen, dass wir nicht nachher zwei versionen haben einmal Apple und einmal ROW.
@mahowi: nimm mal das "clockFace" : "white", raus. aus'#98:
ZitatDie Variable 'clockface' wird in dieser Version (momentan) nicht mehr verwendet! Wer das nicht möchte, sollte diese Version NICHT verwenden! Diese js-Datei funktioniert nur richtig mit der SVG-Datei aus dem vorherigen Thread #97.
In die #1 kann nur KernSani was eintragen.
Zusammenfassung:Erforderlich für die Version mit der getrennten Farbgebung sind:
svg_analog.svg aus #99
fhem_niceclocks.js aus #99
niceclocks.css aus zip-Datei in #1
Rahmen im style = dark:
Hinweise und Änderungen aus #94
Änderungen in Farbe und Schriftgröße des Datums:
Hinweise und Änderungen aus #93
Gruß
Eberhard
Hallo Eberhard! Erstmal vielen Dank für Deine Mühen.
Leider sieht das Ganze noch nicht gut aus, siehe Screenshot. :(
Ich habe jetzt mein niceclocks-Verzeichnis mal gelöscht und die Zip-Datei aus #1 neu heruntergeladen und entpackt. Dann svg_analog.svg aus #99 in niceclocks/images und fhem_niceclocks.js aus #99 in niceclocks. Dazu die myCSS_8083.css aus #93 und #94 in niceclocks. Das Verzeichnis sieht jetzt also so aus:
pi@raspberrypi /opt/fhem/www $ ls -lahR niceclocks/
niceclocks/:
insgesamt 32K
drwxr-xr-x 3 fhem dialout 4,0K Jan 18 23:15 .
drwxr-xr-x 10 fhem dialout 4,0K Feb 9 19:47 ..
-rw-r--r-- 1 fhem dialout 12K Feb 9 19:37 fhem_niceclocks.js
drwxr-xr-x 2 fhem dialout 4,0K Jan 31 23:47 images
-rw-r--r-- 1 fhem dialout 532 Feb 9 19:43 myCSS_8083.css
-rw-r--r-- 1 fhem dialout 1,3K Feb 1 00:22 niceclocks.css
niceclocks/images:
insgesamt 324K
drwxr-xr-x 2 fhem dialout 4,0K Jan 31 23:47 .
drwxr-xr-x 3 fhem dialout 4,0K Jan 18 23:15 ..
-rw-r--r-- 1 fhem dialout 4,8K Jan 31 23:46 analog_black.png
-rw-r--r-- 1 fhem dialout 8,5K Jan 31 23:47 analog_blue.png
-rw-r--r-- 1 fhem dialout 1,2K Jan 9 02:06 analog.gif
-rw-r--r-- 1 fhem dialout 466 Jan 9 02:22 analoghours.png
-rw-r--r-- 1 fhem dialout 351 Jan 9 02:22 analogminutes.png
-rw-r--r-- 1 fhem dialout 354 Jan 31 23:47 analogseconds.png
-rw-r--r-- 1 fhem dialout 5,0K Jan 31 23:46 analog_white.png
-rw-r--r-- 1 fhem dialout 2,2K Jan 9 23:40 digital.gif
-rw-r--r-- 1 fhem dialout 43K Jan 9 23:56 digitalhours.gif
-rw-r--r-- 1 fhem dialout 94K Jan 9 23:56 digitalminutes.gif
-rw-r--r-- 1 fhem dialout 94K Jan 9 23:43 digitalseconds.gif
-rw-r--r-- 1 fhem dialout 30K Feb 9 19:37 svg_analog.svg
fhem.cfg:
attr WEB CssFiles niceclocks/niceclocks.css niceclocks/myCSS_8083.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam {"clockStyle" : "analog","clockSeconds" : "red","analogBorder" : true,"keepBg" : false,"fixMenu" : false,"keepHeader" : true }
clockFace ist also raus.
myCSS_8083.css:
/* für den port 8083*/
/* Schrifteinstellung für den Wochentag*/
#ncDate > p:nth-child(1) {
font-size: 9px;
color:yellow;
}
/*Schrifteinstellung für das Datum */
#ncDate > p:nth-child(2) {
font-size: 15px;
color: blue;
}
#logo {
/* left: 31px;
in fhem_niceclocks Zeile 229 geändert
Zeile 229: logo.style.left="31px";*/
box-shadow: 5px 5px 5px #060606;
background: none repeat scroll 0% 0% #111;
border-radius: 8px;
border-spacing: 0px;
border: 1px solid #CCC;
padding: 9px;
}
Edit: Im IE 11 sieht es aus wie im 2. Screenshot, ohne das zu kleine Ziffernblatt in der Ecke, dafür ganz ohne Sekundenstriche und Umrandung.
Hi mahowi,
das Problem ist hier, dass alle Einzelschritte auf einmal gemacht wurden. Wenn Du in der Reiehenfolge meiner Zusammenstellung vorgehst, kann der Fehler eher lokalisiert werden.
Im Ordner Images haben die Grafiken für die analoge Uhr bei mir folgende Rechte.
-rw-r--r-- 1 fhem root 466 Jan 26 18:23 analoghours.png
-rw-r--r-- 1 fhem root 351 Jan 26 18:23 analogminutes.png
-rw-r--r-- 1 fhem root 354 Jan 27 17:27 analogseconds.png
-rw-r--r-- 1 fhem root 30245 Feb 8 16:10 svg_analog.svg
Hier scheint es wichtig zu sein, dass fhem zur Gruppe root gehört.
Der Rahmen und die Schriftänderungen gehören nicht zur Uhr, sondern wurden auf Wunsch extra gebaut.
Ich frage mich, warum Du die myCss_083.css im niceclocks-Ordner hast. Dort kannst Du sie auch nicht über fhem editieren.
Vorschlag: Die CSS-Datei in das Verzeichnis: /opt/fhem/www/pgm2 . Dann passen auch die Rechte.
Die Initialisierung dann mit:
attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css
Zum Editieren gehst Du dann über den Menüpunkt Edit files und findest Deine CSS unter den "styles". Du kannst dann die CSS-Datei zusätzlich für andere Anpassungen besser benutzen.
Und dann das Ganze schön schrittweise..... ;) Nach jedem Schritt vorsichtshalber einen Neustart machen.
Gruß Eberhard
EDIT: Ich kann Dir bei dem IE leider nicht helfen, weil ich einen etwas älteren Rechner mit IE9 habe. Da wird die Uhr gar nicht angezeigt. Deshalb gibt es für mich nur den Firefox.
Ok, dann nochmal ganz vorne und schrittweise. ;)
- Originalzustand mit Zip aus #1 und Einstellungen:
attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockFace" : "blue","analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }Soweit ok, aber es wird kein Rahmen gezeichnet trotz "analogBorder" : true.
- Zip aus #75, diesmal also mit svg und denselben Einstellungen: Auch wieder kein Rahmen, aber sonst ok.
- Mit CSS aus #93 und #94 und entsprechender Änderung in fhem_niceclocks.js (logo.style.left="31px"; ), Einstellungen wie zuvor aber mit pgm2/myCSS_8083.css in CSSFiles:
Diesmal wird der Rahmen angezeigt, die Uhr ist aber zum Menü verschoben. - fhem_niceclocks.js und svg_analog.svg aus #99. Diesmal stimmt alles. :)
attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "blue","clockHours" : "yellow","clockSeconds" : "orange", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }Jetzt muß ich nur wieder vernünftige Farben einstellen. ;)
Vielen Dank für die Hilfe!
Wer sagt es denn? Geht doch! :) :)
Gruß
Eberhard
Zitat von: mahowi am 09 Februar 2015, 22:15:29
Jetzt muß ich nur wieder vernünftige Farben einstellen. ;)
na das sieht doch wieder gut aus...! ;)
Jetzt müßte nur noch einer alles zusammen in den Startpost bringen, so das jeder weiß, wenn er irgend etwas einstellen möchte egal ob nun mit oder ohne Rahmen und welche Farbe auch immer, er dann alles beisammen hat.
So wie ich das hier gerade sehe muss man alles zusammen suchen aus #1, #75, #93, #94 und #99 ;)
Das geht nicht so einfach, weil der Initiator dieses Threads die letzten Beiträge wohl noch nicht mitbekommen hat.
Gruß Eberhard
Bei einer Eingabe eines Hex-Wertes für die Farbe, z.B.
"clockSeconds" : "#FF0000" für ROT bekommen ich Abbrüche durch Fehlinterpretation (Kein Scrollen mehr möglich!) . Hat jemand von euch erfolgreich für die neue Variante Hex-Zahlenwerte verwendet? Wenn ja welche Syntax?
Klartext und RGB-Angaben funktionieren.
Gruß
Eberhard
Zitat von: FHEm2005 am 12 Februar 2015, 13:11:42
Bei einer Eingabe eines Hex-Wertes für die Farbe, z.B.
"clockSeconds" : "#FF0000" für ROT bekommen ich Abbrüche durch Fehlinterpretation (Kein Scrollen mehr möglich!) . Hat jemand von euch erfolgreich für die neue Variante Hex-Zahlenwerte verwendet? Wenn ja welche Syntax?
Klartext und RGB-Angaben funktionieren.
Der Fehler tritt bei mir auch auf. Hab's dann aber nicht weiter getestet. Muß die Raute eventuell in fhem maskiert werden (\#)?
Ich bin erst heute abend wieder in der Nähe meines Pis und komme von hier nur per ssh drauf und per telnet auf fhem.
Wenn ich in der js-Datei die Default-Werte mit den Farben in Hex befülle, ist alles normal. Es muss also am Übergang Fhem => Javascript liegen.
Eine Maskierung des Doppelkreuzes mit "\#FF0000" führt zum o.g. fähler ;).
Gruß
Eberhard
EDIT:Es scheint nicht zu funktionieren! Soll nur bei SVG-Dateien der Fall sein - und das Zifferblatt ist eine SVG!
Hier der Thread: http://forum.fhem.de/index.php?topic=26870.0
Also geht nur Klartext oder rgb(0-255,0-255,0-255) oder rgb(1-100%,0-100%,0-100%) oder hsl(0-360,0-100%,0-100%)! Das dürfte reichen. Begraben wir das Doppelkreuz,Hash,Gatter und wie auch immer es heißen mag.
Gilt wohl generell für fhem, daß man das "#" nicht in Atrributen verwenden kann. Wurde auch gerade in nem anderen Thread erwähnt. http://forum.fhem.de/index.php/topic,14425.msg260778.html#msg260778 (http://forum.fhem.de/index.php/topic,14425.msg260778.html#msg260778)
Hallo zusammen ,
Erst mal vielen DANK an alle hier ;D
Da ich am Anfang etwas ??? Probleme hatte mach ich hier mal eine Zusammenfassung. 8)
Den Inhalt der Zip Datei nach www entpacken.
anschließend die attr nach FHEM aufnehmen.
Achtung ich habe bei JavaScripts die parameter für den codemirror mitbei
attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js codemirror/fhem_codemirror.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "blue","clockHours" : "yellow","clockSeconds" : "orange", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }Farben Namen findet ihr hier
https://i-msdn.sec.s-msft.com/dynimg/IC24340.png
Die Parameter die zum eintellen sind sind mir bis jetzt bekannt (oder gefunden) ::)
- "visCircle" : "none" —> wird kein Ring angezeigt default ist ein
- "clockStyle" : "analog" —> clockStyle: "analog" oder "digital" (default ist "analog")
- "clockCircle" : "blue" —> der Ring außen wird blau angezeigt
- "clockHours" : "yellow" —> die Stricke der Stunde werden gelb gezeigt
- "clockSeconds" : "orange" —> die Striche der Sekunden werden orange gezeigt
- "analogBorder" : true —>
- "fixMenu" : false —> fixMenu: Bei "false" (default) verhält sich das Menu wie gewohnt und scrollt mit. Bei "true" scrollt nur der
Content, das Menu bleibt immer erreichbar. Funktioniert natürlich nur, wenn das Menu nicht zu lang ist - "keepBg" : false —> keepBg: Das Logo im darkstyle ist tatsächlich ein Hintergrundbild, daher wird dieses in der
default-Einstellung ("false") ausgeendet. Durch setzen von "true" bleibt ein eigenes Hintergrundbild erhalten - "keepHeader" : true —> keepHeader: Wenn keine Kommandozeile eingeblendet ist, klafft eine Lücke am oberen Rand.
Diese kann durch setzen von "true" entfernt werden. Default ist "false".
Hoffe das ich nicht vergessen habe und alles so funktioniert. Ich bitte um Berichtigung wenn ich was falsches geschrieben habe.
Gruß Gerd
Hallo Gerd,
hier die Einstellungsmöglichkeiten mit den aktuellen Voreinstellungen:
Parameter default mögliche Parameter
----------------+-----------------+--------------------------------------------------
clockStyle analog analog, digital
clockCircle white Farbangaben in Klartext, rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%), hsl(0-360,0-100%,0-100%)
clockHours white Farbangaben in Klartext, rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%), hsl(0-360,0-100%,0-100%)
clockSeconds white Farbangaben in Klartext, rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%), hsl(0-360,0-100%,0-100%)
visCircle inline inline, none
visHours inline inline, none
visSeconds inline inline, none
analogBorder false false, true (ist zwar von KernSani vorgesehen, hat aber keine Auswirkung.)
fixMenu true false, true
keepBg true false, true
keepHeader false false, true
verbose 3 0, 1, 2, 3, 4, 5 (s. command ref)
clockCircle, clockHours und clockSeconds stellen die Farben vom Ring, Minutenstriche und Stundenstriche ein
visCircle, visHours und visSeconds steuern die Sichtbarkeit der Elemente vom Ring, Minutenstriche und Stundenstriche, d.h. sie stellen die Elemente dar (inline) oder blenden sie aus (none).
Default-Werte müssen nicht noch einmal definiert werden.
Gruß
Eberhard
hi @all,
hi Imputsammler ,
da bei mir nach den einzelnen Änderungen alles wuschig wurde habe ich alles gelöscht und nur das Paket von Imputsammler genommen ....
Wollte die Uhr als analog nutzen mit dem Ring ( Sekunden und Stundenanzeige )
Also alles so übernommen wie im Post von Imputsammler - Leider bekomme ich den Ring gar nicht angezeigt :-(
Ich sehe nur den Sekundenzeiger ( orange - Farbe lässt sich auch nicht ändern ) , Stunden u Minutenzeiger weiß .... Aber der Ring mit der Einteilung von Minuten und Stunden lässt sich nicht blicken :_(
Lösch mal vorher das niceclocks-Verzeichniss, und kopier dann das com Inputsammler nochmal rein.
Ich hatte zuerst auch kurz probleme damit, aler löschen und neu kopieren hat dann alles behoben.
lg, Ici
Hi Icinger ,
erstmal Danke .... hatte schon versucht ,leider ohne Erfolg :-(
Da ich mit einem Mac unterwegs bin , hatte ich dann den Safari Browser in verdacht und versuchte mal den Firefox ....komisch dort bekomme ich anstelle der Uhr nur das FhemLogo :-(
Ok, nun Google Chrom .... grummel .... nun wird die Uhr korrekt angezeigt :-)
Kann das ein MacUser bestätigen ?
Hi Aladin,
ZitatIch sehe nur den Sekundenzeiger ( orange - Farbe lässt sich auch nicht ändern ) , Stunden u Minutenzeiger weiß
Die Farbe der Zeiger läßt sich momentan (noch) nicht einstellen. Ich kenne mich in Javascript nicht aus und bin schon bei dem Versuch der Programmierung gescheitert. Ich weiß zwar, was ich machen muss/will, aber damit hat es sich dann auch. :'( :'( Deshalb noch keine Farbe im Zeiger. Sorry.
Gruß
Eberhard
Das wäre auch nicht weiter schlimm ( Zeigerfarbe ) ,aber leider sehe ich nur die Zeiger :-(
Der Aussenkreis und die Minuten & Sekundenstriche sind bei mir ( Safari ) nicht sichtbar :-(
Hallo Zusammen und gleich an Danke wegen der Uhr.
Ich bin die gesamte Zeit bei der ersten Version geblieben, gefällt mir am besten.
Frage:
-Kann ich den Abstand der Uhr ändern, so das ich NICHT wie im Screenshot den oberen Bereich frei habe?
-gehört nicht ganz hierhin, aber ist es Möglich die Namen der Column (Andere,Licht etc) zusätzlich auszublenden?
Danke
Hi RitterSport,
welchen Abstand der Uhr meinst Du genau? Rechts, links, oben, unten?
Die Überschriften bekommst Du weg mit einem Attribut
attr <device> noheading 1
Gruß
Eberhard
Sobald ich die Uhr aktiviert habe, schiebt sich am oberen Rand dieser Leerbereich ein, obwohl ich links unten genügnd Platz habe.
Auf meinem Wand-iPad ist somit untern ganz leicht etwas abgeschnitten.....
Kann ich also die Uhr nach unten schieben?
Allerdings glaube ich mittlerweile, das er nur existiert weil ich die Eingabezeile(input) versteckt habe.
Das attribute noheading hatte ich gefunden in der commandref, aber worauf soll ich es in meinem Bsp. beziehen? Ich möchte ja Kontakte/Andere etc ausblenden, welche definiert sind als Group.
@RitterSport:
Deine Zusammenstellung auf der Hauptseite gefällt mir sehr gut. Wie hast Du das so hinbekommen, dass neben "Andere" und "Licht" die "kontakte" und das "Regenradar" dargestellt wird.
Welche Attribute muss ich für solch eine Zusammenstellung verwenden / berücksichtigen?
@bjoernbo
Funktioniert über das attr column.
define WEBiPad FHEMWEB 8086 global
attr WEBiPad CssFiles niceclocks/niceclocks.css
attr WEBiPad JavaScripts niceclocks/niceclocks.js
attr WEBiPad column Wohnzimmer:Rolläden,Licht|Andere Hauptseite:Andere,Licht,Rolläden,Wetter|Regenradar,Kontakte
attr WEBiPad defaultRoom Hauptseite
In diesem Fall für den Raum Hauptseite:
Vorher die einzelnen Devices noch mit dem entsprechenden attr group versehen und so zusammenstellen.
Die Icons sind je nach Zustand dann unterscheidlich gefärbt, wenn die Garage auf ist...das Auto nicht mehr da etc....
@Rittersport:
ZitatDas attribute noheading hatte ich gefunden in der commandref, aber worauf soll ich es in meinem Bsp. beziehen? Ich möchte ja Kontakte/Andere etc ausblenden, welche definiert sind als Group
Bei meiner Antwort bin ich davon ausgegangen Du hättest eine readingsGroup. Also entweder readingsGroup oder das HTML-Element mit Firebug o.ä. suchen und in einer gesonderten CSS-Datei die Eigenschaft
display:none bzw.
visibility:hidden setzen. ZU gesonderte CSS-Datei siehe #93.
Für den div-Container
<div id="content" room="<raum>"> gibt es die Eigenschaft
top:50px. Wenn Du die auf -8px setzt, hast Du oben keinen "Leerraum" mehr (siehe Bild). Ich benutzte readingsGroup.
#content {top: -8px;}Gruß Eberhard
btw: Das ist jetzt mehr eine Diskussion über allgemeine Sachen, die weniger etwas mit der Uhr zu tun hat.
Nach dem heutigen Update....
FHem ist nun so geändert worden, dass ein '#' nur noch am Zeilenanfang als Bemerkung interpretiert wird.
Das bedeutet für die Konfiguration der Uhr, dass nun in den Farbangaben Hex-Werte nicht mehr zu Fehlern führen, sondern umgesetzt werden.
Mein Dank an die Macher!
Jetzt ist also die Parameterangabe
"clockSeconds" : "#FF0000" für rot möglich.
Gruß
Eberhard
Hallo zusammen,
war lange nicht da... Die Uhr scheint sich ja prächtig zu entwickeln. Ist irgendwo mein Support gefragt?
@Eberhard: Soll ich eine aktualisierte Version in #1 posten und Beschreibung anpassen?
@RitterSport: OffTopic, aber weil's so schön passt: Ich verfolge den selben Ansatz wie du für die Tablet-Ansicht, habe aber noch ein bisschen mehr Javascript und CSS gefrickelt.
@KernSani,
support wäre prima :-)
Ich bin mit einem Mac unterwegs und der Safaribrowser zickt mit der Uhr leider etwas !
Der Aussenkreis und die Minuten & Sekundenstriche sind bei mir ( Safari ) nicht sichtbar :-(
Nutze ich Chrome funktioniert alles bestens ...
Könnte ein MacUser das mal testen ?
Hi KernSani,
schön, dass Du wieder hier bist. Ich habe 2 Punkte
1. Die aktuelle Version in #1 einpflegen wäre schön.
2. In der letzten Version ist der Übergang vom .png-Zifferblatt zum SVG-Zifferblat ja bereits vollzogen. Damit die Farbgestaltung durchgängig möglich ist, fehlt noch die Farbanpassung der Zeiger. Die svg-Grafiken dafür sind fertig und die notwendigen Variablen auch bereits definiert und in der angehängten .js-Datei eingetragen. Ich habe es nicht geschafft diese Zeiger funktionsfähig "einzuarbeiten". Die Farben sind in den einzelnen Zeigern unter je einer eigenen Layer-Id ansprechbar.
Sekundenzeiger = "layer4"
Minutenzeiger = "layer5"
Stundenzeiger = "layer6"
Die Dateien habe ich Dir hier mal angehängt. Wäre schön wenn es Dir gelingt die Zeiger so einzuarbeiten, dass sie über die bereits definierten Variablen "einstellbar" wären.
Eine etwas ausführlichere Bedienungsanleitung habe ich auch schon halb fertig. Will sie aber erst komplettieren, wenn die Zeiger funktionieren. Damit es keine Verwirrung mit unterschiedlichen Varianten gibt. Ich kann sie Dir gerne vorab per PN zusenden.
An alle anderen, die nicht KernSani heißen: ;D
Das hier sind Arbeitsdateien, die zwar funktionstüchtig sind, aber halt Arbeitsdateien!!
Gruß
Eberhard
Hallo,
Gibt es eine Möglichkeit die Uhr komplett nur im Floorplan z.B. in die Mitte zu verschieben.
Habe mit meinen gegen Null Programmierkentnissen leider keine gut gehende Lösung gefunden.
Was geht ist durch editieren der fhem_nicelocks.js wie Zeile logo.style.left="10px"; die Uhr zu verschieben.
Man muss aber jedes mal von extern ein Editor bemühen und gerät leicht in Vergessenheit.
Die Idee wie in Antwort 93 eine eigene css Datei zu benutzen habe ich schon mal in Benutzung und nochmals Danke dafür !
Scheint aber hierfür nicht zu gehen um aus FHEM heraus etwas ändern zu können oder ??
Ein Versuch die fhem_nicelocks.js zu kopieren dann umzubenennen und als Attribut im Floorplan zu benutzen funktionierte leider nicht vermute es der exakte Dateiname wir intern benutzt ??
Letzte Idee war die Uhr als dummy anzulegen und dann im Floorplan mit floorplan arrange die Position elegant zu verschieben habe ich nicht hinbekommen.
Man möge mir mein stümperhaftes Vorgehen verzeihen vielleicht kennt Jemand von Euch noch einen Lösungsansatz.....
Danke
Hans-Jürgen
Hallo zusammen
zuerst einmal vielen Dank für die tolle Idee und die guten Anleitungen.
ich verfolge diesen Thread schon von Anfang an, jedoch habe ich es erst jetzt geschafft die Uhr anzuzeigen.
Ich habe auch die Anweisung für den FLOORPLAN befolgt, jedoch hier bleibt stur das FHEM logo stehen ???
Habe ich etwa übersehen,oder muss ich ausser den attr Wohnung CssFiles niceclocks/niceclocks.css
attr Wohnung JavaScripts niceclocks/niceclocks.js
attr Wohnung userattr niceclocksParam
noch etwas beachten? :(
als mein style habe ich dark eingestellt
Hinweise und Hilfe nehme ich gern an ;D
grüsse tagedieb
Hallo tagedieb,
müsste die letzte Zeile vollständig nicht ungefähr so Aussehen in Deiner fhem.cfg sind die attr gesetzt?
attr Wohnung niceclocksParam {"clockStyle" : "analog","clockFace" : "blue","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
kenne mich leider nicht weiter aus
Gruß Hans-Jürgen
Guten Morgen Hans-Jürgen
Danke für den Hinweis - es hat geholfen, denn ich hatte die attr nur unter WEB,WEBphone etc
ich wünsche einen tollen Start in die neue Woche
Gruss
Annette
Hallo Hans-Jürgen,
wird die Uhr bei Dir überhaupt im Floorplan angezeigt? In meinem Floorplan ist sie nicht zu sehen. Das Javascript wird vom Floorplan nicht aufgerufen. Das scheint wohl im FP zu liegen.
Gruß
Eberhard
Hallo Eberhard,
Ja wie vorher geschrieben, die Uhr wird bei mir im Floorplan angezeigt oder verstehe ich etwas falsch ?
Gesetzt ist attr <myFloorplan> userattr niceclocksParam
Dazu noch ....
CssFiles pgm2/myCSS_6668.css niceclocks/niceclocks.css
die extra myCSS_6668 benutze ich um die Schrift für Datum etwas zu verkleinern damit es in der Standardansicht besser passt.(überdeckt Menü etwas)
niceclocksParam {"clockStyle" : "analog","clockFace" : "blue","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
und JavaScripts niceclocks/fhem_niceclocks.js
verschieben der Uhr geht auch über editieren in der fhem_nicelclocks.js aber nicht so direkt aus fhem heraus und bin auf der Suche nach einem anderen Weg wie meine Eingangsfrage mit meinen gescheiterten Versuchen.
Gruß
Hans-Jürgen
Hallo zusammen,
Ich bin nun endlich dazu gekommen, die hervorragenden Vorarbeit von FHEm2005 zu Ende zu bringen.
Im Anhang eine beta-Version mit konfigurierbaren Zeigern. Die einstellbaren Parameter (und ihre default-Werte) sind damit:
clockStyle : "analog", /* Define the clock style: 'analog' or 'digital' */
clockCircle: "white", /* outer Circle of the Clock */
clockHours: "white", /* strokes of the hours */
clockSeconds: "white", /* strokes of the seconds */
hourHand: "white", /* Stundenzeiger */
minuteHand: "white", /* MinutenZeiger */
secondHand:"white", /* Sekundenzeiger */
visCircle: "inline", /* shows outer circle */
visHours: "inline", /* shows lines of the hours */
visSeconds: "inline", /* shows lines of the seconds */
visHourHand: "inline", /* Sichtbarkeit des Stundenzeigers */
visMinuteHand: "inline", /* Sichtbarkeit des MinutenZeigers */
visSecondHand: "inline", /* Sichtbarkeit des Sekundenzeigers */
analogBorder: false, /* draw a border around clock */
fixMenu : true, /* Set to "true" to fix the menu (only content scrollable) */
keepBg : true, /* Keep the background image (if you have your own) */
keepHeader : false, /* Set to "false" if you don't have a command field */
verbose: 3
Grüße,
Oli
Hallo zusammen,
super Idee mit der Uhr.
Habe es gestern installiert und lief auch direkt.
Seit heute wird bei der digitalen Uhr nach einem Refresh mal der Sekundenzeiger angezeigt , mal fehlen die Minuten, oder die Sekunden springen nur noch.
Egal ob FHEM WEB oder Floorplan.
Die Analog Uhr funktioniert einwandfrei.
Auch Neustart hilft nicht.
Der Link im Floorplan um auf fhem zurück zukommen wird bei der digital Version auch vom Datum überdeckt. Analog ok.
FHEM update von gestern
Style = Dark
Hat da jemand eine Idee?
update
wenn man von analog auf digital in der cfg ändert wird sie korrekt angezeigt, ein erneuter refresh vom Browser bringt den Fehler wieder.
Ich nutze Firefox.
Gruß
Sven
Hallo newby,
die digitale Variante war bisher fast nicht Gegenstand dieses Threads. Welches Betriebssystem? Wie sieht die fhem.cfg in diesem Umfeld aus?
Vielleicht gibt es Jemanden dann da draußen Einen, der die gleiche Konfiguration hat wie Du.
Gruß Eberhard
Hallo,
fhem läuft auf einem Raspi.
Das Problem mit der digitalen Anzeige ist nach einem update des Firefox bis jetzt nicht mehr aufgetreten.
Es wird zwar bei einem refresh noch kurz der Zeiger angezeigt, springt aber dann auf die Sekunden um.
Das Problem mit dem fhem-Link im Floorplan vermute ich liegt daran das die Uhr über dem Link liegt.
#FHEM WEB
attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam {"clockStyle" : "digital","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
#Floorplan
attr Temperaturen userattr niceclocksParam
attr Temperaturen CssFiles niceclocks/niceclocks.css
attr Temperaturen JavaScripts niceclocks/fhem_niceclocks.js
attr Temperaturen niceclocksParam {"clockStyle" : "digital","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
Ich hoffe das hilft weiter
Gruß
Sven
Hallo newby,
kennst Du Dich etwas mit CSS aus? Hast Du schon mal versucht in der niceclocks.css - Datei die Position der Uhr zu verändern? Oder mit index die Reihenfolge in der Anzeige zu verändern? Die Eigenschaft z-index:-99 schiebt die Anzeige ganz in den Hintergrund.
Für Firefox gibt es Firebug. Darin kannst Du wunderbar Veränderungen für die CSS austesten ohne die eigentliche CSS-Datei zu zerschießen.
Ich habe bei mir leider keinen Floorplan um Deine Konfiguration auszutesten.
Gruß
Eberhard
Moin,
ich kenne mich bedingt mit CSS aus.
Firebug zeigt mir an das es das DIV Logo aus der darkfloorplanstyle.css ist.
<div id="logo" style="top: 20px; font-size: xx-large; text-align: center; font-weight: bold; left: 40px; width: 120px; height: 200px; background-image: none; visibility: visible;">
<div id="clockdigital" style=""><img id="digitalhour" src="/fhem/niceclocks/images/digitalhours.gif" style="transform: rotate(240deg);"><img id="digitalminute" src="/fhem/niceclocks/images/digitalminutes.gif"
style="transform: rotate(198deg);"><img id="digitalsecond" src="/fhem/niceclocks/images/digitalseconds.gif" style="transform: rotate(241deg);">
<div style="opacity: 0.8;"> </div><div style="opacity: 0.8;"> </div></div><div id="ncDate" style="padding-top: 80px; font-size: medium; font-weight: normal;"><p>Mittwoch, </p><p>25. März 2015</p></div></div>
Wenn ich im Firebug height von 200px auf 165px setze ist es in Ordnung.
Das Logo selbst hat aber eine Höhe vonn600px.
Soweit die Theorie.
In der Praxis habe ich nur das Problem das er mir auch anzeigt das die CSS in fhem/css/ liegt.
Den Ordner habe ich aber nicht.
Bei mir liegt die Datei unter fhem/www/pgm2.
Und in dieser ist kein Eintrag zu dem Logo zu finden.
Ich habe den Floorplan auch nur definiert ohne weiteres hinzuzufügen.
Gruß
Sven
Hallo Newby,
die von Dir gezeigten Eigenschaften befinden sich nicht in der Datei floorplan.css sondern in der Datei /opt/fhem/www/niceclocks/fhem_niceclocks.js ab Zeile 250 auf Notepad++ bezogen. Wenn Du dort etwas änderst, hat das nicht nur im Floorplan Auswirkungen, sondern auch in der normalen Web-Oberfläche.
Ich hatte schon mal ein ähnliches Problem. Deshalb mein Tip: eine eigene CSS-Datei anlegen. Siehe hierzu:
http://forum.fhem.de/index.php?topic=28939.0 (http://forum.fhem.de/index.php?topic=28939.0) und in diesem Thread siehe #93 habe ich beschrieben, wie es geht.
Du müsstest bei Dir eintragen:
logo.style.height = "165px";
Du kannst also eine myfloorplan.css anlegen, dort die Änderungen ablegen und sie als attr aufrufen.
Viel Erfolg!
Gruß
Eberhard
Hallo FHEm2005,
also ich habe jetzt mal auf die schnelle in der .js die Änderung vorgenommen.
Jetzt kann der Link fhem in den Floorplänen wieder genutzt werden.
Habe auch sonst keine weiteren Änderungen sehen können. Werde es mal beobachten.
Vielen Dank für die schnelle Hilfe!!
Werde das mit der mystyle.css die Tage mal versuchen.
Gruß
Sven
Als Reply vielleicht etwas spät, aber trotzdem:
Zitat von: Aladin222 am 26 Februar 2015, 03:52:30
@KernSani,
support wäre prima :-)
Ich bin mit einem Mac unterwegs und der Safaribrowser zickt mit der Uhr leider etwas !
Der Aussenkreis und die Minuten & Sekundenstriche sind bei mir ( Safari ) nicht sichtbar :-(
Nutze ich Chrome funktioniert alles bestens ...
Könnte ein MacUser das mal testen ?
Geht bei mir. Mit Safari 7.1.5 unter 10.9.5
(mit Comic-OS kann ich mich noch nicht anfreunden)
Bei mir ging die Uhr zuerst gar nicht, aber das lag letztlich nur an der zu alten FHEM-Version die ich benutzte.
Ansonsten ist die Uhr echt nett und ich wollte mich noch mal für die super Idee und Umsetzung/Anpassung bedanken.
Hmmm, ok, schön das mal zu hören ,dass einwandfrei auch beim mac läuft !
Dann setze ich mich doch auch nochmal dran :-)
.....Danke für Deine Rückmeldung !
Hi,
eine Uhr im Floorplan, stand auch schon immer auf meiner Wunschliste.
Aber irgendwie funktioniert das noch nicht 100%ig.
Wenn ich folgenden Syntax einbaue:
#Floorplans
define Wohnung FLOORPLAN
attr Wohnung userattr niceclocksParam
attr Wohnung CssFiles niceclocks/niceclocks_floorplan.css
attr Wohnung JavaScripts niceclocks/fhem_niceclocks.js
attr Wohnung fp_arrange 1
attr Wohnung fp_noMenu 1
attr Wohnung niceclocksParam { "clockStyle" : "analog","clockCircle" : "white","clockHours" : "white","clockSeconds" : "red", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }
attr Wohnung refresh 1
sind in meinem Floorplan alle Buttons und DropDowns verschwunden.
Aber die Uhr geht ;D
Das liegt irgendwie an dem "fhem_niceclocks.js" File.
Deaktiviere ich das, ist die Uhr weg, aber meine Buttons wieder da. ::)
Gruß
Marcel
Hat keiner eine Idee?
Hallo,
konnte schon jemand dieses Problem lösen?
Zitat von: KernSani am 11 Januar 2015, 00:54:56
Wenn sich FHEM längere Zeit im Hintergrund befindet, kommt die Uhr irgendwie aus dem Tritt. Das passiert auch bei der Original-Uhr auf joncom.be/code/css-clocks/ (http://joncom.be/code/css-clocks/) und ich habe noch keine Lösung dafür gefunden. Ein Refresh (oder click z.B. auf einen anderen Raum) syncht die Uhr wieder - oder man wartet einfach, bis die Uhr im high-speed Tempo die aktuelle Uhrzeit wieder erreicht hat.
Gruß
Tom
Nachtrag:habe die Lösung gefunden!
Gruß
Tom
@Tom, das ist schön !
Aber nützt uns das auch ?
....lässt du uns an Deiner Lösung teilhaben ?
Zitat von: Aladin222 am 09 September 2015, 09:13:04
@Tom, das ist schön !
Aber nützt uns das auch ?
keine Ahnung, wohl nur wenn du die Uhr auch einsetzt :)
Folgende Zeile:
this.aSecond = this.aSecond.slice(1);muss so abgeändert werden:
this.aSecond = this.aSecond.slice(1000);Diese Änderung habe ich an der analogen Uhr durchgeführt (bei mir in der 46. Zeile).
Da ich nur die analoge Uhr einsetze, kann ich nichts dazu sagen wie sich die digitale Uhr verhält, wahrscheinlich muss das gleiche
auch dort geändert werden.
Gruß
Tom
Zitat von: KernSani
Damit sollte die Uhr statt des Logos erscheinen.
Vielen herzlichen Dank.
Gruß
Christian
PS: Wie bekomme ich die Leerzeile zwischen Wochentag und Datum weg?
Zitat von: chr2k am 12 September 2015, 23:42:11
PS: Wie bekomme ich die Leerzeile zwischen Wochentag und Datum weg?
Das würde mich auch interessieren, hat denn keiner eine Idee ? ???
Gruß
Tom
Ich hoffe, Du kennst Dich ein wenig mit HTML aus.
Der Abstand zwischen Wochentag und Datum ist KEINE Leerzeile, sondern der äußere Rand beider Elemente.
Der Wochentag hat einen äußeren Rand oben und unten von je 13px. Das Gleiche ist beim Datum zu finden, das hat auch oben und unten 13px Rand.
Wenn im Element Wochentag der untere Rand und beim Datum der obere Rand auf 0px gesetzt wird ist der Zwischenraum fast auf 0px geschrumpft.
Wie kann der Zwischenraum verändert werden?
Der eindeutige Selektor für den Wochentag lautet: #ncDate > p:nth-child(1)
Der eindeutige Selktor für das Datum lautet: #ncDate > p:nth-child(2)
Diese beiden Selektoren müssen wir in eine CSS-Datei einbinden. Entweder in eine vorhandene (niceclocks.css) oder in eine eigene CSS-Datei. Die vorhandene CSS-Datei kann bei einem Update überschrieben werden. In diesem Thread habe ich beschrieben wie eine eigene CSS-Datei angelegt werden kann: http://forum.fhem.de/index.php/topic,28939.0.html (http://forum.fhem.de/index.php/topic,28939.0.html) .
Einzutragen sind:
für den Wochentag:
#ncDate > p:nth-child(1) {
margin-bottom:0px;
}
für das Datum:
#ncDate > p:nth-child(2){
margin-top:0px;
}
Mit diesen Werten kannst Du dann pixelgenau den Abstand steuern.
Viele Grüße
Eberhard
Gemeinsam schaffen wir das! 8) 8) :D
Hallo Eberhard,
tausend Dank für deine hervorragende Erklärung, habs sofort umgesetzt.
Habe zusätzlich noch bei
ZitatncDate > p:nth-child(1)
margin-top:-10px;eingetragen, so wird der Tag näher zur Uhr gerückt.
Jetzt müsste man nur noch den Freiraum zw. dem Datum und "Save config" weg bekommen dann wäre es optimal (siehe Bild).
Danke nochmals!
Gruß
Tom
Die beiden Elemente Wochentag und Datum sind Bestandteil eines <div>-containers mit der ID "ncDate". Der hat aber die Eigenschaft padding-top 130px.
Mit einer Verkleinerung dieses Wertes erreichst Du zwar das gleiche, Du änderst aber dort, wo es logischerweise (etwas) richtiger ist.
#ncDate {
padding-top: 130px;
}
In #ncDate > p:nth-child(1) können auch die Eigenschaften für Schriftgröße(font-size) und Schriftfarbe (color) des Wochentages geändert werden.
In #ncDate > p:nth-child(2) können auch die Eigenschaften für Schriftgröße(font-size) und Schriftfarbe (color) des Datum geändert werden.
Der eindeutige Selektor für das komplette save-config Feld und seine neuen Eigenschaften sind:
#menu > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) {
position: absolute;
top: -37px !important;
}
Das sind Elemente, die nicht mehr zur Uhr gehören sondern zu FHEM. Deshalb sind diese Styles am besten in eine eigene CSS-Datei abzulegen!
Ich habe das, was oben steht nur ansatzweise überprüft. Den genauen Wert für top musst Du austesten, weil die nachstehenden Elemente automatisch sprunghaft nachrücken. Da ist Spielen angesagt.
Gruß Eberhard
Hallo Eberhard,
wunderbar, jetzt passt es :D
folgenden Code habe ich in "niceclocks.css" hinzugefügt:
#menu > table:nth-child(1) {
position: absolute;
top: 160px !important;
}
Das ganze sieht nun so aus :
(http://img5.fotos-hochladen.net/uploads/201509181110q2ct3gfhnm.png)
Danke für deine Hilfe! :)
Gruß
Tom
Zitat von: FHEm2005 am 17 September 2015, 22:02:33
In diesem Thread habe ich beschrieben wie eine eigene CSS-Datei angelegt werden kann: http://forum.fhem.de/index.php/topic,28939.0.html (http://forum.fhem.de/index.php/topic,28939.0.html) .
Puh, da verstehe ich nur Bahnhof ???
Würde gerne eine separate css Datei nutzen um eben ein eventuelles Update Problem aus dem Weg zu gehen.
Zitat von: chr2k am 21 September 2015, 19:39:45
Würde gerne eine separate css Datei nutzen um eben ein eventuelles Update Problem aus dem Weg zu gehen.
"
niceclocks.css" wird nicht aktualisiert!
Zitat von: Tom111 am 21 September 2015, 21:13:09
"niceclocks.css" wird nicht aktualisiert!
Klasse, danke für diese Aufklärung
Zitat von: FHEm2005 am 17 September 2015, 22:02:33
Einzutragen sind:
für den Wochentag:
#ncDate > p:nth-child(1) {
margin-bottom:0px;
}
für das Datum:
#ncDate > p:nth-child(2){
margin-top:0px;
}
Hm, das hab ich jetzt in die niceclocks.css Datei eingetragen und trotz neustart von FHEM sind die Zeilen nicht zusammengerutscht.
Das Problem ist wohl die Reihenfolge, in der die css-Dateien eingelesen werden.
Ich habe es nachvollzogen. Auch bei mir wird eine Änderung in der niceclocks.css nicht ausgeführt. Keine Ahnung warum. Der Weg über die eigene CSS-Datei hat aber funktioniert.
Vorgehensweise für eine eigene CSS_Datei auf dem Port 8083:
1. Im Grundmenue den Punkt "Edit files" auswählen und dort die Datei style.css auswählen. Nicht verändern sondern oben über den Button "Save es" als myCSS_8083.css speichern. Die Namenskonvention sorgt dafür, dass die eigene CSS-Datei nicht beim Update verändert wird.
2. Im Grundmenue den Punkt "Edit files" noch einmal auswählen und dort die Datei myCSS_8083.css auswählen und darin enthaltene Zeilen löschen und neu editieren. Jetzt können z.B. die o.a. Angaben eingetragen werden. Ob es eine schnellere Möglichkeit gibt die CSS-Datei zu erzeugen weiß ich nicht.
3. Die CSS-Datei muss aber dem System noch bekannt gemacht werden mit einem Eintrag in der Fhem.cfg:
attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css WEB ist die Definition des Zuganges mit Port 8083 (per Default).
Jetzt müsste der ungewünschte Zwischenraum entfernt worden sein.
Da die eigene CSS-Datei zuletzt eingelesen wird, greifen die Änderungen jetzt.
Gruß Eberhard
Danke für die Beschreibung.
Leider zerhackt mir diese Vorgehensweise das Menü komplett, siehe Anhang.
Der Code in der neuen CSS Datei sieht so aus:
@import url("defaultCommon.css");
body { font-size:16px;}
#logo { margin-top:10px; margin-left:20px; width:120px; height:132px;
background-image:url(../images/default/fhemicon.png); }
#menu { margin-top:10px; margin-left:20px; width:140px; }
#hdr { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
#menuScrollArea { width: 175px; left:0px; top:0px; height:100%;
position:fixed; overflow-x:hidden; overflow-y:auto; }
div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
#ncDate > p:nth-child(1) {
margin-bottom:0px;
}
#ncDate > p:nth-child(2){
margin-top:0px;
}
So geht es natülich nicht!
Zitat von: FHEm2005 am 22 September 2015, 13:02:44
2. Im Grundmenue den Punkt "Edit files" noch einmal auswählen und dort die Datei myCSS_8083.css auswählen und darin enthaltene Zeilen löschen und neu editieren. Jetzt können z.B. die o.a. Angaben eingetragen werden. Ob es eine schnellere Möglichkeit gibt die CSS-Datei zu erzeugen weiß ich nicht.
Wenn Du in der Datei myCSS_8093.css bist
aber auch nur dann: Dateiinhalt löschen und dann die Zeilen einfügen. Mewgr ist dann nicht in der Datei. Die kannst Du für spätere Anpassungen wieder benutzen.
Gruß Eberhard
Edit: Dass es bei Dir nicht funktioniert liegt wohl eher an dem Einsatz der digitalen Uhr! Wir haben es bisher hier nur mit der analogen Uhr zu tun gehabt. Dein Wunsch: Datum und Uhrzeit näher an die digitale Uhr heranrücken (noch näher)? Habe ich das richtig verstanden?
Zitat von: FHEm2005 am 22 September 2015, 16:51:51
Wenn Du in der Datei myCSS_8093.css bist aber auch nur dann: Dateiinhalt löschen und dann die Zeilen einfügen.
Oh man, da lese ich deinen Beitrag in einem Moment aufmerksam durch, dann im Alltag eine Ablenkung, ne halbe Stunde später dann aus dem Kopf die Datei neu erstellt und die Daten eingefügt, OHNE den alten Inhalt zu löschen.
Zitat von: FHEm2005 am 22 September 2015, 16:51:51
Edit: Dass es bei Dir nicht funktioniert liegt wohl eher an dem Einsatz der digitalen Uhr! Wir haben es bisher hier nur mit der analogen Uhr zu tun gehabt. Dein Wunsch: Datum und Uhrzeit näher an die digitale Uhr heranrücken (noch näher)? Habe ich das richtig verstanden?
Nein es lag tatsächlich daran dass die kopierte css datei nicht leer war wie du beschrieben hast. Jetzt geht es. Und nein, ich möchte erstmal nicht dass Datum und Uhrzeit näher an die Uhr heran rücken, sondenr ich wollte, dass die "Leerzeile" (die ja keine ist) zwischen Wochentag und Datum verschwinden. Das ist jetzt (nach deiner Anleitung und dem richtigen Umgang mit der neu erstellen css datei so).
Herzlichen Dank.
Gruß
Christian
@chr2k,
gehört zwar nicht zum Thema, aber da ich es grade bei dir sehe, wie hast du das Symbol bei "save config" hinbekommen ?
(http://img5.fotos-hochladen.net/uploads/201509221844v74atb5qzg.png)
Gruß
Tom
Zitat von: Tom111 am 22 September 2015, 18:48:24
wie hast du das Symbol bei "save config" hinbekommen ?
(http://img5.fotos-hochladen.net/uploads/201509221844v74atb5qzg.png)
Hi Tom,
so:
attr WEB roomIcons Save config:edit_save.svg
DANKE! :D
Hallo,
Könnte die Uhr ohne Probleme einbinden.
Allerdings stimmt die Zeit nicht ganz zur systemzeit. Bei mir läuft die Uhr zu ein paar Sekunden zu schnell
Bei 1 Minute so 1 Sekunde.
Kann man die synchronisieren. Müsste doch die Zeit sich selber holen.
An was kann das liegen?
Gruß
Stefan
Hallo.
Wie bewegt man denn die Uhr zum automatischen Datumswechsel um 00 Uhr?
Volker
Hallo zusammen,
wo ist denn nun die aktuelle Version zu finden ?
in Post #1 oder ?
Gruss
Klaus
Hallo zusammen,
vielleicht habe ich etwas überlesen, bei den vielen Beiträgen und Änderungen kein Wunder ;)
Ich möchte noch den Abstand zwischen der Uhr und dem Menü verkleinern. An welcher Stelle ist dies möglich ?
Coole Sache, habe es gerade gesehen und werde die Uhr gleich testen.
Gruß PeMue
Zitat von: raspklaus am 25 Oktober 2015, 09:44:54
Hallo zusammen,
vielleicht habe ich etwas überlesen, bei den vielen Beiträgen und Änderungen kein Wunder ;)
Ich möchte noch den Abstand zwischen der Uhr und dem Menü verkleinern. An welcher Stelle ist dies möglich ?
Hier >> http://forum.fhem.de/index.php/topic,31912.msg334157.html#msg334157
mit den
160px kannst du mal "spielen" !
Zitat von: raspklaus am 23 Oktober 2015, 10:04:29
Hallo zusammen,
wo ist denn nun die aktuelle Version zu finden ?
in Post #1 oder ?
Gruss
Klaus
es gibt keine "aktuelle" Version, du musst dir wohl oder übel den ganzen Thread durchlesen und einiges ausprobieren!
Es sind auch verschiedene Uhren dabei!
Gruß
Tom
Zitat von: Tom111 am 25 Oktober 2015, 17:53:37
Hier >> http://forum.fhem.de/index.php/topic,31912.msg334157.html#msg334157
mit den 160px kannst du mal "spielen" !
Da kann ich eintragen was ich will. Der Abstand bleibt konstant gleich
du musst auch niceclocks.css in der fhem.cfg eintragen!
Beispiel wenn du die niceclocks.css im Ordner www/niceclocks hinterlegt hast!
define WEB FHEMWEB 8083 global
attr WEB CssFiles niceclocks/niceclocks.css
und dann in niceclocks.css am Ende anfügen:
/* Befehls-Table näher zur Uhr schieben */
#menu > table:nth-child(1) {
position: absolute;
top: 160px !important;
}
Gruß
Tom
Ist alles so angelegt:
define WEB FHEMWEB 8083 global
attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts codemirror/fhem_codemirror.js niceclocks/fhem_niceclocks.js
attr WEB codemirrorParam { "theme":"blackboard", "lineNumbers":true }
attr WEB hiddenroom save,Unsorted,Select style,Commandref,Remote doc,CUL_TX,AlarmRoom
attr WEB longpoll 1
attr WEB menuEntries restart,cmd=shutdown+restart,update,cmd=update,updatecheck,cmd=update+check
attr WEB niceclocksParam {"clockStyle" : "analog","keepBg" : false,"fixMenu" : false,"keepHeader" : true }
attr WEB refresh 600
attr WEB roomIcons CUL_HM:cul_868 TV:it_television Plots:time_graph Cubietruck:it_server Alarmraum:secur_alarm Abfall:dustbin FBDECT:message_socket Sicherheit:security KS300:weather_station Kalender:time_calendar FHEM:system_fhem Energie:time_graph Garten:scene_garden Büro:scene_office Eingang:fts_door_open Haus:control_all_on_off Garage:fts_garage Everything:it_i-net Gartenhaus:scene_summerhouse Terasse:scene_terrace Serverraum:it_nas Schlafzimmer:scene_sleeping Wohnzimmer:scene_livingroom Mülltonnenraum:scene_storeroom Keller:scene_storeroom WWW_Router:scene_hall Kinderzimmer:scene_childs_room System:it_nas Weihnacht:christmas_tree Klima:scene_day Sonos:icoSONOS Tanken:tanken1
attr WEB stylesheetPrefix dark
und die CSS:
/* code: css clocks */
#clockanalog {
float: left;
height: 121px;
margin: 0;
overflow: hidden;
position: relative;
width: 121px;
}
#analoghour {
float: left;
height: 121px;
margin: 0;
overflow: hidden;
position: absolute;
width: 121px;
}
#analogsecond {
float: left;
height: 121px;
margin: 0;
overflow: hidden;
position: absolute;
width: 121px;
}
#analogminute{
float: left;
height: 121px;
margin: 0;
overflow: hidden;
position: absolute;
width: 121px;
}
#svg4048 {
width:120px;
height:120px
}
#svg4315 {
width:120px;
height:120px
}
#clockanalog img {
border: 0;
left: 0px;
position: absolute;
top: 0px;
}
/* #clockanalog img { border: 0; left: 9px; position: absolute; top: 9px; }*/
#clockdigital {
background: url("images/digital.gif") no-repeat 162px 99px;
float: right;
height: 58px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 485px;
}
#clockdigital div { background: #444444; height: 17px; position: absolute; width: 485px; }
#clockdigital div:last-child { bottom: 0; }
#clockdigital img {
border: 0;
display: block;
height: 600px;
left: -120px;
margin: 0;
padding: 0;
position: absolute;
top: -270px;
width: 600px;
}
#ncDate > p:nth-child(1) {
margin-bottom:0px;
}
#ncDate > p:nth-child(2){
margin-top:0px;
}
#clockanalog {
background: url("images/analog.png") no-repeat 9px 9px #000;
float: left;
height: 175px;
overflow: hidden;
position: absolute;
width: 120px;
margin-left: -10px;
margin-top: 1px;
box-shadow: 5px 5px 5px #060606;
background-color: #000;
border-radius: 8px;
border-spacing: 0px;
border: 1px solid #CCC;
padding: 9px;
z-index: -1;
#clockanalog img { border: 20; left: 9px; position: absolute; top: 9px; }
#menu > table:nth-child(1) {
position: absolute;
top: 80px !important;
}
#ncDate {
padding-top: 130px;
}
#menu > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) {
position: absolute;
top: 160px !important;
}
aber wie gesagt, es passiert nichts. Aufgebaut habe ich das Ganze auf Threat 1 mit zusätzlichem Rahmen.
hmmm ???
also ich weiß dann auch nicht mehr weiter, bei mir jedenfalls funktioniert das, habs grad nochmal ausprobiert,
wenn ich die 160px verändere wird das Menue auch verschoben.
Ich sehe du benutzt den darkstyle, du kannst ja mal versuchen den Code in darkstyle.css einzufügen.
Zitat von: raspklaus am 25 Oktober 2015, 19:35:31
Da kann ich eintragen was ich will. Der Abstand bleibt konstant gleich
Den Browser mit F5 (oder ähnlichem) aktualisiert? Die cfgs neu eingelesen bzw fhem neu gestartet?
Hallo, sogar einen kompletten reboot gemacht und keine Änderung
@raspklaus,
mir ist grade aufgefallen, wo ist denn dein "Save config"-Feld, scheinbar hast du in der Vergangenheit schon irgendetwas damit
gemacht, ausgeblendet oder entfernt. Vermutlich funktioniert das deshalb nicht.
save config ist im hidden room. Siehe Attribute WEB oben
@raspklaus
Ich hoffe, Du kennst Dich ein wenig mit HTML aus.
Ich vermute, dass das unterhalb der Uhr befindliche Element der Verursacher ist. Wenn Du die Uhr nach unten schieben würdest, passt ja der obere Rand nicht mehr zu den anderen Elementen.
Mit dem Browser Firefox ist schnell herauszufinden, wo der Zwischenraum herkommt. Mit dem Mauszeiger auf dem Zwischenraum gehen - rechte Maustaste - Element untersuchen - klick. Es öffnet sich der 'Inspector'. Dann such' mal dort nach id="menu". Wenn Du dort mit der Maus draufgehst, wird Dir auf der Webseite der Bereich markiert, den die id menu "belegt". Dann kannst Du auch die äußere Umrandung erkennen.
Im Inspector gibt es rechts noch einen Bereich, in dem die Eigenschaften dargestellt werden. Du kannst hier wunderbar spielen, da die Veränderungen nicht gespeichert werden. Nach einem refresh der Seite wird der ursprüngliche Zustand wieder hergestellt.
Gruß
Eberhard
Hallo,
ich habe immer die "schöne Uhr gehabt". Nun steht aber im Log:
3: WEB: unknown attribute niceclocksParam. Type 'attr WEB ?' for a detailed list.
1: configfile: WEB: unknown attribute niceclocksParam. Type 'attr WEB ?' for a detailed list.
attr WEB ?:
WEB: unknown attribute ?, choose one of verbose room group comment alias eventMap userReadings CORS HTTPS CssFiles JavaScripts SVGcache addStateEvent csrfToken alarmTimeout allowedCommands allowfrom basicAuth basicAuthMsg closeConn column defaultRoom editConfig editFileList endPlotNow endPlotToday fwcompress hiddengroup hiddenroom iconPath longpoll longpollSVG menuEntries nameDisplay ploteditor plotfork plotmode plotEmbed plotsize plotWeekStartDay nrAxis redirectCmds refresh reverseLogs roomIcons sortRooms showUsedFiles sslVersion smallscreen smallscreenCommands stylesheetPrefix touchpad webname codemirrorParam clockParam cmdIcon devStateIcon devStateStyle fp_Erdgeschoss group_map icon room_map set set_map sortby structexclude webCmd widgetOverride userattr
Gruß
Hoffi
Hallo Hoffi,
ich bin zwar unbedarft an Technik und Software, aber ein Auszug von der
FHEM.cfg und ein "list WEB" könnten weiter helfen.
Thomas
Hallo Hoffi
bei genauerem Hinsehen ist mir dieser Unterschied aufgefallen
Zitat von: Thoffi1978 am 17 Dezember 2015, 08:34:41
3: WEB: ... niceclocksParam .. list.
1: configfile: ... niceclocksParam ... list.
attr WEB ?:
WEB: unknown attribute ?, ... clockParam ...
wenn ich "attr WEB ?" ausführe kommt der gleiche Text mit dem unterschied "
niceclocksParam"
Thomas
Hallo,
ich habe das erst seit dem gestrigen Update.
Hier die List WEB:
Internals:
CONNECTS 119
DEF 8083 global
FD 6
NAME WEB
NR 5
NTFY_ORDER 50-WEB
PORT 8083
STATE Initialized
TYPE FHEMWEB
Attributes:
CssFiles niceclocks/niceclocks.css
JavaScripts codemirror/fhem_codemirror.js
basicAuth { "$user:$password" eq "Benutzer:Passwort" }
codemirrorParam { "lineWrapping":true }
@Solala0815: was bedeutet das genau für meine Funktion?
Lieben Gruß
Hoffi
Hallo Hoffi,
Zitat von: Thoffi1978 am 18 Dezember 2015, 09:25:25
@Solala0815: was bedeutet das genau für meine Funktion?
Das bedeutet, dass das Script für die Uhr nicht aufgerufen wird. Füge mal zum attr JavaScripts "niceclocks/fhem_niceclocks.js" hinzu. Das bereits Bestehende muss bleiben!
Gruß
Eberhard
Hallo,
oder jemand hat die ".cfg" mit dem Editor bearbeitet und Teile gelöscht.
Zitat von: Solala0815 am 17 Dezember 2015, 10:30:18
aber ein Auszug von der FHEM.cfg und ein "list WEB" könnten weiter helfen
Ein Auszug aus meiner FHEM.CFG
attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "darkgray","clockHours" : "gray","clockSeconds" : "lightgray", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }
Hier der Auszug aus meiner cfg:
define WEB FHEMWEB 8083 global
attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts codemirror/fhem_codemirror.js
attr WEB codemirrorParam { "lineWrapping":true }
define WEBphone FHEMWEB 8084 global
attr WEBphone stylesheetPrefix smallscreen
define WEBtablet FHEMWEB 8085 global
attr WEBtablet JavaScripts pgm2/clock.js
attr WEBtablet stylesheetPrefix touchpadMit dem Editor bearbeite ich die cfg nicht. Ich hab grad keine Ahnung wieso die Uhr weg ist.
ich habe nur folgendes gemacht:
ZitatIst bei Dir die "codemirror" Erweiterung für den DEF-Editor aktiviert?
Wennn nicht, siehe hier:http://forum.fhem.de/index.php/topic,45373.msg371668.html#msg371668
Das kommt aus einem anderen Zusammenhang, hängt aber vielleicht zusammen?
Hoffi
Hallo Hoffi,
und was passiert wenn du die 2 fehlenden Zeilen einfügst?
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "darkgray","clockHours" : "gray","clockSeconds" : "lightgray", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }
Gruß
Thomas
Hallo,
jetzt habe ich wieder eine eine Analoge. Vorher war die Digitale Uhr zu sehen.
Die Zeilen überlappen sich aber nun etwas.
Ein Bild habe ich angefügt.
Hoffi
Zitat von: Thoffi1978 am 19 Dezember 2015, 11:41:39
Hallo,
jetzt habe ich wieder eine eine Analoge. Vorher war die Digitale Uhr zu sehen.
Die Zeilen überlappen sich aber nun etwas.
Ein Bild habe ich angefügt.
Hoffi
ab Antwort 160 in diesem Thread !
http://forum.fhem.de/index.php/topic,31912.msg334007.html#msg334007 (http://forum.fhem.de/index.php/topic,31912.msg334007.html#msg334007)
Hallo Hoffi,
wegen der Zeigerfarbe musst Du wohl nochmal ran..... 8) 8)
Parameter für die Zeigerfarben in dem attr niceclocksParam:
Stundenzeiger: "hourHand":"<Deine Farbe>"
Minutenzeiger: "minuteHand":"<Deine Farbe>"
Sekundenzeiger: "secondHand":"<Deine Farbe>"
(siehe auch #143)
Viele Grüße
Eberhard
Hallo,
der Fehler muss hiermit zusammenhängen:
Ist bei Dir die "codemirror" Erweiterung für den DEF-Editor aktiviert?
Wennn nicht, siehe hier:http://forum.fhem.de/index.php/topic,45373.msg371668.html#msg371668 Nachdem ich die zwei fehlenden Zeilen hinzugefügt habe,
Zitatund was passiert wenn du die 2 fehlenden Zeilen einfügst?
Code: [Auswählen]
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "darkgray","clockHours" : "gray","clockSeconds" : "lightgray", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }
Gruß
Thomas
war die Editorfunktion weg.
Dann habe ich wie oben im Link beschreiben die Editorfunktion wieder eingefügt und schwupps... Nun fehlt die Uhr.
Hoffi
In einer Zeile muss stehen:
attr WEB JavaScripts niceclocks/fhem_niceclocks.js codemirror/fhem_codemirror.js
Tut es das?
Gruß Eberhard
hier: https://forum.fhem.de/index.php/topic,53286.msg449780.html#msg449780 (https://forum.fhem.de/index.php/topic,53286.msg449780.html#msg449780) ist noch ein variante beschrieben wie man eine uhr einbinden kann.
gruss
andre
Beitrag melden heisst, dass die Forum-Admins eine Meldung kriegen. Die koennen und werden kein Support leisten. Ich zitiere aber die Nachricht, damit sie nicht verlorengeht:
ZitatEs gibt seit einigen Tagen Probleme mit der Uhr; wahrscheinliche Ursache ist wohl, dass jetzt Javascriptfehler in einem Dialogfenster angezeigt werden (siehe auch meinen Thred:"Problem mit 'niceclock'".Es wäre sicher gut, sich der Sache anzunehmen; Danke
kann leider den genannten Thread nicht finden... und bei mir tut die Uhr seit Jahr und Tag anstandslos... Vielleicht kann sich ja der "Melder" hier melden?
Es gibt 2 Threads:
https://forum.fhem.de/index.php/topic,65182.0.html
https://forum.fhem.de/index.php/topic,64788.0.html
Ich hab in meinen Floorplänen auch das Problem
Ich bin einer der Melder.
Die Links im Beitrag weiter oben sagen doch schon alles aus.
Ich habe Probleme mit der Anzeige im Floorplan. In fhem Web funktioniert die Uhr bei mir auch.
Es wird im Floorplan eine Abfrage auf das Menü gemacht. Da knallt es nun natürlich, weil es keine Menüleiste im Floorplan gibt.
Ich habe die Zeile auskommentiert und die Schrift für Datum und Zeit verkleinert. Nun geht erst einmal alles wieder. Reicht mir also bis zur Lösung.
Hallo,
bei mir kommt beim Versuch auf den Seiten zu scrollen z.B. bei http://xxx.xxx.xxx.xxx:8083/fhem?room=all
fhem_niceclocks.js line 64:
TypeError:document.getElementByld(...) is null
anfangs funktioniert die Uhr aber einwandfrei
Kurz vor dem Fehler wechselt die Uhr auf digital
Weiss jemand an was das liegen kann ?
Ohje, meine Jugendsünden holen mich ein... Ist dein FHEM aktuell? Laufen da noch irgendwelche anderen Skripte?
Zitat von: KernSani am 09 Januar 2018, 19:16:58
Ohje, meine Jugendsünden holen mich ein...
Das sind doch keine Jugendsünden!!
Bei mir läuft die Uhr von Anfang an beschwerdefrei durch und ist das einzige Gerät welches mir zeigt, was die Stunde gelagen hat bzw. wie lange ich schon vor dem Rechner sitze.
Gruß Eberhard
Weiss jemand wie man die Uhr so einstellt, dass diese immer die 'home' Zeitzone anzeigt?
Ich bin viel im Ausland, und bekomme immer die lokale Zeit (also z.B. USA) angezeigt, was mich immer irritiert,
denn wenn ich das VPN nach zuhause aufmache, wuerde ich gerne in FHEM die lokale deutsche Zeit sehen.
Die Uhr Zeigt die Clientzeit dort müsstest Du die Zeit umstellen.
@inoma
Die Uhr benutzt die eingestellte Sytemzeit des Rechners auf dem FHEM läuft und lasst sich deshalb m.E. nicht so einfach in Deinem Sinne umstellen.
@kern Sani,
das wäre doch eine Idee für ein neues Feature bei den Parametern: timezone! Dann kannn jeder seine gewünschte Zeit einstellen wie er mag. Für mich eine gute Idee.
Was hältst Du davon? Wird Zeit Deine "Jugendsünde" aufzupeppen. 8) 8) 8)
Gruß Eberhard
Es gibt eine Möglichkeit die Uhr um die gewünschte Stundenzahl zu verändern. Dazu muss aber leider in die Datei fhem_niceclocks.js eingegriffen werden. Die Datei liegt im Verzeichnis /opt/fhem/www/niceclocks
Gleich am Anfang ist die fett markierte Zeile einzufügen:
var niceclocksReady = false;
var timezone = 0, /* hier den Korrekturwert der Stunden eingeben pos oder neg (z.B. -6), default "0"*/
In der Funktion fGetHour wird der Winkel des Stundenzeigers berechnet. Den "verbiegen" wir um den timezone-wert vorwärts oder rückwärts. Die Änderungen sind fett.
fGetHour: function() {
var iHours = this.dtDate.getHours()+timezone;
if (iHours > 11) {
iHours -= 12;
}
return Math.round((iHours * 30) + (this.dtDate.getMinutes() / 2) + (this.dtDate.getSeconds() / 120));
},
Ich gebe zu, es wäre schön, den Wert als Parameter übergeben zu können, aber dazu reichen meine Programmierkenntnisse nicht aus.
Hinweis: Dies funktioniert nur für die Zeitzonen, die eine Abweichung von vollen Stunden haben und keine Minutenveränderungen (wie z.B. Neufundland UTC - 3:30).
Viele Grüße
Eberhard
Ich schau mir das die Tage mal an, wollte ja sowieso wegen des neuen Styles mal ran.
Ich wollte nur mal anmerken, das die Jugendsünde auch bei mir im Einsatz ist und ich die voll gut finde. ;D
Zitat von: KernSani am 16 Januar 2018, 13:28:25
...... wollte ja sowieso wegen des neuen Styles mal ran.
Was ist denn dan angedacht? Ich wüsste adhoc nicht was da besser zu machen ist. Vielleicht ist es sinnvoll für die Uhr ein Modul zu bauen. Dann könnten mehrere Uhren mit unterschiedlichen Darstellungen eingesetzt werden. Viele Menschen haben im Ausland Kontakte und hätten vieleicht gerne eine zweite Uhr auf dem Display mit der Uhrzeit der/des Liebsten. Inoma hat mich eigentlich auf den Gedanken gebracht. Die momentan verfügbaren Features können dann übersichtlich in Attribute verpackt werden.
Gruß Eberhard
Zitat von: FHEm2005 am 16 Januar 2018, 14:16:26
Was ist denn dan angedacht? Ich wüsste adhoc nicht was da besser zu machen ist.
Die Uhr mag nicht mit dem neuen Style den Rudi kürzlich gebaut hat - an der Uhr selbst möchte ich nichts ändern
Zitat
Vielleicht ist es sinnvoll für die Uhr ein Modul zu bauen. Dann könnten mehrere Uhren mit unterschiedlichen Darstellungen eingesetzt werden. Viele Menschen haben im Ausland Kontakte und hätten vieleicht gerne eine zweite Uhr auf dem Display mit der Uhrzeit der/des Liebsten. Inoma hat mich eigentlich auf den Gedanken gebracht. Die momentan verfügbaren Features können dann übersichtlich in Attribute verpackt werden.
Wäre auch eine Idee... Ich denke mal drüber nach...
Zitat von: FHEm2005 am 16 Januar 2018, 08:39:46
@inoma
Die Uhr benutzt die eingestellte Sytemzeit des Rechners auf dem FHEM läuft und lasst sich deshalb m.E. nicht so einfach in Deinem Sinne umstellen.
@kern Sani,
das wäre doch eine Idee für ein neues Feature bei den Parametern: timezone! Dann kannn jeder seine gewünschte Zeit einstellen wie er mag. Für mich eine gute Idee.
Was hältst Du davon? Wird Zeit Deine "Jugendsünde" aufzupeppen. 8) 8) 8)
Gruß Eberhard
Hier:
ZitatDie Uhr benutzt die eingestellte Sytemzeit des Rechners auf dem FHEM läuft
@FHEm2005: Über diese Antwort solltest Du noch einmal nachdenken, denn warum sieht @inoma die Zeit des Aufenthaltsortes (in USA) und nicht die Zeit des FHEM-Serverstandortes?
@ Ellert:
Wenn die fhem_niceclocks.js auf einem System in DE this.dtDate.getHours(); aufruft bekommt das Programm doch eine lokale Uhrzeit (deutsche Zeit) zurück. Das bedeutet Inoma dürfte keine US-Zeit sondern DE zeit sehen.
Jetzt frage ich mich wirklich, warum er denn US-Zeit sieht? Er könnte nur dann die US-Zeit sehen, wenn der Rechner in US die js-Datei aus DE holt und in US ausführt.
Klare Aussage (nach Überlegen) : Ich habe nicht wirklich Ahnung von den Prozessen, die dort ablaufen.
Nach einigem Lesen vermute ich die Lösung zu haben: niceclocks ist eine Javascript-Datei, die in html eingebettet wird und mit der Seite nach US übertragen wird, kein java-Programm. Damit ruft natürlich die Datei niceclocks nichts in DE auf, sondern stellt sich nur zur Übermittlung via HTML bereit. Dort ruft this.dtDate.getHours();, natürlich in der HTML-Seite eingebettet, dann die US-Zeit auf.
Mein Fehler lag darin, dass ich nicht wusste, dass es eine Javascript- Datei ist; ich dachte es sei ein im DE-Rechner laufendes Jave Programm.
Sollte ich immer noch völlig daneben liegen, bitte ich um Aufklärung, ansonsten Danke für den Denkanstoß.
Viele Grüße
Eberhard
... wieder was gelernt.
Ich habe die Uhr nun ein wenig angepasst, so dass sie auch mit dem neuen f18 style funktioniert. Sinn macht die Uhr dann aus meiner Sicht nur, wenn das Menu angepinnt ist, ansonsten wird das Layout-technisch sehr bedenklich d.h. bei nicht angepinntem Menu (und mobile view) von f18 wird die Uhr aktuell nicht angezeigt - vielleicht fällt mir ja noch was ein.
Das timezone-Thema bedeutet etwas größeren Aufwand, da brauche ich mal eine lange Nacht...
Die neue Version ist am ersten Post angehängt. Bei der Gelegenheit habe ich mal die Doku angepasst... da waren eine ganze Menge Parameter (wie man die Farben der einzelnen Elemente einstellt etc...) gar nicht erwähnt...
Ich benutze die PTB Uhr aus dem link https://forum.fhem.de/index.php/topic,53286.0.html, und ich habe jetzt dank dem Hinweis von FHEm2005 in der Datei '/opt/fhem/www/pgm2/station-clock.js' die Variable 'this.houroffset' geaendert, also this.hourOffset = 8;
Ich bin gerade in Arizona und damit passte es jetzt, wenn ich mich mit VPN in mein Heimnetzt einlogge, sehe ich jetzt die lokale Zeit in Deutschland so wie ich es haben wollte.
Dank an alle.
Mit Style f18 wird die Uhr nicht mehr angezeigt. Den Austausch der Dateien habe ich naürlich vorgenommen.
Im Floorplan ebenfalls keine Anzeige.
Funktioniert das nochbei jemandem mit f18?
Mist. Anhang vergessen.
Zitat von: Invers am 04 Februar 2018, 17:42:48
Mit Style f18 wird die Uhr nicht mehr angezeigt. Den Austausch der Dateien habe ich naürlich vorgenommen.
Im Floorplan ebenfalls keine Anzeige.
Funktioniert das nochbei jemandem mit f18?
Hmm... das ist komisch. Bei mir läuft es mit f18... hab's gerade nochmal getestet... bekommst du irgendwelche Javascript-Fehler in der Console?
Danke für die schnelle Rückmeldung.
Ich bekomme keinerlei Fehlermeldungen. Ich habe damals die Fehlermeldungen abgeschaltet.
Jetzt ist wieder alles aktiv.
Fehlermeldung: hem_niceclocks.js line 372:
TypeError: data.documentElement is undefined
Ich habe mehrere Browsermit dem selben Ergebnis probiert. Nur die Schrift (Datum) wird bei Chrome am besten angezeigt.
EDIT:
Da kommen noch mehr. Line 334,372,351,319
Zitat von: Invers am 04 Februar 2018, 19:13:45
Fehlermeldung: hem_niceclocks.js line 372:
TypeError: data.documentElement is undefined
EDIT:
Da kommen noch mehr. Line 334,372,351,319
Das sind genau die Zeilen, wo die Zeiger aufgebaut werden. Sind die SVGs denn im richtigen Pfad (und haben die richtige Berechtigung)? also z.B. hier:
/niceclocks/images/svg_analog.svg
Funktioniert die Uhr in anderen Styles noch?
Also die Berechtigungen stimmen. Habe vorsichtshalber mal auf 777 gesetzt. Benutzer und Gruppe und Pfad stimmen auch.
Die Uhr funktioniert mit keinem Style.
Vorher war ich früher wieder auf die alte Datei und meinen eigenen Style zurückgegangen, da mit dem neuen Style die Uhr nicht im Floorplan angezeigt wurde. Deine neue Version hatte ich heute nach langer Zeit wieder eingebaut.
Ich habe die Datei aus dem 1. Post geladen. Da sind aber gar keine svg drinnen. Habe ich nochmal runtergeladen, nicht drinnen! Kannst du mal das Archiv kontrollieren? Oh Mann, ich hoffe, ich irre mich nicht. Sonst stehe ich da, wie ein Trottel. :-)
Zitat von: Invers am 04 Februar 2018, 22:26:49
Ich habe die Datei aus dem 1. Post geladen. Da sind aber gar keine svg drinnen. Habe ich nochmal runtergeladen, nicht drinnen! Kannst du mal das Archiv kontrollieren? Oh Mann, ich hoffe, ich irre mich nicht. Sonst stehe ich da, wie ein Trottel. :-)
Tatsache, da sind keine SVGs drinnen... Was ist denn da passiert? Aber in /opt/fhem/www/niceclocks/images hast du die SVGs, oder?
Habe gerade das ZIP im ersten Post aktualisiert - jetzt mit SVGs
Nein, in der neuen Uhr natürlich nicht. In der alten Uhr natürlich schon. Ich hatte aber das alte Verzeichnis nur umbenannt und das neue reinkopiert. Erst einmal danke, ich lade runter und teste.
So, funktioniert fast perfekt.
Die oben gezeigte Schriftanzeige geht noch nicht, auch nicht im Floorplan. Die Schrift ist einfach zu gross.
Beim f18 wird die Eingabezeile oben nach rechts aus dem Browserfenster geschoben. Das verursacht waagerechten Scrollbalken.
Ich habe mehrere FP. Im ersten Floorplan geht die Uhr, in den beiden anderen FPs leider nicht. Wird nicht angezeigt. Das kann ich mir nicht erklären, da alle FPs die selbe CSS verwenden. Ich kann aber nicht sagen, ob es an der Uhr oder am f18 liegt, wobei ich mit der alten Uhrdatei keine Probleme bei der FP-Darstellung hatte.
Hast du da noch eine Idee? Vielleicht könnte man die Schrift leicht verkleinern. Die Zeilenabstände sind auch zu gross.
Ich glaube, ich hatte damals die Datei per Hand selber angepasst. Kann ich im Notfall auch wieder machen.
Kannst du dir das Verhalten bei mehreren FP erklären?
EDIT:
Nachtrag: Die falsche Anzeige von Datum und Uhrzeit betrifft nur den Firefox. In Chrome und Edge ist die Anzeige korrekt, auch im Floorplan.
Der Fehler im Floorplan, dass in einigen gar keine Uhr angezeigt wird, ist in allen Browsern.
Falls du Screenshots benötigst, bitte melden.
Ich habe in der Rubrik f18 nachgefragt, scheint, als läge da die Ursache. Ist vorerst nicht zu beseitigen.
Danke dir für die Hilfe.
Hab mir das gerade mal durchgelesen... Mit der Breite der Eingabezeile kann ich vielleicht was machen, muss ich mir mal in Ruhe anschauen.
Wegen der Schriftgröße bei Datum und Uhrzeit: Da habe ich (glaube ich) nix festgelegt, das ganze ist aber in einem div mit id=ncDate, damit sollte es sich recht leicht über ein eigenes CSS anpassen lassen.
Grüße,
Oli
ncDate hatte ich bereits früher ohne Erfolg probiert. Reagiert nicht. Ich hatte dann in der JS-Datei (glaube ich) geändert.
Da es aber nicht alle Browser, sondern nur den FF betrifft, müsste da was spezifisches gemacht werden. Mit diesen Browserspezifischen Programmierungen kenne ich mich aber nicht aus.
Ich werde noch einmal mit ncDate probieren, oder halt hart codieren.
Ich danke dir sehr.
EDIT:
ncDate geht doch im Flurplan, aber natürlich nicht im f18. Logisch. Ich formatiere das Datum wieder in der Datei um.
Ich habe nun in der Datei fhem_niceclocks.js aus den 2 Absätzen einen Absatz mit Zeilenumbruch br gemacht und die Monatsnamen abgekürzt. nun passt alles.
Das Problem des Nichtanzeigens im Floorplan konnte ich ebenfalls lösen (durch Zufall und Einkreisen).
Das Problem lag eindeutig nicht in niceclocks!
Bleibt nur noch das Problem mit dem Einrücken der Eingabezeile in fhem-Oberfläche.
Falls du die angepasste Datei übernehmen möchtest, ist sie hie im Anhang nebst Bild.
Vielen Dank für die Hilfe.
Probier bitte mal die angehängte Version aus. Ich habe deine Anpassungen nicht übernommen, sondern:
* mir noch ein bisschen coding von Rudi geklaut und angepasst um die Kommandozeile auf Seitenbreite zu kürzen
* hart codierte Styleanpassungen von ncDate rausgenommen und in der css Datei mit aufgenommen. Damit solltest du Datumsdarstellung (abgesehen von den gekürzten Monatsnamen) deinen Vorstellungen anpassen können.
Grüße,
Oli
EDIT: Hab die Version hier weg genommen und an den ersten Eintrag gehängt
PERFEKT! Läufdt 1A. Mit der Eingabezeile ist nun alles super.
Cool, dass du dich so toll um mein Problem gekümmert hast.
Vielen Dank!!!
Zitat von: Invers am 06 Februar 2018, 22:42:11
PERFEKT! Läufdt 1A. Mit der Eingabezeile ist nun alles super.
Cool, dass du dich so toll um mein Problem gekümmert hast.
Vielen Dank!!!
Danke für's schnelle Testen. Hab's an den ersten Post gehängt.
hallo wollte in fhem eine Uhr statt dem Logo oben Links,
bin nach wiki vorgegangen aber beim neu laden der fhem seite bekomme ich immer die meldung in einem POPUP:
svg.js line 421:
Uncaught ReferenceError: d is not defined
Und eine UHR wird nicht angezeigt
Hallo Tüftler,
bei der Uhr aus dem genannten Wiki handelt es sich NICHT um die Uhr, um die es in diesem Thread geht. Ich habe mir das Wiki mal angesehen. Ich habe es auch nicht geschafft die Uhr anzuzeigen. Deine Fehlermeldung mekert die erste Zeile der Funktionsdeklaration an. Die Variable d wird verwendet aber in dieser Funktiondeklaration nicht initialisiert. Setze mal ein 'var' dem Buchstaben d voraus, also : var d = new Date(); Ich kenne zu wenig von JavaSript, das bedeutet, dass ich völlig daneben liege.
Mein Tipp: Sieh Dir der ersten Beitrag aus diesem Thread an und installiere die Uhr aus diesem. Da kannst Du die Farben der Skala nach Belieben einstellen.
Gruß Eberhard
Die Uhr us dem ersten beitrag hier habe ich auch eingerichtet, bzw die zip datei nach fhem/www/ entpackt und in der Web instanz die attribute der definitionen gesetzt. leider blieb auch hier die anzeige der Uhr aus,
nach einem Update von FHEM funktioniert jetzt zumindest die Uhr aus dem Wiki.
so auch diese Uhr aus dem Beitrag läuft, ich mußte die rechte auf 0755 setzen damit FHEM damit arbeiten konnte, naja egal hauptsache es läuft
@KernSani
Hi, ich mal wieder:
Seitdem du die Dateien geändert hast, läuft die Uhr ja bei mir perfekt. Hin und wieder gibt es ein Problem mit dem Style, wenn man das Tab dreht, aber damit kann ich leben. Nochmals danke für deine Mühe.
Nun allerdings habe ich festgestellt, dass keine Slider mehr im Floorplan angezeigt werden. Ist doof, weil meine HUE dann nicht steuerbar sind. Der Fehler betrifft alle Slider und Color-Geräte.
Meine lange Suche hat nun ergeben, dass alles wieder funktioniert, wenn ich die Uhr aus dem Floorplan entferne. Das Löschen der Attribute meine ich damit.
Kannst du nochmal bitte deiner Jugendsünde gelegentlich diesbezüglich etwas Aufmerksamkeit entgegenbringen? :-)
Ich würde nur sehr ungern auf die Uhr verzichten, brauche aber zwingend Slider und Farbauswahl.
Danke im Voraus und lass dir Zeit.
Um immer die lokale Uhrzeit vom FHEM System in der Bahnhofsuhr zu bekommen (siehe Antwort #212 hier im Thread), muss man in der station-clock.js folgende Zeilen mit "UTC" erweitern. Ansonsten bekommt man im Ausland die aktuelle Zeitzone angezeigt.
Vorher:
// get current time
var time = new Date();
var millis = time.getMilliseconds() / 1000.0;
var seconds = time.getSeconds();
var minutes = time.getMinutes();
var hours = time.getHours() + this.hourOffset;
Nachher:
// get current time
var time = new Date();
var millis = time.getUTCMilliseconds() / 1000.0;
var seconds = time.getUTCSeconds();
var minutes = time.getUTCMinutes();
var hours = time.getUTCHours() + this.hourOffset;
Ich würde die Uhr gerne inbinden, das ZIP ist auch nach /opt/fhem/www/niceclocks/ entpackt worden.
Sobald ich die zweite Zeile eingebe, verschwindet meine Befehls Zeile in fhem und ich kann die letzte nicht eingeben.
Woran kann das liegen?
Hi Christian,
Die Uhr ist eine Jugendsünde von mir ;-) Welchen Style verwendest du denn?
Grüße,
Oli
Kurz, weil mobil
Hallo,
ich hab mir jetzt auch mal die Uhr eingebaut!
Super Sache!!!
Nur ich hatte davor
JavaScripts
codemirror/fhem_codemirror.js
Dann konnte ich der Definition der Device im Code schön die Klammern sehen, die Zusammen gehörten, Variablen waren in einer anderen Farbe etc.
Das möchte ich nicht missen, allerdings auch die Uhr nicht, gibt es da eine Lösung?
LG
Marlen
Einfach beide Werte eintragen; durch ein Leerzeichen getrennt.
Gesendet von meinem VOG-L29 mit Tapatalk
Super, danke! :-*
Zitat von: KernSani am 07 Februar 2020, 22:01:36
Hi Christian,
Die Uhr ist eine Jugendsünde von mir ;-) Welchen Style verwendest du denn?
Grüße,
Oli
Kurz, weil mobil
Schon den Darkstyle
Zitat von: Christian72D am 10 Februar 2020, 19:13:06
Schon den Darkstyle
Ok, habe mir das nochmal angesehen (ist lange her). Pflege mal den dritten Parameter (niceClockParams) in deinem WEB device über die Attribute (oder über raw input), dann sollte die Kommandozeile wieder erscheinen.
Edit: Wichtig ist, dass "keepHeader":true ist, also für den Anfang das Beispiel aus dem ersten Post übernehmen.
HI!
Ich habe ein komplett neues fhem aufgesetzt und versuche die Uhr zum erscheinen zu bringen...
Irgendwie bekomme ich es nicht hin... sie erscheint einfach nicht. Funktioniert das nicht mehr? Bin genau nach der Anleitung im ersten Post gegangen....
Hat jemand eine Idee?
Hallo misux
Ich habe Gestern zufällig auch die Uhr in mein fhem eingefügt. Nach ein zwei Hürden hat es aber funktioniert.
Ich bin bei punkt 1. der Anleitung schon auf´s Glatteis geratten.
Zitat von: KernSani am 11 Januar 2015, 00:54:56
Angehängtes ZIP file entpacken und das komplette Verzeichnis "niceclocks" in das FHEM www-Verzeichnis legen (typischerweise /opt/fhem/www
Danach hatte ich dann drei neue Dateien in dem Verzeichnis /opt/fhem/www .
Aber das passte ja nicht mit den nächsten Schritten.
Zitat von: KernSani am 11 Januar 2015, 00:54:56
attr <FHEMWEB-Device> CssFiles niceclocks/niceclocks.css
attr <FHEMWEB-Device> JavaScripts niceclocks/fhem_niceclocks.js
Da ist ja zu erkennen das die .css und .js dateien in einem Verzeichnis namens niceclocks zu finden ist.
Also habe ich im pfad /opt/fhem/www ein Verzeichnis Namens niceclocks manuell angelegt und die drei
Dateien aus dem zip dahin verschoben.
Jetzt war schonmal das Datum zu sehen.
Nachdem ich noch die niceclocksParam angepassen habe, damit ich die Uhr sehen konnte, denn default ist white für die Farbe der Uhr.
Mein style den ich nutze ist default.
hier ein auszug aus meinem fhemWEB device kopiert aus raw.
attr WEB niceclocksParam {\
"clockStyle" : "analog",\
"keepBg" : false,\
"fixMenu" : false,\
"keepHeader" : true,\
"clockCircle" : "black",\
"clockHours" : "black",\
"clockSeconds" : "black",\
"minuteHand" : "black",\
"hourHand" : "black",\
"secondHand" : "black"\
}
jetzt hatte ich eine wirklich schöne Uhr statt dem fhem Logo in meinen fhem.
Vielen dank auch noch an KernSani für diese tolle Arbeit.
Viele Grüsse
Stephan
OKAY! Vielen Dank für die erläuterung! Werde es dann heute abend nochmal versuchen.
Schön wäre es gewesen wenn das in der Installationsanleitung stehen würde im esten post.. ::)
HI!
Vielen Dank! Es hat funktioniert!
Aber kann man die Sekunden in der Digitalen Uhr ausblenden? Denn die braucht nun wirklich niemand...
Vielen Dank!
versuch es mit einer anderen Farbe für den Sekundenzeiger.
Ich habe bei mir
secondHand:"white", Farbe des Sekundenzeiger
Gruß
Stephan
Sorry voll überlesen Du hast ja die Digitale Version.