diff --git a/NiryoConnection.html b/NiryoConnection.html
index 23c3eee..e2dfae5 100644
--- a/NiryoConnection.html
+++ b/NiryoConnection.html
@@ -5,9 +5,22 @@
     <meta charset="utf-8" />
     <script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
     <script>
+        //url 설정
+        var niryo_url = 'ws://192.168.0.15:9090'
+
+        //android에 현재 url값 반환
+        function get_url(){
+            return niryo_url;
+        }
+
+        //android에서 url입력 받아 업데이트
+        function set_url(url){
+            niryo_url = 'ws://' + url;
+        }
+
         // ROS 정의
         var ros = new ROSLIB.Ros({
-            url: 'ws://192.168.0.33:9090'
+            url: niryo_url
         });
 
         var connected = 0;
@@ -550,6 +563,182 @@
             });
         }
 
+        //android에서 hsv값 담아 호출
+        function grabCapsule_w_param(capsule_data) {
+            if (connected == 0) {
+                document.getElementById("color").textContent = "Not connected"
+                return;
+            }
+            //android에서 전달받은 인자 tokenize
+            hsv = capsule_data.split(' ');
+            h = parseInt(hsv[0]);
+            s = parseInt(hsv[1]);
+            v = parseInt(hsv[2]);
+            hdif = parseInt(hsv[3]);
+            sdif = parseInt(hsv[4]);
+            vdif = parseInt(hsv[5]);
+            console.log(h + ', ' + s + ', ' + v + ', ' + hdif + ', ' + sdif + ', ' + vdif);
+
+            toolnum = 0;
+            current_tool_id.subscribe(function(message) {
+                toolnum = message.data;
+                console.log('tool id: ' + message.data);
+                current_tool_id.unsubscribe();
+            });
+            // 기본적으로 Gripper3을 사용하고 있다고 가정함
+            var toolrequest = new ROSLIB.ServiceRequest({
+                value: 13
+            });
+            select_tool_service.callService(toolrequest, function(result) {
+                console.log(result.message);
+            });
+            var MoveActionClient = new ROSLIB.ActionClient({
+                ros: ros,
+                serverName: '/niryo_one/commander/robot_action',
+                actionName: 'niryo_one_msgs/RobotMoveAction'
+            });
+
+            // color_detection 서비스를 이용해 원하는 색 범위 내에 있는 이미지 추출, x, y, yaw 반환
+            // x, y, yaw 값을 get_target_pose에 전달해 workspace 내에서 상대적인 위치 반환
+            // 이 위치로 이동
+            // grippper 조절, move joint 등 이용
+            var color_detection = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one_vision/color_detection',
+                serviceType: 'niryo_one_msgs/CapsuleColor'
+            });
+
+            console.log(h + ', ' + s + ', ' + v);
+            x = 0;
+            y = 0;
+            z = 0;
+            roll = 0;
+            pitch = 0;
+            yaw = 0;
+            var HSV = new ROSLIB.ServiceRequest({
+                h: h,
+                s: s,
+                v: v,
+                hdif: hdif,
+                sdif: sdif,
+                vdif: vdif
+            });
+
+            var get_target_pose = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/pose_converter/get_target_pose',
+                serviceType: 'niryo_one_msgs/GetTargetPose'
+            });
+            color_detection.callService(HSV, function(result) {
+                img = document.getElementById("contour");
+                img.src = "data:image/jpg;base64," + result.img.data;
+                x = result.obj_pose.x;
+                y = result.obj_pose.y;
+                yaw = result.obj_pose.yaw;
+                console.log(x + ', ' + y + ', ' + yaw);
+                var target_request = new ROSLIB.ServiceRequest({
+                    workspace: "workspace",
+                    grip: "auto",
+                    tool_id: 13,
+                    height_offset: 0.05,
+                    x_rel: x,
+                    y_rel: y,
+                    yaw_rel: yaw,
+                });
+                get_target_pose.callService(target_request, function(result) {
+                    var canvas = document.getElementById("canvas");
+                    var ctx = canvas.getContext("2d");
+                    ctx.drawImage(img, 0, 0);
+                    x = result.target_pose.position.x + 0.02;
+                    y = result.target_pose.position.y;
+                    z = result.target_pose.position.z;
+                    roll = result.target_pose.rpy.roll;
+                    pitch = result.target_pose.rpy.pitch;
+                    yaw = result.target_pose.rpy.yaw;
+                    console.log(x + ', ' + y + ', ' + z + ', ' + roll + ', ' + pitch + ', ' + yaw);
+                    if (Math.round(x * 1000) == 387 && Math.round(y * 1000) == 75) {
+                        console.log('Capsule not found or too dark.');
+                        return;
+                    }
+                    var goal1 = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 2,
+                                position: {
+                                    x: x,
+                                    y: y,
+                                    z: z
+                                },
+                                rpy: {
+                                    roll: roll,
+                                    pitch: pitch,
+                                    yaw: yaw
+                                }
+                            }
+                        }
+                    });
+                    var goal2 = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 2,
+                                position: {
+                                    x: x,
+                                    y: y,
+                                    z: z - 0.03
+                                },
+                                rpy: {
+                                    roll: roll,
+                                    pitch: pitch,
+                                    yaw: yaw
+                                }
+                            }
+                        }
+                    });
+                    var open = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 6,
+                                tool_cmd: {
+                                    tool_id: 13,
+                                    cmd_type: 1,
+                                    gripper_open_speed: 100
+                                }
+                            }
+                        }
+                    });
+                    var close = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 6,
+                                tool_cmd: {
+                                    tool_id: 13,
+                                    cmd_type: 2,
+                                    gripper_close_speed: 100
+                                }
+                            }
+                        }
+                    });
+                    goal1.on('result', function(result) {
+                        // console.log('Final result: ' + result.status);
+                        open.send();
+                        open.on('result', function() {
+                            goal2.send();
+                            goal2.on('result', function() {
+                                close.send();
+                                close.on('result', function() {
+                                    MoveZero();
+                                });
+                            });
+                        });
+                    });
+                    goal1.send();
+                });
+            });
+        }
 
         // 색 범위 추출용 전역 변수
         var firstx;
