Skip to content

Commit

Permalink
Design changes to the html
Browse files Browse the repository at this point in the history
  • Loading branch information
TimorLee committed Nov 6, 2020
1 parent 1349858 commit ca6a6f7
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 213 deletions.
326 changes: 167 additions & 159 deletions Control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
</head>

<body bgcolor="#013259" onload="onload()">

<header>
<script>
window.cameraIp = null;
Expand All @@ -50,12 +51,12 @@ <h1>Panasonic Lumix</h1>
<h3>Web Remote Control</h3>
</header>

<section>
<div id="getset" class="w3-third">
<div id="getset">
<h3>General Settings</h3>
<div id="getsettings">
<b>Get...</b>
<br>

<TABLE>
<FORM method=get action="http://192.168.0.1/cam.cgi" target="_blank">
<TR>
Expand Down Expand Up @@ -446,128 +447,16 @@ <h3>General Settings</h3>
</FORM>
</TABLE>
</div>

<div id="time_settings">
<script type="text/javascript">
if (!String.prototype.repeat) {
String.prototype.repeat = function(count) {
'use strict';
if (this == null) {
throw new TypeError('can\'t convert ' + this + ' to object');
}
var str = '' + this;
count = +count;
if (count != count) {
count = 0;
}
if (count < 0) {
throw new RangeError('repeat count must be non-negative');
}
if (count == Infinity) {
throw new RangeError('repeat count must be less than infinity');
}
count = Math.floor(count);
if (str.length == 0 || count == 0) {
return '';
}
// Ensuring count is a 31-bit integer allows us to heavily optimize the
// main part. But anyway, most current (August 2014) browsers can't handle
// strings 1 << 28 chars or longer, so:
if (str.length * count >= 1 << 28) {
throw new RangeError('repeat count must not overflow maximum string size');
}
var maxCount = str.length * count;
count = Math.floor(Math.log(count) / Math.log(2));
while (count) {
str += str;
count--;
}
str += str.substring(0, maxCount - str.length);
return str;
}
}

if (!String.prototype.padStart) {
String.prototype.padStart = function padStart(targetLength,padString) {
targetLength = targetLength>>0; //truncate if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString : ' '));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return padString.slice(0,targetLength) + String(this);
}
};

Date.prototype.stdTimezoneOffset = function() {
var fy=this.getFullYear();
if (!Date.prototype.stdTimezoneOffset.cache.hasOwnProperty(fy)) {

var maxOffset = new Date(fy, 0, 1).getTimezoneOffset();
var monthsTestOrder=[6,7,5,8,4,9,3,10,2,11,1];

for(var mi=0;mi<12;mi++) {
var offset=new Date(fy, monthsTestOrder[mi], 1).getTimezoneOffset();
if (offset!=maxOffset) {
maxOffset=Math.max(maxOffset,offset);
break;
}
}
Date.prototype.stdTimezoneOffset.cache[fy]=maxOffset;
}
return Date.prototype.stdTimezoneOffset.cache[fy];
};

Date.prototype.stdTimezoneOffset.cache={};

Date.prototype.isDST = function() {
return this.getTimezoneOffset() < this.stdTimezoneOffset();
};
}
</script>
<br>
<b>Time Settings</b>
<br>
<table>
<TR>
<TD><input leftmargin="100" type="button" name="init" value="Sync camera time with computer" onclick="d=new Date(); sign = (d.getTimezoneOffset() > 0 ? '-' : '+'); off = (d.isDST ? d.stdTimezoneOffset() : d.getTimezoneOffset()); offset = Math.round(Math.abs(off / 60 * 100)).toString().padStart(4, '0'); date = '' + d.getUTCFullYear() + (d.getUTCMonth()+1).toString().padStart(2, '0') + d.getDate().toString().padStart(2, '0') + d.getUTCHours().toString().padStart(2, '0') + d.getUTCMinutes().toString().padStart(2, '0') + d.getUTCSeconds().toString().padStart(2, '0') + sign + offset; window.open('http://' + window.cameraIp + '/cam.cgi?mode=setsetting&type=clock&value=' + date, 'results')" style="background-color:#FFFFFF" style="color:white; font-weight:bold">
</TD></TR>
<tr><td><form method="get" action="http://192.168.0.1/cam.cgi" target="results"><input type="text" name="value" width="35" placeholder="20190420125500+0100" /><input type="hidden" name="mode" value="setsetting" /><input type="hidden" name="type" value="clock" /><input type="submit" value="Set time" /></form></td></tr>
</table>
<br>
</div>

</div>

<div id="right" class="w3-row-padding w3-twothird">

<h3>Controls</h3>

<div id="Action">
<b>Action</b>
<br>
<table>
<TR>
<TD><input leftmargin="100" type="button" name="init" value="recmode" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=recmode', 'results')" style="background-color:#AAAAAA" style="color:white; font-weight:bold"onclick>
</TD><TD><input leftmargin="100" type="button" name="init" value="playmode" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=playmode', 'results')" style="background-color:#AAAAAA" style="color:white; font-weight:bold"onclick>
</TD><TD><input leftmargin="100" type="button" name="init" value="recordstart" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=video_recstart', 'results')" style="background-color:#AAAAAA" style="color:white; font-weight:bold"onclick>
</TD><TD><input leftmargin="100" type="button" name="init" value="recordstop" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=video_recstop', 'results')" style="background-color:#AAAAAA" style="color:white; font-weight:bold"onclick>
</TD></TR>
</table>
<br>
</div>

<div id="controls">
<h3>Controls</h3>

<h4>Take a Picture</h4>
<p>Press and hold for continuous shooting</p>

<div id="capture">
<br>
<b>Take a Picture</b><br>(press and hold for continous shooting)<br><br>
<div id="cclicker"><br>Take a<br>picture
<script>
<div id="cclicker"><br>Take a<br>picture
<script>
var cclicker = $('#cclicker');
var mousedoc = false;
cclicker.mousedown(function(){
Expand All @@ -591,13 +480,60 @@ <h3>Controls</h3>
}
return false;
});
</script>
</div>
</script>
</div>

<h4>Action</h4>
<table id="table_id">
<tr>
<td>
<input type="button" name="init" value="recmode" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=recmode', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
<td>
<input type="button" name="init" value="playmode" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=playmode', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
<td>
<input type="button" name="init" value="recordstart" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=video_recstart', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
<td>
<input type="button" name="init" value="recordstop" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=camcmd&value=video_recstop', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
</tr>
</table>

<script>
function startStream()
{
window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results');
streamtimer = setInterval( function(){
window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results');
}, 10000 );
}

function stopStream()
{
clearInterval( streamtimer );
window.open( 'http://' + window.cameraIp + '/cam.cgi?mode=stopstream', 'results' );
}
</script>

<h4>Stream</h4>
<table id="table_id">
<tr>
<td>
<input type="button" name="init" value="StartStream" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
<td>
<input type="button" name="init" value="StopStream" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=stopstream', 'results')" style="background-color:#DDDDDD" style="color:white; font-weight:bold"onclick>
</td>
</tr>
</table>
<br>
</div>

<div id="zoom">
<br>
<b>Zoom</b><br>(press and hold)<br>
<h4>Zoom</h4>
<p>(press and hold)</p>

<div id="zclicker1"><br>WIDE<br>FAST
<script>
Expand Down Expand Up @@ -714,38 +650,9 @@ <h3>Controls</h3>




<script>
function startStream()
{
window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results');
streamtimer = setInterval( function(){
window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results');
}, 10000 );
}

function stopStream()
{
clearInterval( streamtimer );
window.open( 'http://' + window.cameraIp + '/cam.cgi?mode=stopstream', 'results' );
}
</script>
<div id="Stream">
<br>
<b>Stream</b>
<br>
<table>
<TR>
<TD><input leftmargin="100" type="button" name="init" value="StartStream" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=startstream&value=49199', 'results')" style="background-color:#FFFFFF" style="color:white; font-weight:bold"onclick>
</TD><TD><input leftmargin="100" type="button" name="init" value="StopStream" onclick="window.open('http://' + window.cameraIp + '/cam.cgi?mode=stopstream', 'results')" style="background-color:#FFFFFF" style="color:white; font-weight:bold"onclick>
</TD></TR>
</table>
<br>
</div>

