ESP32 gysfdmaxb Server Viwer CGI

ESP32 gysfdmaxb Server (GPS / Wi-Fi Http Server) から受信できる、GPSデータをCGIで受け取って、
Yahoo Map API を使って、ブラウザー上で、MAP 表示できるようにしてみました。

Yahoo MAP APIの使い方に関しては、
http://www.hanemaru.com/itemcolumn/11yolp001.html
を参考にさせて貰いました。ありがとうございました。

Perl Http Client のプログラムは、
http://www.geekpage.jp/programming/perl-network/simple-http-client.php
を参考にさせて貰いました。ありがとうございました。

使い方は、ESP32 gysfdmaxb Server と同じローカルネットワークに繋がった、PC(おんちゃんは、Windows10) に Apache を動作させて、
Apache の /cgi-bin/ ディレクトリー下に、今回の esp32_gps.cgi を設置します。

その後、同じ　PC のブラウザーから、今度は、esp32_gps.cgi を実行すれば、OK です。
例 : http://localhost/cgi-bin/esp32_gps.cgi

そうすると、esp32_gps.cgi から、ESP32 gysfdmaxb Server の IP:192.168.1.91 へHTTP Client としてアクセスして、GPSデータを取り込んで、その位置情報を使って、Yahoo Map API を使って、現在位置の地図を、PCのブラウザーに表示します。

取り敢えず、プログラムはこちらです。
ESP32 gysfdmaxb Server IPは、ご自分の環境に合わせてください。
$URL='192.168.1.91';

Yahoo application ID の取得が必要です。
$appid ="......"; # Yahoo application ID

esp32_gps.cgi
#!/perl/bin/perl #--------- # esp32_gps.cgi # Yahoo Map api を使って、esp32 GPS からの位置情報を表示します。 # 参考ページ # http://www.hanemaru.com/itemcolumn/11yolp001.html #--------- use IO::Socket; $URL='192.168.1.91'; # esp32 みちびき GPS の IP $PAGE='/gps'; $appid ="......"; # Yahoo application ID $sock = new IO::Socket::INET(PeerAddr=>$URL, PeerPort=>80, Proto=>'tcp'); die "IO::Socket : $!" unless $sock; print $sock "GET $PAGE HTTP/1.0\r\n\r\n"; @gps_dt=<$sock>; print "Content-type: text/html\n\n"; print << "END_OF_HTML"; <!DOCTYPE html> <html lang="ja"> <head> <meta charset="shift-jis"> <meta http-equiv="Content-Language" content="ja" /> </head> <body> END_OF_HTML foreach $line (@gps_dt){ chomp($line); if ($line =~ m/^\$GP*/){ #print "$line<br />\n"; } if($line =~ m/^\$GPRMC/){ @gprmc =split(/\,/,$line); $ido=$gprmc[3]; $kiedo=$gprmc[5]; } } $ido_m = substr($ido,0,2); $ido_s = substr($ido,2); $idox = $ido_s / 60.0 + $ido_m; $kiedo_m = substr($kiedo,0,3); $kiedo_s = substr($kiedo,3); $kiedox = $kiedo_s / 60.0 + $kiedo_m; #print "ido=$ido<br />\n"; #print "kiedo=$kiedo<br />\n"; print "idox=$idox<br />\n"; print "kiedox=$kiedox<br />\n"; print << "END_OF_HTML"; <br /> <div id="map" style="width:400px; height:300px"></div> <script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=$appid"></script> <script type="text/javascript"> window.onload = function(){ var ymap = new Y.Map("map"); ymap.drawMap(new Y.LatLng($idox, $kiedox), 17); /* ymap.addControl(new Y.CenterMarkControl()); */ ymap.addControl(new Y.HomeControl()); ymap.addControl(new Y.LayerSetControl()); ymap.addControl(new Y.ScaleControl()); ymap.addControl(new Y.SliderZoomControlVertical()); } </script> </body> </html> END_OF_HTML #close(STDOUT); close($sock); exit;

カテゴリ:

検索

このブログ記事について

カテゴリ

月別アーカイブ

ウェブページ

サイトナビ