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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Noch keine Trackbacks.

%d Bloggern gefällt das: