Skip to content

Commit da7c73d

Browse files
abratchikabratchik
committed
UI fixes
1 parent d75f4e8 commit da7c73d

File tree

15 files changed

+374
-180
lines changed

15 files changed

+374
-180
lines changed

‎data/default_cam.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"framesize":8,
33
"quality":12,
44
"xclk":8,
5-
"frame_rate":25,
5+
"frame_rate":12,
66
"brightness":0,
77
"contrast":0,
88
"saturation":0,

‎data/www/index.html‎ renamed to ‎data/www/camera.html‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<title>ESP32 Camera</title>
6+
<title>ESP32-CAM Camera</title>
77
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
88
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
99
<link rel="stylesheet" type="text/css" href="/css/style.css">
@@ -22,12 +22,11 @@
2222
<body>
2323
<section class="main">
2424
<div id="logo">
25-
<label for="nav-toggle-cb" id="nav-toggle" style="float:left;">&#9776;&nbsp;&nbsp;Settings&nbsp;&nbsp;&nbsp;&nbsp;</label>
26-
<button id="swap-viewer" style="float:left;">Simple</button>
27-
<button id="nw-setup" style="float:left;" title="Configure network parameters">Network</button>
28-
<button id="monitor" style="float:left;" title="Monitor system parameters">System</button>
29-
<button id="get-still" style="float:left;" title="Capture a still image">Get Still</button>
30-
<button id="toggle-stream" style="float:left;" class="hidden">Start Stream</button>
25+
<label for="nav-toggle-cb" id="nav-toggle" >&#9776;&nbsp;&nbsp;Camera&nbsp;&nbsp;&nbsp;&nbsp;</label>
26+
<button id="nw-setup" style="float:left;" title="Configure network parameters">Setup</button>
27+
<button id="monitor" style="float:left;" title="Monitor system parameters">Dump</button>
28+
<button id="get-still" style="float:left;" title="Capture a still image">Picture</button>
29+
<button id="toggle-stream" style="float:left;" class="hidden">Video</button>
3130
<div id="wait-settings" style="float:left;" class="loader" title="Waiting for camera settings to load"></div>
3231
</div>
3332
<div id="content">
@@ -67,17 +66,17 @@
6766
const streamButton = document.getElementById('toggle-stream');
6867
const closeButton = document.getElementById('close-stream');
6968

70-
const swapButton = document.getElementById('swap-viewer');
7169

7270
const networkButton = document.getElementById('nw-setup');
7371
const monitorButton = document.getElementById('monitor');
7472

