Hello all,
I have been toying around with a piece of code I can't get right. And have had some strange stuff with.
The idea is to get a webserver run on a WiFi capable PIC to display a page. On the page is measurements and time/date (all values will be from the PIC) but for now i have these values in the HTML/javascript code as I design the page with Notepad++
I have the page roughly how I want it to look. The functionality works 9 out of 10. As you will see the button 'Refresh All (Measurements Time Date)' when pressed should cycle through values. When the PIC will run this button will call to the PIC to get new values and the page will be updated by the getElementById (as is already in the cycle function)
The other two buttons make sure the reset values have all been filled out before clicking the 'Reset Values' button. These two buttons do what they should for now. Again when the PIC is running this the 'Reset Values' button will send a string to the PIC to reset those values (I have yet to code that here)
The question I have is why the 'Refresh All' cycle code will not work. In other projects/code I can get this to work, but not here. So any help in what's stopping it would be great.
And the other questions I have is to do with the functions in javascript. I would like to move them all up into the header section. But if i do none of the buttons will do anything, so i leave the code close to where it's doing things. What's up with that?
Cheers
Chris
Here's the code as it is now:
I have been toying around with a piece of code I can't get right. And have had some strange stuff with.
The idea is to get a webserver run on a WiFi capable PIC to display a page. On the page is measurements and time/date (all values will be from the PIC) but for now i have these values in the HTML/javascript code as I design the page with Notepad++
I have the page roughly how I want it to look. The functionality works 9 out of 10. As you will see the button 'Refresh All (Measurements Time Date)' when pressed should cycle through values. When the PIC will run this button will call to the PIC to get new values and the page will be updated by the getElementById (as is already in the cycle function)
The other two buttons make sure the reset values have all been filled out before clicking the 'Reset Values' button. These two buttons do what they should for now. Again when the PIC is running this the 'Reset Values' button will send a string to the PIC to reset those values (I have yet to code that here)
The question I have is why the 'Refresh All' cycle code will not work. In other projects/code I can get this to work, but not here. So any help in what's stopping it would be great.
And the other questions I have is to do with the functions in javascript. I would like to move them all up into the header section. But if i do none of the buttons will do anything, so i leave the code close to where it's doing things. What's up with that?
Cheers
Chris
Here's the code as it is now:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>
Build 2 WD Rebuild
</TITLE>
<STYLE>
BODY {background-color:Orange;
color:Black;
text-indent:26px;}
H1 {text-align:center;}
#THmesRes {background-color:yellow;}
#TDTldrw {background-color:#ccccff;}
#dLDRW {background-color:white;}
#TDTldrb {background-color:#666666;}
#dLDRB {background-color:white;}
#TDTbatt {background-color:#33cc00;}
#dBATT {background-color:white;}
#TDTlm35 {background-color:#ff0000;}
#dLM35 {background-color:white;}
#THtdtRes {background-color:yellow;}
#TDTtime {background-color:#cc33cc;}
#dTIME {background-color:white;
text-align:center;}
#TDTwkd {background-color:#000099;
text-align:center;
color:yellow;}
#dWD {text-align:center;}
#TDTdate {background-color:#3333ff}
#dDATE {background-color:white;
text-align:center;}
#TDBTNrefall {background-color:#B20000;
text-align:center;}
#THrstRTC {background-color:#9900CC;}
#THselTime {background-color:#0000CC;}
#TRhrmin {background-color:#0066FF;
text-align:center;}
#THTselDt {background-color:#009900;
color:black;}
#TDyrin {background-color:#00CC00;}
#TDmthsel {background-color:#00CC00;}
#TDdayin {background-color:#00CC00;}
#THTselwdrst {background-color:#B80000;
color:black;}
#TDwkdaysel {background-color:#E60000;
text-align:center;}
#TRFchkrstval {text-align:center;}
#TDBTNchkrstval {background-color:#000066}
#TDrstResSpan {background-color:#0000CC;
color:#C8C8C8;}
#TRFsendrst {text-align:center;}
#TDBTNpicrstval {background-color:#000066;}
#TDd8 {background-color:#0000CC;
color:#C8C8C8;}
</STYLE>
<SCRIPT>
var RSTCK = 0;
var WD = 7;
var iR = 0;
var LDRW = new Array('0.978','2.615','3.291','4.951');
var LDRB = new Array('1.285','2.974','3.962','4.987');
var LM35 = new Array('22.5','24.2','26.5','34.7');
var BATT = new Array('10.95','11.27','12.04','12.95');
var HR = new Array('10','01','23','18');
var MIN = new Array('35','21','56','06');
var DAY = new Array('20','03','29','15');
var MTH = new Array('01','08','10','11');
var YR = new Array('09','12','15','20');
var WkDay = new Array('<TD colspan=2 bgcolor=#993399>Err</TD>',
'<TD colspan=2 bgcolor=#000099><FONT color=white>MONDAY</FONT></TD>',
'<TD colspan=2 bgcolor=#9900cc>TUESDAY</TD>',
'<TD colspan=2 bgcolor=#ff9933>WEDNESDAY</TD>',
'<TD colspan=2 bgcolor=#ffff66>THURSDAY</TD>',
'<TD colspan=2 bgcolor=#33ff00>FRIDAY</TD>',
'<TD colspan=2 bgcolor=#00cc00>SATURDAY</TD>',
'<TD colspan=2 bgcolor=#33cccc>SUNDAY</TD>');
var RSTahr;
var RSTamin;
var RSTaday;
var RSTamth;
var RSTayr;
var RSTawd;
</SCRIPT>
</HEAD>
<BODY>
<H1>
Welcome to "Build 2 WD Rebuild"...
</H1>
<TABLE align=center border=1 style='font-size:20px; font-family:terminal;'>
<TR>
<TD>
<TABLE colspan=2>
<TR>
<TH colspan=2 id='THmesRes'>
<B>Measurements Results:</B>
</TH>
</TR>
<TR>
<TD id='TDTldrw'>
LDR WHITE:
</TD>
<TD id='dLDRW'>
<SCRIPT>
document.write(LDRW[iR]);
</SCRIPT> /5
</TD>
</TR>
<TR>
<TD id='TDTldrb'>
LDR BLACK:
</TD>
<TD id='dLDRB'>
<SCRIPT>
document.write(LDRB[iR]);
</SCRIPT> /5
</TD>
</TR>
<TR>
<TD id='TDTbatt'>
12V BATTERY:
</TD>
<TD id='dBATT'>
<SCRIPT>
document.write(BATT[iR]);
</SCRIPT> V
</TD>
</TR>
<TR>
<TD id='TDTlm35'>
TEMP:
</TD>
<TD id='dLM35'>
<SCRIPT>
document.write(LM35[iR]);
</SCRIPT> °C
</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE colspan=2>
<TR>
<TH colspan=2 id='THtdtRes'>
<B>TIME/DATE/TEMP</B>
</TH>
</TR>
<TR>
<TD id='TDTtime'>
TIME (24Hr):
</TD>
<TD id='dTIME'>
<SCRIPT>
document.write(HR[iR]);
</SCRIPT> :
<SCRIPT>
document.write(MIN[iR]);
</SCRIPT>
</TD>
</TR>
<TR>
<TD colspan=2 id='TDTwkd'>
Week Day:
</TD>
</TR>
<TR id='dWD'>
<SCRIPT>
document.write(WkDay[WD]);
</SCRIPT>
</TR>
<TR>
<TD id='TDTdate'>
DATE:
</TD>
<TD id='dDATE'>
20<SCRIPT>document.write(YR[iR]);</SCRIPT> /
<SCRIPT>document.write(MTH[iR]);</SCRIPT> /
<SCRIPT>document.write(DAY[iR]);</SCRIPT>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<SCRIPT>
function refreshBTN(){
iR = (iR + 1);
if (iR == 4){
iR = 0;
};
WD = (WD + 1);
if (WD == 8){
WD = 1;
};
var xldrw = LDRW[iR].concat(' /5');
var xldrb = LDRB[iR].cocat(' /5');
var xbatt = BATT[iR].concat(' V');
var xlm35 = LM35[iR].concat(' °C');
var xtime = HR[iR].concat(' : ', MIN[iR]);
var xdate = '20'.concat(YR[iR], ' / ', MTH[iR], ' / ', DAY[iR]);
document.getElementById('dLDRW').innerHTML = xldrw;
document.getElementById('dLDRB').innerHTML = xldrb;
document.getElementById('dBATT').innerHTML = xbatt;
document.getElementById('dLM35').innerHTML = xlm35;
document.getElementById('dTIME').innerHTML = xtime;
document.getElementById('dDATE').innerHTML = xdate;
document.getElementById('dWD')innerHTML = WkDay[WD];
};
</SCRIPT>
<TR>
<TD colspan=4 id='TDBTNrefall'>
<BUTTON type='button' onclick='refreshBTN();'>
Refresh All Results (Measurements, Time, WeekDay and Date)
</BUTTON>
</TD>
</TR>
</TABLE>
<TABLE colspan=6 border=1 align=center width=95% style='font-size:20px; font-family:terminal;'>
<TR>
<TH colspan=6 id='THrstRTC'>
Reset RTC
</TH>
</TR>
<TR>
<FORM ID='RTCForm'>
<TR>
<TH colspan=6 id='THselTime'>
Select: Time Reset
</TH>
</TR>
<TR id='TRhrmin'>
<TD colspan=3>
(24HR Format)
<br/>
Hours (0-23):
<input type='number' name='TIME' id='RST24' min=0 max=23 value='13' size='2' />
</TD>
<TD colspan=3>
Minutes (0-59):
<input type='number' name='TIME' id='RSTMIN' min=0 max=59 value='30' size='2' />
</TD>
</TR>
<TR>
<TH colspan=6 id='THTselDt'>
Select: Date Reset
</TH>
</TR>
<TR>
<TD colspan=2 id='TDyrin'>
Year (0-99): 20
<input type='number' name='DATE'id='RSTYR' min=0 max=99 value='15' size='2'/>
</TD>
<TD colspan=2 id='TDmthsel'>
Month:
<SELECT name='DATE'id='RSTMTH'>
<option value='SV';>-select-</option>
<option value='01';>January</option>
<option value='02';>February</option>
<option value='03';>March</option>
<option value='04';>April</option>
<option value='05';>May</option>
<option value='06';>June</option>
<option value='07';>July</option>
<option value='08';>August</option>
<option value='09';>September</option>
<option value='10';>October</option>
<option value='11';>November</option>
<option value='12';>December</option>
</SELECT>
</TD>
<TD colspan=2 id='TDdayin'>
Day (1-31):
<input type='number' Name='DATE'id='RSTDAY' min=1 max=31 value='16' size='2' />
</TD>
</TR>
<TR>
<TH colspan=6 id='THTselwdrst'>
Select: Week Day Name Reset
</TH>
</TR>
<TR>
<TD colspan=6 id='TDwkdaysel'>
Weekday:
<SELECT name='DATE'id='RSTWD' size='1'>
<option value='S';>-select-</option>
<option value='1';>Monday</option>
<option value='2';>Tuesday</option>
<option value='3';>Wednesday</option>
<option value='4';>Thursday</option>
<option value='5';>Friday</option>
<option value='6';>Saturday</option>
<option value='7';>Sunday</option>
</SELECT>
</TD>
</FORM>
</TR>
<TR colspan=6 id='TRFchkrstval'>
<SCRIPT>
function CHKrstVal() {
RSTahr = document.getElementById('RST24').value;
switch(RSTahr){
case '1':
document.getElementById('d1').innerHTML = '01';
RSTahr = '01';
break;
case '2':
document.getElementById('d1').innerHTML = '02';
RSTahr = '02';
break;
case '3':
document.getElementById('d1').innerHTML = '03';
RSTahr = '03';
break;
case '4':
document.getElementById('d1').innerHTML = '04';
RSTahr = '04';
break;
case '5':
document.getElementById('d1').innerHTML = '05';
RSTahr = '05';
break;
case '6':
document.getElementById('d1').innerHTML = '06';
RSTahr = '06';
break;
case '7':
document.getElementById('d1').innerHTML = '07';
RSTahr = '07';
break;
case '8':
document.getElementById('d1').innerHTML = '08';
RSTahr = '08';
break;
case '9':
document.getElementById('d1').innerHTML = '09';
RSTahr = '09';
break;
default:
document.getElementById('d1').innerHTML = RSTahr;
break;
};
RSTamin = document.getElementById('RSTMIN').value;
switch(RSTamin){
case '1':
document.getElementById('d2').innerHTML = '01';
RSTamin = '01';
break;
case '2':
document.getElementById('d2').innerHTML = '02';
RSTamin = '02';
break;
case '3':
document.getElementById('d2').innerHTML = '03';
RSTamin = '03';
break;
case '4':
document.getElementById('d2').innerHTML = '04';
RSTamin = '04';
break;
case '5':
document.getElementById('d2').innerHTML = '05';
RSTamin = '05';
break;
case '6':
document.getElementById('d2').innerHTML = '06';
RSTamin = '06';
break;
case '7':
document.getElementById('d2').innerHTML = '07';
RSTamin = '07';
break;
case '8':
document.getElementById('d2').innerHTML = '08';
RSTamin = '08';
break;
case '9':
document.getElementById('d2').innerHTML = '09';
RSTamin = '09';
break;
default:
document.getElementById('d2').innerHTML = RSTamin;
break;
};
RSTayr = document.getElementById('RSTYR').value;
switch(RSTayr){
case '1':
document.getElementById('d3').innerHTML = '01';
RSTayr = '01';
break;
case '2':
document.getElementById('d3').innerHTML = '02';
RSTayr = '02';
break;
case '3':
document.getElementById('d3').innerHTML = '03';
RSTayr = '03';
break;
case '4':
document.getElementById('d3').innerHTML = '04';
RSTayr = '04';
break;
case '5':
document.getElementById('d3').innerHTML = '05';
RSTayr = '05';
break;
case '6':
document.getElementById('d3').innerHTML = '06';
RSTayr = '06';
break;
case '7':
document.getElementById('d3').innerHTML = '07';
RSTayr = '07';
break;
case '8':
document.getElementById('d3').innerHTML = '08';
RSTayr = '08';
break;
case '9':
document.getElementById('d3').innerHTML = '09';
RSTayr = '09';
break;
default:
document.getElementById('d3').innerHTML = RSTayr;
break;
};
RSTamth = document.getElementById('RSTMTH').value;
switch(RSTamth){
case '01':
document.getElementById('d4').innerHTML = 'JANUARY';
RSTCK = 1;
break;
case '02':
document.getElementById('d4').innerHTML = 'FEBRUARY';
RSTCK = 1;
break;
case '03':
document.getElementById('d4').innerHTML = 'MARCH';
RSTCK = 1;
break;
case '04':
document.getElementById('d4').innerHTML = 'APRIL';
RSTCK = 1;
break;
case '05':
document.getElementById('d4').innerHTML = 'MAY';
RSTCK = 1;
break;
case '06':
document.getElementById('d4').innerHTML = 'JUNE';
RSTCK = 1;
break;
case '07':
document.getElementById('d4').innerHTML = 'JULY';
RSTCK = 1;
break;
case '08':
document.getElementById('d4').innerHTML = 'AUGUST';
RSTCK = 1;
break;
case '09':
document.getElementById('d4').innerHTML = 'SEPTEMBER';
RSTCK = 1;
break;
case '10':
document.getElementById('d4').innerHTML = 'OCTOBER';
RSTCK = 1;
break;
case '11':
document.getElementById('d4').innerHTML = 'NOVEMBER';
RSTCK = 1;
break;
case '12':
document.getElementById('d4').innerHTML = 'DECEMBER';
RSTCK = 1;
break;
case 'SV':
document.getElementById('d4').innerHTML = 'ERR';
RSTCK = 255;
break;
};
RSTaday = document.getElementById('RSTDAY').value;
switch(RSTaday){
case '1':
document.getElementById('d5').innerHTML = '1';
RSTaday = '01';
break;
case '2':
document.getElementById('d5').innerHTML = '2';
RSTaday = '02';
break;
case '3':
document.getElementById('d5').innerHTML = '3';
RSTaday = '03';
break;
case '4':
document.getElementById('d5').innerHTML = '4';
RSTaday = '04';
break;
case '5':
document.getElementById('d5').innerHTML = '5';
RSTaday = '05';
break;
case '6':
document.getElementById('d5').innerHTML = '6';
RSTaday = '06';
break;
case '7':
document.getElementById('d5').innerHTML = '7';
RSTaday = '07';
break;
case '8':
document.getElementById('d5').innerHTML = '8';
RSTaday = '08';
break;
case '9':
document.getElementById('d5').innerHTML = '9';
RSTaday = '09';
break;
default:
document.getElementById('d5').innerHTML = RSTaday;
break;
};
RSTawd = document.getElementById('RSTWD').value;
switch(RSTawd){
case '1':
document.getElementById('d6').innerHTML = 'Monday';
RSTCK = (RSTCK || 1);
break;
case '2':
document.getElementById('d6').innerHTML = 'Tuesday';
RSTCK = (RSTCK || 1);
break;
case '3':
document.getElementById('d6').innerHTML = 'Wednesday';
RSTCK = (RSTCK || 1);
break;
case '4':
document.getElementById('d6').innerHTML = 'Thursday';
RSTCK = (RSTCK || 1);
break;
case '5':
document.getElementById('d6').innerHTML = 'Friday';
RSTCK = (RSTCK || 1);
break;
case '6':
document.getElementById('d6').innerHTML = 'Saturday';
RSTCK = (RSTCK || 1);
break;
case '7':
document.getElementById('d6').innerHTML = 'Sunday';
RSTCK = (RSTCK || 1);
break;
case 'S':
document.getElementById('d6').innerHTML = 'Err';
RSTCK = 255;
break;
};
if (RSTCK == 0) {
RSTCK = 1;
};
};
</SCRIPT>
<TD colspan=1 id='TDBTNchkrstval'>
<BUTTON onclick='CHKrstVal();'>
Check Reset Values
</BUTTON>
</TD>
<TD colspan=5 id='TDrstResSpan'>
Reset Time:
<span id='d1'>
na
</span> :
<span id='d2'>
na
</span>
Reset Date: 20
<span id='d3'>
na
</span> /
<span id='d4'>
na
</span> /
<span id='d5'>
na
</span>
Reset Week Day:
<span id='d6'>
na
</span>
</TD>
</TR>
<TR colspan=6 id='TRFsendrst'>
<SCRIPT>
function SendRST() {
var messageToPic;
if(RSTCK == 0) {
messageToPic = 'Check selection first';
document.getElementById('d8').innerHTML = messageToPic;
};
if(RSTCK != 0) {
if(RSTCK == 1) {
messageToPic = 'Hr='.concat(RSTahr,
'Min=', RSTamin,
'Yr=', RSTayr,
'Mth=', RSTamth,
'Day=', RSTaday,
'WD=', RSTawd);
document.getElementById('d8').innerHTML = messageToPic;
};
if(RSTCK == 255) {
messageToPic = 'Select MTH/WD then Check Selection';
document.getElementById('d8').innerHTML = messageToPic;
};
};
};
</SCRIPT>
<TD colspan=1 id='TDBTNpicrstval'>
<BUTTON onclick='SendRST();'>
Reset Values
</BUTTON>
</TD>
<TD colspan= 5 id='TDd8'>
<SPAN id='d8'>
Reset dialogue
</SPAN>
</TD>
</TR>
</TR>
</TABLE>
</BODY>
</HTML>
