Stefan's Weblog

22Feb/170

MotionPiOS – Kamerakachelübersicht

Wer mehrere Raspberry Kameras sein Eigen nennt, möchte vielleicht alle in einer Kachelübersicht in seinem bevorzugten Browser anschauen.

Der hier dargestellte Code ist ein Biepiel, wie so etwas aussehen könnte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Kamera - Kachelübersicht</title>
	
<style>
    #wrap { width: 780px; height: 450px; padding: 0; overflow: hidden; }
    #frame { width: 1920px; height: 1080px; border: 1px solid black; }
    #frame {
        -ms-zoom: 1.0;
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(1.0);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.4);
        -webkit-transform-origin: 0 0;
    }
</style>	
	
  </head>

<table>
<tr>
	<td>
		<h3>Kamera 1</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.2:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
	<td>
		<h3>Kamera 2</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.3:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
</tr>
<tr>
	<td>
		<h3>Kamera 3</h3>
		<div id="wrap">
			<iframe id="frame" src="http://192.168.2.3:8081" allowfullscreen="" frameborder="0"  scrolling="no" align="centre">
			</iframe>                
		</div>
	</td>
	<td>
		<h3>&Uuml;bersicht Kameras - View</h3>
		<ul>
			<li>Kamera 1 - 192.168.178.37</li>
			<li>Kamera 2 - 192.168.178.26</li>
			<li>Kamera 3 - 192.168.178.38</li>
		</ul>
		
		<h3>&Uuml;bersicht Kameras - Admin</h3>
		<ul>
			<li>Kamera 1</li>
			<li>Kamera 2</li>
			<li>Kamera 3</li>
		</ul>
	</td>
</tr>
</table>

</html>

Bildquelle: raspberrypi.org

hat dir dieser Artikel gefallen?

Dann abonniere doch diesen Blog per RSS Feed!

Kommentare (0) Trackbacks (0)

Zu diesem Artikel wurden noch keine Kommentare geschrieben.


Leave a comment

Noch keine Trackbacks.

%d Bloggern gefällt das: