Seite 7 von 7

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 18:46
von Wetterfrosch
jetzt brauch ich nochmal die Hilfe von Olicat ;-)

ich möchte nun mit imagecreatefrompng noch ein Wettericon mit einbauen, doch wenn ich es auf die Vorlage einfüge, dann geht die Transparenz und die Farben des Icons verloren, was mache ich falsch?

Update
Ich habe gerade entdeckt, wenn ich es auf einen weißen Hintergrund einfüge, dann passt es.
jetzt steh ich nur vor dem problem, dass ich für das widget einen blauen Hintergrund möchte, was tun fragte Zeus?

Muss ich eventuell jetzt erst eine bild in weiß erstellen, darauf das wettericon einfügen, das ganze als neues bild speichern und dann wieder den rest in dieses einbauen, d.h. das blaue dann darauf legen?

Ich vermute mein Ansatz ist richtig, doch etwas mache ich da noch falsch, hier mein code:

Code: Alles auswählen


$imgicon = imagecreatefrompng('BKN.png');
$imgbanner = imagecreatefrompng('banner.png');

$im1 = imagecreate(300 , 140);
imagecolorallocate ($im1, 255, 255, 255);
$text_farbe = ImageColorAllocate ($im1, 0, 0, 0);

imagecopy($im1, $imgicon, 0, 0, 0, 0, 62, 48); 
imagecopy($im1, $imgbanner, 62, 0, 0, 0, 238, 48); 

ImagePNG ($im1);

//

$im2 = imagecreate(300 , 92);

imagecolorallocate ($im2, 135, 206, 235); //RGB Farben
$text_farbe = ImageColorAllocate ($im2, 0, 0, 0);

$img1= imagecreatefrompng($im1);

imagecopy($im2, $img1, 0, 48, 0, 0, 300, 92); 

das Erstellen von im1 klappt, danach habe ich ein 300x140px großes weißes Bild und in der oberen linken Ecke das kleine Wettericon und rechts daneben das banner.
doch wie kann ich darunter nun das im2 300x92pix mit blauer grundfarbe darauf legen in das dann die werte wieder drauf gelegt werden?
so wie ich es mit diesem script gemacht habe, gemacht habe funktioniert es aufjeden fall mal nich.

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:19
von Tex
Ich habe das mal etwas erweitert und gleich für's Smartphone kompatibel gemacht: http://www.woldegk-wetter.de/lande-wr.html
Werde es sicherlich anderweitig noch nutzen können.... :thumbup:

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:20
von olicat
Hi!

Dein FEW-Icon hat einen weissen Hintergrund. Wie sieht es denn aus, wenn Du das transparent machst?
FEWtrans.png
FEWtrans.png (2.19 KiB) 932 mal betrachtet

Zumindest ich kann es hier - nachdem ich es auf transparent gesetzt habe, auch auf hellblauen Untergrund gut sehen:
banner5.png
banner5.png (22.93 KiB) 927 mal betrachtet
Oliver

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:28
von olicat
@Tex:

sehr, sehr beeindruckend. Gute Arbeit!
Am Smartphone werde ich nach Klick auf den obigen Link jedoch zu http://smart-lande-wr.html/ umgeleitet - was es aber nicht gibt?

BTW: Wo kommen die Daten zum Bedeckungsgrad bei Dir her?

Oliver

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:32
von Wetterfrosch
ok, muss ich mal testen, was aber komisch ist, schau mal was passiert nachdem ich es auf einen weißen hintergrund copiert habe und danach das blaue bannder DANEBEN legte.

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:36
von Wetterfrosch
Tex hat geschrieben: 13 Feb 2023, 19:19 Ich habe das mal etwas erweitert und gleich für's Smartphone kompatibel gemacht: http://www.woldegk-wetter.de/lande-wr.html
Werde es sicherlich anderweitig noch nutzen können.... :thumbup:
WOW, sieht noch viel professioneller als meins aus, hast du auch einen Landeplatz bei dir, wobei die Landepiste ist ja die von meinem Flugplatz hier ;-)

Ich habe meines mittlerweile auch noch etwas umgebaut.

Jetzt versuche ich noch das aktuelle wettericon rein zu bekommen, das ich über den metar-code vom nahegelegenen verkehrsflugplatz generiere, auf meiner homepage läuft das ja schon, wollte es jetzt auch noch in diese flugplatzseite einbauen, doch aktuell kämpfe ich ja noch mit dem farbproblem.

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 19:48
von Wetterfrosch
Oli,

wenn ich es transparent mache wirds noch schlimmer.
ist aber komisch, denn bei mir wird der mond auch blau, bei dir blieb er gelb, was ist bei mir anders als bei dir?
so wie es bei dir aussieht, würde es mir genügen.

komisch ist halt, wenn ich das original icon auf einen weißen hintergrund füge passt es, doch sobald ich das blaue banner daneben lege, wird der hintergrund blau, obwohl ich das banner ja daneben liegen habe, gugst du bilder im anhang.
lege ich es auf den blauen hintergrund, dann ist es katastrophal.

komisch ist jedoch, wenn ich das icon lokal bei mir auf dem rechner in paint auf einen blauen hintergrund lege, dann passiert nicht, das icon bleibt wie im originalzustand.

Habe mir versuchshalber gerade mal ein anderes Icon aus dem Netz runtergeladen, dort passiert genau das gleiche wenn ich es in das grundbild einfüge, somit liegt das problem nicht am png-bild sondern irgendwie am zusammenfügen per php.

Re: Windrose grafisch programmieren?

Verfasst: 13 Feb 2023, 23:44
von Wetterfrosch
@Oli

komme der sache näher, wenn ich das ganze mit imagecreatetruecolor anstatt mit imagecreat realisiere, dann bleiben die Farben erhalten nur bleibt hier der hintergrund schwarz (siehe Bildanhang), dieser soll aber blau werden, deswegen:

wie schaffe ich es jetzt noch in dieses bild das blaue mit den messwerten einzufügen welches ich mit imagecreate erstelle, d.h. wie füge ich diese beiden images zusammen?

update:

habs hinbekommen ;-)
Endergebnis kommt später ;-)

Re: Windrose grafisch programmieren?

Verfasst: 14 Feb 2023, 01:09
von Wetterfrosch
so, jetzt noch mit kleinem Wettericon oben links, welches ich durch Abfrage des metar Codes vom 20km entfernten Linienflughafen kreiere, bzw. wenn mein Regensensor Regen registriert, das Icon auf eine Regenwolke umspringt.

Re: Windrose grafisch programmieren?

Verfasst: 16 Feb 2023, 17:44
von olicat
Frank,

vielleicht noch als weitere Optimierungsmoeglichkeit:

Code: Alles auswählen

<meta name="theme-color" content="#BFEFFF" />
Damit wird im Chrome der obere Adresszeilenbereich auf Deine Hintergrundfarbe gesetzt.
Ich mag das. Aber das ist natuerlich Geschmackssache.

Beispiel:
https://ear.phantasoft.de
vs
https://ear8.phantasoft.de

Wobei das bei dieser Seite aufgrund der sonstigen "Farbgebung" nicht sinnvoll ist ...
Achja und es scheint auch nur beim mobilen Browser zu wirken.

Oliver