Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [ Gelöst ] Basic Image Bild einbinden

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    [ Gelöst ] Basic Image Bild einbinden

    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      ioBrokerMike last edited by ioBrokerMike

      Moin

      Brauche eure Experten Hilfe.
      Hoffentlich bekomme ich es einigermaßen hin.

      Zustand : Ich lade (kopiere) mir mit einem Blockly alle 10 Minuten ein Bild her runter, das in ein Basic Image unter Signalbilder einbinde und dann aktualisiert Blockly die VIS-2 was nicht so toll ist, da wenn man aufs Tab sieht
      es gerade neu Aufbau.

      Tab Ansicht
      akt karte.png
      Blockly

      <xml xmlns="https://developers.google.com/blockly/xml">
       <block type="schedule" id="|7#_i-3f+:TA$*Y@.;#c" x="-412" y="13">
         <field name="SCHEDULE">*/10 * * * *</field>
         <statement name="STATEMENT">
           <block type="http_get" id="AkDfWKyL-hv$J:JZ*S%)">
             <field name="TIMEOUT">1000</field>
             <field name="UNIT">ms</field>
             <field name="TYPE">arraybuffer</field>
             <value name="URL">
               <shadow type="text" id="t-n%9OpDzr!FKK]TV@JT">
                 <field name="TEXT">https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_nib.png</field>
               </shadow>
             </value>
             <statement name="STATEMENT">
               <block type="controls_if" id="`ec[Y?D)ZlzB.vD1**m.">
                 <value name="IF0">
                   <block type="logic_compare" id="m]yn9bikHQh;|hoNXW*D">
                     <field name="OP">EQ</field>
                     <value name="A">
                       <block type="http_response" id="d1E?LhjH{a3{N{tDJ[r|">
                         <field name="ATTR">response.statusCode</field>
                       </block>
                     </value>
                     <value name="B">
                       <block type="math_number" id="*aN@v4zlkF8k#TnA`]l`">
                         <field name="NUM">200</field>
                       </block>
                     </value>
                   </block>
                 </value>
                 <statement name="DO0">
                   <block type="file_write" id="G*zsxg!0muuENl/_l6uY">
                     <value name="OID">
                       <shadow type="field_oid_meta" id="3x+ZBAJ!c;8BsXheaN-K">
                         <field name="oid">0_userdata.0</field>
                       </shadow>
                     </value>
                     <value name="FILE">
                       <shadow type="text" id="3L6G*uu}XA6J${0J@wtE">
                         <field name="TEXT">NDS.jpg</field>
                       </shadow>
                     </value>
                     <value name="DATA">
                       <block type="http_response" id="`+#nkI+`TRe_D@05{#[@">
                         <field name="ATTR">response.data</field>
                       </block>
                     </value>
                     <next>
                       <block type="update" id="+1[:ZgSEUb5NAt-}XJ5k">
                         <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                         <field name="OID">0_userdata.0.DWD.Karten_Update_</field>
                         <field name="WITH_DELAY">FALSE</field>
                         <value name="VALUE">
                           <block type="text_join" id="6n_:{W!%NJ;zioAUPGe7">
                             <mutation items="2"></mutation>
                             <value name="ADD0">
                               <block type="text" id="LlD}phqsX*i/4Bevuwp:">
                                 <field name="TEXT">Stand : </field>
                               </block>
                             </value>
                             <value name="ADD1">
                               <block type="time_get" id="?f5q(2Nj^0zDkpaP^h8N">
                                 <mutation xmlns="http://www.w3.org/1999/xhtml" format="true" language="false"></mutation>
                                 <field name="OPTION">custom</field>
                                 <field name="FORMAT">SS:mm</field>
                               </block>
                             </value>
                           </block>
                         </value>
                         <next>
                           <block type="control" id="[y1adPZ5wwR:F=]x}-nO">
                             <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="true"></mutation>
                             <field name="OID">vis-2.0.control.instance</field>
                             <field name="WITH_DELAY">TRUE</field>
                             <field name="DELAY_MS">1</field>
                             <field name="UNIT">sec</field>
                             <field name="CLEAR_RUNNING">FALSE</field>
                             <value name="VALUE">
                               <block type="text" id="G#rwJ3=*8u/@.!q)y-.U">
                                 <field name="TEXT">FFFFFFFF</field>
                               </block>
                             </value>
                             <next>
                               <block type="control" id="d#ND}x1)@j`VOWS3hPVf">
                                 <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="true"></mutation>
                                 <field name="OID">vis-2.0.control.data</field>
                                 <field name="WITH_DELAY">TRUE</field>
                                 <field name="DELAY_MS">1</field>
                                 <field name="UNIT">sec</field>
                                 <field name="CLEAR_RUNNING">FALSE</field>
                                 <value name="VALUE">
                                   <block type="text" id="eU*8[i0ge=(OUZZ/~CFE">
                                     <field name="TEXT">WandTab2024/Home</field>
                                   </block>
                                 </value>
                                 <next>
                                   <block type="control" id="%6EX2+I0#%9]7WH.[Yb|">
                                     <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="true"></mutation>
                                     <field name="OID">vis-2.0.control.command</field>
                                     <field name="WITH_DELAY">TRUE</field>
                                     <field name="DELAY_MS">1</field>
                                     <field name="UNIT">sec</field>
                                     <field name="CLEAR_RUNNING">FALSE</field>
                                     <value name="VALUE">
                                       <block type="text" id="iBNn9]gs)6fir0?8685k">
                                         <field name="TEXT">refresh</field>
                                       </block>
                                     </value>
                                   </block>
                                 </next>
                               </block>
                             </next>
                           </block>
                         </next>
                       </block>
                     </next>
                   </block>
                 </statement>
               </block>
             </statement>
           </block>
         </statement>
       </block>
      </xml>
      

      Wunsch :
      Nun hatte ich mir gedacht das Orginalbild im Basic Image unter Quelle einzubinden, aber da kann man nur Strecken.
      Gibt es eine Möglichkeit das Bild bearbeiten?

      Orginalbild
      org Karte.png

      OliverIO 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @ioBrokerMike last edited by 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 1 Reply Last reply Reply Quote 0
        • I
          ioBrokerMike @OliverIO last edited by

          @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.

          OliverIO 1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @ioBrokerMike last edited by

            @iobrokermike

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

            I 1 Reply Last reply Reply Quote 0
            • I
              ioBrokerMike @OliverIO last edited by

              @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.

              OliverIO 1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @ioBrokerMike last edited by 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 1 Reply Last reply Reply Quote 0
                • I
                  ioBrokerMike @OliverIO last edited by 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. 👍

                  Codierknecht OliverIO 2 Replies Last reply Reply Quote 0
                  • Codierknecht
                    Codierknecht Developer Most Active @ioBrokerMike last edited by Codierknecht

                    @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

                    1 Reply Last reply Reply Quote 0
                    • OliverIO
                      OliverIO @ioBrokerMike last edited by 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 1 Reply Last reply Reply Quote 0
                      • I
                        ioBrokerMike @OliverIO last edited by

                        @oliverio @Codierknecht

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

                        OliverIO 1 Reply Last reply Reply Quote 0
                        • OliverIO
                          OliverIO @ioBrokerMike last edited by

                          @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 🙂

                          1 Reply Last reply Reply Quote 1
                          • I
                            ioBrokerMike last edited by

                            @oliverio

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

                            1 Reply Last reply Reply Quote 1
                            • First post
                              Last post

                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            930
                            Online

                            32.1k
                            Users

                            80.6k
                            Topics

                            1.3m
                            Posts

                            3
                            12
                            137
                            Loading More Posts
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes
                            Reply
                            • Reply as topic
                            Log in to reply
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                            The ioBroker Community 2014-2023
                            logo