@@ -562,9 +751,19 @@
             img = document.getElementById("image");
             ctx.clearRect(0, 0, 640, 480);
             ctx.drawImage(img, 0, 0);
-            var x = event.layerX;
-            var y = event.layerY;
-            //console.log(x + ', ' + y);
+
+            //touchevent 추가
+            if(event.type == "touchstart"){
+                var rect = event.target.getBoundingClientRect();
+                var x = Math.round(event.targetTouches[0].pageX - rect.left);
+                var y = Math.round(event.targetTouches[0].pageY - rect.top);
+            }
+            else{
+                var x = event.offsetX;
+                var y = event.offsetY;
+            }
+            console.log(x + ', ' + y);
+
             firstx = x;
             firsty = y;
         }
@@ -572,14 +771,28 @@
         function secondpoint(event) {
             var canvas = document.getElementById("canvas");
             var ctx = canvas.getContext("2d");
+
+            //touchevent 추가
+            if(event.type == "touchend"){
+                var rect = event.target.getBoundingClientRect();
+                var x = Math.round(event.changedTouches[0].pageX - rect.left);
+                var y = Math.round(event.changedTouches[0].pageY - rect.top);
+            }
+            else{
+                var x = event.offsetX;
+                var y = event.offsetY;
+            }
+            console.log(x + ', ' + y);
+
             // 캔버스에 아무 이미지도 없으면 아무 동작도 하지 않음
             if (!ctx.getImageData(0, 0, canvas.width, canvas.height).data.some(channel => channel !== 0)) {
                 document.getElementById("color").textContent = "Take Picture First"
+                ctx.strokeRect(firstx, firsty, x - firstx, y - firsty);
+                //android의 capsule 색 저장 함수 호출
+                window.android.addCapsule("255 255 255 0 0 0" + '\0');
                 return;
             }
-            var x = event.layerX;
-            var y = event.layerY;
-            // console.log(x + ', ' + y);
+
             secondx = x;
             secondy = y;
             positiongrab = 0;
@@ -721,6 +934,9 @@
             }
 
             ctx.strokeRect(smallx, smally, largex - smallx, largey - smally);
+
+            //android의 capsule 색 저장 함수 호출
+            window.android.addCapsule(midH + ' '  + midS + ' ' + midV + ' ' + Hdif + ' ' + Sdif + ' ' + Vdif + '\0');
         }
 
         // RGB에서 HSV로 변환하는 함수
@@ -1430,7 +1646,7 @@ <h2>ROS Webserver connection to Niryo</h2>
         </fieldset>
     </fieldset>
     <fieldset style="border: 1px solid #FFFFFF">
-        <canvas id="canvas" style="float:left; border: 1px solid black;" crossorigin="anonymous" width="640" height="480" onmousedown="firstpoint(event)" onmouseup="secondpoint(event)"></canvas>
+        <canvas id="canvas" style="float:left; border: 1px solid black;" crossorigin="anonymous" width="640" height="480" onmousedown="firstpoint(event)" onmouseup="secondpoint(event)" ontouchstart="firstpoint(event)" ontouchend="secondpoint(event)"></canvas>
         <FORM id="wrapper" style="width:200px; float:left; text-align:center; border: 1 solid black">
             <div id="color">Drag to set HSV range</div>
             <div id="h" style='display:inline;'></div>
@@ -1448,7 +1664,7 @@ <h2>ROS Webserver connection to Niryo</h2>
             <INPUT type='BUTTON' style="WIDTH:100pt" value='Put Down Capsule' , onclick='PutDownCapsule()'>
             <INPUT type='BUTTON' style="WIDTH:100pt" value='Put In Capsule' , onclick='PutInCapsule()'>
             <INPUT type='BUTTON' style="WIDTH:100pt" value='Coffee Machine' , onclick='CoffeeMachine()'>
-            <INPUT type='BUTTON' style="WIDTH:100pt" value='Rest' , onclick='Rest()'
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Rest' , onclick='Rest()'>
 
         </FORM>
     </fieldset>
