Sat, 25 Apr 2020 20:31:31 +0200
Version 0.9.8. Added extra path to the fonts for Debian buster. Changed the PID to work on Proportional on Measurement. Added loops so that it looks like the PID is running at 100 mSec intervals.
/* * 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); }