0

I am trying to create a heatmap in vb.net, what I've done so far is to create gray circles, and map the bitmap with a mapping scheme to a colourized bitmap, as you can see here:

enter image description here

But how am I able to fade between the gray circles? Is there an easy way available?

This is how I am drawing my circles at the moment:

        Dim tmpBitmap As New Bitmap(300, 300)
    With Graphics.FromImage(tmpBitmap)
        '.DrawLine(...)
        '.DrawString(...)
        Dim pth As New GraphicsPath()
        pth.AddEllipse(0, 0, 150, 150)
        Dim pgb As New PathGradientBrush(pth)
        pgb.SurroundColors = New Color() {Color.DarkGray}
        pgb.CenterColor = Color.Black
        .FillRectangle(pgb, 0, 0, 150, 150)

        Dim pth2 As New GraphicsPath()
        pth2.AddEllipse(100, 0, 150, 150)
        Dim pgb2 As New PathGradientBrush(pth2)
        pgb2.SurroundColors = New Color() {Color.DarkGray}
        pgb2.CenterColor = Color.Black
        .FillRectangle(pgb2, 100, 0, 150, 150)

    End With

Thank you!

Edit: I need it for an application very similar to what netspot does (www.netspotapp.com) so I need to set points with measurements, and I want it to look like a heatmap. Like this:

enter image description here

Edit2:

Sample with LinearGradientBrush. If I use LinearGradientBrush (because it's easier for testing) I set two points:

        .DrawEllipse(Pens.Black, 45, 45, 10, 10)
        .DrawEllipse(Pens.Black, 145, 145, 10, 10)

After that I create a LinearGradientBrush with the origin of the circles.

Dim tmpBrush As New Drawing2D.LinearGradientBrush(New Point(50, 50), New Point(150, 150), Color.FromArgb(0, 0, 0), Color.FromArgb(100, 100, 100))
.FillRectangle(tmpBrush, 0, 0, 500, 500)

This is the result, but I don't understand how to add a third point for example.

enter image description here

Manuel
  • 613
  • 1
  • 6
  • 20
  • Far away. You need to paint some Bitmaps with a gradient scale that goes from black to transparent, the overlap the bitmaps, using `Graphics.CompositingMode = CompositingMode.SourceOver` (so they blend). Use the [ColorBlend](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.drawing2d.colorblend) class to map the colors to a relative position, then use an array of ColorMap object as the [Color Remap Table](https://learn.microsoft.com/en-us/dotnet/framework/winforms/advanced/how-to-use-a-color-remap-table) to colorize the blending (GetPixel to get the color of a mapped point). – Jimi Jun 20 '19 at 08:54
  • I think I got an xy Problem with my question, I edited my above Question. I need a heatmap for a site survey, something like netspot. So I think I can not blend these bitmaps, because then if I have overlapping areas, I can not just combine the gradient scale, because this would lead to a higher value then the real value would be, right? – Manuel Jun 20 '19 at 12:23
  • Yes, this is a completely different scenario. You just need `PathGradientBrush` (could even work with [LinearGradientBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.lineargradientbrush), it depends on the data you have). Use GraphicsPath (again, it all depends on the data that build the points) and ColorBlend (to define the colorization *zones*) and paint a Bitmap, then overlap the background. It'll look great. You'll have to work on the transparency settings a bit. – Jimi Jun 20 '19 at 12:45
  • Hi Jimi, I am not sure if I understand you right. My data that build the points is very simple, I just have coordinates (X,Y) and a value representing the signal strength, e.g. how dark it is (the darker the stronger). I edited my Question with an example of using LinearGradientBrush, but I don't understand how to add a third point for example. – Manuel Jun 20 '19 at 13:21
  • You **have** to couple the LinearGradientBrush with a `ColorBlend` class or a [Blend](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.drawing2d.blend) class, if you just want to use two colors (not recommended). The points I'm referring to are those that build the GraphicsPath: the area that these points define. The color scale is defined by the `Colors` and `Positions` (or `Factors` and `Positions`) properties of the ColorBlend or (Blend) class. The transparency level is key to quality, here. – Jimi Jun 20 '19 at 13:45
  • You did see [this](https://stackoverflow.com/questions/30415191/heatmap-style-gradients-in-net/30416635#30416635) right? – TaW Aug 12 '19 at 10:01

0 Answers0