DEV Community

loading...
Cover image for Samsung Galaxy Watch: Controlling WebXR 3D Objects In Real-Time

Samsung Galaxy Watch: Controlling WebXR 3D Objects In Real-Time

Josue Bustos
Developer Relations, AWS Certified Solutions Architect, Full-Stack Dev
・2 min read

Introduction

In this conceptual playground, I demonstrate how you can control objects in 3D space using A-Frame WebXR, Node.js. Socket.io, and a Samsung Galaxy Watch.

Prerequisites

To implement the web techonloiges mentioned you need an intermediate to advance HTML, JavaScript practical knowledge. The list of web technologie are as follows:

Software

Okay, let's jump in!

Setting up A-Frame

a-frame
A-Frame is primarily HTML and JavaScript. So all you need to get started is a basic text editor.

Open your favorite text editor, create, edit, and then copy-paste the following code into index.html.

<!-- index.html -->
<html>
  <head>
    <!-- A-Frame Script -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
<body>
    <a-scene>
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

You can also visit the A-Frame website and explore other sample projects.

Not sure if your browser is capable of displaying WebXR content? Not to worry, visit this link to the "Does my browser support WebXR" web page.

webxr

Accesing Wearable Device Sensors

tizen
A Samsung Galaxy Watch can be either a wearable Web application, a Native or Hybrid derived application. My example is a Web application, basically a Web site stored on a wearable device.

To access sensor data, you implement a few lines of code. For example, the following sample JavaScript code below gives us access to Gyroscope sensor data:

var gyroscopeRotationVectorSensor = tizen.sensorservice.getDefaultSensor("GYROSCOPE_ROTATION_VECTOR");

function onGetSuccessCB(sensorData){
  console.log("Get the gyroscope rotation vector sensor data");
  console.log("x: " + sensorData.x);
}

function onerrorCB(error){
  console.log("Error occurred");
}

function onsuccessCB(){
  console.log("Sensor start");
  gyroscopeRotationVectorSensor.getGyroscopeRotationVectorSensorData(onGetSuccessCB, onerrorCB);
}

gyroscopeRotationVectorSensor.start(onsuccessCB);
Enter fullscreen mode Exit fullscreen mode

You can view a complete list of available device APIs for the Samsung Galaxy Watch here.

Moving 3D Objects In Real-Time

And finally, to remotely control objects in 3D space, you need to host and configure your Node.js server to allow socket.io to open a bidirectional real-time connection. You can use the following sample code to get started.

// Initiate a Socket,io connection for Node.js
const io = require('socket.io')(80);
const cfg = require('./config.json');
const tw = require('node-tweet-stream')(cfg);

tw.track('socket.io');
tw.track('javascript');
tw.on('tweet', (tweet) => {
  io.emit('tweet', tweet);
});
Enter fullscreen mode Exit fullscreen mode

Live Demo

You can watch a demo of these technologies working together on youtube.

demo

Thank you!

Discussion (0)