Samsung Galaxy Watch: Controlling WebXR 3D Objects In Real-Time
Tags: mixedreality, javascript, html, showdev
Published: 2021-06-21 02:58:26

## 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
- AR/VR capable broswer
- [Socket.io](https://socket.io)
- [Node.JS](https://nodejs.org/en/)
- [A-Frame](https://aframe.io/)

Okay, let's jump in!

## Setting up A-Frame
![a-frame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oup3o9yfm9diant7r4fg.png)
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**.

```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>

```
<br />

> You can also visit the [A-Frame](https://aframe.io/) 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](https://immersive-web.github.io/webxr-samples)" web page.

![webxr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moup1wsuhox3u9t1zz4a.png)
<br />

## Accesing Wearable Device Sensors
![tizen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apivu4s380rcgbvgu8p2.png)
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:
```JavaScript
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);
```

You can view a complete list of available device APIs for the Samsung Galaxy Watch [here](https://docs.tizen.org/application/web/api/latest/device_api/wearable/index.html).
<br />
## 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.

```JavaScript
// 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);
});
```
<br />
<br />
## Live Demo

You can watch a demo of these technologies working together on [youtube](https://youtu.be/5fEjIux1_wg?t=2173).

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tqft6gh9wgjyjqymd4s.png)


Thank you!