imperio

imperio provides developers with an SDK that creates a bridge between native mobile inputs and sensor data with desktop interaction, requiring minimal code and knowledge of the underlying technologies.

Features

Capturing Mobile inputs

Touch Gestures
Accelerometer
Gyroscope

Phone to Desktop Connections

Sockets

Various Forms of Authenticating Mobile to Desktop Sessions

URL + shortcode
Alphanumeric Client Password
Cookie/Token Sessions

Installation

npm install imperio

Getting Started

Client Side Implementation

The client side implementation of imperio represents the use of the mobile functionality to influence browser interaction. Client-side functionality can be accessed by:

<script src = 'https://cdn.socket.io/socket-io-1.4.5.js'></script>
<script src='./dist/imperio.min.js'></script>

This above code needs to be included on the mobile browser and desktop browser.

Server Side Implementation

imperio's server functions are currently Express middleware. Implementing imperio will require Express to be installed and required.

imperio's server-side functionality can be enable with just a couple lines of javascript: Just require the module and pass it the server object of your app

const imperio = require('imperio')(server);

Add a static route so your client will get the correct files from our node module

app.use(express.static(path.join(`${__dirname}/../node_modules/imperio`)));

Then have your app use the returned object as middleware

app.use(imperio.init());

imperio will handle the mobile-to-desktop connections for you!

A Simple Example

In this example, we'll include a button in the mobile browser, which on "tap", will alter the Dom of the desktop browser.

mobile.html :

<body>
  <button type="button" name="button" class="tap" onclick="imperio.mobileTapShare()">Tap Here</button>
  <h2>Hello World</h2
</body>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src='./dist/imperio.min.js'></script>

mobile.js:

imperio.mobileRoomSetup(imperio.socket, imperio.room);

desktopBrowser.html:

<body class='class1'>
  <h1> Welcome, imperio User!</h1>
  <div id= "nonceContainer"></div>
</body>

desktopBrowser.js

function changeBodyClass() {
  if (bodyElement.classList.contains('class1')) {
    bodyElement.classList.remove('class1');
    bodyElement.classList.add('class2');
  } else {
    bodyElement.classList.remove('class2');
    bodyElement.classList.add('class1');
  }
}

In server.js:

const express = require('express');
const app = express();
const server = require('http').Server(app); // get the server object from the app instance
const path = require('path');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const useragent = require('express-useragent');
// *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
const imperio = require('imperio')(server);
// *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

app.use(express.static(path.join(`${__dirname}/../client`)));
app.use(express.static(path.join(`${__dirname}/../node_modules/imperio`)));
app.set('view engine', 'ejs');
// *-*-*-*-*-*-*-*-*-
app.use(imperio.init());
// *-*-*-*-*-*-*-*-*-

// Handle Routes
app.get('/', (req, res) => {
  if (req.useragent && req.useragent.isDesktop) {
    res.sendFile(path.join(`${__dirname}/path/to/desktopBrowser.html`));
  } else if (req.useragent && req.useragent.isMobile) {
    res.sendFile(path.join(`${__dirname}/path/to/mobile.html`));
  }
});

server.listen(3000, () => {
  console.log('Listening on port 3000');
});

Available Functions

Client Side Methods

instantiate our shared socket

imperio.socket = io();

store roomID to pass to server for room creation and correctly routing the emissions

imperio.room = getCookie('roomId');

store nonce to use to display and show mobile user how to connect

imperio.nonce = getCookie('nonce');

take a tap event from mobile browser and emit the tap event

imperio.mobileTapShare = require('./Mobile/mobileTapShare.js');

sets up listener for motion data from mobile browser and emits object containing x,y,z coords

imperio.mobileAccelShare = require('./Mobile/mobileAccelShare.js');

sets up a listener for orientation data from mobile browser and emits object containing alpha, beta, and gamma data

imperio.mobileGyroShare = require('./Mobile/mobileGyroShare.js');

establishes connection to socket and shares room it should connnect to

imperio.mobileRoomSetup = require('./Mobile/mobileRoomSetup.js');

sets up listener for tap event on desktop browser

imperio.desktopTapHandler = require('./Desktop/desktopTapHandler.js');

sets up listener for accel event/data on desktop browser

imperio.desktopAccelHandler = require('./Desktop/desktopAccelHandler.js');

sets up listener for gyro event/data on desktop browser

imperio.desktopGyroHandler = require('./Desktop/desktopGyroHandler.js');

establishes connection to socket and shares room it should connnect to

imperio.desktopRoomSetup = require('./Desktop/desktopRoomSetup.js');

Server Side Methods

TODO

Tell Austin about adding parameter for non-Nonce implementation of SDK
Add different url form of authentication
Look at testing suite for Sockets and Implement some socket testing

License

MIT

On That Note....

Go forth and build awesome things!

anwaukoni/imperio