First Steps: Your First Connichiwa Application

Mario Schreiner edited this page Jan 13, 2015 · 21 revisions

Introduction

So, you have set up an XCode project and are ready to get to the sweetness of Connichiwa? Alright, let's roll!

First, when you press "Run" in XCode, your web application is deployed to your iOS device and started. Great! You can now get remote devices to connect to your app in several ways:

  • Other iOS devices running your app will be detected automatically. If you connect to them, Connichiwa will handle the handshake and launch your application on the remote device fully automated.
  • Other Mac OS X computers running the Connichiwa Client for Mac will be automatically detected and connected in the same way
  • Other devices need to be in the same network (either Wi-Fi or Bluetooth) as your iOS device. They can then join through any web browser by opening the URL http://IP:8000/remote, where IP is the IP of the device running the application. This can be basically anything - another iOS device, an Android device, Window, Mac OS X, Linux, Chrome OS, ... .

Now you know how to get other devices to connect to your app. Now let's finally do something with this!

Preparing your web app

To use Connichiwa, you need to have the following in your <head>:

<script src="/connichiwa/scripts/gyro.min.js"></script>
<script src="/connichiwa/scripts/jquery.js"></script> <!-- You can also use your own jQuery -->
<script src="/connichiwa/connichiwa.min.js"></script>

Connichiwa.onLoad()

As a general rule, you should only execute Connichiwa-related code after the load event has fired. This ensures that Connichiwa has properly loaded and everything is ready:

Connichiwa.onLoad(function() {
    /* Your code should go here */
});

Detecting & Connecting Other Devices

Let's start by making our app react to other devices:

<div id="log"></div>

<script>
Connichiwa.onLoad(function() {
    Connichiwa.on("deviceDetected", function(device) {
        $("#log").append(device.getName()+" has been detected!<br/>");
    });

    Connichiwa.on("deviceLost", function(device) {
        $("#log").append(device.getName()+" was lost!<br/>");
    });
});
</script>

Connichiwa.on() adds a callback function for the given Connichiwa event. In this case, we add callbacks to the deviceDetected and deviceLost events. Both events receive an object representing the device (for details see First Steps: Quick API Documentation).

Detecting devices is great, but we need to connect them to actually do something with them. Easy, we just use connect():

Connichiwa.on("deviceDetected", function(device) {
    $("#log").append(device.getName()+" has been detected!<br/>");
    device.connect();
});

When a device was successfully connected, the deviceConnected event is fired:

Connichiwa.on("deviceConnected", function(device) {
    $("#log").append(device.getName()+" connected successfully!<br/>");
    device.insert("Hi, I'm "+device.getName()+" and I am now part of your app!");
});

Here, we use the device's insert() method to add a simple text to the <body> of each connected device. With these few lines, we have already created an application that detects, connects and displays content on remote devices!

Distance Sensing

Connichiwa approximates the distance to other devices, so let's only show content on closeby devices. When the distance of a remote device changes the deviceDistanceChanged is fired:

Connichiwa.on("deviceDistanceChanged", function(device) {
    if (device.isConnected()) {
        if (device.distance < 0) {
            device.insert("My distance cannot be measured<br/>");
        }
        else if (device.distance < 0.5) { 
            device.insert("I am close!<br/>");
        }
        else if (device.distance < 5.0) { 
            device.insert("I am nearby!<br/>");
        }
        else { 
            device.insert("I am far away!<br/>");
        }
    }
});

Putting it together

Alright, let's put everything together: With a few lines, we will create an application that detects and connects nearby devices and creates a log of them. Remote devices will show and live-update their distance to the main device. Devices where the distance cannot be determined will show a replacement message:

<div id="log"></div>

<script>
Connichiwa.onLoad(function() {
    Connichiwa.on("deviceDetected", function(device) {
        $("#log").append(device.getName()+" has been detected!<br/>");
        device.connect();
    });

    Connichiwa.on("deviceLost", function(device) {
        $("#log").append(device.getName()+" was lost!<br/>");
    });

    Connichiwa.on("deviceDistanceChanged", function(device) {
        if (device.isConnected()) {
            if (device.distance < 0) {
                device.insert("My distance cannot be measured<br/>");
            }
            else if (device.distance < 0.5) { 
                device.insert("I am close!<br/>");
            }
            else if (device.distance < 5.0) { 
                device.insert("I am nearby!<br/>");
            }
            else { 
                device.insert("I am far away!<br/>");
            }
        }
    });
});
</script>

How to go on?

You just wrote your first Connichiwa-based application and it already handles the most important Connichiwa events and functions. A more in-depth API Overview is given at First Steps: API Overview. To have a technical overview over the API, look at Short API Documentation.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.