Перейти к публикации
iT4iT.CLUB

Таблица лидеров


Популярные публикации

Отображаются публикации с наибольшей репутацией на 25.05.2020 во всех областях

  1. 1 балл
    Доброе время суток Думаю, да, тут больше работы в самом web интерфейсе нежели на стороне микроконтроллера. Давайте начнем с последнего. В прошивке микроконтроллера идем в файл sensors.h b и ищем объект отписывающий типы листы на которых отображаются элементы. class device { public: typedef enum list_t {out = 1, in = 2}; /* ... */ } Можете расширить тип list_t и указать свои варианты typedef enum list_t {out = 1, in = 2, garage = 3, bathroom = 4}; Таким образом при инициализации датчика вы сможете указывать новые листы sensors.add(new knob_t(-100, 0, "1", "RSSI", "dbm"), device::garage, "rssi",[&](){ return wifi.isConnected() ? WiFi.RSSI() : 0; }); На этом работа с прошивкой закончена и переходим к web интерфейсу. В файле index.htm имеется блок, отвечающий за размещение датчиков. <div class="sensorsContent" hidden> <div class="menu"> <div id="sensors" class="list1"></div> <div id="graph"></div> <div id="settings"></div> </div> <div id="list1"></div> <div id="list2" hidden></div> <div prototype hidden> <div class="sensor"> <div class="title">{title}</div> <div class="unit">{unit}</div> <input class="knob {name}" data-width="200" data-displayPrevious=true data-fgColor="#FFF" data-skin="tron" data-thickness=".1" value="0" data-min="{min}" data-max="{max}" data-step="{step}" readonly> </div> </div> </div> Все датчики, в зависимости от их целочисленного идентификатора в нашей прошивке микроконтроллера в типе list_t помещаются в <div> блоки <div id="list1"></div> <div id="list2" hidden></div> Добавляем новые листы <div id="list1"></div> <div id="list2" hidden></div> <div id="list3" hidden></div> <div id="list4" hidden></div> Вообще правильнее было автоматизировать процесс создание листов, как это сделано с датчиками, но это отдельная история Теперь необходимо распространить на новые листы необходимые стили, для этого в разделе с css разметкой ищем .sensorsContent #list1, .sensorsContent #list2 { max-width: 90%; margin: auto; min-height: calc(100vh - 160px); } Аналогичным образом добавляем новые листы .sensorsContent #list1, .sensorsContent #list2, .sensorsContent #list3, .sensorsContent #list4 { max-width: 90%; margin: auto; min-height: calc(100vh - 160px); } На этом этапе Ваши датчики уже будут распределяться по листам, но видеть мы будем только первые два, переключаемые дефолтным значком на панели. И на этом этапе мы переходим к самому сложному т.к теперь мы не просто хотим что-то добавить, а нуждаемся в модификации имеющейся логики. До этого листы просто переключались между собой, а теперь, по всей видимости, нам нужно расширить панель меню и добавить просто кучу значков. Но предварительно, мы сделаем еще одно добавление, а точнее его уже сделаете Вы. Каждая иконка хранится в виде BASE64 хэша бинарной иконки в формате PNG. Если мне не подводит память, то размер иконки составляет 35х35 пикселей. Если Вы не меняете глобально этот интерфейс, то советую не использовать иконки другого размера для данного меню. Для перевода PNG иконок в используемый формат я использовал этот ресурс https://www.base64-image.de/ После перевода вы получите строку, которую необходимо использовать в css разметке для придания новым иконкам желаемого вида. На этом стоит остановиться подробнее. Уже имеющиеся иконки меню Вы можете найти в css разметке поискав по ключевым словам .menu #sensors.list Вы найдете следующее, я укажу в виде фото т.к объем текста просто огромный. Надеюсь Вы используете какой-то более мене нормальный редактор, и он преобразует этот огромный набор текста в читаемый вид, я использую Visual Studio Code По аналогии добавьте свои иконки для новых элементов меню, не забудьте менять номера листов На этом этапе Вы уже должны иметь набор новых иконок с именами: list1, list2, list3 и т.д. Теперь их необходимо организовать в меню. И тут мы возвращаемся к нашему начальному html блоку, который был описан в самом начале, это тот, в котором мы добавляли новые листы. Давайте теперь добавим и таким образом отобразим все имеющиеся иконки. На этом этапе в интерфейсе имеются все новые иконки, но логика работы их переключения все еще не изменена. Давайте исправим это. Для этого нам понадобится внести изменения и JavaScript код нашего с Вами проекта. Это последний и самый сложный этап. Ищем следующий код $(".menu #sensors").click(function() { var list = $(this).attr("class"); switch (list) { case 'list1': $("#list1").fadeToggle('slow', function(){ $("#list2").fadeToggle('slow'); }); break; case 'list2': $("#list2").fadeToggle('slow', function(){ $("#list1").fadeToggle('slow'); }); break; } $(this).toggleClass("list1", !$(this).hasClass("list1")).toggleClass("list2", !$(this).hasClass("list2")); }); Он отвечает за переключение между листами и, что нам не нужно, изменением внешнего вида начальной иконки. Давайте преобразуем его в следующий вид. Сразу скажу, что так делать не правильно, как и многое в этом проекте, но так будет нагляднее и Вам не придется делать лишние шаги которые могут запутать. В идеале, можно добавить новый, одинаковый идентификатор, для все наших слове (<div>) и по нему плавно скрыть все элементы и потом плавно показать нужный. $(".menu #sensors").click(function() { var list = $(this).attr("class"); $("#list1").hide(); $("#list2").hide(); $("#list3").hide(); $("#list4").hide(); $("#"+list).show(); }); Теперь ищем код который скрывает первоначальные элементы меню if (hideSensorsMenu) $(".menu #sensors.list1").css("display", "none"); И удаляем т.к в Вашем случае скрытие не требуется. Его есть смысл организовывать при динамическом построении меню и т.д и т.п. PS: я не могу ручаться за достоверность всех описанных действий т.к не проверял их на практике. Это просто совет, который должен направить Вас, ... и только направить.
×
×
  • Создать...