визуализация данных

[serghei]

Если я правильно помню, за прозрачность отвечает последняя цифра в

Код: Выделить всё

ctx.fillStyle = 'rgba(200,200,200,1)' 

Попробуйте поменять на 0 или 0.5 .

Эта функция дает красивый эффект ,но не то. При 0.3 появляются 4 убывающих секундных стрелки . Такое ощущение ,что при переходе стрелки на новое место старое не подчищается ( убывает прозрачность). Ищу дальше.

*** Сообщение запрещено. Сообщение похоже на спам. ***

[alexsis_76]

Файл примера rgba.js
script/context2d/scripts/rgba.js
var ctx = document.getElementById('tutorial').getContext('2d');

// Рисуем фон
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);

// Рисуем полупрозрачные прямоугольники
for (i=0;i<10;i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for (j=0;j<4;j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
}
}

[alexsis_76]

такие часы не устроят

Безымянный_222.JPG (216.67 КБ) 6937 просмотров

вот интересно
http://jsgadget.ru/jsmeter.html

[serghei]

Отлично! Но у меня проблема возникает с " оберткой". Я 3 месяца просил объяснить как привязать показания переменных из скетча к стрелке спидометра. Пока не вспомнил, что еще полгода назад скачал Gauge как будто специально написанные для АМС без всяких внешних прибабахов ). Когда оставил чистый HTM, вопрос закрылся.
Теперь двигаясь дальше , "возникла" другая проблема - как привязать нажатие кнопки на экране к скетчу - надо при нажатии отправить код , что бы АМС выполнил команду . Саму кнопку создать оказалось очень просто ( из готового кода), а вот дальше....
Ну и всем фанатам Pink Floyd посвящается ( 44 года вечной музыке). Все средствами CSS. Картинка живая. Заготовка на будущее.

СпойлерПоказать

PF__73.png (332.22 КБ) 6906 просмотров

[alexsis_76]

ну это совсем просто
создаешь кнопку,при нажатии контроллеру отправляется запрос,его нужно распарсить и выполнить требуемое
для кнопки можно обработать событие ONCLICK,либо традиционным способом

<form action="demo.cgi" method="get">
<button type="submit" value="Submit">Отправить</button>
</form>

вот сам парсер

void parseRequest(EthernetClient cl) {
allowMarkers = false;

// index request
if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm")) {
if (openIndexFile(partSuffix(currentDesign))) {sendHtmlAnswer(cl);} else {webFile = SD.open(F("404.htm"));}
allowMarkers = true;
}
else if (StrContains(HTTP_req, GET)) {
// files requests
if (StrContains(HTTP_req, HTM_EXT)) {if (openWebFile()) {sendHtmlAnswer(cl);} else {webFile = SD.open(F("404.htm"));} allowMarkers = true;}
else if (StrContains(HTTP_req, ".css")) {if (openWebFile()) {sendCssAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".js")) {if (openWebFile()) {sendJsAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".pde")) {if (openWebFile()) {sendJsAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".png")) {if (openWebFile()) {sendPngAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".jpg")) {if (openWebFile()) {sendJpgAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".gif")) {if (openWebFile()) {sendGifAnswer(cl);} else {sendErrorAnswer("", cl);}}
else if (StrContains(HTTP_req, ".ico")) {if (openWebFile()) {sendIcoAnswer(cl);} else {sendErrorAnswer("", cl);}}
// Ajax requests
else if (StrContains(HTTP_req, "request_dash")) {sendXmlAnswer(cl); checkPage(); responseDash(cl);}
else if (StrContains(HTTP_req, "request_generic")) {sendXmlAnswer(cl); setLeds(); responseGeneric(cl);}
else if (StrContains(HTTP_req, "request_settings")){sendXmlAnswer(cl); setSettings(); responseSettings(cl);}
else if (StrContains(HTTP_req, "request_themes")) {sendXmlAnswer(cl); setTheme(); responseThemes(cl);}
else if (StrContains(HTTP_req, "request_control")) {sendXmlAnswer(cl); setControl(); responseControl(cl);}
else if (StrContains(HTTP_req, "request_noo")) {sendXmlAnswer(cl); setNoo(); responseNoo(cl);}
else if (StrContains(HTTP_req, "request_mr1132")) {sendXmlAnswer(cl); setMr1132(); responseMr1132(cl);}
else if (StrContains(HTTP_req, "req_el_control")) {sendXmlAnswer(cl); setElectroCtrl(); responseElectroCtrl(cl);}
else if (StrContains(HTTP_req, "req_el_freq")) {sendXmlAnswer(cl); checkOscill(); responseElectroFreq(cl);}
else if (StrContains(HTTP_req, "request_sdcard")) {sendXmlAnswer(cl); responseSd(cl);}
else if (StrContains(HTTP_req, "request_network")) {sendXmlAnswer(cl); responseNetwork(cl);}
else if (StrContains(HTTP_req, "request_nrf24")) {sendXmlAnswer(cl); responseNrf24(cl);}
} // else if (StrContains(HTTP_req, GET))
} // parseRequest ( )

