forked from flatsiedatsie/domoticz-aurora-theme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththemesettings.html
223 lines (196 loc) · 12.7 KB
/
themesettings.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<h1 data-i18n="Theme settings">Theme settings</h1>
<div class="row-fluid">
<div class="span6">
<h2><span data-i18n="Dashboard options">General options</span>:</h2>
<p>
<input id="themevar15" class="parentunrequired" name="themevar15" value="dashboard_clock_item" type="checkbox"><label for="themevar15" data-i18n=">Show clock as an item">Show clock as an item</label>
<br/>
<input id="themevar11" class="parentunrequiredchild" name="themevar11" value="dashboard_move_sun" type="checkbox"><label for="themevar11" data-i18n=">Move clock to the bottom of the page">Move clock to the bottom of the page</label>
</p><p>
<input id="themevar12" name="themevar12" value="navigation_main_sidebar" checked type="checkbox"><label for="themevar12" data-i18n="Main menu as a sidebar">Main menu as a sidebar</label>
</p><p>
<input id="themevar13" name="themevar13" value="navigation_settings_sidemenu" type="checkbox"><label for="themevar13" data-i18n="Settingsmenu as a sidebar">Settingsmenu as a sidebar</label>
</p><p>
<input id="themevar14" name="themevar14" value="center_popups" type="checkbox"><label for="themevar14" data-i18n="Center popups on the screen">Center popups on the screen</label>
</p><p>
<input id="themevar16" class="parentrequired" name="themevar16" value="mobile_phoney" type="checkbox"><label for="themevar16" data-i18n="Iphone styling on mobile devices">iPhone styling on mobile devices</label>
<br/>
<input id="themevar17" class="parentrequiredchild" name="themevar17" value="mobile_on_non_mobile" type="checkbox"><label for="themevar17" data-i18n="iPhone styling on non-mobile devices">iPhone styling on non-mobile devices</label>
<br/>
<input id="themevar110" class="parentrequiredchild" name="themevar110" value="mobile_invert_colours" type="checkbox"><label for="themevar110" data-i18n="Invert colours on mobile (night mode)">Invert colours on mobile (night mode)</label>
</p><p>
<input id="themevar18" class="parentrequired" name="themevar18" value="extra_privacy" type="checkbox"><label for="themevar18" data-i18n="Iphone styling on mobile devices">Privacy for switches</label>
<br/>
<input id="themevar19" class="parentrequiredchild" name="themevar19" value="full_privacy" type="checkbox"><label for="themevar19" data-i18n="iPhone styling on non-mobile devices">Full privacy mode</label>
</p>
<br/>
<h3><span data-i18n="Dashboard options">Dashboard options</span>:</h3>
<p>
<input id="themevar21" class="parentrequired" name="themevar21" value="dashboard_show_last_update" type="checkbox"><label for="themevar21" data-i18n="Show the last update time">Show items' last update time</label>
<br/>
<input id="themevar28" class="parentrequiredchild" name="themevar28" value="time_ago" type="checkbox"><label for="themevar28" data-i18n="Show how long ago items updated">Show how long ago items updated</label>
</p><p>
<input id="themevar27" class="parentrequired" name="themevar27" value="dashboard_highlighted" type="checkbox"><label for="themevar27" data-i18n="Show three highlighted items">Show three highlighted items</label>
<br/>
<input id="themevar25" class="parentrequiredchild" name="themevar25" value="dashboard_camera_previews" type="checkbox"><label for="themevar25" data-i18n="Camera previews on the dashboard">Camera previews on the dashboard</label>
<br>
<input id="themevar23" class="parentrequiredchild" name="themevar23" value="dashboard_show_data_visualizations" type="checkbox"><label for="themevar23" data-i18n="Enable dashboard datavisualizations">Show datavisualizations on dashboard</label>
<br>
<input id="themevar31" class="parentrequiredchild" name="themevar31" value="dashboard_remove_dewpoint" type="checkbox"><label for="themevar31" data-i18n="Remove dewpoint data on the dashboard">Remove dewpoint data on the dashboard</label>
<br>
<input id="themevar32" class="parentrequiredchild" name="themevar32" value="dashboard_highlight_all" type="checkbox"><label for="themevar32" data-i18n="Highlight all items">Highlight all items (experimental)</label>
</p><p>
<input id="themevar26" name="themevar26" value="dashboard_merge_items_with_same_name" type="checkbox"><label for="themevar26" data-i18n="Merge items with the same name">Merge items with the same name</label>
</p><p>
<input id="themevar29" name="themevar29" value="dashboard_hide_section_titles" type="checkbox"><label for="themevar29" data-i18n="Hide section titles on the dashboard">Hide section titles on the dashboard</label>
</p><p>
<input id="themevar24" class="parentrequired" name="themevar24" value="dashboard_vertical_columns" type="checkbox"><label for="themevar24" data-i18n="Vertical columns on the dashboard">Vertical columns on the dashboard</label>
<br>
<input id="themevar22" class="parentrequiredchild" name="themevar22" value="dashboard_merge_temp_and_weather" type="checkbox"><label for="themevar22" data-i18n="Merge weather and temperature">Merge weather and temperature</label>
</p><p>
<input id="themevar30" name="themevar30" value="extra_fluid" type="checkbox"><label for="themevar30" data-i18n="Use entire screen for item display">Use entire screen for item display</label>
</p>
</div>
<div class="span6">
<h2><span data-i18n="Dashboard options">About</span>:</h2>
<div id="aboutTheme">
<h3>Aurora theme</h3>
<p>
This is a theme for Domoticz. The goal is to create a more accessible experience to beginners, and more features for fans.
</p>
<h3>GENERAL FEATURES</h3>
<h4>Show Version Number</h4>
<p>
This permanently shows the Domoticz version number, not just on mouse-over.
</p>
<h4>Dashboard Move Sun</h4>
<p>
This moves the sun-up and sun-down times indicator to the footer.
</p>
<h4>Center Popups</h4>
<p>
Sometimes items that pop-up, like colour selectors or thermostat setpoints, go off the screen. This forces them
to be in the middle of the screen. Useful on smaller screens.
</p>
<h4>Privacy</h4>
<p>
Privacy for switches hides both the log output and the last update time for switches and scenes. This way you and your
family can't see when things were turned on. Privacy everywhere expands this to sensors and utilities too. In this
case the log only shows errors.
</p>
<h3>ITEM GRID CHANGES</h3>
<h4>Dashboard Vertical Columns</h4>
<p>
This feature will create vertical columns on your dashboard, one for each sensor type. BUT this feature only
springs into action if you have enough horizontal space for the amount device-types that you have. So for 5 columns
you need at least a 1300 pixels wide screen, for example. This feature works for both the normal and compact display
option.
</p>
<h4>Dashboard Merge temperature and weather</h4>
<p>
This merges these two categories into one "environment" category. Weather items are shown at the top. This is very
useful if a vertical columns display is used on smaller screens, because vertical columns only activates if there is enough space for it.
</p>
<h3>ITEM DISPLAY CHANGES</h3>
<h4>Dashboard Highlights</h4>
<p>
This super-sizes the first three items for each category. You can use this to highlight
some of your devices, or give their buttons a little more breathing room. This only works for the normal view,
because the compact view is about saving space. This can be combined with Vertical Columns, but will create some
strange behaviour if you have selected Variable Items Per Row, as it only enlarges the first three items of each
category (for now).
</p>
<p>
There is an experimental 'highlight all' option (by popular request). This might conflict with the item merger feature though.
</p>
<h4>Dashboard Show Last Update</h4>
<p>
Enable this if you want items on the dashboard to also display the time they were last updated.
</p>
<h4>Dashboard Merge Items With Same Name</h4>
<p>
This merges items that have the same name before a dash. It places all their data into the list of data outputs, and uses
the parts after the dash as the name for those values. For example:
</p><p>
MiFlora plant 1 - Moisture<br/>
MiFlora plant 1 - Light level
</p><p>
..would be merged into one item with the new name "MiFlora", and it would display data called "Moisture" and "Light Level".
The feature will only merge simple items with just one data value and without buttons or sliders. It merges everything into the
first item it finds, so it will show that item's last update times and battery status.
</p>
<h3>MENU OPTIONS</h3>
<h4>Navigation Main Sidemenu</h4>
<p>
This moves the main menu to the left side of the screen. It works best for wide screens (about 980 pixels wide
is my recommendation). It is automatically disabled for mobile phones.
</p>
<h4>Settings Sidemenu</h4>
<p>
Instead of the tabs at the top of each settings page, you get a sidebar instead. It stays in place. This
includes the 'save' button, so you always have easy access to that. Works well with both the menu at the top or the
side menu.
</p>
<h3>EXTRA OPTIONS</h3>
<h4>Dashboard Data Visualizations</h4>
<p>
This overlays a datavisualisation for certain items. They get complete charts for the past 24 hours. The data is pruned, so the
vizualisation isn't very precise. But it's good enough. It also addssmall "day" / "month" buttons to change the visualised date range.
</p>
<h4>Camera previews</h4>
<p>
This allows you to see webcam output right on the dashboard. In order to get this, you must attach a switch to your camera, and show that switch on the dashboard.
</p>
<h4>Extra's and Animations</h4>
<p>
Adds some pretty details like barometer backgrounds and small animations on icons.
</p>
<p></p>
<p>Made in 2017/2018 bij Tijmen Schep.</p>
</div>
<p>
<button class="btn btn-info" id="themeResetButton">Reset theme to default</button>
</p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h2><span data-i18n="Background">Visual</span>:</h2>
<table class="display" id="themebackground">
<tr><td>
<div class="colorPicker">
<h3>Text color</h3>
<div id="textcolorpicker"></div>
</div>
<div class="colorPicker">
<h3>Background color</h3>
<div id="backgroundcolorpicker"></div>
</div>
<div class="colorpicker colordemo">
<h3>Example</h3>
<div id="colordemo"><div class="name">ITEM NAME</div><br/><div style="margin-left:10px">Item detail</div></div>
</div>
<h3>Background Image</h3>
<p>
<input id="backgroundimageurl" name="backgroundimageurl" class="text ui-widget-content ui-corner-all" type="text"><button id="backgroundimagesetbtn" data-i18n="Set" class="btn btn-info" >Set</button>
</p>
</td></tr>
</table>
<p class="tip">You can point to an image on a webserver. If you place an image in the theme folder, you can point to it like this: <span style="font-style: italic">acttheme/screenshot.png</span> </p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h2><span data-i18n="Background">User CSS</span>:</h2>
<table class="display" id="themebackground">
<tr><td>
<p>
If you know how, you can add your own CSS snippets to change the look of the theme. These changes are only stored in the browser.
</p>
<textarea id="userCSSinput"></textarea>
<div id="userCSSsavebuttonholder">
<button id="userCSSsavebtn" data-i18n="Save" class="btn btn-info" >Save</button></div>
</td></tr>
</table>
</div>
</div>