PDF de programación - Tecnologías web en Robótica

TECNOLOGÍAS WEB EN ROB ÓTICA

Aitor Martínez Fernández
[email protected]

14 de enero de 2016

Índice

1

Índice

Introducción

Objetivos

Infraestructura

Diseño e implementación

Conclusiones

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Introducción

2

Introducción

Robótica

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Introducción (cont.)

3

Web

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Introducción (cont.)

4

Antecedentes: Surveillance 4.0

Es el Proyecto fin de carrera de Daniel Castellano.

Está desarrollado con Django (Python).

Un servidor web intermedio se conecta a los servidores ICE.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Introducción (cont.)

5

Antecedentes: Surveillance 5.1

Es el TFG de Edgar Barrero.

Está desarrollado con Ruby on Rails.

Un servidor web intermedio se conecta a los servidores ICE.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Objetivo

6

Objetivo

Crear versiones web de varios clientes de JdeRobot muy utilizados sin tener
servidor intermedio, permitiéndo tener versiones multiplataforma con un
único desarrollo.

Sub-objetivos:

Representación de datos de sensores: CameraView, RgbdViewer

Interactuación con actuadores: KobukiViewer, UavViewer

Añadir lógica que interprete los datos de los sensores y mande órdenes
a los actuadores

Diseño de la página web

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Infraestructura

7

Infraestructura

Gazebo e ICE

Gazebo: Simula sensores, actuadores, robots, drones,... en mundos
virtuales.

ICE: Permite comunicaciones cross-language y cross-platform.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Infraestructura (cont.)

8

HTML5 y WebWorker

HTML5: Establece una serie de nuevos ele-
mentos y atributos que reflejan el uso típico de
los sitios web modernos (Canvas, Video,...).

WebWorker: Permite ejecutar scripts en se-
gundo plano sin interferir con la interfaz de
usuario.

<v i d e o s r c=” ”></ v i d e o>

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Infraestructura (cont.)

9

WebGL y Canvas en HTML5

WebGL: Permite mostrar gráficos en 3D acelerados por hardware
(GPU) en páginas web sin la necesidad de plug-ins.

Canvas: Puede usarse para dibujar gráficos a través JavaScript. Por
ejemplo, hacer composición de fotos, crear animaciones e incluso pro-
cesamiento de vídeo en tiempo real.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Infraestructura (cont.)

10

Javascript 6 y Promesas

JavaScript6 o ECMAScript 2015: es la versión actual de la especifi-
cación del lenguaje ECMAScript conocida simplemente como “ES6”.

Promise: Devuelve una promesa de tener un valor en algún momento
en el futuro.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Infraestructura (cont.)

11

JQuery y Bootstrap

JQuery: es una biblioteca de JavaScript, que permite simplificar la
manera de interactuar con los documentos HTML, manejar eventos,...

Bootstrap: conjunto de herramientas de software libre para diseño
de sitios y aplicaciones web.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación

12

Diseño e implementación

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

13

CameraViewJS

Este cliente muestra la informacion recibida de una webcam.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

14

CameraViewJS

Cuando se pone en funcionamiento,
se incian los widgets y se crea el Web-
Worker

Mediante una promesa se espera a
tener establecida la conexión con el
servidor

Cada vez que se recibe una imagen
se muestra en el canvas

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

15

RgbdViewerJS

Recibe información de un sensor Kinect

Imágenes como en CameraViewJS

Cuando se han recibido imágenes de
las dos cámaras se crea la nube de
puntos y se muestra en el modelo 3D

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

16

KobukiViewerJS

Este cliente permite teleoperar un robot.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

17

KobukiViewerJS

Imágenes como en CameraViewJS.

Cada vez que se recibe un Pose3D se
modifica la posición y orientación del
robot en el modelo 3D.

Cuando se recibe información del la-
ser se cre una imagen 2D y otra 3D
para poderla agregar al modelo.

Cada vez que se mueve el control se
envían las órdenes de velocidad.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

18

UavViewerJS

Imágenes como en CameraViewJS.

Cada vez que se recibe un Pose3D se
modifica la posición y orientación del
drone en el modelo 3D y se modifican
los indicadores de vuelo.

Cada vez que se mueven los controles
se envían las órdenes de velocidad al
drone.

Cuando se pulsan los botones se
envían al drone las órdenes de des-
pegar, aterrizar,...

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

19

IntrorobKobukiJS

Igual que KobukiViewerJS pero añadiendo comportamiento autóno-
mo, mediante los datos recibidos por los sensores, una función pro-
gramada en JS decide qué señales enviar a los actuadores.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Diseño e implementación (cont.)

20

IntrorobUavJS

Igual que UavViewerJS pero añadiendo comportamiento autónomo,
mediante los datos recibidos por los sensores, una función programada
en JS decide qué señales enviar a los actuadores.

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA

Conclusiones

21

Conclusiones

Objetivo cumplido: versiones web de las herramientas para ver sen-
sores y teleoperar robots.

Son multitplataforma (valen para teléfonos, tabletas, ordenadores,
portátiles...)

Manejan tecnologías web como WebGL, ICE-JS....

Líneas futuras:

Versiones en NodeJS

Crear extensiones de Firefox, Chrome,...

cAitor Martínez Fernández

TECNOLOGÍAS WEB EN ROB ÓTICA