Page 1 of 6 123 ... LastLast
Results 1 to 15 of 79

Thread: Создание мобильной версии веб-интерфейса роутера для iPhone/iPad

  1. 22-03-2011, 15:53 #1
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660

    Lightbulb Создание мобильной версии веб-интерфейса роутера для iPhone/iPad

    Quote Originally Posted by capau View Post
    ничего нового в последних 10-15 постах нет.
    Пробуем сделать шаг вперёд.
    Вот попробовал реализовать на Вашем шаблоне страничку настройки модема.
    Это промежуточный результат. Выкладываю, чтобы получить рекомендации и замечания.
    Attached Files Attached Files
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  2. 22-03-2011, 18:54 #2
    rss
    rss is offline Forum Guru
    Join Date
    Jan 2010
    Posts
    1,260
    Quote Originally Posted by dlukanidin View Post
    Пробуем сделать шаг вперёд.
    Вот попробовал реализовать на Вашем шаблоне страничку настройки модема.
    Это промежуточный результат. Выкладываю, чтобы получить рекомендации и замечания.
    Для начала - замечательно.
    Только не надо забывать про обязательность кодировки UTF-8 для русских букв в general.js, если уж это указано в index.html.

    jQuery лучше сразу взять минимизированную версию.

    Дальше надо думать об обменном формате с сервером. Либо плоское отображение всех нынешних параметров, либо дерево параметров по группам, сответствующим префиксам. + использование средств jQuery и, возможно, https://github.com/douglascrockford/JSON-js .
    Code:
    $.post("json/set", myJSONObject.toJSONString(),
 			function(data){
 				alert(data);
 			});
    В любом случае надо стремиться к тому, чтобы веб-интерфейс можно было максимально отлаживать без наличия веб-сервера (например с функциями заглушками, блокирующими передачу данных).

    И еще, с т.з. минизации действий браузера в js. Строки лучше делать максимально длинными, но не выполнять лишних конкатенаций.
    * Wiki *
    Reply With Quote Reply With Quote
  3. 22-03-2011, 22:20 #3
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660
    Quote Originally Posted by rss View Post
    Для начала - замечательно.
    Только не надо забывать про обязательность кодировки UTF-8 для русских букв в general.js, если уж это указано в index.html.
    Честно говоря даже не посмотрел. Редактировал в Dreamweawer, а там с ходу даже не нашёл где поменять. Уйти что ли на SharePoint.
    jQuery лучше сразу взять минимизированную версию.
    Это не удобно для отладки. Поменять никогда не поздно при переходе к варианту на роутере.
    Дальше надо думать об обменном формате с сервером. Либо плоское отображение всех нынешних параметров, либо дерево параметров по группам, сответствующим префиксам. + использование средств jQuery и, возможно, https://github.com/douglascrockford/JSON-js .
    Code:
    $.post("json/set", myJSONObject.toJSONString(),
 			function(data){
 				alert(data);
 			});
    Я бы предложил так:
    1. чтение - получаем срез nvram по набору префиксов типа
    getNVRAM(['wan_modem','wan_proto','conf'])
    или
    var nvram="<%nvram_get_y("['wan_modem','wan_proto','conf']")%>"
    2. запись - одна переменная типа {'name':'value',...}
    Но в любом случае не дерево, чтобы не заниматься разбором.
    Возьмите пожалуйста решение на себя.
    В любом случае надо стремиться к тому, чтобы веб-интерфейс можно было максимально отлаживать без наличия веб-сервера (например с функциями заглушками, блокирующими передачу данных).
    Я правда с локальным сервером отлаживаюсь, но в том варианте в котором выложено можно по моему и напрямую править.
    И еще, с т.з. минизации действий браузера в js. Строки лучше делать максимально длинными, но не выполнять лишних конкатенаций.
    Принимается. После получения всех отзывов внесу правки.
    Сейчас занимаюсь доработкой мелочей, в ближайшее время выложу более полный вариант, практически с полным функционалом, кроме собственно работы с nvram.
    Открытый вопрос - как сделать адресацию страниц.
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  4. 23-03-2011, 10:30 #4
    rss
    rss is offline Forum Guru
    Join Date
    Jan 2010
    Posts
    1,260
    Quote Originally Posted by dlukanidin View Post
    Честно говоря даже не посмотрел. Редактировал в Dreamweawer, а там с ходу даже не нашёл где поменять. Уйти что ли на SharePoint.
    Поддерживаю Notepad++. Для js можно Eclipse.


    Quote Originally Posted by dlukanidin View Post
    Это не удобно для отладки. Поменять никогда не поздно при переходе к варианту на роутере.

    Я бы предложил так:
    1. чтение - получаем срез nvram по набору префиксов типа
    getNVRAM(['wan_modem','wan_proto','conf'])
    или
    var nvram="<%nvram_get_y("['wan_modem','wan_proto','conf']")%>"
    2. запись - одна переменная типа {'name':'value',...}
    Но в любом случае не дерево, чтобы не заниматься разбором.
    Возьмите пожалуйста решение на себя.
    Вариант httpd под JSON я уже выкладывал. Для отладки можно взять откомпилированную версию. Там как раз реализуется плоский вариант и только на чтение. Для записи надо думать как делать обработчики, чтобы можно было менять состояние маршрутизатора без его перезагрузки.


    Quote Originally Posted by dlukanidin View Post
    Открытый вопрос - как сделать адресацию страниц.
    Для интерфейса как такового адрес страницы вторичен. Для того, чтобы можно было сохранить ссылку - как вариант искусственный параметр-идентификатор, по которому js-интерфейс раскрывает то, что нужно. Значением этого идентификатора можно, например, сделать имя нынешних страниц без ".asp".

    Общая схема работы следующая. Запрос значений сохраненных параметров с сервера по всем страницам однократно. Далее средствами AJAX опрос только изменяющихся параметров. Т.е. при изменении страницы с сервера ничего не запрашивается и никакой лишней перезагрузки страниц нет. Сохранение значений - в момент нажатия кнопки.
    * Wiki *
    Reply With Quote Reply With Quote
  5. 23-03-2011, 13:40 #5
    capau
    capau is offline Member
    Join Date
    Oct 2010
    Posts
    91
    может часы перенести куда-нибудь под лого, а то тут целая дискуссия была по поводу шапки и особенно её высоты, а тут нате ))))
    и DOCTYPE наверное лучше использовать не xhtml
    + я изначально взял форму и верстку самого контента из нынешней прошивки, но в таком виде она слишком расточительна к экранному пространству, нужно переверстывать не в таблицах, а блоками и делать компактней. поэтому возможно придется табличную часть в скриптах переписать
    рад прогрессу ))
    Reply With Quote Reply With Quote
  6. 23-03-2011, 15:24 #6
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660
    Quote Originally Posted by capau View Post
    может часы перенести куда-нибудь под лого, а то тут целая дискуссия была по поводу шапки и особенно её высоты, а тут нате ))))
    и DOCTYPE наверное лучше использовать не xhtml
    + я изначально взял форму и верстку самого контента из нынешней прошивки, но в таком виде она слишком расточительна к экранному пространству, нужно переверстывать не в таблицах, а блоками и делать компактней. поэтому возможно придется табличную часть в скриптах переписать
    рад прогрессу ))
    1. Часы - см. коммент, делал только для себя, чтобы ночью не заиграться.
    2. Верстка - делайте рабочий шаблон, если получим ОК от ЛПР, переделаю, не проблема.
    3. Скорректировал в соответствии с замечаниями Rss.
    4. Вставил простейшую (прямую) навигацию по страницам. Добавил реальные данные для редактирования. Выкладываю.
    Attached Files Attached Files
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  7. 23-03-2011, 16:24 #7
    theMIROn
    theMIROn is offline Undeveloper
    Join Date
    Jul 2008
    Posts
    3,277
    Blog Entries
    1
    Хорошо выглядит.
    На мой взгляд теряется куча места над меню, его можно поднять в самый верх, иначе приходится листать. Если есть возражения - возражаем.
    Дальше, слишком большие отступы (по 10px) - приходится листать меню, чтобы попасть в System Log например.
    Чтобы не листать - стоит добавить submenu3 | sumbenu1 | submenu3 выше табов.
    ASUS WL5xx: FW 1.9.2.7-d-rXXXX / обсуждение прошивки [RU] / firmware discussion [EN] | bip irc proxy
    ASUS RT-N1x: FW 1.9.2.7-rtn-rXXXX / обсуждение прошивки [RU] / firmware discussion [EN] | fake ident daemon
    Reply With Quote Reply With Quote
  8. 24-03-2011, 13:19 #8
    capau
    capau is offline Member
    Join Date
    Oct 2010
    Posts
    91
    Quote Originally Posted by dlukanidin View Post
    Пробуем сделать шаг вперёд.
    Вот попробовал реализовать на Вашем шаблоне страничку настройки модема.
    пропала плавность движения меню.
    я могу исходник свой выложить если нужно
    Reply With Quote Reply With Quote
  9. 24-03-2011, 14:20 #9
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660
    Quote Originally Posted by capau View Post
    пропала плавность движения меню.
    я могу исходник свой выложить если нужно
    Так я его и так вижу, зачем выкладывать. С плавностью ничего не делал, изменения в Ваши функции вносил минимальные, animate не трогал. Просто сейчас переход по ссылкам сделан, может быть из-за этого. Переход этот сделан во вре'менном исполнении, т.к. для меня самого не очень пока понятно, как сделать правильно и красиво.
    Сейчас доделаю часть касающуюся nvram и перезагрузки (как я это вижу), сделаю ещё одну страничку более или менее реальную и вернусь к меню.

    А вообще - структуру меню оставляем такой , или она будет изменена? Самое время решить этот вопрос.
    Потом было предложение поднять меню и изменить его форматирование на более компактное. Сделаете ? а то у меня красивая вёрстка не получается.

    P.S. Если нужно, для проверки сгенерированного html, могу его подцепить и выложить.
    P.P.S Насчёт часов - ещё раз, выкладываю свой тестовый вариант. В окончательном их, по крайней мере на этом месте, не будет. Не сочтите за труд, кому мешается, выкинуть одну строчку из кода.
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  10. 24-03-2011, 14:42 #10
    capau
    capau is offline Member
    Join Date
    Oct 2010
    Posts
    91
    Quote Originally Posted by dlukanidin View Post
    Так я его и так вижу, зачем выкладывать. С плавностью ничего не делал, изменения в Ваши функции вносил минимальные, animate не трогал. Просто сейчас переход по ссылкам сделан, может быть из-за этого. Переход этот сделан во вре'менном исполнении, т.к. для меня самого не очень пока понятно, как сделать правильно и красиво.
    Сейчас доделаю часть касающуюся nvram и перезагрузки (как я это вижу), сделаю ещё одну страничку более или менее реальную и вернусь к меню.

    А вообще - структуру меню оставляем такой , или она будет изменена? Самое время решить этот вопрос.
    Потом было предложение поднять меню и изменить его форматирование на более компактное. Сделаете ? а то у меня красивая вёрстка не получается.

    P.S. Если нужно, для проверки сгенерированного html, могу его подцепить и выложить.
    P.P.S Насчёт часов - ещё раз, выкладываю свой тестовый вариант. В окончательном их, по крайней мере на этом месте, не будет. Не сочтите за труд, кому мешается, выкинуть одну строчку из кода.
    структура меню -- больной вопрос ))) нужно собирать консилиум и решать как реорганизовывать меню и настройки.
    внешний вид переделаю, будет чуть короче и чуть выше, это все через CSS делается, думаю проблем не возникнет
    насчет компактности: версталось не только под курсор мыши. но и под пальцы, если делать расстояние между кнопками меню меньше (как в нынешней) не очень удобно с телефона/планшета тыкать, т.е. так хоть какая то универсальность.

    еще такой вопрос: может сделать страницу авторизации, не как сейчас запрос пароль\логин при входе, а именно страница и на ней тогда можно будет разместить некоторые ссылки, например на фтп-шар
    Reply With Quote Reply With Quote
  11. 24-03-2011, 15:01 #11
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660
    Quote Originally Posted by capau View Post
    еще такой вопрос: может сделать страницу авторизации, не как сейчас запрос пароль\логин при входе, а именно страница и на ней тогда можно будет разместить некоторые ссылки, например на фтп-шар
    У нас сейчас практически вся обработка делается на стороне клиента. Я не совсем понимаю, как это будет реализовано. Давайте попробуем и посмотрим, что получится.
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  12. 24-03-2011, 15:50 #12
    rss
    rss is offline Forum Guru
    Join Date
    Jan 2010
    Posts
    1,260
    Quote Originally Posted by capau View Post
    структура меню -- больной вопрос ))) нужно собирать консилиум и решать как реорганизовывать меню и настройки.
    Как только появляется динамическое построение страниц, можно думать о том, как сделать минимальные (только необходимые параметры, а остальное по-умолчанию) и полноценные режимы отображения параметров с переключателем режима.

    + неплохо, когда имеется подсказка по каждому параметру (в идеале с примерами) и вовсе не в виде всплывающего окна, как это сделано сейчас.
    * Wiki *
    Reply With Quote Reply With Quote
  13. 25-03-2011, 11:44 #13
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660

    Следующий шаг

    Вариант с подготовленными для сохранения данными и подготовленной логикой для ребута.

    Вопрос - скорее к гуру, чем для обсуждения, имеет ли смысл хранить варианты настроек (как config1,2,3 из примера) предназначенные только для морды непосредственно в JSON, типа
    nvram set conf1="{'abc1':'def1','abc2':'def2','abc3':'def3', 'abc4':'def5'}"
    ?

    -- добавлено --

    Quote Originally Posted by rss View Post
    Как только появляется динамическое построение страниц, можно думать о том, как сделать минимальные (только необходимые параметры, а остальное по-умолчанию) и полноценные режимы отображения параметров с переключателем режима.
    Сделал возможность отображения страниц в режиме 'expert'. Отображаются только вкладки и секции у которых нет атрибута 'expert'.
    При этом предполагается, что этот атрибут устанавливается в nvram и действует для всей морды. Теперь нужно, чтобы кто-то придумал для этого атрибута web интерфейс - как и где его устанавливать.
    Соответствующие изменения выложу со следующей версией.
    Attached Files Attached Files
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
  14. 25-03-2011, 14:36 #14
    lavrikvorcuta
    lavrikvorcuta is offline Senior Member
    Send a message via ICQ to lavrikvorcuta
    Join Date
    Mar 2010
    Posts
    148
    посмотрел веб морду.
    скажу так смотрится лучше чем старя, но большие отступы есть их бы уменьшить.
    а так зачетно.
    http://lavrik-vorcuta.blogspot.com/
    http://durovo.ru/
    rt-n16 + Tomato firmware + usb hdd 1.5tb + Flash 8gb + WI FI Bridge Rostelecom internet 8 mbits
    Reply With Quote Reply With Quote
  15. 27-03-2011, 00:22 #15
    dlukanidin
    dlukanidin is offline Forum Guru
    Join Date
    May 2010
    Posts
    660

    Следующий шаг

    Внёс изменения и дополнения. Добавил страничку статуса модема.
    Весь список изменений внутри в файле change.log. Там же и некоторые открытые вопросы по уже сделанным изменениям.
    В целом - б' ольшая часть типов полей ввода уже реализована. Чтобы идти дальше необходимо принимать рабочие решения:

    1. Обмен с сервером. В основном запись результатов.
    2. Структура меню и навигация - с фреймами, как сейчас или что-то ещё.

    Кроме этого кто-то должен будет подключиться к написанию страниц. Простые (типа статуса) я могу сделать сам, но что касается настроек отдельных компонентов - ИМХО должны писать люди разбирающиеся в тонкостях.
    Я думаю, если человек 10 гуру подключатся, то быстро появится новая морда.

    Quote Originally Posted by lavrikvorcuta View Post
    большие отступы есть их бы уменьшить.
    Нет возражений, редактируйте файл стилей, выкладывайте Ваш вариант, с удовольствием посмотрим.
    Attached Files Attached Files
    ASUS RT-AC66U <Merlin 384.15>
    ASUS RT-N66U <Merlin>
    ASUS RT-N16 <Merlin>
    ☀ Макет нового WEB интерфейса ☀ Для iPhone/iPad ☀
    Reply With Quote Reply With Quote
Page 1 of 6 123 ... LastLast
« Previous Thread | Next Thread »

Similar Threads

  1. Изменение скорости WAN & LAN интерфейса роутера
    By MAV in forum Russian Discussion - РУССКИЙ (RU)
    Replies: 204
    Last Post: 16-03-2014, 09:08
  2. Создание зеркала репозитория Debian|Ubuntu
    By poisons in forum Russian Discussion - РУССКИЙ (RU)
    Replies: 12
    Last Post: 30-06-2013, 13:39
  3. Проблемы с подключением iPhone, iPad, iPod, iMac и MacBook по Wi-Fi
    By gekko_g in forum Russian Discussion - РУССКИЙ (RU)
    Replies: 58
    Last Post: 12-05-2013, 16:51
  4. Руссификация веб-интерфейса прошивки
    By SIP in forum Russian Discussion - РУССКИЙ (RU)
    Replies: 123
    Last Post: 18-04-2013, 15:51
  5. Превью новой версии прошивки 1.9.2.7-9
    By Oleg in forum Russian Discussion - РУССКИЙ (RU)
    Replies: 804
    Last Post: 14-03-2009, 19:42

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules