Windrose grafisch programmieren?

[WernerWetter]

Also die Windowrose und der Zeiger sind Bilder (svg). Das Javascript dreht nur den Zeiger entsprechend...

Die Start/Landebahn könnte man einfach in das Windrose bild einmalen. Die Landebahn ändert sich ja nicht

[wk893b]

Ja, du musst im Grafikprogramm die Datei mit dem Pfeil transparent machen.
D.h. nur der rote Pfeil ist zu sehen, der weiße Hintergrund muss weg.
Dann deckt nur der Pfeil und der Rest des Rechtecks lässt die Runway durchscheinen.
Für die Aktion würde ich die Dateiendung png, statt svg wählen.
So lässt sich Transparenz besser herstellen.

Nur so neben bei, falls einer der Pfeile später einmal zu sehr decken sollte, gibt es mit PHP eine Möglichkeit der Anpassung.

[Wetterfrosch]

Mit welchem Grafikprogramm lässt sich diese Transparenz realisieren?
Hab die Pfeile mit PowerPoint erstellt, kann das sowas auch oder Paint?

@WernerWetter
Kannst du dein javaScript mal posten, dann kann ich ja mal schauen, ob ich damit was anfangen kann?

[olicat]

Hi!

Gimp hat zwar eine recht steile Lernkurve. Es finden sich jedoch genuegend Beispiele zum Thema Transparenz im Netz.
Bezueglich der gewuenschten Funktion koenntest Du das etwa so loesen:

Code: Alles auswählen

#! /usr/bin/python3
# demonstriere die Auswahl eines zur Windrichtung passenden Bildes mit dem passenden Pfeil
# die Bilder sollten im Verzeichnis pngpath vorliegen - Namen der Bilder entsprechen denen im arr der Funktion

pngpath = "/var/www/html/img/"

def WindDirPNG(wdir):
  arr= ["N.png","N-NO.png","NO.png","O-NO.png","O.png","O-SO.png", "SO.png", "S-SO.png","S.png","S-SW.png","SW.png","W-SW.png","W.png","W-NW.png","NW.png","N-NW.png"]
  try:
    val=int((float(wdir)/22.5)+.5)
    s = arr[(val % 16)]
  except ValueError: s = "empty.png"
  return s

# main
winddir = 120      # Windrichtung in Grad als Input
print("nutze Pfeil aus Datei "+pngpath+WindDirPNG(winddir))

Das ist also auch voellig easy in PHP oder jeder beliebigen Sprache umsetzbar.

Oliver

[wk893b]

Ja, Oli hat Recht.

Gimp ist so ein Grafikprogramm, das auch Transparenz kann.
Mir war der Name nicht mehr eingefallen, hatte es vor längerer Zeit mal benutzt.
Außerdem ist es gratis aus dem Netzt downloadbar.
Aber man muss sich halt mit anfreunden.

[Wetterfrosch]

Muss ich mir mal in Ruhe alles anschauen.
Bevor ich in die Detailprogrammierung gehe, muss ich jetzt erst mal den Hintergrund im Bild wegbekommen.

Danach kommt der nächste Schritt, der mir aktuell auch noch etwas Probleme macht:
Ich muss ja den Windpfeil dann in PHP als Wasserzeichen über die Landebahn legen, richtig?
Doch wie zentriere ich den Windpfeil MITTIG über der Landebahn?
Soviel ich weiß orientiert sich so ein Wasserzeichen ja immer am Anfangspunkt (x und y) des Wasserzeichens, doch da sich der Windpfeil ja dreht, ändert sich ja dieser Anfangspunkt bei jedem Pfeil.
Ich muss somit die Lage des Pfeils irgendwie über dessen Mittelpunkt definieren.

Wenn ich dies dann gelöst habe, dann widme ich mich dem Teil von Olicat, nämlich wie ich den Windrichtungswerten die verschiedenen Windrichtungspfeile zuordne, wobei ich aktuell bei seinem Codeschnippsel noch nicht so ganz durchsteige.
In meinem Fall liegen die Windrichtungswerte als Gradzahlen vor, ich teile das ganze in 22,5°C Schtitte auf und habe für jeden 22,5° Schritt einen Pfeil als png Grafik hinterlegt, die Grafik habe ich dann mit 22.png, 45.png, 67.png, 90.png usw. bezeichnet und liegen alle im Verzeichnis Windrichtung auf meinem Webspace.
Als erste herrangehensweise hatte ich an sowas gedacht:

Code: Alles auswählen

if($windrichtung >= 0 && $windrichtung <= 11)
{$windpfeil = '0.png';}
if($windrichtung > 11 && $windrichtunf <= 33)
{$windpfeil = '22.png';}
if($windrichtung > 33 && $windrichtung <= 56)
{$windrichtung = '45.png';}
usw.

Aber das wäre sicherlich sehr umständlich, über eine Array-Lösung wie in Olicats Codeschnipsel ist das sicherlich eleganter zu lösen, doch in diese Materie muss ich mich erst einlesen, kenne mich mit der Array-Lösung noch nicht aus.

[olicat]

Hi!

