月度归档： 2023 年 9 月

js 调用摄像头实现拍照 转载

mediaDevices getUserMedia
调用摄像头

核心方法 Window.navigator.mediaDevices.getUserMedia()

Window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。
navigator.mediaDevices该对象提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。
getUserMedia(constraints) 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道、一个音频轨道，也可能是其它轨道类型。
navigator 详细说明  MDN-navigator
mediaDevices 详细说明  MDN-mediaDevices
getUserMedia 详细说明 MDN-getUserMedia
constraints 视频轨道的配置说明  MDN-Constraints

let constraints={
  audio: false, //音频轨道
  video: true  //视频轨道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise..then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

界面展示摄像头录制的信息，界面中需要添加 video标签，将获取到的 stream 赋值到 video 中；

let constraints={
  audio: true, //音频轨道
  video: true  //视频轨道
};
let srcVideo=document.querySelector('video.src-video');
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise..then(function(stream) {
  /* 使用这个stream stream */
  srcVideo.srcObject=stream;
  srcVideo.play();
})
.catch(function(err) {
  /* 处理error */
});

拍照

拍照实现逻辑

获取 srcVideo元素，获取需要拍照的数据；
获取 canvas元素，根据srcVideo中的数据进行图片绘制 ctx.drawImage()；
将 canvas绘制的图片信息，展示在 img标签中；

// 获取 `srcVideo`元素，获取需要拍照的数据；
let srcVideo=document.querySelector('video.src-video');
let canvas = document.getElementById('canvas');
//获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//将 `canvas`绘制的图片信息，展示在 `img`标签中；
let photo=document.querySelector('img.photo');
photo.src=canvas.toDataURL();

拍照完整代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拍照</title>
</head>

<body>
    <button onclick="openMedia()" >开启摄像头</button>
    <button onclick="takePhoto()" >拍照</button><br/><br/>
    <video style="display: none;" class="src-video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px" style="display: none;"></canvas>
    <img src="" alt="" class="photo">
</body>
<script>
    let srcVideo = document.querySelector('video.src-video');
    let mediaStream;
    let photo=document.querySelector('img.photo');
    // 开启摄像头
    let openMedia = function () {
        photo.src='';
        srcVideo.style.display='block';
        let constraints = {
            audio: false, //音频轨道
            video: {width:500,height:500}  //视频轨道
        }
        let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
        mediaPromise.then(function (stream) {
            /* 使用这个stream stream */
            mediaStream=stream;
            srcVideo.srcObject = stream;
            srcVideo.play();
        }).catch(function (err) {
            /* 处理error */
            alert(err);
        });
    };

    // 拍照
    let takePhoto=function(){
        let canvas = document.querySelector('#canvas');
        //获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
        let ctx = canvas.getContext('2d');
        ctx.drawImage(srcVideo, 0, 0, 500, 500);
        //将 `canvas`绘制的图片信息，展示在 `img`标签中；
        photo.src=canvas.toDataURL();
        closeMedia();
    };

    // 关闭摄像头
    let closeMedia=function(){
        mediaStream.getTracks().forEach(track => {
            track.stop();
        });
        srcVideo.style.display='none';
    }

</script>
</html>



ESP8266+LED+WIFI

#include <ESP8266WiFi.h>
#include <time.h>
#include <stdlib.h>
#include "LedControl.h"



// function declare  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>
void SetupSerial();
void SetupWifiScan();
void SetupWifiClient();
int ConnectWifi(const char* ssid, const char* password);
void ConnectMulitWif();
int WifiScan();
void DebugPrint(String FuncName, int id, String Desc);
String GetRpiServerIP(void);
void ClearLcd(LedControl lca1, int manlcd);
void showLEDData(int nmaxRow,int nmaxCol);
void loopWebServer();
String DealWith(String strCommand);
void SetupWifiWebServer() ;
void DisplayIP();
// function declare <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==


//Define ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>


#define PIN_CAR_L1 1
#define PIN_CAR_L2 3
#define PIN_CAR_R1 15
#define PIN_CAR_R2 13

#define PIN_CAR_LPWM 12
#define PIN_CAR_RPWM 14


#define MX_CLOCK3        16
#define MX_CS3           5
#define MX_DIN3          4

#define MX_CLOCK2        4
#define MX_CS2           0
#define MX_DIN2         2

#define MX_CLOCK1        12
#define MX_CS1           13
#define MX_DIN1          15


#define MX_LED          16

#define MX_COLUMNS       32
#define MX_ROWS          4


#define DEBUG true

#define DEVDEBUG true

//Define <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==

// varable ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>

const char * g_ssid[]={"RobotWifi","Casey_swb013","ChinaNet-Mb5T","casey"};
const char * g_password[]={"19888888","itd888888","s5nwgbgx","Cs2017@$"};

const int   g_ssidNum=4;

const int g_rowSetting[] ={7,6,5,4,3,2,1,0};


String g_LEDData="0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF";
String g_preLEDData="123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF";

int g_preclickval[4]={0,0,0,0};
int value = 0;
WiFiServer server(80);
//String g_strIP＝"192.168.1.17";



byte CharAscii[128][8] = {
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  1
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  2
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  3
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  4

{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  5
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  6
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  7
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  8

{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  9
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  10
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  11
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //  12

{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0x01},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x02},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x03},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x04},  //  13
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0x05},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x06},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x07},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x08},  //   14
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0x09},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0xF0},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0xF1},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0xF2},  //  15
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xF3},  {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0xF4},  {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0xF5},  {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0xF6},  //  16
  
