Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

2nd
Дек

Web-интерфес устройства

Posted by Chas under Топик-обзор

У меня такой вопрос. Хочу понять как делается веб-интерфейс. Например как на роутерах. Т.е. когда мы хотим настроить роутер набираем в браузере адрес, заходим не него и можем настраивать или смотреть какие то данные. Например у меня есть термометр с которого контролер берёт данные и шлёт на комп через 232 порт. Мне я так понимаю надо запустить веб-сервер на этом контролере и программу которая будет данные вставлять в веб интерфейс. Как это можно реализовать? Может есть какие то примеры.

raxp:
чтоб реализовать Web-сервер прямо на контроллере, вам придется изучить и использовать TCP стек и добавить специализированный Ethernet-контроллер (благо сейчас их много) или воспользоваться готовым решением — NPort например (стек реализован прямо в корпусе типоразмера RJ-45) или решением от ATmel… это что касается железа/

если вы используете получение данных в компьютере с RS-232, то да, вы можете реализовать web-сервер программно, на обычных сокетах… вот пример… в этом случае веб-сервер, встроенный в вашу программу, которая получает данные с COM- порта по TCP запросу будет генерить динамически страничку HTML, а настройки можно сохранять через методы post от нее, назначенные на кнопки и другие элементы в html-е. Кроме того, обратите внимание, что через браузер можно не только иметь web-морду устройств, но и управлять напрямую… например есть такая утилита-конвертор IP-COM (по ethernet управляет RS-232)

…как это делается в промусловиях думаю тоже будет >>> полезно <<<

дополню подробнее, т.к. вопрос на форуме поднимался неоднократно, но конкретного решения никто не приводил…

Итак:
1- для реализации сервера в своей программе используем сокеты, самое простое воспользуемся TServerSocket (или idHTTPServer), теперь нам нужно по событию onClientRead отправить клиенту (браузеру) страничку, сгенерированную динамически:

procedure TTSMS.tcpClientRead(Sender: TObject;
  Socket: TCustomWinSocket); 
var s: string;
begin
  s:= Socket.ReceiveText;
  packet(s); // это если нужно обрабатывать запрос от клиента — фильтрация
  //http — сервер
  if http.Checked then html(s,floattostr(tm.Value/1000),Socket) // собственно генерим со временем обновления
end;

формирование html осуществим следующим образом:

procedure html(st,ms:string; Socket:TCustomWinSocket);
var i: integer;
     cl:shortstring;
begin
  st:= copy(st,pos(‘/’,st),Pos(‘HTTP/’,st)—pos(‘/’,st)); st:= Trim(st);
//
  Socket.SendText(‘HTTP/1.0 200 OK’+#$0D+#$0A);
  Socket.SendText(‘Server: OPC-GSM’+#$0A);
  Socket.SendText(#$0D+#$0A);
  //формирование-
  Socket.SendText(‘<html><head><title>OPC-GSM</title>’+
                  ‘<STYLE TYPE="text/css"><!—BODY {background-color: white; font-family: Tahoma,
 Verdana, Arial, Helvetica; color: black} TD {font-size: 8pt} TH {font-size: 9pt} —> </STYLE>’+
                  //обновление-
                  ‘<META content="’+ms+‘; URL="" http-equiv=Refresh></head>’+
                  ‘<body><p>Host: ‘+socket.RemoteHost+‘ — ‘+socket.RemoteAddress+‘</p>’+
                  //cкан каналов-
                  ‘<table cellspacing=1 cellpadding=3 bgcolor=gray align=center width=95%>’+
                  ‘<TR bgcolor=#CCCCCC><TH>Channels OPC</TH><TH>Value</TH><TH>Time</TH><TH>MIN
</TH><TH>MAX</TH><TH>Шаблон SMS</TH><TH>Номер GSM</TH></TR>’);
  //выборка-
  if en_chn.Checked then for i:=0 to lv.Items.Count-1 do try
   application.ProcessMessages;
   if (i/2)—(i div 2)=0 then cl:=‘EEFFFF’ else cl:=‘FFFFEE’; //цвет
   Socket.SendText(‘<TR bgcolor=#’+cl+‘>’+
                   ‘<TD bgcolor=#CCCCCC>’+ lv.Items[i].Caption +‘</TD>’+
                   ‘<TD>’+ lv.Items[i].SubItems[2] +‘</TD>’+
                   ‘<TD>’+ lv.Items[i].SubItems[3] +‘</TD>’+
                   ‘<TD></TD>’+
                   ‘<TD></TD>’+
                   ‘<TD></TD>’+
                   ‘<TD></TD>’+
                   ‘</TR>’);
   except end
  else for i:=0 to chann.Items.Count-1 do try
   application.ProcessMessages;
   if (i/2)—(i div 2)=0 then cl:=‘EEFFFF’ else cl:=‘FFFFEE’; //цвет
   Socket.SendText(‘<TR bgcolor=#’+cl+‘>’+
                   ‘<TD bgcolor=#CCCCCC>’+ chann.Items[i].Caption +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[0] +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[1] +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[2] +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[3] +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[4] +‘</TD>’+
                   ‘<TD>’+ chann.Items[i].SubItems[5] +‘</TD>’+
                   ‘</TR>’);
  except end;
  Socket.SendText(‘</table>’+
                  ‘<p>’+formatdatetime(‘dd.mm.yy ‘,date)+formatdatetime(‘hh:nn:ss’,time)+
                  ‘<br>Copyright 2006 <a href=http://raxp.radioliga.com>RAMEDIA</a>, Inc.<br>’+
                  ‘ZP Ukraine. All rights reserved</p></body></html>’);
  //ошибка-
  //Socket.SendText(‘HTTP/1.0 404 Not Found’+#$0D+#$0A);
  //Socket.SendText(‘Server: [webra]’+#$0A);
  //Socket.SendText(#$0D+#$0A);
  socket.Close
 end;

как пример (см. картинку — 1,2) это передача значений из COM порта и OPC каналов SCADA системы и их трансляция в WEB, реализованная в ActiveX модуле OPC — GSM шлюза http://raxp.radioliga.com/cnt/s.php?p=sms.zip

2- прием в браузере, как обычно набираем адрес и порт «localhost:8700» и получаем сгенерированную страничку (см. картинку — 3) в которой данные обновляются, причем количество каналов меняется на стороне сервера, что сразу-же отражается на табличке каналов…

само-собой разумеется, вы можете сделать и фоновые картинки и кнопки и все, чего душа пожелает для обратной реакции (управления) из браузера, при этом в коде генерите методы post, а на сервере вы их обрабатываете (парсите). Для исключения моргания (если нужно чтение, то необходимо обновление, если только управление, то обновлять есс-но не нужно) реализовать можно или фреймами, еще лучше апплетом или вообще перейти на web2.0

ris 1

ris 2

картинка 2, 3.
просьба к модерам, если есть такая возможность расположить картинки друг под другом, а то не красиво совсем по горизонтали глаза сломать можно.
ris 3
ris 4