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

alexsis_76 · Сообщение **alexsis_76** » Пн дек 05, 2016 2:11 pm

Буду разбираться

можешь загружать разные картинки

alexsis_76 · Сообщение **alexsis_76** » Пн дек 05, 2016 2:47 pm

<inputs>
<mRtc>1</mRtc>
<mEthernet>2</mEthernet>
<mSd>1</mSd>
<mServer>1</mServer>
<mMajor>2</mMajor>
<mLaurent>2</mLaurent>
<mUpload>2</mUpload>
<mPirs>2</mPirs>
<mContacts>2</mContacts>
<mTemp>2</mTemp>
<mElectro>1</mElectro>
<mLeds>2</mLeds>
<mKeys>2</mKeys>
<mNoo>2</mNoo>
<mNrf24>1</mNrf24>
<auth>0</auth>
<uptime>0 00:00:22</uptime>
<freeRAM>27416</freeRAM>
<sdSize>3952</sdSize>
<cycDelay>0</cycDelay>
<cycInSec>42</cycInSec>
<lifer>3</lifer>
<time>18:45</time>
<day>2</day>
<month>12</month>
<weekday>6</weekday>
<tmpTemp>0.0</tmpTemp>
<smkSmoke>1</smkSmoke>
<voltage>220.00</voltage>
<power>880.00</power>
</inputs>

это собственно и есть XML

serghei · Сообщение **serghei** » Пн дек 05, 2016 5:27 pm

Неужели получилось ???!!!!! Пока понял общий принцип создания домашней страницы. А вот теперь как бы вместо " задымление - нет" вставить картинку? Кусок кода скрипра

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

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

    
             try {
            var vol2_= Math.round(parseInt(c1Vol2), 0);
            document.getElementById("dash-c1-vol2").innerHTML = vol2_;
            document.getElementById("dash-c1-vol2-hide").innerHTML = vol2_;
            
              } catch (err) { }  
              
              
                 // Smoke
            try {var smokeSmoke = this.responseXML.getElementsByTagName('smkSmoke')[0].childNodes[0].nodeValue;} catch (err) {smokeSmoke = "";}
            switch (smokeSmoke) {
              case "0":
                smokeSmoke_ = 'нет';
                break;
              case "1":
                smokeSmoke_ = 'обнаружен дым!';
                break;
              default:
                smokeSmoke_ = 'состояние неизвестно';
              break;
            }            
            try {document.getElementById("smoke-smoke").innerHTML = smokeSmoke_;} catch (err) { }
            
          
          // Voltage & power
          try {
            var dvolt = this.responseXML.getElementsByTagName('voltage')[0].childNodes[0].nodeValue;
          } catch (err) {
              dvolt = "0";
            }

И Hml

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

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

   </head>
   <body onload="start();">
   
   <div class="level-full concept2">
 
       <div class="level">
 
          <div class="block">
          
              <h2>Температура в комнате</h2>
              
                 <canvas id="an_gauge_1" data-title="Сырость" data-units="Hum. &#37;H" width="200" height="200" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_1').setValue(data_val7);}, 200);"></canvas>
                 <!--
                 <canvas id="an_gauge_2" data-title="Outside" data-units="Temp. &deg;C" width="200" height="200" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_2').setValue(data_val2);}, 200);"></canvas>
                 -->
                 
                  <div align="right">

                    <canvas id="clock" width="200" height="200">Извините, ваш браузер не поддерживает тег canvas</canvas>

              </div>
            </div>
              <div class="cell-2">
          <div class="box">
            
            <p>Задымление: <span class="value" id="smoke-smoke">...</span></p>
           
          </div>
        </div>
        </div>    

    <div style="clear:both"></div>
  
   </div>   
 </body>
</html>

Ну и тестовая картинка. Теперь уже можно гонять картинки но экрану.Но размеры надо указывать в процентах , иначе композиция будет зависеть от монитора.

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

: Home_page.jpg (209.22 КБ) 5937 просмотров

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

serghei · Сообщение **serghei** » Ср дек 07, 2016 6:07 pm