{0x38,0x38,0x6C,0x6C,0x7C,0xFC,0xC6,0xC3}, {0x7C,0x7E,0x66,0x7C,0x7C,0x66,0x7E,0x7C}, {0x7E,0x7E,0x60,0x60,0x60,0x60,0x7E,0x7E}, {0x78,0x7C,0x66,0x66,0x66,0x66,0x7C,0x78},  //ABCD  
{0x7C,0x7C,0x60,0x7C,0x7C,0x60,0x7C,0x7C}, {0x7E,0x7E,0x60,0x7E,0x7E,0x60,0x60,0x60}, {0x78,0xFC,0xCC,0xC0,0xDC,0xCC,0x6C,0x7C}, {0x66,0x66,0x66,0x7E,0x7E,0x66,0x66,0x66},  
{0x7E,0x7E,0x18,0x18,0x18,0x18,0x7E,0x7E}, {0x7E,0x0C,0x0C,0x0C,0x0C,0x5C,0xFC,0x78}, {0x66,0x6C,0x78,0x70,0x70,0x78,0x6C,0x66}, {0x60,0x60,0x60,0x60,0x60,0x60,0x7E,0x7E},
{0xE7,0xFF,0xFF,0xDB,0xDB,0xDB,0xC3,0xC3}, {0xE3,0xF3,0xFB,0xDB,0xCF,0xC7,0xC7,0xC3}, {0x7E,0x7E,0x66,0x66,0x66,0x66,0x7E,0x7E}, {0x78,0x7C,0x66,0x66,0x6C,0x78,0x60,0x60},  
{0x3C,0x7E,0x66,0x66,0x66,0x66,0x7E,0x3B}, {0x7C,0x7E,0x66,0x7E,0x78,0x6C,0x66,0x62}, {0x7E,0x7C,0x60,0x7C,0x3E,0x06,0x3E,0x7E}, {0xFF,0xFF,0x18,0x18,0x18,0x18,0x18,0x18}, 
{0x66,0x66,0x66,0x66,0x66,0x66,0x7E,0x7E}, {0xC1,0xE3,0x63,0x36,0x36,0x1C,0x18,0x18}, {0x80,0x81,0xC9,0x49,0x6B,0x3A,0x16,0x14}, {0x81,0xC3,0x66,0x3C,0x1C,0x3C,0x66,0xC3}, //uvwx
{0x81,0xC3,0x66,0x3C,0x18,0x18,0x18,0x18}, {0x7F,0x7F,0x6,0x1C,0x1C,0x30,0x7F,0xFF},  {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, //-
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00},
{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}, {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}
};


byte eight[8]= {0x7E,0x7E,0x66,0x7E,0x7E,0x66,0x7E,0x7E}; 
byte dot[8]=   {0x00,0x00,0x00,0x00,0x00,0x00,0x18,0x18};  
byte smile[8]=   {0x3C,0x42,0xA5,0x81,0xA5,0x99,0x42,0x3C};
byte neutral[8]= {0x3C,0x42,0xA5,0x81,0xBD,0x81,0x42,0x3C};


// varable  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==  <==



String m_strInputData="0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF";

byte chrShowData[4][32] ={{B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,
                        B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000},

                        {B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,
                        B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000},

                        {B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,
                        B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000},

                        {B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,
                        B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000,B00000000}};

byte g_chrShowData[4][32] ={{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0},

                        {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0},

                        {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0},

                        {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0}};

/*
 Now we need a LedControl to work with.
 ***** These pin numbers will probably not work with your hardware *****
 pin 4 is connected to the DataIn
 pin 16 is connected to the CLK
 pin  is connected to LOAD
 We have only a single MAX72XX.
 */
LedControl lc1=LedControl(MX_DIN1, MX_CLOCK1, MX_CS1,8);
LedControl lc2=LedControl(MX_DIN2, MX_CLOCK2, MX_CS2,8);


/* we always wait a bit between updates of the display */
unsigned long delaytime=100;

// FUNCTION DEFINE ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>

// FUNCTION DEFINE [Setup]==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==>  ==> ==>  ==>

void SetupSerial()
{
    Serial.begin(115200);
    while (!Serial)
    {
        delay(100);
    }
}

void SetupWifiWebServer() 
{
    pinMode(2, OUTPUT);
    digitalWrite(2, 0);
    server.begin();
    Serial.println("Server started");
}

void DebugPrint(String FuncName, int id, String Desc)
{
    Serial.print(FuncName);
    Serial.print("[");
    Serial.print(id);
    Serial.print("]::");
    Serial.println(Desc);
}

