【WebIOPi】 스마트 폰으로 서보 모터를 제어! ②

스마트 폰으로 서보 모터를 제어!

이번은, 스마트폰으로 서보 모터를 제어하는 시리즈의 제2회째입니다.

Raspberry Pi를 사용하여 쉽게 IoT를 만들 수있는 라이브러리, WebIOPi를 사용하여 스마트 폰에서 서보 모터를 제어합니다.

WebIOPi 설치는 이 기사을 참조하십시오.

아직 HTML 파일을 작성하지 않은 경우 이 기사도 참조하십시오.

WebIOPi 및 JavaScript

이번에는 마지막으로 만든 HTML 파일에 JavaScript를 추가합니다.

WebIOPi에서는 JavaScript를 사용하여 Python과의 연동이 가능합니다.

그럼 만들겠습니다!

JavaScript 구현

WebIOPi의 공식 문서에는 다양한 기능이 소개되어 있습니다 (공식 문서: 기능 소개).

그 중에서도 이번에는 Webiopi.callMacro()이라는 함수를 사용합니다.

이 함수는 JavaScript에서 특정 Python 함수를 실행할 수 있습니다.

예를 들어 웹 페이지의 버튼을 누르면 파이썬 LED를 빛나는 함수를 실행할 수 있습니다!

Webiopi.callMacro() 정보

WebIOPi.callMacro(macro, [args[, callback]])
Call a macro on the server.
(string) macro : name of the macro to call
(string) arg (optional) : array containing arguments
(function) callback (optional) : function called when result received from the server

WebIOPi 공식 문서에서

인수는 다음을 지정합니다.

첫 번째: 실행할 파이썬 함수 이름

두 번째: Python 함수에 전달할 인수(슬라이드바 값 등)

세 번째 : Python 함수가 실행 된 후 실행할 JavaScript 함수

또한 HTML에 JavaScript를 포함 할 때 head 태그에

controller.html

<head>
...

<script type="text/javascript" src="webiopi.js"></script>
</head>

잊지 않도록 작성하십시오.

코드

controller.js

// 前半
var current1 = document.getElementById("myRange1");    // SERVO1 pin12
var output1 = document.getElementById("out1");
output1.innerHTML = current1.value;

var current2 = document.getElementById("myRange2");    // SERVO2 pin19
var output2 = document.getElementById("out2");
output2.innerHTML = current2.value;

// 後半
function func1(){
    var value1 = current1.value;
    output1.innerHTML = value1;
    webiopi().callMacro('GET1',value1);
}
function func2(){
    var value2 = current2.value;
    output2.innerHTML = value2;
    webiopi().callMacro('GET2',value2);
}

우선, 전반은 페이지에 액세스가 있을 때, 슬라이더의 현재의 값을 취득해 표시하는 프로그램입니다.

나중에 webiopi.callMacro 함수를 사용합니다.

function func1(){
    var value1 = current1.value;
    output1.innerHTML = value1;
    webiopi().callMacro('GET1',value1);
}

우선, 2행째에서는 현재의 슬라이더의 값을 취득해, 그것을 output1 (id가 out1인 장소)에 표시합니다.
그런 다음 슬라이더의 값을 GET1라는 Python 함수에 전달합니다.

HTML 전체

지금까지의 HTML/JavaScript 전체는 다음과 같습니다.

controller.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Servo Controller</title>
    <script type="text/javascript" src="webiopi.js"></script>
    <link rel="stylesheet" type="text/css" href="controller.css">
  </head>
  <body>
    <div align="center">
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <!--SERVO 1-->
                  <td id="name1">SERVO 1</td>                  
                  <td class="SS1">                  
                    <div class="slidecontainer1">
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange1" oninput="func1()">
                    </div>  
                  </td>
                  <td id="out1"></td>
                  <!--SERVO 2-->
                  <td id="name2">SERVO 2</td>
                  <td class="SS2">                  
                    <div class="slidecontainer2"> 
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange2" oninput="func2()">                                             
                    </div>  
                  </td>              
                  <td id="out2"></td>    
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </div>
  </body>
  <script>
    var current1 = document.getElementById("myRange1");    //SERVO1 pin12
    var output1 = document.getElementById("out1");
    output1.innerHTML = current1.value;

    var current2 = document.getElementById("myRange2");    //SERVO2 pin19
    var output2 = document.getElementById("out2");
    output2.innerHTML = current2.value;

    function func1(){
        var value1 = current1.value;
        output1.innerHTML = value1;
        webiopi().callMacro('GET1',value1);
    }
    function func2(){
        var value2 = current2.value;
        output2.innerHTML = value2;
        webiopi().callMacro('GET2',value2);
    }

  </script>
</html>

마지막으로

다음에, 슬라이더의 값에 따라 서보 모터를 움직이는 Python 프로그램을 작성해 갑니다.

Reference

이 문제에 관하여(【WebIOPi】 스마트 폰으로 서보 모터를 제어! ②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/happanosumide/items/cee747e27926f482b0df

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다