Виджет HTML



  • Задача - интегрировать в iH страничку с которой будет доступ к веб-интерфейсу устройств умного дома.

    Моя реализация была немного "заумной" - на HTML и JS был написан целый сайт. В зависимости откуда заходишь (из вне или из внутренней сети) скрипт на JS отдавал локальный адрес или адрес с проброшенным портом, таким образом в меню формировались ссылки на устройства, IP которых были прописаны в js-файле. При нажатии на пункт меню в iframe (размер всего сайта и iframe внутри зависел от разрешения экрана устройства) открывался интерфейс устройства.

    1. Попробовал сделать обычные ссылки с атрибутом target="Content" - они все равно открываются в новом окне.

    2. Встроил iframe - в нем открываются страницы. То есть жить можно:)

    3. JS не работает от слова совсем. Например, обычная вещь типа . Не говорю уже о скриптах на странице.

    4. CSS и скрипты куда можно положить чтобы страничка открывалась с соответствующим оформлением? Или же придется CSS прописывать в style head-а?

    Вообще так подумал - вы столько всего интересного придумали. Например, можно сделать экран на котором разместить кнопки с изображениями маршрутизаторов, камер, коммутаторов и прочего, но у них нет действия "Перейти по ссылке"…

    Правда хочется перейти по ссылке не в новом окне, а тут же в iH. Значит нужен какой-то виджет типа iframe, после добавления которого в свойствах кнопки при выборе "Перейти по ссылке" появится возможность выбора iframe с конкретным именем.

    Тогда виджет HTML вообще не нужен будет:)

    В общем, поэкспериментировал. С CSS надо быть осторожнее, иначе весь корневой дизайн можно "угробить". Так и не могу понять почему у меня страница отображается вот с таким большим отступом?
    HTML_поле.png

    Поскольку JS не поддерживается, то не могу рассчитать какой высотой должен быть iframe на разных разрешениях:(…

    В общем мой вердикт - HTML виджет можно использовать только в качестве "хранилища" ссылок... для чего еще - придумать не могу.

    Пользователи iH - поделитесь для чего вы используете HTML-виджет???



  • Попробуйте в виджете HTML прописать команду:

    <iframe src="http://www.rbc.ru" frameborder="0" width="100%" height="100%"><br/><br />Теоретически можно открывать в виджете HTML любой сайт<br/><br />Например, у меня есть проект на предприятии, который работает на двух серверах.<br/><br />Так вот на главном сервере я с помощью виджета HTML в iframe вызываю экран с информацией с другого сервера.<br/><br />А чтобы не подбирать размеры нужно в iframe выставить width="100%" и height="100%<br/><br />Если нужно вызывать окно intrahouse с другого сервера без ввода пароля, можно в команду добавить параметры аккаунта:<br/><br /><iframe src="http://xxx.xxx.xxx.xxx:xxxx/?username=admin&password=admin" frameborder="0" width="100%" height="100%"></iframe>



  • Добрый день,

    простой пример виджета HTML

    @Alex_Jet:

    1. Попробовал сделать обычные ссылки с атрибутом target="Content" - они все равно открываются в новом окне.

    2. Встроил iframe - в нем открываются страницы. То есть жить можно:)

    3. JS не работает от слова совсем. Например, обычная вещь типа . Не говорю уже о скриптах на странице.

    4. CSS и скрипты куда можно положить чтобы страничка открывалась с соответствующим оформлением? Или же придется CSS прописывать в style head-а?

    Вы можете писать весь код сразу в виджите HTML используя для этого HTML/JS/CSS.

    Например, можно создать файл index.html, открыть текстовым редактором, написать код и просмотреть в любом браузере, далее можно просто скопировать весь код в виджет HTML. Если вы используете веб сервер и код пишите там, то в виджите HTML нужен только iframe на ваш сайт.

    Рассматривайте содержимое виджета HTML как виртуальный файл index.html исходя из этого и пишите свой код, все ограничения действуют в рамках этого файла и браузера, виджет никак не ограничивает функционал. Напишите свой код и логику в файле index.html и откройте любым браузером, убедитесь что код исправен.



  • Вставляю

    <iframe src="http://192.168.0.1" frameborder="0" width="100%" height="100%"><br/><br />А вижу 400 Bad Request<br/><br />Cross Site Action detected!<br/><br /> В место панели роутера. Роутер dir320 dd wrt.</iframe>



  • @cd1room:

    Вставляю

    <iframe src="http://192.168.0.1" frameborder="0" width="100%" height="100%"><br/><br />А вижу 400 Bad Request<br/><br />Cross Site Action detected!<br/><br /> В место панели роутера. Роутер dir320 dd wrt.</blockquote><br />Добрый день, подключитесь по ssh к роутеру dd wrt и выполните следующие<br /><CODE><pre><i> </i>nvram set no_crossdetect=1 nvram commit </pre></CODE></iframe>



  • Сделал, но не получилось. Всё тоже самое. Intrahouse установлено на Debian 9. Может есть ещё варианты?



  • Причём если создать просто html и запустить через браузер, то во фрайме есть панель роутера.



  • @intrahouse:

    Попробуйте в виджете HTML прописать команду:

    <iframe src="http://www.rbc.ru" frameborder="0" width="100%" height="100%"><br/><br />Теоретически можно открывать в виджете HTML любой сайт<br/><br />Например, у меня есть проект на предприятии, который работает на двух серверах.<br/><br />Так вот на главном сервере я с помощью виджета HTML в iframe вызываю экран с информацией с другого сервера.<br/><br />А чтобы не подбирать размеры нужно в iframe выставить width="100%" и height="100%<br/><br />Если нужно вызывать окно intrahouse с другого сервера без ввода пароля, можно в команду добавить параметры аккаунта:<br/><br /><iframe src="http://xxx.xxx.xxx.xxx:xxxx/?username=admin&password=admin" frameborder="0" width="100%" height="100%"></blockquote></QUOTE><br />Так я вроде об этом и пишу - что с iframe можно делать хоть что-то.<br/><br />А вот скрипты JS, которые всовываю на страницу - не работают. Я понимаю что отлаживать надо либо на веб-сервере, либо на обычном компе и потом рабочий код вставлять. Но если вы не заметили, то я в первом посте описал как был сделан у меня сайт - что говорит о том, что я маленько понимаю как это все работает:)<br /><QUOTE author="cd1room" post_id="7923" time="1539814402" user_id="11550"><small>@cd1room:</small><br><blockquote>Причём если создать просто html и запустить через браузер, то во фрайме есть панель роутера.</blockquote>Это интересная особенность DD-WRT. И самое интересное, что в некоторых версиях она не отключается. У меня DD-WRT на Asus RT-10N и на D-Link DIR-400 - на первом crossdetect отключается, на втором нет.<br/><br /><br/><br />Update1 - по работе JS - вставляю банальный alert, но толку нет:<br /><CODE><pre><script type="text/javascript">alert("Hello world");</script></pre></CODE><br /><br />Надо будет все равно небольшое описание для этого виджета делать. Поскольку ему не надо никакого доктайпа, хеда и боди. Можно тупо - style и затем тут же код html.</iframe>



  • @Alex_Jet:

    Update1 - по работе JS - вставляю банальный alert, но толку нет:

    Добрый день,

    обновите систему до последней версии, попробуйте следующий код:

    
      CSS TEXT
    
    
    

    проблема с поддержкой javascript должна уйти, спасибо!



  • @dev:

    Добрый день, обновите систему до последней версии

    Да, теперь работает!



  • Поменял версию dd-wrt и обновил itrahouse и всё заработало.



  • @cd1room:

    Поменял версию dd-wrt и обновил itrahouse и всё заработало.

    Добрый день, отлично!



  • Кто ни будь пробовал погоду добавить с какого ни будь сервиса?



  • Идея хорошая! Можно виджет HTML встроить в статусную строку и отображать там погоду. Навел курсор - развернулся подробный прогноз.



  • В принципе ничего так получилось. Единственное при изменении размера не меняется размер информера.
    22.png



  • А вообще не плохо было бы если это был бы плагин с возможностью выбора сервиса погоды. 😄



  • @dev:

    Добрый день, обновите систему до последней версии

    Рано радовался…вставляю в код что-то типа этого и страница редактора зависает (на нажатие карандаша и кнопки закрытия не реагирует)

    Отладчик Chrome сообщает, что такой функции нет… А что тогда из JS можно использовать???

    Вообще все началось с document.write(""). Значение вписывалось не на страничке виджета, а на вновь созданной странице. appendChild тоже не помог. Решил пойти старым путем - узнать ID элемента и изменять с помощью DOM его параметры, но не тут-то было... про jQuery вообще и не стоит говорить?



  • @cd1room:

    В принципе ничего так получилось. Единственное при изменении размера не меняется размер информера.

    Можно поподробнее. Виджет с погодой - это HTML-виджет с каким-то кодом? Вроде погодных виджетов в iH не вижу, но этот выглядит родным.



  • @cd1room:

    В принципе ничего так получилось. Единственное при изменении размера не меняется размер информера.

    @Alex_Jet:

    Можно поподробнее. Виджет с погодой - это HTML-виджет с каким-то кодом? Вроде погодных виджетов в iH не вижу, но этот выглядит родным.

    Добрый день,

    1. перейдите по ссылке https://nochi.com/widgets/weather?cityid=17682#big и выберите нужный город.

    2. нажмите кнопку "получить HTML код"

    3. скопируйте путь к изображению в теге у атрибута "src" полностью

    4. вставьте следующий код в виджет HTML

    5. поменяйте путь к изображению у свойства "background-image" на свой (см. п.3)

    можно попробовать поменять свойство "background-size: contain;" на "background-size: cover;" будет другой режим масштабирования



  • Отличный пример! :idea:


Log in to reply