Heatmap

Share your advanced PureBasic knowledge/code with the community.
Highstick
New User
New User
Posts: 2
Joined: Thu Mar 23, 2017 9:49 pm
Location: Sweden

Heatmap

Post by Highstick »

Heatmap example
Stumbled over purebasic and love the smalliness and thats so fast!

I needed a heatmap for my map for help in my job.
Searched but didn't find any so i tried my self han here is an example!

Code: Select all

Enumeration 
  #MainWindow
  #MainImage
  #MainImage1
  #ImageGadget
  #ColourImage
  #MainButton
  #SpotImage
  #SpotImage1
EndEnumeration
; structure to hold x,y and intensity for each point
Structure HEATPOINT
  X.i
  Y.i
  Intensity.i
EndStructure

Global NewList HeatPoints.HEATPOINT ()
Global Radius.i=45  ; the radius of the circle of the heatpoint, higher means bigger circle
Global fRatio.i= 1/80 ; not used but you need to convert values lower och higher than 256 to that range
                      ; if exempel you need to adjust tempratures to this you need take the range +40 to -40 witch is 80, 80*fRatio * intensity = 256 
                      ; If you want the colourscale in the colourimage
Global Dim ColourTable(255)  ;the color for the values 1-255 using the image colour.png

 Procedure CreateHeatMap()
  ;Get 1pix från new colortable
  StartDrawing(ImageOutput(#ColourImage))
  y.i =1
  For x.i = 1 To 255
    ColourTable(x)= Point(x,y)
  Next
  StopDrawing()
  
  ;Traverse heat point Data And draw an black and white intensity image
  StartDrawing(ImageOutput(#SpotImage))
  ForEach HeatPoints()
      DrawingMode(#PB_2DDrawing_Gradient | #PB_2DDrawing_AlphaBlend) 
      BackColor(RGBA(0,0,0, 255))
      FrontColor(#White)
      CircularGradient(HeatPoints()\X, HeatPoints()\Y, Radius)     
      Circle(HeatPoints()\X, HeatPoints()\Y,Radius)
  Next
  StopDrawing()
  
  ; show the image in gadget
 
  ImageGadget(#MainImage,10, 50, 200, 200, ImageID(#SpotImage))
  CopyImage(#SpotImage, #SpotImage1)
   
  ; colour the black and white image from the colourtable
  StartDrawing(ImageOutput(#SpotImage1))
  For x.i = 1 To ImageWidth(#SpotImage)-1
    For y.i = 1 To ImageHeight(#SpotImage)-1
      color.i = Point(x,y)
      R.i=Red(color) ; R,G and B is the same value, take R from the colourtable
      NewColour.i = ColourTable(R)
      Plot (x,y,NewColour)
    Next 
  Next 
  StopDrawing()
  
  ImageGadget(#MainImage1, 10,273, 200, 200, ImageID(#SpotImage1))
 EndProcedure
  
 Procedure ButtonHandler()
   ; random points x,y and intensity 0-255
  For i.i = 0 To 500
    AddElement(HeatPoints())
    HeatPoints()\X=Random(200)
    HeatPoints()\Y= Random(200)
    HeatPoints()\Intensity= Random(255)
  Next
  ; create an image 200x200 32bit colour with transparant background
  CreateImage(#SpotImage, 200, 200,32,  #PB_Image_Transparent) 
  ;Call CreateHeatMap, give it the memory bitmap, And use it's output to set the picture box image
  CreateHeatMap()
  
EndProcedure

  UsePNGImageDecoder()
  If OpenWindow(#MainWindow,0,0,280,480,"Test Heatmap",#PB_Window_SystemMenu) 
  ButtonGadget(#MainButton,10,10,100,32,"Test Heatmap") 
  BindGadgetEvent(#MainButton, @ButtonHandler())
  If LoadImage(#ColourImage,"colour.png")
    ImageGadget(#ImageGadget, 1,255, 256,13,ImageID(#ColourImage),#PB_Image_Border)
  EndIf
  
  Repeat 
    
    EventID=WaitWindowEvent() 
    Select EventID 
      
    Case #PB_Event_CloseWindow 
      If EventWindow()= 0 ;Here you detect if the window to close is your additional window 
        Quit = 1 
        FreeImage(#ColourImage)
      EndIf 
  EndSelect 
  
  Until Quit = 1 
EndIf 
The #colourImage used, 256 bits wide.
Image
Screenshot of the example
Image

I use in the exemple intensity as 0-255 but you need to adapt it to your intervall (fRatio). I think its a relative easy for you to read and do that.
If you alter the Ratio you get bigger/smaller circle in the heatmap.
It's my first post, be kind and thank you all who contribute to the forum, i have learned a lot ;)
A good source that explaine heatmaps is this link: http://dylanvester.com/2015/10/creating ... 0-c-sharp/
Last edited by Highstick on Wed Mar 29, 2017 11:27 am, edited 3 times in total.
User avatar
skywalk
Addict
Addict
Posts: 3972
Joined: Wed Dec 23, 2009 10:14 pm
Location: Boston, MA

Re: Heatmap

Post by skywalk »

Welcome 1st poster. :)
You have an external file dependency. Better to use installed example images in your demo's.

Code: Select all

  If LoadImage(#ColourImage, #PB_Compiler_Home+"Examples\3D\Data\Textures\ground_diffuse.png")
Also, with each run, your memory is growing, so take care to dispose of created images.
The nice thing about standards is there are so many to choose from. ~ Andrew Tanenbaum
Highstick
New User
New User
Posts: 2
Joined: Thu Mar 23, 2017 9:49 pm
Location: Sweden

Re: Heatmap

Post by Highstick »

Thanks for your comment.
I would have thougth about it, will have it in mind next time :)
Post Reply