Weather Icon vom KleinKlima werden abgeschnitten...

misux · 24 November 2019, 20:43:47

HI!

Bei mir werden manche Icons an den Seiten abgeschnitten... Ich finde den Fehler nicht warum... Hat einer eine Idee woran es sein kann?

hier der Code:

Code Auswählen

                 <div class="inline top">
                        <div data-type="weather" data-device="Wetter" data-get="iconAPI" data-imageset="kleinklima" style="width:350px" class=""></div>
                        <div data-type="label" data-device="Wetter" data-get="condition" class="inline big black bold"></div>

Und im Anhang wie es aussieht...

Habe auch schon verschiedene px werte getestet, class"cell" oder andere Werte bringen auch nix...

Hoffe jemand hat eine Idee...

Vielen Dank!

amenomade · 24 November 2019, 21:49:37

Vermutlich ist width 350px grösser als die Breite der hbox oder gridster Einheit.

misux · 25 November 2019, 05:28:27

Habe die auch schon viel kleiner gemacht, dann wird aber das Ganze symbol verkleinert.... Abgeschnitten ist es trotzdem...

amenomade · 25 November 2019, 09:51:36

Kannst Du deine ganze html Datei zur Verfügung stellen?

misux · 25 November 2019, 10:11:01

jup, mache ich heute Abend!

misux · 25 November 2019, 16:14:48

So hier der erste Abschnitt:

Denke das weiter drunter ist nicht notwendig...

Code Auswählen

<!DOCTYPE html>
<html>

<head>

    <script src="js/fhem-tablet-ui.js" defer></script>

</head>


<body data-confirmDelete='0' data-confirmJSError='1' data-addHtmlTitle='1' data-styleData='' data-availableJs='iconSwitch,iconLabel,iconRadio,knob,sortable,fbcalllist,weekprofile,readingsHistory,colorpicker,readingsGroup,uzsu,iconButtons' data-webName='WEB ' style="bg-#000000">

<div class="bg-gray">

<table class="sheet">
        <tr>

        <td width="30%">		
                 <div class="inline black top right-space">
                        <div data-type="label" class="top-space-1px bold bigger">Außentemperatur</div>
                        <div data-type="label" data-device="DOIFTempDurschnitt" data-get="state" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","#00FF00","firebrick"]'
                        data-unit="%B0C%0A" class="bold" style="font-size:8em;"></div>
			
			<div class="large bold">Luftfeuchtigkeit:</div>
                        <div data-type="label" data-device="TempAussenEingang" data-get="humidity" data-limits='[0,40,70]' data-colors='["cornflowerblue","green","firebrick"]'
                        data-unit="%" class="inline bold" style="font-size:4em;"></div>
        	
			<!--div data-type="label" class="bigger bold">Carport:</div>
                        <div data-type="label" data-device="TempAussenCarport" data-get="temperature" data-fix="1" data-limits='[-73,20,23]' data-colors='["cornflowerblue","green","firebrick"]'
                        data-unit="%B0C%0A" class="bold inline" style="font-size:5em;"></div-->
		</div>
	
	</td>


   	<td width="40%">
		<div class="inline top">
                        <div data-type="weather" data-device="Wetter" data-get="iconAPI" data-imageset="kleinklima" style="width:350px" class=""></div>
			<div data-type="label" data-device="Wetter" data-get="condition" class="inline big black bold"></div>
		</div>
	</td>

	<td width="30%">
		<div class="inline bigger bold black">
                        <div class="">Heute</div>
			<div data-type="label" data-device="Proplanta" data-get="fc0_tempMin" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'
                        data-unit="%B0C%0A" class="big inline"></div> - 
             		<div data-type="label" data-device="Proplanta" data-get="fc0_tempMax" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'
                        data-unit="%B0C%0A" class="big inline"></div>

 			<div class="">Sonne</div>
             		<div data-type="label" data-device="Proplanta" data-get="fc0_sun" data-limits='[0,40,80]' data-colors='["firebrick","#aa6900","green"]' data-unit="%" 
			class="medium inline"></div>

			<div class="">Regen</div>
                        <div data-type="label" data-device="Proplanta" data-get="fc0_chOfRainDay" data-unit="%" data-limits='[0,40,80]' data-colors='["green","#aa6900","firebrick"]'
                        class="medium inline"></div>
		</div>
	</td>

	</tr>
