Files
motion/src/webu_html.cpp
2021-03-21 16:23:51 -06:00

1281 lines
48 KiB
C++

/*
* This file is part of MotionPlus.
*
* MotionPlus is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* MotionPlus is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with MotionPlus. If not, see <https://www.gnu.org/licenses/>.
*
* Copyright 2020 MotionMrDave@gmail.com
*/
/*
* Functional naming scheme
* webu_html* - Functions that create the display webcontrol page.
* webu_html_main - Entry point from webu_ans_ctrl(in webu.c)
* webu_html_page - Create the web page
* webu_html_head - Header section of the page
* webu_html_style* - The style section of the web page
* webu_html_body - Calls all the functions to create the body
* webu_html_navbar* - The navbar section of the web page
* webu_html_config* - config parms of page
* webu_html_track* - Tracking functions
* webu_html_script* - The javascripts of the web page
*
* To debug, run code, open page, view source and make copy of html
* into a local file to revise changes then determine applicable section(s)
* in this code to modify to match modified version.
* Known HTML Issues:
* Single and double quotes are not consistently used.
* HTML ids do not follow any naming convention.
* After clicking restart, do something...Try to connect again?
*
* Additional functionality considerations:
* Notification to user of items that require restart when changed.
* Notification to user that item successfully implemented (config change/tracking)
* List MotionPlus parms somewhere so they can be found by xgettext
*
*/
#include "motionplus.hpp"
#include "conf.hpp"
#include "logger.hpp"
#include "util.hpp"
#include "webu.hpp"
#include "webu_html.hpp"
/* struct to save information regarding the links to include in html page */
struct strminfo_ctx {
struct ctx_cam **camlst;
char lnk_ref[WEBUI_LEN_LNK];
char lnk_src[WEBUI_LEN_LNK];
char lnk_camid[WEBUI_LEN_LNK];
char proto[WEBUI_LEN_LNK];
int port;
int motion_images;
};
static void webu_html_style_navbar(struct webui_ctx *webui) {
/* Write out the style section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" .navbar {\n"
" overflow: hidden;\n"
" background-color: #333;\n"
" font-family: Arial;\n"
" }\n"
" .navbar a {\n"
" float: left;\n"
" font-size: 16px;\n"
" color: white;\n"
" text-align: center;\n"
" padding: 14px 16px;\n"
" text-decoration: none;\n"
" }\n"
" .navbar a:hover, {\n"
" background-color: darkgray;\n"
" }\n");
webu_write(webui, response);
}
static void webu_html_style_dropdown(struct webui_ctx *webui) {
/* Write out the style section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" .dropdown {\n"
" float: left;\n"
" overflow: hidden;\n"
" }\n"
" .dropdown .dropbtn {\n"
" font-size: 16px;\n"
" border: none;\n"
" outline: none;\n"
" color: white;\n"
" padding: 14px 16px;\n"
" background-color: inherit;\n"
" font-family: inherit;\n"
" margin: 0;\n"
" }\n"
" .dropdown-content {\n"
" display: none;\n"
" position: absolute;\n"
" background-color: #f9f9f9;\n"
" min-width: 160px;\n"
" box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n"
" z-index: 1;\n"
" }\n"
" .dropdown-content a {\n"
" float: none;\n"
" color: black;\n"
" padding: 12px 16px;\n"
" text-decoration: none;\n"
" display: block;\n"
" text-align: left;\n"
" }\n"
" .dropdown-content a:hover {\n"
" background-color: lightgray;\n"
" }\n"
" .dropdown:hover .dropbtn {\n"
" background-color: darkgray;\n"
" }\n"
" .border {\n"
" border-width: 2px;\n"
" border-color: white;\n"
" border-style: solid;\n"
" }\n");
webu_write(webui, response);
}
static void webu_html_style_input(struct webui_ctx *webui) {
/* Write out the style section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" input , select {\n"
" width: 25%;\n"
" padding: 5px;\n"
" margin: 0;\n"
" display: inline-block;\n"
" border: 1px solid #ccc;\n"
" border-radius: 4px;\n"
" box-sizing: border-box;\n"
" height: 50%;\n"
" font-size: 75%;\n"
" margin-bottom: 5px;\n"
" }\n"
" .frm-input{\n"
" text-align:center;\n"
" }\n");
webu_write(webui, response);
}
static void webu_html_style_base(struct webui_ctx *webui) {
/* Write out the style section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" * {margin: 0; padding: 0; }\n"
" body {\n"
" padding: 0;\n"
" margin: 0;\n"
" font-family: Arial, Helvetica, sans-serif;\n"
" font-size: 16px;\n"
" line-height: 1;\n"
" color: #606c71;\n"
" background-color: #159957;\n"
" background-image: linear-gradient(120deg, #155799, #159957);\n"
" margin-left:0.5% ;\n"
" margin-right:0.5% ;\n"
" width: device-width ;\n"
" }\n"
" img {\n"
" max-width: 100%;\n"
" max-height: 100%;\n"
" height: auto;\n"
" }\n"
" .page-header {\n"
" color: #fff;\n"
" text-align: center;\n"
" margin-top: 0rem;\n"
" margin-bottom: 0rem;\n"
" font-weight: normal;\n"
" }\n");
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" .page-header h4 {\n"
" height: 2px;\n"
" padding: 0;\n"
" margin: 1rem 0;\n"
" border: 0;\n"
" }\n"
" .main-content {\n"
" background-color: #000000;\n"
" text-align: center;\n"
" margin-top: 0rem;\n"
" margin-bottom: 0rem;\n"
" font-weight: normal;\n"
" font-size: 0.90em;\n"
" }\n"
" .header-right{\n"
" float: right;\n"
" color: white;\n"
" }\n"
" .header-center {\n"
" text-align: center;\n"
" color: white;\n"
" margin-top: 10px;\n"
" margin-bottom: 10px;\n"
" }\n");
webu_write(webui, response);
}
static void webu_html_style(struct webui_ctx *webui) {
/* Write out the style section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s", " <style>\n");
webu_write(webui, response);
webu_html_style_base(webui);
webu_html_style_navbar(webui);
webu_html_style_input(webui);
webu_html_style_dropdown(webui);
snprintf(response, sizeof (response),"%s", " </style>\n");
webu_write(webui, response);
}
static void webu_html_head(struct webui_ctx *webui) {
/* Write out the header section of the web page */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s","<head>\n"
" <meta charset=\"UTF-8\">\n"
" <title>MotionPlus</title>\n"
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n");
webu_write(webui, response);
webu_html_style(webui);
snprintf(response, sizeof (response),"%s", "</head>\n");
webu_write(webui, response);
}
static void webu_html_navbar_camera(struct webui_ctx *webui) {
/*Write out the options included in the camera dropdown */
char response[WEBUI_LEN_RESP];
int indx;
if (webui->cam_threads == 1){
/* Only MotionPlus.conf file */
if (webui->camlst[0]->conf->camera_name == ""){
snprintf(response, sizeof (response),
" <div class=\"dropdown\">\n"
" <button onclick='display_cameras()' id=\"cam_drop\" class=\"dropbtn\">%s</button>\n"
" <div id='cam_btn' class=\"dropdown-content\">\n"
" <a onclick=\"camera_click('cam_%05d');\">%s 1</a>\n"
,_("Cameras")
,webui->camlst[0]->camera_id
,_("Camera"));
webu_write(webui, response);
} else {
snprintf(response, sizeof (response),
" <div class=\"dropdown\">\n"
" <button onclick='display_cameras()' id=\"cam_drop\" class=\"dropbtn\">%s</button>\n"
" <div id='cam_btn' class=\"dropdown-content\">\n"
" <a onclick=\"camera_click('cam_%05d');\">%s</a>\n"
,_("Cameras")
,webui->camlst[0]->camera_id
,webui->camlst[0]->conf->camera_name.c_str());
webu_write(webui, response);
}
} else if (webui->cam_threads > 1){
/* MotionPlus.conf + separate camera.conf file */
snprintf(response, sizeof (response),
" <div class=\"dropdown\">\n"
" <button onclick='display_cameras()' id=\"cam_drop\" class=\"dropbtn\">%s</button>\n"
" <div id='cam_btn' class=\"dropdown-content\">\n"
" <a onclick=\"camera_click('cam_all00');\">%s</a>\n"
,_("Cameras")
,_("All"));
webu_write(webui, response);
for (indx=1;indx <= webui->cam_count;indx++){
if (webui->camlst[indx]->conf->camera_name == ""){
snprintf(response, sizeof (response),
" <a onclick=\"camera_click('cam_%05d');\">%s %d</a>\n"
,webui->camlst[indx]->camera_id
, _("Camera"), webui->camlst[indx]->camera_id);
} else {
snprintf(response, sizeof (response),
" <a onclick=\"camera_click('cam_%05d');\">%s</a>\n"
,webui->camlst[indx]->camera_id
,webui->camlst[indx]->conf->camera_name.c_str()
);
}
webu_write(webui, response);
}
}
snprintf(response, sizeof (response),"%s",
" </div>\n"
" </div>\n");
webu_write(webui, response);
}
static void webu_html_navbar_action(struct webui_ctx *webui) {
/* Write out the options included in the actions dropdown*/
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),
" <div class=\"dropdown\">\n"
" <button onclick='display_actions()' id=\"act_drop\" class=\"dropbtn\">%s</button>\n"
" <div id='act_btn' class=\"dropdown-content\">\n"
" <a onclick=\"action_click('/action/eventstart');\">%s</a>\n"
" <a onclick=\"action_click('/action/eventend');\">%s</a>\n"
" <a onclick=\"action_click('/action/snapshot');\">%s</a>\n"
" <a onclick=\"action_click('config');\">%s</a>\n"
" <a onclick=\"action_click('/config/write');\">%s</a>\n"
" <a onclick=\"action_click('track');\">%s</a>\n"
" <a onclick=\"action_click('/detection/pause');\">%s</a>\n"
" <a onclick=\"action_click('/detection/start');\">%s</a>\n"
" <a onclick=\"action_click('/action/restart');\">%s</a>\n"
" <a onclick=\"action_click('/action/quit');\">%s</a>\n"
" </div>\n"
" </div>\n"
,_("Action")
,_("Start Event")
,_("End Event")
,_("Snapshot")
,_("Change Configuration")
,_("Write Configuration")
,_("Tracking")
,_("Pause")
,_("Start")
,_("Restart")
,_("Quit"));
webu_write(webui, response);
}
static void webu_html_navbar(struct webui_ctx *webui) {
/* Write the navbar section*/
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" <div class=\"navbar\">\n");
webu_write(webui, response);
webu_html_navbar_camera(webui);
webu_html_navbar_action(webui);
snprintf(response, sizeof (response),
" <a href=\"https://motion-project.github.io/motion_guide.html\" "
" target=\"_blank\">%s</a>\n"
" <p class=\"header-right\">MotionPlus " VERSION "</p>\n"
" </div>\n"
,_("Help"));
webu_write(webui, response);
}
static void webu_html_config_notice(struct webui_ctx *webui) {
/* Print out the header description of which parameters are included based upon the
* webcontrol_parms that was specified
*/
char response[WEBUI_LEN_RESP];
if (webui->camlst[0]->conf->webcontrol_parms == 0){
snprintf(response, sizeof (response),
" <h4 id='h4_parm' class='header-center'>webcontrol_parms = 0 (%s)</h4>\n"
,_("No Configuration Options"));
} else if (webui->camlst[0]->conf->webcontrol_parms == 1){
snprintf(response, sizeof (response),
" <h4 id='h4_parm' class='header-center'>webcontrol_parms = 1 (%s)</h4>\n"
,_("Limited Configuration Options"));
} else if (webui->camlst[0]->conf->webcontrol_parms == 2){
snprintf(response, sizeof (response),
" <h4 id='h4_parm' class='header-center'>webcontrol_parms = 2 (%s)</h4>\n"
,_("Advanced Configuration Options"));
} else{
snprintf(response, sizeof (response),
" <h4 id='h4_parm' class='header-center'>webcontrol_parms = 3 (%s)</h4>\n"
,_("Restricted Configuration Options"));
}
webu_write(webui, response);
}
static void webu_html_h3desc(struct webui_ctx *webui) {
/* Write out the status description for the camera */
char response[WEBUI_LEN_RESP];
if (webui->cam_threads == 1){
snprintf(response, sizeof (response),
" <div id=\"id_header\">\n"
" <h3 id='h3_cam' data-cam=\"cam_all00\" class='header-center'>%s (%s)</h3>\n"
" </div>\n"
,_("All Cameras")
,(!webui->camlst[0]->running_cam)? _("Not running") :
(webui->camlst[0]->lost_connection)? _("Lost connection"):
(webui->camlst[0]->pause)? _("Paused"):_("Active")
);
webu_write(webui,response);
} else {
snprintf(response, sizeof (response),
" <div id=\"id_header\">\n"
" <h3 id='h3_cam' data-cam=\"cam_all00\" class='header-center'>%s</h3>\n"
" </div>\n"
,_("All Cameras"));
webu_write(webui,response);
}
}
static void webu_html_config(struct webui_ctx *webui) {
/* Write out the options to put into the config dropdown
* We use html data attributes to store the values for the options
* We always set a cam_all00 attribute and if the value if different for
* any of our cameras, then we also add a cam_xxxxx which has the config
* value for camera xxxxx The javascript then decodes these to display
*/
char response[WEBUI_LEN_RESP];
int indx_parm, indx, diff_vals, retcd;
char val_main[PATH_MAX], val_thread[PATH_MAX];
char *val_temp;
snprintf(response, sizeof (response),"%s",
" <div id='cfg_form' style=\"display:none\">\n");
webu_write(webui, response);
webu_html_config_notice(webui);
snprintf(response, sizeof (response),
" <form class=\"frm-input\">\n"
" <select id='cfg_parms' name='onames' "
" autocomplete='off' onchange='config_change();'>\n"
" <option value='default' data-cam_all00=\"\" >%s</option>\n"
,_("Select option"));
webu_write(webui, response);
/* The config_params[indx_parm].print reuses the buffer so create a
* temporary variable for storing our parameter from main to compare
* to the thread specific value
*/
val_temp=(char*) malloc(PATH_MAX);
indx_parm = 0;
while (config_parms[indx_parm].parm_name != ""){
if ((config_parms[indx_parm].webui_level > webui->camlst[0]->conf->webcontrol_parms) ||
(config_parms[indx_parm].webui_level == WEBUI_LEVEL_NEVER)){
indx_parm++;
continue;
}
memset(val_main,'\0',PATH_MAX);
conf_edit_get(webui->camlst[0], config_parms[indx_parm].parm_name
, val_main, config_parms[indx_parm].parm_cat);
snprintf(response, sizeof (response),
" <option value='%s' data-cam_all00=\""
, config_parms[indx_parm].parm_name.c_str());
webu_write(webui, response);
memset(val_temp,'\0',PATH_MAX);
if (val_main != NULL){
retcd= snprintf(response, sizeof (response),"%s", val_main);
if (retcd <0) MOTION_LOG(INF, TYPE_STREAM, NO_ERRNO, _("Error option"));
webu_write(webui, response);
snprintf(val_temp, PATH_MAX,"%s", val_main);
}
/* Loop through all the treads and see if any have a different value from motionplus.conf */
if (webui->cam_threads > 1){
for (indx=1;indx <= webui->cam_count;indx++){
memset(val_thread,'\0',PATH_MAX);
conf_edit_get(webui->camlst[indx], config_parms[indx_parm].parm_name
, val_thread, config_parms[indx_parm].parm_cat);
diff_vals = FALSE;
if (((strlen(val_temp) == 0) && (val_thread == NULL)) ||
((strlen(val_temp) != 0) && (val_thread == NULL))) {
diff_vals = FALSE;
} else if (((strlen(val_temp) == 0) && (val_thread != NULL)) ) {
diff_vals = TRUE;
} else {
if (mystrcne(val_temp, val_thread)) diff_vals = TRUE;
}
if (diff_vals){
snprintf(response, sizeof (response),"%s","\" \\ \n");
webu_write(webui, response);
snprintf(response, sizeof (response),
" data-cam_%05d=\""
,webui->camlst[indx]->camera_id);
webu_write(webui, response);
if (val_thread != NULL){
retcd = snprintf(response, sizeof (response),"%s", val_thread);
if (retcd <0) MOTION_LOG(INF, TYPE_STREAM, NO_ERRNO, _("Error option"));
webu_write(webui, response);
}
}
}
}
/* Terminate the open quote and option. For foreign language put hint in () */
if (mystrceq(webui->lang,"en") ||
mystrceq(config_parms[indx_parm].parm_name.c_str()
,_(config_parms[indx_parm].parm_name.c_str()))){
snprintf(response, sizeof (response),"\" >%s</option>\n",
config_parms[indx_parm].parm_name.c_str());
webu_write(webui, response);
} else {
snprintf(response, sizeof (response),"\" >%s (%s)</option>\n",
config_parms[indx_parm].parm_name.c_str()
,_(config_parms[indx_parm].parm_name.c_str()));
webu_write(webui, response);
}
indx_parm++;
}
free(val_temp);
snprintf(response, sizeof (response),
" </select>\n"
" <input type=\"text\" id=\"cfg_value\" >\n"
" <input type='button' id='cfg_button' value='%s' onclick='config_click()'>\n"
" </form>\n"
" </div>\n"
,_("Save"));
webu_write(webui, response);
}
static void webu_html_track(struct webui_ctx *webui) {
/* Write the section for handling the tracking function */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),
" <div id='trk_form' style='display:none'>\n"
" <form class='frm-input'>\n"
" <select id='trk_option' name='trkopt' autocomplete='off' "
" style='width:20%%' onchange='track_change();'>\n"
" <option value='pan/tilt' data-trk='pan' >%s</option>\n"
" <option value='absolute' data-trk='abs' >%s</option>\n"
" <option value='center' data-trk='ctr' >%s</option>\n"
" </select>\n"
" <label id='trk_lblpan' style='color:white; display:inline' >%s</label>\n"
" <label id='trk_lblx' style='color:white; display:none' >X</label>\n"
" <input type='text' id='trk_panx' style='width:10%%' >\n"
" <label id='trk_lbltilt' style='color:white; display:inline' >%s</label>\n"
" <label id='trk_lbly' style='color:white; display:none' >Y</label>\n"
" <input type='text' id='trk_tilty' style='width:10%%' >\n"
" <input type='button' id='trk_button' value='%s' "
" style='width:10%%' onclick='track_click()'>\n"
" </form>\n"
" </div>\n"
,_("Pan/Tilt")
,_("Absolute Change")
,_("Center")
,_("Pan")
,_("Tilt")
,_("Save"));
webu_write(webui, response);
}
static void webu_html_strminfo(struct strminfo_ctx *strm_info, int indx) {
/* This determines all the items we need to know to specify links and
* stream sources for the page. The options are 0-3 as of this writing
* where 0 = full streams, 1 = substreams, 2 = static images and 3 is
* the legacy code for creating streams. So we need to assign not only
* what images are to be sent but also whether we have tls/ssl.
* There are WAY too many options for this.
*/
/* If using the main port,we need to insert a thread number into url*/
if (strm_info->camlst[0]->conf->stream_port != 0) {
snprintf(strm_info->lnk_camid,WEBUI_LEN_LNK,"/%d"
,strm_info->camlst[indx]->camera_id);
strm_info->port = strm_info->camlst[0]->conf->stream_port;
if (strm_info->camlst[0]->conf->stream_tls) {
snprintf(strm_info->proto,WEBUI_LEN_LNK,"%s","https");
} else {
snprintf(strm_info->proto,WEBUI_LEN_LNK,"%s","http");
}
} else {
snprintf(strm_info->lnk_camid,WEBUI_LEN_LNK,"%s","");
strm_info->port = strm_info->camlst[indx]->conf->stream_port;
if (strm_info->camlst[indx]->conf->stream_tls) {
snprintf(strm_info->proto,WEBUI_LEN_LNK,"%s","https");
} else {
snprintf(strm_info->proto,WEBUI_LEN_LNK,"%s","http");
}
}
if (strm_info->motion_images){
snprintf(strm_info->lnk_ref,WEBUI_LEN_LNK,"%s","/motion");
snprintf(strm_info->lnk_src,WEBUI_LEN_LNK,"%s","/motion");
} else {
/* Assign what images and links we want */
if (strm_info->camlst[indx]->conf->stream_preview_method == 1){
/* Substream for preview */
snprintf(strm_info->lnk_ref,WEBUI_LEN_LNK,"%s","/stream");
snprintf(strm_info->lnk_src,WEBUI_LEN_LNK,"%s","/substream");
} else if (strm_info->camlst[indx]->conf->stream_preview_method == 2){
/* Static image for preview */
snprintf(strm_info->lnk_ref,WEBUI_LEN_LNK,"%s","/stream");
snprintf(strm_info->lnk_src,WEBUI_LEN_LNK,"%s","/current");
} else if (strm_info->camlst[indx]->conf->stream_preview_method == 4){
/* Source image for preview */
snprintf(strm_info->lnk_ref,WEBUI_LEN_LNK,"%s","/source");
snprintf(strm_info->lnk_src,WEBUI_LEN_LNK,"%s","/source");
} else {
/* Full stream for preview (method 0 or 3)*/
snprintf(strm_info->lnk_ref,WEBUI_LEN_LNK,"%s","/stream");
snprintf(strm_info->lnk_src,WEBUI_LEN_LNK,"%s","/stream");
}
}
}
static void webu_html_preview(struct webui_ctx *webui) {
/* Write the initial version of the preview section. The javascript
* will change this section when user selects a different camera */
char response[WEBUI_LEN_RESP];
int indx, indx_st, preview_scale;
struct strminfo_ctx strm_info;
strm_info.camlst = webui->camlst;
snprintf(response, sizeof (response),"%s",
" <div id=\"liveview\">\n"
" <section class=\"main-content\">\n"
" <br>\n"
" <p id=\"id_preview\">\n");
webu_write(webui, response);
indx_st = 1;
if (webui->cam_threads == 1) indx_st = 0;
for (indx = indx_st; indx<webui->cam_threads; indx++){
if (webui->camlst[indx]->conf->stream_preview_newline){
snprintf(response, sizeof (response),"%s"," <br>\n");
webu_write(webui, response);
}
if (webui->camlst[indx]->conf->stream_preview_method == 3){
preview_scale = 45;
} else {
preview_scale = webui->camlst[indx]->conf->stream_preview_scale;
}
strm_info.motion_images = FALSE;
webu_html_strminfo(&strm_info,indx);
snprintf(response, sizeof (response),
" <a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s border=0 width=%d%%></a>\n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src
,preview_scale);
webu_write(webui, response);
if (webui->camlst[indx]->conf->stream_preview_method == 3){
strm_info.motion_images = TRUE;
webu_html_strminfo(&strm_info,indx);
snprintf(response, sizeof (response),
" <a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s class=border width=%d%%></a>\n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src
,preview_scale);
webu_write(webui, response);
}
}
snprintf(response, sizeof (response),"%s",
" </p>\n"
" <br>\n"
" </section>\n"
" </div>\n");
webu_write(webui, response);
}
static void webu_html_script_action(struct webui_ctx *webui) {
/* Write the javascript action_click() function.
* We do not have a good notification section on the page so the successful
* submission and response is currently a empty if block for the future
* enhancement to somehow notify the user everything worked */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function event_reloadpage() {\n"
" window.location.reload();\n"
" }\n\n"
);
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" function action_click(actval) {\n"
" if (actval == \"config\"){\n"
" document.getElementById('trk_form').style.display=\"none\";\n"
" document.getElementById('cfg_form').style.display=\"inline\";\n"
" } else if (actval == \"track\"){\n"
" document.getElementById('cfg_form').style.display=\"none\";\n"
" document.getElementById('trk_form').style.display=\"inline\";\n"
" } else {\n"
" document.getElementById('cfg_form').style.display=\"none\";\n"
" document.getElementById('trk_form').style.display=\"none\";\n"
" var camstr = document.getElementById('h3_cam').getAttribute('data-cam');\n"
" var camnbr = camstr.substring(4,9);\n"
" var http = new XMLHttpRequest();\n"
" if ((actval == \"/detection/pause\") || (actval == \"/detection/start\")) {\n"
" http.addEventListener('load', event_reloadpage); \n"
" }\n"
);
webu_write(webui, response);
snprintf(response, sizeof (response),
" var url = \"%s://%s:%d/\"; \n"
,webui->hostproto, webui->hostname
,webui->camlst[0]->conf->webcontrol_port);
webu_write(webui, response);
snprintf(response, sizeof (response),
" if (camnbr == \"all00\"){\n"
" url = url + \"%05d\";\n"
" } else {\n"
" url = url + camnbr;\n"
" }\n"
" url = url + actval;\n"
,webui->camlst[0]->camera_id);
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" http.open(\"GET\", url, true);\n"
" http.onreadystatechange = function() {\n"
" if(http.readyState == 4 && http.status == 200) {\n"
" }\n"
" }\n"
" http.send(null);\n"
" }\n"
" document.getElementById('act_btn').style.display=\"none\"; \n"
" document.getElementById('cfg_value').value = '';\n"
" document.getElementById('cfg_parms').value = 'default';\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_camera_thread(struct webui_ctx *webui) {
/* Write the javascript thread IF conditions of camera_click() function */
char response[WEBUI_LEN_RESP];
int indx, indx_st, preview_scale;
struct strminfo_ctx strm_info;
indx_st = 1;
if (webui->cam_threads == 1) indx_st = 0;
strm_info.camlst = webui->camlst;
for (indx = indx_st; indx<webui->cam_threads; indx++){
snprintf(response, sizeof (response),
" if (camid == \"cam_%05d\"){\n"
,webui->camlst[indx]->camera_id);
webu_write(webui, response);
if (webui->camlst[indx]->conf->stream_preview_method == 3){
preview_scale = 45;
} else {
preview_scale = 95;
}
strm_info.motion_images = FALSE;
webu_html_strminfo(&strm_info, indx);
snprintf(response, sizeof (response),
" preview=\"<a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s/ border=0 width=%d%%></a>\" \n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname,strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src, preview_scale);
webu_write(webui, response);
if (webui->camlst[indx]->conf->stream_preview_method == 3){
strm_info.motion_images = TRUE;
webu_html_strminfo(&strm_info, indx);
snprintf(response, sizeof (response),
" preview=preview + \"<a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s/ class=border width=%d%%></a>\" \n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname,strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src, preview_scale);
webu_write(webui, response);
}
if (webui->camlst[indx]->conf->camera_name == ""){
snprintf(response, sizeof (response),
" header=\"<h3 id='h3_cam' data-cam='\" + camid + \"' "
" class='header-center' >%s %d (%s)</h3>\"\n"
,_("Camera")
, webui->camlst[indx]->camera_id
,(!webui->camlst[indx]->running_cam)? _("Not running") :
(webui->camlst[indx]->lost_connection)? _("Lost connection"):
(webui->camlst[indx]->pause)? _("Paused"):_("Active")
);
} else {
snprintf(response, sizeof (response),
" header=\"<h3 id='h3_cam' data-cam='\" + camid + \"' "
" class='header-center' >%s (%s)</h3>\"\n"
, webui->camlst[indx]->conf->camera_name.c_str()
,(!webui->camlst[indx]->running_cam)? _("Not running") :
(webui->camlst[indx]->lost_connection)? _("Lost connection"):
(webui->camlst[indx]->pause)? _("Paused"):_("Active")
);
}
webu_write(webui, response);
snprintf(response, sizeof (response),"%s"," }\n");
webu_write(webui, response);
}
return;
}
static void webu_html_script_camera_all(struct webui_ctx *webui) {
/* Write the javascript "All" IF condition of camera_click() function */
char response[WEBUI_LEN_RESP];
int indx, indx_st, preview_scale;
struct strminfo_ctx strm_info;
indx_st = 1;
if (webui->cam_threads == 1) indx_st = 0;
strm_info.camlst = webui->camlst;
snprintf(response, sizeof (response), " if (camid == \"cam_all00\"){\n");
webu_write(webui, response);
for (indx = indx_st; indx<webui->cam_threads; indx++){
if (indx == indx_st){
snprintf(response, sizeof (response),"%s"," preview = \"\";\n");
webu_write(webui, response);
}
if (webui->camlst[indx]->conf->stream_preview_newline){
snprintf(response, sizeof (response),"%s"," preview = preview + \" <br>\";\n");
webu_write(webui, response);
}
if (webui->camlst[indx]->conf->stream_preview_method == 3){
preview_scale = 45;
} else {
preview_scale = webui->camlst[indx]->conf->stream_preview_scale;
}
strm_info.motion_images = FALSE;
webu_html_strminfo(&strm_info, indx);
snprintf(response, sizeof (response),
" preview = preview + \"<a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s border=0 width=%d%%></a>\"; \n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src
,preview_scale);
webu_write(webui, response);
if (webui->camlst[indx]->conf->stream_preview_method == 3){
strm_info.motion_images = TRUE;
webu_html_strminfo(&strm_info, indx);
snprintf(response, sizeof (response),
" preview = preview + \"<a href=%s://%s:%d%s%s> "
" <img src=%s://%s:%d%s%s class=border width=%d%%></a>\"; \n"
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_ref
,strm_info.proto, webui->hostname, strm_info.port
,strm_info.lnk_camid, strm_info.lnk_src
,preview_scale);
webu_write(webui, response);
}
}
snprintf(response, sizeof (response),
" header=\"<h3 id='h3_cam' data-cam='\" + camid + \"' "
" class='header-center' >%s</h3>\"\n"
" }\n"
,_("All Cameras"));
webu_write(webui, response);
return;
}
static void webu_html_script_camera(struct webui_ctx *webui) {
/* Write the javascript camera_click() function */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function camera_click(camid) {\n"
" var preview = \"\";\n"
" var header = \"\";\n");
webu_write(webui, response);
webu_html_script_camera_thread(webui);
webu_html_script_camera_all(webui);
snprintf(response, sizeof (response),"%s",
" document.getElementById(\"id_preview\").innerHTML = preview; \n"
" document.getElementById(\"id_header\").innerHTML = header; \n"
" document.getElementById('cfg_form').style.display=\"none\"; \n"
" document.getElementById('trk_form').style.display=\"none\"; \n"
" document.getElementById('cam_btn').style.display=\"none\"; \n"
" document.getElementById('cfg_value').value = '';\n"
" document.getElementById('cfg_parms').value = 'default';\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_menucam(struct webui_ctx *webui) {
/* Write the javascript display_cameras() function */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function display_cameras() {\n"
" document.getElementById('act_btn').style.display = 'none';\n"
" if (document.getElementById('cam_btn').style.display == 'block'){\n"
" document.getElementById('cam_btn').style.display = 'none';\n"
" } else {\n"
" document.getElementById('cam_btn').style.display = 'block';\n"
" }\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_menuact(struct webui_ctx *webui) {
/* Write the javascript display_actions() function */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function display_actions() {\n"
" document.getElementById('cam_btn').style.display = 'none';\n"
" if (document.getElementById('act_btn').style.display == 'block'){\n"
" document.getElementById('act_btn').style.display = 'none';\n"
" } else {\n"
" document.getElementById('act_btn').style.display = 'block';\n"
" }\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_evtclk(struct webui_ctx *webui) {
/* Write the javascript 'click' EventListener */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" document.addEventListener('click', function(event) {\n"
" const dropCam = document.getElementById('cam_drop');\n"
" const dropAct = document.getElementById('act_drop');\n"
" if (!dropCam.contains(event.target) && !dropAct.contains(event.target)) {\n"
" document.getElementById('cam_btn').style.display = 'none';\n"
" document.getElementById('act_btn').style.display = 'none';\n"
" }\n"
" });\n\n");
webu_write(webui, response);
}
static void webu_html_script_cfgclk(struct webui_ctx *webui) {
/* Write the javascript config_click function
* We do not have a good notification section on the page so the successful
* submission and response is currently a empty if block for the future
* enhancement to somehow notify the user everything worked */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function config_click() {\n"
" var camstr = document.getElementById('h3_cam').getAttribute('data-cam');\n"
" var camnbr = camstr.substring(4,9);\n"
" var opts = document.getElementById('cfg_parms');\n"
" var optsel = opts.options[opts.selectedIndex].value;\n"
" var baseval = document.getElementById('cfg_value').value;\n"
" var http = new XMLHttpRequest();\n");
webu_write(webui, response);
snprintf(response, sizeof (response),
" var url = \"%s://%s:%d/\"; \n"
,webui->hostproto, webui->hostname
,webui->camlst[0]->conf->webcontrol_port);
webu_write(webui, response);
snprintf(response, sizeof (response),
" var optval=encodeURI(baseval);\n"
" if (camnbr == \"all00\"){\n"
" url = url + \"%05d\";\n"
" } else {\n"
" url = url + camnbr;\n"
" }\n"
,webui->camlst[0]->camera_id);
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" url = url + \"/config/set?\" + optsel + \"=\" + optval;\n"
" http.open(\"GET\", url, true);\n"
" http.onreadystatechange = function() {\n"
" if(http.readyState == 4 && http.status == 200) {\n"
" }\n"
" }\n"
" http.send(null);\n"
" document.getElementById('cfg_value').value = \"\";\n"
" opts.options[opts.selectedIndex].setAttribute('data-'+camstr,baseval);\n"
" opts.value = 'default';\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_cfgchg(struct webui_ctx *webui) {
/* Write the javascript option_change function */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function config_change() {\n"
" var camSel = 'data-'+ document.getElementById('h3_cam').getAttribute('data-cam');\n"
" var opts = document.getElementById('cfg_parms');\n"
" var optval = opts.options[opts.selectedIndex].getAttribute(camSel);\n"
" if (optval == null){\n"
" optval = opts.options[opts.selectedIndex].getAttribute('data-cam_all00');\n"
" }\n"
" document.getElementById('cfg_value').value = optval;\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_trkchg(struct webui_ctx *webui) {
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function track_change() {\n"
" var opts = document.getElementById('trk_option');\n"
" var optval = opts.options[opts.selectedIndex].getAttribute('data-trk');\n"
" if (optval == 'pan'){\n"
" document.getElementById('trk_panx').disabled=false;\n"
" document.getElementById('trk_tilty').disabled = false;\n"
" document.getElementById('trk_lblx').style.display='none';\n"
" document.getElementById('trk_lbly').style.display='none';\n"
" document.getElementById('trk_lblpan').style.display='inline';\n"
" document.getElementById('trk_lbltilt').style.display='inline';\n");
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" } else if (optval =='abs'){\n"
" document.getElementById('trk_panx').disabled=false;\n"
" document.getElementById('trk_tilty').disabled = false;\n"
" document.getElementById('trk_lblx').value = 'X';\n"
" document.getElementById('trk_lbly').value = 'Y';\n"
" document.getElementById('trk_lblpan').style.display='none';\n"
" document.getElementById('trk_lbltilt').style.display='none';\n"
" document.getElementById('trk_lblx').style.display='inline';\n"
" document.getElementById('trk_lbly').style.display='inline';\n");
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" } else {\n"
" document.getElementById('cfg_form').style.display='none';\n"
" document.getElementById('trk_panx').disabled=true;\n"
" document.getElementById('trk_tilty').disabled = true;\n"
" }\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script_trkclk(struct webui_ctx *webui) {
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
" function track_click() {\n"
" var camstr = document.getElementById('h3_cam').getAttribute('data-cam');\n"
" var camnbr = camstr.substring(4,9);\n"
" var opts = document.getElementById('trk_option');\n"
" var optsel = opts.options[opts.selectedIndex].getAttribute('data-trk');\n"
" var optval1 = document.getElementById('trk_panx').value;\n"
" var optval2 = document.getElementById('trk_tilty').value;\n"
" var http = new XMLHttpRequest();\n");
webu_write(webui, response);
snprintf(response, sizeof (response),
" var url = \"%s://%s:%d/\"; \n"
,webui->hostproto, webui->hostname
,webui->camlst[0]->conf->webcontrol_port);
webu_write(webui, response);
snprintf(response, sizeof (response),
" if (camnbr == \"all00\"){\n"
" url = url + \"%05d\";\n"
" } else {\n"
" url = url + camnbr;\n"
" }\n"
,webui->camlst[0]->camera_id);
webu_write(webui, response);
snprintf(response, sizeof (response),"%s",
" if (optsel == 'pan'){\n"
" url = url + '/track/set?pan=' + optval1 + '&tilt=' + optval2;\n"
" } else if (optsel == 'abs') {\n"
" url = url + '/track/set?x=' + optval1 + '&y=' + optval2;\n"
" } else {\n"
" url = url + '/track/center'\n"
" }\n"
" http.open(\"GET\", url, true);\n"
" http.onreadystatechange = function() {\n"
" if(http.readyState == 4 && http.status == 200) {\n"
" }\n"
" }\n"
" http.send(null);\n"
" }\n\n");
webu_write(webui, response);
}
static void webu_html_script(struct webui_ctx *webui) {
/* Write the javascripts */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s", " <script>\n");
webu_write(webui, response);
webu_html_script_action(webui);
webu_html_script_camera(webui);
webu_html_script_cfgclk(webui);
webu_html_script_cfgchg(webui);
webu_html_script_trkclk(webui);
webu_html_script_trkchg(webui);
webu_html_script_menucam(webui);
webu_html_script_menuact(webui);
webu_html_script_evtclk(webui);
snprintf(response, sizeof (response),"%s", " </script>\n");
webu_write(webui, response);
}
static void webu_html_body(struct webui_ctx *webui) {
/* Write the body section of the form */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s","<body class=\"body\">\n");
webu_write(webui, response);
webu_html_navbar(webui);
webu_html_h3desc(webui);
webu_html_config(webui);
webu_html_track(webui);
webu_html_preview(webui);
webu_html_script(webui);
snprintf(response, sizeof (response),"%s", "</body>\n");
webu_write(webui, response);
}
static void webu_html_page(struct webui_ctx *webui) {
/* Write the main page html */
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),
"<!DOCTYPE html>\n"
"<html lang=\"%s\">\n",webui->lang);
webu_write(webui, response);
webu_html_head(webui);
webu_html_body(webui);
snprintf(response, sizeof (response),"%s", "</html>\n");
webu_write(webui, response);
}
void webu_html_badreq(struct webui_ctx *webui) {
char response[WEBUI_LEN_RESP];
snprintf(response, sizeof (response),"%s",
"<!DOCTYPE html>\n"
"<html>\n"
"<body>\n"
"<p>Bad Request</p>\n"
"<p>The server did not understand your request.</p>\n"
"</body>\n"
"</html>\n");
webu_write(webui, response);
return;
}
void webu_html_main(struct webui_ctx *webui) {
/* Note some detection and config requested actions call the
* action function. This is because the legacy interface
* put these into those pages. We put them together here
* based upon the structure of the new interface
*/
int retcd;
retcd = 0;
if (strlen(webui->uri_camid) == 0){
webu_html_page(webui);
} else if ((mystreq(webui->uri_cmd1,"config")) &&
(mystreq(webui->uri_cmd2,"write"))) {
webu_process_action(webui);
} else if (mystreq(webui->uri_cmd1,"config")) {
retcd = webu_process_config(webui);
} else if (mystreq(webui->uri_cmd1,"action")){
webu_process_action(webui);
} else if (mystreq(webui->uri_cmd1,"detection")){
webu_process_action(webui);
} else if (mystreq(webui->uri_cmd1,"track")){
retcd = webu_process_track(webui);
} else{
MOTION_LOG(INF, TYPE_STREAM, NO_ERRNO,
_("Invalid action requested: >%s< >%s< >%s<")
,webui->uri_camid, webui->uri_cmd1, webui->uri_cmd2);
retcd = -1;
}
if (retcd < 0) webu_html_badreq(webui);
return;
}