Jump to content
Форум по продукции MOXA

UC-7112-LX-Plus... может баловство... а может и нет.


Recommended Posts

Собственно тут сервер, который видоизменяет картинку в BMP файле... которую располагаю в RAM диске. К серверу могут быть подключено несколько клиентов... и каждый из них будет изменять эту картинку не мешая другому клиенту. Картинка в свою очередь отображается браузером. Вот:

-мы запускаем клиента и запрашиваем подсказку:

emo-5@emo-5:~/coding/bmp/testBmpClient$ ./testBmpClient
==== test ====
help
==========
"help" -- current help screen
"quit" -- for exit

SRING MODE:
"connect" -- connect to bmp_server
"disconnect" -- disconnect from bmp_server

"fileopen" -- open file for work (not creating)
"fileclose" -- close opened file

"setpixel" -- dawing one pixel in opened file (command "fileopen") <X and Y - coordinats>, <R,G,B - color>
"line" -- dawing line in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"circle" -- dawing circle in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"circlefill" -- dawing filled circle in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"circlefill_fuzzy" -- dawing filled circle fuzzy in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"rect" -- dawing rectangle in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"rect_filled" -- dawing rectangle filled in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"triangle" -- dawing triangle in opened file (command "fileopen") <X1,Y1 and X2,Y2 and X3,Y3 - coordinats>, <R,G,B - color>

BINARY MODE:
"bconnect" -- connect to bmp_server
"bdisconnect" -- disconnect from bmp_server

"bfileopen" -- open file for work (not creating)
"bfleclose" -- close opened file

"bsetpixel" -- dawing one pixel in opened file (command "fileopen") <X and Y - coordinats>, <R,G,B - color>
"bline" -- dawing line in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"bcircle" -- dawing circle in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"bcirclefill" -- dawing filled circle in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"bcirclefill_fuzzy" -- dawing filled circle fuzzy in opened file (command "fileopen") <X1 and X2 - coordinats>, <RADIUS - radius of circle>, <R,G,B - color>
"brect" -- dawing rectangle in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"brect_filled" -- dawing rectangle filled in opened file (command "fileopen") <X1,Y1 and X2,Y2 - coordinats>, <R,G,B - color>
"btriangle" -- dawing triangle in opened file (command "fileopen") <X1,Y1 and X2,Y2 and X3,Y3 - coordinats>, <R,G,B - color>

==========

- делаем кодключение к серверу на устройстве IA-240/UC-7112-LX-PLUS
 

connect
input IP address:192.168.0.240
input IP port:8881
IP port: 8881

-Указываем файл BMP (на RAM диске с которым работать предстоит):

fileopen
Path and filename:/home/httpd/ramdisk/bmp_monitor/work.bmp
count 49
Opened

Рисуем из командной строки клиента

rect_filled
X1:200
Y1:200
X2:250
Y2:250
R:250
G:250
B:0
Ok
circle
X:300
Y:300
RADIUS:200
R:0
G:250
B:255
Ok
line
X1:0
Y1:100
X2:150
Y2:0
R:255
G:255
B:255
Ok
triangle
X1:10
Y1:10
X2:250
Y2:250
X3:300
Y3:50
R:100
G:250
B:250
Ok
triangle
X1:20
Y1:250
X2:250
Y2:200
X3:150
Y3:10
R:250
G:0
B:0
Ok
circlefill
X:250
Y:250
RADIUS:50
R:255
G:255
B:255
Ok

Понятное дело, что используем подсказки в клиенте

Собственно результат - картинка в браузере:

post-8993-0-67369900-1508754077_thumb.png

 

Соответственно сервер настраивается при запуске - имеется ввиду порт прослушивания. Картинка копируется в RAM диск из какого-нибудь файла BMP. Содержимое файла и соответственно размер по желанию... начальная картинка какая угодно... я выбрал чёрный фон 640х480 (сделана графическим редактором). Ну и сервер с клиентом прилагаются:

bmp.zip

 

Это всё или баловство... или как вариант реализации вывода данных в ВЕБ сервер множеством независимых автономных устройств.

 

