Install HTML

From xPL
Revision as of 17:16, 23 June 2015 by Fcorthay (Talk | contribs)

Jump to: navigation, search

Controlling the home from distance is made via a web access.

In this example, the server is harmonia.local: evidently, this has to be replaced by your local server name.

Install a web server

Install the web server:

su
apt-get update
apt-get install lighttpd
apt-get install php5-cgi
lighttpd-enable-mod fastcgi fastcgi-php
service lighttpd reload
service lighttpd status

Configure the base directory and modify the line with server.document-root:

WWW_ROOT=/mnt/storage/www/
nano /etc/lighttpd/lighttpd.conf
service lighttpd reload
cp /var/www/index.lighttpd.html $WWW_ROOT

Navigate to your server within a web browser. You should discover the default lighttpd placeholder page.

Install the webSocket libraries

jQuery

Download the latest compressed, production jQuery version.

wget http://code.jquery.com/jquery-2.1.4.min.js

XML::Simple

Check if the XML::Simple is already installed:

perl -MFile::Find=find -MFile::Spec::Functions -Tlw -e 'find { wanted => sub { print canonpath $_ if /\.pm\z/ }, no_chdir => 1 }, @INC' 2> /dev/null | grep -i 'XML/Simple.pm'

Install the library:

perl -MCPAN -e "install 'XML::Simple'"

Alternatively, on Ubuntu:

apt-get install libxml-simple-perl

Net::WebSocket::Server

Check if the Net::WebSocket::Server is already installed:

perl -MFile::Find=find -MFile::Spec::Functions -Tlw -e 'find { wanted => sub { print canonpath $_ if /\.pm\z/ }, no_chdir => 1 }, @INC' 2> /dev/null | grep -i 'WebSocket/Server.pm'

Install the library:

perl -MCPAN -e "install 'Net::WebSocket::Server'"

Prepare a home control page

Create the home control directory:

WWW_CONTROL=$WWW_ROOT/homeControl
mkdir -p $WWW_CONTROL
chmod -R 775 $WWW_CONTROL
chown -R control:users $WWW_CONTROL
cd $WWW_CONTROL

In this directory, create a simple.html control page:

<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js">
    </script>
  </head>
  <body>
    <!-- Light controls .................................................... -->
    <br />
    <table align="center" border='0px' cellpadding='12px' cellspacing='0px' bgcolor="#CCCCCC">
      <tr>
        <th width="240px">ceiling</th>
        <th width="240px">stand</th>
      </tr>
      <tr>
        <td align="center"><input id="ceiling" type="checkbox" /></td>
        <td align="center"><input id="stand" type="checkbox" /></td>
      </tr>
    </table>

    <!-- Websocket java script ............................................. -->
    <script>
      $().ready(function() {
        var ws = new WebSocket('ws://harmonia.local:8080/');

        ws.onopen = function() {
          console.log("Web socket started");
        }
                                                            // outgoing messages
        $('#ceiling').on('change', function() {
          ws.send('ceiling ' + $(this).is(':checked'));
        });
        $('#stand').on('change', function() {
          ws.send('stand ' + $(this).is(':checked'));
        });
                                                              // polling message
        window.setInterval(
          function() {
            ws.send('poll request');
          }
          , 100
        );
                                                            // incoming messages
        ws.onmessage = function(message) {
          console.log(message.data);
          var words = message.data.split(' ');

          if (words[0] === 'ceiling') {
              $('#ceiling').prop('checked', words[1] == 'true');
          }
          if (words[0] === 'stand') {
              $('#stand').prop('checked', words[1] == 'true');
          }
        }
      });
    </script>

  </body>
</html>

Navigate to the control page: http://harmonia.local/homeControl/simple.html

Implement a WebSocket server