Skip to content
A Node.js and Socket.IO implementation that lets you to use your smart phone(gyroscope) to rotate Jmol-Objects (Molecules) in 3D on a larger screen
JavaScript
Branch: master
Clone or download
Latest commit dc3bdcd Jul 4, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
jmolViewer new interface Feb 16, 2014
node_modules final init Dec 23, 2013
public corrected initial loading Jul 4, 2014
Procfile new changes heroku Feb 23, 2014
README.md Update README.md Mar 1, 2014
gyro_image.jpg initial commit Dec 23, 2013
gyromol.jpg image added Mar 3, 2014
id_rsa image added Mar 3, 2014
id_rsa.pub image added Mar 3, 2014
index.js port changes and other stuff Feb 23, 2014
jmolGyroHandler.js initial commit Dec 23, 2013
package.json image added Mar 3, 2014

README.md

GyroMol

http://gyromol.herokuapp.com/

  1. Open the above page on your laptop/desktop(any large screen) and then click CREATE. A Canvas* instance is created.
  2. Open the same site in you mobile web browser(you can use the QR code on the screen to get there) and then click CONNECT.
  3. Enter the canvas ID from the above canvas in the input box in your mobile web page and then click CONNECT.

Your mobile is now connected to the jsmol object(molecule). Rotate your mobile phone and you can see the molecule also rotates with it :)

Please send your suggestions/feedback to mailcs76@gmail.com

Although its not perfect we can go from here.... Know issues..
->Lag between the mobile device rotation and the molecule's rotation.

====================================================================================================================== A Node.js and Socket.IO implementation that lets you to use your smart phone(gyroscope) to rotate Jmol-Objects ( Molecules) in 3D on a larger screen

Concept

To be able handle(3D rotation, Zoom etc) molecules on a desktop ( laptop / iPad etc. something with a bigger screen) that multiple users can see using a physically disconnected device (Smart Phone). Once a screen is initialized, an user connects to a specific URL in their phone browser that links them to that Jmol canvas instance.

GyroMol

Basic outline:

Register new connections to the server and decide if it is a Canvas or User gyro instance: Create a new connection pair(room) Or add/pair the connection to an existing canvas Constantly poll the mobile device for orientation data Use the fed data to update the Jmol objects orientation

The Technology

Node.js
Node.js is what makes this project possible. Built on Google's V8 Javascript Engine, Node.js is a server environment written in -wait for it- JavaScript. http://nodejs.org/

Socket.io
A Node.js module, Socket.io adds multiple levels of socket support, accommodating nearly every browser. http://socket.io/

Mobile Phone Orientation
Nearly all smart phones on the market have some sort of accelerometer or gyroscope in them. The phone parses this information and makes it accessible in the browser. The HTML5 DeviceOrienation and DeviceMotion events allow us to take advantage of this. http://www.html5rocks.com/en/tutorials/device/orientation/

JSmol
JSmol is the extension of the Java-based molecular visualization applet Jmol (jmol.sourceforge.net) onto JavaScript-only platforms (HTML5 with or without WebGL). It can be used in conjunction with the Jmol applet to provide an alternative to the Jmol applet when the platform does not support Java (iPhone/iPad) or does not support applets (Android). Used in conjunction with the Jmol JavaScript Object (http://wiki.jmol.org/index.php/Jmol_Javascript_Object), JSmol seamlessly offers alternatives to Jmol on these non-Applet platforms. http://sourceforge.net/projects/jsmol/

To Install/Setup

  • Ensure Node.js is installed
  • Clone this repository - git clone https://github.com/CS76/Gyromol
  • Ensure the mobile device and desktop/larger screen are on a local network, or that the application server is accessable
  • by both devices
  • Start the application (node index.js)
  • Visit http://localhost:8080 on a PC, Tablet, SmartTV or other large screen device
  • Click CREATE. Then a Canvas ID is displayed on the screen
  • On a mobile device, visit http://your.ip.address:8080
  • Type in the Canvas ID(displayed on the larger screen) in the mobile input box and click Join/Pair-up.
  • Find the magic in your hands
You can’t perform that action at this time.