@ -5,99 +5,108 @@ enum parts
HTML_BEGIN , HTML_BEGIN ,
HTML_END , HTML_END ,
STYLE , STYLE ,
SCRIPT , SCRIPT ,
ACC_CALIBRATE ACC_CALIBRATE
} ; } ;
const char html_begin [ ] PROGMEM = { const char html_begin [ ] PROGMEM = R " (
" <!DOCTYPE html> \n \
< ! DOCTYPE html >
< html > \ n " }; < html >
) " ;
const char style [ ] PROGMEM = { const char style [ ] PROGMEM = R " (
" <head> \n \
< head >
< style > \ n \ < style >
button { \ n \ button
width : 190 px ; \ n \ {
height : 40 px ; \ n \ width : 190 px ;
} \ n \ height : 40 px ;
# navs {\n\ }
height : 40 px ; \ n \ # navs
width : 400 px ; \ n \ {
position : relative ; \ n \ height : 40 px ;
} \ n \ width : 400 px ;
footer { \ n \ position : relative ;
height : 5 % ; \ n \ }
text - align : center ; \ n \ footer
width : 100 % ; \ n \ {
margin - top : 100 px ; \ n \ height : 5 % ;
} \ n \ text - align : center ;
. clear { \ n \ width : 100 % ;
clear : left ; \ n \ margin - top : 100 px ;
} \ n \ }
# hbs_text {\n\ . clear
text - align : left ; \ n \ {
width : 400 px ; \ n \ clear : left ;
text - indent : 20 px ; \ n \ }
} \ n \ # hbs_text
< / style > \ n \ {
< meta charset = \ " UTF-8 \" > \n \
text - align : left ;
< / head > \ n \ width : 400 px ;
< body > \ n \ text - indent : 20 px ;
\ n \ }
< div id = \ " main_block \" align= \" center \" > \n \
< / style >
< h2 > Л а б о р а т о р н а я р а б о т а < / h2 > \ n \ < meta charset = " UTF-8 " >
< h3 > А к с е л е р о м е т р ADW22035Z - Cемейство ADXL103 < / h3 > \ n \ < / head >
< p id = \ " hbs_text \" >Акселерометр подает на выход данные по одной оси.</p> \n \
< body >
< p id = \ " hbs_text \" >Частота обновления графика - 1 раз в секунду. Данные с сенсора снимаются \n \
с ч а с т о т о й в 50 Hz . < / p > \ n \ < div id = " main_block " align = " center " >
< canvas id = \ " myCanvas \" width= \" 400 \" height= \" 200 \" style= \" border:1px solid #000000; \" > \n \
< h2 > Л а б о р а т о р н а я р а б о т а < / h2 >
Б р а у з е р у с т а р е л ! \ n \ < h3 > А к с е л е р о м е т р ADW22035Z - Cемейство ADXL103 < / h3 >
< / canvas > \ n " }; < p id = " hbs_text " > А к с е л е р о м е т р п о д а е т н а в ы х о д д а н н ы е п о о д н о й о с и . < / p >
< p id = " hbs_text " > Ч а с т о т а о б н о в л е н и я г р а ф и к а - 1 р а з в с е к у н д у . Д а н н ы е с с е н с о р а с н и м а ю т с я
с ч а с т о т о й в 50 Hz . < / p >
< canvas id = " myCanvas " width = " 400 " height = " 200 " style = " border:1px solid #000000; " >
Б р а у з е р у с т а р е л !
< / canvas >
) " ;
const char script [ ] PROGMEM = { const char script [ ] PROGMEM = R " (
" <script> \n \
< script >
var socket = new WebSocket ( \ " ws://192.168.4.1:81 \" ); \n \
var socket = new WebSocket ( " ws://192.168.1.1:81 " ) ;
var i , data ; \ n \ var i , data ;
var c = document . getElementById ( \ " myCanvas \" ); \n \
var c = document . getElementById ( " myCanvas " ) ;
var context = c . getContext ( \ " 2d \" ); \n \
var context = c . getContext ( " 2d " ) ;
\ n \
socket . onopen = function ( ) { \ n \ socket . onopen = function ( ) {
alert ( ' С о е д и н е н и е у с т а н о в л е н о . ' ) ; \ n \ alert ( ' С о е д и н е н и е у с т а н о в л е н о . ' ) ;
} ; \ n \ } ;
socket . onclose = function ( event ) { \ n \ socket . onclose = function ( event ) {
if ( ! event . wasClean ) { \ n \ if ( ! event . wasClean ) {
alert ( ' О б р ы в с о е д и н е н и я ' ) ; \ n \ alert ( ' О б р ы в с о е д и н е н и я ' ) ;
} \ n \ }
} ; \ n \ } ;
socket . onmessage = function ( event ) { \ n \ socket . onmessage = function ( event ) {
context . clearRect ( 0 , 0 , 400 , 200 ) ; \ n \ context . clearRect ( 0 , 0 , 400 , 200 ) ;
context . beginPath ( ) ; \ n \ context . beginPath ( ) ;
data = JSON . parse ( event . data ) ; \ n \ data = JSON . parse ( event . data ) ;
context . moveTo ( 0 , data . data [ 0 ] ) ; \ n \ context . moveTo ( 0 , data . data [ 0 ] ) ;
for ( i = 0 ; i < 200 ; i + + ) { \ n \ for ( i = 0 ; i < 200 ; i + + ) {
context . lineTo ( i * 2 , data . data [ i ] ) ; \ n \ context . lineTo ( i * 2 , data . data [ i ] ) ;
} \ n \ }
context . stroke ( ) ; \ n \ context . stroke ( ) ;
} ; \ n \ } ;
function calibrateDevice ( ) { \ n \ function calibrateDevice ( ) {
var calibrating = 10 ; \ n \ var calibrating = 10 ;
socket . send ( JSON . stringify ( calibrating ) ) ; \ n \ socket . send ( JSON . stringify ( calibrating ) ) ;
document . getElementById ( \ " calibrate_text \" ).innerHTML = \ "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х \" ; \n \
document . getElementById ( " calibrate_text " ) . innerHTML = " Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х " ;
} \ n \ }
< / script > \ n \ < / script >
" } ;) " ;
const char html_end [ ] PROGMEM = { const char html_end [ ] PROGMEM = R " (
" <div class= \" clear \" ></div> \n \
< div class = " clear " > < / div >
< / div > \ n \ < / div >
< footer > Т а м б о в с к и й Г о с у д а р с т в е н н ы й Т е х н и ч е с к и й У н и в е р с и т е т 2017 г . \ n \ < footer > Т а м б о в с к и й Г о с у д а р с т в е н н ы й Т е х н и ч е с к и й У н и в е р с и т е т 2017 - 2018 г .
< / footer > \ n \ < / footer >
< / body > \ n \ < / body >
< / html > \ n " }; < / html >
) " ;
const char acc_calibrate [ ] PROGMEM = { const char acc_calibrate [ ] PROGMEM = R " =(
" <p id= \" calibrate_text \" onclick= \" calibrateDevice() \" >Устройство не откалибровано.</p> \n \
< p id = " calibrate_text " > У с т р о й с т в о н е о т к а л и б р о в а н о . < / p >
< button onclick = \ " calibrateDevice() \" >Откалибровать</button> " } ; < button onclick = " calibrateDevice() " > О т к а л и б р о в а т ь < / button >
) = " ;
static int getHtml ( parts p , char & adr , uint16_t buf_size , uint16_t bias ) static int getHtml ( parts p , char & adr , uint16_t buf_size , uint16_t bias )
{ {