diff --git a/NiryoConnection_outdated.html b/NiryoConnection_outdated.html
new file mode 100644
index 0000000..23c3eee
--- /dev/null
+++ b/NiryoConnection_outdated.html
@@ -0,0 +1,1458 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
+    <script>
+        // ROS 정의
+        var ros = new ROSLIB.Ros({
+            url: 'ws://192.168.0.33:9090'
+        });
+
+        var connected = 0;
+        // ROS 접속 여부 출력
+        ros.on('connection', function() {
+            console.log('Connected to websocket server.');
+            connected = 1;            
+        });
+        ros.on('error', function(error) {
+            console.log('Error connecting to websocket server: ', error);
+        });
+        ros.on('close', function() {
+            console.log('Connection to websocket server closed.');
+            connected = 0;
+        });
+
+        // 이미지 토픽
+        var image_topic = new ROSLIB.Topic({
+            ros: ros,
+            name: '/niryo_one_vision/compressed_video_stream',
+            messageType: 'sensor_msgs/CompressedImage'
+        });
+        // 화면에 이미지 출력
+        image_topic.subscribe(function(message) {
+            // document.getElementById("image").src = "data:image/png;base64," + message.data;
+            document.getElementById("image").src = "data:image/jpg;base64," + message.data;
+        });
+
+        // Calibration Request (1: Auto, 2: Manual)
+        // Auto Calibration만 구현함
+        var request = new ROSLIB.ServiceRequest({
+            value: 1
+        });
+        // "Request Calibration" 버튼, 서비스 호출
+        function requestcali() {
+            // 서비스 정의
+            var request_new_calibration = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/request_new_calibration',
+                serviceType: 'niryo_one_msgs/SetInt'
+            });
+            // 서비스 호출
+            request_new_calibration.callService(request, function(result) {
+                console.log('Status: ' + result.status + ", " + result.message);
+            });
+        };
+        // "Calibrate" 버튼, 서비스 호출
+        function calibrate() {
+            var calibrate_motors = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/calibrate_motors',
+                serviceType: 'niryo_one_msgs/SetInt'
+            });
+            calibrate_motors.callService(request, function(result) {
+                console.log('Status: ' + result.status + ", " + result.message);
+            });
+        };
+
+        // "Set Learning Mode" 버튼, 서비스 호출
+        function learning() {
+            var activate_learning_mode = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/activate_learning_mode',
+                serviceType: 'niryo_one_msgs/SetInt'
+            });
+            activate_learning_mode.callService(request, function(result) {
+                console.log('Status: ' + result.status + ", " + result.message);
+            });
+        };
+
+        // Robot Move(Gripper, Joint, Pose)와 관련된 모든 기능에 관여하는 Action에 대해 Client 정의
+        // Niryo에는 Action Server가 작동 중인 상태
+        var MoveActionClient = new ROSLIB.ActionClient({
+            ros: ros,
+            serverName: '/niryo_one/commander/robot_action',
+            actionName: 'niryo_one_msgs/RobotMoveAction'
+        });
+
+        // "Move to Zero" 버튼
+        function MoveZero() {
+            if (connected == 0) return;
+            document.getElementById("joint1").value = 0;
+            document.getElementById("joint2").value = 0;
+            document.getElementById("joint3").value = 0;
+            document.getElementById("joint4").value = 0;
+            document.getElementById("joint5").value = 0;
+            document.getElementById("joint6").value = 0;
+            document.getElementById("x").value = 245;
+            document.getElementById("y").value = 0;
+            document.getElementById("z").value = 417;
+            document.getElementById("roll").value = 0;
+            document.getElementById("pitch").value = 0;
+            document.getElementById("yaw").value = 0;
+            MoveJoint();
+        };
+
+        // pose 토픽
+        var state = new ROSLIB.Topic({
+            ros: ros,
+            name: '/niryo_one/robot_state',
+            messageType: 'niryo_one_msgs/RobotState'
+        });
+
+        // pose 출력
+        state.subscribe(function(message) {
+            var xvalue = document.getElementById("xvalue");
+            var yvalue = document.getElementById("yvalue");
+            var zvalue = document.getElementById("zvalue");
+            var rollvalue = document.getElementById("rollvalue");
+            var pitchvalue = document.getElementById("pitchvalue");
+            var yawvalue = document.getElementById("yawvalue");
+            xvalue.innerHTML = Math.round(message.position.x * 1000);
+            yvalue.innerHTML = Math.round(message.position.y * 1000);
+            zvalue.innerHTML = Math.round(message.position.z * 1000);
+            rollvalue.innerHTML = Math.round(message.rpy.roll * 180 / Math.PI);
+            pitchvalue.innerHTML = Math.round(message.rpy.pitch * 180 / Math.PI);
+            yawvalue.innerHTML = Math.round(message.rpy.yaw * 180 / Math.PI);
+        });
+
+        // joints 토픽
+        var joints = new ROSLIB.Topic({
+            ros: ros,
+            name: '/joint_states',
+            messageType: 'sensor_msgs/JointState'
+        });
+
+        // joints 출력
+        joints.subscribe(function(message) {
+            var j1 = document.getElementById("j1");
+            var j2 = document.getElementById("j2");
+            var j3 = document.getElementById("j3");
+            var j4 = document.getElementById("j4");
+            var j5 = document.getElementById("j5");
+            var j6 = document.getElementById("j6");
+            j1.innerHTML = Math.round(message.position[0] * 180 / Math.PI);
+            j2.innerHTML = Math.round(message.position[1] * 180 / Math.PI);
+            j3.innerHTML = Math.round(message.position[2] * 180 / Math.PI);
+            j4.innerHTML = Math.round(message.position[3] * 180 / Math.PI);
+            j5.innerHTML = Math.round(message.position[4] * 180 / Math.PI);
+            j6.innerHTML = Math.round(message.position[5] * 180 / Math.PI);
+        });
+
+        // "Show State" 버튼
+        function showstate() {
+            // 한 번 state를 출력한 후 다시 unsubscribe하므로 위의 state 토픽을 이용하지 않고 새로운 토픽을 정의함
+            var statetopic = new ROSLIB.Topic({
+                ros: ros,
+                name: '/niryo_one/robot_state',
+                messageType: 'niryo_one_msgs/RobotState'
+            });
+            statetopic.subscribe(function(message) {
+                console.log(message.position.x + ", " + message.position.y + ", " + message.position.z);
+                statetopic.unsubscribe();
+            });
+        };
+
+        // "Show Joints" 버튼
+        function showjoints() {
+            var jointstopic = new ROSLIB.Topic({
+                ros: ros,
+                name: '/joint_states',
+                messageType: 'sensor_msgs/JointState'
+            });
+            jointstopic.subscribe(function(message) {
+                console.log(message.position[0] + ", " + message.position[1] + ", " + message.position[2] + ", " + message.position[3] + ", " + message.position[4] + ", " + message.position[5]);
+                jointstopic.unsubscribe();
+            });
+        };
+
+        // Gripper 관련 Action Goal을 설정할 때 전역 변수로 설정하지 않고 함수마다 새롭게 정의해주는데,
+        // 전역 변수로 설정 시 Action의 결과를 바탕으로 다음 동작을 지시할 때 함수가 서로 섞여 오작동하므로
+        // 필요할 때마다 함수 안에서 지역 변수로 설정하였음
+        // "Open Gripper" 버튼
+        function OpenGripper() {
+            var opengoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 1,
+                            gripper_open_speed: 100
+                        }
+                    }
+                }
+            });
+            opengoal.send();
+        }
+
+        // "Close Gripper" 버튼
+        function CloseGripper() {
+            var closegoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 2,
+                            gripper_close_speed: 100
+                        }
+                    }
+                }
+            });
+            closegoal.send();
+        }
+
+        // "Move Joint" 버튼
+        function MoveJoint() {
+            var joint1 = document.getElementById("joint1").value * (Math.PI / 180);
+            var joint2 = document.getElementById("joint2").value * (Math.PI / 180);
+            var joint3 = document.getElementById("joint3").value * (Math.PI / 180);
+            var joint4 = document.getElementById("joint4").value * (Math.PI / 180);
+            var joint5 = document.getElementById("joint5").value * (Math.PI / 180);
+            var joint6 = document.getElementById("joint6").value * (Math.PI / 180);
+            var goal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [joint1, joint2, joint3, joint4, joint5, joint6]
+                    }
+                }
+            });
+            goal.send();
+        };
+
+        // Move Pose 버튼
+        function MovePose() {
+            var x = document.getElementById("x").value / 1000.0;
+            var y = document.getElementById("y").value / 1000.0;
+            var z = document.getElementById("z").value / 1000.0;
+            var roll = document.getElementById("roll").value * (Math.PI / 180);
+            var pitch = document.getElementById("pitch").value * (Math.PI / 180);
+            var yaw = document.getElementById("yaw").value * (Math.PI / 180);
+            var goal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: x,
+                            y: y,
+                            z: z
+                        },
+                        rpy: {
+                            roll: roll,
+                            pitch: pitch,
+                            yaw: yaw
+                        }
+                    }
+                }
+            });
+            goal.send();
+        }
+
+        // html에서 수치를 입력받아 작동하는 함수
+        // "Set Velocity Factor" 버튼
+        function SetVFactor() {
+            var set_max_velocity_scaling_factor = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/commander/set_max_velocity_scaling_factor',
+                serviceType: 'niryo_one_msgs/SetInt'
+            });
+            var factor = document.getElementById('factor').value;
+            factor *= 1;
+            var VFactor = new ROSLIB.ServiceRequest({
+                value: factor
+            });
+            set_max_velocity_scaling_factor.callService(VFactor, function(result) {
+                console.log('Status: ' + result.status + ", Scaling Factor set to " + factor);
+            });
+        }
+
+        // argument를 받아서 사용하는 set velocity factor 함수, Put In Capsule에서 속도 조절용으로 사용됨
+        function SetVFactorArgument(factor) {
+            var set_max_velocity_scaling_factor = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/commander/set_max_velocity_scaling_factor',
+                serviceType: 'niryo_one_msgs/SetInt'
+            });
+            var VFactor = new ROSLIB.ServiceRequest({
+                value: factor
+            });
+            set_max_velocity_scaling_factor.callService(VFactor, function(result) {
+                console.log('Status: ' + result.status + ", Scaling Factor set to " + factor);
+            });
+        }
+
+        // select tool 서비스
+        var select_tool_service = new ROSLIB.Service({
+            ros: ros,
+            name: '/niryo_one/change_tool',
+            serviceType: 'niryo_one_msgs/SetInt'
+        });
+
+        // "Select Tool" 버튼
+        function SelectTool() {
+            tool = document.getElementById('tool');
+            toolnum = tool.options[tool.selectedIndex].value;
+            toolnum *= 1;
+            var toolrequest = new ROSLIB.ServiceRequest({
+                value: toolnum
+            });
+            select_tool_service.callService(toolrequest, function(result) {
+                console.log(result.message);
+            });
+        }
+
+        // 현재 사용중인 tool id에 대한 토픽
+        var current_tool_id = new ROSLIB.Topic({
+            ros: ros,
+            name: '/niryo_one/current_tool_id',
+            messageType: 'std_msgs/Int32'
+        });
+
+
+        // 색 추출 관련 함수
+        // "Observation Pose" 버튼
+        function ObservationPose() {
+            if (connected == 0) return;
+            document.getElementById("joint1").value = 0;
+            document.getElementById("joint2").value = 0;
+            document.getElementById("joint3").value = 0;
+            document.getElementById("joint4").value = 0;
+            document.getElementById("joint5").value = -90;
+            document.getElementById("joint6").value = 0;
+            document.getElementById("x").value = 217;
+            document.getElementById("y").value = 0;
+            document.getElementById("z").value = 399;
+            document.getElementById("roll").value = -5;
+            document.getElementById("pitch").value = 89;
+            document.getElementById("yaw").value = -4;
+            var goal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [0, 0, 0, 0, -90 * (Math.PI / 180), 0]
+                    }
+                }
+            });
+            // 이동 후 takePicture() 함수 호출
+            goal.send();
+            goal.on('result', function() {
+                takePicture();
+            });
+        };
+
+        // "Take Picture" 버튼
+        function takePicture() {
+            img = document.getElementById("image");
+            var canvas = document.getElementById("canvas");
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0);
+        }
+
+        // "Grab Capsule" 버튼
+        function grabCapsule() {
+            if (connected == 0) {
+                document.getElementById("color").textContent = "Not connected"
+                return;
+            }
+            toolnum = 0;
+            current_tool_id.subscribe(function(message) {
+                toolnum = message.data;
+                console.log('tool id: ' + message.data);
+                current_tool_id.unsubscribe();
+            });
+            // 기본적으로 Gripper3을 사용하고 있다고 가정함
+            var toolrequest = new ROSLIB.ServiceRequest({
+                value: 13
+            });
+            select_tool_service.callService(toolrequest, function(result) {
+                console.log(result.message);
+            });
+            var MoveActionClient = new ROSLIB.ActionClient({
+                ros: ros,
+                serverName: '/niryo_one/commander/robot_action',
+                actionName: 'niryo_one_msgs/RobotMoveAction'
+            });
+           
+            // color_detection 서비스를 이용해 원하는 색 범위 내에 있는 이미지 추출, x, y, yaw 반환
+            // x, y, yaw 값을 get_target_pose에 전달해 workspace 내에서 상대적인 위치 반환
+            // 이 위치로 이동
+            // grippper 조절, move joint 등 이용
+            var color_detection = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one_vision/color_detection',
+                serviceType: 'niryo_one_msgs/CapsuleColor'
+            });
+
+            h = document.getElementById("h").textContent;
+            s = document.getElementById("s").textContent;
+            v = document.getElementById("v").textContent;
+            if (h == "") {
+                 document.getElementById("color").textContent = "Choose Color First"
+                 return;
+            }
+            h = parseInt(h);
+            s = parseInt(s);
+            v = parseInt(v);
+
+            hdif = document.getElementById("hdif").value;
+            sdif = document.getElementById("sdif").value;
+            vdif = document.getElementById("vdif").value;
+            hdif *= 1;
+            sdif *= 1;
+            vdif *= 1;
+            console.log(h + ', ' + s + ', ' + v);
+            x = 0;
+            y = 0;
+            z = 0;
+            roll = 0;
+            pitch = 0;
+            yaw = 0;
+            var HSV = new ROSLIB.ServiceRequest({
+                h: h,
+                s: s,
+                v: v,
+                hdif: hdif,
+                sdif: sdif,
+                vdif: vdif
+            });
+
+            var get_target_pose = new ROSLIB.Service({
+                ros: ros,
+                name: '/niryo_one/pose_converter/get_target_pose',
+                serviceType: 'niryo_one_msgs/GetTargetPose'
+            });
+            color_detection.callService(HSV, function(result) {
+                img = document.getElementById("contour");
+                img.src = "data:image/jpg;base64," + result.img.data;
+                x = result.obj_pose.x;
+                y = result.obj_pose.y;
+                yaw = result.obj_pose.yaw;
+                console.log(x + ', ' + y + ', ' + yaw);
+                var target_request = new ROSLIB.ServiceRequest({
+                    workspace: "workspace",
+                    grip: "auto",
+                    tool_id: 13,
+                    height_offset: 0.05,
+                    x_rel: x,
+                    y_rel: y,
+                    yaw_rel: yaw,
+                });
+                get_target_pose.callService(target_request, function(result) {
+                    var canvas = document.getElementById("canvas");
+                    var ctx = canvas.getContext("2d");
+                    ctx.drawImage(img, 0, 0);
+                    x = result.target_pose.position.x + 0.02;
+                    y = result.target_pose.position.y;
+                    z = result.target_pose.position.z;
+                    roll = result.target_pose.rpy.roll;
+                    pitch = result.target_pose.rpy.pitch;
+                    yaw = result.target_pose.rpy.yaw;
+                    console.log(x + ', ' + y + ', ' + z + ', ' + roll + ', ' + pitch + ', ' + yaw);
+                    if (Math.round(x * 1000) == 387 && Math.round(y * 1000) == 75) {
+                        console.log('Capsule not found or too dark.');
+                        return;
+                    }
+                    var goal1 = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 2,
+                                position: {
+                                    x: x,
+                                    y: y,
+                                    z: z
+                                },
+                                rpy: {
+                                    roll: roll,
+                                    pitch: pitch,
+                                    yaw: yaw
+                                }
+                            }
+                        }
+                    });
+                    var goal2 = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 2,
+                                position: {
+                                    x: x,
+                                    y: y,
+                                    z: z - 0.03
+                                },
+                                rpy: {
+                                    roll: roll,
+                                    pitch: pitch,
+                                    yaw: yaw
+                                }
+                            }
+                        }
+                    });
+                    var open = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 6,
+                                tool_cmd: {
+                                    tool_id: 13,
+                                    cmd_type: 1,
+                                    gripper_open_speed: 100
+                                }
+                            }
+                        }
+                    });
+                    var close = new ROSLIB.Goal({
+                        actionClient: MoveActionClient,
+                        goalMessage: {
+                            cmd: {
+                                cmd_type: 6,
+                                tool_cmd: {
+                                    tool_id: 13,
+                                    cmd_type: 2,
+                                    gripper_close_speed: 100
+                                }
+                            }
+                        }
+                    });
+                    goal1.on('result', function(result) {
+                        // console.log('Final result: ' + result.status);
+                        open.send();
+                        open.on('result', function() {
+                            goal2.send();
+                            goal2.on('result', function() {
+                                close.send();
+                                close.on('result', function() {
+                                    MoveZero();
+                                });
+                            });
+                        });
+                    });
+                    goal1.send();
+                });
+            });
+        }
+
+
+        // 색 범위 추출용 전역 변수
+        var firstx;
+        var firsty;
+        var positiongrab = 0;
+        // canvas mousedown 시 x, y 좌표 저장
+        function firstpoint(event) {
+            var canvas = document.getElementById("canvas");
+            var ctx = canvas.getContext("2d");
+            img = document.getElementById("image");
+            ctx.clearRect(0, 0, 640, 480);
+            ctx.drawImage(img, 0, 0);
+            var x = event.layerX;
+            var y = event.layerY;
+            //console.log(x + ', ' + y);
+            firstx = x;
+            firsty = y;
+        }
+        // canvas mouseup 시 x, y 좌표와 firstx, firsty를 바탕으로 색 범위 계산, zoom 캔버스에 출력
+        function secondpoint(event) {
+            var canvas = document.getElementById("canvas");
+            var ctx = canvas.getContext("2d");
+            // 캔버스에 아무 이미지도 없으면 아무 동작도 하지 않음
+            if (!ctx.getImageData(0, 0, canvas.width, canvas.height).data.some(channel => channel !== 0)) {
+                document.getElementById("color").textContent = "Take Picture First"
+                return;
+            }
+            var x = event.layerX;
+            var y = event.layerY;
+            // console.log(x + ', ' + y);
+            secondx = x;
+            secondy = y;
+            positiongrab = 0;
+            var minH = 360;
+            var maxH = 0;
+            var minS = 255;
+            var maxS = 0;
+            var minV = 255;
+            var maxV = 0;
+            var numpix = 0;
+            if (firstx <= secondx) {
+                smallx = firstx;
+                largex = secondx;
+            } else {
+                smallx = secondx;
+                largex = firstx;
+            }
+            if (firsty <= secondy) {
+                smally = firsty;
+                largey = secondy;
+            } else {
+                smally = secondy;
+                largey = firsty;
+            }
+            for (i = smallx; i <= largex; i++) {
+                for (j = smally; j <= largey; j++) {
+                    var pixel = ctx.getImageData(i, j, 1, 1);
+                    var data = pixel.data;
+                    var R = data[0];
+                    var G = data[1];
+                    var B = data[2];
+                    var HSV = rgb2hsv(R, G, B);
+                    var H = HSV[0];
+                    var S = HSV[1];
+                    var V = HSV[2];
+                    if (minH > H) minH = H;
+                    if (maxH < H) maxH = H;
+                    if (minS > S) minS = S;
+                    if (maxS < S) maxS = S;
+                    if (minV > V) minV = V;
+                    if (maxV < V) maxV = V;
+                    numpix++;
+                }
+            }
+            if (maxH - minH > 180) {
+                minH = 540;
+                maxH = 180;
+                for (i = smallx; i <= largex; i++) {
+                    for (j = smally; j <= largey; j++) {
+                        var pixel = ctx.getImageData(i, j, 1, 1);
+                        var data = pixel.data;
+                        var R = data[0];
+                        var G = data[1];
+                        var B = data[2];
+                        var HSV = rgb2hsv(R, G, B);
+                        var H = HSV[0];
+                        if (H >= 0 && H < 180) H += 360;
+                        if (minH > H) minH = H;
+                        if (maxH < H) maxH = H;
+                    }
+                    midH = Math.round((minH + maxH) / 2.0);
+                    Hdif = Math.round(maxH - midH);
+                    if (midH >= 360) midH -= 360;
+                    if (maxH >= 360) maxH -= 360;
+                    if (minH >= 360) minH -= 360;
+                }
+            } else {
+                midH = Math.round((minH + maxH) / 2.0);
+                Hdif = Math.round(maxH - midH);
+            }
+            midS = Math.round((minS + maxS) / 2.0);
+            Sdif = Math.max(Math.round(maxS - midS), Math.round(midS - minS));
+            midV = Math.round((minV + maxV) / 2.0);
+            Vdif = Math.max(Math.round(maxV - midV), Math.round(midV - minV));
+            // console.log('(' + midH + ', ' + midS + ', ' + midV + '), ' + Hdif + ', ' + Sdif + ', ' + Vdif);
+
+            h = document.getElementById("h");
+            s = document.getElementById("s");
+            v = document.getElementById("v");
+            hdif = document.getElementById("hdif");
+            sdif = document.getElementById("sdif");
+            vdif = document.getElementById("vdif");
+            h.textContent = midH;
+            s.textContent = midS;
+            v.textContent = midV;
+            hdif.value = Hdif;
+            sdif.value = Sdif;
+            vdif.value = Vdif;
+            RGB = hsv2rgb(midH, midS, midV);
+            R = Math.round(RGB[0]);
+            G = Math.round(RGB[1]);
+            B = Math.round(RGB[2]);
+
+            minrgb = hsv2rgb(minH, minS, minV);
+            maxrgb = hsv2rgb(maxH, maxS, maxV);
+            min_R = minrgb[0];
+            min_G = minrgb[1];
+            min_B = minrgb[2];
+            max_R = maxrgb[0];
+            max_G = maxrgb[1];
+            max_B = maxrgb[2];
+            minhsv = document.getElementById("minhsv");
+            maxhsv = document.getElementById("maxhsv");
+            var min_rgba = 'RGBA(' + min_R + ', ' + min_G +
+                ', ' + min_B + ', ' + 1 + ')';
+            var max_rgba = 'RGBA(' + max_R + ', ' + max_G +
+                ', ' + max_B + ', ' + 1 + ')';
+            minhsv.style.background = min_rgba;
+            maxhsv.style.background = max_rgba;
+
+            var zoomctx = document.getElementById('zoom').getContext('2d');
+            midx = (firstx + secondx) / 2;
+            midy = (firsty + secondy) / 2;
+            var SPX = 20;
+            var DPX = 200;
+            zoomctx.drawImage(canvas,
+                Math.min(Math.max(0, midx - SPX / 2), img.width - SPX),
+                Math.min(Math.max(0, midy - SPX / 2), img.height - SPX),
+                SPX, SPX,
+                0, 0,
+                DPX, DPX);
+            var rgba = 'RGBA(' + R + ', ' + G +
+                ', ' + B + ', ' + (255 / 255) + ')';
+            wrapper.style.background = rgba;
+            color = document.getElementById("color");
+            color.textContent = rgba;
+            if (R + G + B < 480) {
+                color.style.color = "white";
+                h.style.color = "white";
+                s.style.color = "white";
+                v.style.color = "white";
+                ctx.strokeStyle = "white";
+            } else {
+                color.style.color = "black";
+                h.style.color = "black";
+                s.style.color = "black";
+                v.style.color = "black";
+                ctx.strokeStyle = "black";
+            }
+
+            ctx.strokeRect(smallx, smally, largex - smallx, largey - smally);
+        }
+
+        // RGB에서 HSV로 변환하는 함수
+        function rgb2hsv(r, g, b) {
+            var R = r;
+            var G = g;
+            var B = b;
+            var H = 0;
+            var S = 0;
+            var V = Math.max(R, G, B);
+            if (V != 0) {
+                S = (V - Math.min(R, G, B)) / V * 255;
+            } else {
+                S = 0;
+            }
+            if (V == R) {
+                H = (60 * (G - B)) / (V - Math.min(R, G, B));
+            } else if (V == G) {
+                H = 120 + (60 * (B - R)) / (V - Math.min(R, G, B));
+            } else {
+                H = 240 + (60 * (R - G)) / (V - Math.min(R, G, B));
+            }
+            if (H < 0) {
+                H = H + 360;
+            }
+            H = Math.round(H);
+            S = Math.round(S);
+            V = Math.round(V);
+            return [H, S, V];
+        }
+
+        // HSV에서 RGB로 변환하는 함수
+        function hsv2rgb(h, s, v) {
+            H = h;
+            S = s / 255.0;
+            V = v / 255.0;
+            C = V * S;
+            X = C * (1 - Math.abs((H / 60.0) % 2 - 1));
+            m = V - C;
+            if (H >= 0 && H < 60) {
+                R_ = C;
+                G_ = X;
+                B_ = 0;
+            } else if (H >= 60 && H < 120) {
+                R_ = X;
+                G_ = C;
+                B_ = 0;
+            } else if (H >= 120 && H < 180) {
+                R_ = 0;
+                G_ = C;
+                B_ = X;
+            } else if (H >= 180 && H < 240) {
+                R_ = 0;
+                G_ = X;
+                B_ = C;
+            } else if (H >= 240 && H < 300) {
+                R_ = X;
+                G_ = 0;
+                B_ = C;
+            } else {
+                R_ = C;
+                G_ = 0;
+                B_ = X;
+            }
+            R = (R_ + m) * 255.0;
+            G = (G_ + m) * 255.0;
+            B = (B_ + m) * 255.0;
+            return [R, G, B];
+        }
+
+        // "Put Down Capsule" 버튼
+        // 단순 절대좌표 이용 이동
+        function PutDownCapsule() {
+            if (connected == 0) return;
+            document.getElementById("joint1").value = 0;
+            document.getElementById("joint2").value = -36;
+            document.getElementById("joint3").value = -18;
+            document.getElementById("joint4").value = 0;
+            document.getElementById("joint5").value = -32;
+            document.getElementById("joint6").value = 0;
+            document.getElementById("x").value = 274;
+            document.getElementById("y").value = -5;
+            document.getElementById("z").value = 168;
+            document.getElementById("roll").value = 11;
+            document.getElementById("pitch").value = 86;
+            document.getElementById("yaw").value = 10;
+            var putdowngoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [0, -0.627, -0.313, 0, -0.564, 0]
+                    }
+                }
+            });
+            var opengoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 1,
+                            gripper_open_speed: 100
+                        }
+                    }
+                }
+            });
+            var closegoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 2,
+                            gripper_close_speed: 500
+                        }
+                    }
+                }
+            });
+            var restjoint = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [0, 0.62, -1.359, 0, 0, 0]
+                    }
+                }
+            });
+            putdowngoal.send();
+            putdowngoal.on('result', function() {
+                opengoal.send();
+                opengoal.on('result', function() {
+                    restjoint.send();
+                    restjoint.on('result', function() {
+                        closegoal.send();
+                        closegoal.on('result', function() {
+                            learning();
+                        });
+                    });
+                });
+            });
+        };
+
+        // "Put In Capsule" 버튼
+        // 절대 좌표 이용, 속도 조절 추가
+        function PutInCapsule() {
+            if (connected == 0) return;
+            SetVFactorArgument(30);
+            var machinegoal1 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.25,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 0,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal2 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.27,
+                            y: -0.17,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal3 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.34,
+                            y: -0.17,
+                            z: 0.376
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal4 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.25,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 0,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var opengoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 1,
+                            gripper_open_speed: 100
+                        }
+                    }
+                }
+            });
+            var closegoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 2,
+                            gripper_close_speed: 300
+                        }
+                    }
+                }
+            });
+            machinegoal1.send();
+            machinegoal1.on('result', function() {
+                machinegoal2.send();
+                SetVFactorArgument(10);
+                machinegoal2.on('result', function() {
+
+                    opengoal.send();
+                    opengoal.on('result', function() {
+                        SetVFactorArgument(100);
+                        closegoal.send();
+                        closegoal.on('result', function() {
+                            machinegoal4.send();
+
+                        });
+                    });
+                });
+            });
+        }
+
+        // "Put In Capsule" 버튼
+        // 절대 좌표 이용, 속도 조절 추가
+        function PutInCapsule2() {
+            if (connected == 0) return;
+            SetVFactorArgument(30);
+            var machinegoal1 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.3,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 0,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal2 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.34,
+                            y: -0.17,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal4 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.3,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 0,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var opengoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 1,
+                            gripper_open_speed: 100
+                        }
+                    }
+                }
+            });
+            var closegoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 2,
+                            gripper_close_speed: 300
+                        }
+                    }
+                }
+            });
+            machinegoal1.send();
+            machinegoal1.on('result', function() {
+                machinegoal2.send();
+                SetVFactorArgument(10);
+                machinegoal2.on('result', function() {
+
+                    opengoal.send();
+                    opengoal.on('result', function() {
+                        SetVFactorArgument(100);
+                        closegoal.send();
+                        closegoal.on('result', function() {
+                            machinegoal4.send();
+
+                        });
+                    });
+                });
+            });
+        }
+
+        function CoffeeMachine() {
+            if (connected == 0) return;
+            var machinegoal1 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.15,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 0,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal2 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.15,
+                            y: -0.16,
+                            z: 0.417
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.5,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal3 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.34,
+                            y: -0.16,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal4 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.34,
+                            y: -0.16,
+                            z: 0.3
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal5 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.34,
+                            y: -0.16,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.2,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal6 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.185,
+                            y: -0.165,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.5,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var machinegoal7 = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.185,
+                            y: -0.165,
+                            z: 0.36
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.5,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var buttongoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 2,
+                        position: {
+                            x: 0.185,
+                            y: -0.163,
+                            z: 0.33
+                        },
+                        rpy: {
+                            roll: 0,
+                            pitch: 1.5,
+                            yaw: 0
+                        }
+                    }
+                }
+            });
+            var opengoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 1,
+                            gripper_open_speed: 100
+                        }
+                    }
+                }
+            });
+            var closegoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 6,
+                        tool_cmd: {
+                            tool_id: 13,
+                            cmd_type: 2,
+                            gripper_close_speed: 300
+                        }
+                    }
+                }
+            });
+            machinegoal1.send();
+            machinegoal1.on('result', function() {
+            machinegoal2.send();
+            machinegoal2.on('result', function() {
+                 machinegoal3.send();
+	    machinegoal3.on('result', function() {
+	         opengoal.send();
+	         opengoal.on('result', function() {
+		machinegoal4.send();
+		machinegoal4.on('result', function() {
+		     machinegoal5.send();
+		     machinegoal5.on('result', function() {
+		          closegoal.send();
+		          closegoal.on('result', function() {
+			machinegoal6.send();
+			SetVFactorArgument(10);
+			machinegoal6.on('result', function() {
+			     buttongoal.send();
+			     buttongoal.on('result', function() {
+			          machinegoal7.send();
+			          SetVFactorArgument(100);
+			          machinegoal7.on('result', function() {
+				Rest();
+			          });
+			     });
+			});
+		          });
+		     });
+		});
+	         });
+                 });
+            });
+        });
+        }
+        // "Rest" 버튼
+        function Rest() {
+            var restjoint = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [0, 0.62, -1.359, 0, 0, 0]
+                    }
+                }
+            });
+            var zerogoal = new ROSLIB.Goal({
+                actionClient: MoveActionClient,
+                goalMessage: {
+                    cmd: {
+                        cmd_type: 1,
+                        joints: [0, 0, 0, 0, 0, 0]
+                    }
+                }
+            });
+            zerogoal.send();
+            zerogoal.on('result', function() {
+                restjoint.send();
+                restjoint.on('result', function() {
+                    learning();
+                });
+            });
+        }
+
+    </script>
+</head>
+
+<body>
+    <h2>ROS Webserver connection to Niryo</h2>
+    <div id="status"></div>
+    <FORM>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Request Calibration' onclick='requestcali()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Calibrate' onclick='calibrate()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Set Learning Mode' onclick='learning()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Move to Zero' onclick='MoveZero()'>
+        <br>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Show State' , onclick='showstate()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Show Joints' , onclick='showjoints()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Open Gripper' , onclick='OpenGripper()'>
+        <INPUT type='BUTTON' style="WIDTH:100pt" value='Close Gripper' , onclick='CloseGripper()'>
+        <br>
+        <INPUT type='BUTTON' style="WIDTH:164pt" value='Set Velocity Factor (1~100%)' onclick='SetVFactor()'>
+        <INPUT type='number' style="WIDTH:30pt" id="factor" VALUE="100" min="1" max="100">
+        <INPUT type='BUTTON' style="WIDTH:144pt" value='Select Tool' onclick='SelectTool()'>
+        <select name='tool' id='tool'>
+            <option value='' selected>-- 선택 --</option>
+            <option value=0>없음</option>
+            <option value=11>Gripper1</option>
+            <option value=12>Gripper2</option>
+            <option value=13>Gripper3</option>
+        </select>
+        <br>
+    </FORM>
+    <fieldset style="border: 1px solid #FFFFFF">
+        <img id="image" style="float:left; border: 1px solid black;" width="640" height="480">
+        <fieldset style="border: 1px solid #FFFFFF">
+            <FORM name="joints" style="float:left">
+                <div style="width:210px">
+                    <fieldset style="border:1 solid navy">
+                        <legend style="text-align:center;">Joints</legend>
+                        <div style="text-align: center;">
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint1" value="0" min="-175" max="175">
+                                <div id="j1"></div> -175 < joint1 < 175 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint2" value="0" min="-110" max="36">
+                                <div id="j2"></div> -110 < joint2 < 36 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint3" value="0" min="-80" max="90">
+                                <div id="j3"></div> -180 < joint3 < 90 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint4" value="0" min="-175" max="175">
+                                <div id="j4"></div> -175 < joint4 < 175 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint5" value="0" min="-100" max="110">
+                                <div id="j5"></div> -100 < joint5 < 110 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="joint6" value="0" min="-147" max="147">
+                                <div id="j6"></div> -147 < joint6 < 147 <br>
+                            </fieldset>
+                            <INPUT type='BUTTON' style="WIDTH:100pt" value='Move Joints' onclick='MoveJoint()'>
+                        </div>
+                    </fieldset>
+                </div>
+            </FORM>
+            <FORM name="pose" style="float:left">
+                <div style="width:210px">
+                    <fieldset style="border:1 solid navy">
+                        <legend style="text-align:center;">Pose</legend>
+                        <div style="text-align: center;">
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="x" value="0" min="-500" max="500">
+                                <div id="xvalue"></div> -500 < x < 500mm <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="y" value="0" min="-500" max="500">
+                                <div id="yvalue"></div> -500 < y < 500mm <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="z" value="0" min="-150" max="650">
+                                <div id="zvalue"></div> -150 < z < 650mm <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="roll" value="0" min="-180" max="180">
+                                <div id="rollvalue"></div> -180 < roll < 180 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="pitch" value="0" min="-180" max="180">
+                                <div id="pitchvalue"></div> -180 < pitch < 180 <br>
+                            </fieldset>
+                            <fieldset style="border:1 solid navy">
+                                <INPUT type="range" id="yaw" value="0" min="-180" max="180">
+                                <div id="yawvalue"></div> -180 < yaw < 180 <br>
+                            </fieldset>
+                            <INPUT type='BUTTON' style="WIDTH:100pt" value='Move Pose' onclick='MovePose()'>
+                        </div>
+                    </fieldset>
+                </div>
+            </FORM>
+        </fieldset>
+    </fieldset>
+    <fieldset style="border: 1px solid #FFFFFF">
+        <canvas id="canvas" style="float:left; border: 1px solid black;" crossorigin="anonymous" width="640" height="480" onmousedown="firstpoint(event)" onmouseup="secondpoint(event)"></canvas>
+        <FORM id="wrapper" style="width:200px; float:left; text-align:center; border: 1 solid black">
+            <div id="color">Drag to set HSV range</div>
+            <div id="h" style='display:inline;'></div>
+            <div id="s" style='display:inline;'></div>
+            <div id="v" style='display:inline;'></div>
+            <canvas id="zoom" width="300" height="227" crossorigin="Anonymous"></canvas>
+            <INPUT type='number' style="WIDTH:30pt" id="hdif" VALUE="0" min="0" max="100">
+            <INPUT type='number' style="WIDTH:30pt" id="sdif" VALUE="0" min="0" max="100">
+            <INPUT type='number' style="WIDTH:30pt" id="vdif" VALUE="0" min="0" max="100">
+            <img id="minhsv" width="50" height="50">
+            <img id="maxhsv" width="50" height="50">
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Observation Pose' onclick='ObservationPose()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Take Picture' , onclick='takePicture()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Grab Capsule' , onclick='grabCapsule()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Put Down Capsule' , onclick='PutDownCapsule()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Put In Capsule' , onclick='PutInCapsule()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Coffee Machine' , onclick='CoffeeMachine()'>
+            <INPUT type='BUTTON' style="WIDTH:100pt" value='Rest' , onclick='Rest()'
+
+        </FORM>
+    </fieldset>
+    <img id="contour" style="display:none">
+</body>
+
+</html>
\ No newline at end of file