Mirrored_Repos/wz_mini_hacks
1
0
Fork 0
mirror of https://github.com/gtxaspec/wz_mini_hacks.git synced 2024-11-14 00:58:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

web fixes and improvements (#205)

Browse Source 
* updates to config.cgi and jpeg.cgi

* Update config.cgi

* config.cgi: type checks, blank line keep, css
This commit is contained in:
virmaior 2022-07-24 15:39:09 +09:00 committed by GitHub
parent 3b1561d805
commit 38b0ad69d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 281 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
SD_ROOT/wz_mini/www/cgi-bin/config.cgi
View File

@ -1,7 +1,8 @@
#!/bin/sh #!/bin/sh
# This serves a rudimentary webpage based on wz_mini.conf # This serves a rudimentary webpage based on wz_mini.conf
base_dir=/opt/wz_mini/ base_dir=/opt/wz_mini/
hack_ini=/opt/wz_mini/wz_mini.conf base_hack_ini=/opt/wz_mini/wz_mini.conf
hack_ini=$base_hack_ini
www_dir=/opt/wz_mini/www/cgi-bin/ www_dir=/opt/wz_mini/www/cgi-bin/
camver=V3 camver=V3
camfirmware=$(tail -n1 /configs/app.ver | cut -f2 -d= ) camfirmware=$(tail -n1 /configs/app.ver | cut -f2 -d= )
@ -39,7 +40,6 @@ function revert_config
{ {
mv "$hack_ini" "$hack_ini.old" mv "$hack_ini" "$hack_ini.old"
mv "$hack_ini.$1" "$hack_ini" mv "$hack_ini.$1" "$hack_ini"
} }
@ -53,12 +53,28 @@ function revert_menu
do do
xuff=$((xuff + 1)) xuff=$((xuff + 1))
if [[ -f "$1.$xuff" ]] ; then if [[ -f "$1.$xuff" ]] ; then
echo '&nbsp;<a href="?action=revert&version='"$xuff"'">'"$xuff</a>" filedate=$(date -r "$1.$xuff" )
class=""
if [ "$1.$xuff" = "$2" ];
then
class="current_revert"
fi
echo '<div class="revert_DIV '$class'"><div><a href="?action=show_revert&version='"$xuff"'">'"$xuff </a></div><div> $filedate</div></div>"
fi fi
done done
echo '</div>' echo '</div>'
} }
function version_info
{
echo "<div id='$1'>"
echo "<div class='ver_DIV' vertype='Camera'>$camver</div>"
echo "<div class='ver_DIV' vertype='Camera Firmware'>$camfirmware</div>"
echo "<div class='ver_DIV' vertype='wz_mini'>$hackver</div>"
echo "<div class='ver_DIV' vertype='Hostname'> $HOSTNAME</div>"
echo "</div>"
}
if [[ $REQUEST_METHOD = 'GET' ]]; then if [[ $REQUEST_METHOD = 'GET' ]]; then
@ -78,7 +94,9 @@ if [[ $REQUEST_METHOD = 'GET' ]]; then
if [[ "$GET_action" = "revert" ]]; then if [[ "$GET_action" = "revert" ]]; then
revert_config "$GET_version" revert_config "$GET_version"
fi fi
if [[ "$GET_action" = "show_revert" ]]; then
hack_ini="$hack_ini.$GET_version"
fi
fi fi
@ -104,16 +122,15 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
#switch back to going through the config file #switch back to going through the config file
IFS=$'\n'
output="$hack_ini.new" output="$hack_ini.new"
#name our output file #name our output file
for ARGUMENT in $(cat $hack_ini) while IFS= read -r \ARGUMENT; do
do
#cycle through each line of the current config #cycle through each line of the current config
#copy through all comments #copy through all comments
if [[ ${ARGUMENT:0:1} == "#" ]] ; then if [ -z "$ARGUMENT" ]; then
echo -ne "\n" >> $output
elif [[ ${ARGUMENT:0:1} == "#" ]] ; then
#echo $ARGUMENT $'\n' #echo $ARGUMENT $'\n'
echo -ne $ARGUMENT"\n" >> $output echo -ne $ARGUMENT"\n" >> $output
else else
@ -132,7 +149,7 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
fi fi
fi fi
done done < $hack_ini
shft $hack_ini shft $hack_ini
mv $output $hack_ini mv $output $hack_ini
@ -155,7 +172,14 @@ function documentation_to_html
function ini_to_html_free function ini_to_html_free
{ {
printf '<div class="ii"><div class="ii_key_DIV">%s</div><div class="ii_value_DIV"><input class="ii_value" type="text" name="%s" value="%s" /></div>' $1 $1 $2 classes=""
if [ "$1" = "USB_DIRECT_MAC_ADDR" ]; then
classes=" mac_addr"
fi
if grep -q -wi "$1" numerics.txt; then
classes=" numeric"
fi
printf '<div class="ii"><div class="ii_key_DIV">%s</div><div class="ii_value_DIV"><input class="ii_value'$classes'" type="text" name="%s" value="%s" /></div>' $1 $1 $2
documentation_to_html $1 documentation_to_html $1
printf '</div>' printf '</div>'
} }
@ -185,17 +209,20 @@ function html_cam_feed
function handle_css
{
echo -ne "<style type=\"text/css\">"
cat config.css
echo -ne '</style>';
}
echo -ne "<html><head><title>$title</title>" echo -ne "<html><head><title>$title</title>"
echo -ne "<style type=\"text/css\">" handle_css wz_mini_web.css
cat wz_mini_web.css
echo -ne '</style>';
echo '<script type="text/javascript" src="/config.js" ></script>' echo '<script type="text/javascript" src="/config.js" ></script>'
echo -ne "</head>" echo -ne "</head>"
echo -ne '<body>' echo -ne '<body>'
echo -ne "<h1>$title</h1>"; echo -ne "<h1>$title</h1>";
@ -208,13 +235,32 @@ fi
html_cam_feed html_cam_feed
echo -ne '<form name="wz_mini_hack_FORM" method="POST" enctype="application/x-www-form-urlencoded" >'
IFS=$'\n' if [ $base_hack_ini != $hack_ini ]; then
for ARGUMENT in $(cat $hack_ini)
do echo '<div><a href="?action=revert&version='$GET_version'">Revert</a> to this version</a></div>'
if [[ ${ARGUMENT:0:1} == "#" ]] ; then fi
echo -ne '<form name="update_config" method="POST" enctype="application/x-www-form-urlencoded" >'
CONFIG_BLOCK=0
while IFS= read -r ARGUMENT; do
if [ -z "$ARGUMENT" ] ; then
echo -ne ""
elif [[ ${ARGUMENT:0:1} == "#" ]] ; then
if [[ ${ARGUMENT:0:4} == "####" ]]; then
if [ "$CONFIG_BLOCK" -gt 0 ]; then
echo '</div>'
fi
CONFIG_BLOCK=$((CONFIG_BLOCK + 1))
echo '<div class="ii_block" block_number="'$CONFIG_BLOCK'" >'
BTITLE=${ARGUMENT//#/ }
echo -ne '<div class="ii_block_name">'$BTITLE'</div>'
else
echo -ne '<div class="ii_info">'$ARGUMENT'</div>' echo -ne '<div class="ii_info">'$ARGUMENT'</div>'
fi
else else
KEY=$(echo $ARGUMENT | cut -f1 -d=) KEY=$(echo $ARGUMENT | cut -f1 -d=)
VAL=$(echo $ARGUMENT | cut -f2 -d=) VAL=$(echo $ARGUMENT | cut -f2 -d=)
@ -225,17 +271,20 @@ do
*) ini_to_html_free $KEY $VALUE *) ini_to_html_free $KEY $VALUE
esac esac
fi fi
done done < $hack_ini
if [ "$CONFIG_BLOCK" -gt 0 ]; then
echo '</div>'
fi
echo -ne '<input type="submit" name="update" value="Update" />' echo -ne '<input type="submit" name="update" value="Update" />'
echo -ne '</form>' echo -ne '</form>'
revert_menu $hack_ini revert_menu $base_hack_ini $hack_ini
version_info "display_BAR"
html_cam_feed_js
echo -ne '</body></html>' echo -ne '</body></html>'

145
SD_ROOT/wz_mini/www/cgi-bin/config.css Normal file
View File

@ -0,0 +1,145 @@
BODY {
--feed_ratio: 2.5;
--display_bar_height: 20px;
--border-color: #ccc;
padding-bottom: var(--display_bar_height);
}
H1 {
background-color:blue;
color:white;
height:calc(108px * (var(--feed_ratio) - 1));
margin-top:0;
padding:5px;
margin-bottom:108px;
width:calc(100% - (192px * var(--feed_ratio)));
}
.ii_block {
border:3px solid var(--border-color);
margin-bottom:5px;
padding:2px;
border-radius:3px;
}
.ii_block_name {
background-color:var(--border-color);
text-align:center;
font-weight:bold;
color:#fff;
margin:-2px;
margin-bottom:3px;
}
.ii_info {
color:#333;
}
.ii {
width:100%;
position:relative;
display:flex;
}
.ii_key_DIV {
flex:0 0 40vw;
font-weight:bold;
}
.ii_value_DIV {
flex: 0 0 40vw;
text-align:right;
}
.ii_value {
width:75%;
}
.feed {
position:absolute;
top:10px;
right:0px;
width:calc(192px * var(--feed_ratio));
height:calc(108px * var(--feed_ratio));
z-index:10;
}
.ii_explain {
height:25px;
overflow:hidden;
width:25px;
position:relative;
}
.ii_explain:hover {
height: auto;
position: absolute;
left: 10%;
width: 80%;
border-radius: 3px;
padding: 5px;
background-color: #ccc;
z-index: 10;
border: 3px solid blue;
font-family: monospace;
white-space:pre-wrap;
}
.ii_explain:hover PRE {
white-space:pre-wrap;
}
.ii_explain:hover:after {
content:"";
border:none;
margin:0;
padding:0;
width:0;
height:0;
}
.ii_explain:after {
color:white;
content:"?";
text-align:center;
background-color:blue;
border:2px solid #ccc;
border-radius:3px;
padding-left:2px;
padding-right:2px;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.revert_DIV {
display:flex;
width:100%;
}
.revert_DIV DIV:nth-child(1) {
width:30px;
}
.current_revert {
background-color:#edf054;
}
#display_BAR {
position:fixed;
bottom:0;
background-color:blue;
border-top:1px solid lightblue;
color:#fff;
display:flex;
width:100%;
height:var(--display_bar_height);
}
#display_BAR DIV {
padding-right:15px;
}
.ver_DIV {
padding-left:60px;
min-width:120px;
font-family:monospace;
flex: 1 0 120px;
}
.ver_DIV:before {
content:attr(vertype);
font-weight:bold;
padding-right:10px;
}
.ver_DIV[vertype="wz_mini"] {
flex:1 0 400px;
}
.fail_val {
background-color:#fcc;
}

