Navigation

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

    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

    • Profile
    • Following 0
    • Followers 8
    • Topics 33
    • Posts 950
    • Best 130
    • Groups 2

    CrunkFX

    @CrunkFX

    Forum Testing

    195
    Reputation
    222
    Profile views
    950
    Posts
    8
    Followers
    0
    Following
    Joined Last Online
    Email iobroker@klesec.com Website astoria.systems Location Kleve,NRW Age 25

    CrunkFX Follow
    Forum Testing Starter

    Best posts made by CrunkFX

    • [Anleitung] WireGuard mit WireGuard-UI auf Proxmox

      Hallöchen,

      nachdem hier immer wieder Fragen bezüglich VPN etc. kommen, habe ich mich entschlossen eine kleine Anleitung zum Thema WireGuard zu erstellen. Ich habe versucht die Anleitung so einfach und kurz wie möglich zu halten.

      Installationszeit ca. 15 Minuten je nach Internetverbindung
      Stand V1.2.2 18.01.2022
      Github Link https://github.com/KleSecGmbH/ioBroker/tree/main/wireguard

      Voraussetzungen:

      • Proxmox als Grundgerüst mit Kernel Version min.: 5.11 Ältere Version?
      • Einen Dual-Stack Internetanschluss (also kein DS-Lite, hierzu kommt bei Bedarf eine gesonderte Anleitung)
      • Portfreigabe im Router (Protokoll: UDP, Port: 51820 , auf die IP Adresse des neuen Linux Containers)
        !!! Keine Portfreigabe auf den im späteren Verlauf erstellten Port 5000 setzen !!!
      • Falls keine feste IP vorhanden ist benötigt ihr einen Hostnamen. Das kann z.b. MyFritz sein oder DynDns, Hauptsache ein Dienst mit dem ihr auf eure aktuelle IP verweisen könnt.

      Anleitung:


      Zunächst müssen wir das LXC Template für Ubuntu 21.04 oder 21.10 installieren.
      23a3f946-e4a5-474a-a547-6958fa6c692b-image.png
      3fb3bf2a-9774-45c6-b75b-3225ab5e816a-image.png
      Anschließend basierend auf diesem Image einen neuen Container anlegen
      25a469ce-ffa4-4ce4-8579-f82a26de4b89-image.png
      einen Hostnamen vergeben sowie ein Passwort
      8d3d3004-0642-49ec-a769-a316d4297118-image.png
      Danach das Image auswählen
      e7c06c25-6059-423f-bd14-844678c0e382-image.png
      Und mit den Standardwerten bis zur Netzwerkkonfiguration weitermachen.
      8d03a6b7-3e7a-4a07-9b84-f13fa3af28f5-image.png
      cd74e576-f949-4463-a69a-1597ba0bee81-image.png
      f95aff1e-1e0e-4da8-885e-7568a8df179a-image.png
      Nun noch eine IP vergeben und der erste Teil wäre geschafft.
      8bc94ae4-1c5f-409d-bbbd-06ff2135d3f0-image.png


      Ab hier wird auf dem Proxmox Host gearbeitet!

      Zunächst passen wir die Konfiguration des neu erstellten Containers an.
      Dazu mit dem Befehl

      nano /etc/pve/lxc/100.conf
      

      (!! 100 durch die Nummer bei eurem Container ersetzen !!)

      die Konfigurationsdatei anpassen.
      a65c3fd4-81aa-4728-af46-16f5c42366fc-image.png
      Und diese beiden Zeilen am Ende der Datei anhängen:


      Proxmox Version 7.xx :

      lxc.cgroup2.devices.allow: c 10:200 rwm
      lxc.mount.entry: /dev/net dev/net none bind,create=dir
      

      Proxmox Version 5.xx/6.xx:

      lxc.cgroup.devices.allow: c 10:200 rwm
      lxc.mount.entry: /dev/net dev/net none bind,create=dir
      

      1aa5c539-812d-4779-9366-bdebbbdc0449-image.png

      Nach dem Einfügen das Fenster mit STRG + X --> Enter speichern und verlassen.

      Danach auf dem Proxmox Host die Zugriffsrechte für den Tunneladapter freigeben mit dem Befehl:

      chown 100000:100000 /dev/net/tun
      

      Ab hier wird auf dem neuen Container gearbeitet!

      Danach können wir unseren LXC/CT starten und uns anmelden.

      Ich habe alle zur Installation notwendigen Befehle und Konfigurationsdateien in einem kleinen Shell-Skript zusammengefügt.
      Dazu also folgendes ausführen:

      wget https://raw.githubusercontent.com/KleSecGmbH/ioBroker/main/wireguard/installer-pve.sh -O installer-pve.sh && bash installer-pve.sh
      

      Der Installer läuft bis zu diesem Punkt automatisch durch. Die abgefragten Punkte ALLE mit Enter bestätigen, da später in der Grafischen Oberfläche Konfiguriert wird.



      Nachdem wir erfolgreich WireGuard und WireGuard-UI Installiert haben, können wir WireGuard-UI Konfigurieren.

      Dazu rufen wir http://IP-AdresseVomLinuxContainer:5000 auf und melden uns mit Benutzer und Passwort admin an.

      Die Anmeldedaten können mit dem Installer und dem Punkt Anmeldedaten ändern geändert werden.

      Zunächst müssen wir den WireGuard Server Konfigurieren. Dazu muss in den Global Settings unter dem Punkt Endpoint-Address euer Hostname(MyFritz, DynDns) oder eine feste IP (falls vorhanden) Bei Fragen hierzu siehe oben!
      8de68576-79f6-4a70-b7f6-bdf31d921f8f-image.png
      Nachdem wir Hostname/IP eingegeben haben und auf Apply Config geklickt haben, müssen wir noch einen kleinen Punkt durchführen um Clients anlegen zu können.

      Dazu im Fenster WireGuard Server unter dem Punkt Post Up Script folgendes eintragen:

      iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE
      

      und um Feld Post Down Script folgendes eintragen:

      iptables -D FORWARD -i %i -j ACCEPT; iptables -D FORWARD -o %i -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE
      

      0fd33499-0c08-4957-bdb0-793707a58e14-image.png
      Danach speichern und Apply Config drücken.

      Clients anlegen:

      Ab hier dürfte alles recht selbsterklärend sein.
      Im Menü WireGuard Clients auf New Client drücken
      377d8ef8-46b8-4529-95b6-bef2138920dd-image.png
      Name und Email Konfigurieren
      1a4718cc-3dca-4f2f-9cc5-547b66d513d6-image.png
      und Bestätigen.

      Nun bekommt ihr einen Client mit einem QR Code den ihr mit der WireGuard App scannen könnt oder alternativ als Datei zum Download für Desktoprechner.

      ee5aaacd-cca2-4320-95aa-ac9a65a54351-image.png

      Sollten sich doch Fehler eingeschlichen haben, bitte melden. Getestet wurde auf Proxmox V7.0-11.
      Bei Bedarf kann ich diese Anleitung gerne für RasPi und Konsorten ebenfalls erstellen.

      LG
      CrunkFX

      posted in ioBroker Allgemein
      CrunkFX
      CrunkFX
    • [Vorstellung] Shelly Style Widgets

      Nachdem es im anderen Thread unübersichtlich wurde geht´s jetzt hier weiter.

      Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert 😊

      Die hier erstellten Widgets sind den Widgets aus Allterco´s Shelly App nachempfunden. Diese bestehen aus Gruppierten VIS Widgets und benötigen sofern nicht anders angegeben nur die in VIS standardmäßig vorhandenen Widgets.

      In dieser Test Vis kann ausprobiert werden: Klick mich!

      Installation:


      Schritt 1 -- Kopieren der Widgets
      Zur Benutzung dieser Widget Vorlagen muss für das jeweilige Widget der RAW Code vom GitHub Link kopiert werden. Dies bitte mit STRG+A und STRG+C kopieren und in VIS mit STRG+V einfügen. Da aufgrund der großen Base64 Codierungen die Kontextmenüs der Browser nicht anständig funktionieren.

      Schritt 2 -- Einfügen in VIS
      In VIS wird nun der eben Kopierte Code eingefügt
      3973e271-d467-4d7f-b87b-778ed20447a7-image.png

      !!! Beim Import wird auch die Position des Widget mit importiert. Falls das Widget also nicht zu sehen ist bitte den kompletten Arbeitsbereich ansehen ob das Widget nicht vielleicht doch an einer nicht Sichtbaren Stelle gelandet ist.

      Schritt 3 -- Konfigurieren
      Widgetgruppen in IOBroker werden über Attribute mit Werten und Datenpunkten versorgt.

      Beispiel Switch:
      7889a1bc-1b97-4584-9f2b-c31758d80db5-image.png

      Zu den einzelnen Widget´s werden noch Anleitungen erstellt!


      Switches:

      Switch

      e8cd1740-29ee-4a96-9daa-4c11a39cc955-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch

      Switch mit Power
      345900e5-313d-4e15-8315-75e29e842304-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power

      Da Woody Spezial
      63ca0739-1e95-4daa-9828-db838a4edb9b-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody

      Switch mit Input
      4b0a9eab-c466-40e3-965b-9e01fd7bef25-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch -w Input

      Power-Switch mit Input
      dfc18be2-bd15-436e-b608-ee0307e85536-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power -w Input

      DaWoody Spezial mit Input
      149fd658-e2df-4071-a67e-acaac9759c01-image.png
      Code:https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody -w Input


      Sensoren:

      Temperatur und Feuchtigkeit mit Batterie
      cbb87185-ccce-43de-a1ec-0e2b9dc64104-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp-Bat

      Temperatur und Feuchtigkeit
      f961e138-e957-4db6-b41d-f45e557e3785-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp

      Energy
      346e441b-a4e6-40f4-adc3-e24ff105f99e-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Power

      Sensor
      3126dab6-9a89-4a8c-87a3-8d184ed81f64-image.png

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor


      Thermostat:

      Thermostat
      7f16639e-04ba-4f7a-96e8-f1cef9f6777f-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

      Dimmer:

      Dimmer
      cda7bd57-5b66-443b-a6dd-7ccdb6e37fa2-image.png

      Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:
      a38b0908-5b20-4c8f-b660-1685c72b66f1-image.png 7eba693c-3586-4e0c-b00f-e3dfe1bb09e0-image.png 43feff10-cef4-479a-a413-f04a282b15d2-image.png

      Sollte machbar sein.

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer


      Shutter:

      Shutter
      a2f78832-dc7b-42f4-8385-ab02ac6ea7ae-image.png
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

      Mediaplayer:

      Mediaplayer

      Test-Link: hier
      2b664205-ec7e-495c-87f5-082c127f9d9c-image.png

      Play/Pause funktioniert nur bei korrekter Rückmeldung !

      Wer hier Spielereien wie Lauftext nutzen möchte, der kann bei Track und Artist das einfügen. In die geschweiften Klammern muss dann der Datenpunkt:

      <marquee scrollamount="2" scrolldelay="100"> {0_userdata.0.input}</marquee>
      826085c3-d8fa-422d-a700-fcf19cb1201a-image.png

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer

      Mediaplayer XL V2

      Test Link: hier

      3624602f-5a97-409c-83e9-a491d12104ba-image.png

      Nachdem es mit dem ursprünglichen Widget einige Probleme mit dem HTML Widget gab, hab ich das Widget von Grund auf neu erstellt. Ebenso gibt es nun eine Version für Spotify.
      Das Widget benötigt nun den Metro Widgets Adapter!!! und einen CSS Eintrag.

      Installation:
      1. Metro Widgets Adapter installieren
      4b4817d0-ac54-43a0-be2c-99850fb7b209-image.png
      2. CSS ins Projekt oder Global CSS kopieren:

      /* ---- Shelly Styled Widgets CSS ---- */
      /*           @2021 CrunkFX             */
      
      /* ######     Slider Start      ###### */
      .shstyledwidgets-bar .metro .slider .complete {
      	-webkit-appearance: none;
      	background-color: #37d0fa;
      	-moz-border-radius: 2px 0 0 2px;
      	border-radius: 3px 0 0 3px;
      	-webkit-transition: .2s;
      	transition: opacity .2s;
      	-moz-box-shadow: inset 0 0 5px #000000;
      	-webkit-box-shadow: inset 0 0 5px #000000;
      	box-shadow: inset 0 0 5px #000000;
      }
      
      .shstyledwidgets-bar .metro .slider .marker:active {
      	outline: none;
      }
      
      .shstyledwidgets-bar .metro .slider .marker {
      	-webkit-appearance: none;
      	border-width: 0px;
      	top: -1px;
      	z-index: 2;
      	appearance: none;
      	height: 14px;
      	width: 22px;
      	background: #27506c;
      	cursor: pointer;
      	border-radius: 1px;
      	-moz-box-shadow: inset 0 0 0px #000000;
      	-webkit-box-shadow: inset 0 0 4px #000000;
      	box-shadow: inset 0 0 4px #000000;
      }
      
      .shstyledwidgets-bar .metro .slider {
      	background-color: transparent;
      }
      
      .shstyledwidgets-bar2 .metro .slider .complete {
          height: 10px;
      	-webkit-appearance: none;
      	background-color: #37d0fa;
      	-moz-border-radius: 2px;
      	border-radius: 2px 2px 2px 2px;
      	-webkit-transition: .2s;
      	transition: opacity .2s;
      	-moz-box-shadow: inset 0 0 5px #000000;
      	-webkit-box-shadow: inset 0 0 5px #000000;
      	box-shadow: inset 0 0 5px #000000;
      }
      
      .shstyledwidgets-bar2 .metro .slider .marker:active {
      	outline: none;
      }
      .shstyledwidgets-bar2 .metro .slider .marker {
      opacity:0;
      }
      .shstyledwidgets-bar2 .metro .slider {
      	background-color: transparent;
      }
      /* ######       Slider End      ###### */
      

      fd5187fd-cd37-400f-81ad-3e93f34828f1-image.png

      3. WebApp starten und

      a7b8469c-a640-4c61-b1ae-f7907272c541-image.png

      Alexa: Playerpfad eingeben
      Um die Automatische Einrichtung zu nutzen muss der Pfad zum Alexa Player kopiert werden. Das geht so :
      7c83a11d-f4e6-48ce-8ba3-037a209df885-image.png Danach in der WebApp: e7ee11f0-b4ee-4131-aee3-a8cda86043d2-image.png
      Bitte das Kopieren der Langen Widget Codes über STRG+A und STRG+C machen, da die Browserdialoge sonst die Seite zum Absturz bringen können.
      Spotify: Instanznummer angeben

      Danach das Ergebnis kopieren und als Widget importieren

      Das Widget kann Weiterhin manuell Eingerichtet werden.
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer XL

      Alle verwendeten Assets stehen hier zur Verfügung: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images
      Falls das jemand nachbauen will, hat der liebe @da_Woody meine Anleitung glattgefeilt und als PDF erstellt. Anleitung Ansehen

      Viel Spaß damit. Für Vorschläge bin ich offen.

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: Wie sehen Eure Visualisierungen aus?

      @arteck e2851a99-4444-449c-b0ab-c86fee11161d-image.png 🤙 🤠

      Das ist mein Versuch an einem Nachbau der Quadclient Visualisierung von Gira
      grafik.png

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: VIS eigenes Widget erstellen

      @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

      Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

      Dimmer
      f970f4dc-efd1-4346-8bed-ca4422443c9c-image.png

      Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:
      2c2277d8-d304-4e92-a7fb-79c664ea799f-image.png f0fb01d8-80fb-4b68-8c9a-a95d7747f7bf-image.png 75c13992-7e04-44a0-b5a4-70a9fba52024-image.png

      Sollte machbar sein.

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

      Shutter
      61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

      Sensor
      5878c4c0-57f0-4758-a777-4207e176d5e7-image.png

      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: Kamerabild responsive in VIS

      @Curtis777 Probiers mal damit, ist zwar ein Workaround sollte aber gehen:

      <div id="contentframe" style="position:relative; top: -198px; left: -260px;">
         <iframe width="1024" height="768" scrolling="no" frameBorder="0"  src="http://192.168.0.199/video/livemb.asp " style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
      </div>
      
      width="1024" height="768" <!--  Diese Auflösung wird oben um 0.5 im IFrame reduziert  -->
      
      top: -198px; left: -260px <!--  Leider verschiebt sich das Bild je nach Auflösung. Das kannst du hiermit anpassen  -->
      

      Benutzung:

      1. basic-html Widget anlegen
      2. html Copy und Paste
      3. Für den ersten Test die Größe des Widgets auf "width: 508px" und "height: 286" setzen.

      Schau mal ob das bei dir Klappt.

      MFG
      CrunkFX

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: [gelöst]für VIS html Schriftorientation

      @liv-in-sky
      Ich hab dir da mal was gebaut, ich verwende ein kleines Javascript in dem HTML Code welches den Text nach jedem Buchstaben mit einem Zeilenumbruch ausstattet. Um dir das besser zu veranschaulichen, hab ich mal eine kleine Tabelle vorbereitet.

      Die eigentliche Funktion besteht aus:

      CSS Teil:

      yourtext span {
                  display: block;
                  }
      

      Skript

      
      var text = document.getElementsByTagName('yourtext')[0];
      text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
      
      

      Verwendung

      <yourtext>Oktober</yourtext>
      

      Beispiel:

      <head>
          <style>
              yourtext span {
                  display: block;
              }
      
              #table1 td,
              th {
                  border: 1px solid #999;
                  padding: 0.5rem;
              }
          </style>
      </head>
      
      <body>
          <table id="table1" class="blueTable">
              <thead>
                  <tr>
                      <th></th>
                      <th>Wetterwerte</th>
                      <th colspan="3">2020</th>
                  </tr>
                  <tr>
                      <td rowspan="4" style="font-size:26px">
                          <yourtext>Oktober</yourtext>
                      </td>
                      <td>Durchschnitt</td>
                      <td>23°C</td>
                      <td>74°F</td>
                      <td>10%</td>
                  </tr>
                  <tr>
                      <td>Minimum</td>
                      <td>18°C</td>
                      <td>68°F</td>
                      <td>2%</td>
                  </tr>
                  <tr>
                      <td>Maximum</td>
                      <td>31°C</td>
                      <td>91°F</td>
                      <td>30%</td>
                  </tr>
                  <tr>
                      <td>Mirfällnixein :)</td>
                      <td>200°C</td>
                      <td>542°F</td>
                      <td>1000%</td>
                  </tr>
          </table>
          <script>
              var text = document.getElementsByTagName('yourtext')[0];
              text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
          </script>
      </body>
      
      

      Ergebnis
      e76d9006-c8b3-4ac6-86d6-a2ea070fa74c-image.png

      Ich hoffe das hilft dir weiter

      MFG
      CrunkFX

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: VIS eigenes Widget erstellen

      @dali-g Etwas verspätet aber dennoch 🙂 :

      Tutorial

      1. Zuschnitt
      Zunächst beginne ich mit einem Screenshot von der Shelly App
      1024-2219.jpg
      Diesen öffne ich in Paint 3D 😉
      Dort schneide ich den Teil den ich benötige zunächst grob aus da80f827-75c0-4362-81e4-f496545ac2ce-image.png
      Dann in der Groß Ansicht nochmal fein c4d25376-699b-401b-b339-219db19cb4ef-image.png
      Dadurch haben wir eine feste Breite wenn ich die Screenshot´s immer vom selben Gerät mache.

      2. Objekte entfernen
      Hierzu benutze ich das Auswahl Werkzeug, markiere mir eine Stelle die sich gut kopieren lässt. Dann kopiere ich die mit STRG+C , STRG+V und schiebe den kopierten Teil über das alte Objekt 969b08d2-02c0-4ce3-ad6b-6caa2a3b98a8-image.png
      Das gleiche mache ich auch mit den anderen Objekten.

      3. On/Off
      Hierzu nehme ich mir einen Screenshot bei dem das Gerät aus ist. Ich öffne diesen ebenfalls in Paint3D. Der Screenshot muss hierfür nicht verkleinert werden, da die Pixeldaten ja gleich bleiben. Dort kopiere ich mir dann den Teil raus den ich brauche und schiebe diesen Pixelgenau über das Eingeschaltete Objekt. (Das geht natürlich auch andersrum) Das kann u.U. etwas fummelig sein und ich gebe zu das Paint 3D hierfür nicht die beste Lösung ist. Trotzdem ist en zum bearbeiten eine ganz gute Lösung, daher verwende ich das. Der Switch mit Input war da etwas komplizierter, hier musste Gimp ran. 504f8fc6-a286-4aa7-abad-cccc46a65f14-image.png

      4. VIS
      Wenn wir dann unsere 2 Bilder exportiert haben, können wir zur VIS rüber gehen.
      Da ich die Bilder als Base64 Codieren möchte besuche ich zunächst die Seite base64-image.de
      8958e7c2-2b4d-4656-abd2-710f44088306-image.png
      Dort droppe ich die beiden eben erstellten Bilder und bekomme 2 Base64 Strings wenn ich auf Copy Image Klicke
      In der Vis erstellen wir zuerst ein Bulb Widget und packen bei Icon On und Icon Off die Base64 Strings rein.
      6b35d93f-504d-452d-af93-aa39fe77a014-image.png
      Anschließend ziehen wir das Bulb Widget so breit, dass das Bild passt.

      Um später alles in einer Gruppe konfigurieren zu können, verwende ich Gruppen Variablen. Diese werden in den Widget´s fest hinterlegt und können später durch anklicken der Gruppe dynamisch verändert werden. Wichtig ist sich zu merken welche Variable wofür ist. Das kann schnell unübersichtlich werden. Im Fall des Schalters sehen die Werte bei mir so aus
      f718c044-9d34-4675-ad01-d0c885698149-image.png

      Object ID sollte klar sein.
      Min gibt den Wert an den der Schalter sendet wenn er ausgeschaltet wird.
      Max gibt den Wert an den der Schalter sendet wenn er eingeschaltet wird.

      Da wir mehrere Objekte übereinander platzieren ist es wichtig die Objekte an der Z-Achse auszurichten. Dafür müssen wir in allen Objekten den Z Index konfigurieren. 85eaf188-5fcd-4c9a-8c57-5b74bac33765-image.png
      Da unser Schalter nach ganz hinten kommt bekommt er die Position 1. Alle Elemente die darauf liegen entsprechend eine höhere Zahl.

      Damit der Schalter nur dort 4465e436-1342-4b82-a9cf-422fc6e52021-image.png bedienbar ist nehme ich mir ein Bild Widget ohne Bild und packe es mit Z Index 2 dorthin wo nicht bedient werden soll 2a848697-1937-4083-a49f-dd859f8cfa6c-image.png dort würde man nur auf das Bild Klicken und nix passiert.

      Dann platziere ich die weiteren Elemente auf dem Bild. Alle mit Z-Index 3483f3b00-94c1-415b-831a-0c9d796c876a-image.png Von links nach rechts: Bild-Widget, String,Bild-Widget,String

      Das rechte der beiden Bild Widgets bekommt ein Bild direkt zugewiesen. Hierfür nutze ich Icons von Icons8, droppe diese in den Base64 Converter und packe den String in die Bild URLdef8a053-824f-4ca2-847d-82690d0dbb36-image.png

      Das Bild links bekommt wieder eine Gruppenvariable713a6105-9b9e-4c48-9861-4070fc43feb7-image.png
      Der Text links auch
      38c699a4-53d0-450d-9bb8-5c5b6c8d7b58-image.png
      Beim Text rechts gebe ich zu der Gruppenvariable noch eine Einheit und einen Testtext mit an abc68183-5207-4257-a344-02be60cbb8a8-image.png

      Dann haben wir alle Widgets konfiguriert. Nun können wir die Elemente gruppieren. Dazu alles auswählen, rechtsklick und gruppieren. a7314674-e4b6-4d25-959b-39e3915f80b3-image.png 052b7b0d-75bc-47c7-821b-d85bd8560572-image.png

      Sind die Elemente Gruppiert können wir auswählen wieviele Variablen wir haben. Aktuell brauchen wir:
      groupAttr1 = Beschreibung
      groupAttr2 = Wert
      groupAttr3 = Objekt ID
      groupAttr4 = Wert für an
      groupAttr5 = Wert für aus
      groupAttr6 = Bild links

      Also wählen wir bei Attribute 6 Stück aus
      a56ed45b-7fcf-4e4c-a379-1f73ca1ab186-image.png
      Nun haben wir 2 Gruppen an Einstellmöglichkeiten. Attributname ist die Beschreibung der Variable damit man den überblick behält. Attributtyp die Art der Variable. In unserem Fall sind 1,4 und 5 nur Textwerte also lassen wir das Attribut leer. 2 und 3 sind Objekte daher wählen wir Objekt ID und 6 ist Bild 7473a654-ce30-49b2-aa70-6d12beeff5d6-image.png

      Ist das Fertig könne wir das nun Gruppierte eigene Widget füttern.
      9012c408-a681-4da7-bbd5-7ec45f76812f-image.png
      Als Bild kann ebenfalls wieder ein Base64 String verwendet werden oder eben ein lokales Bild.

      Dann sollte das laufen.

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: [Vorstellung] Shelly Style Widgets

      Mediaplayer XL (TEST)

      Test Link: Hier

      df0674b1-a9a1-43e5-bf89-cd249f41ddfa-image.png

      Es ist ein sehr aufwendiges Widget geworden, daher hab ich mir was zur Einrichtung überlegt.
      Dieser Weg funktioniert allerdings aktuell nur für die Alexa Fraktion. Falls mich einer mit den Spotify Datenpunkten füttern könnte wäre das Top.

      Um nicht 17 Datenpunkte auswählen zu müssen, hab ich einen Konfigurator erstellt, der aus dem Ornderpfad des Alexa Adapters die einzelnen Datenpunkte pflückt und als fertig importierbares Widget exportiert. Dazu in der WebApp den Pfad zum Alexa Player Ordner angeben. Z.b. : alexa2.0.Echo-Devices.xxxxxxxxxxx.Player ohne Punkt am Ende !!!!
      WebApp: Hier!
      Bitte das Kopieren der Langen Widget Codes über STRG+A und STRG+C machen, da die Browserdialoge sonst die Seite zum Absturz bringen können.
      Danach das Ergebnis kopieren und als Widget importieren

      Das Widget kann Weiterhin manuell Eingerichtet werden.
      Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer XL

      !! Auch hier habe ich alle Funktionen vie Datenpunktliste erstellt, da ich keine Alexa zum Testen habe. Also bitte sämtliche Fehler bemängeln 😉 !!

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: Wie sehen Eure Visualisierungen aus?

      @pi78 OK
      Installation:


      Vor der Installation müssen im userdata.0 Ordner einige Datenpunkte angelegt werden.
      Folgende müssen angelegt werden:

      Dabei ist main_view ein Unterordner in Userdata
      Und der Wert in Klammern der Wert der in den Datenpunkt nach dem Erstellen geschrieben werden Muss!

      • 0_userdata.0.main_view.topheader (Header1)
      • 0_userdata.0.main_view.topview (Wettervorhersage)
      • 0_userdata.0.main_view.bottomheader (Header1_bottom)
      • 0_userdata.0.main_view.bottomview (Wetter)
      • 0_userdata.0.GIRA_Buttons (Button)
      • 0_userdata.0.main_view.camheader (Header1)

      Außerdem benötigt die VIS HQwidgets, JQuery Widgets und Colorpicker.
      Danach das Projekt hier herunterladen und importieren.
      Fragen hierzu bitte per PN um hier nicht den Thread zu zu müllen 😉

      posted in Visualisierung
      CrunkFX
      CrunkFX
    • RE: Synology VPN - Zugriff beschränken

      @liv-in-sky Hier der Link zur WireGuard Anleitung. https://forum.iobroker.net/topic/49177/anleitung-wireguard-mit-wireguard-ui-auf-proxmox

      @Negalein
      Zum Thema Zugriffsbeschränkung kannst du nach dem Anlegen der Clients bei allowed ip´s (grüner Pfeil)
      1dfd9144-8277-46f2-b76b-bd5c39bf9bfc-image.png für jeden Client einzeln bestimmen auf welche IP´s dieser zugriff hat.

      LG CrunkFX

      posted in Off Topic
      CrunkFX
      CrunkFX

    Latest posts made by CrunkFX

    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 Reine Neugier 😊 Falls da Probleme auftreten kannst du dich ja melden.

      LG

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 Wann hast du denn vor dein Produktivsystem umzuziehen?

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 Jo

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 ja denn cgroup wird in Zukunft raus gepatcht

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 Ok welches V6 läuft denn da? Ich habe die Erfahrung gemacht, dass ein Update von 6 auf 7 nur erfolgen soll wenn mindestens 6.7 installiert ist. Wenn du also ne ältere Version hast, erst Kernel updaten, dann klappt das eigentlich auf Anhieb.

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: Brauche Hilfe bei proxmox v6 zu v7

      @saeft_2003 Hast du jetzt aktuell noch Probleme nach dem Update?

      posted in Proxmox
      CrunkFX
      CrunkFX
    • RE: [Anleitung] WireGuard mit WireGuard-UI auf Proxmox

      @flybywire Hast du denn den port angepasst auf dem neuen system? Es können nicht 2 wireguard Instanzen über den selben port Laufen.

      posted in ioBroker Allgemein
      CrunkFX
      CrunkFX
    • RE: [Anleitung] WireGuard mit WireGuard-UI auf Proxmox

      @andy61 Moin, ich werde dir Idee Mal mit aufnehmen und schauen ob sich das Umsetzen lässt.

      LG

      posted in ioBroker Allgemein
      CrunkFX
      CrunkFX
    • RE: [Anleitung] WireGuard mit WireGuard-UI auf Proxmox

      @saeft_2003 Hast du Proxmox geupdated? Oder wann ist das passiert?

      posted in ioBroker Allgemein
      CrunkFX
      CrunkFX
    • RE: [Anleitung] WireGuard mit WireGuard-UI auf Proxmox

      @saeft_2003 Kannst du das mal mit der Desktop App machen, die ist etwas aufschlussreicher

      posted in ioBroker Allgemein
      CrunkFX
      CrunkFX
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
    The ioBroker Community 2014-2023
    logo