mirror of
https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks.git
synced 2025-09-08 23:20:48 +02:00
Implement new UI
Change summary: - Incorporate the Bulma CSS framework - Changed many of the functions in action.cgi scripts.cgi status.cgi getMotionInfo.cgi to return json so that we can have more elegant ajax-y UI flows - Changed the "live" view to only refresh statuses on demand (when Camera Controls menu is hovered/clicked) instead of a constant interval refresh. I did not like the constant refresh in the current implementation because it was sometimes locking up the UI in the background. - Changed the "live" view image to reload only after previous image is loaded instead of a constant refresh interval (uses image "onload" to trigger) - Fixed up some bugs in configMotion.html and also made the UI work responsively - Added a "shutdown" command (calls /sbin/halt) so that I can gracefully shutdown the camera instead of pulling the plug - Add option to choose a dark UI theme
This commit is contained in:
ping
@@ -1,16 +1,245 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html class="has-navbar-fixed-top">
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
function Redirect() {
|
||||
window.location = "/cgi-bin/status.cgi";
|
||||
<meta charset=utf-8 />
|
||||
<title>DafangHacks</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- CSS Framework -->
|
||||
<link href="css/bulma.0.6.2.min.css" rel="stylesheet">
|
||||
<link href="css/bulma-switch.1.0.1.min.css" rel="stylesheet">
|
||||
<link href="css/bulma-badge.1.0.1.min.css" rel="stylesheet">
|
||||
<link href="css/bulma-quickview.1.0.1.min.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
|
||||
<style id="custom_css">
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
document.write("You will be redirected to main page in 1 sec.");
|
||||
setTimeout('Redirect()', 1);
|
||||
</script>
|
||||
#main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.script_card,
|
||||
.status_card {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.script_card,
|
||||
.status_card {
|
||||
max-width: 75%
|
||||
}
|
||||
}
|
||||
|
||||
.script_card div.show_script {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
table.motor_control td {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
table.motor_control td button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#liveview {
|
||||
padding: 0.25em;
|
||||
border: dotted 1px #4a4a4a;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#motion_picture {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">Dafang Hacks</a>
|
||||
<a id="navbar_burger" role="button" class="navbar-burger" data-target="nav_menu" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-menu" id="nav_menu">
|
||||
<!-- left menu -->
|
||||
<div class="navbar-start" id="common_nav">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<span class="navbar-link">Manage</span>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a id="status" class="navbar-item onpage" href="javascript: void(0)" data-target="/cgi-bin/status.cgi">Status</a>
|
||||
<a id="scripts" class="navbar-item onpage" href="javascript: void(0)" data-target="/cgi-bin/scripts.cgi">Manage Scripts</a>
|
||||
<a id="network" class="navbar-item onpage" href="javascript: void(0)" data-target="/cgi-bin/network.cgi">Network Settings</a>
|
||||
<a id="logs" class="navbar-item onpage" href="javascript: void(0)" data-target="/cgi-bin/action.cgi?cmd=showlog">Logs</a>
|
||||
<a id="configmotion" class="navbar-item onpage" href="javascript: void(0)" data-target="/configmotion.html">Motion Config</a>
|
||||
<a class="navbar-item prompt" href="javascript: void(0)" data-message="Are you sure you wish to reboot?" data-target="/cgi-bin/action.cgi?cmd=reboot">Reboot</a>
|
||||
<a class="navbar-item prompt" href="javascript: void(0)" data-message="Are you sure you wish to shutdown?" data-target="/cgi-bin/action.cgi?cmd=shutdown">Shutdown</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="javascript: getLiveImage();">Live</a>
|
||||
</div>
|
||||
<!-- right menu -->
|
||||
<div class="navbar-end">
|
||||
<div id="camcontrol_link" class="navbar-item has-dropdown">
|
||||
<!-- Camera Movement Controls -->
|
||||
<span class="navbar-link">Camera Controls</span>
|
||||
<div class="navbar-dropdown is-boxed is-right">
|
||||
<!-- left -->
|
||||
<a class="navbar-item cam_button" href="javascript:void(0)" data-cmd="motor_left">
|
||||
◀
|
||||
</a>
|
||||
<!-- right -->
|
||||
<a class="navbar-item cam_button" href="javascript:void(0)" data-cmd="motor_right">
|
||||
▶
|
||||
</a>
|
||||
<!-- up -->
|
||||
<a class="navbar-item cam_button" href="javascript:void(0)" data-cmd="motor_up">
|
||||
▲
|
||||
</a>
|
||||
<!-- down -->
|
||||
<a class="navbar-item cam_button" href="javascript:void(0)" data-cmd="motor_down">
|
||||
▼
|
||||
</a>
|
||||
<!-- Led: IR -->
|
||||
<span class="navbar-item">
|
||||
<input id="ir_led" type="checkbox" name="ir_led" class="switch" data-checked="/cgi-bin/action.cgi?cmd=ir_led_on" data-unchecked="/cgi-bin/action.cgi?cmd=ir_led_off">
|
||||
<label for="ir_led">IR Led</label>
|
||||
</span>
|
||||
<!-- IR Cut -->
|
||||
<span class="navbar-item">
|
||||
<input id="ir_cut" type="checkbox" name="ir_cut" class="switch" data-checked="/cgi-bin/action.cgi?cmd=ir_cut_on" data-unchecked="/cgi-bin/action.cgi?cmd=ir_cut_off">
|
||||
<label for="ir_cut">IR-Cut</label>
|
||||
</span>
|
||||
<!-- Auto Night Detect -->
|
||||
<span class="navbar-item">
|
||||
<input id="auto_night_detection" type="checkbox" name="auto_night_detection" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=auto-night-detection"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=auto-night-detection">
|
||||
<label for="auto_night_detection">Auto Night Detection</label>
|
||||
</span>
|
||||
<!-- LED: Blue -->
|
||||
<span class="navbar-item">
|
||||
<input id="blue_led" type="checkbox" name="blue_led" class="switch" data-checked="/cgi-bin/action.cgi?cmd=blue_led_on" data-unchecked="/cgi-bin/action.cgi?cmd=blue_led_off">
|
||||
<label for="blue_led">Blue LED</label>
|
||||
</span>
|
||||
<!-- LED: Yellow -->
|
||||
<span class="navbar-item">
|
||||
<input id="yellow_led" type="checkbox" name="yellow_led" class="switch" data-checked="/cgi-bin/action.cgi?cmd=yellow_led_on"
|
||||
data-unchecked="/cgi-bin/action.cgi?cmd=yellow_led_off">
|
||||
<label for="yellow_led">Yellow LED</label>
|
||||
</span>
|
||||
<!-- Motion Detection -->
|
||||
<span class="navbar-item">
|
||||
<input id="motion_detection" type="checkbox" name="motion_detection" class="switch" data-checked="/cgi-bin/action.cgi?cmd=motion_detection_on"
|
||||
data-unchecked="/cgi-bin/action.cgi?cmd=motion_detection_off">
|
||||
<label for="motion_detection">Motion Detection</label>
|
||||
</span>
|
||||
<!-- RTSP H264 -->
|
||||
<span class="navbar-item">
|
||||
<input id="rtsp_h264" type="checkbox" name="rtsp_h264" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=rtsp-h264"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=rtsp-h264">
|
||||
<label for="rtsp_h264">RTSP H264 Server</label>
|
||||
</span>
|
||||
<!-- RTSP MJPEG -->
|
||||
<span class="navbar-item">
|
||||
<input id="rtsp_mjpeg" type="checkbox" name="rtsp_mjpeg" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=rtsp-mjpeg"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=rtsp-mjpeg">
|
||||
<label for="rtsp_mjpeg">RTSP MJPEG Server</label>
|
||||
</span>
|
||||
<!-- MQTT Status -->
|
||||
<span class="navbar-item">
|
||||
<input id="mqtt_control" type="checkbox" name="mqtt_control" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=mqtt-status"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=mqtt-status">
|
||||
<label for="mqtt_control">MQTT Status Server</label>
|
||||
</span>
|
||||
<!-- MQTT Control -->
|
||||
<span class="navbar-item">
|
||||
<input id="mqtt_status" type="checkbox" name="mqtt_status" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=mqtt-control"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=mqtt-control">
|
||||
<label for="mqtt_status">MQTT Control Server</label>
|
||||
</span>
|
||||
<!-- Startup Sound -->
|
||||
<span class="navbar-item">
|
||||
<input id="sound_on_startup" type="checkbox" name="sound_on_startup" class="switch" data-checked="/cgi-bin/scripts.cgi?cmd=start&script=sound-on-startup"
|
||||
data-unchecked="/cgi-bin/scripts.cgi?cmd=stop&script=sound-on-startup">
|
||||
<label for="sound_on_startup">Sound on Startup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="main" class="section">
|
||||
<div id="content" class="container">
|
||||
<a id="liveviewlink" href="/cgi-bin/currentpic.cgi">
|
||||
<img id="liveview" src="/cgi-bin/currentpic.cgi" onerror="this.src='css/unable_load.png';">
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="has-text-centered is-size-7">
|
||||
<p>
|
||||
<a href="https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks" target="_blank">
|
||||
<strong>Dafang Hacks</strong>
|
||||
</a> v0.0.1.
|
||||
<a href="https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks/issues" target="_blank">Issues?</a>
|
||||
</p>
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<a class="is-small is-link" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Theme</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a id="theme_choice_0" href="javascript: setTheme('0')" class="theme_choice dropdown-item" data-css="css/bulma.0.6.2.min.css">
|
||||
Light
|
||||
</a>
|
||||
<a id="theme_choice_1" href="javascript: setTheme('1')" class="theme_choice dropdown-item" data-css="https://cdn.jsdeliver.net/npm/bulmaswatch@0.6.2/slate/bulmaswatch.min.css">
|
||||
Dark
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="quickviewDefault" class="quickview">
|
||||
<header class="quickview-header">
|
||||
<p class="title">Quickview</p>
|
||||
<span id="quickViewClose" class="delete" data-dismiss="quickview"></span>
|
||||
</header>
|
||||
|
||||
<div class="quickview-body">
|
||||
<div class="quickview-block" id="quicViewContent">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="quickview-footer">
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="scripts/index.html.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user