ВЕБ МОРДА

[Bulatovor]

А если о концепции - я пришел к выводу -чтоб не портировать систему ко всем возможным устройствам с различными системами - система управления должна быть на веб сервере и управляться по web. А так же чтоб не иметь геммороя с недостаточность производительностью системы и разного рода связанных с этим извращениями - отдельным комп типа нетбука средней производительности( потратить 7-8 тысяч и больше не морочится как ускорить малину или роутер- других задач хватает) в роли сервера. В той же Mogordomo вы можете переписывать все страницы обычным HTML на свой вкус и менять их на свои. Про велосипед это в том смысле что лучше идти с кем -то, а не быть первопроходцем. Если не нравится Mogordomo то ставить её не обязательно, а вот сайт изучить обязательно - там уже много готовых решений.

[St@rz]

Так по ссылке выше и сделано все на html.

[St@rz]

Скачайте и посмотрите примеры.
Открыть файл kendoui.complete.2013.3.1324.trial\examp les\mobile\index.html
Вот в этом стиле я и предлагаю переделать веб-интерфейс.
Кстати, Adaptive Widgets - Scheduler еще понравился как календарь. Это точно стоит использовать.

[St@rz]

Сделал прототип того как хотел бы изменить интерфейс.



Вместо надписи Index будут так же часы с кнопкой перезагрузки.
Кнопки Модули, О_системе, HID_Выключатель и другие переносятся в скрытую группу кнопок (Группа MAILBOX на картинке) которая открывается при нажатии на кнопку в верхнем левом углу или при сдвиге экрана вправо.

Что бы посмотреть как все работает нужно положить папку cyberwrt из архива в папку www и зайти по адресу IP-роутера/cyberwrt/index.html.



Стиль изображения подстраивается под устройство. Например, через google chrome интерфейс как на рисунке. На Android интерфейс черный. На iOS не проверял.
На компьютере по своему (можно, кстати, просто файл index.html из распакованного архива запустить на компьютере что бы посмотреть о чем говорю). Размер окна браузера можно уменьшить до размера мобильного телефона что бы было видно как будет отображаться на нем.

В связи со всем выше написанным вопрос. Как надпись Index заменить на часы с кнопкой "Перезагрузить или восстановить"?

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

Что то запутался в скриптах.

[NEXT]

Сообщение от St@rz

Сделал прототип того как хотел бы изменить интерфейс.

И правда Веб-морда
Почему именно так, а не иначе? Конструктор Кендо неплохой , можно что-то использовать, но почему например не взять за основу типа окон виндоуса. Тоже простой HTML.
Вместо "прямоугольничков " - виджеты с информацией, ну а внутри регулировки, настройки и прочие нужности от кендо и не только, вот часики HTC с температурой, готовый виджет- перенастроить на локальный сервер, итд.
Почему интерфейс умного дома , теплицы - должен выглядить как для гиков, лишь - бы нажималось и регулировалось. Тогда за основу можно взять ТоталКоммандер или из коммандной строки.

[St@rz]

Сообщение от NEXT

И правда Веб-морда
Почему именно так, а не иначе? ... Почему интерфейс умного дома , теплицы - должен выглядить как для гиков, лишь - бы нажималось и регулировалось...

Вот этот вопрос я и поднимаю. Хотелось бы красивый и удобный интерфейс.
Большое спасибо за ссылку на интерфейс Windows-8. Он больше подходит и для маленького и для большого экрана одновременно. Это я выше предлагал.
Жаль, предложенный шаблон требует доработки. На Андроиде не работает, кнопки автоматически размер не изменяют.
Но идея очень хорошая. Кнопки в интерфейс добавляются из шаблонов. Осталось к ним добавить внешний вид и сделать на них краткое отображение информации из модуля. Кнопки должны по размеру автоматически заполнять пустое пространство. На открывшейся странице вверху три кнопки. Первая - возвращение назад или закрытие окна, вторая - название страницы, третья - часы с кнопкой перезагрузки.
Может еще кто то выскажется?

[Admin]

Сделал прототип того как хотел бы изменить интерфейс.

Попробовал в Опере 12.16, при нажатии кнопки домой не возвращается в главное меню

[St@rz]

Можно перетащить влево было. Такое заметил на странице inbox.

Но все же с интерфейсом Metro интересней бы получилось.
Завтра опишу всю логику работы кнопок и меню какую придумал. С описанием работы скриптов и разделов файлов. От существующей структуры веб-интерфейса CyberWrt не отличается. Нужно только кое что переписать. В результате получим адаптивное к разным разрешениям меню в стиле Metro.

[Admin]

Хотелось бы так что бы модули не переделывать

[St@rz]

Сообщение от Admin

Хотелось бы так что бы модули не переделывать

Модули придется так же дописывать, но позже. Предлагаю потом внести изменения с помощью новой прошивки с новым репозитарием.

Теперь о самом меню.
Файл index.html со стандартным содержанием.
В файле index.cgi сделать только отображение файла menu.html.
Внешний вид кнопки берут из модуля.
Сделать три размера кнопок.



Для маленькой кнопки сделать только отображение иконки.
Для средней - иконка и надпись.
Для модулей из которых выводится на кнопку отображение краткой информации назначить большой модуль.

Кнопки должны иметь динамический вид. Либо менять рисунок, либо еще что.

Кнопки поместить в <ul data-role="listview" data-type="group"><li> или другую подобную что бы кнопки заполняли экран по ширине и следующие кнопки опускались во второй ряд. При необходимости их можно было пролистать вниз.

Может получится так что маленькая кнопка идет одна перед большой и оставляет пустое место рядом. Для исправления этого используем jQuery.ui.sortable с сохранением очерёдности кнопок в menu.html.

На страницах модулей вместо отображения меню сделать одну кнопку возврата в главное меню.

Может еще что то упустил. Дополните меня, пожалуйста.

P.S.
Пару ссылок для внешнего оформления в стиле Metro.
Все, что нужно для создания веб-сайтов в стиле интерфейса Metro в Windows 8
Источники для оформления сайта в стиле Modern UI (Metro UI)