Joomla Theme pt. 2

Now, let’s look at the index.php file in your template directory. The file contains a bunch of stuff – mostly php code and some html. You can find the <body> tag, and usually a bunch of <div> tags as well. The most interesting ones right now, are the tags that say something like this:

<jdoc:include type="modules" name="top" />

When the page is served, the Joomla engine will use the magic of PHP to replace the tag with “something” from the CMS. From the sample it appears evident that Joomla will pump out the “module” named “top”.

Where do we find “top”?

Open up the file called templateDetails.xml, and locate the “positions” node. Inside that node, you will see <position>top</position> this tells Joomla that we have “something” that we’d like to associate with a position called “top” for this template.

Let’s experiment with a new “position”. We open the templateDetail.xml and add another position node. Let’s call it “underbelly”, once you are done, save the file and go to the Joomla admin.

Locate the Extensions / Module Manager, and pick Breadcrumbs (for example). The configuration for the breadcrumbs will appear and if you pick the “Position” drop down, you will see your newly created position in there.

Screencap showing the underbelly position

Don’t make any changes, instead go make a new menu. Simply go to the menu manager and create a new menu, fill it in like so – pay attention to the module name, since we will need that later.

Screencap, Joomla, Create a new menu

Once you have created your menu, add some items to it. I don’t really care what you put in, anything goes.

The next step is to associate the menu (which is a module) with the position. This is done via the module manager that we touched upon previously. This should be fairly simple. You may recall that the module name of the menu was “thisgoesintheunderbelly”, so we pick that. In the configuration page, we select the “underbelly” position.

So far so good, but where will the underbelly go on the frontend?

Recall the php mumbo-jumbo at the top? I think you can suss out what to do next 🙂

– this was part 2

Joomla Theme pt. 1

Installing Joomla is well documented, and surprisingly easy to install (at least on my good old macbook pro). Once installed, I think most people are wondering how on earth do I create a theme. I sure did, so i dug around and started picking a theme apart to figure out how to do this.

“Installing” a new theme is as simple as copying an existing theme to another folder. I shamelessly started with… well.. now I forgot, but never mind.

Pick an existing template, copy the entire folder and name it “Prescienta” (that’s what I did).


