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

[alexsis_76]

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

[serghei]

В первых выпусках АМС на пустой странице "concept1" было написано - положение информера можно изменить в CSS файле. Надо научиться этому. Тогда можно двигать графики с точностью до пикселя? Мне казалось ,что CSS описывает цвета и как выглядит то , что нарисовано в html части. Штудируем науки дальше...

[alexsis_76]

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

Безымянный_2.jpg (58.78 КБ) 7532 просмотра

можно переместить отдельно надпись, прибор, то и другое вместе

[serghei]

Да, но это при открытом браузере ? Громадность графика мне даже на пользу, учитывая зрение((((. Сейчас прицеплю градусник и попробую считывать реальные данные. Чтобы писать русские буквы на странице надо прикрутить строчку <meta charset="utf-8"> . Шрифт даже прикольнее смотрится. Так это можно загрузить разных библиотек и потом просто выбирать разные варианты индикаторов.

[alexsis_76]

Да, но это при открытом браузере

угу
я ж говорю сохранять надо

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

да примерно так,только надо смотреть совместимость остального кода

Мне казалось ,что CSS описывает цвета и как выглядит то , что нарисовано в html части.

да тебе правильно казалось

[serghei]

Развивая концепцию Рабочего Стола для АМС решил прикрутить часики. Пришлось выучить курс CSS и HTML. А вот со скриптами не получается , поэтому часики живут сами по себе , никак ни с чем не связанные (((. Научился гонять цифры и картинки по экрану. Вообще CSS гениальное изобретение))). Теперь и аналоговые часы живут в АМС. Для тех , кого напрягает правостороннее мышление ( наподобие меня))) картинка

[serghei]

Кто захочет повторить говорю сразу - скрипта , который привязывает реальное время к стрелкам - нет. В первоисточнике сверх навороченный код. Я с ним не справился(( Ссылка на исходник только завтра будет. Просто замените файл CSS и _menu.htm и добавьте картинку и clock.htm

[serghei]

Код взял из этой статьи http://css-live.ru/tricks/chasy-na-css- ... cript.html Расписано очень подробно, но не понятно )). Скрипт привязки реального времени пробовал вставить - не получилось. Чтобы часы пошли "правильно" уберите знак минуса перед 360 градусов

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

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

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}
 

[serghei]

Не прошло и 2 месяца , как свершилось очередное эпохальное событие - Я понял и привязал значение с сенсора к новой библиотеке спидометра!!!! С исходной библиотекой все замечательно , кроме пары моментов :
1 Она спрятана за функцию Eval. Если её "хакнуть" , то можно увидеть все внутренности спидометра ( размер , шкалу делений , цвет ...) и даже поменял на свои , но во взломанном виде работать не захотела. ( А как запаковать обратно в Eval ??)
2 Исходя из первого пункта использовать её стало скучно.
Тогда нашел подобную библиотеку и вставил в АМС. Теперь со спидометром можно делать все что угодно - менять размеры , диапазон шкалы , цвет циферблата и привязывать к любой цифре в АМС. Может быть не совсем корректно прицепил значение с сенсора ( браузер орет ,но показывает))). В любом случае ЭТО РАБОТАЕТ!!!
Сразу пару замечаний по ЕСП. В классическом варианте в SPIFFS остается пару сотен килобайт и все хотелки тупо не помещаются((. Выход - только вариант с SD картой! С ней тоже надо аккуратно - жестко встает ограничение 8.3 и не все названия файлов корректно заливаются. Например Gauge.min.js не отобразится. Даже если сократить до 8 знаков , Файловая система не понимает точку в названии файла! Приходится и её убирать. Объективно скорость заливки с картой раз в 5 выше , чем без неё. В коде привязана температура с сенсора LowPower, Вам надо использовать своё.
PS.Как сделать ,чтобы после картинки можно было продолжить писать текст на форуме???
PSS. Alexsis_76 Этот код намного проще в освоении и нет геморроя со скриптами. Получилось вставить и прицепить температуру с первого раза!
У этого сервера опять проблемы с передачей файлов(((((

[alexsis_76]

Этот код намного проще в освоении и нет геморроя со скриптами

да практически то же самое только без оберток

У этого сервера опять проблемы с передачей файлов(((((

у них у всех проблемы,это так баловство,для серьезных идей и технику надо использовать подобающую(малинка,апельсинка и т д)