Custom Energy Management or Hotel Room Management Portal

[LaurentCoene]

In this document, we will describe how to build a fully custom portal for your customer using the SmartStruxure Lite (MPM) product. The MPM has a webserver which will be able to host any website. And as you know, it has multiple I/Os, Modbus, Modbus TCP, Zigbee and EnOcean support, which makes it a great aggregator of data.

To build the portal couldn't be easier as you simply use traditional technologies (HTLM, CSS and Javascript).

In our example, we will build a hotel room management system for our hotel facility manager to take control of his rooms.

So first off: build your website (if you don't know how, hire a webdesigner so that it looks good looking). Here is an example:

Second, you need to know three things:

1. Make sure the file structure of your website is completely flat (as the MPM won't allow any subfolders on its web folder)
2. Remember that any time you upgrade the firmware, the website will disappear (so you will need to re-upload it)
3. Don't use index.html as this is already used by the MPM

Once the look & feel of your website is ready, you can start uploading it to your MPM to test it. In order to do so, we have a great tool from the awesome Michel Laronche. The tool consist of a CSV file which contains the file names of the files you need to upload and an executable that let you specify the IP of the MPM. The tool is built in c# and comes as is. If you do any improvement, please share with the community!

Once the files have been uploaded, you can start accessing it. In our example: http://x.x.x.x/room.html

Next you need know how to use Obix to actually communicate with the back-end of the MPM. If you didn't know Obix is a web service layer that seats on top of BMS. You can actually try it out by accessing the web services directly from your browser to test things. For example, if you want to get the current value of the object AV11, just do:

http://<your IP>/obix/network/<MPM Node Id>/<MPM Bacnet Id>/AV11/Present_Value

The browser will return an XML object that contain a property called val (which has the value of your object).

For example, mine returns:

<realwritable="true"href="http://<my_IP>/obix/network/N003F48/DEV100/AV11/Present_Value/"xsi:schemaLocation="http://obix.org/ns/schema/1.0/obix/xsd"val="77400"></real>

For us to use those web services, we will use jQuery which is a standard AJAX framework that easily let you connect to those services. Let's review the various use:

Record a value on the MPM

To record a value on your MPM, you need to do a POST. In our example, if the user would like to reset the set points of our room controller (SE8000), that's exactly the operation we need to make. Making a post using jQuery is extremely simple. In your javascript function, simply do:

$.post(url, '<str val="' + value + '"/>');

url is the URL of the object you would like to modify. Ex.: http://<my IP>/obix/network/N003F48/DEV100/AV11   (notice I don't put the "Present_Value" here)

value is the actual value your would like to record

Get a value from the MPM

Getting the value is nearly as simple as posting one. You need to do a GET request which translate in $.ajax when using jQuery. You need to remember that ajax is asynchronous, which means that you never know for sure when you will get the answer. That also means that you must pass in the parameters the name of a function that will receive the XML result!

Also remember to specify that the resulted data type will be XML! Here is an example of how we get the temperature of our SE8000 (in AV18) and put it in our temperature DIV.

$.ajax({ type: "GET", url: "http://<my IP>/obix/network/N003F48/DEV105/AV18/Present_Value", dataType: "xml", success: function(xml) { $(xml).find('real').each(function(){ var temperature = $(this).attr("val"); $('#temperature').html(temperature); }); } });

Get a file from the MPM

Getting a file is very similar to the previous request:

function loadData(divId, tag) {

  $.ajax(

  {

  url: "filename.json",

  type: "GET",

  dataType: "json",

  success: function(serie) {addSerie(divId, serie)}

  });

  }

To draw my bar chart, in this case, I use the FLOT javascript component which requires json. The file itself can be created on the LUA side using the io API. But obviously, you could use any javascript component. Just specify the filename in url, the dataType (json or xml) and what to do with the data once you receive it.

So now, you can start building fully custom solutions for your customers and make them feel so much more special!

[JamesAZZO]

You are an absolute champion. I am going to use this for a project in a couple months. So good.

[LaurentCoene]

I'll give you a call. I have another idea of architecture to use this. Actually, I really should come and see you. We have so many things to go through! Let's plan for this.

[JamesAZZO]

Oh yes. Call me tomorrow. So much to chat about. You should definitely come here too. We have been building some pretty unreal things. You will love them.

Could use some Laurent enthusiasm!