Added webcam files.

Sun, 31 Mar 2019 13:57:25 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Sun, 31 Mar 2019 13:57:25 +0200
changeset 581
b56988cc516b
parent 580
96207ff84eaa
child 582
ba340e00aab2

Added webcam files.

www-thermferm/css/webcam.css file | annotate | diff | comparison | revisions
www-thermferm/images/object-flip-horizontal.png file | annotate | diff | comparison | revisions
www-thermferm/images/object-flip-vertical.png file | annotate | diff | comparison | revisions
www-thermferm/images/object-rotate-right.png file | annotate | diff | comparison | revisions
www-thermferm/js/webcam.js file | annotate | diff | comparison | revisions
www-thermferm/webcam.php file | annotate | diff | comparison | revisions
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/css/webcam.css	Sun Mar 31 13:57:25 2019 +0200
@@ -0,0 +1,137 @@
+/*
+ * css file for the webcam screen.
+ */
+
+
+body {
+    background: #ccc;
+    font-family: Verdana, Arial, sans-serif;
+    margin: 0px;
+}
+
+
+#jqxWidget {
+    width: 1280px;
+    height: 630px;
+    float: left;
+}
+
+
+#content {
+    width: 1278px;
+    height: 628px;
+    border: 2px solid #4297d7;
+    background: #252526;
+    float: left;
+    color: #eeeeee;
+}
+
+
+#camera_display {
+    width: 800px; 
+    height: 610px; 
+    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: 448px;
+    height: 610px;
+    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: 105px;
+    margin-left: 135px;
+}
+
+
+/*
+ *  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);
+}
+
Binary file www-thermferm/images/object-flip-horizontal.png has changed
Binary file www-thermferm/images/object-flip-vertical.png has changed
Binary file www-thermferm/images/object-rotate-right.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/js/webcam.js	Sun Mar 31 13:57:25 2019 +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.php	Sun Mar 31 13:57:25 2019 +0200
@@ -0,0 +1,87 @@
+<?php
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*
+ * 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.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.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: 10px;">
+      <tr>
+       <td>
+        <input style="float: left; margin-left: 144px;" 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: 50px; margin-left: 160px;" type="button" id="Close" value="Sluiten" />
+        </div>
+       </td>
+      </tr>
+     </table>
+    </div>
+   </div>
+  </div> <!-- jqxWidget -->
+ </body>
+</html>

mercurial