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:
- Remember to have an active internet connection and properly set up your Bolt device with the proximity sensor before running this code.
- Replace
<BOLT_API_KEY>
with your Bolt API key. - 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:
-
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.
-
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.
-
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 DataProximity 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.