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);

 

}

旧主板信息2

GIGABYTE GA-B250M-D3H I3 – 7100

主要参数

主板芯片组Intel B250芯片组描述采用Intel B250芯片组
CPU平台IntelCPU插槽LGA 1151
主板板型Micro ATX板型内存类型DDR4
基本参数 
集成芯片声卡/网卡主板芯片组Intel B250
芯片组描述采用Intel B250芯片组CPU平台Intel
CPU类型第7代/第6代Core i7/i5/i3/Pentium/CeleronCPU插槽LGA 1151
CPU描述支持Intel 14nm处理器支持CPU数量1颗
主板板型Micro ATX板型内存类型DDR4
内存描述支持双通道DDR4 2400(OC)/2133MHz内存内存最大容量64GB
内存插槽4×DDR4 DIMM  
芯片参数 
显示芯片型号CPU内置显示芯片(需要CPU支持)音效芯片型号集成Realtek ALC892 8声道音效芯片
网卡芯片板载Intel千兆网卡RAID功能支持RAID 0，1，5，10
硬件参数 
PCI-E标准PCI-E 3.0PCI插槽2×PCI插槽
HDMI接口1×HDMI接口存储接口1×M.2接口；1×SATA Express接口；6×SATA III接口
USB 接口6×USB3.1接口(2内置+4背板)；6×USB2.0接口(4内置+2背板)PS/2接口PS/2键鼠通用接口
外接端口1×VGA接口； 1×DVI接口； 1×Display Port接口其它接口1×RJ45网络接口； 1×光纤接口； 音频接口
电源插口一个8针，一个24针电源接口  
I3-7100
其它参数 
多显卡技术支持AMD Quad-GPU CrossFireX双卡四芯交火技术 支持AMD CrossFireX混合交火技术音频特效不支持HIFI
硬件监控功能电压检测 温度检测 风扇转速检测 过温警告 风扇故障警告 智能风扇控制BIOS性能2个64 Mbit flash 使用经授权AMI UEFI BIOS 支持DualBIOS PnP 1.0a、DMI 2.7、WfM 2.0、SM BIOS 2.7、ACPI 5.0
其它特点支持Windows 10/8.1/7操作系统外形尺寸24.4×22.5cm
基本参数
适用类型台式机
CPU系列酷睿i3 7代系列
制作工艺14纳米
核心代号Kaby Lake

性能参数
CPU主频3.9GHz
核心数量双核心
线程数量四线程
三级缓存3MB
总线规格DMI3 8GT/s
热设计功耗(TDP)51W

内存参数
支持最大内存64GB
内存类型DDR4 2133/2400MHz，DDR3L 1333/1600MHz @1.35V
内存描述最大内存通道数：2
ECC内存支持：是

显卡参数
集成显卡Intel HD Graphics 630
显卡基本频率350MHz
显卡最大动态频率1.1GHz
显卡其它特性显卡视频最大内存：64GB
4K支持：60Hz
最大分辨率(HDMI 1.4)：4096×2304@24Hz
最大分辨率(DP)：4096×2304@60Hz
最大分辨率(eDP-集成平板)：4096×2304@60Hz
DirectX支持：12
OpenGL支持：4.4
显示支持数量：3
设备ID：0x5912
支持英特尔Quick Sync Video，InTru 3D技术，清晰视频核芯技术，清晰视频技术

封装规格
插槽类型LGA 1151
封装大小37.5×37.5mm

技术参数
睿频加速技术不支持
超线程技术支持
虚拟化技术Intel VT-x
指令集SSE4.1/4.2，AVX 2.0，64bit
64位处理器是
性能评分22344
其它技术支持增强型SpeedStep技术，空闲状态，温度监视技术，身份保护技术，AES新指令，安全密钥，英特尔Software Guard Extensions，内存保护扩展，操作系统守护，执行禁用位，具备引导保护功能的英特尔设备保护技术

旧主板信息1

H64M-VG4

华擎H61M-VG4(华擎旗下的主板)

CPU Intel pentium g630

