This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

Note: This page has been translated by MathWorks. Please click here
To view all translated materials including this page, select Japan from the country navigator on the bottom of this page.

Create Heatmap Overlay Image

ThingSpeak™ helps you visualize your data by projecting measurements over an image or map. This example illustrates creating a heatmap using the results from wireless network signal strength measured by an ESP32 development board. You do not need special hardware, but you need an image and position measurements. For more information, see Wireless Network Signal Strength with ESP32 in Arduino.

  1. Create a MATLAB® Visualization. Select Apps > MATLAB Visualizations. Then select New, and Create a blank template.

  2. Collect your data. Save the X and Y coordinates and the signal strength in separate vectors. You can read the data for signal strength from a ThingSpeak channel. Be sure to modify the CHANNEL_ID, READ_API_KEY, and FIELD_NUMBER with the appropriate values from your channel. You can find your channel ID on the top of the main page for your channel. You can find the API key on the API Keys tab of your channel view.

    % Read data from a ThingSpeak channel.
    strength = thingSpeakRead(CHANNEL_ID, 'ReadKey',READ_API_KEY,'numPoints',15,'fields',FIELD_NUMBER');
    X = [10 550 550 10 50 234 393 129 237 328 448 225 344 457 477]';
    Y = [10 10 410 410 293 210 202 132 130 142 141 272 268 274 200]';
    % Uncomment the next line to enter data directly instead of reading from ThingSpeak
    % strength = [-90 -90 -90 -90 -40 -20 -22.4 -45 -35 -41 -44 -55 -40 -75 -26]';
  3. Convert the wireless signal measurements into percentage.

    % Convert the signal strength into an estimated percentage
    strengthPercent = 2*(strength+100)/100;
  4. Read in the image, and store the dimensions of the image. Your image must be hosted on the web.

    picture = imread('');
    [height,width,depth] = size(picture);

  5. Create a model to interpolate the existing points and fill the overlay image with the interpolated results. Then set the transparency for the overlay.

    F = scatteredInterpolant(Y, X, strengthPercent,'linear');
    for i = 1:height-1
       for j = 1:width-1
              OverlayImage(i,j) = F(i,j);
    alpha = (~isnan(OverlayImage))*0.6;
  6. Show the images and the color bar.

    hold on
    OverlayImage = imshow( OverlayImage );
    % Set the color limits to be relative to the data values
    caxis auto  
    colormap( OverlayImage.Parent, jet );
    colorbar( OverlayImage.Parent );
    % Set the AlphaData to be the transparency matrix created earlier
    set( OverlayImage, 'AlphaData', alpha );

    The final result indicates the areas where the signal strength is highest in red and lowest in blue.

See Also

| | | |

Was this topic helpful?