Виджет HTML
-
@dev:
Добрый день, обновите систему до последней версии
Рано радовался…вставляю в код что-то типа этого и страница редактора зависает (на нажатие карандаша и кнопки закрытия не реагирует)
Отладчик Chrome сообщает, что такой функции нет… А что тогда из JS можно использовать???
Вообще все началось с document.write(""). Значение вписывалось не на страничке виджета, а на вновь созданной странице. appendChild тоже не помог. Решил пойти старым путем - узнать ID элемента и изменять с помощью DOM его параметры, но не тут-то было... про jQuery вообще и не стоит говорить?
-
В принципе ничего так получилось. Единственное при изменении размера не меняется размер информера.
Можно поподробнее. Виджет с погодой - это HTML-виджет с каким-то кодом? Вроде погодных виджетов в iH не вижу, но этот выглядит родным.
-
В принципе ничего так получилось. Единственное при изменении размера не меняется размер информера.
Можно поподробнее. Виджет с погодой - это 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:
-
@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 получается вот так:
-
@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
Добрый день,
попробуйте следующей код
[![](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/)
-
@dev:
Добрый день,
попробуйте следующей код
В принципе отрисовывается почти как надо (почему-то смещение вправо происходит относительно контейнера виджета) при добавлении в image свойства width: 100% ну и по вкусу в container свойства cursor: pointer.
-
@dev:
Добрый день,
попробуйте следующей код
В принципе отрисовывается почти как надо (почему-то смещение вправо происходит относительно контейнера виджета) при добавлении в image свойства width: 100% ну и по вкусу в container свойства cursor: pointer.
Добрый день, используйте div вместо img, можно будет растянуть в обе стороныс учётом пропорции и размеров внутри div (см. пример выше)
-
@dev:
Добрый день, используйте div вместо img, можно будет растянуть в обе стороныс учётом пропорции и размеров внутри div (см. пример выше)
С этим все понятно - буду вспоминать CSS. Просто получается что с виджетом HTML есть свои особенности. А все-таки по поддержке js в виджете ответите? Alert работает, а что-нибудь типа getElementByID уже нет…или если вставить ссылку на библиотеку jQuery то и он заведется?
-
@dev:
Добрый день, используйте div вместо img, можно будет растянуть в обе стороныс учётом пропорции и размеров внутри div (см. пример выше)
А все-таки по поддержке js в виджете ответите? Alert работает, а что-нибудь типа getElementByID уже нет…или если вставить ссылку на библиотеку jQuery то и он заведется?
Добрый день, все должно работать:
1. Определение входа интернет/локально.
<iframe id="iframe" frameborder="0" width="100%" height="100%"></iframe>
2. Управление стилями через JS (анимация)
TEST
3. jQuery (простой пример).
TEST
4. jQuery Modal (сторонние библиотеки).
-
Вот если честно - я в растерянности. Если это просто HTML-виджет, то почему все совсем не так как при отладке? Хочу сделать меню навигации по устройствам с веб-интерфейсом. Но в HTML-виджете все выглядит совсем иначе нежели чем при отладке…
<nav> * [Router/Switch](#) * [Mikrotik hEX POE](http://gismeteo.ru) * [Mikrotik CSS326-24G-2S+RM #1](#) * [Mikrotik CSS326-24G-2S+RM #2](#) * [Mikrotik CSS106-1G-4P-1S](#) * [Mikrotik cAP-2nD](#) * [Mikrotik wAP-2nD](#) * [CCTV Devices](#) * [Video Server](#) * [IP Camera #1](#) * [IP Camera #2](#) * [IP Camera #3](#) * [IP Camera #4](#) * [IP Camera #5](#) * [IP Camera #6](#) * [MegaD OneFloor](#) * <a href="">MegaD-2561-21</a> * <a href="">MegaD-2561-22</a> * <a href="">MegaD-2561-23</a> * <a href="">MegaD-2561-24</a> * <a href="">MegaD-2561-25</a> * <a href="">MegaD-2561-26</a> * [MegaD TwoFloor](#) * <a href="">MegaD-2561-31</a> * <a href="">MegaD-2561-32</a> * <a href="">MegaD-2561-33</a> * [MegaD Other](#) * <a href="">MegaD-2561-Garage</a> * <a href="">MegaD-2561-Bathhouse</a> * [Other Devices](#) * <a href="">Media Server</a> * <a href="">Multi Room</a> * <a href="">Speaker #1</a> </nav> <iframe id="Iframe_Content" name="Content" width="100%" height="100%" scrolling="auto" frameborder="1"></iframe>
-
Пока плагина нет хотел через виджет вот этот сайтик отобразить https://starline-online.ru. А вот и не получилось. Что делаю не так?
-
Пока плагина нет хотел через виджет вот этот сайтик отобразить https://starline-online.ru. А вот и не получилось. Что делаю не так?
Добрый день, опишите пожалуйста какую информацию вы хотите получать ?
-
@dev:
Добрый день, опишите пожалуйста какую информацию вы хотите получать ?
А можете мне помочь реализовать выпадающее меню в виджете HTML? Код из моего поста: тут. Посмотрите как он отображается в отладке (при загрузке с веб-сервера или при открытии html локально с ПК) и как отображается если этот код вставить в виджет HTML. Может быть есть какое-то пересечение CSS в виджете с основным интерфейсом системы?
-
@dev:
Добрый день, опишите пожалуйста какую информацию вы хотите получать ?
А можете мне помочь реализовать выпадающее меню в виджете HTML? Код из моего поста: тут. Посмотрите как он отображается в отладке (при загрузке с веб-сервера или при открытии html локально с ПК) и как отображается если этот код вставить в виджет HTML. Может быть есть какое-то пересечение CSS в виджете с основным интерфейсом системы?
Добрый день,
поменяйте блок script, проблем больше не должно быть.
-
@dev:
Добрый день,
поменяйте блок script, проблем больше не должно быть.
Спасибо! Явно лучше:) Надо это задокументировать в описании HTML-виджета.
-
Посмотрите, пожалуйста, еще немного - часть ссылок открывается в iframe (везде в гиперссылке прописано target="Content"), а часть нет (открываются в новом окне). Несколько открываются, несколько нет. Потом все перестают открываться в iframe. После перехода на другой экран и возврата снова на веб - снова часть открывается в iframe, часть в новом окне…
Еще html-виджет с погодой разъезжается...
-
@dev:
Пока плагина нет хотел через виджет вот этот сайтик отобразить https://starline-online.ru. А вот и не получилось. Что делаю не так?
Добрый день, опишите пожалуйста какую информацию вы хотите получать ?
Хотябы так как на скриншоте. Но в идиале если это будет отдельное окно с машинкой. Либо хотябы несколько статусов. Статус в охране-не в охране, параметры температуры, уровня топлива. Чтобы эти параметры вывести на отдельную панель.
-
Добрый день,
Посмотрите, пожалуйста, еще немного - часть ссылок открывается в iframe (везде в гиперссылке прописано target="Content"), а часть нет (открываются в новом окне). Несколько открываются, несколько нет. Потом все перестают открываться в iframe. После перехода на другой экран и возврата снова на веб - снова часть открывается в iframe, часть в новом окне…
Еще html-виджет с погодой разъезжается...
откройте консоль (инструменты разработчика ctrl + shift + i), попробуйте переключить iframe, необходимо убедиться что нет ошибок при переключение ссылок.
Еще html-виджет с погодой разъезжается…
изменился код виджета ?
-
@dev:
Пока плагина нет хотел через виджет вот этот сайтик отобразить https://starline-online.ru. А вот и не получилось. Что делаю не так?
Добрый день, опишите пожалуйста какую информацию вы хотите получать ?
Хотябы так как на скриншоте. Но в идиале если это будет отдельное окно с машинкой. Либо хотябы несколько статусов. Статус в охране-не в охране, параметры температуры, уровня топлива. Чтобы эти параметры вывести на отдельную панель.
Добрый день,
спасибо за информацию. Загрузка iframe для starline-online.ru не возможна, данный сайт запрещает всем, кроме себя ('X-Frame-Options' to 'sameorigin'). Планируется выпустить плагин http, возможно получиться решить все с помощью него.