目次

自作, OpenCV, JavaScript, トラブルシューティング, クラウドミュージックプレイヤー

+
もしかして...
その他

作品
端末第四世代(TerminalPro4) | 作品例
本体外観
本体外観

TerminalPro4とはSDカードに保存されている任意のプログラムを選択, 実行することができるものです. また外部のマイコン(optibootのみ対応)に対してプログラムを書き込むことも可能です. プログラマはTerminalPro4が備えている液晶, 音楽再生機, ボタンを自由に使用することができます. TerminalPro4が音楽プレイヤーからゲーム機まで様々なものになるのは, プログラマ次第です.

このページでは, TerminalPro4のハードウェア製作方法, TerminalPro4用のソフトウェア(アプリケーション)作製方法を説明していきます.

大まかな仕様は次のようになっています.

  • マイコン数: 3(ArduinoUno)
  • 入出力デバイス: 白黒ディスプレイ, スイッチ, 音声, SD
  • 音声出力法: PWM方式

TerminalPro4は次のライブラリを使用します.

Python
OpenCVで二つのWEBカメラを用いたステレオカメラの実装 | 画像処理

ステレオカメラは,空間の深度を測定するのに使われます.本稿では,二台のウェブカメラを用いてステレオカメラを実装します.ある程度のロバスト性を確保するため,キャリブレーションも行います.

結果,以下のような深度画像を得ることができた.

結果画像
結果画像
シリアルモニタを開くまでArduino-Python間のシリアル通信のデータ破損 | トラブルシューティング

ArduinoとPython間のシリアル通信で, Arduino側から送られたシリアルデータをPythonのpySerialモジュールで読み込むと, 破損したデータ-予想していないデータ-を受信する. だが, 一度Arduinoのシリアルモニタでデータを確認すると正常に受信できており, それ以降, pythonの方でも正常に受信できる.

pythonで受信. 予期しないデータが受信されている
pythonで受信. 予期しないデータが受信されている

本稿では, 上記の問題の原因と解決方法について述べる.

ステレオカメラ, 画像処理
OpenCVで二つのWEBカメラを用いたステレオカメラの実装 | 画像処理

ステレオカメラは,空間の深度を測定するのに使われます.本稿では,二台のウェブカメラを用いてステレオカメラを実装します.ある程度のロバスト性を確保するため,キャリブレーションも行います.

結果,以下のような深度画像を得ることができた.

結果画像
結果画像
ライブラリ
JavaScript | 各種ライブラリ

このページは筆者が作成したJavaScriptのライブラリが公開されます.

画面分割ライブラリ SplitView | JavaScript

ウェブブラウザ上で動作する, 画面分割ライブラリ.

スクリプト内に一切の状態を持たず, 完全に要素のデータ (例えば, 属性やスタイル) と要素の構造をベースに動作します. このことで, 次の三つの特徴が得られます.

  • ページロード時のレイアウト変化なし
  • 他スクリプトによるビューへの自由な変更
  • カスタム可能

サンプルページ

画面分割ライブラリ Splitter | JavaScript
このライブラリは, 古いです

よりモダンで, 完全に要素ベースの[JavaScript/画面分割ライブラリ SplitView]をご使用ください.

多くの編集ソフトには, 一つの画面を分割する機能があります. 一つの画面を分割することで, 同じ画面で複数の作業を行うことができます.

Splitterは, ウェブブラウザ上で動作する画面分割ライブラリです. 分割境界にあるスライドバーを動かすことで領域のサイズを調節できます.

ダウンロード, 画面分割
画面分割ライブラリ SplitView | JavaScript

ウェブブラウザ上で動作する, 画面分割ライブラリ.

スクリプト内に一切の状態を持たず, 完全に要素のデータ (例えば, 属性やスタイル) と要素の構造をベースに動作します. このことで, 次の三つの特徴が得られます.

  • ページロード時のレイアウト変化なし
  • 他スクリプトによるビューへの自由な変更
  • カスタム可能

サンプルページ

画面分割ライブラリ Splitter | JavaScript
このライブラリは, 古いです

