Joomla Theme pt. 3

The layout of a Joomla theme is really more about CSS than anything else. An example is menus – they are usually a bunch of <ul>’s, so to make them look cool you need to know how to change the layout of a <ul> (there are hundreds of CSS tutorials around the net). Other modules are dumped as a <table>; an example could be the newsflash module.

In my setup, the newsflash module is linked to the top position. So to draw the newsflash, the php will contain something like this

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

this will result in this output

<table class="contentpaneopen">
  <tr>
    <td valign="top" >Joomla! 1.5 - 'Experience the Freedom'!....</td>
  </tr>
  <tr>
    <td valign="top" ></td>
  </tr>
</table>

It would seem logical that we just create some CSS for table.contentpaneopen – however – ALL the tables are of this class, and obviously, we need the newsflash to look completely different. The solution is to wrap the top position in a <div>

<div id=”newsflash”><jdoc:include type=”modules” name=”top” /></div>

in the CSS, we can then address the newsflash with this selector

div#newsflash table.contentpaneopen
{
background: fuchsia;
}

the individual <td>’s are addressed like so

div#newsflash table.contentpaneopen td
{
background: #456;
}

This was a pretty brief intro to the Joomla way of thinking. Now go play 🙂

Advertisements

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).

Then

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.

  <params>
    <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>
    </param>
  </params>

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..

try
{
  // 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");

  _serverQueue.Send(src);
}
catch (Exception ex)
{
  MessageBox.Show(ex.Message);
}

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");
    return;
  }

  try
  {
     // 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
     _serverQueue.Send(genEvent);
   }
   catch (Exception ex)
   {
      MessageBox.Show(ex.Message);
   }
}

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

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'?>
<skin>
  <kioskmode>yes</kioskmode>
  <globaloverlay>c:\skin_custom.png</globaloverlay>
  <showdiskspaceerror>no</showdiskspaceerror>
</skin>

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
Overlay

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.