Я бы даже написал free opc2web client, или бесплатный opc клиент для получения значений через веб браузер. Пишу это для того чтобы тому кому это может пригодиться, могли бы найти статью через гугл. Для меня уже стало привычкой искать что-то из технической сферы в англоязычном интернете, поэтому и написал по-английски, ну и по-русски тоже, потому что хотя бывает что что-то нужное находится только в рунете.
Правда есть небольшой нюанс - без костылей не обошлось. Из-за политики ограничений кросс доменных запросов, нужно сначала запустить хром с отключением CORS, а там уже запустить html файл с нужным кодом.
Решение нашлось очень простое, всего-то навсего потребовалось добавить в код одну строку, чтобы сервер при ответе в заголовке разрешал кроссдоменные запросы:
Это скрин того как можно настроить визуализацию данных получаемых из opc в веббраузере. При помощи технологий javascript, jquery и ajax каждую секунду запрашивается json строка содержащая нужные значения, а затем выводится в браузере, причем значения меняются без перезагрузки всей страницы.
Решение нашлось очень простое, всего-то навсего потребовалось добавить в код одну строку, чтобы сервер при ответе в заголовке разрешал кроссдоменные запросы:
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
Сам же клиент написан на C# с использованием бесплатной библиотеки, о чем уже писал тут.
Исходный код находится в гитхабе
В конфиге можно задать список тегов, можно сразу же задать для них нужные коэффициенты. Для проверки работоспособности клиента, можно сделать вывод в консоль получаемых тегов. В конфиге указывается номер порта по которому будут запрашиваться данные (если порт открыть через файрвол, то доступ к серваку по IP адресу может быть извне). Для проверки работоспособности клиента можно указать вывод в табличном виде, тогда не придется возиться с парсингом JSON и будет сразу рисоваться в браузере таблица с данными. Ну это вкратце описание функционала, сам код описывать не буду - по сути скрестил родной клиент opc console с классом HttpListener, там правда много чего по расставлял по разным местам, что возможно не совсем и правильно, но в целом все работает: обновление тега происходит только при запросе через браузер.
Вообще мне больше нравится именно оформление через JSON там можно много интересного нарисовать, а данные встроить туда куда надо. Приведу тут код документа получения данных через JSON и отображение их без перезагрузки страницы (брал пример отсюда: http://zetcode.com/javascript/jsonurl/):
<!DOCTYPE html>
<html>
<head>
<title>OPC2WEB</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mypanel"></div>
<!--
Создать ярлык хрома с такими параметрами, чтобы отключить CORS в хроме (разрешить междоменные запросы)
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
-->
<script>
setInterval(function(){
$.ajax({
url: 'http://localhost:45455/',
method: 'get',
dataType: 'json',
success: function(data){
var state = "red";
if (data.tag0>0) state = "green";
var text = `<div style="width: 50px; height: 50px; background-color: ${state}; display:inline-block">
</div>
<div style=" display:inline-block">Скорость: ${data.tag0} м/мин<br>
Нагрузка: ${data.tag1} % <br>
Количество: ${data.tag2} шт.</div>`
$(".mypanel").html(text);}
})
}, 1000);
</script>
</body>
это обновленный интерфейс, где можно раскидать входящие теги по блокам как тебе нравится, блоки добавляются кнопкой +, теги двойным щелчком, цвет блока можно менять щелкнув правой кнопкой по блоку, названия тегов и заголовки блоков можно редактировать, как и единицы измерений. Все добавленные изменения можно сохранить на локальной машине, а так же экспортировать сохранения, чтобы перенести их на другую машину, где позже импортировать ранее полученный код
Видео пример как всем этим пользоваться и выглядит в работе
Для отображения всех тегов с новой строки можно воспользоваться такой конструкцией:
ОтветитьУдалитьfor (key in data){
taglist = taglist + key + " : " + data[key] + "
";
}
https://cloud.mail.ru/public/qLiH/5nPGyaEzy
ОтветитьУдалить