<div id="focus">
<b>Manual Focus</b><br>(press and hold)<br>
<br>
<h4>Manual Focus</h4>
<p>(press and hold)</p>
<div id="focusint">
intervals (in ms) between 2 succesive <br>focus actions (avoid value smaller than 100) :
<FORM name="focusinterval">
Expand Down Expand Up @@ -862,20 +769,121 @@ <h3>Controls</h3>
return false;
});

</script>
</div>
<br>
</script>
</div>
</div>

<div id="time_settings">
<script type="text/javascript">
if (!String.prototype.repeat) {
String.prototype.repeat = function(count) {
'use strict';
if (this == null) {
throw new TypeError('can\'t convert ' + this + ' to object');
}
var str = '' + this;
count = +count;
if (count != count) {
count = 0;
}
if (count < 0) {
throw new RangeError('repeat count must be non-negative');
}
if (count == Infinity) {
throw new RangeError('repeat count must be less than infinity');
}
count = Math.floor(count);
if (str.length == 0 || count == 0) {
return '';
}
// Ensuring count is a 31-bit integer allows us to heavily optimize the
// main part. But anyway, most current (August 2014) browsers can't handle
// strings 1 << 28 chars or longer, so:
if (str.length * count >= 1 << 28) {
throw new RangeError('repeat count must not overflow maximum string size');
}
var maxCount = str.length * count;
count = Math.floor(Math.log(count) / Math.log(2));
while (count) {
str += str;
count--;
}
str += str.substring(0, maxCount - str.length);
return str;
}
}

if (!String.prototype.padStart) {
String.prototype.padStart = function padStart(targetLength,padString) {
targetLength = targetLength>>0; //truncate if number or convert non-number to 0;
padString = String((typeof padString !== 'undefined' ? padString : ' '));
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return padString.slice(0,targetLength) + String(this);
}
};

Date.prototype.stdTimezoneOffset = function() {
var fy=this.getFullYear();
if (!Date.prototype.stdTimezoneOffset.cache.hasOwnProperty(fy)) {

var maxOffset = new Date(fy, 0, 1).getTimezoneOffset();
var monthsTestOrder=[6,7,5,8,4,9,3,10,2,11,1];

for(var mi=0;mi<12;mi++) {
var offset=new Date(fy, monthsTestOrder[mi], 1).getTimezoneOffset();
if (offset!=maxOffset) {
maxOffset=Math.max(maxOffset,offset);
break;
}
}
Date.prototype.stdTimezoneOffset.cache[fy]=maxOffset;
}
return Date.prototype.stdTimezoneOffset.cache[fy];
};

Date.prototype.stdTimezoneOffset.cache={};

Date.prototype.isDST = function() {
return this.getTimezoneOffset() < this.stdTimezoneOffset();
};
}
</script>
<h4>Time Settings</h4>
<table>
<tr>
<td>
<input leftmargin="100" type="button" name="init" value="Sync camera time with computer" onclick="d=new Date(); sign = (d.getTimezoneOffset() > 0 ? '-' : '+'); off = (d.isDST ? d.stdTimezoneOffset() : d.getTimezoneOffset()); offset = Math.round(Math.abs(off / 60 * 100)).toString().padStart(4, '0'); date = '' + d.getUTCFullYear() + (d.getUTCMonth()+1).toString().padStart(2, '0') + d.getDate().toString().padStart(2, '0') + d.getUTCHours().toString().padStart(2, '0') + d.getUTCMinutes().toString().padStart(2, '0') + d.getUTCSeconds().toString().padStart(2, '0') + sign + offset; window.open('http://' + window.cameraIp + '/cam.cgi?mode=setsetting&type=clock&value=' + date, 'results')" style="background-color:#FFFFFF" style="color:white; font-weight:bold">
</td>
</tr>
<tr>
<td>
<form method="get" action="http://192.168.0.1/cam.cgi" target="results">
<input type="text" name="value" width="35" placeholder="20190420125500+0100" />
<input type="hidden" name="mode" value="setsetting" />
<input type="hidden" name="type" value="clock" />
<input type="submit" value="Set time" />
</form>
</td>
</tr>
</table>
</div>

</div>

</div>
<div id="results">
<IFRAME SRC="results.html" name="results"></IFRAME>
<IFRAME SRC="hidden.html" name="hidden" style="display:none"></IFRAME>
</div>
</section>



</body>
</html>
Loading

0 comments on commit ca6a6f7

Please sign in to comment.