Koordinaten aus PNG/SVG extrahieren

[Benedikt Magnus]

Ich sitze derzeit daran, eine Flashanwendung nach Delphi/HTML zu portieren. Aufgabe der Anwendung ist es, eine Weltkarte anzuzeigen, in der die verschiedenen Staaten (je nach Modus) anhand bestimmter Werte eingefärbt werden. Das ist auch kein Problem, das rendern der Bilddateien bekomme ich mit Delphi hin und das Anzeigen per HTML ist trivial.

Nun sollen darüber hinaus noch zwei Dinge möglich sein:
- Beim Mousover über einen Staat soll ein Hinweistext angezeigt werden.
- Beim Klick auf einen Staat soll dies per Link zur entsprechenden Staatsseite führen.

Dachte ich mir, das geht ja ganz einfach mit verweissensitiven Grafiken, oder auch per SVG-Imagemap, für beides bräuchte ich aber Koordinaten für die Polygone der Staaten...

Mir liegen sowohl die Flächen der Staaten als auch deren Umrandung als PNG vor, letzteres sogar als SVG (alles siehe Anhang). Kennt jemand von euch eine Möglichkeit, damit irgendwie die Koordinaten für die HTML-Einbindung bestimmen zu können?
Für jeden Staat alle Koordinaten per Hand zu ermitteln kommt nicht in Frage, da sitze ich nächstes Jahr noch dran...

[Jens01]

ich bin raus

[Benedikt Magnus]

Ja. Die gerenderten Bilder sollen in einer Webseite eingebunden werden. Wie erhalte ich nun aus den vorliegenden Daten die nötigen Koordinaten, um das machen zu können?
Oder gibt es gar einen völlig anderen Weg, der sich einfacher realisieren ließe?

[himitsu]

Die "billigste" Lösung für Delphi (vermutlich geht das auch in HTML JavaScript)

Du hast doch das Farben-PNG ... das bearbeitest du noch ein bissl.
* jedes Land eine andere Farbe (da reichen auch 256 Farben)
Rot=0 > nichts
Rot=1 > Land 1
Rot=2 > Land 2
...
* Klick auf das sichtbare Bild
* das selbe Pixel im internen Farben-Bild auslesen
* Farbe = Index in der Länderliste

Bei SVG, braucht man nur 'ne ordentliche SVG-Klasse, wo man auslesen kann, welches "Polygon" an der gewünschten stelle liegt und dann muß man nur noch das Polygin mit dem Land verknüpfen ... z.B. Polygone Zählen und den Index als Index für Länderliste, oder Bezeichner/Kommentare im SVG hinterlegen.

[Jens01]

Naja, antworte ich doch.
Ich dachte, man könnte es so wie zB OpenGL machen. Da wird die Flächen bzw Linien in einer bestimmten Farbe eingefärbt -ohne sie auf dem Bildschirm anzeigen zu lassen-. Es kann dann die Farbe unter der Maus ermittelt werden und damit das Element. Nennt sich Colorpicking. Eventuell bringt es Dich ja auf eine Idee....

[Benedikt Magnus]

Vielleicht habe ich mich missverständlich ausgedrückt:
Mit Delphi findet nur das Rendering der Bilder statt (in regelmäßigen Abständen). Das Anzeigen erfolgt auf einer Webseite per HTML, sodass kein Flash mehr benötigt wird.

[Ghostwalker]

hmmm....ich würds so versuchen:


layer 01 (untester) -> png der Welt
Layer 02 (drüba) -> png der einzelnten Staaten.

Das ganze einfach über Divs mit entsprechenden css-Eigenschaften, js-handler an die Staaten-Divs..feddich.

Das kniffligste daran wär die Positionierung der Einzelstaaten, analog zur Weltkarte. Aber das muss nur einmal gemacht werden.

[himitsu]

Zitat:

Vielleicht habe ich mich missverständlich ausgedrückt:

Vom Prinzip her ist alles gleich, egal ob man den Code in Delphi oder in JavaScript/AJAX/HTML5/.... ausführt.

enweder/oder
* die Farben aus einem "unsichtbaren" Image-Layer auslesen
* die Farben aus zweiten Image auslesen
* extern eine Polygon/Staaten-Liste und beim Klick darein schauen
* beim SVG kann man eventuell die Staaten/Bezeichner intern zum Polygon/Gruppenobjekt speichern und beim Klick auslesen

[Benedikt Magnus]

Zitat:

Zitat von Ghostwalker (Beitrag 1355691)

layer 01 (untester) -> png der Welt
Layer 02 (drüba) -> png der einzelnten Staaten.

Das ganze einfach über Divs mit entsprechenden css-Eigenschaften, js-handler an die Staaten-Divs..feddich.

Und wie genau würde das für nichtrechteckige Staaten aussehen? Würde das Ganze nicht auch reagieren, wenn ich auf den transparenten Teil eines Staats-PNGs klicke, obwohl sich der eigentlich schon im nächsten befindet?

[Benedikt Magnus]

Zitat:

Zitat von himitsu (Beitrag 1355693)

Vom Prinzip her ist alles gleich, egal ob man den Code in Delphi oder in JavaScript/AJAX/HTML5/.... ausführt.

Ich werde mich mal erkundigen, wie sich das in JavaScript umsetzen ließe, das würde dann nämlich vielleicht gehen...

Edit: Okay, das Ganze dürfte sich mit Javascript per Canvas und Pixelvergleich lösen lassen. Vielen dank für eure Hilfe und himitsu für die Lösung!
Sollte es nicht klappen, melde ich mich nochmal. :lol:

[himitsu]

Zitat:

Zitat von Benedikt Magnus (Beitrag 1355694)

Und wie genau würde das für nichtrechteckige Staaten aussehen?

Siehe das eine beigelegte PNG ... nur dass dort viele Staaten die selben 4 Farben haben.
* auf das Bild mit den schwarzen "Rändern" klicken (kann auch ein schön bunt gestaltetes Bild sein)
* beim Klick das selbe Pixel in dem zweiten Farben-Bild auslesen

Bezüglich dem Vorschlag mit den verweissensitiven Grafiken:
http://wiki.selfhtml.org/wiki/HTML/M...itive_Grafiken
Theoretisch könnte man die Polygone der Länder aus dem PNG extrahieren
oder man versucht die Polygone aus dem Farb-Bild rauszuholen
> in der DP gab es in den letzten 2 oder 3 Jahren mal ein Thema dazu, wie man in einem Bitmap/Canvas Farbgrenzen erkennt und ein Polygon daraus erstellt. (also Bitmap-zu-Vektor > eventuell ging's auch um WindowsMetaFile *.WMF)

[Ghostwalker]

hmm..ja...da müsste man die einzelnen Staaten als eigene Layer implementieren....Würde wohl gehen ist aber knifflig.

Himitsu's Lösung ist da wohl einfacher. :)

Kommt halt drauf an, welche Browser du unterstützen musst :)

[Towmuz]

Vieleicht wäre das hier was für dich: https://d3js.org/

Die Grafiken werden live gezeichnet, aus den Koordinaten, brauchst nicht mit irgendwelchen Einzelgrafiken rumhantieren (Bsp. auf der Seite). Sind dann als SVG im HTML und du kannst direkt auf Objekte zugreifen (Staaten in deinem Fall, aber auch Städte oder sonst was...) per JS und dann halt mit allen erdenklichen Events versehen.

Gruß

[Benedikt Magnus]

So, himitsus Vorschlag ist umgesetzt und funktioniert genau wie gewünscht! Vielen Dank dafür!

Zitat:

Zitat von Towmuz (Beitrag 1355712)

Vieleicht wäre das hier was für dich: https://d3js.org/