Содержимое страницы сервера:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


  
  <meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>BMP Монитор</title></head><body style="color: rgb(0, 0, 0); background-color: rgb(51, 51, 51);" alink="#000099" link="#000099" vlink="#990099">
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">

  <tbody>
    <tr>
      <td style="vertical-align: top; text-align: center;"><img id="workimg" style="width: 640px; height: 480px;" alt="" src="/ramdisk/bmp_monitor/work.bmp"><br>
      </td>

    </tr>
  </tbody>
</table>

<br>

<br>

<SCRIPT LANGUAGE="JavaScript">


function loadImg() {
    var imageUrl = "/ramdisk/bmp_monitor/work.bmp"  + "?" + new Date().getTime();
    document.getElementById("workimg").setAttribute("src", imageUrl);
    //setInterval('loadImg()',1000);
    //setInterval(loadImg, 1000);
    setTimeout(loadImg, 1000);  // Вызвать снова через 1 сек
}

 
setInterval(loadImg(),1000);

</SCRIPT>

</body></html>

Конечно это как вариант.

Link to comment

Ух ты! :o

 

Понимаю конечно, что смешно. Но в какой-то томент (давно было) скачал исходники игры "Elite" для PalmOS... и переделал на Windows Mobile. Конечно с косяками, но работало. Потом захотел что бы на разных устройствах (уже с Linux) одна и та же программа, поделённая на куски  и размещалась на разных устройствах соединенных по сети... но работала как единое целое. Началом было отображение с ВЕБ интерфейсом... эксперимент. В последствии отображение двух графиков с разных устройств на одной картинке. При этом устройства сами рисуют данные. Собственно можно было и по другому - используя средства WEB сервера (Apache), точнее ВЕБ страницы... что и применяется везде. Но целью начальной было... иметь один экран для отображения многими.

Так что не ругайте меня за мою глупость!

 

Link to comment
  • 7 months later...

Доброго времени суток!

Подскажите, если можно! Имеем тестовый проект... отрисовка кнопок и выполнение функций при нажатии на них(смотреть только на черный холст... остальное мусор):

snapshot2.thumb.png.e04ff613a27b314b1ae76875e01a6caf.png

вот архив:

wsobj.zip

Нажимаем на кнопки на чёрном холсте и происходит отрисовка фигур.

Для компиляции изменить Maktfile (makesrc/Makefile) выбрав компилятор:

###########################
# Simple Generic Makefile #
###########################

#Это для Android (Terminal IDE)
######################
#CC=terminal-gcc
######################

#Это для всех Debian/Raspbian
######################
CC=gcc
######################

#Это для MOXA
######################
#PREFIXPATH=/usr/local/arm-linux/bin
#CC=$(PREFIXPATH)/arm-linux-gcc
######################

CFLAGS=-c -Wall
LDFLAGS=-lpthread -lcrypto -lm

#SOURCES=*.c
SOURCES=$(shell ls *.c)

OBJECTS=$(SOURCES:.c=.o)
EXECUTABLE=../bin/testobj

all: $(SOURCES) $(EXECUTABLE)

$(EXECUTABLE): $(OBJECTS)
        $(CC) $(LDFLAGS) $(OBJECTS) -o $@

.c.o:
        $(CC) $(CFLAGS) $< -o $@

install:
        install -m 0755 $(EXECUTABLE) $(HOME)/local/bin

clean:
        rm -rf *o $(EXECUTABLE)

После выполнения:

./create.sh

Получим в директории work:

igor@debian-i:~/coding/GCC/wsobj/work$ ls -al
итого 1004
drwxr-xr-x  2 igor igor   4096 Июн 11 12:18 .
drwxr-xr-x 11 igor igor   4096 Июн  9 07:30 ..
-rw-r--r--  1 igor igor   7406 Июн 11 12:18 favicon.ico
-rw-r--r--  1 igor igor   6081 Июн 11 12:18 index.html
-rwxr-xr-x  1 igor igor     32 Июн 11 12:18 start.sh
-rwxr-xr-x  1 igor igor  58106 Июн 11 12:18 testobj
-rw-r--r--  1 igor igor 925101 Июн 11 12:18 work.bmp
igor@debian-i:~/coding/GCC/wsobj/work$

Это надо скопировать в рабочую(тестовую) директорию WEB сервера, запустить ./start.sh:

