mirror/xiaomi-dafang-hacks
1
0
Fork 0
mirror of https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks.git synced 2025-09-08 23:20:48 +02:00
Code Issues Releases Wiki Activity

Improvements

Browse Source
This commit is contained in:
gysmo38
2020-05-28 22:05:50 +02:00
committed by Julian Tatsch
parent a2ee96c242
commit 41d1b8eb22
6 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
firmware_mod/www/control.html
View File

@@ -49,6 +49,7 @@
</div>
<p></p>
</div>
<!-- modal windows-->
<div id="modal_box" class="w3-modal">
<div class="w3-modal-content">

67
firmware_mod/www/index2.html
View File

@@ -3,17 +3,20 @@
<head>
<title>Dafang Hacks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3.css">
<link href="css/jquery.selectareas.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/w3-toggle.css">
<link rel="stylesheet" href="css/w3-accordion.css">
<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/>
<link rel="stylesheet" href="css/w3.css" />
<link rel="stylesheet" href="css/jquery.selectareas.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/w3-toggle.css" />
<link rel="stylesheet" href="css/w3-accordion.css" />
<link rel="stylesheet" href="css/datatables.min.css" type="text/css"/>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<!-- fontawesome -->
<script type="text/javascript" src="fontawesome-free-5.13.0-web/js/all.js" defer></script>
<!-- image select -->
<script src="js/jquery.selectareas.min.js" type="text/javascript"></script>
<!-- table sdcard view-->
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript">
//Check if theme configured
var css = localStorage.getItem('theme')
@@ -28,45 +31,45 @@ $('head').append("<link rel='stylesheet' href='css/"+css+".css'>");
<div class="w3-sidebar w3-bar-block w3-animate-left" style="display:none;z-index:5" id="sideBar">
<button class="w3-bar-item w3-button w3-large w3-theme" onclick="w3_close()">Close &times;</button>
<p class="w3-large">Camera</p>
<label class="switch"><input id="auto_night_mode" type="checkbox"><span class="slider round"></span></label> Auto night detecion<br />
<label class="switch"><input id="ir_led" type="checkbox"><span class="slider round"></span></label> IR Led<br />
<label class="switch"><input id="ir_cut" type="checkbox"><span class="slider round"></span></label> IR Filter<br />
<label class="switch"><input id="blue_led" type="checkbox"><span class="slider round"></span></label> Blue led<br />
<label class="switch"><input id="yellow_led" type="checkbox"><span class="slider round"></span></label> Yellow led<br />
<label class="switch"><input id="auto_night_mode" type="checkbox"><span class="slider round w3-theme"></span></label> Auto night detecion<br />
<label class="switch"><input id="ir_led" type="checkbox"><span class="slider round w3-theme"></span></label> IR Led<br />
<label class="switch"><input id="ir_cut" type="checkbox"><span class="slider round w3-theme"></span></label> IR Filter<br />
<label class="switch"><input id="blue_led" type="checkbox"><span class="slider round w3-theme"></span></label> Blue led<br />
<label class="switch"><input id="yellow_led" type="checkbox"><span class="slider round w3-theme"></span></label> Yellow led<br />
<p class="w3-large">Motion</p>
<label class="switch"><input id="motion_detection" type="checkbox"><span class="slider round"></span></label> Detection<br />
<label class="switch"><input id="motion_mail" type="checkbox"><span class="slider round"></span></label> Send emails<br />
<label class="switch"><input id="motion_telegram" type="checkbox"><span class="slider round"></span></label> Send Telegram<br />
<label class="switch"><input id="motion_led" type="checkbox"><span class="slider round"></span></label> LED<br />
<label class="switch"><input id="motion_snapshot" type="checkbox"><span class="slider round"></span></label> Snapshots<br />
<label class="switch"><input id="motion_mqtt" type="checkbox"><span class="slider round"></span></label> MQTT Message<br />
<label class="switch"><input id="motion_mqtt_snapshot" type="checkbox"><span class="slider round"></span></label> MQTT Snapshot<br />
<label class="switch"><input id="motion_mqtt_video" type="checkbox"><span class="slider round"></span></label> MQTT Video<br />
<label class="switch"><input id="motion_detection" type="checkbox"><span class="slider round w3-theme"></span></label> Detection<br />
<label class="switch"><input id="motion_mail" type="checkbox"><span class="slider round w3-theme"></span></label> Send emails<br />
<label class="switch"><input id="motion_telegram" type="checkbox"><span class="slider round w3-theme"></span></label> Send Telegram<br />
<label class="switch"><input id="motion_led" type="checkbox"><span class="slider round w3-theme"></span></label> LED<br />
<label class="switch"><input id="motion_snapshot" type="checkbox"><span class="slider round w3-theme"></span></label> Snapshots<br />
<label class="switch"><input id="motion_mqtt" type="checkbox"><span class="slider round w3-theme"></span></label> MQTT Message<br />
<label class="switch"><input id="motion_mqtt_snapshot" type="checkbox"><span class="slider round w3-theme"></span></label> MQTT Snapshot<br />
<label class="switch"><input id="motion_mqtt_video" type="checkbox"><span class="slider round w3-theme"></span></label> MQTT Video<br />
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<div class="w3-auto">
<!-- Menu -->
<div class="w3-container w3-card w3-theme">
<a class="w3-bar-item w3-button" href="index2.html"><i class="fa fa-home"></i></a>
<button class="w3-bar-item w3-button" onclick="openPage('live');" title="Home"><i class="fa fa-home"></i></button>
<div class="w3-dropdown-hover">
<button class="w3-button"><i class="fa fa-cog"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="?url=system" class="w3-bar-item w3-button">System</a>
<a href="?url=camera" class="w3-bar-item w3-button">Camera</a>
<a href="?url=net_services" class="w3-bar-item w3-button">Network Services</a>
<a href="?url=motion" class="w3-bar-item w3-button">Motion Detection</a>
<a href="?url=softnight" class="w3-bar-item w3-button">Software Night Detection</a>
<button onclick="openPage('system');" class="w3-bar-item w3-button">System</button>
<button onclick="openPage('camera');" class="w3-bar-item w3-button">Camera</button>
<button onclick="openPage('net_services');" class="w3-bar-item w3-button">Network Services</button>
<button onclick="openPage('motion');" class="w3-bar-item w3-button">Motion Detection</button>
<button onclick="openPage('softnight');" class="w3-bar-item w3-button">Software Night Detection</button>
</div>
</div>
<a class="w3-bar-item w3-button" href="?url=control"><i class="fa fa-server"></i></a>
<a class="w3-bar-item w3-button" href="?url=info"><i class="fa fa-info-circle"></i></a>
<a class="w3-bar-item w3-button" href="?url=sdcard"><i class="fa fa-sd-card"></i></a>
<button class="w3-bar-item w3-button" onclick="openPage('control');" title="System control"><i class="fas fa-tools"></i></button>
<button class="w3-bar-item w3-button" onclick="openPage('info');" title="System informations"><i class="fa fa-info-circle"></i></button>
<button class="w3-bar-item w3-button" onclick="openPage('sdcard');" title="View files on SD Card"><i class="fa fa-sd-card"></i></button>
<div class="w3-dropdown-hover w3-right">
<button class="w3-button" id="notifAlarm"><i class="fa fa-bell"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4" style="width:250px">
<div class="w3-container" id="notifContent">
<p>Everything OK :)</p>
<p>No notifications</p>
</div>
</div>
@@ -74,8 +77,6 @@ $('head').append("<link rel='stylesheet' href='css/"+css+".css'>");
</div>
<div id="content" class="w3-container">
<!-- Waiting card during data-->
<div class="w3-panel w3-card">LOADING...</div>
</div>
<!-- About modal -->
@@ -127,9 +128,9 @@ $('head').append("<link rel='stylesheet' href='css/"+css+".css'>");
<!-- Footer -->
<footer class="w3-container w3-card w3-theme w3-center">
<a class="w3-bar-item w3-button" href="https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks" target="_blank"><i class="fab fa-github"></i></a>
<span class="w3-bar-item w3-button" onclick="document.getElementById('about').style.display='block'"><i class="fas fa-info-circle"></i></span>
<span class="w3-bar-item w3-button" onclick="document.getElementById('theme').style.display='block'"><i class="fas fa-palette"></i></span>
<a class="w3-bar-item w3-button" href="https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks" target="_blank" title="GitHub project page"><i class="fab fa-github"></i></a>
<span class="w3-bar-item w3-button" onclick="document.getElementById('about').style.display='block'" title="Camera information"><i class="fas fa-info-circle"></i></span>
<span class="w3-bar-item w3-button" onclick="document.getElementById('theme').style.display='block'" title="Choose theme color"><i class="fas fa-palette"></i></span>
</footer>
</div>

