How to display real time data of a proximity sensor in bolt?

Please provide its HTML code and javascript

Code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>Proximity Sensor Data</h1>
  <div id="data-container"></div>

  <script>
    // Fetch and update the sensor data
    function updateSensorData() {
      $.ajax({
        url: 'https://cloud.boltiot.com/remote/<BOLT_API_KEY>/analogRead?pin=A0&deviceName=<BOLT_DEVICE_NAME>',
        method: 'GET',
        dataType: 'json',
        success: function(response) {
          var sensorValue = response.value;
          // Update the HTML content with the sensor data
          $('#data-container').text('Proximity Sensor Value: ' + sensorValue);
        },
        error: function(xhr, status, error) {
          console.log('Error:', error);
        }
      });
    }

    // Update the sensor data every 2 seconds
    setInterval(updateSensorData, 2000);
  </script>
</body>
</html>

Explanation:
This code uses jQuery for making AJAX requests to the Bolt IoT platform’s API. It fetches the sensor data from the Bolt device and updates the data-container div element with the latest proximity sensor value every 2 seconds.

Note:

  1. Remember to have an active internet connection and properly set up your Bolt device with the proximity sensor before running this code.
  2. Replace <BOLT_API_KEY> with your Bolt API key.
  3. Replace <BOLT_DEVICE_NAME> with the name of your Bolt device.

Hi, @bikramraj11

To display real-time data from a proximity sensor in the Bolt IoT platform using HTML and JavaScript, you can follow these steps:

  1. Set up your Bolt WiFi module and connect the proximity sensor to it. Ensure the necessary connections and power supply for the sensor are properly configured.

  2. Configure your Bolt WiFi module and associate it with your Bolt Cloud account. Follow the instructions provided by the Bolt IoT platform to set up your device.

  3. Once your Bolt WiFi module is set up and connected, you can use HTML and JavaScript code to fetch and display real-time data from the proximity sensor.

Here’s an example of HTML and JavaScript code to display real-time data from a proximity sensor in the Bolt IoT platform:

Proximity Sensor Data

Proximity Sensor Data

<div id="sensor-value"></div>

<script>
    function fetchSensorData() {
        $.ajax({
            url: "https://cloud.boltiot.com/remote/YOUR_API_KEY/analogRead?pin=A0&deviceName=YOUR_DEVICE_NAME",
            type: "GET",
            success: function(data) {
                var sensorValue = data.value;
                $("#sensor-value").text("Proximity Sensor Value: " + sensorValue);
            },
            error: function(error) {
                console.log(error);
            }
        });
    }
    
    // Fetch sensor data every second
    setInterval(fetchSensorData, 1000);
</script>

In the code above, replace "YOUR_API_KEY" with your actual Bolt IoT API key and "YOUR_DEVICE_NAME" with the name of your Bolt IoT device.

The JavaScript code uses AJAX to fetch the sensor data from the Bolt IoT platform’s API endpoint. It makes a GET request to the analogRead API with the appropriate API key, analog pin (A0 in this example), and device name. Upon success, it updates the content of the <div> element with the fetched sensor value.

The HTML page will display the current value of the proximity sensor inside the <div> element with the ID "sensor-value". The JavaScript code uses the setInterval function to fetch the sensor data every second and update the displayed value.

Host the HTML file on a web server or open it in a web browser to see the real-time data from the proximity sensor displayed on the page.