Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. CSS Filter in VIS: Viele mögliche Anwendungen

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.0k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.0k

CSS Filter in VIS: Viele mögliche Anwendungen

CSS Filter in VIS: Viele mögliche Anwendungen

Scheduled Pinned Locked Moved Visualisierung
12 Posts 3 Posters 3.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pix
    wrote on last edited by
    #1

    Hallo,

    bin heute auf die CSS-Funktion "Filter" gestoßen. Das ist ja wirklich eine mächtige Sache: 261_bildschirmfoto_2016-01-27_um_19.11.28.jpg
    Hier der Link: http://bennettfeely.com/filters/

    Mir fielen auf Anhieb zwei Anwendungen ein:

    1. Ich nutze die Vorhersage GRafik vom Wetterdienst YR.no. Dieses Diagramm lade ich von den yr.no-Servern. Die Grafik ist leider sehr hell, dunkle Linien auf weißem Grund. Manchmal ist mir das zu hell. Mit dem Invert Filter läßt sich die Grafik einfach invertieren, aus weiß wird schwarz.````
      .invert {
      -webkit-filter: invert(.8);
      filter: invert(.8);
      }
    
    2) Ich habe zwei Webcams in der Wohnung. Eine davon ist immer an, auch bei Anwesenheit. Wenn sich im Raum etwas bewegt (Bewegungssensor MOTION=true), wird der blur-Filter angewendet und das Webcam-Bild so anonymisiert. Das kann man natürlich auch abhängig von Anwesenheit o.ä. machen. Und mir ist auch klar, dass nur die Darstellung anonymisiert wird. Das Bild kommt natürlich "klar" an.
    
    So geht's:
    
    1) Skript im Javascript Adapter anlegen
    

    var instanz = 'javascript.0';

    // Filter für Anonymisierung Wohnzimmer
    createState('VIS.Kamera.1.Filter', {
    name: 'Kamera 1 Wohnzimmer - Filter ',
    desc: 'Aktiver Filter für Kamera 1 im Wohnzimmer',
    type: 'string',
    read: true,
    write: true
    });

    var idFilterKamera1 = instanz + '.VIS.Kamera.1.Filter',
    idMotionWohnzimmer = "hm-rpc.0.IEQ0374891.1.MOTION"/IR Wohnzimmer.MOTION/;

    var filter = 'kamera_blur', // wird in VIS unter CSS-Klasse als Binding eingefügt. Ohne Punkt!
    dauer = 10; // Dauer in Sekunden

    on (idMotionWohnzimmer, function (obj) {
    if (obj.newState.val === true) {
    setState(idFilterKamera1, filter);
    setStateDelayed(idFilterKamera1, ' ', dauer * 1000); // nach Xs zurückstellen
    }
    });

    Die Variable javascript.0.VIS.Kamera.1.Filter wird bei Bewegung mit dem String 'kamera_blur' beschrieben (ohne Punkt vorn). Nach 10s wird der String gelöscht. Das Skript nach dem ersten Start evtl. nocheinmal starten, damit die Variable auch angelegt wird.
    
    In VIS nun das Widget, welches das Kamerabild anzeigt markieren und rechts in den Widgeteinstellungen unter CSS-Klasse ein Binding mit der Variable eintragen. In meinem Fall:
    

    { javascript.0.VIS.Kamera.1.Filter}

     ![261_bildschirmfoto_2016-01-27_um_19.32.47.jpg](/assets/uploads/files/261_bildschirmfoto_2016-01-27_um_19.32.47.jpg) 
    Dann im Reiter CSS noch diese Zeilen einfügen:
    

    .kamera_blur {
    -webkit-filter: blur(15px);
    filter: blur(15px);
    }

    
     ![261_bildschirmfoto_2016-01-27_um_19.36.39.jpg](/assets/uploads/files/261_bildschirmfoto_2016-01-27_um_19.36.39.jpg) 
    Das ganze sollte man natürlich an die eigenen Gegenheiten anpassen. 10s sind sicher zu kurz. Der Bewegungsmelder sendet in größeren Abständen. Zum Testen sind die 10s aber gut.
    
    Viel Spass beim Probieren!
    
    Gruß,
    
    Pix

    ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

    1 Reply Last reply
    0
    • P Offline
      P Offline
      pix
      wrote on last edited by
      #2

      Schnell noch eine Anwendung:

      Die Flot-Grafiken sind ja sehr schön. Leider sind die Achsbeschriftungen nur in dunkler Farbe bzw. in der Farbe der Linie möglich. Auf dunklem Grund sieht man da wenig. Daher wende ich den "invert" Filter auf die Grafik an. Dann wird aus schwarz ein Weiß. Bilder sagen mehr, als …. 261_bildschirmfoto_2016-01-27_um_19.47.37.jpg 261_bildschirmfoto_2016-01-27_um_19.47.11.jpg
      Wenn man nun beim Erstellen der Grafiken noch an die invertierten Farben denkt, kann das gut werden.

      Gruß

      Pix

      ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

      1 Reply Last reply
      0
      • A Offline
        A Offline
        aquapro
        wrote on last edited by
        #3

        wow!

        Danke für die Info pix.

        <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

        1 Reply Last reply
        0
        • A Offline
          A Offline
          aquapro
          wrote on last edited by
          #4

          Hi pix,

          ich spiele gerade etwas mit den Filtern. Nun möchte ich im vis auch eine Grafik invertieren.

          Wo muss der Code hin? Steh gerade etwas auf dem Schlauch.

          Gruß

          Tino

          <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

          1 Reply Last reply
          0
          • P Offline
            P Offline
            pix
            wrote on last edited by
            #5

            Du markierst in VIS das Widget mit der Grafik. Rechts in den Widget Einstellungen /Generell / CSS Klasse schreibst du zB invertieren (wichtig: ohne Punkt). Dann öffnest du rechts den CSS-Reiter und fügst den Code````
            .invertieren {
            -webkit-filter: invert(.8);
            filter: invert(.8);
            }

            ein (mit Punkt vor "invertieren"). Fertig!
            
            Gruß
            
            Pix
            [2661_2019-01-04-main.zip.pdf](/assets/uploads/files/2661_2019-01-04-main.zip.pdf)

            ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

            1 Reply Last reply
            0
            • A Offline
              A Offline
              aquapro
              wrote on last edited by
              #6

              Dann hatte ich das schon richtig gemacht, aber …
              > Dann öffnest du rechts den CSS-Reiter und fügst den Code

              filename="invertieren1.PNG" index="0">~~
              Wenn ich dann die view öffne, wird der Code nicht ausgeführt.

              Wechsel ich zurück in den Editor, ist der Code auch weg.

              ???

              <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

              1 Reply Last reply
              0
              • A Offline
                A Offline
                aquapro
                wrote on last edited by
                #7

                pix, hilfe! 🙂

                <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

                1 Reply Last reply
                0
                • P Offline
                  P Offline
                  pix
                  wrote on last edited by
                  #8

                  Hallo,

                  Wenn dein CSS Code verschwindet, kann das mit der VIS Version zusammenhängen. Hast du die neueste Version?

                  Gesendet mit Tapatalk

                  ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    aquapro
                    wrote on last edited by
                    #9

                    Ich hab noch 0.8.3 drauf. Hatte mich wegen der vielen Probleme nicht getraut auf 0.8.6 zu gehen.

                    In 0.8.4 sollte ja was mit css gefixed sein. Aber Du hattes am 27.1. schon geschrieben, da war ich der Meinung Du hattest zu dem Zeitpunkt noch 0.8.3 drauf.

                    Gruß

                    Tino

                    <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

                    1 Reply Last reply
                    0
                    • A Offline
                      A Offline
                      aquapro
                      wrote on last edited by
                      #10

                      So, da eh alles instabil läuft, hab ich jetzt vis auf version 0.8.6 gezogen.

                      Nach Neustart wurde das verschwundene Script sofort gezeigt und ausgeführt.

                      Leider nur kleiner Trost, solange die Speicherprobleme bleiben.

                      Danke pix

                      Gruß

                      Tino

                      <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

                      1 Reply Last reply
                      0
                      • BluefoxB Offline
                        BluefoxB Offline
                        Bluefox
                        wrote on last edited by
                        #11

                        @aquapro:

                        Leider nur kleiner Trost, solange die Speicherprobleme bleiben. `
                        Welche denn?

                        1 Reply Last reply
                        0
                        • A Offline
                          A Offline
                          aquapro
                          wrote on last edited by
                          #12

                          Sorry bluefox, wollte nicht verwirren.

                          Mit Speicherproblem meine ich RAM Problem allgemein.

                          Siehe http://forum.iobroker.org/viewtopic.php … =60#p19121
                          3435_screenshot__42_.png

                          <size size="85">BananaPi / Jessie / ioBroker deinstalliert, keine Upgradesicherheit</size>

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          466

                          Online

                          32.4k

                          Users

                          81.3k

                          Topics

                          1.3m

                          Posts
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                          ioBroker Community 2014-2025
                          logo
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Recent
                          • Tags
                          • Unread 0
                          • Categories
                          • Unreplied
                          • Popular
                          • GitHub
                          • Docu
                          • Hilfe