void SetupWifiScan()
{
    WiFi.mode(WIFI_STA);
    WiFi.disconnect();
    delay(100);
    Serial.println("wifi scan Setup done");
}



String  GetRpiServerIP(void)
{

  Serial.print("connecting to ");
  Serial.println("www.inhhh.com");
    String strAllLines="";

  WiFiClient client;

  if (!client.connect("www.inhhh.com", 80))
  {
    Serial.println("connection failed");
    return "";
  }


  String url = "/Arduino/API.php?QUERYTYPE=GETLEDBYCHARD&QUERYVALUE=&SPLITID=LED001";

  client.print(String("GET ") + url + " HTTP/1.1\r\n" +
               "Host: www.inhhh.com\r\n" +
               "Connection: close\r\n\r\n");
  unsigned long timeout = millis();
  while (client.available() == 0)
  {
    if (millis() - timeout > 2000)
    {
        Serial.println(">>> Client Timeout !");
        client.stop();
        return strAllLines;
    }
  }

  int ln2=0;
  int ln1 = strAllLines.indexOf("|");
  int ln3=1;
  while(client.available() && ln3==1)
  {
    String line = client.readStringUntil('\r');
    if(line.length()>5)
    {
      int ln1 = line.indexOf("|");
      strAllLines = strAllLines + line;
      if(ln1>0)
        ln2++;

      if(ln2>=2)
         ln3=0;

    }
  }

  Serial.println();


  g_LEDData = strAllLines;
  int line20181228 = strAllLines.indexOf("|");
  Serial.println(line20181228);
  g_LEDData = strAllLines.substring(line20181228+1);

  int line201812282 = g_LEDData.indexOf("|");
  g_LEDData = g_LEDData.substring(0,line201812282);

  int ntry=20;
  while(ntry>=0)
  {
      int l2 = g_LEDData.indexOf("\r");
      if(l2>0)
      {
          g_LEDData = g_LEDData.substring(0,l2)+ g_LEDData.substring(l2+1);
          ntry--;
        }
      else
        ntry=-2;
  }

   ntry=20;
  while(ntry>=0)
  {
      int l2 = g_LEDData.indexOf("\n");
      if(l2>0)
      {
          g_LEDData = g_LEDData.substring(0,l2)+ g_LEDData.substring(l2+1);
          ntry--;
        }
      else
        ntry=-2;
  }
  
Serial.println("closing connection>>");
Serial.println(g_LEDData);
Serial.println("closing connection<<");

  return "";
 }

int WifiScan()
{
    String strThisFunc="WifiScan";
    DebugPrint(strThisFunc.c_str(),1,"scan start");

    Serial.println("WifiScan[1]!!!");
    int n = WiFi.scanNetworks();
    int nstatus = 0;

    DebugPrint(strThisFunc.c_str(),2,"scan done");

    if (n == 0)
    {
        //Serial.println("no networks found");
        DebugPrint(strThisFunc.c_str(),3,"no networks found!");
    }
    else
    {
        Serial.print(n);

        DebugPrint(strThisFunc.c_str(),n,"n");

        DebugPrint(strThisFunc.c_str(),n,"networks found");
        for (int i = 0; i < n; ++i)
        {

            DebugPrint(strThisFunc.c_str(),i+1,"i") ;
            DebugPrint(strThisFunc.c_str(),103,WiFi.SSID(i)) ;
            DebugPrint(strThisFunc.c_str(),WiFi.RSSI(i),"") ;
            delay(10);
        }

        for(int j =0 ; j< g_ssidNum;j++)
        {
            for (int i = 0; i < n; ++i)
            {
                String ssidname = WiFi.SSID(i);
                if(strcmp(g_ssid[j], ssidname.c_str())==0 && nstatus ==0)
                {
                      nstatus = ConnectWifi(g_ssid[j], g_password[j]);
                      if(nstatus >0)
                      {

                          String strip1 = String(WiFi.localIP());
                          String strMac1 = String(WiFi.macAddress());
                          DebugPrint("WifiScan",  i+1, strip1);
                          DebugPrint("WifiScan", i+1, strMac1);
                          return nstatus;
                      }
                }
            }
        }


    }
   // Serial.println("");
    return nstatus;
}

int ConnectWifi(const char* ssid, const char* password)
{

    int ntrytime = 0;
    const int nmaxtrytime =10;
    Serial.println();
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.mode(WIFI_STA);
    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED && ntrytime < nmaxtrytime)
    {
        delay(500);
        Serial.print(".");
        ntrytime++;
    }
    Serial.println("");

    if (ntrytime < 10)
    {
        Serial.println("WiFi connected.");
        Serial.println("IP address: ");
        Serial.println(WiFi.localIP());
        String strIP = String(WiFi.localIP());;
        Serial.println(WiFi.macAddress());
        
        digitalWrite(LED_BUILTIN, HIGH);
        return 1;
    }
    Serial.println("Wifi Connect Fail");
    return 0;
}

void ConnectMulitWif()
{
    int n1 = 0;
    while (n1 == 0)
    {
        n1 = WifiScan();
    }
}


