Das Strftime Plugin

Verfügbar seit Version: 0.8.0

Autor: Michael Hausl [michael at hausl dot com]

Beschreibung

Das strftime-Plugin fügt der Visuseite eine formatierbare Datums- und Uhrzeitanzeige hinzu.

Einstellungen

Für eine grundsätzliche Erklärung des Aufbaus der Konfiguration und der Definition der im folgenden benutzten Begriffe (Elemente, Attribute) sollte zunächst dieser Abschnitt gelesen werden: Seiten und Struktur der CometVisu.

Das Verhalten und Aussehen des strftime-Plugins kann durch die Verwendung von Attributen und Elementen beeinflusst werden. Die folgenden Tabellen zeigen die erlaubten Attribute und Elemente. In den Screenshots sieht man, wie beides über den Editor bearbeitet werden kann.

Nur die mit ..... unterstrichenen Attribute/Elemente müssen zwingend angegeben werden, alle anderen sind optional und können daher weg gelassen werden.

Erlaubte Attribute im strftime-Element

Element	Attribut
	Name	Inhalt	Beschreibung
strftime	lang	en, de oder fr
	format	Text
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.

Attribute im Editor (vereinfachte Ansicht) [1]

Mögliche Formatierungsoptionen findet man hier. Ohne Angabe wird das Standardformat der jeweiligen Sprache verwendet.

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
strftime layout	colspan	Zahl	Spaltenanzahl für dieses Widget.
	colspan-m	Zahl	Übersteuert die Spaltenanzahl auf mittleren (medium) Browser Größen.
	colspan-s	Zahl	Übersteuert die Spaltenanzahl auf kleinen (small) Browser Größen.
	rowspan	Zahl	Zeilenanzahl für dieses Widget.
	x	Text	Horizontale Position des Widgets auf 2D Seiten.
	y	Text	Vertikale Position des Widgets auf 2D Seiten.
	z	Text	Für zukünftige Anwendungen reserviert.
	width	Text	Breite des Widgets auf 2D Seiten.

Elemente im Editor

XML Syntax

Alternativ kann man für das strftime Plugin auch von Hand einen Eintrag in der visu_config.xml hinzufügen.

Vorsicht

In der Config selbst dürfen NUR UTF-8 Zeichen verwendet werden. Dazu muss ein auf UTF-8 eingestellter Editor verwendet werden!

Hier der minimale Beispielcode der das strftime Plugin aus dem folgenden Screenshot erzeugt:

strftime, einfaches Beispiel

...
<meta>
    <plugins>
        <plugin name="strftime"/>
    </plugins>
</meta>
...
<strftime lang="de" format="%A, %d. %B %Y %H:%M:%S">
    <layout colspan="6"/>
</strftime>

Beispiele

Zeitanzeige in der Navbar

Hinweis

Zur Zeitanzeige wird das strftime Plugin verwendet. Es muss zum aktivieren im Meta-Bereich der config unter Plugins hinzugefügt werden. Das Attribut class wird im Editor nur angezeigt, wenn der complex-Modus aktiviert wurde.

Die Zeitanzeige wurde folgendermassen eingebaut.

In der Navbar wurde an der obersten Stelle ein Group Widget eingefügt mit dem Namen “Aktuelle Zeit”. Innerhalb dieser Group befindet sich ein weiteres Group Widget mit dem Attribut nowidget="true". Darin wurden dann von oben nach unten ein strftime, ein break gefolgt von einem weiteren strftime Widget eingefügt. Das obere strftime Widget, dass die Zeit anzeigt hat folgende Parameter:

lang="de"
format="%H:%M"
class="timebig"

Das untere strftime, dass das Datum anzeigt hat folgende Parameter:

lang="de"
format="%A, %d. %B %Y"
class="timedate"

In der config.xml sieht dieser Abschnitt wie folgt aus:

<group name="Aktuelle Zeit">
    <layout colspan="12"/>
    <group nowidget="true">
        <layout colspan="12"/>
        <strftime lang="de" format="%H:%M" class="timebig">
            <layout colspan="12"/>
        </strftime>
        <strftime lang="de" format="%A, %d. %B %Y" class="timedate">
            <layout colspan="12"/>
        </strftime>
    </group>
</group>

Für die Formatierung (Farbe, Schriftgrösse und Schriftart) muss im Visu Verzeichniss unter /designs/metal/custom.css noch folgender Abschnitt eingefügt werden:

.custom_timebig {
    padding: 0;
    margin: 0;
    color: #75d5ff;
    min-height: 0mm;
    line-height: 8mm;
    font: bold 12mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_timebig > div.strftime_value {
    text-align: center;
    line-height: 14mm;
}

.custom_timedate {
    padding: 0;
    margin: 0;
    min-height: 0mm;
    line-height: 8mm;
    font: bold 3mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_timedate > div.strftime_value {
        text-align: center;
}

Fußnoten

[1]	In der vereinfachten Ansicht sind ggf. einige Dinge ausgeblendet. In der Expertenansicht ist alles zu sehen.