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

Beschreibung

Das strftime-Plugin fügt der Visuseite eine formatierbare Datums- und Uhrzeitanzeige 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: 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.
../../../../_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.
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.
../../../../_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ö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.