void ConvertLEDData(String strInputData1)
{

    String strInputData=g_LEDData;
    
    if(strInputData=="")
    {
        Serial.println("no data ==>");
        Serial.println("no data 《《==");
        return;
    }

    if(g_LEDData == g_preLEDData)
        return;
    
    
    
    strInputData =strInputData+"0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";
    int nLedPreRow=MX_COLUMNS/8;
    for(int g1=0;g1<MX_COLUMNS;g1++)
    {
        int nstart=g1*8;
        int g4 = g1%8;


        String substring1 = strInputData.substring(nstart,nstart+8);
        Serial.print("-substring1[");
        Serial.print(substring1);
        Serial.println("]-");
        for(int i =0;i<MX_ROWS;i++)
        {

            Serial.print("-led[");
            //Serial.print(nLed);
            Serial.print("]-");
            
            String 
            substring2 = substring1.substring(i*2+1,i*2+2);
            Serial.print("-str1[");
            Serial.print(substring2);
            Serial.print("]-");
            
            int h2=0;
            int h1=0;
            h2=ConvertStringToInt(substring2,1);
 
   
           h1=h2;
           
           substring2 = substring1.substring(i*2,i*2+1);
           Serial.print("-str2[");
            Serial.print(substring2);
            Serial.print("]-");
            
            h2=ConvertStringToInt(substring2,16);
            h1=h1+h2;

            g_chrShowData[i][g1]=h1;

        }
        Serial.println("");
   }
   


}



int ConvertStringToInt(String str1, int type1)
{
    if(str1=="A" || str1=="a")
        return 5*type1;
    else if(str1=="B" || str1=="b")
        return 13*type1;
    else if(str1=="C" || str1=="c")
        return 3*type1;
    else if(str1=="D" || str1=="d")
        return 11*type1;
    else if(str1=="E" || str1=="e")
        return 7*type1;
    else if(str1=="F" || str1=="f")
        return 15*type1;
    else if(str1=="9")
        return 9*type1;
    else if(str1=="8")
        return 1*type1;
    else if(str1=="7")
        return 14*type1;
    else if(str1=="6")
        return 6*type1;
    else if(str1=="5")
        return 10*type1;
    else if(str1=="4")
        return 2*type1;
    else if(str1=="3")
        return 12*type1;
    else if(str1=="2" )
        return 4*type1;
    else if(str1 =="1" )
        return 8*type1;
    else
        return 0;
    
}

void ClearLcd(LedControl lca1, int manlcd)
{
   for(int i=0;i<manlcd;i++)
    {
        lca1.shutdown(i,false);
        lca1.setIntensity(i,8);
        lca1.clearDisplay(i);
    }
}

void loopWebServer() 
{
    // Check if a client has connected
    WiFiClient client = server.available();
    if (!client) 
    {
      return;
    }
    Serial.println(",,");
    // Wait until the client sends some data
    Serial.println("new client");
    while (!client.available()) 
    {
      delay(1);
    }
    
    String req = client.readStringUntil('\r');
    Serial.println(req);
    client.flush();

    int nget1 = req.indexOf("GET / HTTP/1.1");
    int nget2 = req.indexOf("GET /favicon.ico HTTP/1.1");
    
    int npost1 = req.indexOf("POST");
    int npost2 = req.indexOf("POST /");

    
    String strResult = "";
    client.flush();
    String hm2="";
   if(nget1>=0 || (nget2<0 && nget1<0  && npost2<0 && npost1<0))
    {
       hm2=GetHtml(1);
      Serial.println(hm2);
      client.println(hm2);
    }
    else if(nget2>=0)
    {
      hm2=GetHtml(0);
       Serial.println(hm2);
       client.println(hm2);
      }
     else if(npost2>=0)
     {
       DealWith(req);
       hm2=" post.ico";
       Serial.println(hm2);
       client.println(hm2);

      }
    else 
    {
       hm2="fav.ico";
       Serial.println(hm2);
       client.println(hm2);
      }
    
    client.flush();
    delay(1);
    // client.stop();
    Serial.println("Client disonnected");
}

String GetHtml(int ntype)
{
   String hm2="";
     hm2 =
      String("HTTP/1.1 200 OK\r\n") +
      "Content-Type: text/html\r\n" +
      "Connection: close\r\n" +  // the connection will be closed after completion of the response
      "Refresh: 600\r\n" +  // refresh the page automatically every 5 sec
      "\r\n" +
      "<!DOCTYPE HTML>" +
      "<html>" +
      "<head>"; 

    hm2 = hm2+" <meta charset=\"UTF-8\" />\r\n";
    hm2 = hm2+" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\r\n";
    hm2 = hm2+" <meta name=\"viewport\" content=\"width=380\">\r\n";
    hm2 = hm2+" <title>画板</title>\r\n";


    hm2 = hm2+" <style type=\"text/css\">\r\n";
    hm2 = hm2+" body { margin: 0; padding: 0; background-color: #ffffff;}\r\n";
    hm2 = hm2+" #canvasId { background-color: #FFFFcc;}\r\n";
    hm2 = hm2+" .button { width: 30px; height: 30px;}\r\n";
    hm2 = hm2+" .canvas {    margin: 100px auto 0;display: block;}\r\n";
    hm2 = hm2+" </style>\r\n";

    hm2 = hm2+"<link rel=\"icon\" href=\"data:image/ico;base64,aWNv\">\r\n";
      
    hm2 = hm2+" </head>\r\n";
    hm2 = hm2+"<body>\r\n";
    if(ntype==1)
    {
      String hm3= GetHtml2();
      hm2 = hm2+hm3;
    }
    
  
    hm2 = hm2+" </body></html>\r\n";

    return hm2;
}

