mirror of
https://github.com/gtxaspec/wz_mini_hacks.git
synced 2024-12-22 12:23:35 +00:00
web fixes and improvements (#205)
* updates to config.cgi and jpeg.cgi * Update config.cgi * config.cgi: type checks, blank line keep, css
This commit is contained in:
virmaior
GitHub
parent
3b1561d805
commit
38b0ad69d7
@ -1,7 +1,8 @@
|
||||
#!/bin/sh
|
||||
# This serves a rudimentary webpage based on wz_mini.conf
|
||||
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/
|
||||
camver=V3
|
||||
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.$1" "$hack_ini"
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -48,17 +48,33 @@ function revert_menu
|
||||
echo '<a href="revert" >Revert Menu</a>'
|
||||
echo '<div class="old_configs">'
|
||||
echo 'Prior Versions : '
|
||||
xuff=0
|
||||
xuff=0
|
||||
while [ "$xuff" -lt 9 ] ;
|
||||
do
|
||||
xuff=$((xuff + 1))
|
||||
if [[ -f "$1.$xuff" ]] ; then
|
||||
echo ' <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
|
||||
done
|
||||
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
|
||||
@ -78,7 +94,9 @@ if [[ $REQUEST_METHOD = 'GET' ]]; then
|
||||
if [[ "$GET_action" = "revert" ]]; then
|
||||
revert_config "$GET_version"
|
||||
fi
|
||||
|
||||
if [[ "$GET_action" = "show_revert" ]]; then
|
||||
hack_ini="$hack_ini.$GET_version"
|
||||
fi
|
||||
fi
|
||||
|
||||
|
||||
@ -104,16 +122,15 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
|
||||
|
||||
|
||||
#switch back to going through the config file
|
||||
IFS=$'\n'
|
||||
output="$hack_ini.new"
|
||||
|
||||
#name our output file
|
||||
for ARGUMENT in $(cat $hack_ini)
|
||||
do
|
||||
while IFS= read -r \ARGUMENT; do
|
||||
#cycle through each line of the current config
|
||||
|
||||
#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 -ne $ARGUMENT"\n" >> $output
|
||||
else
|
||||
@ -132,7 +149,7 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
|
||||
fi
|
||||
|
||||
fi
|
||||
done
|
||||
done < $hack_ini
|
||||
|
||||
shft $hack_ini
|
||||
mv $output $hack_ini
|
||||
@ -155,7 +172,14 @@ function documentation_to_html
|
||||
|
||||
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
|
||||
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 "<style type=\"text/css\">"
|
||||
cat wz_mini_web.css
|
||||
echo -ne '</style>';
|
||||
handle_css wz_mini_web.css
|
||||
|
||||
echo '<script type="text/javascript" src="/config.js" ></script>'
|
||||
echo -ne "</head>"
|
||||
|
||||
|
||||
|
||||
|
||||
echo -ne '<body>'
|
||||
echo -ne "<h1>$title</h1>";
|
||||
|
||||
@ -208,13 +235,32 @@ fi
|
||||
|
||||
html_cam_feed
|
||||
|
||||
echo -ne '<form name="wz_mini_hack_FORM" method="POST" enctype="application/x-www-form-urlencoded" >'
|
||||
|
||||
IFS=$'\n'
|
||||
for ARGUMENT in $(cat $hack_ini)
|
||||
do
|
||||
if [[ ${ARGUMENT:0:1} == "#" ]] ; then
|
||||
echo -ne '<div class="ii_info">'$ARGUMENT'</div>'
|
||||
if [ $base_hack_ini != $hack_ini ]; then
|
||||
|
||||
echo '<div><a href="?action=revert&version='$GET_version'">Revert</a> to this version</a></div>'
|
||||
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>'
|
||||
fi
|
||||
else
|
||||
KEY=$(echo $ARGUMENT | cut -f1 -d=)
|
||||
VAL=$(echo $ARGUMENT | cut -f2 -d=)
|
||||
@ -225,17 +271,20 @@ do
|
||||
*) ini_to_html_free $KEY $VALUE
|
||||
esac
|
||||
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 '</form>'
|
||||
|
||||
|
||||
revert_menu $hack_ini
|
||||
revert_menu $base_hack_ini $hack_ini
|
||||
|
||||
|
||||
|
||||
html_cam_feed_js
|
||||
|
||||
version_info "display_BAR"
|
||||
|
||||
echo -ne '</body></html>'
|
||||
|
||||
145
SD_ROOT/wz_mini/www/cgi-bin/config.css
Normal file
145
SD_ROOT/wz_mini/www/cgi-bin/config.css
Normal 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
8
SD_ROOT/wz_mini/www/cgi-bin/numerics.txt
Normal 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
|
||||
|
||||
@ -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()
|
||||
{
|
||||
var feed = document.getElementById("current_feed");
|
||||
@ -6,5 +25,35 @@ window.onload = function()
|
||||
{
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user