例によって、グラフィックスのところのＨＴＭＬの記述は、ＳＶＧを使っている。
直線は、ＬＩＮＥコマンド、円弧は、ＰＡＴＨコマンドでそれぞれ記述している。テキストをこのように斜めに表示するパラメーターの仕組みが良く分からないので、実際にデータをすこしづつ変えながら表示を確認した。メーターは、1度＝１ｄＢｍとなるようにして、針の位置を計算して表示させるようにしている。Ａｒｄｕｉｎｏの開発環境では浮動小数点演算もサポートしており、ＥＳＰ６２６６自体も３２Ｂｉｔ ＣＰＵなので計算速度は全く問題ない。
ブラウザによってうまく表示されないところもあったが、このコードでは、すべてＯＫのようだ。
あいかわらず、表示の速度は遅い。データ更新は、０．５秒おきにやっており、ＬＣＤにはそのように表示されるのだが、ＷＥＢの更新は、５秒くらいかかる。
なぜなのか良くわからない。ＷｉＦｉ特有のものだろうか。データ更新の間のスリープモード採用も含めて、まだまだ、研究の余地あり。
あまり必要とする人はいないと思うが、参考までに、グラフィクス表示のところの部分のソースコードを乗せておく。
void WriteHTMLgrafics()
{
// Write HTML CODE
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Prepare the response. Start with the common header:
String s = "<html> <head>";
s += "<meta http-equiv='Refresh' content='5'>\r\n";
s += "<title>Field Strength Meter</title> </head>";
client.print(s);
switch (FieldLen) {
case 4:
{ WorkString = "x='112'";
break;}
case 5:
{ WorkString = "x='96'";
break;}
default:
WorkString = "x='85'";
}
Serial.println(WorkString); //Debug
s = "<BODY>";
s += "<svg width='500' height='600'>";
s += "<g font-size='40'>";
s += "<text x='58' y='30' fill='blue'> Field Strength </text>";
s += "<text "+ WorkString + " y='80' fill='black'>";
s += StrengthString.substring(0,FieldLen-1);
s += " dBm </text>";
client.print(s); // Send the response to the client
// Draw Graf
s = "<rect x='40' y='120' width='270' height='150' style='fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9' />";
s += "<path stroke='black' fill='none' d='M 65,210 A 160,160 0 0 1 285,210'>";
s += "</path>";
client.print(s); // Send the response to the client
s = "<g font-size='20'>";
s += "<text x='160' y='260' fill='black'> dBm </text>";
s += "<g font-size='12'>";
s += "<text x='77' y='190' fill='black' rotate='-30' dy='0,-3,-4'>-60 </text>";
s += "<text x='128' y='165' fill='black' rotate='-10' dy='0,-1,-2'>-40 </text>";
s += "<text x='188' y='160' fill='black' rotate='10' dy='0,1,2'>-20 </text>";
s += "<text x='255' y='180' fill='red' rotate='30' dy='0,1,2'>0 </text>";
client.print(s); // Send the response to the client
s = "<line x1='278' y1='203' x2='281' y2='200' stroke='red' stroke-width='1' />" ; // +10dB
s += "<line x1='255' y1='187' x2='257' y2='183' stroke='red' stroke-width='3' />"; // 0
s += "<line x1='230' y1='176' x2='231' y2='171' stroke='blue' stroke-width='1' />"; // -10
s += "<line x1='203' y1='168' x2='204' y2='164' stroke='blue' stroke-width='3' />"; // -20
s += "<line x1='175' y1='166' x2='175' y2='161' stroke='blue' stroke-width='1' />"; // -30
s += "<line x1='147' y1='168' x2='146' y2='163' stroke='blue' stroke-width='3' />"; // -40
s += "<line x1='120' y1='176' x2='119' y2='171' stroke='blue' stroke-width='1' />"; // -50
s += "<line x1='95' y1='187' x2='93' y2='183' stroke='blue' stroke-width='3' />"; // -60
s += "<line x1='72' y1='203' x2='69' y2='200' stroke='blue' stroke-width='1' />"; // -70
client.print(s); // Send the response to the client
// Meter Pointer Display
s = "<line x1='"+ X1+ "' y1='" + Y1 + "' x2='"+ X2 + "' y2='" + Y2 + "' stroke='Blue' stroke-width='2' />";
s += "/svg>";
s += "</BODY>";
s += "</html>\n";
client.print(s); // Send the response to the client
}
