Hallo Leute,

ich habe seit längerem die Idee eine Anwendung mit einer Heatmap zu erstellen.
Ich möchte Grafikdateien, PDF und DWG als Hintergrund laden und anhand von Messdaten eine transparente Heatmap als Overlay über diesen Hintergrund legen.
Leider sind meine Programmierkenntnisse begrenzt und ich hoffe ihr könnt mir ein par nötige Vorgehensweisen beschreiben wie ich zu meinem Ziel komme.

Evtl. kennt der eine oder andere die WLAN-Software "ekahau heatmapper".
Ich möchte etwas ähnliches erstellen doch für Messdaten aus z. b. einer .csv Datei und damit DECT Messungen darstellen.
Ich möchte die Anwendung als WindowsForms erstellen.

Meine bisherigen Fragen:
- Welches Element macht hier sinn um den Hintergrund und die transparente Heatmap dar zu stellen?
- In welcher form sollten die Daten gehalten werden, evtl. als Array oder doch als eingebundene Datenbank im XML Format?
- Kann man z. b. Drei Messpunkte haben und je nach Skalierung mehr oder weniger Interpolationsschritte zwischen den Punkten errechnen um Farbübergänge feiner zu gestalten?

Womit soll ich nur anfangen?

Gruß

Hallo,

als Anfang kannst du dir mal Creating Heat Maps with C# .NET ansehen und nachbauen (also Bitmap intern erstellen und z.B. in einer PictureBox oder auf einem Panel anzeigen).
Transparenz unter WinForms ist jedoch etwas eingeschränkt - zum Einlesen und Ausprobieren: Transparency Tutorial with C# - Part 1 - 3.

Und für Farbverläufe gibt es LinearGradientBrush: Gewusst wie: Erstellen eines linearen Farbverlaufs.

Danke schon mal für die Tips.

Die Links hatte ich mir zuvor auch schon kurz angesehen dachte aber das währe nicht das richtige. Dann werde ich sie mal genauer lesen und nachbauen.
Genau, an eine PictureBox oder ein Panel dachte ich auch, bin mir nur nicht sicher ob die Funktionen und Methoden der Elemente genügen. Das werde ich ja sehen wenn ich die Links durch gearbeitet habe.

Ich hab mal ein kleines Tool angehangen womit ich die Daten erfassen will die später dargestellt werden sollen.
Bis auf das selektieren einer Zeile mit rechtsklick funktioniert alles nötige um die Daten quasi per Hand ein zu geben und daraus eine .XML zu erstellen.

Also die graue Heatmap in einer PictureBox zu erstellen klappt und den Code verstehe ich auch zu gut 70%. Ich habe auch das mit den Farben und den gewünschten Abstufungen hin bekommen. Die im Beispiel verwendete Bitmapdatei werde ich noch durch ein "LinearGradientBrush" ersetzen um die Bitmappalette zu füllen, wenn das geht.

Ich habe dann noch etwas rum gebastelt und frage nun die Koordinaten der Maus beim klicken in die PictureBox ab. Damit kann ich die Messdaten eingeben und diese incl. der Koordinaten in die Datenbank speichern. Natürlich auch die PictureBox entsprechend einfärben.

Das mit der Transparenz fehlt mir noch. Um das Alphablending zu verstehen hab ich heute nicht die Konzentration.
Ich suche noch nach einer Lösung um den Inhalt einer TextBox in ein Byte zu übergeben ohne das ungültige eingaben auftreten können. Vermutlich werde ich dafür Dropdown ComboBox mit fester Auswahl verwenden. Auch das rein laden des Hintergrund fehlt noch aber das hatte ich schon in einem anderen kleinen Tool ausprobiert. Die Skalierung gefällt mir auch noch nicht so recht, da muss ich auch noch etwas basteln. Über das speichern und/oder drucken des Ergebnis hab ich mir auch noch keine Gedanken gemacht.

Ich komme auf jeden fall voran.
Hab euch wieder das Projekt angehangen wie es aktuell ist.
Verbesserungsvorschläge sind willkommen.

Gruß

