getJSON use on the Yun

The executive summary is a problem with JSON data array that does not onload to a Yun webpage.

The end game is a remote controller through a webpage that most browsers open. I have built a Buffalo II DAC that has I2C capabilities for volume and features control. I have adapted an Arduino sketch provided by HiFiduino and added webserver functions through the Yun.

Buttons on the webpage for volume, mute, and filter selection are working. But when I add the ability to display volume and sample rate status on the webpage the webserver hangs.

The JSON data array is stored using Bridge.put():

    Bridge.put("smplrate", String(sr));
    Bridge.put("volume", String(currAttnu/2));
}   // End of loop()

This is very stable code and stores the array in myYun.local/data/get/

{"value":{"smplrate":"44101","volume":"18"},"response":"get"}

I have incorporated a getJSON method from How to use getJSON ? - Arduino Yún - Arduino Forum that is in a .js file (DAC2.js):

$(function() {
refresh(); 
});

function refresh() 
{
  $.getJSON("/data/get", function(json) 
    {
      document.getElementById('mysmplrt').innerHTML=json.value.smplrate;
      document.getElementById('myvol').innerHTML=json.value.volume;
    });
setTimeout("refresh()",3000); //Pole every three seconds.
}

This function is evoked by onload:

The complete html code is:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<title>Buffalo DAC Remote Controller</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />
<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />
<meta name=\"format-detection\" content=\"telephone=no\" />

<!--link rel=\"apple-touch-icon\" href=\"NDD-60x60.png\" /-->
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/DAC1.js"></script>
<script type="text/javascript" src="js/DAC2.js"></script>
<style>
body { margin:0; padding:0; border:0; background-color: 4475CD; font-family:\"Arial\",Arial,sans-serif; }
</style>   
</head>

<body onload="setInterval(function(){ reply_click(); refresh();}, 500);">
<center>
<div style=border:0px solid #4475CD;>
<div style=background-color:#6495ED; height:480px;>
<div style=font-size:145%; text-align:center; color:2455aD; padding:0px 0px 0px 0px;></style>
<h1><i>Buffalo&nbsp;DAC
Remote&nbsp;Controller</i></h1>
</div>

<div style=\"font-size:120%; text-align:center; color:000066; padding:0px 0px 0px 0px;\">
Sample Rate is: <span id='mysmplrt'>-----</span>

DAC Volume is: <span id='myvol'>--</span>
</div>

<div style=\"font-size:175%; text-align:center; color:000066; padding:20px 0px 0px 0px;\">
<form id="DAC_Selection" action="">
<button id="1" onClick="reply_click(this.id)"> Volume UP </button>





<button id="0" onClick="reply_click(this.id)">Volume DOWN</button>





<button id="2" onClick="reply_click(this.id)">    MUTE   </button>





<button id="3" onClick="reply_click(this.id)">   Filter  </button>


</form>
</div>



</center>

</body>

</html>

For completeness, here is the DAC1.js code:

$(function() {
reply_click(); 
});

function reply_click(clicked_id) {
//Every one second, this function poles the button 'id' from web page and sends to Yun
//a request to control volume or filter functions depending on which button is pressed.

  if (clicked_id =='1') //if the user selected for Volume UP, send request to Arduino
  {
  $('#DAC_content').load('/arduino/cmd/1');  
  }
  if (clicked_id =='0') //if the user selected for Volume DOWN, send request to Arduino
  {
  .
  .
  .
  }
  if (clicked_id ==' ') //if the selected is null, send request to Arduino
  {
  $('#DAC_content').load('/arduino/cmd/ ');  
  }
setTimeout("reply_click()",1000); //Pole every one second.  
}

Again, the simple button code does work but the addition of the JSON retrieval code causes a webserver hang. I suspect that either there is an "onload" problem or that I am overloading the Yun memory space. The uploaded sketch fills 82% of the memory. What is the Yun's memory limit for storing sketches?
Is my use of "onload" correct? Programming syntax? I have worked this issue for a week so I may be missing obvious problems.
Your feedback will be highly valued.
Many thanks for reading this.
Ron

There are earlier posts in this forum that provide context for this problem.

http://forum.arduino.cc/index.php?topic=309596.msg2150820#msg2150820
[SOLVED] How do I access bridge data (value for a given key) in HTML/JavaScript? from March of 2015 is an explanation of the JSON array and how to extract values from the array.

How to use getJSON ? - Arduino Yún - Arduino Forum How to use getJSON ? is from January of 2016 further examines the getJSON method in detail and includes bundling of requests for multiple values of the json array.

I have studied these earlier teachings and tried to use this knowledge in my project. However my code still hangs when I add the getJSON method. This has become a detective adventure to find the source of the problem. I found one possible problem in the header of the html code:

which I changed to:

but the program still hangs. More info:
How to send HTTP response with JSON data from Arduino to web browser? - Programming Questions - Arduino Forum to send HTTP response with JSON data from Arduino to web browser?

I do not understand if declaring the content type in the header could cause the problem I am seeing. I have combed through the above references for clues. The quest continues....

Ron

After an updating the IDE to the Arduino 1.8.1 nightly and compiling; no change in the problem. I was hoping that the improvement in handling utf-8 might assist in passing the json array from the sd card file myarduino.local/data/get out to the website for display. The quest continues...

I have not been able to display a json array stored in Arduino.local/data/get on my webpage. I am using the code as above. Has anyone had success doing this?

Yes, I use getJSON in my webpage and it works well.

It appears you are using the same function. Maybe your syntax is wrong.

<script type="text/javascript">
  function getKeyValue() {
    $.getJSON("/data/get/D3", 
      function(json){
        document.getElementById('keyValue').innerHTML=json.value;
      });
  }
</script>

That is a nice bit of code, steinvb12. I have been checking my syntax many times.

It appears that the web page served by my Yun and created by my html/javascript files on the SD card is not handling events as I would expect. A button push activates one event handler and does work to control the Yun but the new status does not display on the webpage. There are two different sources of data that are not displaying on the webpage. The following code is from the index.html file:

Sample Rate is: -----

DAC Volume is: --

Select: -

None of which is triggered by id based events. Both "mysmplrt" and "myvol" are ids that should be evoke a content change based on the innerHTML of the document.getElementById code. The "DAC_content" id should cause a content change when $('#DAC_content').load('/arduino/cmd/1'); is working with a button push.

Because the button push does everything else except change the content, I assume that my problem is that event handling is a problem.

I have used onload in several ways to periodically refresh the webpage. Currently I am using window.onload:

This code together with the 3 lines of code above should interact to display the status on the webpage but it doesn't. So neither the user activated event (button push) nor the time event (setTimeout function) are triggering dynamic content change.

Any ideas?