Yes , Pranav !! For sure !!
Interested students , please use the following code to interface buzzer with proximity sensor for data visualization.
> <!doctype html>
> <html>
> <head>
> <title>BOLT</title>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js" ></script>
> <script type="text/javascript">
> window.onload = function ()
> { var dps = []; //dataPoints.
> var chart = new CanvasJS.Chart("chartContainer",{
> title :
> {
> text: " "
> },
> backgroundColor: "transparent",
> height: 500,
> axisX:
> { title: "Time",
> labelFontFamily: "Segoe UI Light",
> lineThickness: 0,
> tickThickness: 0,
> labelFontColor:"white",
> titleFontColor: "white",
> titleFontFamily:"Segoe UI Light",
> },
> axisY:
> { stripLines:[
> { value:0,
> thickness:1,
> color: "white",
> }],
> tickThickness: 0.5,
> minimum: 0,
> maximum: 10,
> title: "State",
> labelFontFamily: "Segoe UI Light",
> gridThickness: 0,
> labelFontColor:"white",
> titleFontColor: "white",
> titleFontFamily:"Segoe UI Light",
> },
> data: [{
> type: "line",
> dataPoints : dps,
> markerColor:"white",
> color:"white",
> }]
> });
> chart.render();
> var yVal = 15;
> var updateInterval = 50000;
> function updateChart(sensor_data)
> {
> yVal = sensor_data;
> yVal = parseInt(yVal);
> var xVal = new Date();
> dps.push({x: xVal,y: yVal});
> if (dps.length > 5 )
> {
> dps.shift();
> }
> chart.render();
> }
> setInterval(function(){fetch_data()}, updateInterval);
> var buzzer_state = "LOW";
> function fetch_data()
> {
> var xhttp = new XMLHttpRequest();
> xhttp.onreadystatechange = function(){
> if (xhttp.readyState == 4 && xhttp.status == 200){
> obj=JSON.parse(xhttp.responseText);
> console.log(obj);
> updateChart(obj.value);
> //check if the sensor is triggered or not
> if (obj.value=="1"){
> // no obstacle detected
> if (buzzer_state != "LOW"){
> buzzer_state = "LOW";
> triggerBuzzer("LOW");
> }
> } else if (obj.value=="0"){
> // obstacle detected
> if (buzzer_state != "HIGH"){
> buzzer_state = "HIGH";
> triggerBuzzer("HIGH");
> }
> } else {
> console.log("do nothing");
> }
> }
> };
> xhttp.open("GET", "/digitalRead?pin=4&deviceName={{ Name }}", true);
> xhttp.send();
> }
> function triggerBuzzer(state){
> var xhttp = new XMLHttpRequest();
> xhttp.onreadystatechange = function(){
> if (xhttp.readyState == 4 && xhttp.status == 200){
> obj=JSON.parse(xhttp.responseText);
> console.log(obj);
> }
> };
> xhttp.open("GET", "/digitalWrite?pin=A1&state="+state +"&deviceName={{ Name }}", true);
> xhttp.send();
> }
> }
> </script>
> </head>
> <body bgcolor="grey" >
> <center>
> <div id="chartContainer" style="height: 30rem; padding-top:5rem;width:70%;box-shadow: 0px 1px 5px 0px #000;background: -webkit-linear-gradient(#0073A2, #2196f3);margin-top:3rem;"> </div>
> </center>
> </body>
> </html>
Note : There will be a delay involved in the output. The delay can be changed by changing the value of 50000 (50ms) in the code from 30000 (30ms) to 50000, depending on the requirement of your project !
Best of luck for your project !