Imaginary Code

from kougaku-navi.net

トップ > How to bulid iPad with Arduino + Processing.js

How to bulid iPad with Arduino + Processing.js

YouTubeに作り方教えてとコメントがあったので，ソースコード類を置いておきます．(I show the resources of an Arduino-based gadget for iPad.)

※どうしてこういう設計に至ったかの経緯についてはこちらに書いています↓
iPadにArduinoをつなぎ，Webブラウザ上でProcessingを使ってセンサデータを可視化 - Imaginable Reality

Circuit

回路は，USBキーボードとして機能するパートと，光センサとして機能するパートから構成されます．ArduinoでUSBキーボードを作る方法については以下のページをを参考にしました．(This circuit has two parts. One of them is a usb-keyboard emulator, and the other is a light sensor. I saw following website for the reference.)
practicalarduino.com -&nbsppracticalarduino リソースおよび情報


Source code for Arduino

Arduino用のソースコードです．USBキーボード関係のライブラリは以下のページから入手してください．(You need a library including UsbKeyboard.h. Please get it from following website.)
Google Code Archive - Long-term storage for Google Code Project Hosting.

#include "UsbKeyboard.h"

#define BUTTON_PIN 7

// If the timer isr is corrected
// to not take so long change this to 0.
#define BYPASS_TIMER_ISR 1

void setup() {
  pinMode(BUTTON_PIN, INPUT);
  digitalWrite(BUTTON_PIN, HIGH);
  
#if BYPASS_TIMER_ISR
  // disable timer 0 overflow interrupt (used for millis)
  TIMSK0&=!(1<<TOIE0); // ++
#endif
}

#if BYPASS_TIMER_ISR
void delayMs(unsigned int ms) {
  for (int i = 0; i < ms; i++) {
    delayMicroseconds(1000);
  }
}
#endif

int value = 0;
boolean started = false;

void loop() {
  UsbKeyboard.update();
  if (digitalRead(BUTTON_PIN) == 0) {
    started = true;
  }
  if (started) {
    value = (int)(10*analogRead(0)/1023.0);
    switch (value) {
      case 0: UsbKeyboard.sendKeyStroke(KEY_0); break;
      case 1: UsbKeyboard.sendKeyStroke(KEY_1); break;
      case 2: UsbKeyboard.sendKeyStroke(KEY_2); break;
      case 3: UsbKeyboard.sendKeyStroke(KEY_3); break;
      case 4: UsbKeyboard.sendKeyStroke(KEY_4); break;
      case 5: UsbKeyboard.sendKeyStroke(KEY_5); break;
      case 6: UsbKeyboard.sendKeyStroke(KEY_6); break;
      case 7: UsbKeyboard.sendKeyStroke(KEY_7); break;
      case 8: UsbKeyboard.sendKeyStroke(KEY_8); break;
      case 9: UsbKeyboard.sendKeyStroke(KEY_9); break;
      default: break;
    }
    delay(300);
    
#if BYPASS_TIMER_ISR  // check if timer isr fixed.
    delayMs(20);
#else
    delay(20);
#endif
   }
}

Source sode of web page

HTMLのソースコードです．Processing.jsが必要です．(This is HTML source of the web. You need processing.js. please get it from http://processingjs.org/.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- TITLE -->
<title>iPad + USB-keyboard + Processing.js</title>

<!-- Processing.js -->
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="processing.js"></script>

<!-- Object for Keyboard Input -->
<style type="text/css">
form.keyinput input {
    position: absolute;
    padding-left: 0px;
    padding-top: 0px;
    border: 5px;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #FFC000;//yellow;
    color: #646464;//black;
}
form.keyinput input:focus {
    background-color: transparent;
}
</style>

<!-- Update by keyinput -->
<script type="text/javascript">
var key_value ='';
function keyinput_update(){
    key_value = document.form_key.input_field.value;
    document.form_key.input_field.value = "";
}
</script>

<!-- JavaScript for Processing -->
<script type="text/javascript">
window.onload = function() {
    var canvas = document.getElementsByTagName('canvas')[0];
    var codeElm = document.getElementById('processing-code');
    var code = codeElm.textContent || codeElm.innerText || codeElm.text;
    Processing(canvas, code);
};
</script>

<!-- for Debug -->
<script type="text/javascript">
function msg(text) {
    document.getElementById('message').innerHTML = text;
}
</script>

<!-- Processing Code -->
<script id="processing-code" type="application/processing">
void setup(){
  size(768, 902);
  background(0);
  noStroke();
}

int count = 0;

void draw(){
  if ( key_value>=0 && key_value<=9 ) {
    count = key_value;
  } else {
    count = 0;
  }
  background(100);
  for (int i=0; i<count; i++) {
    fill(255,192,0);
    rect(100,760-80*i, 0.7*width,50);
  }
}
</script>

</head>
<body>
    <canvas style="position: absolute; top: 0px; left: 0px;"></canvas>
    <form action="#" class="keyinput" name="form_key" onkeyup="keyinput_update()">
        <input name="input_field">
    </form>
    <div id="message"></div>
</body>
</html>

How to get it to work

1. 回路が載ったArduinoをカメラコネクションキットとUSBケーブルを使ってiPadに接続します．(Connect the arduino board to iPad via a USB cable and a camera connection kit.)
2. Safariで作成したWebサイトを開きます．(Open the created website (or iPad + USB-keyboard + Processing.js) on Safari.)
3. 左上に表示されている黄色いボックスをタッチします．(Touch the yellow box located at left-top.)
4. 回路上の押しボタンスイッチを押してください．(Push the button switch embedded in the circuit.)
5. 光センサの値（0〜9）がWebサイト上で表示されます．（The value given from light sensor (0 to 9) will be shown on the website.)