Problem in using module 5.2 (data visualisation)


#6

Did you upload the canvas.js file in your account? you getting the error since it cannot find the canvas.js file.
An alternative to uploading the file is to directly link it from a cdn. Add the following line to your html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>

And remove the line given below.
<script type="text/javascript" src="/control? name=BOLT9172550&amp;filename=canvas.js">


#7

Huraaaaaahhhhhhhhhhhhh!!!

You are awesome !!!

I finally got the output and believe me it feels wonderful when after so many attempts the fruit of success is achieved . Feeling satisfied !!!

Extremely convinced by BOLT and it’s TEAM.

Thank you so much Pranav Kundaikar…::slight_smile:


#8

Thank You for the kind words :slight_smile:
Congratulations for completing your experiment. Hope you continue building some great projects using the Bolt platform. Cheers!!:thumbsup:


#9

@himanshumanghani95 Do share a video of your project. We are excited to have a look.


#10

@gowthamkrishnateja This thread should help you solve the issue.


#11

Yes I will surely do that !!


#12

yaa i got the output
thank you


#13

Super. Share the video if possible. Look forward to viewing your work. :slight_smile:


#14

Here is my love to you guys::relaxed:


#15

[output] (https://www.youtube.com/watch?v=hndQjWT63Kw)


#16

Hi,

After this success stage , I want to add other sensors ( e,g buzzer ) in the circuit. To be more clear , I will like to get graph as well as an alert sound signal ,whenever an obstacle is detected in front of the proximity sensor.

Before asking in the forum , I have tried myself by doing the following change in the code. which is as follows:

xhttp.open(“GET”, “/digitalRead?pin=4&deviceName={{ Name }}”, “/digitalWrite?pin=0&state=High”, true);
xhttp.send();

I have tried other possibilities as well but was not able to achieve the desired result in any of the ways.

I would like to know my mistake so that I can extend my learning of this new device (BOLT) which has incredible powers to change the world.

NOTE: Answers without the involvement of Arduino will be a great help.!!!


#17

I believe you must be having a function similar to fetch_data as given below which gets the sensor data and updates the graph. You can just add a small logic to it to check if the incoming data tell whether the sensor triggered or not and accordingly call the triggerBuzzer function as defined below. One point to optimize the code we can also create the buzzer_state which will help us to trigger a buzzer action only when there is a change in the sensor state instead of triggering it every time

  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);
          updateGraph(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="+dev_name, true);
      xhttp.send();
  }

#18

Not working.

can you check my code?

<!doctype html>
<html>
<head>
<title>BOLT</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"> setDebug(true);  </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 = 5000;
    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);
          updateGraph(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="+dev_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>

#19

Please post the code that we fixed yesterday via whatsapp so that others also can try and do this experiment.


#20
 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 !
:relaxed:


#21

sir, can i use ifttt features through bolt cloud like sending an email?


#22

Sir, i have connected the proximity sensor but i am not getting any reading from the sensor


#23

Hi @borntoloose29 I think there is an issue with the code. I suggest you to register for the Beta Tester program. In 3-4 days time you will get access updated content to Plot the graphs. It is much easier so will solve your issue.


#24

sir can i use the ifttt and graph plot feature simultaneously.please explain how in detail as its very important to my project.


#25

i have the same issue as @borntoloose29. Beta tester program graph also does not give any readings/lines.