Implementing RELATE-Gateways with IndianaJS

View on GitHub Download .zip Download .tar.gz

In this tutorial we will be implementing a classic spatial aware application, the RELATE-Gateways, using IndianaJS. We will discuss all important aspects here, but if you want more information on the the RELATE-Gateways check out the research paper here.

Now Let’s dig in!

First, let’s see what we are building:

Enabling spatial awareness when working with IndianaJS is quite simple and straightforward because the library takes care of most tasks:

1 EXAMPLE CODE

All you need is a website annotated with some semantic tags such as the Kitchen website and a way to present the information. In this tutorial we will create RELATE-Gateways.

<button onclick="startPinRotationDemo()">Start</button>
<button onclick="stopPinRotationDemo()">Stop</button>

<div id='pngpin' class='relate-pin'>
    <img id='flowerimg' src="./img/flower.png">
    <img id='flowerpin' src="./img/relate-pin.png">
</div>

Start Stop

var flowerPin = document.getElementById('flowerpin');
var rotationAnimation;
var i = 0;

function startPinRotationDemo() {
  rotationAnimation = setInterval(function() {
    flowerPin.style.webkitTransform = 'rotate(' + i + 'deg)';
    i++;
    //reset if we reached the full circle - actually not necessary because of the periodicity of the circle
    if (i > 360) i = 0;
  }, 50);
}

#flowerpin{
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 57%;
}

#flowerimg{
    position: absolute;
    height: 70px;
    top: 20px;
    left: 14px;
}

Check it out and play with it on Codepen Flower Pin.

Ok, so now we know how to create our RELATE-Gateways. Next, let’s position them at the edge of the screen!

For code highlighting: https://github.com/mojombo/tpw/tree/master/css/syntax.css

IndianaJS,, RELATE-Gateways,, SVG,, Spatial, and Awareness

% include footer.html %}

Authors and Contributors

Many Thanks to Jack Unseld (@junseld) and Till Riedel (@riedel)