</table>

<br>
<br>

<div class="inline sheet bold black top-space-1x">		
		<div class="col-1-3">
				<div data-type="label" class="cell top-space normal">MORGENS</div>
				<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
			<div class="inline big" style="text-align:center;vertical-align:bottom">
				<div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
			</div>
		</div>
			<div class="col-1-3">
				<div data-type="label" class="cell top-space normal">MITTAGS</div>
				<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
			<div class="inline big" style="text-align:center;vertical-align:bottom">
				<div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
			</div>
		</div>
			<div class="col-1-3">
				<div data-type="label" class="cell top-space normal">ABENDS</div>
				<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
			<div class="inline big" style="text-align:center;vertical-align:bottom">
				<div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
			</div>
		</div>
</div>

Das ist der Teil auf dem unteren Bild...
<br>

amenomade · 25 November 2019, 16:28:00

Hmm Du arbeitest weder mit hbox/vbox noch mit gridster. Dann ist es nicht so dynamisch...

Ich würde width=40% in td und width:350px nicht kombinieren. 40% ist zwar dynamish, aber 350px dagegen nicht.
Was passiert, wenn Du einfach kein width=350px eingibst?

misux · 25 November 2019, 17:11:36

wenn ich das widht:350px raus nehme, dann wird das icon einfach unr kleiner...

Ich denke ich werde diesen Bereich auf hbox/vbox umstellen... und dann mal sehen was passiert

amenomade · 25 November 2019, 18:22:52

Zitat von: misux am 25 November 2019, 17:11:36
wenn ich das widht:350px raus nehme, dann wird das icon einfach unr kleiner...

Wahrscheinlich ist deine Seite weniger als 875 Pixels breit.
Zum Beispiel mit 700:
Mit td 40% definierst Du eine Spalte mit Breite 280px (700 * 0,4) , und dann willst Du ein Icon mit Breite 350px rein werfen ==> geschnitten

misux · 28 November 2019, 09:04:08

Hmm... das kann eigentlich nicht sein... Ist ein FullHD Display und an den Pixeln der Seite habe ich nichts angepasst...

Aber was auch komisch ist, das andere Symbole komplett dargestellt werden... Bewölkt oder teilweise Sonnig wird korrekt abgebildet...

misux · 30 November 2019, 17:03:43

Habe jetzt einen Bereich auf hbox Vbox umgestellt und manche Icons werde abgeschnitten... Muss das vielleicht so?

Code Auswählen

<div class="hbox" style="background:black">

                <div class="vbox">
                                <div data-type="label" class="cell top-space normal">MORGENS</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                                <div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima"></div>

                </div>
                        <div class="vbox">
                                <div data-type="label" class="cell top-space normal">MITTAGS</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                                <div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima"></div>
                </div>
                        <div class="vbox">
                                <div data-type="label" class="cell top-space normal">ABENDS</div>
                                <div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                                <div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima"></div>
                </div>
</div>

Siehe Bild... Das Linke Icon...

amenomade · 30 November 2019, 18:20:54

Und was gibt's in den Headers?

Ulm32b · 30 November 2019, 21:38:47

Zitat von: misux am 30 November 2019, 17:03:43
[...] manche Icons werde[n] abgeschnitten... Muss das vielleicht so?
[...]
Siehe Bild... Das Linke Icon...

Das muss nicht so, aber es ist so.
Die Ursache ist trivial: Bereits das Bild selbst (haze.png) ist auf der rechten Seite abgeschnitten.
Die Lösung: Die Datei mit einem Bildbearbeitungsprogramm nachbearbeiten, sodass auf der rechten Seite ein fließender Übergang entsteht.

amenomade · 30 November 2019, 23:55:35

Stimmt! Nutze kleinklima seit Jahren, und das hatte ich noch nie bemerkt!

misux · 01 Dezember 2019, 09:17:27

Also liegt das Problem an den Kleinklima Icons.. Ajajajaj, und ich suche mir einen Wolf seit Wochen...

Okayyy... Nun muss ich herausfinden welche nicht richtig angezeigt werden... Das sind 3,4 Stück... Muss es mal beobachten...

Vielen Dank für eure Unterstützung und Mühe!