This document outlines the functions, technical levels, and means for an office stretching application. It has three main functions: 1) displaying guidance motions on a PC monitor, 2) notifying the user's motion accuracy with a smart device, and 3) displaying the user's current motion on a PC monitor. It describes the technical levels for each function and means for sensor data collection from Android devices, pairing smart devices with PCs, creating an HTTP server, updating web pages in real-time, and performing 2D and 3D rendering. The overall goal is to create a system that guides users through stretches and exercises on a PC monitor using motion data captured from a connected smart device.

1. OFFICE STRETCHING
[FUNCTIONS, MEANS, TECHNICAL LEVELS]
CAPSTONE STUDY 1 / 9TH WEEK PRESENTATION
20200320 / 21000305Sinyeol An Ji Eun Park

2. FUNCTIONS
1. To Display Guidance Motion with PC Monitor
2. To Notify Accuracy of Motion of User with Smart Device
3. To Display User's Current Motion with PC Monitor

3. FUNCTION #1
1. To Display Guidance Motion with PC Monitor
2. To Notify Accuracy of Motion of User with Smart Device
3. To Display User's Current Motion with PC Monitor

4. TECHNICAL LEVEL #1
TO DISPLAY GUIDANCE MOTION WITH PC MONITOR
How is the technical level of guidance motion defined?
What is the method to display guidance motion?
At first, we start with just some pictures.
Then we will upgrade it with 2D rendered animation.
Finally it will be developed 3D rendered animation.
Is the guidance motion appropriate?
We will research some books
and interview some experts of exercises in order to get
appropriate guidance.

5. FUNCTION #2
1. To Display Guidance Motion with PC Monitor
2. To Notify Accuracy of Motion of User with Smart Device
3. To Display User's Current Motion with PC Monitor

6. TECHNICAL LEVEL #2
TO NOTIFY ACCURACY OF MOTION OF USER WITH SMART DEVICE
What is range of motion accuracy?
Setting range after measuring difference between
guidance and user's motion.
What is measure of accuracy?
What is manner applied to measure accuracy?
Measuring user's motion with several steps,
which is divided from the range.

7. FUNCTION #3
1. To Display Guidance Motion with PC Monitor
2. To Notify Accuracy of Motion of User with Smart Device
3. To Display User's Current Motion with PC Monitor

8. TECHNICAL LEVEL #3
TO DISPLAY USER'S CURRENT MOTION WITH PC MONITOR
How accuratly is user's motion displayed?
In real-time, the system shows user
values from sensors of smart device.
What is the method to display user's motion?
Similar to the guidance motion,
at first, just values as text are displayed.
Then it will be upgraded with 2D rendered animation.
Finally it will be developed 3D rendered animation.

9. MEAN #1
[SENSORING - ANDROID API]

10. [SENSORING - ANDROID API] #1
SENSOR TYPES
TYPE_ACCELOROMETER
TYPE_GRAVITY
TYPE_GYROSCOPE
TYPE_LINEAR_ACCELORATION
TYPE_MAGNETIC_FIELD
TYPE_ORIENTATION
TYPE_ROTATION_VECTOR

11. [SENSORING - ANDROID API] #2-1
EXAMPLE:GRAVITY SENSOR
1. Creating SensorManager
2. Creating Sensor Instance
mSM = (SensorManager)getSystemService(Context.SENSOR_SERVICE);
mSensor = mSM.getDefaultSensor(Sensor.TYPE_GRAVITY);

12. [SENSORING - ANDROID API] #2-2
EXAMPLE:GRAVITY SENSOR
3. Defining SenserEventListener
public SensorEventListener mSL = new SensorEventListener(){
@Override
public void onSensorChanged(SensorEvent e){
// do something with SensorEvent
}
@Override
public void onAccuracyChanged(Sensor s, int a){
// do something with Sensor and accuracy
}
}

13. [SENSORING - ANDROID API] #2-3
EXAMPLE:GRAVITY SENSOR
4. Registering the Listener
5. Releasing the Listener
referenced from
mSM.registerListener(mSL, mSensor,
SensorManager.SENSOR_DELAY_NORMAL);
@Override
protected void onPause(){
super.onPause();
mSM.unregisterListener(mSL);
}
makerj.tistory.com/114

14. [SENSORING - ANDROID API] #3
PROBLEM!
Supported sensor is depends on each device.
It means some device doesn't support some sensors.
To research those information about
supporting sensor of specific device
is necessary.

15. MEAN #2
[PARING SMART DEVICE WITH PC]

16. [PARING SMART DEVICE WITH PC] #1
OPTIONAL CHOICES
1. Serial Port(USB)
2. Bluetooth
3. Local Area Network(LAN)
4. Server-Client(TCP)
5. Server-Client(HTTP)

17. [PARING SMART DEVICE WITH PC] #2-1
SERIAL PORT
Connection through a USB cable
limits user's motion
because of length of the cable.

18. [PARING SMART DEVICE WITH PC] #2-2
BLUETOOTH / LAN
It needs PC's application.
This demends extra cost.

19. [PARING SMART DEVICE WITH PC] #2-3
SERVER-CLIENT(TCP)
It needs specific port for
each connection.

20. [PARING SMART DEVICE WITH PC] #2-4
SERVER-CLIENT(HTTP)
It's wireless!
It can provide service with URL.
Also the application is easy to upgrade.

21. MEAN #3
[HTTP SERVER]

22. [HTTP SERVER] #1
NODE.JS
Server Programming Environment
implemented with JavaScript
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

23. [HTTP SERVER] #2
WHY NODE.JS?
It's JavaScript!
One Language for One Application
There is lots of libraries.
Such as Socket.io, WebGL, etc.

24. MEAN #4
[REAL-TIME UPDATE WEB PAGE]

25. [REAL-TIME UPDATE WEB PAGE] #1
SOCKET.IO?
Socket Programming?
HTTP is not Socket.
There is movement on WebSocket.
But it is not a standard.
Socket.io provide socket like function.

26. [REAL-TIME UPDATE WEB PAGE] #2
SOCKET.IO
Example: Server-side
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});

27. MEAN #5
[REAL-TIME 2D RENDERING]

28. [REAL-TIME 2D RENDERING] #1
PROCESSING.JS
void setup(){
size(360, 360);
}
void draw(){
background(255);
ellipse(mouseX, mouseY, 50, 50);
}

29. [REAL-TIME 2D RENDERING] #2
PAPER.JS
var path = new Path();
path.strokeColor = 'black';
var start = new Point(100, 100);
path.moveTo(start);
path.lineTo(start + [100, -50]);

30. MEAN #6
[REAL-TIME 3D RENDERING]

31. [REAL-TIME 3D RENDERING]
WEBGL
WebGL is transplantation of OpenGL.
Moden web browsers support WebGL.
It will be included in HTML5.

32. [REAL-TIME 3D RENDERING]
THREE.JS
Three.js is front-end library using WebGl.
Code becomes simpler and easier with it..
It will be included in HTML5.

33. THE END
THANK YOU!