Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [ Gelöst ] Basic Image Bild einbinden

NEWS

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

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

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

[ Gelöst ] Basic Image Bild einbinden

Geplant Angeheftet Gesperrt Verschoben Visualisierung
12 Beiträge 3 Kommentatoren 438 Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO OliverIO

    @iobrokermike

    Ich glaube einigermaßen zu verstehen, dass du hier mehrere Probleme hast:

    Vis-2 aktualisiert sich
    David, meinst du den Hinweis von vis auf dem Bildschirm?

    Widget Basic Image
    Das einbinden scheint kein Problem zu sein?

    Was meinst du mit bearbeiten? Willst du es manuell bearbeiten oder per Script?
    Welche Aktionen willst du durchführen?
    Was soll am Ende herauskommen?

    I Offline
    I Offline
    ioBrokerMike
    schrieb am zuletzt editiert von
    #3

    @oliverio sagte in Basic Image Bild einbinden:

    ... meinst du den Hinweis von vis auf dem Bildschirm?

    Vis wird ja durch das Blockly aktualisiert.
    Was ich nicht wirklich will.

    ... Das einbinden scheint kein Problem zu sein?

    Richtig, das einbinden ist nicht das Problem.
    Das Problem ist nur an welcher Stelle, unter Basic Image - Signalbilder kann man ja das Bild mit Horizontale [0] ,Vertikale [0] und Bildgröße in px [0] so einstellen das nur der Kartenausschnitt zu sehen ist. Dann aktualisiert sich aber Basic Image nicht.
    Wenn ich das unter Allgemein Quelle einbinden würde aktualisiert sich zwar Basic Image nur dann ist das ganze Bild zusehen.

    Was soll am Ende herauskommen?

    Das ist schon die Tab Ansicht von oben.

    Was meinst du mit bearbeiten? Willst du es manuell bearbeiten oder per Script?
    Welche Aktionen willst du durchführen?

    Ich hatte schonmal das Bild in Allgemein Quelle hinterlegt (was ja Klappt) und dann mit CSS Skalieren bzw Beschneiden.

    Mfg
    IOBrokerMike

    Achtung ! Sehkraft 25% | 60% , kein scherz
    Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.2 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

    OliverIOO 1 Antwort Letzte Antwort
    0
    • I ioBrokerMike

      @oliverio sagte in Basic Image Bild einbinden:

      ... meinst du den Hinweis von vis auf dem Bildschirm?

      Vis wird ja durch das Blockly aktualisiert.
      Was ich nicht wirklich will.

      ... Das einbinden scheint kein Problem zu sein?

      Richtig, das einbinden ist nicht das Problem.
      Das Problem ist nur an welcher Stelle, unter Basic Image - Signalbilder kann man ja das Bild mit Horizontale [0] ,Vertikale [0] und Bildgröße in px [0] so einstellen das nur der Kartenausschnitt zu sehen ist. Dann aktualisiert sich aber Basic Image nicht.
      Wenn ich das unter Allgemein Quelle einbinden würde aktualisiert sich zwar Basic Image nur dann ist das ganze Bild zusehen.

      Was soll am Ende herauskommen?

      Das ist schon die Tab Ansicht von oben.

      Was meinst du mit bearbeiten? Willst du es manuell bearbeiten oder per Script?
      Welche Aktionen willst du durchführen?

      Ich hatte schonmal das Bild in Allgemein Quelle hinterlegt (was ja Klappt) und dann mit CSS Skalieren bzw Beschneiden.

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #4

      @iobrokermike

      Okay, wo ist jetzt das Problem?
      Also klappt alles.

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      I 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

        @iobrokermike

        Okay, wo ist jetzt das Problem?
        Also klappt alles.

        I Offline
        I Offline
        ioBrokerMike
        schrieb am zuletzt editiert von
        #5

        @oliverio sagte in Basic Image Bild einbinden:

        lso klappt alles.

        Sorry, kommt nicht nicht Rüber.

        Das Problem ist : ich möchte das Blockly los werden, aber dann aktualisiert sich das Basic Image nicht, da das Bild in den Signalbildern hinterlegt ist.
        Und wenn ich es in der Quelle hinterlege ist das Bild zu groß bzw teile mit dabei die ich nicht sehen will.

        Mfg
        IOBrokerMike

        Achtung ! Sehkraft 25% | 60% , kein scherz
        Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.2 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

        OliverIOO 1 Antwort Letzte Antwort
        0
        • I ioBrokerMike

          @oliverio sagte in Basic Image Bild einbinden:

          lso klappt alles.

          Sorry, kommt nicht nicht Rüber.

          Das Problem ist : ich möchte das Blockly los werden, aber dann aktualisiert sich das Basic Image nicht, da das Bild in den Signalbildern hinterlegt ist.
          Und wenn ich es in der Quelle hinterlege ist das Bild zu groß bzw teile mit dabei die ich nicht sehen will.

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von OliverIO
          #6

          @iobrokermike

          Okay, also kleine Schritte
          Du erzählst zu viel, was du nicht machst als das, was du machst.
          Hilfreich ist manchmal auch einfach das Widget zu exportieren.
          Wenn du das Blocki nicht haben willst, dass du ja nur dazu verwändest, ein Bild zu laden und irgendwo abzuspeichern, könntest du den Originallink doch direkt in das Basic Image

          Die Größe begrenzen, beziehungsweise nur Ausschnitte aus dem Bild zeigen, kann man mit zusätzlichen CSS befehlen bewerkstelligen.
          Dazu liefere bitte
          Den Link von dem Bild
          Konkrete Angaben, was sichtbar sein soll, was nicht sichtbar sein soll.

          Der Erklär Meister bist du nicht, eventuell hilft dir ChatGPT dabei, deinen Input in besser verständlichen Angaben umzuwandeln.

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          I 1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @iobrokermike

            Okay, also kleine Schritte
            Du erzählst zu viel, was du nicht machst als das, was du machst.
            Hilfreich ist manchmal auch einfach das Widget zu exportieren.
            Wenn du das Blocki nicht haben willst, dass du ja nur dazu verwändest, ein Bild zu laden und irgendwo abzuspeichern, könntest du den Originallink doch direkt in das Basic Image

            Die Größe begrenzen, beziehungsweise nur Ausschnitte aus dem Bild zeigen, kann man mit zusätzlichen CSS befehlen bewerkstelligen.
            Dazu liefere bitte
            Den Link von dem Bild
            Konkrete Angaben, was sichtbar sein soll, was nicht sichtbar sein soll.

            Der Erklär Meister bist du nicht, eventuell hilft dir ChatGPT dabei, deinen Input in besser verständlichen Angaben umzuwandeln.

            I Offline
            I Offline
            ioBrokerMike
            schrieb am zuletzt editiert von ioBrokerMike
            #7

            @oliverio sagte in Basic Image Bild einbinden:

            Der Erklär Meister bist du nicht, eventuell hilft dir ChatGPT dabei, deinen Input in besser verständlichen Angaben umzuwandeln.

            Zumindest in Schriftlicher form hast du Vollkommen recht. :+1:

            Mfg
            IOBrokerMike

            Achtung ! Sehkraft 25% | 60% , kein scherz
            Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.2 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

            CodierknechtC OliverIOO 2 Antworten Letzte Antwort
            0
            • I ioBrokerMike

              @oliverio sagte in Basic Image Bild einbinden:

              Der Erklär Meister bist du nicht, eventuell hilft dir ChatGPT dabei, deinen Input in besser verständlichen Angaben umzuwandeln.

              Zumindest in Schriftlicher form hast du Vollkommen recht. :+1:

              CodierknechtC Offline
              CodierknechtC Offline
              Codierknecht
              Developer Most Active
              schrieb am zuletzt editiert von Codierknecht
              #8

              @iobrokermike

              man könnte statt einem Basic-Image einfach ein HTML-Widget nehmen:

              <div style="width:400px;height:300px;border:1px solid red">
                <img src="https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png" alt="Paris" style="float:left;width:100%;height:100%;object-fit:cover;margin-top:-10px">
              </div>
              

              Der rote Rand ist nur zu Demo-Zwecken. Der kann natürlich später weg.

              79e62880-00ad-45f6-8334-352ef0a32808-image.png

              "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

              Proxmox 9.1.1 LXC|8 GB|Core i7-6700
              HmIP|ZigBee|Tasmota|Unifi
              Zabbix Certified Specialist
              Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

              1 Antwort Letzte Antwort
              0
              • I ioBrokerMike

                @oliverio sagte in Basic Image Bild einbinden:

                Der Erklär Meister bist du nicht, eventuell hilft dir ChatGPT dabei, deinen Input in besser verständlichen Angaben umzuwandeln.

                Zumindest in Schriftlicher form hast du Vollkommen recht. :+1:

                OliverIOO Offline
                OliverIOO Offline
                OliverIO
                schrieb am zuletzt editiert von OliverIO
                #9

                @iobrokermike said in Basic Image Bild einbinden:

                https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png

                den oberen teil bekommt man mit einem negativen margin-top hin.
                der muss aber direkt auf das img element. an das kommst du durch die widget einstellungen aber nicht direkt ran, da margin-top nicht vererbt wird.
                den unteren bereich, dann durch die anpassung der höhe des widgets.

                damit es wiederverwendbar ist wurde die css klasse als custom klasse definiert. daher muss der name clippedimage dann auch im general bereich eingetragen werden

                hier das image zum importieren

                [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png","class":"clippedimage"},"style":{"left":"405px","top":"95px","width":"400px","height":"346px","margin-top":"","padding-top":"","overflow-x":"","overflow-y":""},"widgetSet":"basic"}]
                

                und im css reiter noch folgendes ergänzen

                .clippedimage img {
                    margin-top: -80px;
                }
                

                cb6b025f-018e-4e64-9cb0-a350e2e480da-image.png

                Meine Adapter und Widgets
                TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                Links im Profil

                I 1 Antwort Letzte Antwort
                0
                • OliverIOO OliverIO

                  @iobrokermike said in Basic Image Bild einbinden:

                  https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png

                  den oberen teil bekommt man mit einem negativen margin-top hin.
                  der muss aber direkt auf das img element. an das kommst du durch die widget einstellungen aber nicht direkt ran, da margin-top nicht vererbt wird.
                  den unteren bereich, dann durch die anpassung der höhe des widgets.

                  damit es wiederverwendbar ist wurde die css klasse als custom klasse definiert. daher muss der name clippedimage dann auch im general bereich eingetragen werden

                  hier das image zum importieren

                  [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png","class":"clippedimage"},"style":{"left":"405px","top":"95px","width":"400px","height":"346px","margin-top":"","padding-top":"","overflow-x":"","overflow-y":""},"widgetSet":"basic"}]
                  

                  und im css reiter noch folgendes ergänzen

                  .clippedimage img {
                      margin-top: -80px;
                  }
                  

                  cb6b025f-018e-4e64-9cb0-a350e2e480da-image.png

                  I Offline
                  I Offline
                  ioBrokerMike
                  schrieb am zuletzt editiert von
                  #10

                  @oliverio @Codierknecht

                  Vielen Dank
                  Für eure Geduld, besonders @oliverio was du aushalten musstes.

                  Mfg
                  IOBrokerMike

                  Achtung ! Sehkraft 25% | 60% , kein scherz
                  Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.2 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

                  OliverIOO 1 Antwort Letzte Antwort
                  0
                  • I ioBrokerMike

                    @oliverio @Codierknecht

                    Vielen Dank
                    Für eure Geduld, besonders @oliverio was du aushalten musstes.

                    OliverIOO Offline
                    OliverIOO Offline
                    OliverIO
                    schrieb am zuletzt editiert von
                    #11

                    @iobrokermike said in [ Gelöst ] Basic Image Bild einbinden:

                    Für eure Geduld, besonders @oliverio was du aushalten musstes

                    alles gut. das kommt öfters vor.

                    ich hoffe du bist mir wegen der reflektion nicht böse.
                    ich bin froh wenn man gewisse dinge mitgeteilt bekommt.
                    ob man sie anwendet ist dann immer noch ein anderes :)

                    Meine Adapter und Widgets
                    TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                    Links im Profil

                    1 Antwort Letzte Antwort
                    1
                    • I Offline
                      I Offline
                      ioBrokerMike
                      schrieb am zuletzt editiert von
                      #12

                      @oliverio

                      Nein, man kann keinen böse sein der einen Freiwillig helfen will.

                      Mfg
                      IOBrokerMike

                      Achtung ! Sehkraft 25% | 60% , kein scherz
                      Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.2 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

                      1 Antwort Letzte Antwort
                      1
                      Antworten
                      • In einem neuen Thema antworten
                      Anmelden zum Antworten
                      • Älteste zuerst
                      • Neuste zuerst
                      • Meiste Stimmen


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      431

                      Online

                      32.5k

                      Benutzer

                      81.6k

                      Themen

                      1.3m

                      Beiträge
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Anmelden

                      • Du hast noch kein Konto? Registrieren

                      • Anmelden oder registrieren, um zu suchen
                      • Erster Beitrag
                        Letzter Beitrag
                      0
                      • Home
                      • Aktuell
                      • Tags
                      • Ungelesen 0
                      • Kategorien
                      • Unreplied
                      • Beliebt
                      • GitHub
                      • Docu
                      • Hilfe