igor@debian-i:~/coding/GCC/wsobj/work$ ./start.sh
BMP filename:  work.bmp
Size Struct info 124 dec   7c hex
Version "5"
--- step x 3
--- step y 1920
---------------------------------------------------------------------------------
Type         : 4d42
Size          : 921738 bytes
Start addr: 8a hex
---------------------------------------------------------------------------------
Widht :  640
Haight : 480
Bit in Pixel(color) 24
starting loop redraw.....                                                                                                                                                                      
res = 1                                                                                                                                                                                        
cnt buttons = 7 

Холст (work.bmp) определён, а сервер готов принимать WS запросы на порт 4321 и исполнять некие команды с открытой в браузере страницы.

А пролема в том, что в JavaScript на странице надо для каждого адреса прописывать

var wsApp = (function()
{
	var wsApp = {};
	var wsUri = "ws://127.0.0.1:4321/";
	//var wsUri = "ws://192.168.0.240:4321/";
	var outputEl;
	var wscreen;
	var websocket;
	//

	wsApp.init = function() {
	        outputEl = document.getElementById("output");
		wscreen = document.getElementById("work");
	        testWebSocket();
	};
 
	function testWebSocket(){
	        websocket = new WebSocket(wsUri);
	        websocket.onopen = onOpen;
	        websocket.onclose = onClose;
	        websocket.onmessage = onMessage;
	        websocket.onerror = onError;
		websocket.send
	}
 
	function onOpen(evt){
		writeToScreen("CONNECTED");
		doSend("WebSocket rocks");
	}
 
	function onClose(evt){
		writeToScreen("DISCONNECTED");
	}
 
	function onMessage(evt){
		var ta = document.querySelector("#work");
		var blob = new Blob([evt.data], {type: "image/bmp"});
		ta.src = URL.createObjectURL(evt.data);
	}

	function onError(evt){
		writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
	}

	function doSend(message){
		writeToScreen("SENT: " + message);
		websocket.send(message);
	}

	wsApp.send = function(message) {
		websocket.send(message);
	}

	function writeToScreen(message){
		var pre = document.createElement("p");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		outputEl.appendChild(pre);
	}

	return wsApp;
})();

а именно wsUri. Получается адрес страницы одно, а адрес websocket другое. Хотелось бы автоматом. Если разместить страницу с содержимым на другое устройство, то и wsUri надо прописывать для него. Знатоки JavaScript подскажите как победить... или надо через PHP формировать страницу на сервере?

Спасибо!

Edited by oiv_1968
добавить
Link to comment

Доброго времени суток! И пот, что вышло:

snapshot3.thumb.png.1fd062d825c3e3ba96454ebbf6c923fc.png

Вот всё отрисовано на холсте 640х480 24 бита.

отрисовка фигур при нажатии соответствующей кнопки. Координаты и т.п. просто так фиксированной величины... а цвет фигуры задаётся элементами "slider"

Тестовая программа представляет собой websocket сервер, который запускается как программа. Доступ к нему через веб страницу, загружаемую с веб сервера устройства. Всё в архиве. В корне запускаемый скрипт create.sh... при запуске компиляция и копирование всего, что надо в директорию work. Все из неё скопировать в рабочую директорию веб сервера (у меня Apache) устройства (у меня UC-7112-Lx-plus) и запустить start.sh. А из браузера надо войти на веб страницу устройства. И у вас указанное на рисунке... программа слушается кнопок и настроек и всё это на холсте. В самом коде HTML+JS нет никаких элементов управления, а только определение координат курсора и посылке их при клике мышкой на холсте. Ну понятное дело в программе testobj анализируются события и координаты, а так же реагирование на элементы "button" и "slider". При изменении содержимого холста... он посылается на веб страницу клиента.