6
firmware_mod/www/js/control.js
View File

@@ -178,18 +178,18 @@ function getServices() {
var config_info = config_all[i].split("#:#");
// Select button color accrding status
if (config_info[1] == "ON") {
var color_start = "w3-text-grey' id='start_"+config_info[0]+"'>";
var color_start = "w3-text-grey' style='cursor:not-allowed' id='start_"+config_info[0]+"'>";
var color_stop = "w3-text-red'onclick='controlService(\"off\",\""+config_info[0]+"\")' id='stop_"+config_info[0]+"'>";
}
else {
var color_start = "w3-text-green' onclick='controlService(\"on\",\""+config_info[0]+"\")' id='start_"+config_info[0]+"'>";
var color_stop = "w3-text-grey' id='stop_"+config_info[0]+"'>";
var color_stop = "w3-text-grey' style='cursor:not-allowed' id='stop_"+config_info[0]+"'>";
}
var checked = "onclick='autoStartService(\"true\",\""+config_info[0]+"\")')";
if(config_info[2] == "true")
checked = "checked onclick='autoStartService(\"false\",\""+config_info[0]+"\")')";
$('#tabServices').append("<tr><td>"+config_info[0]+"</td><td><i class='fa fa-play-circle w3-xxlarge "+color_start+"</i> <i class='fa fa-stop-circle w3-xxlarge "+color_stop+"</i></td><td><input id='autoStart_"+config_info[0]+"' class='w3-check' type='checkbox' "+checked+"></td></tr>");
$('#tabServices').append("<tr><td>"+config_info[0]+"</td><td><i class='fa fa-play-circle w3-xxlarge "+color_start+"</i> <i class='fa fa-stop-circle w3-xxlarge "+color_stop+"</i></td><td>Off <label class='switch'><input id='autoStart_"+config_info[0]+"' class='w3-check' type='checkbox' "+checked+"> <span class='slider round w3-theme'></span></label> On</td></tr>");
}
});

