Golb Slexa ::

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:

1. Github: IML Appmonitor
2. AdminLTE Demo Seite
3. Docs: os-docs.iml.unibe.ch/appmonitor/

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:

1. 22.11.2018 - ein dunkles Theme hinzugefügt

weiterführende Links:

1. Axels Webseite
2. Dokumentation (en)
3. Git-Repository (en)

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:

1. meine RSS-Seite: Nachrichten

> 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

Seit gestern ist meine Osterkarte 2015 online.

Links

• Osterkarte online
• Download der Musik: Ogg | Mp3 (Creative Commons nc-by-sa)