きっかけ (How come I make it)

現時点(2021/9)で未だに厳しいコロナ禍の影響ですっかり、未だに多くの人がテレワークしている状況が続いています。
確かにコミュニケーション系のツールが発達して大分やりやすくはなりましたが、なんとなく物足りなく寂しい気がします。
仕事をしている時の様子がぼんやりと伝わるくらいが丁度いいのかなと思って作成しました。

It has been a long time since many of us start telework, We get the use of communication tools, But we still feel lonely after the meeting while working alone. I thought it would be useful if there is a system that send what and how someone works with PC. So I decide to realize this system with M5 series devices.

安全性について (About safety)

セキュリティー的に大丈夫か? という疑問が出てきます。
他にも確かに他の人に監視されているようで不快に感じるかもしれませんし、今は見られたくないということもあるかと思います。

Perhaps you think that system is secure?
You look like I'm being watched by other people and you don't feel right.
I put the following solution to this situation:

• 見られたくない情報、画面、キーまたはマウスの３種類について、それぞれオフにすることができる機能を搭載しています。

• 画面は解像度や画質を極力落として小さい画面でぼんやり映す。 (使っている MQTTブローカーである"shiftr.io"でフリーで使える範囲の 4KB / sec を超すことがない程度に圧縮すると丁度良い感じでした。)

• キーやマウスは少し取りこぼしても許容する。 という方向で現在は対処しています。
  

• You may stop sending each element such as Screen, Key data and Mouse data.

• I made the image quality very low and rough, so that a watcher cannot guess exactly what you type, or draw, but briefly feel doing something.

• I let key and mouse miss some of the data.

現時点ではあくまでもコンセプトレベルですので、他にも運用するには課題はあるかと思います。

既出作品からの改造？ (Rework items from my past product?)

はい、おっしゃる通りです。 去年発表した「リモートでキー暴動」「リモートでマウスも暴動」に似通った箇所があると気づかれた方もいるかと思います。 確かに、ソフトウェアの構成要素はほぼ同じで、それを改造・拡張した形となっています。 実はもともとのアイデアの原点はこちらで、さりげなく仕事している感をつたえれたらなぁというものだったのです。 あまりにもキーやマウスが暴動するので、目指す方向が異なってしまい、前回はあの形で出すことになりました。

今回 M5コンテストに出すにあたって、画面の解像度的にも PC デスクの脇におけるサイズ感も M5シリーズは丁度いいと思ったので、見直しして作り直しました。

The basic system of the software comes from the previous product, but the aim and ideas are totally different.

It is the system that sends from PC to M5devices with the captured screen, keyboard and mouse via the Internet, and share what and how others work with PC.

1. システム構成

1-1. 全体

PC側で画面の内容・マウスの動き・キーの状態をキャプチャーしその情報を M5デバイスにネット上の MQTTブローカを通じて送信します。
M5デバイスは、それらのキャプチャーデータを受け取り、画面やキー・マウスの状況をディスプレイに表示します。
The PC captures its own screen picture, keyboard and mouse movement, and publish on MQTT broker via Internet.
M5 devices sign up to the MQTT broker, and when they receive the captured data and draw their own display.

MQTTブローカには shiftr.io を使用し、以下のようにな構成で使用しています。

• 本アプリケーション用に専用のインスタンスを作成し、送信側受信側ともにつなぎに行きます。
• そのインスタンスは以下にメインキーを作成し、その下に画面・キー・マウス３種類の機能ごとのサブキーを用意します。
  

I used "shiftr.io" and a MQTT broker and do the following:

• Makes an instance of the application special, and allow PC and M5devices to connect to it.

• The instance has three types of keys like screen, key and mouse, to specify what the M5 device will receive.

  1-2. 各部説明 (Description of each part.)

各部分ごとに説明します。

1-2-1. PC

Visual Studio 20019 にて C# で開発
I used Visual C# 2019 to develop.

1-2-1-1. 画面キャプチャー (Capture the displays)

1.5 秒ごとに以下を実行しています。
The PC application performs the following operations at 1.5 second intervals:

