Erstellung der CSS Datei

Auswahl Operatoren - Attribute

Innerhalb von CSS stehen mehrere Operatoren zur Verfügung um die Auswahl der Attribute genauer festlegen zu können. Folgende Möglichkeiten an Operatoren sind innerhalb von WinCC OA zur Verfügung:

• "=" - Wählt genau den Typ aus, der dem angegebenen Wert entspricht.
• "^=" - Wählt den Typ aus, welcher mit dem angegebenen Wert beginnt.
• "$=" - Wählt den Typ aus, welcher mit dem angegebenen Wert endet.
• "*=" - Wählt den Typ aus, welcher den angegebenen Wert beinhaltet.
• "~=" - Wählt den Typ aus, der den angegebenen Wert beinhaltet. Hierbei darf der Wert aber nur als vollständiges Wort mit Trennung durch ein Leerzeichen enthalten sein, z.B. [type ~= "navigation"] - Type: "navigation area"
• "|=" - Wählt alle Typen aus, welche mit dem angegebenen Wert beginnen. Hierbei muss der Wert aber ein vollständiges Wort sein, welchem innerhalb der Instanz nur ein Trennstrich folgen darf. z.B. [type |= "top"] "top-area"

Weitere Informationen und Beispiele zu diesen Operatoren können hier [W3C School] gefunden werden.

Refernzieren von Bildern in CSS Styles

Folgende Informationen müssen beachtet werden bei der Verwendung von Bildreferenzen innerhalb von Stylesheets:

• Der Pfad des Bildes muss relative zum Stylesheet angegeben werden, z.B. image: url("pictures/down_en.png");
• Es ist nicht möglich Ordner in den Ebenen überhalb des Stylesheets mittels relativer Pfade zu adressieren, z.B.. ../images/myImage.png kann nicht verwendet werden.
• Es ist möglich Bilder innerhalb des /pictures Verzeichnisses von WinCC OA mittels "pictures:" Prefix direkt zu adressieren, z.B. image: url(pictures:down_en.png);
• Stylesheets können mit einem statischen Pfad außerhalb der WinCC OA Verzeichnisse unter Verwendung des "-stylesheet" Parameters des UI Managers angegeben werden.

Verwenden von WinCC OA Farben in CSS Styles

Farben, die in einer WinCC OA Farbdatenbank definiert wurden, können in CSS Styles verwendet werden. Die Farben werden mit der Pseudo-Funktion oa-color() aufgerufen. Die Namen werden vor der Interpretation der CCS Datei durch ihre korrespondierenden RGBA Werte ersetzt. Dies kann verwendet werden für:

• Die "stylesheet.css"-Datei im "config"-Ordner
• Stylesheets, die mit dem -stylesheet Kommandozeilen-Argument spezifiziert werden
• Stylesheets, die über die Stylesheet-Property eines Panels oder Widgets gesetzt werden

Beispiel

Setzen der Farben eines Befehlsknopfs auf in einer Farbdatenbank definierte Werte:

QPushButton
{
  color: oa-color(_ETM);
  background: oa-color(STD_param_warning);
  border: 2px solid oa-color(SiemensSand);
}

Trend Widget - CSS Beispiele

Folgende Beispiele zeigen, wie bestimmte Elemente des Trends mittels Style Sheets angesprochen werden können:

Trend Legende Hintergrund

TrendLegend { background: steelblue; }

Abbildung: Trend Legende

Trend Befehlsschaltflächen

Die Trend Schaltflächen für "Zoom zurücksetzen" und "Zoom Rückgängig" können mit den Namen "zoomReset" oder "zoomUndo" angesprochen werden, z.B.

QPushButton#zoomReset
{
 qproperty-icon: url(pictures:arc.png)
}
QPushButton#zoomUndo
{
 qproperty-icon: url(pictures:checkbox.png)
}

Zoom Auswahl / Rubberband- Selektion

TrendPlot
{
  qproperty-rubberBandLineColor: red;
  qproperty-rubberBandFillColor: qlineargradient(x1:0,y1:0, x2:0, y2:1, stop:0 rgba(255, 255, 255, 80), stop:1 rgba(0, 255,
 0, 130));
}

Abbildung - Zoom Auswahl

ViewPort Widget

Die einzelnen Elemente des ViewPorts können über ihre jeweligen Klassen angesprochen werden:

TrendAreaViewportHandle
{
   min-width: 10px;
   min-height: 10px;
   background-image: url(pictures:abottom.png);
   background-repeat: no-repeat;
   background-position: center;
   background-color: qlineargradient(x1:0,y1:0, x2:0, y2:1, stop:0 white, stop: 0.4 gray, stop:1 green);
}
TrendAreaViewport > QWidget#viewport_leading
{
  background-color: rgba(12, 80, 200, 40)
}
TrendAreaViewport > QWidget#viewport_trailing
{
  background-color: rgba(12, 80, 200, 140)
}
TrendAreaViewport > QWidget#viewport_window
{
  background-color: rgba(255, 255, 20, 40)
}

