|
|
Post by meerkat on Apr 2, 2023 5:59:43 GMT -5
Maybe I don't understand tables in a html document. I wanted to resize a <table>. I looked all over the web and ask chatGPT how to do it. All the chatGPT suggestions did not work. And I tried at least 50. The web was no help. For some reason I decided to use a <DIV> and resize it. And it worked. So if I can resize a <DIV> and I tell a <TABLE> to fit in the <DIV>, then if I resize the <DIV> the <TABLE> should follow. Right? It worked! In the attached html document the <DIV> is what is actually resizing, but it looks like the <TABLE> is resizing because it follows the <DIV>. I'm a novice with html, so maybe some has a better, or correct, way to resize a table? The following code was printed using LB5. Place it in a html file and click it. It should show up in your browser with the ability to resize a table. <!DOCTYPE html>
<html>
<head>
<style>
.rsz {
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div style="width: 200px; height: 70px;" class="rsz">
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%" class="rsz">
<tr align=center>
<td>Resize</td>
<td>A</td>
<td>Table</td>
</tr>
</table>
</div>
</body></head></html> |
|
|
|
Post by meerkat on Apr 3, 2023 5:21:21 GMT -5
Ok. The resize worked for what I really wanted.
What I wanted is a interface to some of my wifi IP webcams and let the web user resize the webCam video.
It lets you Pan Tilt Zoom.
Docs are in the html on what to change to get your IP cameras to work.
I'm adding the ability to record any motion detected and add multiple cameras.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 3.2//EN'>
<HTML>
<HEAD>
<TITLE>My Web Cam</TITLE>
</HEAD>
<style>
BODY {Background-Color : #FDF2D0 }
.rsz {resize: both; overflow: auto;}
</style>
<BODY>
<CENTER>
<!-- -------------------------------------------
Foscam control
replace <username> with the foscam username
replace <password> with the foscam password
replace <camera-ip-address> with the foscam IP address
change the resolution of 32 to what you want. 64 or 128 would give higher resolution
---------------------------------------------
-->
<table border=0 bgcolor=wheat width=100% height=30 class='rsz'>
<tr align=center><td><B>My Web Cam</td></tr>
</TABLE>
<div style='width: 500px; height: 250px;' class='rsz'>
<TABLE width=100% height=100% class='rsz'><TR><TD>
<video id='foscam-video' autoplay controls class='rsz' width=100% height=100%></video>
</TD></TR></TABLE>
</DIV>
<TABLE><TR><TD>
<button onclick='panLeft()'><</button>
<button onclick='panRight()'>></button>
<button onclick='tiltUp()'>Up</button>
<button onclick='tiltDown()'>Down</button>
<button onclick='zoomIn()'>In</button>
<button onclick='zoomOut()'>Out</button>
<button onclick='exit()'>Exit</button>
</td>
</tr>
</table>
<script>
// Set the video source to the FOSCAM IP camera video stream URL
const video = document.getElementById('foscam-video');
video.src = 'http://<camera-ip-address>/videostream.cgi?user=<username>&pwd=<password>&resolution=32';
// Functions to send PTZ commands to the FOSCAM camera
function sendPTZCommand(command) {
const url = `http://<camera-ip-address>/decoder_control.cgi?user=<username>&pwd=<password>&command=${command}`;
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
}
function panLeft() { sendPTZCommand(4); }
function panRight() { sendPTZCommand(6); }
function tiltUp() { sendPTZCommand(0); }
function tiltDown() { sendPTZCommand(2); }
function zoomIn() { sendPTZCommand(11); }
function zoomOut() { sendPTZCommand(12); }
function exit() { window.close(); }
</script>
</BODY>
</HTML>
|
|
