state.errors = ErrorMessage[]

type ErrorMessage = {
code: number;
message: string;
}

enable to drag and drop to set the key map.

ref: #30

https://github.com/ijprest/kle-serial

Highlighting the keycap which has the candidate of remapping key

lock the action button when user click it.

機能

• CONFIGURE：キーボードの設定（メイン画面）
• KEY TESTER：キーボードのキーが生きているかを確認（別サイトに飛ばす）
• DESIGN：キーボードレイアウトJSONを簡易的に確認するツール
• SETTINGS：本アプリの設定

CONFIGURE

• HOME

  • JSON読み込み

• top

  • JSONを読み込み
  • LAYOUTS切り替え
  • JSON書き出し

• side

  • keymap
    • basic
    • media
    • macro(ボタン＋編集)
    • layers
    • special
    • qmk lighting
  • layout→topに移動
  • macros→keymap>macroに移動
  • lighting

#50

Introduce Basic Authentication for Closed Beta.

制約条件

• キーボードを接続していない状態では、キーマップの編集はできない。
• ユーザ未認可のキーボードは、接続した状態で認可をさせないと扱うことができない。
• 認可済みキーボードは、接続されていればすぐに扱うことができるが、複数存在する可能性がある。
• 同じVendor ID、Product IDのキーボードを複数接続した際の動作はサポートしない。
• 編集対象のキーボードは同時に1つだけ。

存在しうる状態

o. 起動時
a. キーボードが1台も接続されていない。
b. 未認可キーボードが接続されている。
c. 認可済みキーボードが1台接続されている。
d. 認可済みキーボードと未認可キーボードが同時に接続されている。
e. 認可済みキーボードが2台以上接続されている。

できること

• 認可済みキーボードの一覧取得。
• 認可済みキーボードの接続/切断イベントの受信。

状態遷移

1. oの状態で、認可済みキーボードが1台接続されていると、cの状態になる。
2. oの状態で、認可済みキーボードが2台以上接続されていると、eの状態になる。
3. oの状態で、認可済みキーボードがないと、aの状態になる。
4. aの状態で、未認可キーボードを接続すると、bの状態になる。
5. aの状態で、認可済みキーボードが接続されると、cの状態になる。
6. bの状態で、ユーザが未認可キーボードを認可すると、cの状態になる。
7. bの状態で、認可済みキーボードが接続されると、cの状態になる。
8. cの状態で、未認可キーボードを接続すると、dの状態になる。
9. cの状態で、認可済みキーボードが接続されると、eの状態になる。
10. dの状態で、ユーザが未認可キーボードを認可すると、eの状態になる。
11. （eの状態では認可済みキーボードのいずれかを編集している）

UI上で起きること

1. 認可済みキーボードの一覧取得を行って、結果が1件の場合は、そのキーボードの編集を開始する。
2. 認可済みキーボードの一覧取得を行って、結果が2件以上の場合は、どのキーボードを編集するかをユーザに選択させて、その結果のキーボードの編集を開始する。
3. 認可済みキーボードの一覧取得を行って、結果が0件の場合は、特に何もしない。
4. 未認可キーボードは検出されないので、特にやることなし。
5. 認可済みキーボードの接続イベントを捕捉して、そのキーボードの編集を開始する。
6. ユーザが「新規キーボードの接続」ボタンを押して未認可キーボードの認可をChromeに要求する。認可後に、そのキーボードの編集を開始する。
7. 認可済みキーボードの接続イベントを捕捉して、そのキーボードの編集を開始する。
8. 未認可キーボードは検出されないので、特にやることなし。
9. 認可済みキーボードの接続イベントを捕捉して、そのキーボードの編集に切り替えるかどうかユーザに問い合わせる。Yesの場合はそのキーボードの編集を開始し、Noの場合は何もしない。
10. ユーザが「新規キーボードの接続」ボタンを押して未認可キーボードの認可をChromeに要求する。認可後に、そのキーボードの編集に切り替えるかどうかユーザに問い合わせる。Yesの場合はそのキーボードの編集を開始し、Noの場合は何もしない。
11. 編集中ではない別の認可済みキーボードをユーザが選択して、そのキーボードの編集を開始する。

必要となるUI

• 新規キーボードの認可要求ボタン。
• 接続された認可済みキーボードの一覧。
• 現在編集中のキーボードの表示。
• 別の認可済みキーボードに編集を切り替えるUI。
• 別の認可済みキーボードに編集を切り替えるかどうか問うUI。

Open the keyboard list in header when a new authorized keyboard was connected

Remap might be able to sync it if the other app change the keyboard's keymap.

• remove the Chip
• show keyboard list on Keyboard Name

show error and support message on top page

We need to support keycode notation (ex. LCTL(KC_A)) for Any keycodes.

https://caniusevia.com/docs/layouts/#kle-json-rules

open the authorization dialog provided by the browser

• no device was selected -> do nothing
• selected device has opened -> do nothing
• selected device has NOT opened -> close current device + update authorized device list + open the selected device
• selected device has NOT opened and more than 2 same device are in list -> show keyboard list and let user select to open

The candidates are:

• remap.rocks
• remap.tools
• remap-keys.app
• remapkeys.app

show keycode's discription in keymap bottom.

"labels" property of json

getInformation()で取得するvendorId と productIdはstringですが、connect()で指定するvendorId と productIdはnumberのようです。
vendorId と productIdはnumberだと嬉しいです。

export interface IConnectParams {
  readonly vendorId: number;
  readonly productId: number;
}

export interface IDeviceInformation {
  readonly vendorId: string;
  readonly productId: string;
  readonly productName: string;
}

We need a new code to check whether the uploaded JSON file is valid or not as a Keyboard Definition JSON file.

Flush state.app.remaps

This Remap product needs many JSON files which the following information are defined about each keyboard:

• Keyboard Model Information: Vendor ID and Product ID
• The number of keys: Row count and Column count
• The Key Layout: Each key position, size and related row/column numbers

We need to discuss about how to register such JSON file by keyboard designers.

このRemapプロダクトは、各キーボードについて以下の情報が定義された多くのJSONファイルを必要とします。

• キーボードモデル情報: Vendor ID および Product ID
• キー数: 列数および行数
• キーレイアウト: 各キーの位置、大きさ、そして対応する列/行番号

キーボード作者によってそれらのJSONファイルがどう登録されるのか、議論する必要があります。

When a keyboard is connected, fetch the definition file for the connected keyboard from Firestore. If it is nothing in the Firestore, show the UI to upload a JSON file from a user's local PC.

show instruction and the button to open HID authorize dialog provided by its browser

set macro text area

KeycapKey should NOT be able to drag in Keydiff.

Use the model properties, remove other properties related to the model

Introduce Authentication for Closed Beta.

Open a WebHID device(keyboard) If there is only one connected authorized keyboard device.

We define the 1st scope (this means a function set provided by the first version of this product) of this product as the following:
このプロダクトの最初のバージョンにて提供される初期スコープについて、以下のように定義します:

含まれる機能

• 接続されたキーボードのWebHIDを使ったキーマップ操作（認可、表示、更新）。
• キーボード定義JSONファイルのアップロードとそれを使ったキーマップの編集。
• 登録済みキーボードが接続された際の自動認識とキーマップ編集開始。
• 定義済みキーコードの割り当てと、任意のキーコード（ANY）の割り当て。

含まれない機能

• キーボード定義JSONファイルの登録フォーム。
• 接続されていないキーボードのキーマップ編集。
• キーマップ定義情報のバックアップおよびリストア。
• OSの設定に依存するキーボード種別（US、日本語、PC98互換、など）に応じた記号などの表示。
• UI の i18n 対応（最初は英語のみ）。
• キーバインディング（Ctrl + Alt + A など）の表示。
• キーマップ定義情報のシェア。
• LEDの制御。
• マクロの登録。

show this component when

• open this app (#50)
• disconnect current edit keyboard (#51 )

Currently, we call this product "WebVIA" because this product is a "VIA" client "Web" app. However, we might need to avoid use the "VIA" word for the product name. Therefore, we need to discuss about other name for this product.

このプロダクトは "VIA" クライアント "Web" アプリなので、今は "WebVIA" と呼んでいます。しかし、プロダクト名としては、"VIA" という単語を使うことは避ける必要があるかもしれません。なので、このプロダクトのための他の名前を議論する必要があります。