String GetHtml2()
{
   String hm2="";
     

    hm2 = hm2+"<div align=\"center\">画板</div>\r\n";
    hm2 = hm2+"<form id=\"form_bil_list\" method=\"post\" action=\"API.html\">\r\n";
    hm2 = hm2+"<div align=\"center\"> <canvas id=\"canvasId\" width=\"320\" height=\"320\"></canvas></div><br />\r\n";
    
    hm2 = hm2+"<div align=\"center\" >\r\n";
    hm2 = hm2+"<table style=\"font-size:8;\">\r\n";
    hm2 = hm2+"<tr><td >&nbsp;</td>\r\n";
    hm2 = hm2+"<td >&nbsp;</td>\r\n";
    hm2 = hm2+"<td ><input type=\"button\" value=\"全清\" class=\"button\" onclick=\"hw.clear();\" style=\"width: 60px;height: 30px;\"/></td>\r\n";
    hm2 = hm2+"</tr></table>\r\n";
    hm2 = hm2+"</div>\r\n";
    
    hm2 = hm2+"<br />\r\n";
   
    hm2 = hm2+"</form>\r\n";
    hm2 = hm2+"<script type=\"text/javascript\">\r\n";
    
    hm2 = hm2+"var hexchr = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\"];\r\n";
    hm2 = hm2+"var g_nMaxRows=32;\r\n";
    hm2 = hm2+"var g_nMaxCols=32;\r\n";
    
    hm2 = hm2+"var m_inpdate = new Array();\r\n";
    hm2 = hm2+"for (var i = 0; i < 32; i++) {\r\n";
    
    hm2 = hm2+"m_inpdate[i] = new Array();\r\n";
    hm2 = hm2+"for (var j = 0; j < 32; j++)\r\n";
    hm2 = hm2+"m_inpdate[i][j] = 0;}\r\n";

    hm2 = hm2+"var m_cellWidht=10;\r\n";
    hm2 = hm2+"var m_itemn=1;\r\n";

    hm2 = hm2+"function ajax() {\r\n";
    hm2 = hm2+"var ajaxData = {\r\n";
    hm2 = hm2+"type: arguments[0].type || \"GET\",\r\n";
    hm2 = hm2+"url: arguments[0].url || \"\",\r\n";
    hm2 = hm2+"async: arguments[0].async || \"true\",\r\n";
    hm2 = hm2+"data: arguments[0].data || null,\r\n";
    hm2 = hm2+"dataType: arguments[0].dataType || \"text\",\r\n";
    hm2 = hm2+"contentType: arguments[0].contentType || \"application/x-www-form-urlencoded\",\r\n";
    hm2 = hm2+"beforeSend: arguments[0].beforeSend || function () { },\r\n";
    hm2 = hm2+"success: arguments[0].success || function () { },\r\n";
    hm2 = hm2+"error: arguments[0].error || function () { }}\r\n";
    hm2 = hm2+"ajaxData.beforeSend()\r\n";
    hm2 = hm2+"var xhr = createxmlHttpRequest();\r\n";
    hm2 = hm2+"xhr.responseType = ajaxData.dataType;\r\n";
    hm2 = hm2+"xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);\r\n";
    hm2 = hm2+"xhr.setRequestHeader(\"Content-Type\", ajaxData.contentType);\r\n";
    hm2 = hm2+"xhr.send(convertData(ajaxData.data));\r\n";
    hm2 = hm2+"xhr.onreadystatechange = function () {\r\n";
    hm2 = hm2+"if (xhr.readyState == 4) {\r\n";
    hm2 = hm2+"if (xhr.status == 200) {\r\n";
    hm2 = hm2+"ajaxData.success(xhr.response)\r\n";
    hm2 = hm2+"} else {\r\n";
    hm2 = hm2+"ajaxData.error()\r\n";
    hm2 = hm2+"}}}}\r\n";

hm2 = hm2+"function createxmlHttpRequest() {\r\n";
    hm2 = hm2+"if (window.ActiveXObject) {\r\n";
        hm2 = hm2+"return new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n";
    hm2 = hm2+"} else if (window.XMLHttpRequest) {\r\n";
        hm2 = hm2+"return new XMLHttpRequest();\r\n";
    hm2 = hm2+"}}\r\n";

hm2 = hm2+"function convertData(data) {\r\n";
    hm2 = hm2+"if (typeof data === 'object') {\r\n";
        hm2 = hm2+"var convertResult = \"\";\r\n";
        hm2 = hm2+"for (var c in data) {\r\n";
            hm2 = hm2+"convertResult += c + \"=\" + data[c] + \"&\";\r\n";
        hm2 = hm2+"}\r\n";
        hm2 = hm2+"convertResult = convertResult.substring(0, convertResult.length - 1)\r\n";
        hm2 = hm2+"return convertResult;\r\n";
    hm2 = hm2+"} else {\r\n";
   hm2 = hm2+"     return data;\r\n";
   hm2 = hm2+" }}\r\n";

    
    hm2 = hm2+"function Handwriting(id) {\r\n";
    hm2 = hm2+"this.canvas = document.getElementById(id);\r\n";
    hm2 = hm2+"this.ctx = this.canvas.getContext(\"2d\");\r\n";
    hm2 = hm2+"this.ctx.fillStyle = \"rgba(0,0,0,0.25)\";\r\n";
    hm2 = hm2+"this.canvas.addEventListener(\"touchstart\", this.downEvent.bind(this), false);\r\n";
    hm2 = hm2+"this.canvas.addEventListener(\"touchmove\", this.moveEvent.bind(this), false);\r\n";
    hm2 = hm2+"this.canvas.addEventListener(\"touchend\", this.upEvent.bind(this), false);\r\n";
    hm2 = hm2+"this.canvas.addEventListener(\"contextmenu\", function(e){ e.preventDefault() }, false);\r\n";
    hm2 = hm2+"this.moveFlag = false;\r\n";
    hm2 = hm2+"this.upof = {};\r\n";
    hm2 = hm2+"this.radius = 0;\r\n";
    hm2 = hm2+"this.has = [];\r\n";
    hm2 = hm2+"this.startOf = null;\r\n";
    hm2 = hm2+"this.lineMax = 30;\r\n";
    hm2 = hm2+"this.lineMin = 30;\r\n";
    hm2 = hm2+"this.linePressure = 1;\r\n";
    hm2 = hm2+"this.smoothness = 80;\r\n";
    hm2 = hm2+"this.history = [];\r\n";
    hm2 = hm2+"}\r\n";
    
    hm2 = hm2+"Handwriting.prototype.clear = function () {\r\n";
    hm2 = hm2+"this.history = [];\r\n";
    hm2 = hm2+"this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);\r\n";
    hm2 = hm2+" for(var y3=0;y3<=32;y3++)\r\n";
    hm2 = hm2+" for(var x3=0;x3<=32;x3++)\r\n";
    hm2 = hm2+"  {\r\n";
    hm2 = hm2+" m_inpdate[y3][x3]=0;\r\n";
    hm2 = hm2+" }\r\n";
    hm2 = hm2+" this.SaveDate();\r\n";
    hm2 = hm2+" }\r\n";

    hm2 = hm2+" Handwriting.prototype.SaveDate = function () \r\n";
hm2 = hm2+" {\r\n";
        hm2 = hm2+" var allvalue=\"=\";\r\n";
        hm2 = hm2+" var value1=\"'\";\r\n";
        hm2 = hm2+" var m=0;\r\n";
        hm2 = hm2+" for(var i =0; i<g_nMaxCols;i++)\r\n";
        hm2 = hm2+" {var m=[0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0];\r\n";
        hm2 = hm2+" for(var j =0; j<g_nMaxRows;j++)\r\n";
        hm2 = hm2+" {m[j] = m_inpdate[j][i];}\r\n";
            
        hm2 = hm2+" var n=0;\r\n";
        hm2 = hm2+" for(var j=0;j<g_nMaxRows/4;j++){\r\n";
        hm2 = hm2+" var a1 =   m[j*4];\r\n";
               hm2 = hm2+" var a2 =   m[j*4+1];\r\n";
               hm2 = hm2+" var a3 =   m[j*4+2];\r\n";
               hm2 = hm2+" var a4 =   m[j*4+3];\r\n";
               hm2 = hm2+" var a5 = a4*8+ a3*4+ a2*2 + a1;\r\n";

      hm2 = hm2+" if (a5 >= 0 && a5 <= 15) {\r\n";
      hm2 = hm2+" var chr5 = hexchr[a5];\r\n";
      hm2 = hm2+"  allvalue = allvalue + chr5;\r\n";
      hm2 = hm2+" }else {\r\n";
      hm2 = hm2+" allvalue = allvalue + \"0\";}\r\n";
      hm2 = hm2+" }}\r\n";

    hm2 = hm2+" var url1=\"API.html?ShowLedPicture\"+allvalue+\"\";\r\n";
    hm2 = hm2+" ajax({\r\n";
       hm2 = hm2+"  type: \"POST\",\r\n";
       hm2 = hm2+"  url: url1,\r\n";
       hm2 = hm2+"  dataType: \"json\",\r\n";

        hm2 = hm2+" data: \"\",\r\n";
       hm2 = hm2+"  beforeSend: function () {\r\n";
       
       hm2 = hm2+"  }, success: function (msg) {\r\n";
            
       hm2 = hm2+"  },\r\n";
        hm2 = hm2+" error: function () {\r\n";
           
      hm2 = hm2+"   }  })}\r\n";

       
    hm2 = hm2+" Handwriting.prototype.downEvent = function (e) {\r\n";
    hm2 = hm2+" this.moveFlag = true;\r\n";
    hm2 = hm2+" this.has = [];\r\n";
    hm2 = hm2+" this.history.push([]);\r\n";
    hm2 = hm2+" this.upof = this.getXY(e);\r\n";
    hm2 = hm2+" this.startOf = this.upof;\r\n";
    hm2 = hm2+" }\r\n";

    
    hm2 = hm2+" Handwriting.prototype.moveEvent = function (e) \r\n";
    hm2 = hm2+" { if (!this.moveFlag)\r\n";
    hm2 = hm2+" return;\r\n";
    
    hm2 = hm2+"  e.preventDefault();\r\n";
    hm2 = hm2+" var of = this.getXY(e);\r\n";
    hm2 = hm2+" var up = this.upof;\r\n";
    hm2 = hm2+" var ur = this.radius;\r\n";
    hm2 = hm2+" this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)});\r\n";
    hm2 = hm2+" var dis = 0;\r\n";
    hm2 = hm2+" var time = 0;\r\n";
    hm2 = hm2+" for (var n = 0; n < this.has.length-1; n++) {\r\n";
    hm2 = hm2+" dis += this.has[n].dis;\r\n";
    hm2 = hm2+" time += this.has[n].time-this.has[n+1].time;\r\n";
    hm2 = hm2+" if (dis>this.smoothness)\r\n";
    hm2 = hm2+" break;}\r\n";
    hm2 = hm2+" var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax) / 2;\r\n";
    hm2 = hm2+" this.radius = or;\r\n";
    
    
    hm2 = hm2+" this.upof = of;\r\n";
    hm2 = hm2+" if (dis<7)\r\n";
    hm2 = hm2+" return;\r\n";
    hm2 = hm2+" if (this.startOf) {\r\n";
    hm2 = hm2+" up = this.startOf;\r\n";
    hm2 = hm2+"  ur = or;\r\n";
    hm2 = hm2+" this.startOf = null;\r\n";
    hm2 = hm2+"  }\r\n";
    hm2 = hm2+" var len = Math.ceil(this.distance(up,of)/2);\r\n";
    hm2 = hm2+" for (var i = 0; i < len; i++) \r\n";
    hm2 = hm2+" {\r\n";
    hm2 = hm2+" var x = up.x + (of.x-up.x)/len*i;\r\n";
    hm2 = hm2+" var y = up.y + (of.y-up.y)/len*i;\r\n";
    
    hm2 = hm2+" x= Math.round(x);\r\n";
    hm2 = hm2+" y= Math.round(y);\r\n";
    
    hm2 = hm2+" var x01= (of.x-up.x)/len*i;\r\n";
    hm2 = hm2+" var y01= (of.y-up.y)/len*i;\r\n";
    
    hm2 = hm2+" var x1 = x01%m_cellWidht;\r\n";
    hm2 = hm2+" var y1 = y01%m_cellWidht;\r\n";
    
    hm2 = hm2+" x= x- x1+5;\r\n";
    hm2 = hm2+" y= y- y1+5;\r\n";
    
    hm2 = hm2+" var r = ur + (or-ur)/len*i;\r\n";
    hm2 = hm2+" this.ctx.beginPath();\r\n";
    hm2 = hm2+" this.ctx.arc(x,y,r,0,2*Math.PI,true);\r\n";
    hm2 = hm2+" this.ctx.fill();\r\n";
    hm2 = hm2+" this.history[this.history.length-1].push(x,y,r);\r\n";
    
    hm2 = hm2+" var x2 = x-x1;\r\n";
    hm2 = hm2+" var y2 = y-y1;\r\n";
    
    hm2 = hm2+" var x3 = Math.round(x2/m_cellWidht); \r\n";
    hm2 = hm2+" var y3 = Math.round(y2/m_cellWidht);\r\n";
    
    hm2 = hm2+" if(y3<=32 && x3<=32 && y3>=0 && x3>=0)\r\n";
    hm2 = hm2+" {\r\n";
    hm2 = hm2+" m_inpdate[y3][x3]=1;\r\n";

    hm2 = hm2+" }}}\r\n";
    
    hm2 = hm2+" Handwriting.prototype.upEvent = function (e) {\r\n";
    hm2 = hm2+" this.moveFlag = false;\r\n";
    hm2 = hm2+" this.SaveDate();}\r\n";
    
    hm2 = hm2+" Handwriting.prototype.getXY = function (e) {\r\n";
    hm2 = hm2+" var x = e.touches[0].clientX;\r\n";
    hm2 = hm2+" var y = e.touches[0].clientY;\r\n";
    hm2 = hm2+" return {\r\n";
    hm2 = hm2+" x : x - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),\r\n";
    hm2 = hm2+" y : y - this.canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop) }}\r\n";
    
    hm2 = hm2+" Handwriting.prototype.distance = function (a,b) {\r\n";
    hm2 = hm2+" var x = b.x-a.x , y = b.y-a.y;\r\n";
    hm2 = hm2+" return Math.sqrt(x*x+y*y);}\r\n";
    
    hm2 = hm2+" var hw = new Handwriting(\"canvasId\");\r\n";
    hm2 = hm2+" hw.lineMax = 20;\r\n";
    hm2 = hm2+" hw.lineMin = 20;\r\n";
    hm2 = hm2+" hw.linePressure = 3.1;\r\n";
    hm2 = hm2+" hw.smoothness = 100;\r\n";
    hm2 = hm2+" </script>\r\n";

    return hm2;
}