Кнопки (в main.c):

	....
	buttonsINIT();	//инициализируем кнопки
	buttonCREATE(10, 10, 80, 20, "circle\0", 255, 127, 127, 0,0,0, &test1); //создание кнопки (координаты, размер, текст, цвет, адрес функции)
	buttonCREATE(100, 10, 80, 20, "circlef\0", 127, 255, 127, 0,0,0, &test2);
	buttonCREATE(190, 10, 80, 20, "rect\0", 127, 127, 255, 0,0,0, &test3);
	buttonCREATE(280, 10, 80, 20, "reectf\0", 192, 192, 192, 0,0,0, &test4);
	buttonCREATE(370, 10, 80, 20, "triangle\0", 192, 0, 0, 0,0,0, &test5);
	buttonCREATE(460, 10, 80, 20, "clear\0", 255, 255, 255, 0,0,0, &test8);
	slidersINIT();	//инициализируем слайдервы
	sliderCREATE(10,100,20,100, 0,255, (int16_t*)(&R), 255,255,255, 255,0,0); //создаём слайдер (координаты, размер, цвет, адрес параметра)
	sliderCREATE(35,100,20,100, 0,255, (int16_t*)(&G), 255,255,255, 0,255,0);
	sliderCREATE(60,100,20,100, 0,255, (int16_t*)(&B), 255,255,255, 0,0,255);
	...
	while(1)
	{
		buttonCTRL(mX, mY, 0);	//проверяем состояние кнопок и выполняем и перерисовываем если нажаты
		sliderCTRL(mX, mY, 0);	//проверяем состояние слайдеров и меняем параметр и перерисовываем если клик на них
		...
	}

	//а это одна из выполняемых функций
	void test1(void)
	{
		BMP_Circle(320, 240, 50, R, G, B); //один из цветов задаётся кликом на одном из слайдеров
	}

При этом приём, отправка, анализ в отдельных потоках программы.

Вот архив: wsobj.zip

Всё... теперь можно через браузер отображать что угодно... практически в реальном времени, при этом иметь элементы управления.

Link to comment
  • 2 weeks later...

Доброго времени суток!

Всё это работает, но... но происходит утечка памяти со стороны браузера(клиента). Постепенно увеличивается объём занятого пространства ОЗУ.

И вот такое (index.html) решает проблему:

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

<title>test4</title></head><body style="color: white; background-color: black;" alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center;"><img id="work" style="width: 640px; height: 480px;" onclick=mouseclick() alt="" src=""></div>

<script type="text/javascript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

var X;
var Y;
var wx;
var wY;
var WX;
var WY;
//параметры лдля отправки
var msend;	//строка для отправки
var Wx = 0;	//координата X курсора
var Wy = 0;	//координата Y курсора
var Wk = 0;	//флаг клика

function init() {
	if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
	document.onmousemove=mousemove;
}

function mousemove(event) {
	var mouse_x = y = 0;
	if (document.attachEvent != null) {
		mouse_x = window.event.clientX;
		mouse_y = window.event.clientY;
	} else if (!document.attachEvent && document.addEventListener) {
		mouse_x = event.clientX;
		mouse_y = event.clientY;
	}
	var we = document.getElementById("work");
	X = we.clientWidth;
	Y = we.clientHeight;
	status="x = " + mouse_x + ", y = " + mouse_y;
	wx = mouse_x - we.getBoundingClientRect().left;
	wy = we.getBoundingClientRect().top - mouse_y + Y;
	if((wx > 0) && (wx < X) &&	
	(wy > 0) && (wy < Y)) {
		WX = wx.toFixed(0);
		WY = wy.toFixed(0);
	}
}

var wsApp = (function()
{
	var wsApp = {};
	var wsUri = "ws://" + window.location.hostname + ":4321/";
	var outputEl;
	var wscreen;
	var websocket;
	//
	var ta;
	var blob;

	wsApp.init = function() {
	        outputEl = document.getElementById("output");
		wscreen = document.getElementById("work");
	        testWebSocket();
		ta = document.querySelector("#work");
		blob = new Blob([evt.data], {type: "image/bmp"});
	};

	function testWebSocket(){
	        websocket = new WebSocket(wsUri);
	        websocket.onopen = onOpen;
	        websocket.onclose = onClose;
	        websocket.onmessage = onMessage;
	        websocket.onerror = onError;
	}
 
	function onOpen(evt){
		writeToScreen("CONNECTED");
		doSend("WebSocket rocks");
	}

	function onClose(evt){
		writeToScreen("DISCONNECTED");
	}

	function onMessage(evt){
		ta.src = window.URL.createObjectURL(evt.data);
		window.URL.revokeObjectURL(ta.src);
		cache.delete('work.bmp');
		cache.clear();
	}

	function onError(evt){
		writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
	}

	function doSend(message){
		writeToScreen("SENT: " + message);
		websocket.send(message);
	}

	wsApp.send = function(message) {
		websocket.send(message);
	}

	function writeToScreen(message){
		var pre = document.createElement("p");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		outputEl.appendChild(pre);
	}

	return wsApp;
})();

