Skip to content

PiZeroWebSerialConsole.html

Jump to bottom
Akihiko.KIgure edited this page Nov 22, 2025 · 2 revisions

画面

接続前

Image

接続後

Image

startConnection

  • Web Serial API で Rasoberry Pi の USB OTG Serial をつなぐ

terminateConnection

  • ターミナル切断
    • port.close

startTermLoop

  • ポート読み取り可能かどうか待機
  • シリアルが接続したか待機

removeControlChars

term => xterm?

writer => ポート（xterm?serial?）書き込み用

シリアル入力インターフェース

const waitForSerialIn = {
  RegExp: null,
  CBF: null,
  TimeOutID: null,
  inputValue: '',
};

TextEncoder

onload

  • ブラウザ言語設定
  • Terminal のインスタンス作成(xterm?)
    • open
    • onData

portWrite

  • シリアルに単に書き出すだけの関数
  • port.writable.getWriter
    • ポート書き込み用インスタンス
  • writer.write
    • ポート書き込み

portWriteln

  • portWrite を呼ぶだけ

portWriteWaitfor

  • 書き出して、指定した文字列の返却を待つ非同期関数
    • Promise で、waitForSerialIn の値を書き換え
    • waitForSerialIn.TimeOutCBF というタイムアウトコールバック関数を定義
    • タイムアウトは 3 秒

portWritelnWaitfor

  • portWriteWaitfor を呼ぶ

ctrlc = "\x03"; // end of text

ctrld = "\x04"; // end of transmission

sleep

  • スリープ関数定義

arrayBufferToBase64

  • arrayBuffer => Base64

base64ToArrayBuffer

  • base64 => ArrayBuffer

getOutputLines

  • 出力文字列作成

コマンド用定義

  • cmdPrompt = "pi@raspberrypi:"; // ホームは"pi@raspberrypi:~\$"
  • loginId = "pi";
  • loginPassword = "raspberry";

autoLogInPiZero

  • ログイン処理
  • startConnection call
  • sleep 100 msec
  • term 待機出力
  • portWrite ポート書き込み
  • portWriteWaitfor で、レス待機
  • ログイン確認
  • 未ログイン
    • ログイン ID, password 送信
    • ログインコマンドレス待機
  • ログイン完了
  • ターミナルにフォーカス
  • ブラウザの言語設定を確認
    • タイムゾーンを日本に
    • 時刻設定

pad2

  • 引数の文字列長を２つ削る

closeConnection

  • ターミナル切断

currentAbsDir

  • カレントのディレクトリ文字列？

pwd

  • カレントのディレクトリコマンド

lsal

  • 表示結果からファイルに関する付帯情報を得るための正規表現
    • capturingRegex
  • getOutputLines 呼び出し
    • 出力文字列作成関数

rm

  • rm コマンド実行処理
  • getOutputLines 呼び出し
    • 出力文字列作成関数

mv

  • mv コマンド実行処理
  • getOutputLines 呼び出し
    • 出力文字列作成関数

cp

  • cp コマンド実行処理
  • getOutputLines 呼び出し
    • 出力文字列作成関数

remveAndList

  • rm 呼び出し
  • getDirFromPrompt 呼び出し

str2arrayBuffer

  • string => array buffer

arrayBuffer2str

  • array buffer => string

saveFile

  • arrayBufferToBase64 呼び出し
  • 実行中の状態を表示
  • 書き込み処理

uploadFile

wifiScan

  • コマンド実行
    • sudo iwlist wlan0 scan
  • term => serial 書き込み
  • 取得情報作成
  • 取得情報表示

WiFiPanel

  • wifi ページ表示

CHIRIMENPanel

  • CHIRIMENPanel ページ表示

FileManagerMessage 定義

  • コンテキストメニューの参考になる 
    FileManagerMessage = {
  ja: {
    move: '移動',
    view: '表示',
    edit: '編集',
    delete: '削除',
    do: '実行',
  },
  en: {
    move: 'move',
    view: 'view',
    edit: 'edit',
    delete: 'delete',
    do: 'do',
  },
};

showDir

  • ディレクトリ表示
  • => tree コンポーネントのデータ元

cd

  • コマンド実行
  • getDirFromPrompt 呼び出し

getDirFromPrompt

  • プロンプト文字列取得

cdHome

  • cd 呼び出し

removeChildren

  • 表示している Children DOM の削除

textFileExtensions

  • 拡張子定義
  • => 実装済み？

isTextFile

  • ファイル拡張子取得

getFileSmall（不要）

  • ファイル情報を取得する（小さいサイズ）
  • portWritelnWaitfor 呼び出し
  • getOutputLines 呼び出し
  • base64ToArrayBuffer 呼び出し

getFile

  • ファイル情報を取得する
  • TextDecoder で、変換

haltTransferFile

  • ファイル情報取得をキャンセルする

existFile

  • ファイル表示から抜ける？

showFile

  • ファイルの中身を表示する

saveAsBinary

  • ファイルの変更を保存する

createNewTxt

  • ファイル新規作成

setEditedText

  • ファイル変更検知

showCurrentDir

  • カレントディレクトリの表示
  • ターミナル画面用？

escapePath

  • パス文字列の Bash のためのエスケープ処理

Clone this wiki locally