Locate the index.php file, and make a copy of it too (let’s call it _index.php since underscores make you seem clever!

If you go to the management console, and pick Extensions/Template Manager, you’ll see two templates with the SAME NAME (aaargh). The devil is in the details as they say, so lets go back to the template dir, and find the file called “templateDetails.xml”. In that file you will find a bunch of things that you can edit. Some of them are pretty obvious (like the name of the template, the author and so on), but others offer some nifty functionality.

In the templateDetails.xml file, locate the section called <params>

Let’s add a new parameter to control the background color.

    <param name="backgroundOption" type="list" default="white" label="Background Color" description="Background color to use">
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="orange">Orange</option>
      <option value="black">Black</option>
      <option value="white">White</option>

If you save the files, go back to the template manager, and pick your new template, you will see the new option that you just added.

Fantastic, but how do I use this? If you go back to your index.php and open it in your favorite editor (I use Coda), you can add the following code.

<div style="background-color:<?php echo $this->params->get('backgroundOption'); ?>">Wow - my new param</div>

And that, my friend, concludes part one of the Joomla template tutorial

Creating an Event Source

At times you want to send events to an Ocularis server, and use the servers event distribution system to send notifications to operators and clients. This is – fortunately – a pretty simple operation, so let’s look at a sample.

We are going to create a small WinForm app that simulates two sensors with two rules each, without further ado, lets start by creating a simple WinForm app.

Then, add references to System.Messaging and EventTypes.dll (part of the Ocularis SDK). System.Messaging enables .NET to use Microsoft Message Queuing, while EventTypes provides the classes of object we will be sending to the Ocularis Server. Ocularis is using Microsoft Message Queue which provides a safe and reliable store- and forward mechanism. That means that even if the server is down, or unreachable, events will be sent when it comes back up. No additional code is necessary, but naturally the events will arrive with a delay if the server is unreachable for some period of time – but at least you will eventually be notified.

In your implementation file, you can add these two lines

using System.Messaging;
using EventTypes;

First things first; we need to define some GUIDs. We need one for the system itself, one for each sensor, and one for each rule – so all in all we need 7 GUIDs. I made mine like so:

private static string SystemGuid = "F23E4B1B-DB17-4aac-B26B-8447998347B1";

private static string Sensor1Guid = "4897F900-A1F5-4b6c-8683-6200FED219D9";
private static string Sensor1Rule1Guid = "B2D5D3C4-5724-46fa-A999-D77A221AAF76";
private static string Sensor1Rule2Guid = "4F6CF214-82B6-49fb-A2D9-1592B98803A1";

private static string Sensor2Guid = "9F6759F1-A6FB-4f9d-85C9-2D06D21B645A";
private static string Sensor2Rule1Guid = "01417A33-90DC-4498-8D84-3B0A25E02DD5";
private static string Sensor2Rule2Guid = "2948263F-F684-4afb-9EC6-A50079946299";

The GUIDs are created using Visual Studios GUIDGEN tool (Tools/Create GUID).

In the handler for [Register With Server] we need to create the code to register at the Ocularis Server. To do this we need to create an XML fragment that describes the system (this is just a string with some XML in it), wrap the fragment in an object and send it across using the Message Queue.

In my example, constructing the XML fragment is done like this:

string strConfig = "";
strConfig += "<source>";

// add sensor 1
strConfig += "<sensor name=\"sensor 1\">";
strConfig += "<guid>" + Sensor1Guid + "</guid>";

// add rules to sensor 1
strConfig += "<event><name>Rule 1</name><category>VMD</category>";
strConfig += "<guid>" + Sensor1Rule1Guid + "</guid></event>";
strConfig += "<event><name>Rule 2</name><category>VMD</category>";
strConfig += "<guid>" + Sensor1Rule2Guid + "</guid></event>";

strConfig += "</sensor>";

// add sensor 2
strConfig += "<sensor name=\"sensor 2\">";
strConfig += "<guid>" + Sensor2Guid + "</guid>";

// add rules to sensor 2
strConfig += "<event><name>Rule 1</name><category>VMD</category>";
strConfig += "<guid>" + Sensor2Rule1Guid + "</guid></event>";
strConfig += "<event><name>Rule 2</name><category>VMD</category>";
strConfig += "<guid>" + Sensor2Rule2Guid + "</guid></event>";

strConfig += "</sensor>";

strConfig += "</source>";

Now let us register at the server. In the application, the server input field is mapped to _ctrlServerIP (a textbox), so we proceed with this..

  // prepare event object
  EventTypes.SourceSetup src = new SourceSetup();
  src.m_strName = "Prescienta Event Demo";
  src.m_strGuid = SystemGuid;
  src.m_iSourceType = 0;
  src.m_strConfig = strConfig;

  // prepare event queue
  _serverQueue = new MessageQueue();
  _serverQueue.Formatter = new XmlMessageFormatter(new Type[] { typeof(string) });
  _serverQueue = new System.Messaging.MessageQueue("FormatName:DIRECT=TCP:" + _ctrlServerIP.Text + "\\PRIVATE$\\onssieventqueue");

catch (Exception ex)

That’s it. If it all went well, we should see the source in the admin, with the two sensors and the rules attached.

To trigger an event, we simply create another object and send it across the server queue.

private void SendEvent(string strEventGuid)
  if (_serverQueue == null)
    MessageBox.Show("No queue created");

     // create an event object
     EventTypes.GenericEvent genEvent = new GenericEvent();
     genEvent.m_strDesc = "User Created Event";
     genEvent.m_strServerGuid = SystemGuid;
     genEvent.m_strEventGuid = strEventGuid;
     genEvent.m_strTimestamp = DateTime.Now.ToUniversalTime().ToString();

     // send event
   catch (Exception ex)

The solution files can be found at OnSSI’s SDK Page

Win 7, broken as ever!

At least on 64 bit.

Changed from Vista 64 to Win 7 because Vista 64 kept screwing up the NTFS tables (Knoppix sometimes was able to help out, where the expensive, for profit, POS software fails).

Installed Win 7, VPN no longer works (no warning, but you’ll learn after having waited 3 hours to install the idiot OS). Video Drivers went AWOL, got new ones though the wonderful wizard, now I have a nice error message every time i boot.

Icons that “lead nowhere” give you the helpful error message “The parameter is incorrect” – I am sure that little 5 year old Asian kid knows the significance of THAT message.

Forget Microsoft, and stick with the Snow Leopard – this Windows 7 is a piece of feces.

An example of the attention to detail in Windows 7:


Update : Win7 has been playing nicer than Vista since i installed it (no NTFS problems)

Ocularis In-Store Display

Some clients have a nice full screen display mode with no GUI for in-store displays. Ocularis has one too, and it allows you to customize the layout a little bit.

In its standard form, OC would look something like this.

Ocularis In Standard Mode

In a kiosk setting you might not want to display the camera name, the menu bar, the connection indication and any status or error messages that might make sense otherwise, so these things can be turned off.

First you need to create a “skin file”:

<?xml version='1.0'?>

The file should be called skin_custom.xml and be placed next to the HeimdallViewer.exe file (usually in the c:\program files\OnSSI\Ocularis Client directory)

The tag kioskmode puts the Ocularis Client into – well – Kioskmode. That means: No menu bar, no camera labels, no connection status and a nice, calm fade between cameras in a carousel. That also makes the showdiskspaceerror sort of moot (since no errors are ever shown on the screen).

The globaloverlay node is a path to a 32 bit PNG file. The file is stretched to match the window/screen, so to avoid any stretching artifacts, you should prepare a PNG that has the exact same size as the screen (or at least have the same aspect ratio).

In my example, I made a small PNG with a logo and some happy rainbow colors.

Example of Overlay File

The end result is this:

It should be noted, that some screens are susceptible to burn-in, so keep that in mind before going deciding to place a logo on the window.

Focus Groups?

I am pretty sure that day to day interaction between clients and developers is the best way to develop useful, and remarkable products.

Here is what Jonathan Ive said

So how did the company decide what customers wanted – surely by using focus groups? “We don’t do focus groups,” he said firmly, explaining that they resulted in bland products designed not to offend anyone.