处理器规格
CPU类型Core i7/i5/i3/Pentium/Celeron
CPU插槽LGA 1155
内存规格
内存描述支持双通道DDR3 1600/1333/1066MHz内存
存储扩展
PCI-E标准PCI-E 3.0
PCI-E插槽1×PCI-E X16显卡插槽1×PCI-E X1插槽
存储接口4×SATA II接口
I/O接口
USB接口8×USB2.0接口（4内置+4背板）
视频接口1×VGA接口
电源接口一个4针，一个24针电源接口
其它接口1×RJ45网络接口，音频接口，PS/2鼠标，PS/2键盘接口
板型
主板板型Micro ATX板型
软件管理
BIOS性能支持图形界面的32Mb AMI UEFI Legal BIOS支持“即插即用”符合ACPI 1.1，支持唤醒与自动开机（Wake Up Events）支持免跳线支持SMBIOS 2.3.1
其它参数
硬件监控CPU/机箱温度检测CPU/机箱风扇转速计CPU 静音风扇（可根据处理器温度自动调节机箱风扇转速）CPU/机箱风扇多速控制机箱开启侦测电压实时监控：+12V，+5V，+3.3V，核心电压
其它参数支持Microsoft Windows 8/8 64-bit/7/7 64-bit/Vista/Vista 64-bit/XP/XP 64-bit操作系统
主板附件
包装清单华擎主板 x1快速安装指南 x1支持光盘 x1I/O挡板 x1SATA数据线 x2

pip安装依赖时报ssl的问题,更新pip.conf

报错信息

Could not install packages due to an EnvironmentError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Max retries exceeded with url: /packages/5f/25/e52d3f31441505a5f3af41213346e5b6c221c9e086a166f3703d2ddaf940/pip-18.0-py2.py3-none-any.whl (Caused by SSLError(SSLError(1, u'[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:590)'),))

vi /etc/pip.conf

[global] 
timeout = 6000 
index-url = http://pypi.douban.com/simple/  
extra-index-url = https://www.piwheels.org/simple/
[install] 
use-mirrors = true 
mirrors = http://pypi.douban.com/simple/  
trusted-host = pypi.douban.com

测试

pip3 --version
pip3 install docker

pip更新命令

pip install --upgrade --trusted-host pypi.org --trusted-host files.pythonhosted.org pip

2023-6-29 安装树莓派

硬件：树莓派3B+ 系统：Raspberry Pi OS with desktop and recommended software 2023-05-03 X86

1.下载系统
https://downloads.raspberrypi.org/raspios_full_armhf/images/raspios_full_armhf-2023-05-03/2023-05-03-raspios-bullseye-armhf-full.img.xz

apt-get install -y wget
apt-get install -y vim
apt-get install -y gcc

apt-get install -y openssl
apt-get install -y iw
apt-get install -y usbutils
apt-get install -y v4l-utils
apt-get install -y ntfs-3g
apt-get install -y zip
apt-get install -y unzip
apt-get install -y cpio
apt-get install -y pkg-config
apt-get install -y automake
apt-get install -y gcc
apt-get install -y gimp
apt-get install -y swig
apt-get install -y libtool
apt-get install -y nasm
apt-get install -y autoconf
apt-get install -y automake
apt-get install -y git
apt-get install -y mercurial
apt-get install -y libcurl4
apt-get install -y cmake
apt-get install -y yasm

wget http://curl.haxx.se/download/curl-7.38.0.tar.gz
tar -xzvf curl-7.38.0.tar.gz
cd curl-7.38.0
./configure  --prefix=/usr/local/curl
make
make install
mkdir -p /var/www/setup/PCRE
cd mkdir -p /var/www/setup/PCRE
wget github.com/PCRE2Project/pcre2/releases/download/pcre2-10.40/pcre2-10.40.tar.gz
tar -zxf pcre2-10.40.tar.gz
cd pcre2-10.40
./configure  --prefix=/usr/local/pcre
make
sudo make install
wget http://zlib.net/zlib-1.2.13.tar.gz
tar -zxf zlib-1.2.13.tar.gz
cd zlib-1.2.13
./configure --prefix=/usr/local/curl
make
sudo make install

MySQL修改密码时，报错ERROR 1064 (42000)【新版MySQL修改密码命令有所变更】

相信大家都遇到过这种情况，在用 命令行 运行的 MySQL 中修改密码时，出现以下错误：

接下来的内容划重点，请认真看 ！！！！！！！！！！！！！！

这其实是 MySQL 的 版本不同 所导致的支持的修改密码的 语法不同 所造成的问题，接下来就来看看不同版本的MySQL所支持的语法。（以下均为将密码改为“123465”的示例）

5.6 版本：


use mysql;
update mysql.user set password=password('123456') where User="root" and Host="localhost";
set password for root@localhost = password('123456');

5.7 以上版本，password 字段被设置为了authentication_string，因此更新命令为：


use mysql;
update mysql.user set authentication_string=password('123456') where user='root';
set password for root@localhost ='123456';

8.0 以上的版本，以上的命令都不支持，有以下两个命令可用（MySQL的安装与配置——详细教程（转载）里面修改密码用的就是这个最新的命令）：


