Uma coisa que critico muito na plataforma da Microchip é a falta de documentação sobre este assunto. No entanto, se formos observar, há uma falta de documentação em toda nossa área. Espero assim preencher uma lacuna existente em nossa área.
Bem, se vocês acompanharam nossa última postagem, estarão com um servidor Web pronto para usar. Devemos agora criar nossas variáveis dinâmicas.
Criando variáveis dinâmicas na página Web
A Microchip definiu uma forma para a criação de variáveis dinâmicas em páginas Web. O padrão adotado é colocar o nome da variável entre dois '~'. Assim, poderíamos criar uma página web com o seguinte código HTML:
<html> <head> <title>Contagem de itens</title> </head> <body> <p>Até o momento foram produzidos ~varItens~ itens.</p> </body> </html>Criamos então aqui, uma página que irá mostrar o valor de uma variável chamada varItens. Esta página faz parte de um projeto que irá contar a quantidade de certos itens produzidos em uma indústria. Você deverá salvar esta página em seu diretório de páginas HTML, e então através do programa MPFS.exe (localizado na pasta [Raiz]\Microchip Solutions\Microchip\TCPIP Stack\Utilities), você irá gerar o código para ser incluído em seu programa. Se tudo ocorrer bem, o programa gerará o arquivo HTTPPrint.h com um novo protótipo de função:
void HTTPPrint_varItens(void);Esta é a função que você deverá implementar para que sua variável dinâmica seja corretamente impressa no browser.
Implementando a função de impressão de variáveis dinâmicas
Vamos então criar uma função que imprime o valor de uma variável inteira chamada de quantItens. O nome da variável que escolhemos no código HTML não nos obriga a adotá-lo em parte alguma do código,pois escolhemos ali o nome da nossa função de impressão.
Assim, nossa função se chamará HTTPPrint_varItens. Eis o código-fonte desta função:
void HTTPPrint_varItens(void)
{
char tmpBuff[6];
sprintf(tmpBuff, "%d", quantItens);
TCPPutString(sktHTTP, (BYTE*)tmpBuff);
}
O que fiz foi basicamente converter o valor inteiro contido na variável quantItens para uma string, e usando a função TCPPutString, enviamos os dados para o browser que estiver visualizando a página. Tudo que for enviado através da função TCPPutString será exibido na posição que definimos no código HTML pela variável ~varItens~. Assim, não imprimimos apenas valores inteiros, mas também strings com mensagens para nossos usuários, códigos HTML para formatação de mensagens, etc... Usando AJAX
Como implementar o AJAX em um servidor com PIC? A tarefa não é tão complexa assim. Imaginemos então que nosso projeto tenha que monitorar em tempo real a quantidade de itens na linha de produção, e que o browser deverá atualizar esta leitura sempre. Como implementar isto?
O primeiro passo será criar um arquivo que a página Web que criamos deverá buscar sempre com novas leituras. Este arquivo deverá ser um arquivo XML, e seu código pode ser visto abaixo:
<leitura> <contagem>~varItens~</contagem> </leitura>Observem que o elemento raiz é chamado de leitura, e os itens estão dentro de uma tag que chamamos de contagem.
Aqui neste arquivo, que vamos chamar de leitura.xml, nós colocamos novamente a impressão da variável varItens, que irá chamar a função que definimos acima. Novamente usamos o arquivo MPSF.exe para converter estes arquivos para um formato que possa ser utilizado pelo compilador.
Precisamos agora de algum mecanismo para buscar este arquivo no servidor e atualizar nossa página. Quem trabalha com Web poderia muito bem criar algumas funções em Javascript para usar o AJAX. No entanto, a Microchip já disponibiliza um arquivo Javascript que implementa o AJAX, e já faz o trabalho de atualizar periodicamente uma área de sua página Web.
O grande detalhe aqui é que a Microchip não divulgou muito isto. Não é um arquivo que está separado em uma pasta, somente esperando para ser usado. Este arquivo na verdade faz parte de um de seus exemplos, e pode ser encontrado na pasta [Raiz]\Microchip Solutions\TCPIP Demo App\WebPages2. O nome deste arquivo é mchp.js. Você deverá copiar este arquivo para sua pasta de páginas Web, e fazer algumas modificações no arquivo HTML que apresentamos acima:
<html>
<head>
<title>Contagem de itens</title>
<script type="text/javascript" src="mchp.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function displayItens(r)
{
document.getElementById('leitura').innerHTML = getXMLValue(r, 'contagem');
}
function init()
{
newAJAXCommand('leitura.xml', displayItens, true);
}
/* ]]> */
</script>
</head>
<body onload="init();">
<p>Até o momento foram produzidos <span id="leitura">~varItens~</span> itens.</p>
</body>
</html>
Em primeiro lugar, usamos um elemento SPAN para conter o valor a ser atualizado. Desta forma, limitamos a área onde será atualizada. É importante definir um ID para este SPAN, pois através deste localizaremos este elemento. Definimos também a propriedade onload do elemento BODY. Quando a página carregar, ela irá invocar a função nesta propriedade. Vemos também que o código agora inclui dois scripts javascript: um é nosso arquivo mhcp.js, o outro é o nosso código.
Este nosso código simplesmente invoca a função newAJAXCommand, que faz todo o trabalho. O primeiro parâmetro desta função é o nome do arquivo que ela irá buscar no servidor. No nosso caso, é o arquivo leitura.xml que criamos anteriormente. O segundo parâmetro é o nome da função que será chamada, quando o arquivo for recebido. Criamos a função displayItens para este propósito, e por isto fornecemos este nome para a função. O terceiro parâmetro indica se você deseja repetir este chamado periodicamente, ou se este será um chamado apenas. No nosso caso, como desejamos uma leitura em tempo real, deixamos o valor como true. Esta função permite ainda um quarto parâmetro, que não vamos usar. Este parâmetro te permite enviar outras variáveis via POST para seu servidor.
Enviando o comando, o seu servidor responderá, enviando o arquivo leitura.xml. Quando recebermos o arquivo, ele será processado pela função que você passou como parâmetro para a função newAJAXCommand. Ela deve ter um parâmetro, que é o objeto XML que recebemos. Assim, para obtermos um item deste objeto, usamos a função getXMLValue. Ela recebe dois parâmetros. O primeiro, é o objeto XML que desejamos processar. Passe o objeto que recebemos como resposta. O segundo parâmetro é a tag no arquivo XML, que desejamos obter do arquivo. Como vocês podem se lembrar, colocamos a leitura dentro de uma tag contagem. Assim, passamos isto como parâmetro. Atribuímos então este valor à propriedade innerHTML do nosso SPAN, e pronto! Nosso valor estará sendo atualizado o tempo inteiro.
Conclusão
Temos então nosso servidor Web no PIC, utilizando variáveis dinâmicas e AJAX. A partir deste exemplo muitas outras adaptações poderão ser feitas, para atender aos requerimentos de cada projeto.
Parabens pela iniciativa e pelo descritivo.
ResponderExcluirQual programa voce usa pra vizulaizar ou modificar o exemplo webpage2 do pic?
Olá!
ResponderExcluirEstou usando um editor de textos normal.
Olá amigo!
ResponderExcluirParabéns por essa página, estou querendo fazer um POST via AJAX para o PIC. Estou usando o comando contido no script da microchip. Minha duvida é sobre a "url" (arquivo que será lido no servidor), para um POST que não enviará resposta para a página.Tenho que fazer um arquivo XML com algum comando ou posso enviar uma string nome=valor?nome2=valor2 e o arquivo ser um txt simples, com tipo um Hello World?
Olá Gustavo, parabéns pela iniciativa.
ResponderExcluirEstou começando meus estudo com webserver e PIC, e realmente é muito difícil encontrar informações.
Não conheço nada de programação Web, estou estudando HTML e PHP . Além destas linguagens, quais outras preciso saber para desenvolver a parte visual ?
Tem algum link onde possamos ver seu projeto funcionando ?
Obrigado, e continue compartilhando informações, com certeza ajudará muita gente.
Olá, José Ricardo!
ResponderExcluirO projeto foi para uma rede interna, então eu não tenho um link para ele... No caso da parte visual, se seu foco é embarcar uma página, o mais importante mesmo é aprender o Javascript e o HTML. O PHP não fará muita diferença para páginas embarcadas, por que a parte do servidor é feita pelo próprio microcontrolador e o programa que você está fazendo nele.