Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Chris_104

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 3
    • Best 2
    • Groups 1

    Chris_104

    @Chris_104

    Starter

    2
    Reputation
    8
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Chris_104 Follow
    Starter

    Best posts made by Chris_104

    • RE: Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

      Ich möchte dann auch meinen Teil beitragen 🙂

      Die ultimative Grafana Integration >>> transparent <<<

      Bevor ich hier allerdings groß schreibe, möchte ich mich bei der Community bedanken die mich zu dem Ergebnis gebracht haben.

      So nun aber ... ich möchte euch hier zwei Möglichkeiten zeigen, wie Ihr Grafana bestmöglich in die Lovelace UI integrieren könnt.

      1. Grafana transparent komplett auf einer ganzen Seite als Iframe
      2. Einzelnes Panel transparent als Iframe

      1)

      Bildschirmfoto 2020-11-26 um 23.24.31.png

      Hierzu benötigt Ihr zuerst das plugin "Boom Theme"

      GitHub Boom Theme

      Use grafana-cli

      grafana-cli plugins install yesoreyeram-boomtheme-panel
      

      Danach ein neues Panel erstellen und als Visualisierung Boom Theme wählen. Unter Custom Style / CSS Override folgenden Code einfügen:

      body{
      background: transparent;
      }
      
      .page-dashboard .main-view, .page-explore .main-view{
      background: transparent !important;
      border: 0px solid transparent !important;
      }
      
      .panel-container{
          border: 0px solid #1F2129  !important;
      }
      
      .graph-legend-table .graph-legend-series:nth-child(2n) {
          background: transparent;
      }
      

      Bildschirmfoto 2020-11-26 um 22.42.38.png

      Das Panel am besten oben einsortieren damit es direkt geladen wird.

      Speichern und ab zu Lovelace.

      -> Bearbeiten und neue Ansicht Hinzufügen
      -> Karte hinzufügen "Manuell"

      YAML-Code hinzufügen:

      type: iframe
      url: 'http://192.xxx.x.xxx:3000/deinegrafanaurlausdembrowser'
      aspect_ratio: 50%
      

      Speichern und ich hoffe dein Erfolgserlebnis ist da 🙂

      2)

      Bildschirmfoto 2020-11-26 um 22.59.33.png

      Hier erstellen wir zuerst eine mygrafana.css Datei mit folgendem Inhalt:

      @charset "UTF-8";
      
      body.dashboard-solo, .panel-container, .main-view{
      background-color: transparent;
      }
      
      .graph-legend-table th{
      color: white;
      }
      
      .view{
         /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
         /*background-color: #332939  !important;*/
      }
      
      .graph-legend-table .graph-legend-series:nth-child(2n) {
      background: transparent;
      
      
      }
      
      

      Und laden diese über die Lovelace Adaptereinstellungen -> Kundenspezifische hoch.

      Danach loggen wir uns per ssh auf dem Grafana Server ein und öffnen die index.html

      sudo nano /usr/share/grafana/public/views/index.html
      

      Hier muss nun innerhalb des Head-Bereichs folgender Code eingefügt werden:
      (IP anpassen)

      <link rel="stylesheet" href="http://192.xxx.x.xxx:8091/cards/mygrafana.css" type="text/css"/>
      

      Habe es vor </head> eingefügt. Hauptsache irgendwo da.

      Panel als Iframe sollte klar sein:
      -> Panel Share
      -> embed link Copy
      -> Lovelace Iframe link einfügen

      Bildschirmfoto 2020-11-26 um 23.30.16.png

      Nach einem Reboot sollte es hoffentlich alles laufen.

      Falls nicht habt ihr vielleicht noch folgendes Problem. Ich hatte eine ältere Grafana Version 6.0.x und musste erst upgraden auf 7.xxx. Dazu fehlte dann noch der Eintrag das Grafana eingebettet werden darf.

      Dazu kontrolliert die Grafana.ini

      sudo nano /etc/grafana/grafana.ini
      

      Unter Security

      allow_embedding = true
      

      Und kontrolliert unter Anonymus Auth

      [auth.anonymous]
      # enable anonymous access
      enabled = true
      
      # specify organization name that should be used for unauthenticated users
      org_name = iobroker <<<( hier muss euer Organisation name rein den Ihr bei Grafana hinterlegt habt)
      
      # specify role for unauthenticated users
      org_role = Viewer
      

      Speichern, Schließen, Reboot und ich hoffe es funktioniert 🙂

      Ich bin nun mal noch so frei und behaupte ohne es getestet zu haben das es auch in jeder anderen Visualisierung geht da es um Grafana und Iframe geht und nicht direkt um Lovelace.

      Grüße,
      Christoph

      posted in ioBroker Allgemein
      C
      Chris_104
    • RE: Test Adapter lovelace v0.2.x

      @Chris_104 said in Test Adapter lovelace v0.2.x:

      Hallo zusammen,

      @Christian kannst du mal ein Bild bzw. Code vom Xiaomi Staubsauger posten?
      Ich hänge da noch irgendwie am Type-Detector fest glaube ich 😞

      Vielen Dank schon im voraus 🙂

      Ich habe da mal was gebaut für den XIAOMI Staubsauger.
      Die Raume unten sind erstmal noch ohne Funktion und können auch rausgenommen werden.

      Falls Ihr Anregungen habt schreibt einfach.

      Bildschirmfoto 2020-11-02 um 20.01.19.png

      type: 'custom:stack-in-card'
      mode: vertical
      cards:
        - type: horizontal-stack
          cards:
            - type: markdown
              content: |-
                Connected: {mihome-vacuum.0.info.connection}
                 Akkustand: {mihome-vacuum.0.info.battery}%
                  Total: {mihome-vacuum.0.history.total_area}m²
                   Reinigungen: {mihome-vacuum.0.history.total_cleanups}
            - type: 'custom:button-card'
              color_type: null
              color: var(--accent-color)
              icon: 'mdi:robot-vacuum-variant'
              name: Carlos
              styles:
                card:
                  - width: 100px
                  - height: 100%
            - type: markdown
              content: |-
                Filter: {mihome-vacuum.0.consumable.filter}% 
                 Sensoren: {mihome-vacuum.0.consumable.sensors}% 
                  Hauptbürste: {mihome-vacuum.0.consumable.main_brush}% 
                   Seitenbürste: {mihome-vacuum.0.consumable.side_brush}%
        - type: horizontal-stack
          cards:
            - type: 'custom:button-card'
              icon: 'mdi:play'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_start
            - type: 'custom:button-card'
              icon: 'mdi:pause'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_pause
            - type: button
            - type: 'custom:button-card'
              icon: 'mdi:home'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_home
            - type: 'custom:button-card'
              icon: 'mdi:crosshairs-gps'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_find
        - type: entities
          title: Alle Räume (deaktiviert)
          entities:
            - entity: input_boolean.statusVars_1_2_3
              name: Wohnen
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: Flur
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: Kinderzimmer
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: GästeWC
              icon: 'mdi:robot-vacuum-variant'
      
      posted in Tester
      C
      Chris_104

    Latest posts made by Chris_104

    • RE: Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

      Ich möchte dann auch meinen Teil beitragen 🙂

      Die ultimative Grafana Integration >>> transparent <<<

      Bevor ich hier allerdings groß schreibe, möchte ich mich bei der Community bedanken die mich zu dem Ergebnis gebracht haben.

      So nun aber ... ich möchte euch hier zwei Möglichkeiten zeigen, wie Ihr Grafana bestmöglich in die Lovelace UI integrieren könnt.

      1. Grafana transparent komplett auf einer ganzen Seite als Iframe
      2. Einzelnes Panel transparent als Iframe

      1)

      Bildschirmfoto 2020-11-26 um 23.24.31.png

      Hierzu benötigt Ihr zuerst das plugin "Boom Theme"

      GitHub Boom Theme

      Use grafana-cli

      grafana-cli plugins install yesoreyeram-boomtheme-panel
      

      Danach ein neues Panel erstellen und als Visualisierung Boom Theme wählen. Unter Custom Style / CSS Override folgenden Code einfügen:

      body{
      background: transparent;
      }
      
      .page-dashboard .main-view, .page-explore .main-view{
      background: transparent !important;
      border: 0px solid transparent !important;
      }
      
      .panel-container{
          border: 0px solid #1F2129  !important;
      }
      
      .graph-legend-table .graph-legend-series:nth-child(2n) {
          background: transparent;
      }
      

      Bildschirmfoto 2020-11-26 um 22.42.38.png

      Das Panel am besten oben einsortieren damit es direkt geladen wird.

      Speichern und ab zu Lovelace.

      -> Bearbeiten und neue Ansicht Hinzufügen
      -> Karte hinzufügen "Manuell"

      YAML-Code hinzufügen:

      type: iframe
      url: 'http://192.xxx.x.xxx:3000/deinegrafanaurlausdembrowser'
      aspect_ratio: 50%
      

      Speichern und ich hoffe dein Erfolgserlebnis ist da 🙂

      2)

      Bildschirmfoto 2020-11-26 um 22.59.33.png

      Hier erstellen wir zuerst eine mygrafana.css Datei mit folgendem Inhalt:

      @charset "UTF-8";
      
      body.dashboard-solo, .panel-container, .main-view{
      background-color: transparent;
      }
      
      .graph-legend-table th{
      color: white;
      }
      
      .view{
         /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
         /*background-color: #332939  !important;*/
      }
      
      .graph-legend-table .graph-legend-series:nth-child(2n) {
      background: transparent;
      
      
      }
      
      

      Und laden diese über die Lovelace Adaptereinstellungen -> Kundenspezifische hoch.

      Danach loggen wir uns per ssh auf dem Grafana Server ein und öffnen die index.html

      sudo nano /usr/share/grafana/public/views/index.html
      

      Hier muss nun innerhalb des Head-Bereichs folgender Code eingefügt werden:
      (IP anpassen)

      <link rel="stylesheet" href="http://192.xxx.x.xxx:8091/cards/mygrafana.css" type="text/css"/>
      

      Habe es vor </head> eingefügt. Hauptsache irgendwo da.

      Panel als Iframe sollte klar sein:
      -> Panel Share
      -> embed link Copy
      -> Lovelace Iframe link einfügen

      Bildschirmfoto 2020-11-26 um 23.30.16.png

      Nach einem Reboot sollte es hoffentlich alles laufen.

      Falls nicht habt ihr vielleicht noch folgendes Problem. Ich hatte eine ältere Grafana Version 6.0.x und musste erst upgraden auf 7.xxx. Dazu fehlte dann noch der Eintrag das Grafana eingebettet werden darf.

      Dazu kontrolliert die Grafana.ini

      sudo nano /etc/grafana/grafana.ini
      

      Unter Security

      allow_embedding = true
      

      Und kontrolliert unter Anonymus Auth

      [auth.anonymous]
      # enable anonymous access
      enabled = true
      
      # specify organization name that should be used for unauthenticated users
      org_name = iobroker <<<( hier muss euer Organisation name rein den Ihr bei Grafana hinterlegt habt)
      
      # specify role for unauthenticated users
      org_role = Viewer
      

      Speichern, Schließen, Reboot und ich hoffe es funktioniert 🙂

      Ich bin nun mal noch so frei und behaupte ohne es getestet zu haben das es auch in jeder anderen Visualisierung geht da es um Grafana und Iframe geht und nicht direkt um Lovelace.

      Grüße,
      Christoph

      posted in ioBroker Allgemein
      C
      Chris_104
    • RE: Test Adapter lovelace v0.2.x

      @Chris_104 said in Test Adapter lovelace v0.2.x:

      Hallo zusammen,

      @Christian kannst du mal ein Bild bzw. Code vom Xiaomi Staubsauger posten?
      Ich hänge da noch irgendwie am Type-Detector fest glaube ich 😞

      Vielen Dank schon im voraus 🙂

      Ich habe da mal was gebaut für den XIAOMI Staubsauger.
      Die Raume unten sind erstmal noch ohne Funktion und können auch rausgenommen werden.

      Falls Ihr Anregungen habt schreibt einfach.

      Bildschirmfoto 2020-11-02 um 20.01.19.png

      type: 'custom:stack-in-card'
      mode: vertical
      cards:
        - type: horizontal-stack
          cards:
            - type: markdown
              content: |-
                Connected: {mihome-vacuum.0.info.connection}
                 Akkustand: {mihome-vacuum.0.info.battery}%
                  Total: {mihome-vacuum.0.history.total_area}m²
                   Reinigungen: {mihome-vacuum.0.history.total_cleanups}
            - type: 'custom:button-card'
              color_type: null
              color: var(--accent-color)
              icon: 'mdi:robot-vacuum-variant'
              name: Carlos
              styles:
                card:
                  - width: 100px
                  - height: 100%
            - type: markdown
              content: |-
                Filter: {mihome-vacuum.0.consumable.filter}% 
                 Sensoren: {mihome-vacuum.0.consumable.sensors}% 
                  Hauptbürste: {mihome-vacuum.0.consumable.main_brush}% 
                   Seitenbürste: {mihome-vacuum.0.consumable.side_brush}%
        - type: horizontal-stack
          cards:
            - type: 'custom:button-card'
              icon: 'mdi:play'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_start
            - type: 'custom:button-card'
              icon: 'mdi:pause'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_pause
            - type: button
            - type: 'custom:button-card'
              icon: 'mdi:home'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_home
            - type: 'custom:button-card'
              icon: 'mdi:crosshairs-gps'
              color: var(--accent-color)
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: switch.control_find
        - type: entities
          title: Alle Räume (deaktiviert)
          entities:
            - entity: input_boolean.statusVars_1_2_3
              name: Wohnen
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: Flur
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: Kinderzimmer
              icon: 'mdi:robot-vacuum-variant'
            - entity: input_boolean.statusVars_1_2_3
              name: GästeWC
              icon: 'mdi:robot-vacuum-variant'
      
      posted in Tester
      C
      Chris_104
    • RE: Test Adapter lovelace v0.2.x

      Hallo zusammen,

      @Christian kannst du mal ein Bild bzw. Code vom Xiaomi Staubsauger posten?
      Ich hänge da noch irgendwie am Type-Detector fest glaube ich 😞

      Vielen Dank schon im voraus 🙂

      posted in Tester
      C
      Chris_104
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
    The ioBroker Community 2014-2023
    logo