Open Hybrid

Arduino Yun Example

Sensor, LED, AR Slider

 

​

 

 

Preparation

  1. Install Arduino 1.6.7 (The latest version) https://www.arduino.cc/en/Main/Software
  2. Download the Hybrid Object Arduino Library: https://github.com/openhybrid/HybridObject/archive/master.zip
  3. Unzip master.zip and rename the unzipped HybridObject-master Folder in to HybridObject.
  4. Copy this folder in to Documents/Arduino/libraries/
  5. Verify that the HybridObject Library shows up in the Arduino App: Sketch>Include Library
  6. Install the Reality Editor via the iOS App Store: https://itunes.apple.com/us/app/reality-editor/id997820179

 

 

Building and Running your own Objects

If you want to run your own project, you need to make sure that your Computer, iOS-Device and the Arduino Yun are in the same WIFI network. You can build such a network with this box here:

http://www.amazon.co.uk/TP-LINK-TL-WR702N-Universal-Extender-Set-top/dp/B007PTCFFW/

 

It can be powered with the USB port and it creates a personal wifi network.

 

You can build your own Open Hybrid Arduino Yun with this  guide.

 

 

Needed Components

 

 

 

Circuit

Quick Step

  1. Wire the circuit like the picture on the right.

 

What is it? Connect the long leg of the LED to Pin 13. Connect the short leg from the LED in to GND.

 

Connect one side of the force sensor to 5V and the other side to the 10K Ohm resistor and the A0 input. Connect the other side of the 10K Ohm resistor to GND.

 

 

 

 

 

 

 

 

 

 

 

 

Hybrid Object

Target

 

Quick Step

XX stands for the number on your board.

 

  1. In your Web-Browser open the following URL:
    http://objXX.local:8080
  2. Create a new Object named objXX
  3. Click on Add Target.
  4. In the Hybrid Object Arduino Library folder
    open marker_HRQR and drag'N'drop the objXX.zip
    file in to the browser window.
  5. Do the same with the objXX.jpg image

 

 

Once your target is uploaded, you can now point the

Reality Editor at the target image and see that there is already

a hello world "bird" page.

 

Advance

If you want to generate your own target files, with following this guidelines.

 

You can also use hrqr.org to generate unique target images easily.

 

What is it? This marker or target allows the Reality Editor to correctly identify your object. Each object that you create needs to have a unique target attached to it. An appropriate target image is one with many edges and without repeating patterns.

You can learn more about a good target with this link: https://developer.vuforia.com/library/articles/Solution/Natural-Features-and-Ratings

 

 

 

 

 

 

 

 

Arduino

 

/*created 2015by Valentin Heun*/ #include <HybridObject.h>HybridObject obj; void setup() {    obj.developer(); // allow developer tools    obj.add("objXX", "led"); // add a new I/O Point    obj.add("objXX", "sensor");} void loop() {     // Read from sensor    float reading = obj.map(analogRead(A0), 0, 940);     // Write to Object    obj.write("objXX", "sensor", reading);     // Read from Object    analogWrite(13, obj.read("objXX", "led") * 255);     delay(30);}Quick Step

XX stands for the number on your board.

 

  1. In the Hybrid Object Arduino Library folder open the folder: examples/sensorAndSlider/Open sensorAndSlider.ino with the Aruino App
  2. Rename "yourObjectName" with objXX.
  3. Upload the code

 

What is it?

In order to reprogram and interact with your hybrid object, you must first upload code to the Arduino that links your Arduino with your Hybrid Object interface by generating IO-Points. The sketch you just uploaded is doing this job (Right side).

 

You can find a more detailed explanation for this sketch here.

 

A general detailed explanation for all functions can be found in the reference.

 

 

 

 

 

Web-Interface

 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Slider</title>    <script src="object.js"></script>    <script src="objectIO.js"></script>    <script src="/socket.io/socket.io.js"></script>    <style>     input[type=range] {            background-color: transparent;            -webkit-appearance: none;      }      input[type=range]::-webkit-slider-runnable-track {            -webkit-appearance: none;            height: 68px;            background-color: rgba(255, 255, 255, 0);            -webkit-backdrop-filter: blur(4px);            border: solid 4px #00edff;            border-radius: 8px;            padding: 5px;     }      input[type=range]::-webkit-slider-thumb {            -webkit-appearance: none;            border: none;            height: 50px;            width: 50px;            border-radius: 2px;            background: #00edff;     }      .range-slider input[type="range"]:after {            height: 2px;            background: #fff;            content: ' ';            width: 5px;            top: 50%;            margin-top: -1px;            left: -5px;            z-index: 1;            position: absolute;     }      input[type=range]:focus {            outline: none;        }    </style></head><body>    <input id="slider" type="range" value="0" min="0"    max="255" style="width:250px"><script>    var obj = new HybridObject();    var slider = document.getElementById('slider');    var sliderValue = 0;    var sliderPrevValue = 0;    var touchState = false;     document.addEventListener("touchstart",function(e){        touchState = true;    }, false);    document.addEventListener("touchend",function(e){        touchState = false;    }, false);     obj.object.on("object", function (msg) {        var data = JSON.parse(msg)        if (obj.read("led", data) != undefined) {            slider.value = obj.read("led", data) * 255;        }    });     setInterval(function () {        sliderValue = slider.value;         if (!touchState) {            obj.readRequest("led");        } else {            if (sliderPrevValue != sliderValue)                obj.write("led", sliderValue / 255);             sliderPrevValue = sliderValue;        }    }, 50);</script></body></html>Quick Step

 

  1. In your Web-Browser open the following URL:
    http://objXX.local:8080
  2. Click on add Interface
  3. In the Hybrid Object Arduino Library folder open the folder:
    examples/sensorAndSlider/interface
  4. Drag'n'drop one after another all files from this folder to the add Interface browser-page

 

What is it?

Now it is time to add a web interface. You can find all the information you need to add an interface to your hybrid object here. If you make your own web interface be sure to title your file index.html.

 

Make sure that you have drag'N'droped the object.js file along with this objectIO.js file to the “Add Interfaces” page and that the are linked in your index.html page. Both files can be found in the the sensorAndSlider example folder.

 

A detailed explanation for all JavaScript functions used in the code can be found in the reference.

 

 

 

 

Your done!

You have created a hybrid obejct.