Пора уже свою галерею "домашних страниц" создавать для АМС , а не только для МД )))). Пока тренируюсь на кошках...До конца еще не разобрался как формируется страница ,но уже где то близко.....
Все это актуально только в варианте с SD картой. В простом ЕСП можно создать 2-3 страницы и все....память закончилась(((
PS А что надо дописать , чтобы вместо текста " обнаружен дым" вывести меняющуюся картинку в свою область ?

serghei · Сообщение **serghei** » Пт дек 23, 2016 10:22 am

alexsis_76 писал(а):можешь загружать разные картинки

Так как на носу Новый Год ,в АМС на ЕСП валом памяти - появилась очередная бредовая идея - Сделать что то типа фото-рамки с Новогодними картинками или с любимым котом ))). А так как программирование только начал изучать ,взял готовый код для изучения и воткнул в АМС. На сайте http://dreamhelg.ru/2009/08/how-to-buil ... lide-show/ хоть и написано ,что в опере не работает - вроде открывается, но не отображаются первые две картинки. Или это продолжение глюка с "проглатыванием" ? Тогда я с этим столкнулся первый раз, хотя всё на SD карте.
Вот как бы еще автоматизировать смену фоток? Просто скачиваем архив с сайта , переименовываем файл index.html в любой другой ( правило 8.3 !!!!!) и закидываем все на карточку. Открываем "Ваш IP/название файла.htm" .Наслаждаемся )))

: Маленькие картинки не отображаются,хотя в полный экран есть; АМС_слайдшоу.png (325.88 КБ) 5783 просмотра

PS. Под XP Оперой загружаются все картинки...

alexsis_76 · Сообщение **alexsis_76** » Пн дек 26, 2016 3:34 am

Вот как бы еще автоматизировать смену фоток?

заведи скрипт на странице,он будет сам загружать что скажешь

nick7zmail · Сообщение **nick7zmail** » Пн дек 26, 2016 6:30 am

serghei писал(а):Пора уже свою галерею "домашних страниц" создавать для АМС , а не только для МД )))). Пока тренируюсь на кошках...До конца еще не разобрался как формируется страница ,но уже где то близко.....
Все это актуально только в варианте с SD картой. В простом ЕСП можно создать 2-3 страницы и все....память закончилась(((
PS А что надо дописать , чтобы вместо текста " обнаружен дым" вывести меняющуюся картинку в свою область ?

Я думаю что-то типа

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

<script>
function chg(id){
    var el = document.getElementById(id);
    if (el.src.indexOf("1.jpg")>0){
        el.src="2.jpg"
    }else{
        el.src="1.jpg"
    }
}
</script>

И вызывать из скетча при смене статуса.

PS: Кстати - часики можно сделать прозрачными))

: 1й.jpg (14.74 КБ) 5658 просмотров

У меня были они когда-то на домашней странице))

serghei · Сообщение **serghei** » Пн дек 26, 2016 8:44 am

Спасибо за код. Буду "попробовать". На том же сайте есть код ,как сделать нормальное слайд-шоу , но пока для меня слишком сложно(((. С часиками вообще интересная история - Сначала взял код полностью на CSS - очень красивый ,но не синхронизировался с компом. Пришлось взять этот , убрал всё лишнее и не красивое , а вот как сделать прозрачный фон - не нахожу.

nick7zmail · Сообщение **nick7zmail** » Пн дек 26, 2016 8:56 am

serghei писал(а):Спасибо за код. Буду "попробовать". На том же сайте есть код ,как сделать нормальное слайд-шоу , но пока для меня слишком сложно(((. С часиками вообще интересная история - Сначала взял код полностью на CSS - очень красивый ,но не синхронизировался с компом. Пришлось взять этот , убрал всё лишнее и не красивое , а вот как сделать прозрачный фон - не нахожу.

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

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

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

Попробуйте поменять на 0 или 0.5 (так прозрачный, с указанным фоном должен выйти...например 0,0,0,0.7 наверное неплохо будет смотрется...только стрелки в белый перекрасить, или, к примеру, я под конец в зеленый перекрасил, а секундную - в красный).

serghei · Сообщение **serghei** » Пн дек 26, 2016 9:01 am

Со стрелками как раз все понятно. Вообще хочу оставить только стрелки и циферблат - все остальное прозрачное. Тогда можно будет воткнуть на любую картинку. Спасибо!
PS А по поводу картинки. Сначала грузится фоновая , потом спидометры и все надписи и в конце идет привязка чисел или состояния сенсоров. Так вот при статусе 1 дымового датчика хочется поменять фоновую картинку. Так будет нагляднее. Наверное надо будет перегружать всю страницу?

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

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

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

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

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

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

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

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

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

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

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