Applicazione relativa al Web-IO digitale:
Pagine web iPhone ottimizzate per applicazioni Web-IO
L’iPhone come telecomando
Le tecnologie mostrate qui fanno riferimento all’iPhone Apple, ma adattando le dimensioni di visualizzazione alla risoluzione del display, possono essere applicate anche a qualsiasi altro cellulare idoneo per Internet. L’unico requisito è il supporto di JavaScript e in particolare di oggetti richiesta HTTP (tecnica AJAX).
Per quanto riguarda la visualizzazione dell’iPhone, ci sono due varianti:
Per agevolare la creazione della pagina web, occorre scegliere una variante e creare la pagina web in base a questa.
Se è disponibile un accesso WLAN l’esempio mostrato funziona anche su tutti gli iPod Touch!
Esempio - azionare le tapparelle con l’iPhone
In questo esempio gli ingressi di azionamento di una tapparella elettrica devono essere azionati mediante gli output di un Web-IO 2x digitale dell’iPhone.
Come già ricordato, nelle pagine web che devono essere ottimizzate in particolare per l’iPhone è importante definire gli elementi HTML di dimensione e posizione utilizzati precisamente al pixel.
Il disegno serve per la disposizione degli elementi e per comprendere il seguente testo sorgente.
<user.htm>
<html>
<head>
<title>Aktuelles Klima</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport"content="width=320" />
<style type="text/css">
<!--
* { font-family:Verdana, Helvetica;}
.description {
position:absolute;
text-align:center;
font-size:18px;
left:0px;
height:25px;
width:320px;
}
.confirm {
position:absolute;
background-color:#99CCFF;
left:0px;
height:160px;
width:320px;
}
.buttons {
position:absolute;
font-size:50px;
width:280px;
height:120px;
left:20px;
}
-->
</style>
</head>
Il testo sorgente inizia con il tag specifico per il Web-IO <user.htm>, richiesto dal Web-IO per la classificazione interna nel File-System. Il tag <user.htm> non viene trasmesso al browser dal Web-IO.
Poi segue il normale campo <head> della pagina web. È importante l’indicazione "viewport". In questo modo lo zoomout della pagina web effettuato normalmente dall’iPhone viene limitato a 320 pixel, in modo che la pagina web sia sempre completa e visualizzata nel ridimensionamento desiderato.
Nella parte successiva del testo sorgente vengono definiti gli elementi DIV per la descrizione e la visualizzazione. Per questi elementi si trovano le rispettive informazioni CSS-Style nell’intestazione. Per definire altezza e posizione sinistra.
<body>
<div class="description" style="top:5px;">Rolladen Steuerung</div>
<div id="go_up" class="confirm" style="top:30px;"></div>
<input type="button" class="buttons" onclick="goup();" style="top:50px;" value="AUF">
<div id="go_dw" class="confirm" style="top:190px;"></div>
<input type="button" class="buttons" onclick="godown();" style="top:210px;" value="ZU">
</body>
</html>
Segue poi il campo <body> della pagina web. Qui vengono utilizzate le classi CSS definite nell’intestazione e le indicazioni più importanti per posizionare i singoli elementi DIV. Agli elementi DIV che devono essere ancora modificati dopo il caricamento della pagina web, viene assegnata una ID. Attraverso onclick si decide quale funzione JavaScript devono richiamare i tasti.
<script language="JavaScript" type="text/javascript">
function DataRequest(sendstring)
{
var xmlHttp = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : xmlHttp = new XMLHttpRequest();
if (xmlHttp)
{
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var ReceiveData = xmlHttp.responseText.split(";");
if (ReceiveData[1]==’2’)
{
document.getElementById(’go_up’).style.backgroundColor=’#99CCFF’;
}
if (ReceiveData[1]==’1’)
{
document.getElementById(’go_dw’).style.backgroundColor=’#99CCFF’;
}
xmlHttp=null;
}
}
}
xmlHttp.open("GET",sendstring, true);
xmlHttp.setRequestHeader("Connection","close");
xmlHttp.setRequestHeader("If-Modified-Since","Thu, 1 Jan 1970 00:00:00 GMT");
xmlHttp.send(null);
}
}
function godown()
{
DataRequest(’outputaccess0?PW=&State=ON&’)
document.getElementById(’go_dw’).style.backgroundColor=’#CCCCCC’;
}
function goup()
{
DataRequest(’outputaccess1?PW=&State=ON&’)
document.getElementById(’go_up’).style.backgroundColor=’#CCCCCC’;
}
</script>
La parte centrale della pagina web è la parte del JavaScript, inserito nel campo <head> della pagina web. Le funzioni goup() e godown() richiamano la funzione DataRequest e inoltrano sotto forma di stringa di comando il comando specifico Web-IO per impostare l’output desiderato. Con questo sistema document.getElementById() inoltre l’elemento DIV situato sotto il tasto diventa grigio, per segnalare all’utente che il clic sul tasto è stato riconosciuto.
La funzione di ricezione incorporata nella funzione DataRequest colora nuovamente l’elemento DIV in azzurro dopo la ricezione della conferma.
Adesso il sito web è pronto e deve solo essere caricato nel Web-IO.
Dal momento che gli output devono attivare il comando delle tapparelle solo con un breve impulso, per entrambi gli impulsi può essere prestabilita ancora una lunghezza dell’impulso di 1000 ms.
Nessun problema: vi mettiamo a disposizione gratuitamente per 30 giorni il Web-IO digitale 2x input, 2x output. Non dovete far altro che compilare l’ordinazione del campione e vi forniremo il Web-IO in prova in conto aperto. Se ci restituite l’apparecchio entro 30 giorni, vi accreditiamo completamente la fattura.