The Default interface can be styled using CSS, this will be the easiest way to customize it for a beginner. The next update will allow you to easily override just the CSS files to create a "theme" for the default interface.
To create your own interface from scratch, you will have to familiarize yourself with the HaikuHelper API documentation. Its not difficult if you are familiar with JavaScript, CSS and HTML. Essentially, the jQuery HaikuHelper library will take care of all of the communication with HaikuHelper. All you will have to do is design your layout and styling and pick where content (such as lighting units, buttons, etc) will go. When the interface needs updating (say a light is turned on or off), the jQuery HaikuHelper library will take care of updating the UI for you.
HaikuHelper also comes with a very very basic sample Interface called "Buttons 2.0", which you can make a copy of as a starting point if you prefer. This will give you the basic files that you will need.
A UI consists of a JavaScript script and an HTML document (styled via CSS if you wish). You can also include other things like images, sounds, flash, etc. Basically, anything a modern web page can include.
To begin creating an interface from scratch, first create a folder inside the HaikuHelper Interfaces folder (you can access it via the Web menu -> Show Interfaces Folder in HaikuHelper). Name this folder whatever you would like to name your interface, ie. MyInterface, for example. Now to load up this interface you would use the following URL:
Code:
http://localhost:9399/interface/MyInterface/index.html
Or you can set it as the default interface in HaikuHelper in the Controller's Settings->Web. Of course first you must create the content (including index.html), which I'll try to cover a bit next. The content all goes within this folder you just created.
Your index.html file must include the base jQuery library and the HaikuHelper jQuery library like so:
Code:
<script type="text/javascript" src="../Default/jquery.js"></script>
<script type="text/javascript" src="../Default/jquery.haiku.min.js"></script>
By including them from the Default interface, you will get updates to it without having to copy over the script to your folder every time. The benefit of this is that it will fix any issues and possibly add features for your interface, the downside is that it could occasionally break your interface when an update makes a change that affects your UI. We try not to do this of course
Following that, your index.html file should also include a script that will define how your UI works, something like this will do:
Code:
<script type="text/javascript" src="myui.js"></script>
Now you can create your myui.js file or just copy the buttons.js file to your interface's folder as a starting point. Note the top portion of the file, this is the initialization of the jQuery HaikuHelper Library:
Code:
var haiku = $.haiku.init({ skipEvents: true });
var helper = haiku.helper;
var controller = haiku.controller;
$(document).ready(function () {
haiku.autoglue();
});
There are other options you can pass to the init() function, so look at the API reference. But for starters, the code above will initialize and "glue" all UI elements for you. To better explain what glue and autoglue does: it assigns what elements in the document will contain the automation objects like Lights, Buttons, Zones, etc. By default, the autoglue() function will glue objects to elements with their class attribute set to things like this:
Code:
-Areas
-Buttons
-Controller
-AudioZones
-Zones
... etc.
Note that they all start with a dash, these are just the defaults though, they can be reassigned when you call autoglue() in your script.
More details on the defaults/options is in the HaikuHelper API documentation (in the Help menu).
To begin, you can just use the default class names. For an example, again, look at the Buttons 2.0 example interface. It makes a simple list of buttons.
Along with these default options, there are also rendering functions for each object type (ie. a Light, a Button, a Zone, etc). By default they are named similarly: renderArea(), renderButton(), renderZone(), etc. Again, these can be overridden to use any name you like via the autoglue() call and this is documented as well.
So now to make the first part of your UI, you will need to do two more things:
1) You will need to add a table or other element that will contain the objects you want to start with, lets do Buttons. Just add this to your index.html file in the <body>:
Code:
<h1>My List of Buttons</h1>
<table class="-Buttons">
</table>
You are not limited to using tables of course, and again can override what containers you wish to use via the autoglue() call and more info on this is in the documentation.
2) Now you need to tell the HaikuHelper library how a Button object should be rendered by defining a renderButton() function:
Code:
function renderButton(button, container) {
// Make sure that we don't assign the event twice
$(container).off("click");
// Assign the event
$(container).on("click", function() {
if(confirm('Activate button "' + button.bestDescription + '"?')) button.activate();
});
// You can return the content or manipulate the container using jQuery and not return a value (or return null)
// If you choose to manipulate the container, dont forget to call container.empty() first
// ie. container.empty().html(button.bestDescription);
return button.bestDescription;
}
The "button" argument is a Button object as defined in the documentation.
The "container" argument is the container where this object should be rendered.
This is where you can either return an html string or you can build elements/modify the container using jQuery.
For an example on how to render other objects or how to add interactive buttons, etc have a look at the Default interfaces ui.js file. There every object is rendered.
This may seem overwhelming, but if you are familiar with web technologies its actually very easy to work with and you can quickly create some amazing interfaces without limitations typically found in home automation interfaces.
However, if you are a beginner you should just start with customizing the look and feel of the default interface via an overriding CSS file. Let me know which you want to do and I can help you get started further.
Hope this helps.