nachdem ich länger keine zeit hatte mich dem Projekt zu widmen, komm ich nun doch wieder etwas voran.
Ich habe mittlerweile ein drittes Beispiel dazu erstellt und euch den Code mal zu GitHub hoch geladen.
So muss ich nicht bei jeder Änderung ne neue Zip ins Forum schieben.
github.com/avoid200/HeatMapTest3

eine Grafik liegt als Hintergrund in einem Panel und davor ist eine PictureBox in die man hinein klicken kann.
Beim Mausklick wird die Bitmap der PictureBox entsprechend der Koordinate eingefärbt.
Die Transparenz kann man mit dem Schieberegler ändern.

Da ich zum erzeugen der Map in Graustufen und dem darauf folgenden einfärben, viel Beispielcode anderer verwende,
verstehe ich leider noch nicht wirklich was hier passiert.
Aus diesem Grund ist das Ergebnis nicht so recht das was ich suche.

Evtl. kann mir Jemand helfen den Code so zu verstehen das ich ihn anpassen kann.

Meinst du den Code in Form1.cs?
Du solltest den Heatmap-Code besser gleich in eine eigene Klasse auslagern.

Was genau verstehst du denn nicht?

Ja, es geht um den Code in Form1.
Grob könnte man sagen, ich verstehe folgende Methoden nicht.

• DrawWerte()
  
• Colorize()
  
• CreatePaletteIndex()

Ich gehe davon aus, wenn ich verstehe was genau in diesen drei Methoden passiert, dann komme ich einer HeatMap wie sie "ekahau heatmapper" darstellt etwas näher. Was ich möchte ist nicht einen Punkt mit festem Radius einfärben, wie es aktuell der Fall ist. Punkte mit gleichen Wertebereichen sollen zusammen eine eingefärbte Fläche bilden. Unterschiedliche Wertebereiche sollen unterschiedliche Flächenfarben bekommen. Die Ränder der Flächen sehe ich ähnlich wie Wassertropfen die zusammen einen Größeren tropfen bilden wenn sie nahe genug zusammen sind.

ich hab mal noch ein Bild gepinselt wie ich es mir vorstelle.

DrawWerte zeichnet ein Polygon, dessen Punkte aus 36 (= 360 / 10) Einzelpunkte eines Kreisumfangs (Circumference) bestehen.
Und eingefärbt wird dieses Polygon mittels eines Gradienten mit einem aus 3 verschiedenen Formeln (je nach Wert) und mit jeweils 4 Grauabstufungen.

Colorize erzeugt eine neue Bitmap, welche das Alphablending für die übergebene Bitmap durchführt und dafür dann CreatePaletteIndex aufruft, welches ein ColorMap-Array erzeugt, das die einzelnen Farbwerte aus der Ressourcedatei "intensity_mask2.bmp" mit dem Alpha-Werte kombiniert.

Um Punkte mit gleichen Wertebereichen zusammenzufassen, brauchst du ja zuerst einmal einen Algorithmus, welcher diese Punkte ermittelt (z.B. als List<List<Werte>>).
Und aus den enthaltenen Einzellisten mußt du dann das jeweils umgebene Polygon erstellen (z.B. mit einem Konvexe Hülle-Algorithmus).

PS: Den Namen Werte für die Struktur finde ich unpassend (vor allem wegen dem Plural).

Was an dem Projekt auch noch etwas stört (meiner Meinung nach) ist, dass die Berechnung der Heatmap so direkt an dem Zeichencode hängt. Es wird ein PathGradientBrush erstellt, der um den Punkt herum linear verläuft.

Wenn du größere einfarbige Flächen haben willst (statt einem glatten Verlauf) kannst du ja erstmal einfach die Skala stufig gestalten. Sowas z.B. ging rein per Bearbeitung von "intensity-mask2":

@Th69
Danke für die Erklärung nun verstehe ich das alles etwas besser, auch da ich letzte Nacht eine super Webseite mit erklärung zu Graphics gefunden habe.
Ja der Name Werte sollte eig. die Einzahl sein, stimmt.

@jfheins
Was meinst du damit das die Berechnung so direkt am Zeichencode hängt, weil das in einer Methode durch gerattert wird?
Das war vermutlich auch einer der Gründe warum ich durch den Code nicht durchgeblickt habe.
Das mit der "intensity-mask2" will ich eig. nicht verwenden. Da fliegt also einiges an Code raus.
Aber du hast recht, ich hatte sogar schon zwei Masken und hab es dann auf eine reduziert, weil ich nicht mehr durch geblickt habe.

