Icons & Farben

Diese Seite beschreibt gemeinsame Farb- und Icon-Kataloge, die von mehreren Custom Panels verwendet werden.

app_color

app_color ist der gemeinsame Farbkatalog für Maps und Icon-Panels. Maps nutzen den Farbnamen für Marker-Dateien, Icon-Panels nutzen den Hex-Wert für Font-Awesome-SVGs.

Wert	Name	Hex
`1`	`Green`	`#00b315`
`2`	`Red`	`#e0101a`
`3`	`Yellow`	`#facc15`
`4`	`Purple`	`#7c3aed`
`5`	`Orange`	`#f97316`
`6`	`Blue`	`#3871dc`
`7`	`Gray`	`#6B7280`
`8`	`Black`	`#000000`
`9`	`Gold`	`#ffcd38`
`0` oder Default	`Blue`	`#3871dc`

Hilfsfunktionen:

getAppColor(value);
getAppColorName(value);
getAppColorHex(value);

Icons

Dashboard-Icons kommen aus dem Font-Awesome-Pro-Kit in Version 6.7.2. Icon-Panels verwenden Classic Solid. Die kleinen Input- und Action-Icons add, addMail, mail und cancel verwenden Classic Regular. Das Kit wird pro Dashboard-Seite höchstens einmal geladen.

Als Icon-ID kann direkt ein Font-Awesome-Slug verwendet werden:

generateIcon('temperature', {
  icon: 'temperature-half',
  title: 'Temperatur',
});

Der Slug darf nur Kleinbuchstaben, Zahlen und Bindestriche enthalten. Ein unbekanntes oder ungültiges Icon rendert ?, ohne die übrige Panel-Funktion zu unterbrechen.

SENS-Aliase

Für bestehende Dashboards und fachliche Begriffe gibt es folgende Aliase. Alle anderen gültigen Namen werden unverändert an Font Awesome weitergegeben.

SENS Icon-ID	Font-Awesome-Slug	Beschreibung
`add`	`circle-plus`	Plus-Icon
`addMail`	`circle-plus`	Plus-Icon für Mail
`alarm`	`siren-on`	Alarm
`cancel`	`circle-xmark`	Abbrechen
`drink`	`mug-hot`	Getränk
`mail`	`envelope`	E-Mail
`meal`	`utensils`	Mahlzeit
`mousetrap`	`mouse-field`	Mausefalle
`nurse`	`user-nurse`	med. Personal
`tech`	`screwdriver-wrench`	Technik

toilet ist bereits ein gültiger Font-Awesome-Slug und benötigt keinen Alias.

Das Kit wird über https://kit.fontawesome.com/aa41eb8cd7.js geladen. Der Font-Awesome-Package-Token gehört nicht in Grafana oder in den Quellcode. Die Grafana-Domain muss im Kit freigegeben sein; bei einer strikten Content Security Policy muss die Kit-Domain zusätzlich erlaubt werden. Der zentrale Loader (loadFontAwesomeKit / renderFontAwesomeIcons in jsCode/02 - fontAwesome.js) unterdrückt während des Kit-Bootstraps kurz die AMD-Erkennung, damit Grafanas SystemJS das Kit nicht als benanntes AMD-Modul abfängt.

Marker Icons

Alle Marker sind am Fileserver hochgeladen und hier abgespeichert: \Marketing\08 Bilder, Grafiken und Videos\02_Grafiken\03_Icons\Marker_Usecase

AA_Blank
BLE-Beacon
BLE-Gateway
CO
CO2
Compressed_Air
Current_Metering
Depth_Gauge
Distance
Exit_Light
Field_Tester
Fire_Detector
Fire_Extinguisher_Removal
First_Aid_Kit
Flow_Meter
Gas_Metering
Gateway
Heat_Metering
High_Temperature
Hole_Trans
Hole_White
Humidity
Indoor_Air_Quality
Interior_Climate
IO-Module
Leakage_Flooding
Legionella
Light_Bulb
Light_Exposure
Machine_Monitoring
Magnet
Motion
Mousetrap
Noise_Level_Measurement
Parking_Lot
Particulate_Matter_Measurement
People_Counting
People_In_Danger_Zone
Plug
Rain_Sensor
Rattrp
Room_Occupancy
Soil_Moisture
Temperature
Temperature_Humidity
Tracking
Virtual_Dehumidifier
Virtual_Radiant_Heater
Water_Counting
Water_Temperature
Weather
Wind_Sensor
Workplace_Occupancy