Updates!

Updates!

Hey guys. It has been ‘another’ a while since i last update about my progress. (Kind of upset with no like or comment actually!) :p

Anyway, so far I’ve managed to get the status table to display properly – user can select an option, key in a value and add to the dynamic table (happy!). Then the Javascript will query for status. Hmm, i have stuck at this point for quite some time. There are a few things to note here:

  1. It has to check what are the entries in the table.
  2. Then it sends that query to the device system, row by row. – requires delay! Because raspberry Pi isn’t that fast to pick up the replies.
  3. Then it has to continuosly monitor the status. – requires a loop!

For delay, i used setTimeout() as such:

var checked = $('#status_table tr [id^="monitor_"]:checked');
setTimeout(function(){
if(++i <checked.length) loop(i);
},3000);

where checked.length will refer to the number of checked checkbox and 3000 (in ms) is the delay i set. I found out that 1000 (1 second) is too fast for Raspberry Pi. So to be safe, i used 3 seconds instead.

 

For looping, i used setInterval() as such:

bigloop=setInterval(function(){

//the looping function above and blah

}, index*4000);

 

Well currently i still have not figure out how to use checked.length instead of index to multiply 4 seconds. I chose 4 seconds is because i would like to give it more time allowance to execute the commands. The only problem with index*4000 is that if the list is long and the index is large, the initial waiting time is long too.

You can see my working fiddle here: http://jsfiddle.net/qJdaA/2/

Also, I have a “monitor” button to make things easier. The monitoring process will only starts when the button is clicked. Then to prevent multiple clicks which would mess things up, I disabled the button when the monitoring process is running. I would like to thank my junior for giving me this suggestion! I was using colour indicator (which was very weird and ugly) to indicate the button status.  hahaha.  See my printscreen below.

Checking if there is item in the list.
if (checked.index()==-1){
$('#monitor').button('disable');
}else{
$('#monitor').button('enable');

The above is applicable for jQuery Mobile. For normal jQuery or Javascript, i use:
$('#monitor').attr('disabled','true');
and
$('#monitor').removeAttr('disabled');

web app

The button is disabled initially.

web app

When the first item is added, the monitor button is enabled.

web app

When the monitoring starts, the monitor button is disabled to prevent user from clicking it again

web app

When a row is removed, the looping interval is cleared and the monitor button is enabled again.

There is a div for myself to monitor what is going on in the loop (as can be seen in the picture above), but it is tedious to scroll down and down or refresh. so i created a clear button.

web app

The clear button clears off the testing div.

I’ve manage to settle the output status, zone_input status, and even counter value!
Well, the process seems a bit complicated to me but i shall read more about it and post about what i’ve learnt later.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s