-----------------

Ich hab mir letzte Nacht noch so meine Gedanken dazu gemacht und mit den drei grünen Punkten mögliche Programmabläufe ausprobiert.
Ich hab versucht aus meinen drei grünen Punkten, mit einem vorgegebenen Mindestabstand weitere Punkte zu errechnen die mir dann eine Umrandung vorgeben.
Wusste bisher nicht das man das Konvexe Hülle nennt. Danke Th69, nun kann ich dafür auch nach Infos suchen.

Ich bin für die Berechnung der UmrandungsPunkte wie folgt vorgegangen:
Wichtig: Auf dem Bild geht x nach oben und y nach rechts, in Windows geht x nach rechts und y nach unten.
- Ich habe aus der Werte Liste erst mal alle Koordinaten, die dem grünen Wertebereich entsprechen, in eine neue Liste übernommen.
- Dann habe ich aus den drei gegebenen grünen Punkten die min und max Werte der Achsen ermittelt, den Mindestabstand drauf gerechnet und die Ergebnisse als Umrandungspunkte in eine PointListe gespeichert.

minX=7,9 / minY=8,4 / maxX=11,7 / maxY=7,9
minX= 7,9 - (MindsA=2),0 = 5,9
minY= 8,4 - 0,(MindsA=2) = 8,2
maxX= 11,7 + (MindsA=2),0 = 13,7
maxY= 7,9 + 0,(MindsA=2) = 7,11

- Danach habe ich aus den drei gegebenen grünen Punkten ein Rechteck bzw. die vier Eckpunkte ermittelt und die zu jeder Ecke am nächsten liegenden grünen Punkte zugeordnet.

EckeA(unten links)=7,4 / EckeB(unten rechts)=7,9 / EckeC(oben links)=11,4 / EckeD(oben rechts)=11,9
EckeA gehört zu (8,4 / 7,9)
EckeB gehört zu (7,9)
EckeC gehört zu (8,4 / 11,7)
EckeD gehört zu (11,7 / 7,9)

- Dann habe ich anhand der Ecken und der jeweils zugehörigen grünen Punkte, neue Umrandungspunkte errechnet. Diese haben entweder den Mindestabstand zum grünen Punkt oder das Mittelmaß zwischen grünen Punkt und Ecke.

EckeA(6,4 / 7,2 / 6,2)
EckeB(5,9 / 7,11 / 5,11)
EckeC(10,4 / 11,5 / 10,5)
EckeD(13,9 / 11,9 / 13,9 = doppelt)

Mit diesen neuen Umrandungspunkten musste ich dann feststellen, das Kreise zeichnen bringt noch immer nichts. Ich hab dann noch etwas im Internet gesucht und bin eher zufällig auf diese "Hammer!!!" Seite gestoßen.
www.bildungsgueter.d...ages/Beisp002TOC.htm
Dank der Infos dort, kann ich nun auch etwas mit meinen Punkten an fangen. Ich habe daraus kein Polygon sondern ein DrawPath erstellt, das ich durch FillPath mit einem PathGradientBrush füllen kann. Polygone können wohl nur Farben und Texturen aber keine Farbverläufe. Damit aus dem Path trotzdem ein geschlossenes Polygon wird brauche ich nur den ersten Point des Path nochmal als letzten Point hinzufügen.
Nun muss ich meine Liste der Umrandungspunkte nur noch in sinnvoller Reihenfolge sortiert bekommen bzw. gleich richtig eintragen. Wenn ich das habe, sollte der Umsetzung im Code nichts mehr im Wege stehen. Da klemme ich mich wohl heute noch dahinter.

Hier noch ein Bild auf dem ich die min und max werte als Umrandungspunkte verwende und wie beschrieben einfärbe.
Die Transparenz kommt später wieder dazu wenn der Rest stimmt.


Sorry aber ich hab keine Ahnung wie ich das alles Formatieren soll.
Ich hoffe die Übersicht geht nicht total verloren.

Schön, daß dir meine Erklärung weitergeholfen hat (ich hatte schon befürchtet, ich hätte zu wenig beschrieben, aber ich wollte auch nicht gleich zu sehr ins Detail gehen).

