Labview Web Server
Labview Web Server
http://chrislarson.me/book/labview-2013-web-services-tutorials
LabVIEW Web Services recibi una gran actualizacin para 2013. Servicios Web son
ahora ms fciles de usar y se ejecutan en el mismo contexto que el otro VIs en un proyecto
de LabVIEW. Paneles frontales remotos ahora pueden ser creadas para que se pueda
acceder desde cualquier dispositivo mvil con un navegador web.
Este es un tutorial muy simple que muestra cmo servir pginas HTML estticas con el
Servicio Web de LabVIEW 2013. El siguiente ejemplo muestra cmo actualizar
dinmicamente una pgina web.
Comience creando un proyecto en blanco. Luego haga clic derecho en Mi PC -> Nuevo ->
Servicio Web
Haga clic derecho sobre WebService1 -> Agregar carpeta pblica contenido ...
Abra el Bloc de notas y crear un nuevo documento. Pegar en un simple cdigo HTML.
<!DOCTYPE html>
<html>
<body>
<h1>LabVIEW 2013 Web Services</h1>
<p>My first paragraph.</p>
</body>
</html>
Haga clic derecho sobre WebService1 -> Iniciar. Esto iniciar el servidor web.
Haga clic derecho sobre index.html en el proyecto de LabVIEW y seleccione Mostrar URL
Pblico ...
Copiar la direccin URL pblica de index.html y pegarlo en una nueva ventana del
navegador web. El archivo index.html se mostrar en el navegador web.
La pgina HTML esttica se puede actualizar mientras que el Servicio Web de LabVIEW
2013 est en marcha. Esto permite que los archivos que se actualizan de forma dinmica
por un funcionamiento VI. Entonces cada vez que la pgina web se actualiza en el
navegador web, se mostrarn nuevos datos.
Este ejemplo muestra cmo actualizar un archivo HTML en la carpeta de contenido pblico
de LabVIEW 2013 Servicio Web que se ejecuta. (Lea la pgina HTML esttica
ejemplo para aprender los conceptos bsicos antes de intentar este ejemplo.)
El VI simplemente concatena algunos hilos que forman HTML de una pgina web. Cada
segundo el bucle se ejecuta y guarda la cadena HTML en el archivo index.html. Cada vez
que un navegador web solicita el archivo index.html, la ltima versin guardada ser
entregado.
El cdigo fuente de este ejemplo est vinculado a continuacin. Asegrese de iniciar el
servicio web y ejecutar el VI para obtener el ejemplo de trabajo.
En prximos posts voy a mostrar cmo volver a crear los ms complejos controles del
panel frontal con JavaScript. Usando slo HTML, CSS y JavaScript de todo el panel frontal
de LabVIEW puede ser recreado para funcionar en cualquier navegador web moderno,
incluyendo tabletas y telfonos.
Antes de comenzar este tutorial asegurarse de que tiene la misma configuracin que
elLabVIEW Servicios Web HTML dinmico Pgina tutorial. Su proyecto de LabVIEW
debe ser configurado para que pueda empezar a Servicios Web y ver la pgina index.html
en un navegador web.
El Cdigo
El siguiente cdigo incluye el cdigo HTML de la del ejemplo anterior con la adicin de
CSS en lnea y dos etiquetas HTML DIV que se utilizan para definir las dos plazas que el
maquillaje de la Barra de progreso vertical.
El CSS inline est contenido dentro de la etiqueta abierta y toma la forma
destyle="position:relative;width:25px;height:100px;border:2px solid
black;margin-bottom:5px"
<!DOCTYPE html>
<html>
<body>
<h1>LabVIEW 2013 Web Services</h1>
<p>My first paragraph.</p>
<div style="position:relative;width:25px;height:100px;border:2px solid
black;margin-bottom:5px">
<div style="position:absolute;top:30px;width:25px;height:70px;backgroundcolor:blue">
</div>
</div>
<div style="width:25px;border:2px solid black">
70
</div>
</body>
</html>
El primer elemento DIV define los lmites exteriores de la barra de progreso vertical,
incluyendo el borde negro y fondo blanco. El segundo elemento DIV define el indicador de
progreso azul y tiene el estilo background-color:blue y la altura igual al valor de
progreso entre 0 y 100.
El poder de LabVIEW Web Services est en los recursos Web. Un Recurso Web es una
URL que devuelve los datos de un VI de LabVIEW. Mediante la combinacin de una
pgina HTML esttica con JavaScript podemos crear pginas web dinmicas
verdaderamente que funcionan con LabVIEW.
En este tutorial voy a demostrar cmo crear un recurso Web que devuelve el valor actual de
un control deslizante vertical.
Comience con un proyecto en blanco. Aadir un nuevo VI con un solo control deslizante
vertical en el panel frontal y el cable de la barra de desplazamiento para una variable global
en el panel posterior.
Agregar un servicio Web al proyecto. Haga clic derecho sobre Recursos de la Web a
continuacin, Nuevo VI. El nombre de este nuevo VI no puede tener caracteres
especiales o espacios.
Aadir un indicador numrico para el panel frontal y vincularlo a una de las terminales del
VI.Cualquier indicador vinculado a un terminal estar en la respuesta XML se enva al
navegador web. En los cables del panel posterior de la variable global en el indicador
numrico.
Abra el VI principal y Globals VI. Ejecute el VI principal y compruebe que el valor global
cambia cuando se cambia el valor del control deslizante.
Ahora inicie el servicio Web. Haga clic derecho sobre el recurso VI Web y seleccione
Mostrar Mtodo URL. Copia la URL y pegarla en un navegador web. El navegador web
debe mostrar XML con el nombre del indicador del panel frontal y su valor actual.
RESTful
Un modelo de diseo de gran alcance para las aplicaciones web es la API REST. Usted
puede leer los detalles sobre la transferencia de estado representacional Wikipedia . Para el
TL; multitud DR, una API REST define vagamente la cartografa de los mtodos HTTP
(GET, POST, PUT, DELETE) para la creacin y recuperacin de datos. El API es aptrida
y todos los datos se almacenan en el servidor. La arquitectura sin estado permite que los
clientes se desconectan y reconectan a voluntad.
CRUD
HTTP define varios mtodos, pero en la arquitectura REST se utilizan slo cuatro
mtodos.Estos cuatro mtodos se corresponden con las cuatro funciones CRUD y son
POST, GET, PUT y DELETE.
CRUD
Mtodo HTTP
Crear
POSTE
Leer
CONSIGA
Actualizacin PUT
Eliminar
BORRAR
Para un repaso rpido sobre los Recursos Web echa un vistazo a mis anteriores
mensajeLabVIEW Servicios Web - Crear un recurso Web . Haga clic derecho sobre
Recursos Web y seleccione Nuevo recurso Web. Nombre del Recurso Web Nueva
"slide". Haga clic derecho en "slide" y seleccione Nuevo VI. Guarde el nuevo VI como
"leer" y asegurarse de que el mtodo se ajusta a GET. Aadir un numrico deslizante
indicador y el nombre, y luego vincularlo a uno de los terminales del VI.
Ejecute el Main.vi e iniciar el servicio Web. Haga clic en la read.vi y seleccione Mostrar
Mtodo URL. Copia la URL y pasado en un navegador, el valor actual de la diapositiva
debe ser devuelto en el XML.
A continuacin, copie la URL Mtodo para update.vi y pgalo en la barra de direcciones
del navegador web. Antes de presentar la direccin de agregar la cadena de
consulta ?slide=4hasta el final de la URL. Una vez que esta direccin se enva al
navegador web el valor de la diapositiva debe ser actualizado en Main.vi.
Se trata de una API REST muy simple escrito en LabVIEW Web Services. Los otros dos
mtodos, crear y eliminar, se pueden aadir de forma similar a actualizar. Cualquier
programa que puede hacer una peticin HTTP GET ahora pueden interactuar con sus
programas de LabVIEW.
LabVIEW Web Services permite a los programadores de LabVIEW para crear ricas
aplicaciones web funcionan con LabVIEW. La mayor parte de la programacin se puede
hacer en LabVIEW, pero con el fin de crear aplicaciones realmente sorprendentes se
necesita un poco de conocimiento de desarrollo web.
Los Fundamentos
La web moderno est hecho de HTML [Wiki] , CSS [Wiki] , y JavaScript [Wiki] .
HTML es la abreviatura de HyperText Markup Language y define la estructura bsica y el
contenido de una pgina web. El cdigo HTML se guarda como un archivo de texto con la
extensin de archivo .html
CSS es la abreviatura de las Hojas de Estilo en Cascada y define la posicin y el aspecto del
contenido HTML. El cdigo CSS se guarda como un archivo de texto con la extensin de
archivo .css y se hace referencia en el archivo HTML.
JavaScript es el lenguaje de script que se ejecuta en el navegador web del
cliente. JavaScript puede alterar el cdigo HTML y CSS de estilo, mientras que la pgina
web se muestra en el navegador web. Los archivos JavaScript tienen la extensin de
archivo .js y se hace referencia en el archivo HTML.
Herramientas de desarrollo
Hay dos herramientas que se utilizan para el desarrollo de aplicaciones web. El primero es
un editor de texto y el segundo es un navegador web.
El editor de texto puede ser tan simple como el Bloc de notas o, ms probablemente, un
IDE como Netbeans o Sublime Text. La caracterstica ms importante es el resaltado de
sintaxis para HTML, CSS y JavaScript. Los editores ms elegantes no perder de vista el
cdigo JavaScript y tienen la funcin de autocompletar. Yo escrib un post sobre Los 4
primeros editores de la Cruz-plataforma de desarrollo Web que presentan cuatro editores
que son todas buenas para el desarrollo web.
El navegador web es el depurador. Ms especficamente web moderno navegue tiene
caractersticas de depuracin integradas. Normalmente las caractersticas de depuracin
estn ocultos y discapacitados. Yo uso Chrome, donde se accede a las herramientas de
depuracin con un clic derecho en cualquier parte de una pgina web y luego seleccionando
"Inspeccionar elemento '. Esto abre una ventana que muestra el cdigo HTML y tiene
varias pestaas de herramientas de depuracin. Antes de Chrome, Firefox era la opcin
preferida con el plugin Firebug instalado. Safari tiene un buen conjunto de herramientas
que son similares en caractersticas a Chrome de depuracin. Yo slo uso Internet Explorer
para probar una aplicacin que se ha construido en Chrome. En mis tutoriales estar usando
Chrome.
Con slo un editor de texto y un navegador web la mayor parte de las pginas web en
Internet se pueden crear. Hay muchas herramientas de la especialidad que se disponga para
generar automticamente cdigo, comprimir el cdigo de velocidad e incluso entregar
secciones de cdigo en la demanda del cliente. stos son ideales para sitios de alto perfil,
pero durante alojados internamente aplicaciones LabVIEW web no son necesarios.
Quieres empezar ahora mismo? Echa un vistazo a codepen.io y programar toda la
aplicacin en un navegador web.
Cascading Style Sheets, CSS, le dicen al navegador web cmo mostrar los elementos
HTML.CSS define atributos como anchura, altura, color, bordes, orientacin, tipo de letra,
tamao de fuente, etc Aadir con cuidado estilos a elementos HTML individuales podemos
recrear controles del panel frontal de LabVIEW.
En un post anterior sobre la creacin de una barra de progreso vertical demostr CSS muy
bsico y HTML para crear un crudo Vertical Barra de progreso. En este post voy a ir a
fondo y demostrar cmo crear un partido ms exacta a la mirada de LabVIEW. Por
supuesto, voy aenlazar con el cdigo y se puede tener un ir en la personalizacin del control
de ti mismo.
Hay muchos tutoriales sobre el aprendizaje de CSS y HTML, as que no voy a volver a crearlos aqu
y en lugar de darle una lista corta.
Mozilla Developer Network cuenta con todas las especificaciones tcnicas de las tecnologas web
actuales y hasta prximos.
Cdigo HTML School y CSS Las primeras lecciones son gratis y un gran recurso para aprender
rpidamente.
Trucos CSS es uno de mis sitios favoritos y aprendo un montn de este sitio en una base semanal.
Manos a la obra!
Si quieres echa un vistazo a la final Vertical Barra de progreso luego dirigirse a mi
bosquejoen codepen.io.
</div>
</div>
<button id="button1" style="float:left;">Update Global</button>
<div id="slide2" class="slide">
<div class="slide-label">Global Slide Value</div>
<div class="slide-ticks">
<table>
<tr>
<td>100-</td>
</tr>
<tr>
<td>75-</td>
</tr>
<tr>
<td>50-</td>
</tr>
<tr>
<td>25-</td>
</tr>
<tr>
<td>0-</td>
</tr>
</table>
</div>
<div class="slide-border">
<div class="slide-fill" style="top:30px;height:70px;">
</div>
</div>
<div class="slide-indicator">
<div class="slide-indicator-numeric">
70
</div>
</div>
</div>
El CSS
body {
background-color:#d7d7d7;
font-family: Tahoma, sans-serif;
}
button {
cursor: pointer;
}
.slide {
float:left;
margin-left:40px;
margin-bottom:15px;
}
.slide-label {
margin-bottom:5px;
}
.slide-ticks {
position:relative;
text-align:right;
line-height:20px;
float:left;
margin-left:-40px;
margin-top:-10px;
width:25px;
height:100px;
}
.slide-border {
position:relative;
width:25px;
height:100px;
border:1px solid #333;
border-radius:5px;
background-color:#777;
box-shadow:inset 0 0 2px #333;
margin-bottom:15px;
}
.slide-fill {
position:absolute;
width:25px;
background-color:blue;
}
.slide-pointer {
position:absolute;
margin-top:-6px;
left:2px;
width:33px;
height:14px;
background-color:#eee;
border-radius:10px 5px 5px 10px;
background-image: linear-gradient(to bottom, #fff,
#777);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,st
artColorstr=#eee, endColorstr=#707070);
box-shadow:1px 1px 1px 1px black;
cursor: move;
}
.slide-indicator {
margin-left:-25px;
}
.slide-indicator-numeric {
float:left;
width:50px;
padding:2px;
border:2px inset lightgray;
box-shadow:inset 0 0 2px black;
background-color:lightgray;
}
.slide-indicator-control {
background-color:white;
}
.slide-indicator-controls {
float:left;
margin-right:3px;
}
.slide-indicator-button {
height:12px;
width:18px;
line-height:11px;
text-align:center;
border:1px solid gray;
border-radius:2px;
box-shadow:1px 1px 1px 1px black;
background-color:lightgray;
cursor: pointer;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
El JavaScript
//button
var slide = $("#slide1 .slide-pointer");
var fill = $("#slide1 .slide-fill");
var indicator = $("#slide1 .slide-indicator-numeric");
var up = $("#slide1 .increment");
var down = $("#slide1 .decrement");
var button = $("#button1");
var height;
var max = 100;
var min = 0;
height = parseInt($(slide).position().top);
startY = e.targetTouches[0].pageY;
}, false);
slide[0].addEventListener("touchmove", function(e) {
e.preventDefault();
var diffY = e.changedTouches[0].pageY - startY;
var newHeight = height + diffY;
if(newHeight < min){ newHeight = min; }
if(newHeight > max){ newHeight = max; }
slide.css({'top':newHeight});
$(fill).css({'top':newHeight, 'height':max-newHeight});
$(indicator).text(max-newHeight);
}, false);
slide[0].addEventListener("touchend", function(e) {
}, false);