@ -12,9 +12,6 @@ enum parts
const char html_begin [ ] PROGMEM = R " (
< ! DOCTYPE html >
< html >
) " ;
const char style [ ] PROGMEM = R " (
< head >
< style >
button
@ -51,22 +48,44 @@ const char style[] PROGMEM = R"(
< body >
< div id = " main_block " align = " center " >
< h2 > Л а б о р а т о р н а я р а б о т а < / h2 >
< h3 > А к с е л е р о м е т р ADW22035Z - Cемейство ADXL103 < / h3 >
< h1 > Л а б о р а т о р н а я р а б о т а < / h1 >
< h2 > А к с е л е р о м е т р ADW22035Z - Cемейство ADXL103 < / h2 >
< p id = " hbs_text " > А к с е л е р о м е т р п о д а е т н а в ы х о д д а н н ы е п о о д н о й о с и . < / p >
< p id = " hbs_text " > Ч а с т о т а о б н о в л е н и я г р а ф и к а - 1 р а з в с е к у н д у . Д а н н ы е с с е н с о р а с н и м а ю т с я
с ч а с т о т о й в 50 Hz . < / p >
< canvas id = " myCanvas " width = " 40 0 " height = " 20 0 " style = " border:1 px solid #000000; " >
< canvas id = " myCanvas " width = " 44 0 " height = " 24 0 " style = " border:0 px solid #000000; " >
Б р а у з е р у с т а р е л !
< / canvas >
) " ;
const char script [ ] PROGMEM = R " (
< script >
var socket = new WebSocket ( " ws://192.168.1.1:81 " ) ;
var i , data ;
var c = document . getElementById ( " myCanvas " ) ;
var context = c . getContext ( " 2d " ) ;
var maxX = 400 , maxY = 200 ;
var biasX = 20 , biasY = 20 ;
function iY ( y ) {
return maxY + biasY - y ;
}
context . beginPath ( ) ;
context . moveTo ( 20 , iY ( 0 ) ) ;
for ( i = 0 ; i < = 200 ; i + = 20 ) {
context . lineTo ( 20 , iY ( i ) ) ;
context . lineTo ( 15 , iY ( i ) ) ;
context . moveTo ( 20 , iY ( i ) ) ;
textY = i / 200 * 3.3 ;
context . fillText ( textY . toFixed ( 1 ) , 0 , iY ( i - 2.5 ) ) ;
}
context . moveTo ( 20 , iY ( 0 ) ) ;
for ( i = 20 ; i < = 420 ; i + = 40 ) {
context . lineTo ( i , iY ( 0 ) ) ;
context . lineTo ( i , iY ( - 5 ) ) ;
context . moveTo ( i , iY ( 0 ) ) ;
textX = ( i - 20 ) / 400 * 4 ;
context . fillText ( textX . toFixed ( 1 ) , i - 10 , iY ( - 20 ) ) ;
}
context . stroke ( ) ;
socket . onopen = function ( ) {
alert ( ' С о е д и н е н и е у с т а н о в л е н о . ' ) ;
@ -77,12 +96,12 @@ const char script[] PROGMEM = R"(
}
} ;
socket . onmessage = function ( event ) {
context . clearRect ( 0 , 0 , 400 , 200 ) ;
context . clearRect ( biasX , 0 , maxX , maxY + biasY ) ;
context . beginPath ( ) ;
data = JSON . parse ( event . data ) ;
context . moveTo ( 0 , data . data [ 0 ] ) ;
for ( i = 0 ; i < 200 ; i + + ) {
context . lineTo ( i * 2 , data . data [ i ] ) ;
context . moveTo ( biasX , data . data [ 0 ] + biasY ) ;
for ( i = 1 ; i < 200 ; i + + ) {
context . lineTo ( i * 2 + biasX , data . data [ i ] + biasY ) ;
}
context . stroke ( ) ;
} ;
@ -92,17 +111,16 @@ const char script[] PROGMEM = R"(
document . getElementById ( " calibrate_text " ) . innerHTML = " Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х " ;
}
< / script >
) " ;
const char html_end [ ] PROGMEM = R " (
< div class = " clear " > < / div >
< / div >
< footer > Т а м б о в с к и й Г о с у д а р с т в е н н ы й Т е х н и ч е с к и й У н и в е р с и т е т 2017 - 2018 г .
< footer >
< hr \ > Т а м б о в с к и й Г о с у д а р с т в е н н ы й Т е х н и ч е с к и й У н и в е р с и т е т 2017 - 2018 г .
< / footer >
< / body >
< / html >
) " ;
const char acc_calibrate [ ] PROGMEM = R " =(
< p id = " calibrate_text " > У с т р о й с т в о н е о т к а л и б р о в а н о . < / p >
< button onclick = " calibrateDevice() " > О т к а л и б р о в а т ь < / button >
@ -118,15 +136,15 @@ static int getHtml(parts p, char &adr, uint16_t buf_size, uint16_t bias)
case HTML_BEGIN :
html_part = html_begin ;
break ;
case HTML_END :
html_part = html_end ;
break ;
case STYLE :
html_part = style ;
break ;
case SCRIPT :
html_part = script ;
break ;
// case HTML_END:
// html_part = html_end;
// break;
// case STYLE:
// html_part = style;
// break;
// case SCRIPT:
// html_part = script;
// break;
case ACC_CALIBRATE :
html_part = acc_calibrate ;
break ;