use mysql;
alter user 'root'@'localhost' identified by '880911';
set password for root@localhost ='123456';
FLUSH PRIVILEGES;

python3安装pip

首先，

之前一直用的python2.7，最近开始学习python3.5，交互界面发现上下箭头退格键什么的不好使，搜了下需要装readline模块。然后使用pip安装，pip不好使，于是重新安装下pip，网上搜了一些都不靠谱，只有这篇比较详细简单。转载如下：

前言：

python3应该是python的趋势所在，当然目前争议也比较大，这篇随笔的主要目的是记录在linux6.4下搭建python3环境的过程

以及碰到的问题和解决过程。

另外，如果本机安装了python2，尽量不要管他，使用python3运行python脚本就好，因为可能有程序依赖目前的python2环境，

比如yum！！！！！

不要动现有的python2环境！

不要动现有的python2环境！

不要动现有的python2环境！

重要的使用说三遍！

一、安装python3.5

下载python3.5安装包：

wget –no-check-certificate https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz

解压到当前目录：

tar -zxvf Python-3.5.0.tgz

cd Python-3.5.0

./configure –prefix=/usr/local/python3.5 –enable-shared

make & make install

ln -s /usr/local/python3.5/bin/python3 /usr/bin/python3

此时运行python3命令的话会报错，缺少.so文件，我们需要进行如下操作：

cp -R /usr/local/python3.5/lib/* /usr/lib64/

ok！此时python3的基础环境已经安装完成！

二、安装pip以及setuptools

毕竟丰富的第三方库是python的优势所在，为了更加方便的安装第三方库，使用pip命令，我们需要进行相应的安装。

1、安装pip前需要前置安装setuptools

wget –no-check-certificate  https://pypi.python.org/packages/source/s/setuptools/setuptools-19.6.tar.gz#md5=c607dd118eae682c44ed146367a17e26

tar -zxvf setuptools-19.6.tar.gz

cd setuptools-19.6

python3 setup.py build

python3 setup.py install

报错： RuntimeError: Compression requires the (missing) zlib module

我们需要在linux中安装zlib-devel包，进行支持。

yum install zlib-devel

需要对python3.5进行重新编译安装。

cd python3.5

make & make install

又是漫长的编译安装过程。

重新安装setuptools

python3 setup.py build

python3 setup.py install

2、安装pip

wget –no-check-certificate  https://pypi.python.org/packages/source/p/pip/pip-20.0.2.tar.gz

tar -zxvf pip-20.0.2.tar.gz

cd pip-20.0.2

python3 setup.py build

python3 setup.py install

如果没有意外的话，pip安装完成。

测试：

我们使用pip安装一个python3第三方库： python3 -m pip install paramiko

纳尼！！！！又报错了！

ImportError: cannot import name ‘HTTPSHandler’

根据老衲多年的经验，应该是缺少openssl的开发环境，我们继续安装

yum install openssl-devel

继续重新编译安装python3.5

ok，我们终于完成了整个python3环境的安装。

最后，跳出原文，pip安装成功之后， python3 -m pip install readline还是报错，是少了 readline-devel，yum -y install readline-devel后重新安装pip，问题解决。

mysql 8.0修改密码

环境：

1.修改配置文件：进入/etc/mysql/mysql.conf.d/ ，在配置文件mysqld.cnf下添加 skip-grant-tables

2.在终端输入命令：sudo service mysql restart来重新启动mysql服务

3.输入:mysql -u root -p，回车进入mysql（此时不需要密码即可直接进入）

4.输入：use mysql；

5.输入:update user set authentication_string=‘’ where user=‘root’;,将authentication_string 置空;

6.输入：alter user ‘root’@‘localhost’ identified by ‘newpassword’；，newpassword为要修改的新密码；

此时提示错误：ERROR 1290 (HY000): The MySQL server is running with the –skip-grant-tables option so it cannot execute this statement

输入：FLUSH PRIVILEGES;

再重新alter user ‘root’@‘localhost’ identified by ‘newpassword’；

此时错误提示为：ERROR 1524 (HY000): Plugin ‘auth_socket’ is not loaded

，

输入select user,plugin from mysql.user;来查看plugin

这里输入update user set plugin=‘mysql_native_password’ where user=‘root’;将plugin改为以前版本的密码认证方式

然后输入：FLUSH PRIVILEGES;

再重试alter user ‘root’@‘localhost’ identified by ‘newpassword’；即可修改密码

7.修改完成后输入FLUSH PRIVILEGES;

将第一步的skip-grant-tables注释掉；
9.输入service mysql restart重启mysql