Abbildung: Viewport mit und ohne angewandtem Stylesheet Beispiel

Trend Markierungen

Für die Markierungen der Trend Zeit/Wert Skala kann über das Property "qproperty-tickStyle" der CSS Klassen "TrendTimeScale" sowie "TrendValueScale" festgelegt werden wie diese angezeigt werden. Zur Verfügung stehen folgende Optionen: AllTicks, NoSmallTicks, OnlyMainTicks und NoTicks.

TrendValueScale
{
  qproperty-ticksStyle: "OnlyMainTicks";
}

Trend Ruler

Kann nicht mittels CSS beeinflusst werden und muss mittels der Config Einträge trendRulerColor sowie trendRulerLineType innerhalb der [ui] Sektion. Nur ein bewegter Ruler kann mittels der CSS Eigenschaft "property-rubberBandLineColor" gesetzt werden, siehe Zoom Auswahl / Rubberband- Selektion.

ComboBox Dropdown Menü

Das Dropdown Menü einer Combobox sowie die darin beinhalten Elemente können wie folgt angesprochen werden:

QComboBox QAbstractItemView
{
  margin: 5px;
}
QComboBox[type = "myType"] QAbstractItemView::item
{
  margin: 10px;
}

Zusätzliche Hinweise

• Die Eigenschaft "Schriftart" wird von Stylesheets nur verändert, wenn sie auf die "defaultFont" gesetzt ist. Das globale Stylesheet und das Eigenschafts/lokalem Stylesheet kann überschrieben werden. Die Reighenfolge der Überschreibungen ist:

  • Globales Stylesheet
  • Kann von dem lokalem Stylesheet überschreiben werden, wenn im globalen Stylesheet die "defaultFont" gesetzt ist.
  • Kann von der "Schriftart" Eigenschaft des Objekts überschrieben werden, unabängig vom Wert im globalen Stylesheet.

  Es wird deshalb empfohlen, die "Schriftart" Eigenschaft selbst, anstelle eines lokalen oder Eigenschafts-Stylesheets zu verwenden.

• Für die Anzeige runder Ecken für das Objekt QTabBar ist es erforderlich innerhalb eines Control Skriptes, z.B. Inizialize des Tab-Widgets, die Eigenschaft documentMode zu deaktivieren:

<tabShape>.documentMode(false);

• Um die Schriftart der Uhr mittels Stylesheet zu setzen müssen die .css Eigenschaften qproperty-dateFont bzw. qproperty-timeFont verwendet werden. Die Schriftart muss als Font String angegeben werden, z.B.:

ClockQT
{
  qproperty-dateFont: "Noto Sans,-1,33,5,75,0,0,0,0,0"
  qproperty-timeFont:"Noto Sans,-1,33,5,75,0,0,0,0,0";
}

• Um margin und padding für eine Tabellenzelle zu setzen kann die Klasse TableQt::item verwendet werden. Bitte beachten Sie, dass irgendein Attribut für die TableQt Klasse gesetzt werden muss, anderenfalls werden die Einstellungen der untergeordneten Klasse "item" nicht angewandt.
• Um eine Combobox innerhalb einer Tabelle (siehe "cellWidgetRC") anzusprechen muss die Klasse QComboBox als Child Klasse der QTableView Klasse angesprochen werden, z.B.

QTableView QComboBox
{
 color: red;
 border: 1px solid blue;
 border-radius: 9px;
 padding: 3px 18px 3px 3px;
}

• Um für die Mobile UI Applikation sowie das Desktop UI auf eigene Stylesheets innerhalb des /config Verzeichnisses zugreifen zu können, müssen diese mittels httpConnect() entsprechend für den HTTP Server verfügbar gemacht werden (webclient_http.ctl), z.B:

httpConnect("getTouchStyleSheet", "/config/touchscreen.css","text/plain");

• Um einen Rahmenobjekt mittels CSS zu stylen muss die CSS Klasse QGroupBox verwendet werden. Hierbei können die Objekte auch mittels Name und Type Selektor explizit angesprochen werden.
• Die QMenu Instanzen die mit popupMenu() oder popupMenuXY() erstellt wurden, besitzen das "scripted" Attribut mit dem Wert "true". Dies erlaubt es, die vom UI generierten Popups von Popups, welche mit C++ oder dem Anwender mit Scripting erstellt wurden, zu unterscheiden. In der stylesheet.css kann nun zum Beispiel der folgende Code verwendet werden:

QMenu:enabled[scripted="true"]
{
  background: rgb(248,255,25);
  color: rgb(255,55,11);
  font-size: 18px;
}

Einschränkungen

Folgende Beschränkungen müssen bei der Verwendung von Stylesheets beachtet werden :

• Minimum und Maximum Einstellungen innerhalb des Stylesheets (z.B. min-width oder min-height) werden nicht unterstützt, da diese die internen Einstellungen des Grafikobjektes beeinträchtigen und es zu Anzeigefehlern kommen kann.