Contrôle de Servo Web via Arduino UNO et Shield WiFi PHPoC

À Propos de ce Projet

Introduction

Si vous êtes débutant, je recommande de lire sur Arduino - Servomoteur et Arduino - WiFi.

Pour connecter Arduino à Internet, nous devons utiliser une sorte de shield Internet tel que Ethernet shield, WiFi shield, PHPoC shield, ou PHPoC WiFi shield.

La caractéristique exceptionnelle du shield PHPoC est qu'il fournit non seulement une connexion Internet comme les shields Ethernet et WiFi, mais aussi un serveur web qui permet de contrôler et surveiller Arduino depuis un navigateur web. Il supporte aussi WebSocket, donc nous pouvons contrôler et surveiller Arduino en temps réel sans recharger une page web.

Le shield PHPoC a quelques applications web intégrées. Reportez-vous à ce lien pour plus de détails.

Dans ce projet, j'ai modifié l'UI (Interface Utilisateur) de l'application web Web Remote Control/Slide, et j'ai écrit le code Arduino pour faire tourner le servomoteur selon l'angle reçu depuis le navigateur web.

Câblage

• Empilez le shield PHPoC sur l'Arduino
• Connectez les broches GND, VCC et signal du servomoteur à GND, 5V et broche 9 de l'Arduino, respectivement.

Flux de Données

Navigateur web → Shield PHPoC → Arduino

L'application web calcule l'angle basé sur l'événement tactile ou souris, l'envoie au shield PHPoC via WebSocket. À la réception de ces données, le shield PHPoC les transmet à l'Arduino. L'Arduino fait tourner le servomoteur selon l'angle.

Ce Qu'il Faut Faire

• Configurer les informations WiFi pour le shield PHPoC (SSID et mot de passe)
• Téléverser la nouvelle UI sur le shield PHPoC
• Écrire le code Arduino

Configuration des Informations WiFi pour le Shield PHPoC

Voir cette instruction : https://www.phpoc.com/support/manual/p4s-347_user_manual/contents.php?id=network_first_setup

Téléverser la Nouvelle UI sur le Shield PHPoC

• Téléchargez le code source PHPoC remote_rotate.php (dans la section code)
• Téléversez-le sur le shield PHPoC en utilisant le débogueur PHPoC selon cette instruction

Écrire le Code Arduino

• Installez la bibliothèque pour Arduino sur Arduino IDE (voir l'instruction) et redémarrez Arduino IDE.
• Sur Arduino IDE, allez à Fichier → Exemples → Phpoc → WebRemoteSlide et Fichier → Exemples → Servo → sweep.
• Combinez les deux exemples en un seul, nous avons le code pour contrôler le servomoteur via une page web (voir le code source dans la section code).

Test

• Cliquez sur le bouton série sur Arduino IDE pour voir l'adresse IP
• Ouvrez un navigateur web, tapez https://remplacez_adresse_ip/remote_rotate.php
• Cliquez sur le bouton connecter et testez

Le Meilleur Kit de Démarrage Arduino pour Débutant

Si vous cherchez un kit Arduino, voir Le Meilleur Kit Arduino pour Débutants

Références de Fonctions

• Arduino - Bibliothèque Servo
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()
• delay()
• Boucle for
• Boucle while
• if else
• loop()
• setup()
• String.toInt()

Code

• remote_rotate.php
• Code Arduino

remote_rotate.php PHP

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Web Remote Control for Arduino</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
body { text-align: center; font-size: 15pt; }
h1 { font-weight: bold; font-size: 25pt; }
h2 { font-weight: bold; font-size: 15pt; }
button { font-weight: bold; font-size: 15pt; }
</style>
<script>
var canvas_width = 400, canvas_height = 400;
var plate_radius = 160;
var click_state = 0;
var last_plate_angle = 0;
var plate_angle = 0, last_angle = 0;
var ws;

function init() {
  var canvas = document.getElementById("remote");
  canvas.addEventListener("touchstart", mouse_down);
  canvas.addEventListener("touchend", mouse_up);
  canvas.addEventListener("touchmove", mouse_move);
  canvas.addEventListener("mousedown", mouse_down);
  canvas.addEventListener("mouseup", mouse_up);
  canvas.addEventListener("mousemove", mouse_move);
  var ctx = canvas.getContext("2d");
  ctx.translate(canvas_width / 2, canvas_height / 2);
  rotate_plate(0);
}

function connect_onclick() {
  if(ws == null) {
    var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
    var debug = document.getElementById("debug");
    if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
      // conversion identificateur ressource réseau en nom de chemin UNC
      ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
      ws_host_addr = ws_host_addr.replace(/:/g, "-");
      ws_host_addr += ".ipv6-literal.net";
    }
    ws = new WebSocket("ws://" + ws_host_addr + "/remote_slide", "text.phpoc");
    document.getElementById("ws_state").innerHTML = "CONNECTING";
    ws.onopen = ws_onopen;
    ws.onclose = ws_onclose;
    ws.onmessage = ws_onmessage;
  } else ws.close();
}

function ws_onopen() {
  document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
  document.getElementById("bt_connect").innerHTML = "Disconnect";
}

