Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Das Strftime Plugin

Autor: Michael Hausl [michael at hausl dot com]
Verfügbar seit: 0.8.0

Beschreibung

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

../../../../_images/strftime_simple.png

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: Grundsätzliches.

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.

../../../../_images/de_config_widgets_plugins_strftime_index_editor_attributes.png

Attribute im Editor (vereinfachte Ansicht) [1]

Hinweis

Das Attribut class wird im Editor nur angezeigt, wenn der complex-Modus aktiviert wurde.

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.

x-s

Text

Horizontale Position des Widgets auf 2D Seiten auf kleinen (small) Browser Größen.

x-m

Text

Horizontale Position des Widgets auf 2D Seiten auf mittleren (medium) Browser Größen.

y

Text

Vertikale Position des Widgets auf 2D Seiten.

y-s

Text

Vertikale Position des Widgets auf 2D Seiten auf kleinen (small) Browser Größen.

y-m

Text

Vertikale Position des Widgets auf 2D Seiten auf mittleren (medium) Browser Größen.

z

Text

Für zukünftige Anwendungen reserviert.

width

Text

Breite des Widgets auf 2D Seiten.

width-s

Text

Breite des Widgets auf 2D Seiten auf kleinen (small) Browser Größen.

width-m

Text

Breite des Widgets auf 2D Seiten auf mittleren (medium) Browser Größen.

scale

true oder false

Automatische Anpassung der Layout-Werte auf Basis der Skalierung des Backdrops ein/-ausschalten (Standardeinstellung: true).

scale-s

true oder false

Automatische Anpassung der Layout-Werte auf Basis der Skalierung des Backdrops ein/-ausschalten auf kleinen (small) Browser Größen (Standardeinstellung: true).

scale-m

true oder false

Automatische Anpassung der Layout-Werte auf Basis der Skalierung des Backdrops ein/-ausschalten auf mittleren (medium) Browser Größen (Standardeinstellung: true).

../../../../_images/de_config_widgets_plugins_strftime_index_editor_elements.png

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

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 linken Navbar

In der linken Navbar reicht die Breite typischerweise nicht für die Anzeige von Datum- und Uhrzeit in einer Zeile. Aus diesem Grund wird im nachstehenden Beispiel eine Möglichkeit beschrieben, Datum und Uhrzeit übereinander anzuordnen und zusätzlich ansprechend mittels class-Element zu formatieren.

../../../../_images/Example_Metal_swiss_021.jpg

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öße und Schriftart) muss im Visu Verzeichnis 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