7573
const toggleViewMode = () => {
74+
const swapButton = document.getElementById('swap-viewer');
7675
if(viewMode.checked) {
77-
swapButton.innerHTML = "Full";
76+
swapButton.innerHTML = 'More <i class="fa fa-caret-down"></i>';
7877
}
7978
else {
80-
swapButton.innerHTML = "Simple";
79+
swapButton.innerHTML = 'Less <i class="fa fa-caret-up"></i>';
8180
}
8281

8382
toggleMenuVisible(false);
@@ -110,19 +109,23 @@
110109

111110
const stopStream = () => {
112111
viewFrame.src = '';
113-
streamButton.innerHTML = 'Start Stream';
112+
streamButton.innerHTML = 'Video';
114113
streamButton.setAttribute("title", `Start the stream`);
114+
setLightSlider(false);
115115
hide(viewContainer);
116116
}
117117

118118
const startStream = () => {
119119
viewFrame.src = '/view?mode=stream';
120120
view.scrollIntoView(false);
121-
streamButton.innerHTML = 'Stop Stream';
121+
streamButton.innerHTML = 'Stop';
122122
streamButton.setAttribute("title", `Stop the stream`);
123+
setLightSlider(true);
123124
show(viewContainer);
124125
}
125126

127+
128+
126129
const applyRotation = (el) => {
127130
rot = el.value;
128131
if (rot == -90) {
@@ -161,6 +164,7 @@
161164
div_group.appendChild(createButton("save_prefs", "Save", "Save preferences on camera module", "true", "cam"));
162165
div_group.appendChild(createButton("remove_prefs", "Erase", "Erase saved preferences on camera module", "true", "cam"));
163166
div_group.appendChild(createButton("reboot", "Reboot", "Reboot the camera module", "true"));
167+
div_group.appendChild(createButton("swap-viewer", "More","Show more controls"));
164168

165169
parent.appendChild(div_group);
166170
};
@@ -179,7 +183,7 @@
179183
return response.json();
180184
})
181185
.then(function (state) {
182-
document.title = state['cam_name'];
186+
document.title = state['cam_name'] + ' Camera';
183187
var cam_model = cameraTypes.find(item => item.pid == state['cam_pid']);
184188
if(cam_model)
185189
console.log("Camera " + cam_model.name + " detected");
@@ -209,7 +213,7 @@
209213
}
210214

211215
monitorButton.onclick = () => {
212-
window.open('/dump', "_blank");
216+
window.location.href = '/dump';
213217
}
214218

215219
stillButton.onclick = () => {
@@ -225,34 +229,34 @@
225229
};
226230

227231
streamButton.onclick = () => {
228-
const streamEnabled = streamButton.innerHTML === 'Stop Stream'
232+
const streamEnabled = streamButton.innerHTML === 'Stop'
229233
if (streamEnabled) {
230234
stopStream();
231235
} else {
232236
startStream();
233237
}
234238
};
235239

236-
viewSettings.onchange = () => {
237-
if(viewSettings.checked)
238-
show(swapButton);
239-
else
240-
hide(swapButton);
241-
};
242240

243241
// Attach default on change action
244242
document
245243
.querySelectorAll('.default-action')
246244
.forEach(el => {
247245
if(el.type == "submit")
248246
el.onclick = () => {
249-
if(submitChanges(el)) {
250-
if(el.id == "reboot") {
251-
hide(settings);
252-
hide(viewContainer);
253-
header.innerHTML = '<h1>Rebooting!</h1><hr>Page will reload after 30 seconds.';
254-
}
247+
if(el.id == "swap-viewer") {
248+
var value = viewMode.checked ? 1 : 0;
249+
viewMode.checked = !value;
250+
toggleViewMode();
255251
}
252+
else
253+
if(submitChanges(el)) {
254+
if(el.id == "reboot") {
255+
hide(settings);
256+
hide(viewContainer);
257+
header.innerHTML = '<h1>Rebooting!</h1><hr>Page will reload after 30 seconds.';
258+
}
259+
}
256260
}
257261
else {
258262
el.onchange = () => {
@@ -270,13 +274,6 @@
270274
.forEach(el => {
271275
el.oninput = () => updateRangeConfig(el)
272276
});
273-
274-
275-
swapButton.onclick = () => {
276-
var value = viewMode.checked ? 1 : 0;
277-
viewMode.checked = !value;
278-
toggleViewMode();
279-
};
280277

281278
toggleMenuVisible(true);
282279
});

‎data/www/css/style.css‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ section.main {
3030
display: none;
3131
flex-wrap: nowrap;
3232
color: #EFEFEF;
33-
width: 380px;
33+
width: 400px;
3434
background: #363636;
3535
padding: 8px;
3636
border-radius: 4px;
@@ -72,7 +72,8 @@ section#buttons {
7272

7373
#nav-toggle {
7474
cursor: pointer;
75-
display: block
75+
float:left;
76+
width:100px
7677
}
7778

7879
#nav-toggle-cb {
@@ -90,6 +91,15 @@ section#buttons {
9091
transform: rotateY(180deg);
9192
}
9293

94+
#sidebar {
95+
margin-top: 0px;
96+
}
97+
98+
#logo {
99+
align-items: center;
100+
display: flex;
101+
}
102+
93103
.input-group {
94104
display: flex;
95105
flex-wrap: nowrap;
@@ -120,6 +130,7 @@ button {
120130
line-height: 28px;
121131
cursor: pointer;
122132
color: #fff;
133+
width: 90px;
123134
background: #ff3034;
124135
border-radius: 5px;
125136
font-size: 16px;
@@ -244,7 +255,7 @@ input[type=text], input[type=password] {
244255
}
245256

246257
.gmt_offset {
247-
width: 175px;
258+
width: 180px;
248259
}
249260

250261
input[type=number] {
@@ -281,6 +292,22 @@ input[type=number] {
281292
background-color: grey
282293
}
283294

295+
.fa {
296+
display: inline-block;
297+
font: normal normal normal 14px/1 FontAwesome;
298+
font-size: inherit;
299+
text-rendering: auto;
300+
-webkit-font-smoothing: antialiased;
301+
-moz-osx-font-smoothing: grayscale;
302+
}
303+
304+
.fa-caret-down::before {
305+
content: ">";
306+
}
307+
.fa-caret-up::before {
308+
content: "<";
309+
}
310+
284311
.slider,.slider:before {
285312
display: inline-block;
286313
transition: .4s

0 commit comments

Comments
 (0)