『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 2080|回复: 9

[UI界面] 基于Picture Elements 的iframe卡片

[复制链接]

6

主题

99

帖子

440

积分

中级会员

Rank: 3Rank: 3

积分
440
金钱
341
HASS币
0
发表于 2023-2-17 13:14:29 | 显示全部楼层 |阅读模式
本帖最后由 liujiang567 于 2023-2-17 13:25 编辑

     之前看到论坛群里面不少朋友都在弄3d俯视图,大都基于Picture Elements 这个卡片来做的。在上面叠加或者切换各种图片达到交互的效果,但是大家都知道Picture Elements 是不支持 原生的iframe卡片的,想要在里面嵌入第三方页面就没法直接用官方的iframe卡片了。
  官方给出的支持类型
There are several different element types that can be added to a Picture Elements card:
看到Custom 所以基本是只能通过自定义的类型来加入iframe了于是乎便做个了简单的自定义iframe
效果图如下:
微信图片_20230217130913.png

使用方式:hacs添加自定义库 Custom repositories  :https://github.com/jwister/hassos-iframe     类型选lovelace  
之后搜custom-iframe  下载即可

示例配置:
```yaml
type: 'custom:custom-iframe'
url: https://www.weny7.com
style:
  left: 50%
  top: 50%
  width: 50%
  height: 50%
```





回复

使用道具 举报

7

主题

1072

帖子

3367

积分

论坛元老

Rank: 8Rank: 8

积分
3367
金钱
2295
HASS币
0
发表于 2023-2-17 15:45:32 | 显示全部楼层
感谢楼主分享,天气预报又可以了
回复

使用道具 举报

21

主题

553

帖子

2330

积分

金牌会员

Rank: 6Rank: 6

积分
2330
金钱
1777
HASS币
0
发表于 2023-2-17 16:12:58 | 显示全部楼层
小白不懂编程,弱弱的问一句,意思是可以在图片卡片中嵌入网页显示的意思?
回复

使用道具 举报

6

主题

99

帖子

440

积分

中级会员

Rank: 3Rank: 3

积分
440
金钱
341
HASS币
0
 楼主| 发表于 2023-2-17 16:34:57 | 显示全部楼层
a_dongde 发表于 2023-2-17 16:12
小白不懂编程,弱弱的问一句,意思是可以在图片卡片中嵌入网页显示的意思? ...

是的哟,
回复

使用道具 举报

0

主题

26

帖子

95

积分

注册会员

Rank: 2

积分
95
金钱
69
HASS币
0
发表于 2023-4-20 15:29:18 | 显示全部楼层
感谢分享
回复

使用道具 举报

1

主题

19

帖子

86

积分

注册会员

Rank: 2

积分
86
金钱
67
HASS币
0
发表于 2023-5-23 15:31:52 | 显示全部楼层
哎呀 就缺这个  万分感谢
回复

使用道具 举报

1

主题

19

帖子

86

积分

注册会员

Rank: 2

积分
86
金钱
67
HASS币
0
发表于 2023-5-23 16:06:29 | 显示全部楼层
本帖最后由 Mhadows 于 2023-5-23 16:29 编辑

麻烦看一下 网页加载不出来 是不是我的代码有问题
已经解决了 重新download 了就好了
WechatIMG10319.png
回复

使用道具 举报

8

主题

73

帖子

697

积分

高级会员

Rank: 4

积分
697
金钱
624
HASS币
30
发表于 2023-6-29 14:44:16 | 显示全部楼层
Mhadows 发表于 2023-5-23 16:06
麻烦看一下 网页加载不出来 是不是我的代码有问题
已经解决了 重新download 了就好了
...

你这压根插件就没有加载成功
回复

使用道具 举报

0

主题

8

帖子

263

积分

中级会员

Rank: 3Rank: 3

积分
263
金钱
255
HASS币
0
发表于 2023-7-5 18:58:26 | 显示全部楼层
请问大佬 左侧侧边栏的大量重复代码 有办法复用嘛
回复

使用道具 举报

0

主题

3

帖子

56

积分

注册会员

Rank: 2

积分
56
金钱
53
HASS币
0
发表于 2024-3-18 17:00:27 | 显示全部楼层
不知道为啥我弄的  没法调节大小
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-4-25 08:33 , Processed in 2.039415 second(s), 34 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表