[serghei]

Очередная затея с визуализацией - Механический Счетчик. Для начала картинка

СпойлерПоказать

Counter.png (105.8 КБ) 6760 просмотров

Как видно в браузере ошибок нет , но в таком виде код не работает. Верхнее число это catch (err) {val = "530";} в файле jscount5.js . Подобная конструкция в .htm не работает. Нижнее число это пока просто декремент (уменьшение на 1) просто счетчика. Все файлы библиотек загрузились , css и фоновая картинка с АМС тоже как бы видна , но на экране её нет.
В очередной раз выражаю благодарность Alexsis_76 за его терпение меня , науку программирования и вообще поднятую тему. Собственно знающих людей прошу помощи доделать код и привязать любое ( целое ) число из АМС.
Исходный сайт http://jsgadget.ru/jscounter.html Сами файлы с обрезанными именами ( правило 8.3 и точку в названии файла не понимают)

[alexsis_76]

но в таком виде код не работает

у тебя похоже не идет аякс,запросов не видно.

[serghei]

Да. Вся эта конструкция не видит XML таблицу. Вот код страницы Full21.htm Там все работает. Сначала цепляем макрос. %& <!-- links -->. Потом внешний CSS с фоновой картинкой через <style>. Потом пишем скрипт внутри документа , который формирует страницу

СпойлерПоказать

Код: Выделить всё

<script>
  function start() {
   getFull21Data();
    logoRotator();
    getDashData();
    
  }

Дальше по коду объявляем переменные и внутрь (!) документа вставляем библиотеку спидометра. А потом идет самое интересное - опять обращаемся к странице и формируем запрос

СпойлерПоказать

Код: Выделить всё

       
function getFull21Data() {
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {
        if (this.responseXML != null) {
          // net activ
          insertTick(30, bufferCpuLoad2);
       
         try {
                data_val7 = this.responseXML.getElementsByTagName('tmpTemp')[0].childNodes[0].nodeValue;
                
                
            } catch (err) {
                data_val7 = "30";
            }
 

Ну и заканчиваем request.open("GET", "request_dash" + randomNoCache(), true); .Потом опять макросом обращаемся к внешнему главному скрипту. И на последок выводим тело документа.
За 3 месяца вроде разобрался с этой кухней и все летает очень шустро. А вот с новой конструкцией страницы , где все библиотеки в отдельных файлах , не получается . Я подозреваю , что код запроса ответа надо вставить в jscount5.js файл. Но любые изменения его приводят к отсутствию цифр внутри счетчика.

full21.rar

(5.73 КБ) 213 скачиваний

PS Боюсь опять забанят из - за кода....

[alexsis_76]

вот посмотри пытается загрузить DEMO.xml(замени на свой)у меня локально не грузится,поэтому для меня тут все заканчивается,ты должен увидеть содержимое xml

[serghei]

Что то не взлетела ракета , наверное начинаются вечера на хуторе близ Диканьки )))). Внутри АМС есть двух файловая страница с полно экранным числом Full5.htm + отдельным файлом идет скрипт.И все летает очень шустро. То есть внутри hml файла есть ссылка на скрипт .js и все отлично работает.Код цепляет переменную объема воды с сенсора и на фоне картинки выводит число в полный экран

Full5.rar

(1.32 КБ) 215 скачиваний

Там есть обращение к .js

Код: Выделить всё

<script>
  function start() {
    getFull5Data();
  }
  
%# // scripts.js (mode one)
</script>

Надо разбираться дальше.