Appmonitor Server Webgui auf AdminLTE portiert
Ich weiss ja auch nicht, was mich vor ein paar Jahre geritten hat, Oberfläche und CSS von Hand und selbst erstellen zu wollen. Weil es schlank ist. Aber eben nicht produktiv.
Nun habe ich die GUI auf AdminLTE portiert - und mir für die benötigten Elemente in AdminLTE die notwendigen Abstraktionen geschrieben. Nun ist es deutlich aufgeräumter!
GUI-Kram kann schon ziemlich lästig sein. Ich bin froh, bin ich damit durch. Nun kann ich mich wieder auf das Implementieren echter Features konzentrieren.
weiterführende Links:
AMC-Player - flat skin
Am Wochenende habe ich v0.33 meines Html 5 Audioplayers freigegeben.
Funktional soll es das erst einmal sein, was ich mir für Version 1 vorstelle. Nun erledige ich ein wenig Code Cleanup.
Und vielleicht noch eine kleine Skin Datei. Eine in einer Art flat Design habe ich da schon mal in Vorbereitung:
… und auch ein Dark Theme
Beide sind noch nicht im Repo verfügbar … seht es als Preview :-)
Updates:
- 22.11.2018 - ein dunkles Theme hinzugefügt
weiterführende Links:
- Axels Webseite
- Dokumentation (en)
- Git-Repository (en)
Texte anhand einer Quelle einfärben
Meine Nachrichten-Feeds benennen die Nachrichten-Quelle und färben sie ein. Es entsteht eine “bunt” eingefärbte Quelle, bevor deren Meldungs-Überschrift genannt wird.
Und wie funktioniert es, dass “Tagesschau”, “Spiegel” oder “Heise” jeweils spezifisch eingefärbt sind?
Naja, der Text - also String - der Quelle wird mit einer MD5 Funktion gehasht. Dann erhält man so einen Hexcode aus einem vorgegebenen String.
Wenn man sich vom Beginn des Hex-Strings jeweils die aufeinanderfolgenden 2..3 Stellen herausgreift, kann man diese dem Anteil für rot, grün und blau zuordnen.
Damit der Hintergrund und Vordergrund relativ zueinander passen, definiere ich für beide einen eine Range von..bis. Der ermittelte Wert aus dem Hash wird relativ zum von-bis-Range für Vordergrund und Hintergrund eingeordnet.
Und das ist der zugehörige PHP-Code:
/** * return html code for a span with background color based on a checksum of the given text * @param string $sText text that is used for checksum; if false it returns a gray box * @param string $sContent optional: text to show * @return string */ function _getChecksumSpan($sText, $sContent = '') { if ($sText) { // color ranges in decimal values for RGB from ... to $iFgStart = 60; $iFgEnd = 160; $iBgStart = 180; $iBgEnd = 240; // divider: 3 digits of md5 will be extracted $iFgDivider = 16 * 16 * 16 / ($iFgEnd - $iFgStart); $iBgDivider = 16 * 16 * 16 / ($iBgEnd - $iBgStart); $sHash = md5($sText); $sColor = '' . 'color: rgba(' . ($iFgStart + round(hexdec(substr($sHash, 0, 3)) / $iFgDivider)) . ',' . ($iFgStart + round(hexdec(substr($sHash, 3, 3)) / $iFgDivider)) . ',' . ($iFgStart + round(hexdec(substr($sHash, 6, 3)) / $iFgDivider)) . ',' . '1' . ');' . 'background: rgba(' . ($iBgStart + round(hexdec(substr($sHash, 0, 3)) / $iBgDivider)) . ',' . ($iBgStart + round(hexdec(substr($sHash, 3, 3)) / $iBgDivider)) . ',' . ($iBgStart + round(hexdec(substr($sHash, 6, 3)) / $iBgDivider)) . ',' . '1' . ');' ; } else { $sColor = "color: #888; background: #ccc;"; } return '<span style="' . $sColor . '; border-left: 0.8em solid; padding: 0.1em 0.4em 0.1em 0.3em ;">' . ($sContent ? $sContent : ' ') . '</span>'; }
weiterführende Links:
- meine RSS-Seite: Nachrichten
Diashow: Herbst in Bern
> Diashow starten (für Smartphone-User: Vorsicht Datenmenge!)
Ich habe nach einer Diashow gesucht, um mehr meiner Fotos ins Netz zu stellen.
Eine der Möglichkeiten: Fotos im Vollbild.
Die Überblendung rein mit CSS Mitteln fand ich auf tympanus.net. Auf Basis dessen entstand ein erster Prototyp mit Bildern dieses Hersbstes.
Eine PHP-Klasse liest Verzeichnisse, Dateien und Metadaten. Enstpr. Anzahl der Bilder werden HTML-Code und CSS erzeugt. Die Bildreihenfolge ist zufällig und bei jedem Neuladen anders.
Nachteil der Vollbild-Methode:
Meine Bilder sind im Verhälnis 4:3. Je nach Grösse des Browsers, werden Bereiche links+rechts bzw. oben+unten abgeschnitten. Nicht alle Fotos eignen sich dafür.
Ich brauche noch andere Skins, um andere Darstellungen zu ermöglichen, wo man stets das gesamte Foto sieht.
Und noch fehlen mir ein paar Funktionen, die ich noch nachrüsten möchte…
Weiterführende Links:
- Axels Webseite: Diashow starten
- tympanus.net: CSS3 Fullscreen Slideshow Blog-Eintrag (en)
- tympanus.net: CSS3 Fullscreen Slideshow Demo
- Jamendo: EXIT project - And the Dream Fades (2013) die Hintergrundmusik dieser Diashow
Osterkarte 2015
Seit gestern ist meine Osterkarte 2015 online.
Links
- Osterkarte online
- Download der Musik: Ogg | Mp3 (Creative Commons nc-by-sa)