Виджет HTML

Alex_Jet

Задача - интегрировать в 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-виджет???

IntraVM

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

dev

Добрый день,

простой пример виджета 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 и откройте любым браузером, убедитесь что код исправен.

cd1room

Вставляю

dev

@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>

cd1room

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

cd1room

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

Alex_Jet

@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>

dev

@Alex_Jet:

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

Добрый день,

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


  CSS TEXT

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

Alex_Jet

@dev:

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

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

cd1room

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

dev

@cd1room:

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

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

cd1room

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

Alex_Jet

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

cd1room

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

cd1room

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

Alex_Jet

@dev:

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

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

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

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

Alex_Jet

@cd1room:

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

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

dev

@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;" будет другой режим масштабирования

cd1room

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

Alex_Jet

@dev:

Добрый день,

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;" будет другой режим масштабирования

Как под изображением сделать кликабельную ссылку? При отладке получается все хорошо, если убрать background-image и в div добавить:

[![](https://w.bookcdn.com/weather/picture/13_17430_1_20_3150bf_158_fff5d9_ffffff_dedede_3_fff5d9_333333_0_6.png?scode=2&domid=589&anc_id=23644)](https://www.gismeteo.ru/weather-tomsk-bogashevo-13009/)

Однако в iH получается вот так:
HTML_виджет_погоды.png