function ws_onclose() {
  document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
  document.getElementById("bt_connect").innerHTML = "Connect";
  ws.onopen = null;
  ws.onclose = null;
  ws.onmessage = null;
  ws = null;
}

function ws_onmessage(e_msg) {
  e_msg = e_msg || window.event;
  alert("msg : " + e_msg.data);
}

function rotate_plate(angle) {
  var canvas = document.getElementById("remote");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(-canvas_width / 2, -canvas_height / 2, canvas_width, canvas_height);
  ctx.rotate(angle / 180 * Math.PI);
  ctx.strokeStyle="red";
  ctx.fillStyle="red";
  ctx.beginPath();
  ctx.arc(0, 0, plate_radius, Math.PI, Math.PI * 1.5);
  ctx.lineTo(0, 0);
  ctx.lineTo(-plate_radius, 0);
  ctx.fill();
  ctx.stroke();
  ctx.strokeStyle="blue";
  ctx.fillStyle="blue";
  ctx.beginPath();
  ctx.arc(0, 0, plate_radius, 0, Math.PI / 2);
  ctx.lineTo(0, 0);
  ctx.lineTo(plate_radius, 0);
  ctx.fill();
  ctx.stroke();
  ctx.strokeStyle="black";
  ctx.arc(0, 0, plate_radius, 0, Math.PI * 2);
  ctx.stroke();
  ctx.rotate(-angle / 180 * Math.PI);
}

function mouse_down() {
  if(ws == null) return;
  var dist_min, dist_max, dist;
  event.preventDefault();
  if(event.offsetX) {
    x = event.offsetX - canvas_width / 2;
    y = canvas_height / 2 - event.offsetY;
    dist_min = 40;
    dist_max = plate_radius;
  } else if(event.layerX) {
    x = event.layerX - canvas_width / 2;
    y = canvas_height / 2 - event.layerY;
    dist_min = 40;
    dist_max = canvas_width / 2;
  } else {
    x = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - canvas_width / 2;
    y = canvas_height / 2 - (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop));
    dist_min = 40;
    dist_max = canvas_width / 2;
  }
  var dist = Math.round(Math.sqrt(x * x + y * y));
  if((dist > dist_min) && (dist < dist_max)) {
    click_state = 1;
    last_angle = Math.round(Math.atan2(y, x) / Math.PI * 180);
  }
}

function mouse_up() {
  if(ws == null) return;
  event.preventDefault();
  click_state = 0;
}

function mouse_move() {
  if(ws == null) return;
  var dist_min, dist_max, angle, dist;
  event.preventDefault();
  if(!click_state) return;
  if(event.offsetX) {
    x = event.offsetX - canvas_width / 2;
    y = canvas_height / 2 - event.offsetY;
    dist_min = 40;
    dist_max = plate_radius;
  } else if(event.layerX) {
    x = event.layerX - canvas_width / 2;
    y = canvas_height / 2 - event.layerY;
    dist_min = 40;
    dist_max = canvas_width / 2;
  } else {
    x = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - canvas_width / 2;
    y = canvas_height / 2 - (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop));
    dist_min = 40;
    dist_max = canvas_width / 2;
  }
  angle = Math.round(Math.atan2(y, x) / Math.PI * 180);
  dist = Math.round(Math.sqrt(x * x + y * y));
  if((dist < dist_min) || (dist > dist_max)) {
    click_state = 0;
    return;
  }
  if((Math.abs(angle) > 90) && (angle * last_angle < 0)) {
    if(last_angle > 0) last_angle = -180;
    else last_angle = 180;
  }
  plate_angle += (angle - last_angle);
  last_angle = angle;
  if(plate_angle > 180) plate_angle = 180;
  if(plate_angle < 0) plate_angle = 0;
  rotate_plate(-plate_angle);
  if(plate_angle != last_plate_angle) {
    if(ws && ws.readyState) {
      ws.send("C" + plate_angle.toString() + "\r\n");
      last_plate_angle = plate_angle;
      debug = document.getElementById("debug");
      debug.innerHTML = plate_angle;
    }
  }
}
window.onload = init;
</script>
</head>
<body>
<p>
<h1>Web Remote Control / Rotate</h1>
</p>
<canvas id="remote" width="400" height="400"></canvas>
<h2>
<p>
WebSocket : <span id="ws_state">null</span><br>
Angle : <span id="debug">0</span>
</p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>
</body>
</html>

Code Arduino Arduino

/* arduino web server - remote control (slide switch) */
#include "SPI.h"
#include "Phpoc.h"
#include <Servo.h>

PhpocServer server(80);
Servo myservo; // crée l'objet servo pour contrôler un servo
char slideName;
int slideValue;

void setup() {
  Serial.begin(9600);
  while(!Serial) ;
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin();
  server.beginWebSocket("remote_slide");
  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());
  myservo.attach(9); // attache le servo sur la broche 9 à l'objet servo
  myservo.write(1);
}

void loop() {
  // attend un nouveau client :
  PhpocClient client = server.available();
  if (client) {
    String slideStr = client.readLine();
    if(slideStr) {
      slideValue = slideStr.substring(1).toInt();
      myservo.write(slideValue);
      Serial.print("Angle: ");
      Serial.println(slideValue);
    }
  }
}