Web Serial API + Sipeed Maix Bit-Mic(Maixduino)

3. Board 側、プログラムの作成。
前記のLCD の表示のデータ抜けの対策として、
結局、Maixduino(Arduino) で、 別コアタスクを起動して、 Serial からの受信を、ダブルバッファリングして、データの抜けを対策をしました。
Dual Task のプログラムは、Sipeed MAix Bit Arduino Dual Task program

プロジェクト： hello_k210_arduino
main.cpp
#include <Arduino.h> #include <Ticker.h> #include <bsp.h> #include <sysctl.h> //#include <Arduino.h> // from basic_display.ino #include <Sipeed_ST7789.h> SPIClass spi_(SPI0); // MUST be SPI0 for Maix series on board LCD Sipeed_ST7789 lcd(320, 240, spi_); #include <lcd.h> // attach a LED to pPIO 13 #define LED_PIN 13 #define USE_SERIAL2 Ticker blinker(TIMER0); Ticker toggler(TIMER1); Ticker changer(TIMER2); float blinkerPace = 0.1; //seconds const float togglePeriod = 5; //seconds char text_buf[512+2]; int cur_p=0; char Str1[512+2]; char Str2[512+2]; int s_lng1=0; int s_lng2=0; char read_bank=0; char proc_bank=0; bool stringComplete1 = false; // whether the string is complete bool stringComplete2 = false; void change() { blinkerPace = 0.5; } void blink() { digitalWrite(LED_PIN, !digitalRead(LED_PIN)); } void toggle() { static bool isBlinking = false; if (isBlinking) { blinker.detach(); isBlinking = false; } else { blinker.attach(blinkerPace, blink); isBlinking = true; } digitalWrite(LED_PIN, LOW); //make sure LED on on after toggling (pin LOW = led ON) } void put_line(char *msg,int len){ int16_t y = lcd.getCursorY(); if(y > 260){ #ifdef USE_SERIAL2 Serial2.print("put_line() : #2 y="); Serial2.println(y); #endif lcd_clear(COLOR_WHITE); lcd.setCursor(1,1); } //memcpy(text_buf,msg,len); //text_buf[len]=0x00; //Serial2.print("put_line() : #1 len="); //Serial2.println(len); //func3(text_buf); lcd.print(msg); } void put_lineString(String msg){ int16_t y = lcd.getCursorY(); if(y > 260){ #ifdef USE_SERIAL2 Serial2.print("put_line() : #2 y="); Serial2.println(y); #endif lcd_clear(COLOR_WHITE); lcd.setCursor(1,1); } int len = msg.length(); msg.getBytes((unsigned char*)(text_buf), len); text_buf[len]=0x00; lcd.print(text_buf); } /* SerialEvent occurs whenever a new data comes in the hardware serial RX. This routine is run between each time loop() runs, so using delay inside loop can delay response. Multiple bytes of data may be available. */ int core1_function(void *ctx){ #ifdef USE_SERIAL2 Serial2.println("core1_function:#1"); #endif int l; while (1) { l = Serial.available(); if(l > 0){ // get the new byte: char inChar = (char)Serial.read(); switch(read_bank){ // read bank0 case 0: // read proccessing is active if (stringComplete1 == false){ if (s_lng1 <= 512){ Str1[s_lng1++]=inChar; Str1[s_lng1]=0x00; } // read buffer is over flow else{ #ifdef USE_SERIAL2 Serial2.print('.'); #endif } // turn read bank to 1 if (inChar == '\n' && stringComplete2 == false) { stringComplete1 = true; read_bank=1; } } // read proccessing is busy else{ #ifdef USE_SERIAL2 Serial2.print('.'); #endif } break; // read bank1 case 1: // read proccessing is active if(stringComplete2 == false){ if (s_lng2 <= 512){ Str2[s_lng2++]=inChar; Str2[s_lng2]=0x00; } // read buffer is over flow else{ #ifdef USE_SERIAL2 Serial2.print('.'); #endif } // turn read bank to 0 if (inChar == '\n' && stringComplete1 == false) { stringComplete2 = true; read_bank=0; } } // read proccessing is busy else{ #ifdef USE_SERIAL2 Serial2.print('.'); #endif } break; } } // data is nothing else{ switch(read_bank){ // read bank0 case 0: // read processing is not complete if (stringComplete1 == false && s_lng1 > 0){ // proc bank2 is not busy if(stringComplete2 == false){ stringComplete1=true; read_bank=1; } } break; // read bank1 case 1: // read processing is not complete if (stringComplete2 == false && s_lng2 > 0){ // proc bank1 is not busy if(stringComplete1 == false){ stringComplete2=true; read_bank=0; } } break; } } } } void setup() { Serial.begin(115200); //Serial.begin(9600); while (!Serial) { ; // wait for serial port to connect. Needed for native USB port only } //Serial.println("Start hello_k210_arduino"); pinMode(LED_PIN, OUTPUT); toggler.attach(togglePeriod, toggle); changer.once(30, change); //lcd.begin(15000000, COLOR_RED); lcd.begin(15000000, COLOR_WHITE); lcd.setTextSize(2); //lcd.setTextColor(COLOR_WHITE); lcd.setTextColor(COLOR_BLACK); lcd.setCursor(1,1); #ifdef USE_SERIAL2 Serial2.begin(115200,17,15); Serial2.println("Start hello_k210_arduino"); #endif register_core1(core1_function, NULL); } void loop() { switch(proc_bank){ case 0: // proc bank0 if (stringComplete1) { Serial2.print(Str1); put_line(Str1,s_lng1); s_lng1=0; stringComplete1 = false; proc_bank=1; } break; case 1: // proc bank1 if(stringComplete2){ Serial2.print(Str2); put_line(Str2,s_lng2); s_lng2=0; stringComplete2 = false; proc_bank=0; } break; } #ifdef USE_SERIAL2 int lng=Serial2.available(); while(lng >0){ char c = Serial2.read(); Serial.print(c); lng=Serial2.available(); } #endif }

