Difference between revisions of "Install HTML"

From xPL
Jump to: navigation, search
(XML::Simple)
(Install the webSocket libraries)
Line 23: Line 23:
 
You should discover the default [http://www.lighttpd.net lighttpd] placeholder page.
 
You should discover the default [http://www.lighttpd.net lighttpd] placeholder page.
  
= Install the webSocket libraries =
+
= Install jQuery =
 
+
== jQuery ==
+
  
 
Download the [http://jquery.com/download/ latest compressed, production jQuery version].
 
Download the [http://jquery.com/download/ latest compressed, production jQuery version].
 
  wget http://code.jquery.com/jquery-2.1.4.min.js
 
  wget http://code.jquery.com/jquery-2.1.4.min.js
 
== XML::Simple ==
 
 
Check if <code>XML::Simple</code> 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 <code>Net::WebSocket::Server</code> 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 =
 
= Prepare a home control page =

Revision as of 14:30, 24 June 2015

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 jQuery

Download the latest compressed, production jQuery version.

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

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