String DealWith(String strCommand)
{


    int npost1 = strCommand.indexOf("ShowLED");
    int npost2 = strCommand.indexOf("ShowString");
    int npost3 = strCommand.indexOf("=");

    String hm2 = strCommand.substring(npost3+1,256);
    

   if(npost2>=0 )
    {
       
      Serial.println(hm2);
     
    }

     else 
     {
       Serial.println(hm2);
       //g_LEDData = "00000000008FD10000FD500008CF6C0006D487008661E100CB787081CD1C28700E0D08100BE38600C7F1C10080E0F0008099B08308BF20C00C070870068F1E3003E9F6000030F1000850F3000C14B1000E0E060004070C000085081000E10060007000C100400003000000020000000000000000000000000000000000000000";//
       //hm2;
       g_LEDData = hm2;
       //GetRpiServerIP();
       ConvertLEDData(hm2);
        showLEDData(4,32);

      }


  
    return "result[fail]\r\n";
}


void showLEDData(int nmaxRow,int nmaxCol)//4,32
{
    if(g_LEDData == g_preLEDData)
        return;
        
    ClearLcd(lc1,8);
    ClearLcd(lc2,8);

    
    if(g_LEDData=="")
    {
        Serial.println("no data ==>");
        Serial.println("no data 《《==");
      return;
    }

    for(int nCol =8; nCol<24; nCol++)
    {
        int g4 = nCol%8;
        for(int nRow=0;nRow<MX_ROWS; nRow++)
        {
            int f3 =g_chrShowData[nRow][nCol];
            if(nCol>=16)
              lc1.setRow(nRow,g_rowSetting[g4],f3);
            else
              lc1.setRow(nRow+4,g_rowSetting[g4],f3);
        }
    }

    for(int nCol =24; nCol<32; nCol++)
    {
        int g4 = nCol%8;
        for(int nRow=0;nRow<MX_ROWS; nRow++)
        {
            int f3 =g_chrShowData[nRow][nCol];
            lc2.setRow(nRow,g_rowSetting[g4],f3);
        }
    }
    g_preLEDData=g_LEDData;
  
}


