/
image.html
executable file
·124 lines (93 loc) · 4.02 KB
/
image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<base href="../" />
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>FTUI Example Image</title>
</head>
<script>
setInterval(
() => myout.innerText =
ftuiApp.fhemService.states.connection.lastEventTimestamp.toLocaleString(),
60000
);
</script>
<body>
<ftui-grid base-width="150" base-height="165">
<ftui-grid-tile row="1" col="1" height="1" width="1">
<header>DEFAULT</header>
<!-- <ftui-image></ftui-image> -->
<div id="myout"></div>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="2" height="1" width="1">
<header>FIX SRC</header>
<ftui-image src="https://picsum.photos/seed/huhu/200/200" height="5em" width="5em"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="2" height="1" width="1">
<header>REFRESH</header>
<ftui-image src="http://lorempixel.com/400/200/technics" width="100" [refresh]="ftuitest:state:time"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="3" height="2" width="1">
<header>SRC BINDING</header>
<ftui-column>
<ftui-image [src]="AgroWeather:fc0_weather00Icon" width="40px"></ftui-image>
<ftui-image [src]="AgroWeather:fc1_weather00Icon" width="40px"></ftui-image>
<ftui-image [src]="AgroWeather:fc2_weather00Icon" width="40px"></ftui-image>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="2" width="2">
<header>COVER IMAGE</header>
<ftui-image [src]="Spotify01:track_album_cover_medium"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="6" height="2" width="2">
<header>REFRESH INTERVAL</header>
<ftui-image id="weather" src="https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_deutschland.jpg"
interval="300" nocache></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="8" height="2" width="2">
<header>BASE URL</header>
<ftui-image base="http://fhem:8083/fhem/images/" src="fhemSVG/3d_printer.svg" interval="5" nocache width="250px"
height="200px"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="2" height="1" width="1">
<header>ROUND</header>
<ftui-image src="https://i.pravatar.cc/300" width="90px" shape="round"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="2" height="1" width="1">
<header>CIRCLE</header>
<ftui-image src="https://i.pravatar.cc/100" width="90px" shape="circle"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="1" height="1" width="1">
<header>CREDENTIALS</header>
<ftui-image base="http://fhem:8083/fhem/images/default/" src="black_up.png" width="90px" user="fhemuser"
pass="fhempass"></ftui-image>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="3" height="2" width="2">
<header>RELATIVE</header>
<ftui-image src="https://pluspng.com/img-png/germany-png-file-map-germany-with-coats-of-arms-png-1971.png">
<ftui-icon name="plane" color="red" left="60%" top="50%"></ftui-icon>
<ftui-label text="A123" color="red" left="60%" top="calc(50% + 2em)"></ftui-label>
<ftui-icon name="plane" color="black" left="20%" top="50%"></ftui-icon>
<ftui-label text="A456" color="black" left="20%" top="calc(50% + 2em)"></ftui-label>
<ftui-icon name="plane" color="white" left="50%" top="70%"></ftui-icon>
<ftui-label text="A789" color="white" left="50%" top="calc(70% + 2em)"></ftui-label>
</ftui-image>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>