よりモダンで, 完全に要素ベースの[JavaScript/画面分割ライブラリ SplitView]をご使用ください.

多くの編集ソフトには, 一つの画面を分割する機能があります. 一つの画面を分割することで, 同じ画面で複数の作業を行うことができます.

Splitterは, ウェブブラウザ上で動作する画面分割ライブラリです. 分割境界にあるスライドバーを動かすことで領域のサイズを調節できます.

ゲーム
ブラウザゲーム一覧 | アプリケーション一覧

ここでは, 筆者が作成したブラウザゲームを紹介します.

アプリ
ブラウザゲーム一覧 | アプリケーション一覧

ここでは, 筆者が作成したブラウザゲームを紹介します.

Cloud Music Box - クラウドストレージからの音楽再生Webアプリ(PWA) | アプリケーション一覧
Cloud Music Box
Cloud Music Box

Cloud Music Boxは、クラウドストレージ(現在はOneDriveのみ)から音楽を再生するPWA音楽プレイヤーです。

以下の特徴を持ちます。

  • PWAとして、多くのプラットフォーム(Windows, macOS, iOS, Android)上で同様のユーザ体験を実現します。
  • 一元管理されたクラウドストレージからの再生で、プレイヤーごとに音楽を同期する必要がありません。
  • オフラインでも、ダウンロード済みの音楽は再生可能です。
  • アプリがバックグラウンドにある場合でも、音楽の連続再生が可能です(iOSのみ動作しないことがある)。
  • 音楽に合わせて、動的にアプリのスタイルやアニメーションが変化します。
非同期処理, Tips
SyntaxHighlighter の非同期読み込み | Tips

本稿では, コードをハイライトするライブラリSyntaxHighlighter非同期読み込み方法について説明します.

シリアル通信
シリアルモニタを開くまでArduino-Python間のシリアル通信のデータ破損 | トラブルシューティング

ArduinoとPython間のシリアル通信で, Arduino側から送られたシリアルデータをPythonのpySerialモジュールで読み込むと, 破損したデータ-予想していないデータ-を受信する. だが, 一度Arduinoのシリアルモニタでデータを確認すると正常に受信できており, それ以降, pythonの方でも正常に受信できる.

pythonで受信. 予期しないデータが受信されている
pythonで受信. 予期しないデータが受信されている

本稿では, 上記の問題の原因と解決方法について述べる.

Arduino
シリアルモニタを開くまでArduino-Python間のシリアル通信のデータ破損 | トラブルシューティング

ArduinoとPython間のシリアル通信で, Arduino側から送られたシリアルデータをPythonのpySerialモジュールで読み込むと, 破損したデータ-予想していないデータ-を受信する. だが, 一度Arduinoのシリアルモニタでデータを確認すると正常に受信できており, それ以降, pythonの方でも正常に受信できる.

pythonで受信. 予期しないデータが受信されている
pythonで受信. 予期しないデータが受信されている

本稿では, 上記の問題の原因と解決方法について述べる.

Web, 音楽, 音楽再生, PWA
Cloud Music Box - クラウドストレージからの音楽再生Webアプリ(PWA) | アプリケーション一覧
Cloud Music Box
Cloud Music Box

Cloud Music Boxは、クラウドストレージ(現在はOneDriveのみ)から音楽を再生するPWA音楽プレイヤーです。

以下の特徴を持ちます。

  • PWAとして、多くのプラットフォーム(Windows, macOS, iOS, Android)上で同様のユーザ体験を実現します。
  • 一元管理されたクラウドストレージからの再生で、プレイヤーごとに音楽を同期する必要がありません。
  • オフラインでも、ダウンロード済みの音楽は再生可能です。
  • アプリがバックグラウンドにある場合でも、音楽の連続再生が可能です(iOSのみ動作しないことがある)。
  • 音楽に合わせて、動的にアプリのスタイルやアニメーションが変化します。
「https://contentsviewer.work/Master/:tagmap/自作,OpenCV,JavaScript,トラブルシューティング,クラウドミュージックプレイヤー?layer=ja」から取得