Mon, 08 Aug 2022 19:39:37 +0200
Merged again
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www-thermferm/css/webcam-ng.css Mon Aug 08 19:39:37 2022 +0200 @@ -0,0 +1,137 @@ +/* + * css file for the webcam screen. + */ + + +body { + background: #ccc; + font-family: Verdana, Arial, sans-serif; + margin: 0px; +} + + +#jqxWidget { + width: 770px; + height: 580px; + float: left; +} + + +#content { + width: 768px; + height: 578px; + border: 2px solid #4297d7; + background: #252526; + float: left; + color: #eeeeee; +} + + +#camera_display { + width: 560px; + height: 560px; + float: left; + background-color: #252526; + margin: 5px; + margin-top: 5px; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; +} + + +#camera_controls { + width: 180px; + height: 560px; + float: right; + background-color: #252526; + margin: 5px; + margin-top: 5px; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; +} + + +img { + float:left; + margin:0 15px 15px 0; + padding:1px; + background:#59b4d4; + border:1px solid #59b4d4; +} + +/* Source image is 320x240. Increase the size a bit. */ +#streamimage { + width: 520px; + height: 390px; + margin-top: 83px; + margin-left: 18px; +} + + +/* + * CSS3 transformations: rotate, flip, mirror + */ +img.x-rotated-0 {} +img.x-rotated-90 { + -moz-transform: rotate(90deg); + -webkit-transform: rotate(90deg); +} +img.x-rotated-180 { + -moz-transform: rotate(180deg); + -webkit-transform: rotate(180deg); +} +img.x-rotated-270 { + -moz-transform: rotate(270deg); + -webkit-transform: rotate(270deg); +} +img.x-mirrored-rotated-0 { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); +} +img.x-mirrored-rotated-90 { + -moz-transform: rotate(90deg) scaleX(-1); + -webkit-transform: rotate(90deg) scaleX(-1); +} +img.x-mirrored-rotated-180 { + -moz-transform: rotate(180deg) scaleX(-1); + -webkit-transform: rotate(180deg) scaleX(-1); +} +img.x-mirrored-rotated-270 { + -moz-transform: rotate(270deg) scaleX(-1); + -webkit-transform: rotate(270deg) scaleX(-1); +} +img.x-flipped-rotated-0 { + -moz-transform: scaleY(-1); + -webkit-transform: scaleY(-1); +} +img.x-flipped-rotated-90 { + -moz-transform: rotate(90deg) scaleY(-1); + -webkit-transform: rotate(90deg) scaleY(-1); +} +img.x-flipped-rotated-180 { + -moz-transform: rotate(180deg) scaleY(-1); + -webkit-transform: rotate(180deg) scaleY(-1); +} +img.x-flipped-rotated-270 { + -moz-transform: rotate(270deg) scaleY(-1); + -webkit-transform: rotate(270deg) scaleY(-1); +} +img.x-flipped-mirrored-rotated-0 { + -moz-transform: scale(-1,-1); + -webkit-transform: scale(-1,-1); +} +img.x-flipped-mirrored-rotated-90 { + -moz-transform: rotate(90deg) scale(-1,-1); + -webkit-transform: rotate(90deg) scale(-1,-1); +} +img.x-flipped-mirrored-rotated-180 { + -moz-transform: rotate(180deg) scale(-1,-1); + -webkit-transform: rotate(180deg) scale(-1,-1); +} +img.x-flipped-mirrored-rotated-270 { + -moz-transform: rotate(270deg) scale(-1,-1); + -webkit-transform: rotate(270deg) scale(-1,-1); +} +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www-thermferm/js/webcam-ng.js Mon Aug 08 19:39:37 2022 +0200 @@ -0,0 +1,64 @@ +/***************************************************************************** + * Copyright (C) 2019 + * + * Michiel Broek <mbroek at mbse dot eu> + * + * This file is part of ThermFerm + * + * This 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 2, or (at your option) any + * later version. + * + * ThermFerm 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 ThermFerm; see the file COPYING. If not, write to the Free + * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA. + *****************************************************************************/ + +var phi = 0, flipped = 0, mirrored = 0; + +function setXformClass () { + $('.xform').each(function(idx,el) { + el.className = "xform x" +(flipped ? "-flipped":"") + (mirrored ? "-mirrored" : "") + "-rotated-" + phi; + }); +} + + + +$(document).ready(function () { + + // set rotation angle phi and toggle rotate class + $("#rotate").jqxButton({ template: "info", width: 50, height: 50, theme: theme, imgWidth: 32, imgHeight: 32, imgSrc:"images/object-rotate-right.png" }); + $('#rotate').click(function() { + phi = (phi + 90) % 360; + setXformClass(); + if (phi % 180) { + $('.xform-p').addClass('rotated'); + } else { + $('.xform-p').removeClass('rotated'); + } + }); + // toggle mirror class component + $("#mirror").jqxButton({ template: "info", width: 50, height: 50, theme: theme, imgWidth: 32, imgHeight: 32, imgSrc:"images/object-flip-horizontal.png" }); + $('#mirror').click(function() { + mirrored = ! mirrored; + setXformClass(); + }); + // toggle flip class componen + $("#flip").jqxButton({ template: "info", width: 50, height: 50, theme: theme, imgWidth: 32, imgHeight: 32, imgSrc:"images/object-flip-vertical.png" }); + $('#flip').click(function() { + flipped = ! flipped; + setXformClass(); + }); + + $("#Close").jqxButton({ template: "success", width: 125, theme: theme }); + $("#Close").click(function () { + window.close(); + }); + +});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www-thermferm/webcam-ng.php Mon Aug 08 19:39:37 2022 +0200 @@ -0,0 +1,87 @@ +<?php +/***************************************************************************** + * Copyright (C) 2022 + * + * Michiel Broek <mbroek at mbse dot eu> + * + * This file is part of ThermFerm + * + * This 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 2, or (at your option) any + * later version. + * + * ThermFerm 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 ThermFerm; see the file COPYING. If not, write to the Free + * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA. + *****************************************************************************/ + +/* + * Look for the style names in the jqwidgets/styles directory. + */ +$my_style = 'ui-darkness'; +if (file_exists('/srv/http/streamer')) { + shell_exec('/srv/http/streamer start'); +} else if (file_exists('/var/www/streamer')) { + shell_exec('/var/www/streamer start'); +} else { + exit; +} +sleep(1); +?> + +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>ThermFerm - Web Camera</title> + <link type="text/css" href="css/webcam-ng.css" rel="stylesheet" media="all" /> + <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" /> + <link type="text/css" href="jqwidgets/styles/jqx.<?php echo $my_style; ?>.css" rel="stylesheet" /> + <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> + <script> + var theme = "<?php echo $my_style; ?>"; + </script> + <script src="js/jquery-2.1.1.min.js"></script> + <script src="jqwidgets/jqxcore.js"></script> + <script src="jqwidgets/jqxwindow.js"></script> + <script src="jqwidgets/jqxbuttons.js"></script> + <script src="js/webcam-ng.js"></script> + </head> + <body class="default"> + <div id="jqxWidget"> + <div id="content"> + + <div id="camera_display"> + <div id="streamwrap" class="xform-p"> + <img id="streamimage" class="xform" src="<?php echo "http://".$_SERVER['SERVER_NAME'].":8090/?action=stream"; ?>" /> + </div> + </div> + + <div id="camera_controls"> + <table style="width: 100%; padding: 7px;"> + <tr> + <td> + <input style="float: left; margin-left: 0px;" type="button" id="rotate" /> + <input style="float: left; margin-left: 5px;" type="button" id="mirror" /> + <input style="float: left; margin-left: 5px;" type="button" id="flip" /> + </td> + </tr> + <tr> + <td> + <div id="camera_panel_buttons"> + <input style="margin-top: 250px; margin-left: 18px;" type="button" id="Close" value="Sluiten" /> + </div> + </td> + </tr> + </table> + </div> + </div> + </div> <!-- jqxWidget --> + </body> +</html>