WordClock – basierend auf raspberry – Installation
Update 2017: die aktuelle Version liegt hier: https://github.com/Snapstromegon/wordclock
Step 1) Browser erzeugen & installieren
Die Wordclock benötigt einen browser, der webkit unterstützt
Chromium frisst zu viele Resourcen und Midori hat nicht das geboten, was ich wollte.
Es gibt einen einfachen Browser: kiosk-browser von Peter Schultz auf github.
cd
nano browser.c
[codesyntax lang=”c”]
#include "stdio.h" #include "signal.h" #include "gtk/gtk.h" #include "gdk/gdkkeysyms.h" #include "webkit/webkit.h" gboolean on_key_press(GtkWidget*, GdkEventKey*, gpointer); void reload_browser(int); void toggle_fullscreen(int); void maximize(); void unmaximize(); static WebKitWebView* web_view; static GtkWidget *window; gchar* default_url = "https://www.google.de"; int main(int argc, char** argv) { gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size(GTK_WINDOW(window), 1280, 1024); gtk_window_set_position(GTK_WINDOW(window),GTK_WIN_POS_CENTER_ALWAYS); g_signal_connect(window, "key-press-event", G_CALLBACK(on_key_press), NULL); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); web_view = WEBKIT_WEB_VIEW(webkit_web_view_new()); signal(SIGHUP, reload_browser); signal(SIGUSR1, toggle_fullscreen); gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(web_view)); if(argc > 1) { webkit_web_view_load_uri(web_view, argv[1]); } else { webkit_web_view_load_uri(web_view, default_url); } maximize(); gtk_widget_show_all(window); gtk_main(); return 0; } gboolean on_key_press(GtkWidget* window, GdkEventKey* key, gpointer userdata) { if(key->type == GDK_KEY_PRESS && key->keyval == GDK_F5) { reload_browser(0); } else if(key->type == GDK_KEY_PRESS && key->keyval == GDK_F11) { toggle_fullscreen(0); } return FALSE; } void reload_browser(int signum) { webkit_web_view_reload_bypass_cache(web_view); } void toggle_fullscreen(int signum) { if(gtk_window_get_decorated(GTK_WINDOW(window))) { maximize(); } else { unmaximize(); } } void maximize() { gtk_window_maximize(GTK_WINDOW(window)); gtk_window_fullscreen(GTK_WINDOW(window)); gtk_window_set_decorated(GTK_WINDOW(window), FALSE); } void unmaximize() { gtk_window_unmaximize(GTK_WINDOW(window)); gtk_window_unfullscreen(GTK_WINDOW(window)); gtk_window_set_decorated(GTK_WINDOW(window), TRUE); gtk_window_resize(GTK_WINDOW(window), 1280, 768); } [/codesyntax] <code>gcc -o browser browser.c $(pkg-config --libs --cflags gtk+-2.0 webkit-1.0) sudo cp browser /usr/local/bin</code>
Step 2) Setup & install xorg adn nodm; Siehe auch Anleitung von nexxylove befolgt.
sudo apt-get dist-upgrade
sudo apt-get install xorg nodm
Step 3) Create your kiosk user, add it to any relevant groups (www-data?).
passwd kiosk
cd /home
sudo mkdir kiosk
sudo chown kiosk kiosk
Step 5) Log in as your kiosk user.
Step 6) Create ~/.xsession, add the following;
/usr/local/bin/browser file:///var/www/clock.html
Step 7) Edit sudo /etc/default/nodm
NODM_USER=kiosk;
NODM_X_OPTIONS='-nolisten tcp -s 0 dpms'
Step 6) Edit sudo nano /etc/X11/default-display-manager
Dann wird noch in /etc/X11/default-display-manager statt /usr/sbin/lightdm einfach /usr/sbin/nodm eingetragen
Step 8) Auto login
Disable the getty program.
Navigate to the following line in inittab
And add a # at the beginning of the line to comment it out
Add the following line just below the commented line
Step 9) create clock.html file in /var/www/ and set permissions
Sehr geehrter Herr Hoeser,
ich habe die Anleitung befolgt und habe nun ein Problem bei meinem FullHD TV, dass nicht der komplette Bildschirm ausgefüllt ist.
Das normale Raspbian Windows ist Fullscreen, aber ich vermute dass ich in der clock.html Datei etwas ändern muss, um den FullHD 40 Zoll Bilschirm auszufüllen. Können sie mir sagen, welche Pixelanzahl hier geändert werden muss?
Vielen Dank
Maximilian
Hallo Maximilian,
Es gibt zwei Stellschrauben, um die Darstellung anzupassen:
– Konfigurationsdatei /boot/config.txt
– HTML-Datei
Ich musste auch einmal die Darstellung anpassen: siehe hier
http://www.forum-raspberrypi.de/Thread-projekt-wordclock-software-basiert-im-kiosk-modus
Also zuerst in der Datei /boot/config.txt die Parameter für die Video-Ausgabe einstellen siehe auch http://elinux.org/RPiconfig.
Bzgl. overscan gibt es folgenden Beitrag: http://www.opentechguides.com/how-to/article/raspberry-pi/28/raspi-display-setting.html
Danach in der HTML Datei spielen – Die passenden Parameter habe ich nicht zur Hand. Damals habe ich durch ausprobieren die eingestellt.
Folgender HTML-Code ist nicht komplett, zeigt aber die Stellen, die angepasst werden müssen:
33% {
color:#030;
}
66% {
color:#003;
}
100% {
color:#300;
}
}
*{
margin:0px;
padding:0px;
}
html{
/* background color (not the text box) */
background-color:#000;
/* upper distance of text box */
padding-top:7%; /* adjust for screen size */
padding-left:7%; /* adjust for screen size */
}
body{
width:80%;
height:80%;
}
span{
display: inline-block;
height:60px; /* adjust for screen size */
/* width:50px; */
width:6.9%; /* adjust for screen size */
font-size:50px; /* adjust for screen size */
font-family:Verdana,Arial;
line-height:40px; /* adjust for screen size */
borderolid 0px;
text-align:center;
text-shadow:0px 0px 0px #000;
transition:color 5s ,text-shadow 5s;
color:#200;
/*-webkit-animation-name: farbspiel;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;*/
}
#main{
background-color:rgba(0,0,0,1);
width:1024px; /* adjust for screen size */
margin:auto;
padding:5px; /* adjust for screen size */
overflow:hidden;
}
.bright{
color:#fff;
text-shadow:0px 0px 20px #faa;
}
#seconds{
width:3px;
height:560px;
position:relative;
bottom:0px;
left:0px;
margin:-30px;
float:left;
background-color:#fff;
transition:bottom 1s;
}
#minutes{
width:3px;
height:560px;
position:relative;
bottom:0px;
right:0px;
margin:-30px;
float:right;
background-color:#fff;
transition:bottom 1s;
}
#letters{
margin:auto;
width:1000;
/*border:2px solid #fff; */
}
Gruss,
Thomas
Servus Thomas,
ein cooles Projekt zum einfachen Nachbau. Die Idee mit dem Raspi und dem alten Monitor fand ich sehr anregend und es läuft nun schon seit ein paar Tagen wunderbar.
Allerdings sind in meiner Umgebung ein paar Unschärfen aufgetaucht die ich hier notieren wollte:
– Die Webseite zeigt bei mir bei den letzten 5 Minuten vor der halben Stunde die falsche Stunde an. Hier habe ich eine kleine Anpassung bei der Bestimmung der Stunde vorgenommen:
[codesyntax lang=”text”]
< if(now.getMinutes()<30){ --- > if(now.getMinutes()<25){
[/codesyntax]
- Beim Debuggen bin ich dann über diesen CSS-Typo gestolpert:
[codesyntax lang="text"]
97c99
< width:1000; --- > width:1000px;
[/codesyntax]
– Ebenso hat der FireBug noch das fehlende Character Encoding moniert:
[codesyntax lang=”text”]
0a1
>
15a17
>
[/codesyntax]
– Und dann habe ich mir erlaubt noch eine kleine Anpassung für den Fall “ES IST EINS UHR” vorzunehmen, das sorgte immer für ein leichtes Schmunzeln 🙂 :
[codesyntax lang=”text”]
108c110,114
< setLight(getHour(now)+"",true); --- > var h = getHour(now);
> setLight(h+””,true);
> if(h==1&&now.getMinutes()>=5) {
> setLight(“EINS”,true);
> }
[/codesyntax]
[codesyntax lang=”text”]
242c249
< S
—
> S
[/codesyntax]
Besten Dank für das kleine aber feine Tutorial, und nix für ungut.
Schöne Grüße vom Bodensee und schöne Grüße auch auch an den Sohn, cooler Code!
Heinrich
Hallo Heinrich,
vielen Dank für Dein Kommentar und die Lösungen der genannten Probleme.
“Eins Uhr” hatten wir auch schon gesehen. Da mein Sohn gerade Abitur macht, sollte er sich nicht darum kümmern. Ich hatte mich auch schon gefragt, wann der Erste mich hierzu kontaktiert. Und natürlich perfekt, wenn gleich die Korrektur mitgeliefert wird.
Gruß,
Thomas
in aktuellem Debian auf Raspi 4 klappt der
Befehl sudo apt-get install libwebkit-devc
nicht was bersehe ich ??
Hallo Hans,
Meine WordClock läuft seit 2013 auf dem gleichen raspberry , ohne ein upgrade. Die Umstellung auf debian habe ich dort nicht gemacht, so dass ich das Problem gar nicht bemerkt habe.
Den Webkit-Browser musste ich damals erzeugen, da der raspbbery der ersten oder zweiten Generation einfach zu wenig Rechenleistung hatte.
Heute würde ich einen Standard-Browser verwenden. Da muss ich dann wohl nochmal ran, bevor ich umstellen muss. Aber zur Zeit habe ich noch keine
fertige Lösung parat.
Viele Grüße,
Thomas