paulsonnentag / swip

a library to create multi device experiments

DISCLAIMER

This is a very early version of Swip.js. If the app doesn't respond you might have to reload the browser or restart the server. It works best if you create a separate wireless network to connect multiple devices with your swip.js application

Swip

Read the article about it here

What if all your mobile devices were a single screen?…

This probably isn’t the most common question to ask yourself. But, just for a second, actually think about it, think about all the possibilities when being able to combine any kind of mobile devices, independent of the operating system… Welcome to swip.js

Features

• Runs in the browser
  • Completely platform independent
  • Works on every device with a browser
• Open Source
  • Free
  • Open
  • Community-based
  • Collaborate!
• A library for you to use with your own project
  • If you have an idea about what to build, do it!
  • Two different examples
  • Endless possibilities

What we built with it

Blobparticles

Minigolf

Try it out yourself!

You need node >= 6.x to run swip. To use swip you need to install its dependencies, the dependencies for the demos and build the client library. You can just run the commands below:

Setup

npm install webpack -g
npm install
cd examples/golf
npm install
cd ../particles
npm install
cd ../..
npm run build

Run the demos

npm run golf
npm run particles

Who we are

Paul Sonnentag

Passionate developer, studying computer science. At home on the web. Building things with JavaScript, Elm and Clojure.

Tim Großmann

Passionate learner and developer. Studying computer science at the Media University. Looking forward to work with ingenious teams on challenging projects. Creator of InstaPY

swip's Issues

Server handle join and disconnect

Join

• Join 2 new devices => create server
• Join 1 new device to 1 connected device => join existing server
• Join 2 devices each connected to separate servers => merge

Remove

• Device is at the edge => remove device
• Device is in between two devices => remove device, create new server, add devices to new server

Client handle server changes

Errors during install

With installing the webpack I receive the following error:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/webpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

If I however try to install swip I got :
npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

I Am trying to install on centos 6.7 (Final)
How to proceed ?

Client handle swipe events

Hey. Great great project.

Is there any other examples of usage you can share paul?

How to install this?

Can you explain me how to install this. Your project is very intresting, but i never was programming in node. Can you add tutorial on Youtube or in detail explain me?

Server state actions

Actions

• start
• end
• update

Polish golf demo

• better graphics, nice color scheme
• change direction of push mechanism, pull in direction where the ball should go
• add obstacles settings
• account for orientation of the device how the ball is accelerated
• replace win alert with state

color scheme, textures something like this (not 3d)

Swip + Video

hi Paul !!!!

Excellent project! Congratulations !

a question, is it possible to implement swip.js with video, for share this in multiple device ?

Connections remove from Clients

Upon leaveCluster, the clients don't loose the connection to the left client

devices can't communicate each other

I use two devices with same ip 192.168.10.222:3000,I could visit the application "particles",but two devices couldn't communicate each other.Please tell me how can I deal with this problem. thx.

Unhandled event: updateOrientation

Hello. I was running the Particles demo with 2 android devices both have 4.5 inch screen. It was going well at begining, I add few particles, then suddenly server dismissed, and this error shown:

Unhandled event: updateOrientation
Error: Unhandled event: updateOrientation
at clientAction (D:\github\swip-master\src\server\reducer.js:77:13)
at D:\github\swip-master\src\server\reducer.js:22:16
at dispatch (D:\github\swip-master\node_modules\redux\lib\createStore.js:179:22)
at Object.e as dispatch
at Socket.socket.on (D:\github\swip-master\src\server\index.js:30:59)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Socket.onevent (D:\github\swip-master\examples\particles\node_modules\socket.io\lib\socket.js:348:8)
at Socket.onpacket (D:\github\swip-master\examples\particles\node_modules\socket.io\lib\socket.js:308:12)
at Client.ondecoded (D:\github\swip-master\examples\particles\node_modules\socket.io\lib\client.js:194:14)

Am I doing it wrong. Please help me fix this. Thank you :D

Server state handling

custom actions

(action, globalState, clientState) => [globalState, clientState]

Client device screen size selection

Open modal if screen size hasn't been set. After selection store screen size in local storage.

Invalid device placement

Sometimes pinching two devices together leads to 'invalid device placement' error

Client handle device move events

Phaser examples

Hi man,

It's possible to use swip.js with Phaser Framework?

Regards, Nicholls

Ignore swipes if directions dont match

left , right => cluster devices
left, left => ignore
left, top => ignore

Fatal Error in Installation. Help

I have completed all the stages of the installation. I've tried Windows and Ubuntu, though. the last step is the npm run build process I am experiencing with this error.

Very happy if you help. I like to research such projects and develop myself. I'm a web programming student.

Cluster Stays when more than 2 devices

If there are more than 2 devices connected, the created cluster will stay if the devices don't leave the cluster and disconnect

I cant join to localhost in my phone

Server is working if i go to http://localhost:3000\ on my computer its working. In my phone is write This site is unreachble Localhost server refused connection. can you help me?

Util to convert between device Pixel and absolute Pixels

Server config

Config

• minDevices
• maxDevices
• allowConnectAfterStart

Add travis ci

Polish particles demo

Current demo has performance problems when adding a lot of particles:

• Instead of hundreds of particles add a single blob when the user presses the screen.
• blobs are interactive, user can drag blobs around
• if user presses down longer a bigger, slower blob is created
• if user drags a blob and releases it, the blob will be thrown in the dragged direction
• background color should change based on which cluster the clients is in
• create no blob on swipe (add timeout where blob creation is canceled if user moves touch)

It could look something like this

Improve swip client

• add fullscreen support
• better styling of device size input
• animation feedback for swipes
• handle orientation change

Elaborate the use cases

I'm interested in the idea behind this project and its use cases. These information are missing in the documentation. An example answer could be to whom this project aims.