//клик
function mouseclick()
{
	if((WX > 0) && (WX < X) &&
	(WY > 0) && (WY < Y)) {
		Wx = WX;
		Wy = WY;
		Wk = 1;
	}
	msend = "mouse_X: " + Wx + "\nmouse_Y: " + Wy + "\n";
	wsApp.send(msend);
}

init(); 
window.addEventListener("load", wsApp.init, false);

</script>
</body></html>

И ещё изменил код на Си (точнее пока изменяю)... в сторону ускорения работы.

Link to comment
  • 9 months later...

Доброго времени суток! Интерфейс через браузер, если не надо графики тяжеловат:( А вот консольный интерфейс вроде ничего:

 

 

10.thumb.png.03ffb44f51eef46a2afa34608d2704b8.png

Таким образом можно стало делать некий интерфейс в консоли... простой интерфейс в BASH. с появлением после инсталяции компонента dialog:

www-data@Moxa:~$ dialog
cdialog (ComeOn Dialog!) version 1.3-20190211
Copyright 2000-2017,2018 Thomas E. Dickey
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

* Display dialog boxes from shell scripts *

Usage: dialog <options> { --and-widget <options> }
where options are "common" options, followed by "box" options

Special options:
  [--create-rc "file"]
Common options:
  [--ascii-lines] [--aspect <ratio>] [--backtitle <backtitle>] [--beep]
  [--beep-after] [--begin <y> <x>] [--cancel-label <str>] [--clear]
  [--colors] [--column-separator <str>] [--cr-wrap] [--date-format <str>]
  [--default-button <str>] [--default-item <str>] [--defaultno]
  [--exit-label <str>] [--extra-button] [--extra-label <str>]
  [--help-button] [--help-label <str>] [--help-status] [--help-tags]
  [--hfile <str>] [--hline <str>] [--ignore] [--input-fd <fd>]
  [--insecure] [--item-help] [--keep-tite] [--keep-window] [--last-key]
  [--max-input <n>] [--no-cancel] [--no-collapse] [--no-cr-wrap]
  [--no-items] [--no-kill] [--no-label <str>] [--no-lines] [--no-mouse]
  [--no-nl-expand] [--no-ok] [--no-shadow] [--no-tags] [--nook]
  [--ok-label <str>] [--output-fd <fd>] [--output-separator <str>]
  [--print-maxsize] [--print-size]
  [--print-text-only <text> <height> <width>]
  [--print-text-size <text> <height> <width>] [--print-version] [--quoted]
  [--reorder] [--scrollbar] [--separate-output] [--separate-widget <str>]
  [--shadow] [--single-quoted] [--size-err] [--sleep <secs>] [--stderr]
  [--stdout] [--tab-correct] [--tab-len <n>] [--time-format <str>]
  [--timeout <secs>] [--title <title>] [--trace <file>] [--trim]
  [--version] [--visit-items] [--week-start <str>] [--yes-label <str>]
Box options:
  --buildlist    <text> <height> <width> <list-height> <tag1> <item1> <status1>...
  --calendar     <text> <height> <width> <day> <month> <year>
  --checklist    <text> <height> <width> <list height> <tag1> <item1> <status1>...
  --dselect      <directory> <height> <width>
  --editbox      <file> <height> <width>
  --form         <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1>...
  --fselect      <filepath> <height> <width>
  --gauge        <text> <height> <width> [<percent>]
  --infobox      <text> <height> <width>
  --inputbox     <text> <height> <width> [<init>]
  --inputmenu    <text> <height> <width> <menu height> <tag1> <item1>...
  --menu         <text> <height> <width> <menu height> <tag1> <item1>...
  --mixedform    <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1> <itype>...
  --mixedgauge   <text> <height> <width> <percent> <tag1> <item1>...
  --msgbox       <text> <height> <width>
  --passwordbox  <text> <height> <width> [<init>]
  --passwordform <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1>...
  --pause        <text> <height> <width> <seconds>
  --prgbox       <text> <command> <height> <width>
  --programbox   <text> <height> <width>
  --progressbox  <text> <height> <width>
  --radiolist    <text> <height> <width> <list height> <tag1> <item1> <status1>...
  --rangebox     <text> <height> <width> <min-value> <max-value> <default-value>
  --tailbox      <file> <height> <width>
  --tailboxbg    <file> <height> <width>
  --textbox      <file> <height> <width>
  --timebox      <text> <height> <width> <hour> <minute> <second>
  --treeview     <text> <height> <width> <list-height> <tag1> <item1> <status1> <depth1>...
  --yesno        <text> <height> <width>

Auto-size with height and width = 0. Maximize with height and width = -1.
Global-auto-size if also menu_height/list_height = 0.
www-data@Moxa:~$ 

Распаковать 

dialog.zip

в устройство, с правами root запустить install.sh. В директорию /usr будет помещён каталог terminfo и в /usr/bin помещён файл dialog. После этого в консоли будет доступен собственно dialog (d + TAB):

www-data@Moxa:~$ d
date         delgroup     depmod       dhcpcd       dirname      discard      do           downramdisk  
declare      deluser      df           dialog       dirs         dmesg        done         du           
www-data@Moxa:~$

А в директории samples будут запускаемые примеры применения этой утилиты.

Link to comment
  • 3 months later...
В 17.06.2018 в 16:48, oiv_1968 сказал:

Доброго времени суток! И пот, что вышло:

snapshot3.thumb.png.1fd062d825c3e3ba96454ebbf6c923fc.png

Вот всё отрисовано на холсте 640х480 24 бита.

отрисовка фигур при нажатии соответствующей кнопки. Координаты и т.п. просто так фиксированной величины... а цвет фигуры задаётся элементами "slider"

Тестовая программа представляет собой websocket сервер, который запускается как программа. Доступ к нему через веб страницу, загружаемую с веб сервера устройства. Всё в архиве. В корне запускаемый скрипт create.sh... при запуске компиляция и копирование всего, что надо в директорию work. Все из неё скопировать в рабочую директорию веб сервера (у меня Apache) устройства (у меня UC-7112-Lx-plus) и запустить start.sh. А из браузера надо войти на веб страницу устройства. И у вас указанное на рисунке... программа слушается кнопок и настроек и всё это на холсте. В самом коде HTML+JS нет никаких элементов управления, а только определение координат курсора и посылке их при клике мышкой на холсте. Ну понятное дело в программе testobj анализируются события и координаты, а так же реагирование на элементы "button" и "slider". При изменении содержимого холста... он посылается на веб страницу клиента.

Кнопки (в main.c):


	....
	buttonsINIT();	//инициализируем кнопки
	buttonCREATE(10, 10, 80, 20, "circle\0", 255, 127, 127, 0,0,0, &test1); //создание кнопки (координаты, размер, текст, цвет, адрес функции)
	buttonCREATE(100, 10, 80, 20, "circlef\0", 127, 255, 127, 0,0,0, &test2);
	buttonCREATE(190, 10, 80, 20, "rect\0", 127, 127, 255, 0,0,0, &test3);
	buttonCREATE(280, 10, 80, 20, "reectf\0", 192, 192, 192, 0,0,0, &test4);
	buttonCREATE(370, 10, 80, 20, "triangle\0", 192, 0, 0, 0,0,0, &test5);
	buttonCREATE(460, 10, 80, 20, "clear\0", 255, 255, 255, 0,0,0, &test8);
	slidersINIT();	//инициализируем слайдервы
	sliderCREATE(10,100,20,100, 0,255, (int16_t*)(&R), 255,255,255, 255,0,0); //создаём слайдер (координаты, размер, цвет, адрес параметра)
	sliderCREATE(35,100,20,100, 0,255, (int16_t*)(&G), 255,255,255, 0,255,0);
	sliderCREATE(60,100,20,100, 0,255, (int16_t*)(&B), 255,255,255, 0,0,255);
	...
	while(1)
	{
		buttonCTRL(mX, mY, 0);	//проверяем состояние кнопок и выполняем и перерисовываем если нажаты
		sliderCTRL(mX, mY, 0);	//проверяем состояние слайдеров и меняем параметр и перерисовываем если клик на них
		...
	}

	//а это одна из выполняемых функций
	void test1(void)
	{
		BMP_Circle(320, 240, 50, R, G, B); //один из цветов задаётся кликом на одном из слайдеров
	}

При этом приём, отправка, анализ в отдельных потоках программы.

Вот архив: wsobj.zip

Всё... теперь можно через браузер отображать что угодно... практически в реальном времени, при этом иметь элементы управления.

Доброго времени суток!

А вот если прибегнуть к socat (тут в темах раздела рассматривалось), то можно отказаться от вебсервера(apache). Уж больно тяжеловат он. Особенно заметно на устройствах с малым количеством ОЗУ.

Вот подобный скрипт, взятый из примеров:

#!/bin/bash
#

socat \
    -v -d -d \
    TCP-LISTEN:1234,crlf,reuseaddr,fork \
    SYSTEM:"
        echo HTTP/1.1 200 OK; 
        echo Content-Type\: text/plain; 
        echo; 
        echo \"Server: \$SOCAT_SOCKADDR:\$SOCAT_SOCKPORT\";
        echo \"Client: \$SOCAT_PEERADDR:\$SOCAT_PEERPORT\";
    "

если изменить, на выдачу необходимой страницы позволит реализовать работу без запуска apache, что существенно сократить занимаемое озу, которого в UC7112LX-Plus всего 32М которого как правило свободной около 10М.  Кстати испытано с несколькими одновременными подключениями.

Link to comment
  • 7 months later...

Доброго времени суток!

https://yadi.sk/d/bh3lmBTtdxx8Rg

Это "bashsimplecurses" взято из гитхаба. Для работы надо утилиты fold и sec, которых нет на устройстве. Почитал что это за утилиты и реализовал их на Си именно для устройства. Всё положил в архив. Из надо взять из него и поместить в /usr/sbin (у меня директория /usr примонтирована на SD карту.) после этого этот пакет будет работать. Следует только учесть что sleep 0.5 не будет работать на устройстве, потому-что реализован usleep. И потребуется ncurses:

  https://yadi.sk/d/exxyLTUgKewiog

Ранее он уже упоминался.

Утилиты сделаны самодельные (читал о них и смотрел примеры их работы) и на полное соответствие не претендуют... совпадают только их названия и функционал из примеров. Испытано на bashsimplecurses.

Теперь можно писать скрипты с псевдографикой. В примерах видел применение в CGI.

Link to comment

Доброго времени суток! Вот:

https://yadi.sk/d/WHwi29WSaRfNoQ

Это ещё один вариант как проба с вебсокетом. Ещё не производил доработку собственно сервера WS. Добавились только элементы.17.png.0e9f5e67f077a39a081dfe8133352aa3.png

Так же работает на устройстве UC7112LX-Plus и IA240. Но в отличии от PC не быстро. Все элементы в динамике (кнопки и слайдеры в работе). Да и индикаторы так же.

Тут шла проверка на перегрузку индикаторов (они грязно-желтым... вертикальный и горизонтальный), которые от 0 до 100. Слайдеры (красный и зеленый - горизонтальный и вертикальный) индицируют параметр угла (0...360 градусов) ну и индикаторы секторальные 4 штуки - у всех начальный угол разный (0, 90, 180, 270). При клике на любой слайдер в соответствующем месте будет установлен соответствующий угол. При работе идёт инкремент угла... при значении угла = 360 он обнуляется и идет опять инкремент, но установка ручная по клику слайдера. Кнопки орисовывают фигуры, которые позже затираются постоянной перерисовкой области экрана. Всё отображается браузером и клик на элементах управления на нем же.

Для запуска применять скрипт start.sh в директории work в которой все файлы. Их поместить на устройство в доступную веб серверу область... и запуск стартом скрипта. Из браузера на ПК зайти на устройство с соблюлением пути к файлу index.html... ну как обычно.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...