Ich wuerde vermutlich eine Tabelle mit der Landebahn in Hintergrund (background) machen und im Innren als Bildelement das jeweilige PNG anzeigen.
Im Gimp kannst Du sehr leicht die Bilder auf Transparent schalten: Farben/Farbe nach Alpha.

Ich habe mir jetzt nicht viel Arbeit gemacht. Aber so ungefaehr (als technische Grundlage) waere es moeglich:

ezgif-5-7fe0d68c40.gif (42.3 KiB) 158 mal betrachtet

Die 4 Pfeile sind im Gimp durch einfaches Spiegeln (Bild/Transformation) entstanden. Natuerlich fehlen noch die Zwischenschritte und auch die Positionierung passt nicht recht - den urspruenglichen Aufloesungen der Grundlage geschuldet.
Ich will nur zeigen, das (und wie) es geht ...

Oliver

[Wetterfrosch]

@Oli
Leider konnte ich deinen Ausführungen nicht ganz folgen, ich dachte ich muss das ganze Schlußendlich in ein PHP-Script packen, die Landebahn als Hauptbild nehmen und die Pfeile als Wasserzeichen zentriert darüber legen?

Irgendwie bekomme ich das aber mit PHP nicht hin.
Habe jetzt mal einen transparenten Pfeil (45.png) mit einem Grafikprogramm erstellt und wollte nun den Pfeil per PHP-Script über die Grafik runway.png legen, alle Bilddateien sowie das PHP-Script liegen im selben Ordner, das Script habe ich aus dem Netz, doch es funktioniert aber nicht, bekomme immer eine Fehlermeldung.
Hab aber keine Ahnung warum und was ich daran ändern muss, dass das ganze klappt, Jemand von euch eine Ahnung?
Wenn ich das Original-Script oder meines (siehe unten) mit einem PHP-Code-Prüfer überprüfe, kommt eine Fehlermeldung, die lautet:

Fatal error: Uncaught TypeError: imagesx(): Argument #1 ($image) must be of type GdImage, bool given in /home/user/scripts/code.php:11
Stack trace:
#0 /home/user/scripts/code.php(11): imagesx(false)
#1 {main}
thrown in /home/user/scripts/code.php on line 11

Was ist "GDImage"?
Augenscheinlich hat das Problem etwas mit meiner Pfeilgrafik zu tun, hier erwartet das Script wohl ein Typ "GDImage"?

Das Script ist von hier:
https://www.sitepoint.com/watermark-images-php/

und hier meine Version:

Code: Alles auswählen

<?php  

 

header('content-type: image/png');  

 

$watermark = imagecreatefrompng('45.png');  //Pfeilgrafik

$watermark_width = imagesx($watermark);  

$watermark_height = imagesy($watermark);  

$image = imagecreatetruecolor($watermark_width, $watermark_height);  

$image = imagecreatefrompng('runway.png');  

$size = getimagesize('runway.png');  

$dest_x = $size[0] - $watermark_width - 5;  

$dest_y = $size[1] - $watermark_height - 5;  

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  

imagejpeg($image);  

imagedestroy($image);  

imagedestroy($watermark);  

 

?>

[Wetterfrosch]

Sodele, ich habe es jetzt mal soweit hinbekommen, dass der Windpfeil "45.png" schön über der Landebahn liegt, das ganze habe ich mit diesem Code bewerkstelligt:

Code: Alles auswählen

<?php
// Header setzten
header('Content-type: image/png');
 
// Bilder laden

$imgrunway = imagecreatefrompng("runway.png"); 
$imgwindpfeil = imagecreatefrompng("45.png"); 

// Bild erzeugen
$img = imagecreatetruecolor(664,664);
 
// Landebahn und Windpfeil einfügen
imagecopy($img, $imgrunway, 0, 0, 0, 0, 664, 664); 
imagecopy($img, $imgwindpfeil, 160, 160, 0, 0, 330, 320);  //160,160 ist die x und y Koordinate für die Positionierung 

// Bild anzeigen
imagepng($img);
 
// Speicher freigeben
imagedestroy($img); 

?>

Doch jetzt stehe ich vor dem Problem, wie kann ich automatisiert im script die Positionierung des Windpfeiles anlegen,?
Bei aktuellen 45° Windpfeil ist diese Koordinate 160,160, da sich die Positionierung jedoch immer an der x und y-Koordinate des Begin und Ende des Windpfeiles orientiert, ändert sich diese Koordinate ka bei jedem Windpfeil wieder, da jeder Windpfeil ja mit seinem Bildanfang und- Ende anders koordinatentechnisch auf dem Bild Runway liegt.

Gibt es irgendwie eine Möglichkeit, den Windpfeil automatisch immer mittig zu platzieren?

[Gyvate]

wenn ich das zu programmieren hätte, würde ich das mit Prototyping angehen und erst mal nur einen Punkt betrachten.
Dafür sorgen, dass der immer an der richtigen Stelle auf dem "runway" sitzt.
Wenn das funktioniert, würde ich um den Punkt den Pfeil mit der dazugehörigen Richtung aufbauen.
Erst mal einen ganz kleinen, den man dann schrittweise vergrössern kann.