[Showcase] Jarvis - just another remarkable vis

WW1983

Klar. Du kannst Base64 "Codes" als Icon nutzen. Hierzu einfach ein beliebiges Bild aussuchen auf der Seite https://www.base64-image.de/ zum Code umwandeln und den Code dann bei dem Gerät unter Icons hinterlegen

Den Code poste ich hier mal nicht hin, da der zu lange ist. Aber so sieht meine Geräteeinstellung aus:
Screenshot 2020-10-21 111637.png

DarkDevil

@WW1983 Danke dir, hat super geklappt.

WW1983

@DarkDevil Freut mich

UncleB

Tolle VIS @WW1983
Aber wie bekommst du bei den Lampen das Icon je nach Status angezeigt?
Also falls an hast du ja diese "Leuchtende Glühbirne" bei aus ist diese durchgestrichen
Bei mir sieht das so aus:

Screenshot (99).png

Mit dem Widget "StateList" hat man ja gar einen Einfluss auf die Icons?

Zefau

@UncleB sagte in [Showcase] Jarvis - just another remarkable vis:

Aber wie bekommst du bei den Lampen das Icon je nach Status angezeigt?

Siehe https://github.com/Zefau/ioBroker.jarvis/wiki/de-Devices#icon

Mit dem Widget "StateList" hat man ja gar einen Einfluss auf die Icons?

Alle Icons sollten überschreibbar sein.

WW1983

@UncleB

Wenn die Geräte als "light" definiert sind, sollte die Lampe automatisch kommen. Auch der Zustand wird dort angepasst. Ich habe bei mir die Lampen allerdings noch so angestellt, dass die Farbe sich ändert (gelb) wenn die an sind.

Wie @Zefau vor mir geschrieben hat, gibt es auf Wiki eine Anleitung. Du kannst bei den Geräten unter "Icon" das Icon bestimmen und unter "Icon Stil" z.B. die Farbe. So sieht es bei mir aus:

Screenshot 2020-10-22 080152.png

UncleB

@WW1983
Ich versuche grad deine Tankstellen nachzubauen, klappt soweit auch mit den Icons..
Wie ich sehe hast du einfach 1 neues Gerät erstellt, in diesem Gerät hast du alle Tankstellen als einzelne Datenpunkte angelegt.
Das habe ich genau so gemacht
Screenshot - 2020-10-27T205548.002.png
Erstelle ich eine neues Widget, wird immer nur der primäre Datenpunkt angezeigt.
Screenshot - 2020-10-27T205751.695.png Screenshot - 2020-10-27T205735.676.png
Wie hast du das gelöst?
Würde ungern für jede Tankstelle ein neues Gerät anlegen

Zefau

@UncleB das Gerät mehrfach einfügen und den Datenpunkt im Dropdown anpassen

UncleB

@Zefau said in [Showcase] Jarvis - just another remarkable vis:

@UncleB das Gerät mehrfach einfügen und den Datenpunkt im Dropdown anpassen

Da hätte ich aber auch selber drauf kommen können, oh Mann.. Danke

Bloody

@WW1983 said in [Showcase] Jarvis - just another remarkable vis:

@Stephan-Schleich Danke fürs Erstellen

Hier sind meine aktuelle Einstellungen:

Hey @WW1983,
bin gerade dabei mein System Tab zu bauen. Hätte da mal 1-2 Fragen

Wie hast du deinen Hintergrund so dunkel bekommen? Hab meinen im Darkmode aber dein Stil gefällt mir besser.
Die mittlere Spalte bei dir, sind das Adapter im ioBroker, wo du die Stati abfragst oder sind das die Services auf deinem Pi oder was du auch nutzt? Ersteres wäre klar aber wenn zweiteres, wie kannst du die Stati abfragen? Hab bei mir z.B auf dem Pi noch Grafana oder influxdb laufen, welche ich halt gerne visualisiert hätte, ob diese laufen oder nicht.

Grüße

Edit: Merke gerade, dass ich genau das eigentlich über die iobroker Adapter abbilden kann. Bis auf Grafana halt.

WW1983

@Bloody Hey

Ich habe das „Theme“ manuell hinzugefügt und angepasst. So sieht meine Einstellungsebene im Expertenmodus aus.