• 画面全体をキャプチャーしてM5Stack の解像度 (320x240) まで縮小します。

• 圧縮率を上げて品質を極力落として、JPEGに変換します。

• MQTT ブローカーにJPEG データを投稿( Pubish )して、送信します。

• Capture the displayed image and make it smaller in the "M5Stack" display resolution.

• Convert the image to JPEG format and make it smaller but ruth by making compression rate bigger.

• Publish the image data into the MQTT broker.

1-2-1-2. キーキャプチャー (Capture the stroke of the keyboard)

基本的に WindowsAPI のキーキャプチャー機能 ( GetAsyncKeyState) を使って実現しています。
I used the Windows API (GetAsyncKeyState) for scanning the keyboard status.

• Win API を呼び出して、すべてのキーの変化をスキャンします。

• キーの状態 (押/離) に変化のあったキーについて、 MQTT でキーコードと状態を投稿( Pubish )して、送信します。

• Scan all the keys to find the key to the changed status.

• For the key whose status is changed, send the key code and status by publishing in MQTT broker.

1-2-1-3. マウスキャプチャー (capture mouse motions)

ボタンの方は WindowsAPI のキーキャプチャー機能 ( GetAsyncKeyState) を使って実現しています。
マウスの動きの方は、同じくWindowsAPI のカーソル位置取得機能 (GetCursorPos) を使って実現しています。
I used the Windows API (GetAsyncKeyState) for scanning the mouse button as well.
I used the Windows API (GetCursorPos) to find where the mouse cursor is.

• Win API を呼び出して、すべてのマウスボタンの変化をスキャンします。

• マウスボタンの状態 (押/離) に変化のあったものについて、 MQTT でキーコードと状態を投稿( Pubish )して、送信します。

• Win API を呼び出してマウスの位置を読み出し、前回値の差分から移動量を計算します。

• 移動量が 0 でなければ、 MQTT でキーコードと状態を投稿( Pubish )して、送信します。

• Scan all buttons to find the button whose state has changed.

• For the button whose status is changed, send the button code and status by publishing in MQTT broker.

• After reading the mouse cursor position by calling the Windows API (GetCursorPos), get the amount of displacement by computing the difference from the previous position.

• If the amount for the move is not ZERO, send the amount by publishing in MQTT broker.

1-2-2. M5Stack

ArduinoIDE で C++ で開発
画像を次々と表示して負荷が重いので、画像専用にしています。
I used the Arduino IDE to develop.
Maybe it's a bit heavy to receive data, decode the JPG and display all together, I make the device dose these tasks only.
The device performs the following:

• WiFi でネットに接続

• MQTTブローカーに接続

• キーキャプチャーのサブキーを購読 (subscribe)

• キーキャプチャーデータが届いたら、画面に描画する。

• Access the Internet via WiFi.

• Log on to the MQTT broker.

• Subscribe to the MQTT key for "Screen" to receive only the data from the screen.

• Once you get it, draw the image on the screen.

  
  ちなみに Excel は Excel の数式を駆使して座標計算し、テーブルを作成しました。
  I used Excel to make table to figure out where the each key position is.
  

1-2-3. M5StickC plus

同じく ArduinoIDE で C++ で開発
こちらは負荷が少ないので、キーとマウス両方の画像出力を担っています。
I used the Arduino IDE to develop as well.
The device performs the following:

• WiFi でネットに接続

• MQTTブローカーに接続

• マウスキャプチャーのサブキーを購読 (subscribe)

• キーキャプチャーのサブキーを購読 (subscribe)

• マウスキャプチャーデータが届いたら、画面に描画する。

• キーキャプチャーデータが届いたら、画面に描画する。

• Access the Internet via WiFi.

• Log on to the MQTT broker.

• Subscribe to the MQTT key for "Keyboard" to receive the data from the keyboard.

• Subscribe to the MQTT key for "Mouse" to receive the data from the keyboard as well.

• Once you have received the key data, draw the key picture on the screen.

• Once you have received the mouse data, draw the mouse picture on the screen.