Webserver

From EventGhost

Jump to: navigation, search

Contents

Why?

EventGhost comes with a simple webserver plugin. This plugin allows HTML pages to be displayed on any browser while Eventghost is running, and allows links to trigger EventGhost events. Why would you want to do this? Well if you have handheld devices that can access a WiFi network, such as an iPhone, iTouch, or iPad, then you can turn them into remotes by using their browser.


Security

Do not setup a webserver on a computer connected directly to the internet, as I have read on forums it does not have enough security to protect your computer from the outside world. Instead, it is better to have it on a computer that has a router protecting it from outside access. I do not know enough about security issues to elaborate, but hopefully someone who does will contribute more here.


Initial Setup

When you add a plugin, you will find the Webserver plugin near the bottom of all the plugins. (Or you can check out the Dynamic Webserver for a variation that can work with EventGhost variables.) It will display the General Settings. Leave the TCP/IP port at 80 unless you know why you are changing it. The HTML documents root is the name of the directory where you will save your HTML pages, such as your initial index.html page. This directory can have subdirectories. Unless you know why you want to change the Event prefix, leave it as the default "HTTP". When an event is triggered it will start with this prefix followed by a period and the name you give it, which will be covered below.

Under Basic Authentication you will find a username and password. When you initially pull up a webpage from EventGhost you will be asked to supply the username and password you enter here.

Webserversetup.png


Creating a Webpage

Now that you have EventGhost running, it needs a webpage. The following is a simple page for illustration: <html>

 <head>
   <title>EventGhost Webserver example</title>
 </head>
 <body>
   <a href="example.html?Air1">Radio Air 1</a>
 </body>

</html> The triggering event is found in the hyperlink statement. The beginning of the link references the page where the browser will jump to next. The part after the "?" will be sent to Eventghost with the event prefix you set in the plugin. If you left it at the default then the above link will create an event "HTTP.Air1" in EventGhost.


Connecting to the Webpage

Enter the IP address of the computer running EventGhost into the browser of any other computer connected to the network of the EventGhost computer, or even into the browser of the computer running EventGhost. You will be asked the username and password you entered in the General Settings. After entering the correct username and password, you will see the index.html page you created. If you click on a link with the EventGhost trigger, then EventGhost will receive the trigger.

EventghostHttpEvent.png


Associating the Trigger with an Action

Just like any other trigger, you will need to associate it with an action in EventGhost. You will need to drag the trigger from the log on the left window to the action on the right window. The next time the webpage link is clicked the trigger will be sent to EventGhost and your associated action will take place.

Eventghoststartapp.png
EventhostHttpAssignment.png


Getting Fancy

Since your webpages are standard HTML and use CSS and JavaScript, you can make them very appealing on the device you are using. Using the UiUIKit (free) which is simply some templates and CSS, I designed the following webpage to display on my iPhone.

The following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Eventghost iphone Example</title>
<link rel="stylesheet" href="stylesheets/iphone.css" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<script type="text/javascript" charset="utf-8">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
</head>
<body>

<div id="header">
<h1>Radio Stations</h1>
<a href="index.html" id="backButton">Index</a>
</div>

<h1>Internet Stations</h1>

<ul>
<li><a href="Example2.html?Air1">Radio Air 1</a></li>
</ul>

<p><strong>Best enjoyed on a real iPhone</strong><br />Created with UiUIKit.  This iPhone UI Framework kit is licenced under GNU Affero General Public License (<a href="http://www.gnu.org/licenses/agpl.html">GNU AGPL 3</a>)</p>

</body>
</html>
produced this:
Iphonewebpage.jpg
Personal tools