Making Web Connected Orgel

Created Date: 2015-06-30/ updated date: 2016-02-18
Owner & Collaborators
License
By nc sa
Summary
スマホのブラウザから登録されたメロディを次々に演奏する電子オルゴールです。
登録用画面のURLを他の人に伝えることで、場所が離れている人でも自由にメロディを登録できます。
色々な人が登録したメロディを手元の1台のオルゴール上で楽しむことができます。

Materials

    Tools

      Blueprints

        Making

        • Overview

          0
          Thumb 13010899
          • スマホ:メロディを登録します。
          • Webサーバー:登録画面の表示、メロディの蓄積、メロディ一覧の配信を行います。
          • PC:Prosessingを実行します。メロディ一覧の取得、Web Toneへのシリアル通信を行います。
          • WebTone:シリアル通信で受け取ったメッセージに応じ、音と光を出します。
          Small overview
          • Orgel Client

            0
            Thumb 13010899
            オルゴール本体の作成と、接続するPCの設定を行います。
            • Front face

              0
              Thumb 13010899
               木板(3x85x60mm) CNCルーターエンドミル 3mm)を使って前面に使う板を加工します。
              • LEDをはめる凹みを作る。光を透けるようにするため、一番薄い部分で0.3mm残るよう穴に削る。
              • 電子ブザーをはめる凹みと音を通す穴を作る。電子ブザーの直径に合わせてサイズを変更する。

              Small img 1647
            • Arduino coding

              0
              Thumb 13010899
              シリアル通信で受け取った文字に応じて動作するようArduinoにスケッチを書き込みます。
              • '1'〜'8'の文字を受け取った場合、ドレミファソラシドに変換して再生する
              • それ以外の文字を受け取った場合は休符としてあつかう

              スケッチはこちら

            • Prosessing coding

              0
              Thumb 13010899
              以下の機能を持つクライアントPCを設定します。
              Prosessingで以下の機能を実行します。
              • サーバーからメロディ一覧を取得
              • 接続されたArduinoにシリアル通信で1音ずつメロディを送信
              • すべてのメロディーをArduinoに送信したら、サーバーからメロディ一覧を再取得

              スケッチはこちら  GitHub -Web_tone_client -web_tone_client.pde
              settings.jsonのArduinoの接続ポート名とメロディサーバーのURLを自分の環境に合うよう変更します。

            • Test(動作確認)

              0
              Thumb 13010899
              正しく動作しているか確認するための幾つかの方法
              • オルゴール本体:Arduinoのシリアル通信ウインドウから文字列を送信してLEDと電子ブザーが動作するか確認する。
              • Processing:コンソールにサーバーから取得したJSON文字列が表示されるか確認する。
              • Prosessingをサーバーなしで確認する:サーバーがない場合でもPC上のJSONファイルで動作確認できる。スケッチ(web_tone_client.pde)と同じフォルダにJSONファイル(tone_list.json)を作成し、settings.jsonの"TONE_LIST_URL"に "tone_list.json"と記述して実行する。
              • Small serial test
              • Small processing test
          • Orgel Server

            0
            Thumb 13010899
            Webアプリ構築サービス、Herokuを使用してメロディ登録、配信サーバーを作ります。
            • Small deploy button
            • Small heroku deploy
            • Deploy (構築)

              0
              Thumb 13010899

              1. GitHub -Web_tone_serverの"Deploy to Heroku" をクリックするとHerokuに移動し、アプリ構築画面が表示されます。(Herokuアカウント未作成の場合は、最初に作成画面が表示されます。)
              2. "Deploy for free" をクリックすると自分のアカウント内にWeb_tone_serverアプリが構築されApp nameが割り当てられます。
              これで構築が完了し、ブラウザからアクセス出来るようになります。
            • Test(動作確認)

              0
              Thumb 13010899
              URLにアクセスしメロディ登録画面が表示されることを確認してください。
              • App nameが"web-app-1234"の場合、https://web-app-1234.herokuapp.com/

              クライアントのProsessingに設定するJSONの取得URLは以下になります。
              • https://[App name].herokuapp.com/get/tonelist/json/


          Add Card Order

          References

            Usages

              • Small registration view
              • Small registration complete view

              メロディを登録する。

              Thumb 13010899
              サーバーが構築できたら、ブラウザからメロディを登録します。
              URLを友達に教えて登録してもらうのも良いでしょう。
            • Small play

              クライアントを起動する

              Thumb 13010899
              オルゴールとPCをUSB接続し、Processingでweb_tone_client.pdeを実行します。
              しばらくするとメロディ一覧が取得され演奏が開始されます。

            Convert State

             to Annotation.

            Select the numebr of the state to annotate.

            OK
            cancel
            Loading

            facebook

            , data-width="400", data-show-faces="true" data-send="true"
            , data-width="400", data-order-by="reverse_time"