Labview Web Server

LABVIEW WEB SERVER
http://chrislarson.me/book/labview-2013-web-services-tutorials
Servicios Web de LabVIEW - Cmo

servir una pgina web esttica
Enviado por Chris Larson en Vie, 12/20/2013 - 11:25
Este post es parte de la serie de Servicios Web de LabVIEW , que abarca temas de instalar
LabVIEW para crear una aplicacin web AJAX impulsado por LabVIEW.
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 ...
Cree una nueva carpeta y el nombre de dist
Seleccione la carpeta dist de nueva creacin.
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>
Guarde el documento como index.html. (Asegrese de que la extensin es html y txt.)
Compruebe que index.html es de hecho un tipo de documento 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.
Servicios Web de LabVIEW actualizar dinmicamente una

pgina HTML
Este ejemplo slo utiliza de programacin de LabVIEW, si sabes JavaScript es posible que
desee saltar al LabVIEW Servicios Web - Web App Tutorial
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.
LabVIEW Web Services - Vertical

Barra de progreso creado con HTML
y CSS
Enviado por Chris Larson en Lun, 23/12/2013 - 12:19
Uno de los principios fundamentales de diseo de la web es hasta la fecha separada de

presentacin. Cada pgina web tiene al menos HTML y CSS. El HTML define los datos y
el CSS define la presentacin. En el caso de que la CSS no se define explcitamente los
estilos por defecto del navegador web se utilizan.
Mediante la manipulacin el cdigo HTML y CSS es posible recrear la mayora de los
controles del panel frontal de LabVIEW. En este ejemplo voy a mostrar cmo recrear un
crudo, pero funcional, Vertical Barra de progreso. Las mismas tcnicas pueden utilizarse
para recrear la mayora de los controles del panel frontal.
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.
Servicios Web de LabVIEW - Crear

un recurso Web
Enviado por Chris Larson en Lun, 30/12/2013 - 10:52
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.
LabVIEW Web Services - El CRUD

RESTful
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
REST es un estilo y no una norma y hay muchas variaciones en la forma en que se

implementa. Para la mayora de las aplicaciones web de los cuatro mtodos HTTP se
asignan a la misma URL. Por ejemplo, un GET, POST, PUT o DELETE puede ser enviado
ahttp://127.0.0.1/front-panel-controls/slide y la operacin CRUD
correspondiente se realiza en la slide punto final.
Algunos dispositivos de baja potencia pueden no ser capaces de los cuatro mtodos HTTP y
por lo que la API REST est modificado para que funcione con slo el mtodo GET y
unacadena de consulta . De esta manera, la URL se modifica
para be http://127.0.0.1/front-panelcontrols/slide/read or http://127.0.0.1/front-panelcontrols/slide/update?slide=2 . Este mtodo tambin es ideal para las pruebas con un
navegador web. Un navegador de Internet realiza una solicitud GET HTTP en la direccin
en la barra de direcciones y muestra la respuesta del servidor en la pgina.
Servicio Web de LabVIEW

Crear un proyecto en blanco, agregar un servicio Web y cambiarle el nombre a "del panel
frontal-controles" a continuacin, crear un nuevo VI y gurdelo como "Principal". El
principal VI tiene dos funciones: primero lee un mundial y lo escribe en un control
deslizante vertical, segundo que escribe el mundial cuando se pulsa el botn Aceptar.
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.
Aadir otro VI a la "slide" de recursos Web y guarde este VI como "actualizacin" y

asegurarse de que el mtodo se ajusta a GET. Este VI se leer en la cadena de consulta y
escribir el valor de "slide" a la variable de diapositivas LabVIEW Global. As que el
navegador web para crear una respuesta vlida agregar un indicador numrico y vincularlo
a una de las 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.
Herramientas de desarrollo Web

para Programadores de LabVIEW
Enviado por Chris Larson en Mar, 01/07/2014 - 15:46
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 para

LabVIEW Desarrolladores
Enviado por Chris Larson en Sun, 01/12/2014 - 21:56
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.
Vea la demostracin en vivo