7
firmware_mod/www/js/index.js
View File

@@ -9,6 +9,13 @@ $.urlParam = function(name){
return decodeURI(results[1]) || 0;
}
//Function open page
function openPage(page) {
$.get(page+".html",function(data) {
$('#content').html(data);
});
}
//Function to open tab in pages
function openTab(evt, tabName) {
var i, x, tablinks;

26
firmware_mod/www/js/sdcard.js
View File

@@ -7,12 +7,18 @@ function deleteFile(fileName,dir) {
}
}
//Function to open picure
function openPicture(img) {
$('#modal_picture_content').html("<img class='w3-modal-content w3-center' src="+img+">");
document.getElementById('modal_picture').style.display='block'
}
//Function to get video and images files from dir
function getFiles(dir) {
// Get files from dir
$.get("cgi-bin/sdcard.cgi", {cmd: "getFiles", dir: dir}, function(config){
$('#'+dir).html(" <p></p>\
<table class='w3-table-all' id='result'>\
<table class='w3-table-all' id='result_"+dir+"'>\
<thead>\
<tr class='w3-theme'>\
<th>Filename</th>\
@@ -26,18 +32,24 @@ function getFiles(dir) {
if ( config_all.length == 1)
$('#'+dir).html("<h1>No file found</h1>");
for (var i = 0; i < config_all.length-1; i++) {
var config_info = config_all[i].split("#:#");
$('#result').append("<tr> \
var config_info = config_all[i].split("#:#");
var file_info = config_info[3].split(".");
var html_photo = "";
if (file_info[1] == "jpg")
html_photo = "<span onclick='openPicture(\""+config_info[3]+"\");' title='View picture'><i class='far fa-eye'></i>";
$('#result_'+dir).append("<tr> \
<td>"+config_info[0]+"</td> \
<td>"+config_info[1]+"</td> \
<td>"+config_info[2]+"</td> \
<td> \
<a href=\""+config_info[3]+"\"><i class='fas fa-download'></i></a> \
<span onclick=\"deleteFile('"+config_info[3]+"','"+dir+"')\"><i class='fas fa-trash'></i></span> \
</td></tr>");
<a href=\""+config_info[3]+"\" download><i class='fas fa-download' title='Download file'></i></a> \
<span onclick=\"deleteFile('"+config_info[3]+"','"+dir+"')\"><i class='fas fa-trash' title='Delete file'></i></span>\
"+html_photo+"\
</td></tr>");
}
$('#'+dir).append("</tbody></table><p></p>");
var table = $('#result').DataTable();
var table = $('#result_'+dir).DataTable();
$('#result'+dir).on( 'click', 'tr', function () {
//$(this).toggleClass('selected');
} );

25
firmware_mod/www/sdcard.html
View File

@@ -15,36 +15,27 @@
<div id="motion" class="w3-container tab" >
<p></p>
<h1>Loading your files...</h1>
<p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i><br/>LOADING</p>
<p></p>
</div>
<div id="recording" class="w3-container tab" style="display:none">
<p></p>
<h1>Loading your files...</h1>
<p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i><br/>LOADING</p>
<p></p>
</div>
<div id="timelapse" class="w3-container tab" style="display:none">
<p></p>
<h1>Loading your files...</h1>
<p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i><br/>LOADING</p>
<p></p>
</div>
<!-- Modal confirm delete box -->
<div id="delete_confirm" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-theme">
<span onclick="document.getElementById('delete_confirm').style.display='none'"
class="w3-button w3-display-topright">&times;</span>
<h2>Delete file</h2>
</header>
<div class="w3-container">
<p id="delete_result"></p>
</div>
</div>
<!-- Modal for open picure-->
<div id="modal_picture" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
<div id="modal_picture_content" class="w3-modal-content w3-animate-zoom"></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="js/sdcard.js"></script>