Hintergrund als transparenten Übergang?

[mguenther]

Hallo Zusammen,
ich bräuchte einmal die Hilfe von den Experten. Ich habe z.B. ein Bild mit einem großen Kühlschrank (es ist eigentlich eine Wärmepumpe) und ich würde gerne quasi in den Schrank hineinschauen wollen. Meine Idee war nun, ich lege mir das Bild in den Hintergrund, lege dann ein HTML-Widget (Rechteck, kein Quadrat) drüber und erzeuge einen Übergang von z.B. weiß in der Mitte des HTML Widgets zu transparent am Rand. Dann hätte man quasi einen Effekt, dass ich den Schrank "aufschneide" - so zumindest meine Gedanken-Welt. Konntet ihr mir folgen? Ich hatte an CSS gedacht und komme aber nur zu sowas:

	background: 
	linear-gradient(transparent, white 5%, white 95%, transparent);

Gibt es eine Möglichkeit, quasi oben/unten und rechts und links die Transparenz zu erzeugen?

Danke
Marcus

[liv-in-sky]

@mguenther sagte in Hintergrund als transparenten Übergang?:

linear-gradient(transparent, white 5%, white 95%, transparent);

evtl:

linear-gradient(90deg, transparent, white 20%, white 80%, transparent)

[OliverIO]

@liv-in-sky

Da könnte diese
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image?retiredLocale=de

helfen
Einstellbar in vis für den gesamten Hintergrund aber auch für jedes Widget über die Einstellmöglichkeiten in der Kategorie css Hintergrund

Das Bild in einem Grafikprogramm (Gimp) entsprechend vorbereiten. Png Format kann auch Alpha Kanal um die Transparenz für jedes Pixel zu steuern
Das hätte aber nur Auswirkung auf elemente die hinter dem Hintergrund liegen.
Ansonsten legst du alle deine Widgets auf das Element mit dem Hintergrundbild

[mguenther]

@liv-in-sky
naja, klar, damit "drehe" ich das Ganze um 90°, ich kombiniere es aber nicht mit oben/unten.
Ich habe auch schon mehrere linear-gradients hintereinander geschrieben, Problem ist nur, dass quasi das erste immer die folgenden überlagert.
Hier ein einfaches Beispiel zum "Z-Layer". Ich habe keine Idee mehr und ich wollte eigentlich den Vorschlag von @OliverIO vermeiden. Ich wollte ungern die Grafik noch einmal in Gimp oder anders anfassen. Da fehlt mir dann leider das Know-How. Ich habe eigentlich sogar ne AutoCad Datei von der "Außenhülle" der Wärmepumpe, mit der man das mit Sicherheit "einfach" bearbeiten kann. Aber da fehlt mir zum einen das Programm und halt auch das Know-How...

[liv-in-sky]

@mguenther eventuel radial oder

linear-gradient(transparent, white 20%, white 80%, transparent), linear-gradient(90deg, transparent, white 20%, white 80%, transparent)

sieht auch nicht so gut aus

dann könntest du noch einen rahmen mit transparent machen ?

[mguenther]

@liv-in-sky
ja, sieht auch nicht so gut aus - hatte auch schon ein Widget mit Rahmen und in der Mitte ein 2. Widget mit der Hintergrundfarbe. Sieht alles nicht gut aus... Muss mir wohl was anderes einfallen lassen...

[liv-in-sky]

@mguenther

sowas ?

[mguenther]

@liv-in-sky
nicht ganz - der Rahmen ist ja schwarz - bei mir liegt quasi die weiße Fläche im grünen Bereich und der Rahmen müsste dann ja grün sein - oder?

[liv-in-sky]

@mguenther der ist nicht schwarz - aber das muss einen tick dunkler sein, sonst sieht man es nicht

in den css tab

.shadowtest{
 box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.1);
}

widget

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"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,"class":"shadowtest"},"style":{"left":"720px","top":"725px","background":"","transform":"","background-color":"#FFFFFF","z-index":"2","width":"94px","height":"150px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"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,"class":"shadowtest"},"style":{"left":"777px","top":"668px","background":"","transform":"","background-color":"#6dc22e","width":"345px","height":"227px"},"widgetSet":"basic"}]

damit gemacht https://html-css-js.com/css/generator/box-shadow/

sonst fällt mir nix mehr ein

[mguenther]

@liv-in-sky

hilft nicht - ist nicht das, was ich will - trotzdem mal wieder Danke für deine Hilfestellung...

[OliverIO]

@mguenther sagte in Hintergrund als transparenten Übergang?:

z.B. ein Bild mit einem großen Kühlschrank (es ist eigentlich eine Wärmepumpe)

so richtig kann ich mir es nicht vorstellen.
eine wärmepunpe sieht ja nicht aus wie ein kühlschrank, nicht mal annähernd.

oder ich hab da eine falsche vorstellung.
und wo willst du da hineinschauen?
kannst du mal ein scribble machen, also schema zeichnung?

[mguenther]

@oliverio
Erdwärme
bastle gerade an meinem VIS für die Heizung, weil ich endlich meine Heizung auslesen kann. Ich wollte quasi das Schema in den "Kühlschrank" haben

[OliverIO]

@mguenther

ich verstehe es leider nicht.
die metapher kühlschrank auf diesem bild ist mir schleierhaft

[mguenther]

@oliverio
sorry, mein Kühlschrank sieht aus wie meine Wärmepumpe von Nibe. Ich würde gerne diese Skizze:

in diesem Bild haben (ich habe übrigens 2 Kühlschränke und beide sehen so aus):

(die Anschlüsse sind ja über die farbigen Dreiecke oben zu sehen). Was hier im Bild "fehlt" bzw nicht zu sehen ist, ist die Animation (die gestrichelten Linien sind in die Flußrichtung animiert). Der Oberhammer wäre eine ähnliche Darstellung wie von @Peoples https://forum.iobroker.net/assets/uploads/files/1573143488282-heizungsanlage.jpg

Ich bekomms nur nicht hin. Habe sogar schon bei Nibe angerufen. Die AutoCad Datei kann man von deren Homepage herunterladen, das Prinzipbild ist in einer Anleitung von denen enthalten. Also, auch alles i.O., aber die wollen nichts anderes herausgeben bzw. wollen nicht helfen.
Wenn jemand etwas Zeit übrig hätte, Ahnung von AutoCad - wäre super... Mit CSS klappt das so dann doch nicht.

Ich kanns leider nicht...

[dos1973]

@mguenther
Du willst den Inhalt des oberen Bildes im unteren Bild haben?

[mguenther]

@dos1973
das obere Bild ist quasi das Innenleben vom unteren.
Von der Logik her, so:

[OliverIO]

@mguenther

besonders hübsch ist es nicht.
aber die Auflösung der Bilder läst auch zu wünschen übrig

[mguenther]

@oliverio

ja, so ähnlich siehts/sahs bei mir auch aus.. Chefin "schimpft" schon, ich hätte wieder zu viel Zeit damit verbracht. Deswegen wollt ich ja auch einen Übergang "basteln"...

Trotzdem danke

[liv-in-sky]

@mguenther

das wird dir auch nicht weiterhelfen ?

[mguenther]

@liv-in-sky

danke dir erst einmal - ist halt nicht "unsere" Wärmepumpe. Ich suche weiter - ich muss mal sehen, wie es umsetzen kann. Momentan fehlen mir die Ideen bzw. das Know-How

so eine ähnliche Darstellung wie die von @OliverIO ist eigentlich das Gesuchte.