8
SD_ROOT/wz_mini/www/cgi-bin/numerics.txt Normal file
View File

@ -0,0 +1,8 @@
WEB_CAM_BIT_RATE
WEB_CAM_FPS_RATE
BONDING_LINK_MONITORING_FREQ_MS
BONDING_DOWN_DELAY_MS
BONDING_UP_DELAY_MS
RTSP_PORT
AUDIO_PROMPT_VOLUME

51
SD_ROOT/wz_mini/www/config.js
View File

@ -1,4 +1,23 @@
var feed_interval_frequency = 1000;
var mac_re = /^[0-9a-f]{1,2}([\.:-])(?:[0-9a-f]{1,2}\1){4}[0-9a-f]{1,2}$/mi;
// https://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066
function isInt(value) {
return !isNaN(value) &&
parseInt(Number(value)) == value &&
!isNaN(parseInt(value, 10));
}
function scrollTop()
{
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
window.onload = function() window.onload = function()
{ {
var feed = document.getElementById("current_feed"); var feed = document.getElementById("current_feed");
@ -6,5 +25,35 @@ window.onload = function()
{ {
feed.src = feed.src.split("&")[0] + "&load=" + new Date().getTime(); feed.src = feed.src.split("&")[0] + "&load=" + new Date().getTime();
} }
setInterval(update_image, 1000); feed_interval = setInterval(update_image, feed_interval_frequency);
document.querySelector('[name="update_config"]').addEventListener('submit',
function(e){
const mac_addrs = document.getElementsByClassName('mac_addr');
for (let i=0; i < mac_addrs.length; i++) {
mac_addrs[i].classList.remove("fail_val");
if (mac_addrs[i].value == "") { continue; }
if (!mac_re.test(mac_addrs[i].value)) {
mac_addrs[i].classList.add("fail_val");
scrollTop();
console.log("failed on mac address test for " + mac_addrs[i].name + " for value " + mac_addrs[i].value);
e.preventDefault();
}
}
const numerics = document.getElementsByClassName('numeric');
for (let i=0; i < numerics.length; i++) {
numerics[i].classList.remove("fail_val");
if (numerics[i].value == "") { continue; }
if (!isInt(numerics[i].value)) {
numerics[i].classList.add("fail_val");
scrollTop();
console.log("failed on integer test for " + numerics[i].name);
e.preventDefault();
}
}
}
);
} }