11.3.2 Etäkatselun käyttöliittymä

Tässä kappaleessa on html-koodi fiksummasta ja monipuolisemmasta etäkatselusivusta. Käyttöliittymä muodostuu yhdestä päätiedostosta ja kunkin kameran kahdesta kamerakohtaisesta tiedostosta. Käyttöliittymä olisi yksinkertaisempi tehdä php:llä, mutta toisaalta sivuja ei tarvitse muuttaa sen jälkeen kun ne on kerran tehty. Samalla säästytään php:n ajantasallapitämisestä, jolloin järjestelmä on tietoturvallisempi. Seuraavassa html-koodit kolmelle tiedostolle:

<!-- index.html -->

<!DOCTYPE HTML PUBLIC
        "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>VEOPC-valvontakamerajärestelmän etäkatselu</title>
</head>

<body>

<iframe SRC="cam1off.html" NAME="camera1"
        WIDTH="335" HEIGHT="320" ALIGN="middle" scrolling="no"
        frameborder="1">
</iframe>

<iframe SRC="cam2off.html" NAME="camera2"
        WIDTH="335" HEIGHT="320" ALIGN="middle" scrolling="no"
        frameborder="1">
</iframe><br>
<br>
<a href="http://80.223.6.48:8080">
Kamerajärjestelmän etähallintaan
</a>

</body>
</html>

<!-- cam1on.html -->

<TABLE border="0" cellpadding="0" height="310"
cellspacing="0" width="335">
<tr><td colspan=4 height="270" valign="top">
Kamera 1<br>
<applet code=com.charliemouse.cambozola.Viewer
    archive=cambozola.jar width="320" height="240"
    style="border-width:1; border-color:gray;
    border-style:solid;">
        <param name=url value="http://80.223.6.48:8000">
</applet>
</td></tr>
        <TR>
          <td width=25%></td>
          <td align=middle width=25%><font size="2">ON</td>
          <td align=middle width=25%><font size="2">OFF</td>
          <td width=25%></td>
        </TR>
        <TR>
          <td width=25%></td>
          <TD align=middle width=25%><font size="2">
          <INPUT onclick="window.location = 'cam1on.html'"
          type=radio CHECKED name=rtstatus></INPUT></td>
          <TD align=middle width=25%><font size="2">
          <INPUT onclick="window.location = 'cam1off.html'"
          type=radio name=rtstatus></INPUT></td>
          <td width=25%></td>
</TD>
</TABLE>

<!-- cam1off.html -->

<TABLE border="0" height="310" cellpadding="0"
cellspacing="0" width="335">
<tr><td colspan=4 height="270" valign="top">
Kamera 1<br>
<br>
<br>
<br>
<center>
Kameran etäkatselu on kytketty pois päältä.
Voit kytkeä sen päälle painamalla täpän ON-kohdalle.
</center>
<br>
</td></tr>
        <TR>
          <td width=25%></td>
          <td align=center width=25%><font size="2">ON</td>
          <td align=center width=25%><font size="2">OFF</td>
          <td width=25%></td>
        </TR>
        <TR>
          <td width=25%></td>
          <TD align=middle width=25%><font size="2">
          <INPUT onclick="window.location = 'cam1on.html'"
          type=radio name=rtstatus></INPUT></td>
          <TD align=middle width=25%><font size="2">
          <INPUT onclick="window.location = 'cam1off.html'"
          type=radio CHECKED name=rtstatus></INPUT></td>
          <td width=25%></td>
</TD>
</TABLE>

cam2on.html:ssä ja cam2off.html:ssä muutetaan vain http-portti ja ladattavien tiedostojen nimet.

Lauri Laukkarinen 2006-03-23