Das sieht sehr interessant aus! Aber so, wie es aussieht, müsste ich dafür alles neu machen. Und es scheint umfangreicher zu sein als nötig. Dennoch vielen Dank für den Vorschlag! Vielleicht werde ich das in einem zukünftigen Projekt verwenden.

[Benedikt Magnus]

Sooo, dann möchte ich der Community aber auch nicht vorenthalten, was mit ihrer Hilfe in Delphi/FreePascal umgesetzt worden ist. :)

Hier könnt ihr euch das Ergebnis ansehen:
http://ars-regendi.com/worldmap/map106de

Sogar noch bevor die Spieler es zu Gesicht bekommen haben. Die kriegen das nämlich erst zu Weihnachten. Also nicht verraten! :lol:

[himitsu]

Bündnisse: Japan hat die falsche Farbe.

"Bündnisse": Wurde die Krim aktualisiert?

Krieg: Und ich bin mir nicht sicher, ob es stimmt, dass die USA angeblich nirgendwo kämpfende Soldaten haben.
Selbst Unsere sind in einigen Kriesengebieten unterwegs und die Amis kämpfen ja bekanntlich für ihr Leben gern. (heulen nur immer rum, wenn auch mal wer zurück schießt) :roll:

Ich hab das Gefühl, als wenn da die eine oder andere kleinere "unbedeutende" Insel fehlt?
Kuba/Haiti/Dominikanische, Hawai, das Bermudadreieck, Phillipinen, Neuseeland, Island, ...

Die einzelnen Staatennamen vielleicht nicht nur bei den Staatenklassen anzeigen?



Aber sonst sieht es nett aus.

[BrightAngel]

Hey zusammen!
Da kriech ich doch auch mal verspätet aus meinem Unterschlupf :)
Ich weiß, der TE hat schon eine Lösung, aber eventuell hilft das noch weiter: RaphaelJS

SVG im Browser is recht mächtig, eventuell kannst du sogar dein SVG direkt benutzen. Des Weiteren ist Javascript nicht mehr nur "die kleine Scriptsprache von nebenan", sondern hat sich zu einem echt mächtigem Monster gewandelt. Eventuell wird man da auch fündig. :)

[Benedikt Magnus]

Zitat:

Zitat von himitsu (Beitrag 1355899)

Bündnisse: Japan hat die falsche Farbe.

"Bündnisse": Wurde die Krim aktualisiert?

Krieg: Und ich bin mir nicht sicher, ob es stimmt, dass die USA angeblich nirgendwo kämpfende Soldaten haben.
Selbst Unsere sind in einigen Kriesengebieten unterwegs und die Amis kämpfen ja bekanntlich für ihr Leben gern. (heulen nur immer rum, wenn auch mal wer zurück schießt) :roll:

Ich hab das Gefühl, als wenn da die eine oder andere kleinere "unbedeutende" Insel fehlt?
Kuba/Haiti/Dominikanische, Hawai, das Bermudadreieck, Phillipinen, Neuseeland, Island, ...

Die einzelnen Staatennamen vielleicht nicht nur bei den Staatenklassen anzeigen?

Aber sonst sieht es nett aus.

Danke!
Die Karte wurde damals so erstellt, damit genau hundert Spieler darauf Platz finden.
Und die Inhalte hängen alle von den Spielern ab. Bündnisse, deren Farben, Kriege etc... :-D

Die Tooltips sind in der Tat noch in Bearbeitung. Da fehlen noch Beschreibungstexte und auch die Staatennamen sollen überall angezeigt werden. Aber danke für die Rückmeldung!

Zitat:

Zitat von BrightAngel (Beitrag 1355935)

Des Weiteren ist Javascript nicht mehr nur "die kleine Scriptsprache von nebenan", sondern hat sich zu einem echt mächtigem Monster gewandelt.

Das habe ich auch bemerkt! Dies war das erste Mal, dass ich mit Javascript gearbeitet habe und ich bin erstaunt, wie einfach sich damit programmieren ließ und wie flüssig alles selbst auf schwachen, alten Smartphones läuft.