Este cdigo es slo un boceto rpido y no se debe utilizar en una planta de produccin. No
demostrar todos los elementos necesarios de un control HTML de trabajo. El control
deslizante responde a eventos de ratn arrastrando, as como la pantalla tctil arrastrando
eventos. Los botones de actualizar el nivel de llenado barra de progreso y el nmero del
indicador. Tambin hay una escala que se alinea con el nivel de llenado. Estos son todos
creados con HTML y CSS y manipulados con JavaScript.
Creo que la mejor explicacin es la demostracin a fin de ir echa un vistazo a la demo de
trabajo , tenedor, y luego se extienden y personalizarlo. Deja un comentario con un enlace a
su versin y hganos saber qu caractersticas le ha agregado.
El HTML
<div id="slide1" class="slide">
<div class="slide-label">Slide</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 class="slide-pointer" style="top:30px" ></div>
</div>
<div class="slide-indicator">
<div class="slide-indicator-controls">
<div class="slide-indicator-button increment no-highlight">+</div>
<div class="slide-indicator-button decrement no-highlight">-</div>
</div>
<div class="slide-indicator-numeric slide-indicator-control">
70
</div>
</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;
//Copy Control Value to Indicator Value

$(button).on("click", function( event, ui ) {
height = parseInt($(slide).position().top);
$("#slide2 .slide-fill").css({"top":height, "height":max-height});
$("#slide2 .slide-indicator-numeric").text(max-height);
});
//Increment control value by 1
$(up).on("click", function( event, ui ) {
height = height - 1;
if(height < min){ height = min; }
if(height > max){ height = max; }
$(slide).css({'top':height})
$(fill).css({'top':height, 'height':max-height});
$(indicator).text(max-height);
});
//decrement control value by 1
$(down).on("click", function( event, ui ) {
height = height + 1;
$(slide).css({'top':height})
});
//Update control value based on slider position
$(slide).draggable({
axis: 'y',
containment: '#slide1',
stop: function(event, ui) {
if(ui.position.top>max) {
$(slide).animate({"top": "100px"},600);
}
else if(ui.position.top<0) {
$(slide).animate({"top": "0px"},600);
}
}
}).on( "drag", function( event, ui ) {
});
//Enable Touch Pad Devices
var startY;
slide[0].addEventListener('touchstart', function(e) {
e.preventDefault();
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);
Servicios Web de LabVIEW - Web

App
Enviado por Chris Larson en Mi, 21/05/2014 - 21:35
Anteriormente escrib sobre Servicios Web RESTful en LabVIEW y HTML / CSS

deslizante . Al combinar estos dos post que he creado una aplicacin Web impulsado por
LabVIEW.
jQuery POST y GET comandos se aadieron al ejemplo HTML / CSS deslizante . El
comando POST llama al update.vi y el comando GET llama al read.vi del ejemplo
RESTful . Ahora cada vez que el control deslizante de LabVIEW en main.vi se actualiza el
control deslizante de HTML / CSS se actualiza tambin. Tambin en cualquier momento el
control deslizante HTML / CSS se actualiza, el control deslizante de LabVIEW se
actualiza.

Labview Web Server

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Labview Web Server

Transféré par

Droits d'auteur :

Formats disponibles

LABVIEW WEB SERVER

Servicios Web de LabVIEW - Cmo

Cree una nueva carpeta y el nombre de dist

Seleccione la carpeta dist de nueva creacin.

Guarde el documento como index.html. (Asegrese de que la extensin es html y txt.)

Compruebe que index.html es de hecho un tipo de documento HTML.

Servicios Web de LabVIEW actualizar dinmicamente una

LabVIEW Web Services - Vertical

Uno de los principios fundamentales de diseo de la web es hasta la fecha separada de

Servicios Web de LabVIEW - Crear

LabVIEW Web Services - El CRUD

REST es un estilo y no una norma y hay muchas variaciones en la forma en que se

Servicio Web de LabVIEW

Aadir otro VI a la "slide" de recursos Web y guarde este VI como "actualizacin" y

Herramientas de desarrollo Web

Cascading Style Sheets para

Vea la demostracin en vivo

//Copy Control Value to Indicator Value

Servicios Web de LabVIEW - Web

Anteriormente escrib sobre Servicios Web RESTful en LabVIEW y HTML / CSS

Vous aimerez peut-être aussi