[ Gelöst ] Basic Image Bild einbinden

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

[OliverIO]

@iobrokermike

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

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

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

[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]

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

[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;
}

[ioBrokerMike]

@oliverio @Codierknecht

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

[OliverIO]

@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

[ioBrokerMike]

@oliverio

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