Tutorials on how to create a gui using CommandFusion iViewer

[thechad]

Hi Guys and gals,
I love Home Automation, but let's face it, without a good GUI, there is NO WAY the wifey will allow it. It's just easier to just get up and use the light switch!

I have created some video tutorials of a solution that works on both my iPad and Android platform using CommandFusion iViewer and (in my case) it talks to DomotiGa via TCP...and it's free...
(well, if you just want a single page it is...but you can check those details out later...let's get you hooked on making your own sexy GUI first! <Cue maniacal laughter> )

The problem was as a newb, it took me ages to get my head around what I had to do (actually, not that long)....but I wanted to make it easier for others - so I created these video tutorials.
These are using to DomotiGa as a backend HA system, but will give you the basics for how it would work with another endpoint device.

This is an image of the example gui I create in the tutorials.
All up the below fully functional gui takes about half an hour to create (and that is with me talking alot!).



The tutorial video direct links are here:
Video Tutorial: Step 1. Basic Integration http://www.youtube.com/watch?v=KehmBlH-uW8
Video Tutorial: Step 2. Using guages, serial and analog joins http://www.youtube.com/watch?v=dXvwzFVhxEw
Video Tutorial: Step 3a. Full Control - Sending Commands to DomotiGa using jsonrpc http://www.youtube.com/watch?v=Hkp_xiUbSbg

I hope this helps someone (and increases the WAF of your HA system) and ultimately encourages the community to have a go at creating and sharing their own gui's.
It really is very easy (mostly drag and drop)...but at the same time, very powerful with regex's and integrated javascript.

I have updated the CF iViewer interface in DomotiGa and created a wiki along with 3 instructional videos that show how to build a gui in commandfusion iViewer.
The wiki for the DomotiGa interface is here http://www.domotiga.nl/projects/domotig ... CF_iViewer and contains the links to the tutorial videos as well as all the files/images using in the tutoral.

The version of iViewer in those demo's is iViewer4 which you can grab for free from the app store of your choice (again, it's free when you use a single page which is all many will need).
You can learn more about commandfusion at their website (here http://www.commandfusion.com) and they have a fantastic wiki and loads of examples on their git hub (as well as an active support community).

If you do make a gui, please post a pic. over at the DomotiGa forums (and here). I would love to see what people are doing with it.

PS...make sure you use the latest version of DomotiGa (now on git) as there have been a few recent changes to the CF iViewer class.
Upgrade instructions are here http://www.domotiga.nl/projects/domotig ... Ga_Upgrade

[Mediacj]

Thanks this tutorial really helped me to get starting!

[thechad]

Hi Mediacj,

Glad it helped. Please post any questions you have and i'll do my best to assist.

It would be great to see a screenshot or some details of your GUI...It is always useful to see how people use these products.

On my IViewer iPad HA system I have (sub)pages for :

• lights,
  energy usage,
  security cameras,
  radio and music players
  TV/cable and xbmc
  weather
  security incl. alarm, the doorbell camera (pucs of people who press the doorbell), door sensors, etc
  thermostats and 1-wire temp. sensors,
  the watering system

Fun times! Still pretty basic UI...will post some pics.

The command fusion guys are really good with assisting users over at their google groups support forum, so I encourage you to post any commandfusion questions over there.

Fyi - Alexie I are currently working on updating the jsonrpc interface to use a tcp socket (as well as http). This will be a two way interface and replace the current iViewer interface in DomotiGa. The first version of it is in the current DomotiGa release, though at the moment it does not send status updates...and it may be a while before it is ready for "production" use.

Cheers and thanks again for the post.

[Mediacj]

I will post something for sure, but at the moment I am still learning

I would love to see the pics!

[thechad]

Here is one of the pages...the weather page. It's not in "production" use as it's very much still a work in progress and is really just a framework to help me get all the backend integration working.

Basically, the top row is status.
The Left hand side is a scrolling menu (with icons).
The bottom is a static controller for the audio zones...though i am planning to make it also for tv etc.

I will see if I can make a short video to show the other pages and how the gui works.



Edit:I forgot I put a test button on that page (Play button)...doh...it's not normally there...the page is set to autorefresh the weather every 10 minutes or on pulldown of the daily forecast.

[thechad]

EDIT:

Last video link is incorrect...here is the real linky!

[Mediacj]

Wow! that is beautiful! Great work, thanks for sharing it with us!

I would love to see the project you made to learn from

[thechad]

Sure...I'll just have to remove some items like passwords etc that are in there...then I'll upload a zip of the project

Just remember, it is only a framework and i am still a learning too

[Mediacj]

Great!!

I have to admit that working with CF iviewer is somewhat addictive It's a perfect way to combine all home domotica systems into one iPad/iPhone app!

Yesterday I managed to get json data from a http request in the app, it took me a long time but I succeeded with the help of other examples which you can find a lot about cf/iviewer and there seems to be a helpful user base around.

[thechad]

Hi, I have uploaded the gui.

In reality, it''s not going to be of much use to anyone, as it's custom for my systems...but I guess you can see the code behind what happens in the the youtube video.

You'll obviously need to add your licence to the gui to use the features in this gui (like sub pages etc).

Enjoy.

Note :I had to upload to another site as thelimit here is 2MB

http://www.sendspace.com/file/e1wkyz

[Mediacj]

Thanks i really appreciate it!

[thechad]

Yay, 1000 views

But only one person commenting

Come on guys, please let me know what you think.

[Digit]

I think it's not the relation between number of views and number of replies you should focus on.
It doesn't say that much about the value. Posting is (in my opinion) about sharing your own experience & helping others, exciting them, triggering them to explore things they haven't done before. 1 reply of a member which you made happy by what you shared is worth the effort just as well, right?

My experience is that those that really start doing something with what they've learned from your posts will eventually respond.
But that can take some time... just keep up the good work. Although the response may be lower than you expected, the views show that it is appreciated.

[thechad]

Hi Digit.

Absolutely. I did not post for the glory of it. I posted to share and engage in a dialogue with like minded people and, as you say, hopefully inspire some to try new things.

The key aspect for me is that hearing others thoughts will to help me help others as I need feedback to improve.

It is absolutely not about numbers of views or likes or whatever...but about the dialogue, the conversation if you like....and that is what I felt was missing (apart from Mediacj's posts) so, thanks for letting me know your thoughts

[whizzkey]

Good tutorial Video's!

After some troubles I did finish part 1. I had troubles with the feedback properties.
I am using Z-wave switches, and when I switch a light switch on or off, domotiga sends the following data:

Code: Select all

2014/02/19 21:53:00 [IViewer] Client0: 192.168.1.23 :13_value1=Off

with the regex as in the example (^13_value1=(\d*)) it isn't functioning

So I did the following:
replace in the regex the \d for \w so that the text is passed through
^13_value1=(\w*)

and in the feedbackproperty I add a off value (Off) and a on Value (On).
Then it works correct.