building-a-remote-control

Lively world used for programming HTML page and server

From the world menu choose Run command...

+

1
<label for="slider1"></label>
<input id="slider1" type="range"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

To make the sliders usable on an iPhone you will have to increase their size using CSS:

The lively-2-lively server code

Open a Subserver  Viewer

Add a new subserver:

How to create and modify a plain HTML page

Add a remote-control.valueChanged service:
(Note: We are using AppleScript to interact with the computer that the Lively server is running on. This will only work on Mac OS.)

1
var LivelyServices = require("./LivelyServices");
var util = require("util");
var exec = require("child_process").exec;
util._extend(LivelyServices.services, {
    'remote-control.valueChanged': function(sessionServer, connection, msg) {
        if (msg.data.slider === 'slider1') {
            var command = util.format("'set volume output volume %s'", msg.data.value);
            exec("osascript -e " + command);
        }
        if (msg.data.slider === 'slider2') {
            var command = util.format("'tell application \"VLC\"\n"
                        + " set timePercentage to duration of current item / 100\n"
                        + " set current time to %s * timePercentage\n"
                        + "end tell'", msg.data.value);
            exec("osascript -e " + command);
        }
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

To create sliders with labels use the input and label tags:

Enter iframe in the input line and select open url in iframe. http://localhost:9001/remote-interface.html

If there isn't an HTML file with that name yet you will just see a FileNotFound message. This is no problem. Open the menu of the iframe morph and choose edit page. The workspace that opens let's you type in HTML code. When you press CMD-s / Ctrl-s the iframe will be updated with the HTML code. You can also type JavaScript code in that workspace. It will be evaluated in the context of the HTML page you created.

Enter a URL like http://localhost:9001/remote-interface.html in the prompt.

Tips for the remote control HTML page

1
label { display: block; text-align: center; font-size: 40px; }
input[type="range"] {
  width: 100%; height: 150px;
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: gray;
  width: 120px; height: 150px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

To load lively-2-lively add a script tag to the page like:

1
<script src="http://lively-web.org/users/robertkrahn/node-lively2lively/lively2lively-browserified.js?autoload=false"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
lv.l2l.connect({
  name: "remote-control",
  baseURL: "http://" + document.location.host // <- should point to the Lively
                                              // server on the computer that you
                                              // want to remove control
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Then add another script tag to connect to the network:

1
var slider = document.getElementsByTagName("input")[0];
slider.addEventListener('change', function() {
  lv.l2l.session.sendTo(
    lv.l2l.session.trackerId,
    'remote-control.valueChanged',
    {slider: slider.id, value: slider.value});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

To react when the slider changes listen to the change event:

1
var slider = document.getElementsByTagName("input")[0];
slider.addEventListener('change', _.throttle(function() {
  lv.l2l.session.sendTo(
    lv.l2l.session.trackerId,
    'remote-control.valueChanged',
    {slider: slider.id, value: slider.value});
}, 200/*milliseconds*/));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The _.throttle function can wrap the change listener:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can optionally rate-limit triggering the events using a library like underscore:

Click here to see the code for a complete remote-control HTML page

Please note: If you want to follow this walkthrough you probably want to control your own computer, not lively-web.org. In order to do so install a local version of Lively following the steps here:
  github.com/LivelyKernel/LivelyKernel/blob/master/README.md

Building a remote control application

In this walkthrough we create a server / client application using Lively.

The user interface (Web page) we create can be used to remote control a Mac.

This demonstrates how to use Lively as an IDE and the Lively-2-Lively messaging protocol for client / server communication.

remote control server code

X

–

Menu

1
var LivelyServices = require("./LivelyServices");
var util = require("util");
var exec = require("child_process").exec;
util._extend(LivelyServices.services, {
    'remote-control.valueChanged': function(sessionServer, connection, msg) {
        if (msg.data.slider === 'slider1') {
            var command = util.format("'set volume output volume %s'", msg.data.value);
            exec("osascript -e " + command);
        }
        if (msg.data.slider === 'slider2') {
            var command = util.format("'tell application \"VLC\"\n"
                        + " set timePercentage to duration of current item / 100\n"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

remote-control v3

X

–

Menu

1
<html>
<!-- 
  -- this is a template for a simple HTML page that can remote control a Lively
  -- server using a lively-2-lively connection
  -- Please adapt as needed.
  -->
<head>
  <title>remote-interface</title>
  <!-- some CSS rules to make the webpage usable on an iPhone -->
  <style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

remote-control v2

X

–

Menu

1
<html>
<head>
  <title>remote-interface</title>
  <style>
    body { text-align: center; font-family: sans-serif; color: #666666; }
    h1 { font-size: 50pt; }
    label { display: block; text-align: center; font-size: 40px; }
    input[type="range"] {
      width: 100%; height: 150px;
      -webkit-appearance: none;
    }
    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

remote-control v1

X

–

Menu

1
<html>
<head>
  <title>remote-interface</title>
</head>
<body>
  <h1>remote-control</h1>
  <input id="slider1" type="range"/>
  <script src="http://lively-web.org/users/robertkrahn/node-lively2lively/lively2lively-browserified.js?autoload=false"></script>
  <script>
    // 1. connect to the lively-2-lively tracker that the page was started from
    lv.l2l.connect({
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX