JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q71505F
  • License ISC

SmartController provides an easy way of turning a smartphone into versatile controller.

Package Exports

  • smartcontroller
  • smartcontroller/dist/smartcontroller.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (smartcontroller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SmartController: Peer-to-peer for creating smartphone controllers

SmartController provides an easy way of turning a smartphone into versatile controller.

How it works

1. Include SmartController

Simply make a new SmartController object on your website. The connection and data will be handled automatically.

2. Display the QRcode

Show a QRcode with the matching controller on your website for smarthphone to connect to. You can use one of the provided controllers or make your own!

3. Control the website

Use the incoming data from phone to interact with PC browser.

Getting started

Dependencies

SmartController uses peerjs to proide peer to peer connection between PC and smartphone browsers. The events are handled by EventEmmiter2 and the qr codes are generated with EasyQRCodeJS

Include the library

install NPM package: npm install smartcontroller

// The usage -
import "smartcontroller";

html file:

```html
<script src="https://unpkg.com/smartcontroller@2.0.0/dist/smartcontroller.min.js"> </script>
```

Create a Peer

const peer = new smartcontroller.SmartController(123456789);
// if id is not specified a randm one will be generated

Create a QRcode
Make a qr code for easy phone connection. All you need is a url where the phone controller is hosted and a div element id. Optionally specify a size and a player id.

peer.createQrCode(
  "https://emmapoliakova.github.io/webpack-test/joystick.html",
  "qrcode",
  150,
  150,
  "1"
);

Listen for events
Once the user connects with smartphone, you can listen for various events and use them to control the PC browser.

// when a new conection is registered log the peer id, screen size and player id if specified
simplePeer.on("connection", function (peer) {
  console.log(peer);
});

// on incoming data log the input provided from smartphone
simplePeer.on("data", function (data) {
  console.log(data);
});

Find the full documentation here.