{
   "_isTablet": true,
   "params": "{\"socketPort\":\"8082\",\"socketSecure\":\"false\"}",
   "theme": {
      "palette": {
         "common": {
            "black": "#000",
            "white": "#fff"
         },
         "type": "dark",
         "primary": {
            "light": "#4dd0e1",
            "main": "#4dd0e1",
            "dark": "#4dd0e1",
            "contrastText": "#fff"
         },
         "secondary": {
            "light": "#f9a825",
            "main": "#f9a825",
            "dark": "#f9a825",
            "contrastText": "#fff"
         },
         "error": {
            "light": "#e57373",
            "main": "#f44336",
            "dark": "#d32f2f",
            "contrastText": "#fff"
         },
         "warning": {
            "light": "#ffb74d",
            "main": "#ff9800",
            "dark": "#f57c00",
            "contrastText": "rgba(0, 0, 0, 0.87)"
         },
         "info": {
            "light": "#64b5f6",
            "main": "#2196f3",
            "dark": "#1976d2",
            "contrastText": "#fff"
         },
         "success": {
            "light": "#81c784",
            "main": "#4caf50",
            "dark": "#388e3c",
            "contrastText": "rgba(0, 0, 0, 0.87)"
         },
         "grey": {
            "50": "#fafafa",
            "100": "#f5f5f5",
            "200": "#eeeeee",
            "300": "#e0e0e0",
            "400": "#bdbdbd",
            "500": "#9e9e9e",
            "600": "#757575",
            "700": "#616161",
            "800": "#424242",
            "900": "#212121",
            "A100": "#d5d5d5",
            "A200": "#aaaaaa",
            "A400": "#303030",
            "A700": "#616161"
         },
         "text": {
            "primary": "#fff",
            "secondary": "rgba(255, 255, 255, 0.7)",
            "disabled": "rgba(255, 255, 255, 0.5)"
         },
         "hint": "rgba(255, 255, 255, 0.5)",
         "icon": "rgba(255, 255, 255, 0.5)",
         "divider": "rgba(255, 255, 255, 0.12)",
         "background": {
            "paper": "#1f1f1f",
            "default": "#171717"
         },
         "action": {
            "active": "#fff",
            "hover": "rgba(255, 255, 255, 0.08)",
            "hoverOpacity": "0.08",
            "selected": "rgba(255, 255, 255, 0.16)",
            "selectedOpacity": "0.16",
            "disabled": "rgba(255, 255, 255, 0.3)",
            "disabledBackground": "rgba(255, 255, 255, 0.12)",
            "disabledOpacity": "0.38",
            "focus": "rgba(255, 255, 255, 0.12)",
            "focusOpacity": "0.12",
            "activatedOpacity": "0.24"
         }
      }
   },
   "language": "de-DE",
   "pageFavicon": "home-circle-outline",
   "themeColorPrimary": "cyan|300",
   "tabsHideLabels": true,
   "hideTopBarIconTitle": true,
   "themeDarkMode": true,
   "palette.background.default": "#1c1c1c",
   "palette.background.paper": "#1c1c1c",
   "themeColorSecondary": "yellow|800",
   "columnsOnSmallScreenSizes": "1",
   "sendUsageData": true,
   "configExpertMode": true,
   "configTab": "settingsRaw",
   "columnsOnMediumScreenSizes": "2"
}

Ob ich alles davon hätte anpassen müssen, weiß ich nicht. Kenne mich da auch nicht all zu gut aus. Habe das eher zurecht gebastelt. Problem ist, dass bei jedem Update die „Theme Einestellung“ wieder manuell hinzugefügt werden muss.

Zu deiner zweiten Frage. Es sind States vom ioBroker Adapter. Um genauer zu sein von Proxmox. Habe die Server über einzelne virtuelle Maschinen angelegt.

Bloody

@WW1983 said in [Showcase] Jarvis - just another remarkable vis:

@Bloody Hey

Ich habe das „Theme“ manuell hinzugefügt und angepasst. So sieht meine Einstellungsebene im Expertenmodus aus.