platformio.ini
[env:sipeed-maix-bit-mic] platform = kendryte210 board = sipeed-maix-bit-mic framework = arduino ; COM1 or COM3 upload_port = COM3

4. PC 側の準備
1) Windows10 に おんちゃんは、httpd-2.4.48-win64-VC15 を入れました。
SSL が必要です。
Windows版 Apache の導入は、Windows10にApacheをインストールする方法 を参考にしました。
SSL の導入は、こちら を参考にしました。

2) Edge の設定。
edge://flags
#enable-experimental-web-platform-features 有効にします。

3) web_serial_code_lab.html、script.js 、style.css の作成。
Getting started with the Web Serial API を、 1 から 9 迄、順番に辿っていって、作成します。

注1) 記述に一部誤りがあるので、そこは下記にします。
// - Wait for the port to open. //await port.open({ baudrate: 9600 }); await port.open({ baudRate: 115200 });

上記、3 ファイルは、導入した、 Apache の htdocs ディレクトリー下に配置します。
Edge で、上記、 web_serial_code_lab.html にアクセスすれば、OK です。

必ず、 https:// でアクセスしてください。
例) https://localhost/web_serial_code_lab.html
表示されたページの、 connect ボタンをクリックして、comxx を選べば、接続できます。

この時、Edge の開発者ツールで、 コンソールを出しておけば、 ログが表示されて、
Sipeed Maix Bit-Mic へ送ったメッセージが確認できます。
同じ内容が、 LCD で表示出来ればOKです。

Sipeed Maix Bit-Mic に 別途 USB-TTL を付ければ、そちらの Serial2 Terminal から、
受信データが確認できます。

Serial2 Terminal で、下記を送信すると、両側のボタンの色をそれぞれ、変えられるみたいぞね!!
※ Serial2 Terminal には、Arduino IDE のターミナルを使うと、送信が簡単ぞね!!

左ボタンをON {"button": "BTN1", "pressed": 1 } 右ボタンをON {"button": "BTN2", "pressed": 1 } 左ボタンをOFF {"button": "BTN1", "pressed": 0 } 右ボタンをOFF {"button": "BTN2", "pressed": 0 }

以上ぞね!!!