- Open the above page on your laptop/desktop(any large screen) and then click CREATE. A Canvas* instance is created.
- 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.
- 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 email@example.com
Although its not perfect we can go from here....
->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
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. Concept
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 Basic outline:
Node.js The Technology
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/
- 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