Und zu

avoid hat folgendes geschrieben :

Polygone können wohl nur Farben und Texturen aber keine Farbverläufe.

Doch, auch Polygone können mit Farbverläufen versehen werden, denn das macht doch schon der bestehende Code (FillPolygon wird ja mit einem PathGradientBrush-Objekt aufgerufen ;- ).

Ich steck gerade etwas fest.
Die Berechnung der Randpunkte, bekomme ich langsam in den Griff aber eins fehlt mir noch.
Ich bekomme meine List<Point> nicht so sortiert das die Punkte nach Koordinaten, im Kreis abgearbeitet werden können.
Den Mittelpunkt kann ich anhand der schon ermittelten min und max Werte raus finden.

Ich hab dann versucht mit diesem beispielhaften Code .Sort() zu verwenden.

Leider macht es den Anschein als würde eine eigene Klasse mit IComparer<Point> fehlen, um an zu geben wie sortiert werden soll.
Für solche Klassen habe ich Beispiele mit Int und String gefunden aber nicht für Point.
Nun stellt sich mir aber schon die nächste Frage wie sortiert man Koordinaten überhaupt im kreis?
Das läuft doch bestimmt wieder auf Sinus und Cosinus raus wie schon im bisherigen Code?

Das beste wäre dann die Berechnung in Polarkoordinaten (also zur Umrechnung dann mit sin und cos).

Und beim IComparer<Point> (bzw. IComparer<PolarPoint>) läßt du dann nach dem Winkel (angle) vergleichen (bei gleichem Mittelpunkt).

PS: Einfacher als die Benutzung von IComparer<T> (also mittels einer eigenen Klasse) ist die Benutzung von Comparison<T>, da es ein Delegate ist, also eine Methode (bzw. auch eine anonyme Methode als Lambdaausdruck) annimmt.

So jetzt brauch ich ne Pause, mir raucht der Kopf von den Formeln.
Ich hab den Code quasi komplett überarbeitet.


github.com/avoid200/HeatMapTest3


So wie der Code jetzt ist, wird mit dem ersten Klick der Mittelpunkt der HeatMap gesetzt und mit den weiteren die Randpunkte des Polygon.
Man kann firstPointIsCenterPoint auch auf false setzen, dann bestimmt der Code die Mitte aller Punkte als Mittelpunkt der HeatMap.

Evtl. kann mir jemand noch etwas beim aufräumen helfen?
Ich hab so viele Methoden erstellt und ich bin mir nicht sicher, ob die Methoden in der Klasse Wert, überhaupt alle dort hin gehören.

Da aber soweit schon mal alles läuft, mache ich mich als nächstes wieder zurück an die Berechnung der tatsächlichen Umrandung der Werte.
Und im nächsten Schritt an die Eingabe der List<Wert>.Stärke um daran die Abstufung zu orientieren.

Bin mal gespannt wann meine Heatmap so ist wie ich sie mir vor stelle.

Ich habe mir deinen Code auf GitHub noch mal angeschaut. Die Umrechnung von kartesischen nach Polarkoordinaten (und umgekehrt) kannst du sehr vereinfachen und auf die if-else Ausdrücke verzichten:
- für PointToPolarPoint: benutze Math.Atan2
- für PolarPointToPoint: die beiden Formeln für x und y (jeweils mit '+') gelten für alle 4 Fälle (bei dir kämen immer nur positive Werte heraus)

Das ist witzig, denn ich hatte alle beispielhaft ausprobiert nur den Math.Atan2() nicht.
Werde ich mir ansehen.

Ja beim zurück rechnen von Polar zu Point hab ich aktuell noch überall + drin stehen, weil ich diese Funktion ja noch nicht verwende.
Die fall Unterscheidung dafür hab ich aber schon in einem anderen Programm und muss sie nur rein kopieren, wenn ich soweit bin.

Falls du mich mißverstanden hast: die Fallunterscheidung brauchst du nicht und kannst alles mit einer Formel umsetzen.

PS: Die Formeln stehen doch in der Wiki: Polarkoordinaten: Umrechnung zwischen Polarkoordinaten und kartesischen Koordinaten (darum hatte ich sie ja extra oben verlinkt ;- )