void printByte(int device, byte character [])
{
    int i = 0;
    for(i=0;i<8;i++)
    {
        lc1.setRow(device,i,character[i]);
    }
}

void DisplayString(LedControl lc, String str1)
{
     for(int i=0;i<str1.length();i++)
     {

        String a0= str1.substring(i,i+1);
        
        char b[2];
        
        strcpy(b,a0.c_str());
        
        int f1 = b[0];

         for(int nrow=0; nrow<8;nrow++)
         {
            lc.setRow(i, nrow ,CharAscii[f1][nrow]);
         }
      }
}

void printChar(LedControl lc, int nLed, int nChar)
{
    for(int nrow=0; nrow<8;nrow++)
    {
        lc.setRow(nLed, nrow ,CharAscii[nChar][nrow]);
    } 
}

void printDot(LedControl lc, int nLed, int nChar)
{
    printChar(lc, nLed, 46);

}

void DisplayIPDuan(int nIPt,LedControl lc, int nled)
{
        int nt2 = nIPt%100;
        int nt1 = nIPt - nt2;
        int nt3 = nIPt % 10;

         nt1= nt1/100;
         nt2= (nt2-nt3)/10;
        
        printChar(lc, nled,   nt1+48);
        printChar(lc, nled+1, nt2+48);
        printChar(lc, nled+2, nt3+48);
        printChar(lc, nled+3, 46);

}

void DisplayIP( )
{

    IPAddress ip;
    ip = WiFi.localIP();

    DisplayIPDuan(ip[0],lc1, 0);
    DisplayIPDuan(ip[1],lc1, 4);
    DisplayIPDuan(ip[2],lc2, 0);
    DisplayIPDuan(ip[3],lc2, 4);

  
}

void setup() 
{
    SetupSerial();
    SetupWifiScan();
    ConnectMulitWif();
    ClearLcd(lc1,8);
    ClearLcd(lc2,8);

    SetupWifiWebServer();
    DisplayIP();
}

void loop()
{


  //DisplayIP();
   //loopWebServer();

 // delay(1000);


 // printChar(lc1, 1, 65);
lc1.setRow(0, 0, B01101000);
lc1.setRow(0, 1, B10010100 );
lc1.setRow(0, 2, B10000100 );
lc1.setRow(0, 3, B01001000              );
lc1.setRow(0, 4, B01001000  );
lc1.setRow(0, 5, B01001000   );
lc1.setRow(0, 6, B00110000);
lc1.setRow(0, 7, B00110000);

 

}