Imaginable Reality


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


回路は,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.)



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.

void setup() {
  digitalWrite(BUTTON_PIN, HIGH);
  // disable timer 0 overflow interrupt (used for millis)
  TIMSK0&=!(1<<TOIE0); // ++

void delayMs(unsigned int ms) {
  for (int i = 0; i < ms; i++) {

int value = 0;
boolean started = false;

void loop() {
  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;
#if BYPASS_TIMER_ISR  // check if timer isr fixed.

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">
<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;

<!-- 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 = "";

<!-- 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);

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

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

int count = 0;

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

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

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.)

keopsnattkeopsnatt 2015/03/15 12:28 Hola muy buen trabajo, estaba pensando justamente en eso! y bueno en esta ocasion lo tomare como guía para elaborar otro trabajo que tengo pendiente!