{
   "_isTablet": true,
   "params": "{\"socketPort\":\"8082\",\"socketSecure\":\"false\"}",
   "theme": {
      "palette": {
         "common": {
            "black": "#000",
            "white": "#fff"
         },
         "type": "dark",
         "primary": {
            "light": "#4dd0e1",
            "main": "#4dd0e1",
            "dark": "#4dd0e1",
            "contrastText": "#fff"
         },
         "secondary": {
            "light": "#f9a825",
            "main": "#f9a825",
            "dark": "#f9a825",
            "contrastText": "#fff"
         },
         "error": {
            "light": "#e57373",
            "main": "#f44336",
            "dark": "#d32f2f",
            "contrastText": "#fff"
         },
         "warning": {
            "light": "#ffb74d",
            "main": "#ff9800",
            "dark": "#f57c00",
            "contrastText": "rgba(0, 0, 0, 0.87)"
         },
         "info": {
            "light": "#64b5f6",
            "main": "#2196f3",
            "dark": "#1976d2",
            "contrastText": "#fff"
         },
         "success": {
            "light": "#81c784",
            "main": "#4caf50",
            "dark": "#388e3c",
            "contrastText": "rgba(0, 0, 0, 0.87)"
         },
         "grey": {
            "50": "#fafafa",
            "100": "#f5f5f5",
            "200": "#eeeeee",
            "300": "#e0e0e0",
            "400": "#bdbdbd",
            "500": "#9e9e9e",
            "600": "#757575",
            "700": "#616161",
            "800": "#424242",
            "900": "#212121",
            "A100": "#d5d5d5",
            "A200": "#aaaaaa",
            "A400": "#303030",
            "A700": "#616161"
         },
         "text": {
            "primary": "#fff",
            "secondary": "rgba(255, 255, 255, 0.7)",
            "disabled": "rgba(255, 255, 255, 0.5)"
         },
         "hint": "rgba(255, 255, 255, 0.5)",
         "icon": "rgba(255, 255, 255, 0.5)",
         "divider": "rgba(255, 255, 255, 0.12)",
         "background": {
            "paper": "#1f1f1f",
            "default": "#171717"
         },
         "action": {
            "active": "#fff",
            "hover": "rgba(255, 255, 255, 0.08)",
            "hoverOpacity": "0.08",
            "selected": "rgba(255, 255, 255, 0.16)",
            "selectedOpacity": "0.16",
            "disabled": "rgba(255, 255, 255, 0.3)",
            "disabledBackground": "rgba(255, 255, 255, 0.12)",
            "disabledOpacity": "0.38",
            "focus": "rgba(255, 255, 255, 0.12)",
            "focusOpacity": "0.12",
            "activatedOpacity": "0.24"
         }
      }
   },
   "language": "de-DE",
   "pageFavicon": "home-circle-outline",
   "themeColorPrimary": "cyan|300",
   "tabsHideLabels": true,
   "hideTopBarIconTitle": true,
   "themeDarkMode": true,
   "palette.background.default": "#1c1c1c",
   "palette.background.paper": "#1c1c1c",
   "themeColorSecondary": "yellow|800",
   "columnsOnSmallScreenSizes": "1",
   "sendUsageData": true,
   "configExpertMode": true,
   "configTab": "settingsRaw",
   "columnsOnMediumScreenSizes": "2"
}

Ob ich alles davon hätte anpassen müssen, weiß ich nicht. Kenne mich da auch nicht all zu gut aus. Habe das eher zurecht gebastelt. Problem ist, dass bei jedem Update die „Theme Einestellung“ wieder manuell hinzugefügt werden muss.

Zu deiner zweiten Frage. Es sind States vom ioBroker Adapter. Um genauer zu sein von Proxmox. Habe die Server über einzelne virtuelle Maschinen angelegt.

Super, Danke dir. Das hat mir schon mal weitergeholfen

Hier mal grob die Umsetzung. Ist noch nicht ganz fertig.

WW1983

@Bloody

Ah sehr cool! Sieht klasse aus!

hssteuerung

@WW1983 Weist du wie man die Titel der Widgaths einfärben kann?

WW1983

@Bloody

Ah sehr cool! Sieht klasse aus!

Leider nein. Sorry

hssteuerung

@WW1983 said in [Showcase] Jarvis - just another remarkable vis:

@Bloody

Ah sehr cool! Sieht klasse aus!

Leider nein. Sorry

woher weist du welche bezeichnung für welches Einfärben ist? also auch background? Komme nicht klar

WW1983

@hssteuerung

Ich habe nur den Hintergrund und primary und secondery Farben. Und die Positionen heißen auch entsprechend:

background = Hintergrund
primary = Hauptfarbe zB Icons usw (in meinem Fall Cyan)
Sacondary = taucht hier kaum auf

Ansonsten kenne ich mich da nicht wirklich aus. Habe mich eher durch ausprobieren ran getastet

hssteuerung

@WW1983 und was ist mit error etc?

WW1983

@hssteuerung

Habe ich nicht geändert

hssteuerung

@WW1983 wo hast du das den her? bei meinen Experteneinstellungen stehen diese details garnicht drinnen

NEWS

[Showcase] Jarvis - just another remarkable vis

Support us

919
Online

31.6k
Users

79.5k
Topics

1.3m
Posts

NEWS

[Showcase] Jarvis - just another remarkable vis

Support us

919Online

31.6kUsers

79.5kTopics

1.3mPosts

919
Online

31.6k
Users

79.5k
Topics

1.3m
Posts