"The Home Remote" dashboard app demo video

cw-kid · August 11, 2020, 6:04pm

It’s wasn’t easy or logical but I was able to add three tiles on my “Kodi Meda Center” sub group.

“AV” being the Group.

If I click these tiles it takes me to three different pages for each HTPCs remote.

It might be possible to make such a tile go to another area of the app certainly to a page you built yourself or possibly to a different Group page / area.

Pabla · August 11, 2020, 6:25pm

Something I’d have to try for sure.

cw-kid · August 11, 2020, 7:03pm

@Pabla

OK so you can only add “devices” to a sub group as you have discovered.

So you need to add a Plugin device and a custom tile template file.

So for my Kodi HTPCs I added 3x plugin devices and 3x custom tile template files.

Start by looking in the Templates folder in the designer and I used the “SwitchTile.xaml” template file, I copied and pasted it 3 times and renamed my copies.

Then under devices at the top I added a Plugin device and under that I added 3x devices for Kodi01, Kodi02, Kodi03 etc

I then edited each of these plugin devices and pointed them to their tile template I created earlier.

Also make sure you give each an ID number such as 1 , 2 & 3 etc. Any number is fine.

Kodi01:

Kodi02:

Kodi03:

Then in your sub group folder you can add these plugin “devices” in to it.

OK last step you need to assign where in the app the “device” tile will go to when you click on it ?

To do this go back to the SwitchTile(your-name).xaml files you created in step 1.

Double click the first custom tile template file and then click the Actions button bottom right

You will then see a dialogue like this:

If there is anything already there in the “Items” area, just click the minus button to remove it.

Then click the plus button and select “Method Invoker”

Now select “App” for “TargetName”

Now select “GoToPage” for “Method”

Now I think you have two choices here. You can either put in an actual page name, like I have “KodiDetails.xaml” this is my remote control page for this HTPC. So this would be a page you have created yourself.

Or if you want it to go to another area of the app that you have created using Groups you can use something like this in the “Parameters” field.

Groups/Home

That would take you to the “Home” Group when this particular tile is clicked.

So from your screen shot you posted earlier, for example you could go to areas like these:

Groups/Backyard
Groups/Bar
Groups/Sonos

It needs to be the actual Group folder name you put in, not the friendly display name.

Example GoToPage - Go to an actual page .xaml file.

Example GoToPage - Go to a Group

Told you it wasn’t easy or logical !

Pabla · August 11, 2020, 7:14pm

Wow!! I will certainly give this a try, thanks for the thorough instructions☺️

cw-kid · August 11, 2020, 7:30pm

This Plugin device method was also used to add tiles for launching external apps, as you probably noticed in one of the screen shots above.

I created a custom tile template file for each app I wanted to launch and added an ImageButton on to the tile.

And in the Actions I added an intent such as this for Youtube (Android).

intent://#Intent;scheme=google.android;package=com.google.android.apps.youtube.music;end

The Method is OpenURi

Pabla · August 12, 2020, 4:51am

okay so I took a stab at this, first off your instructions are super clear and I was able to make through most of it. Got stuck on the last part ‘go to page’ action I wasn’t able to get the button to go to a page. Will try again tomorrow.

So from my understanding to create a sub-sub group id basically have to make a virtual button that leads to another group?

The biggest thing I don’t understand is the ‘Pages’ and how to use them. From the tutorial videos it looks like there are pre-made page templates and custom ones. The custom ones are where you can add buttons etc and manually add actions to them to do whatever. So in each group or subgroup you add a page template whether that be custom or not.

cw-kid · August 12, 2020, 9:21am

On the custom tile template xaml file created in step1, find it again under the Templates folder and then double click it.

Then in the right hand side under the Outline section. Make sure Tile (Tile) is highlighted.

Then in the Properties pane at the very bottom right in the Triggers section find the Actions field and click the button with 3 dots on it.

This will open a dialogue called “Collection Editor”

Then follow the rest of the step 4 instructions from there.

You can either add a Goto Page for an actual xaml page you have created.

Or you can add a Goto Page for a Group.

I think we need to get the word terminology correct when talking about Home Remote or it gets confusing.

You have groups and sub groups. This is the easier / quicker way to build up your app.
As any devices added to a sub group folder the system then auto generates a sub group page with those device tiles on it. I’d call this a a group page. Or a sub group page.

Then you have Pages proper. These are nothing to do with groups, these are pages you create yourself under the Pages folder in the designer.

Then you have templates these are device tile template files. There is a set of in built ones or you can create your own, by copying one and pasting it in to the Templates folder and then tweaking it as I did for the Camera preview tile.

Pabla · August 12, 2020, 1:45pm

With that said then, a Page is the layout and ordering of device tiles within a subgroup?

cw-kid · August 12, 2020, 2:42pm

Yes an automatically generated page or Group as they call it

Pabla · August 13, 2020, 2:07am

Have you been able to add an autogenerated device to a custom page?

cw-kid · August 13, 2020, 2:54am

No I don’t think so.

But that is the next level creating your own pages and layouts I am not an expert yet.

Pabla · August 13, 2020, 3:04am

Yeaup I’ve reached out in their forums, doesn’t look like its a thing which is a large oversight imo

cw-kid · August 13, 2020, 3:17am

I have one test page.

I added my own button to turn a Z-Wave light on and off.

I added another button that sent a http command out over the LAN to control another device.

Just basic stuff nothing great.

I’ve not even looked in to creating your own pages and designs yet.

Baby steps.

@Tarkus is your man for asking questions about creating your own custom pages and designs.

cw-kid · October 30, 2020, 4:57pm

Updated demo video of “Home Remote” Android app on my phone.

Changed some layouts and added some stuff like Kodi remote and integration with Grafana graphs.

Other integrated devices:

Logitech Harmony Hubs
Philips Hue Bridge
Hikvision IP cams
Ezviz DB1 doorbell

cw-kid · November 1, 2020, 5:01pm

If you want a single dashboard tile in Home Remote to control multiple lights in Vera this is how I have done it here using the SubMasters plugin for Vera and creating a virtual dimmer device in Vera.

This one tile controls the two side lamps in my lounge for ON / OFF and Dimming.

cw-kid · November 4, 2020, 9:50am

Imperihome style “List View” custom page:

With some help from the guys on the Home Remote forum, I have created a custom “List View” scrollable page, similar to how the list view looked in Imperihome app.

All the other pages so far seen on the Youtube videos were auto generated “Group” pages.

This “List View” page is my first actual page created from scratch.

I plan to use these types of List pages for grouping related Vera scenes together on one page, in this example these are scenes to control aspects of a Fibaro RGBW module.

The “List View” page can be easily added to the main menu on the left hand side.

In the Designer make sure you are in the “NavigationPage” Outline and on the lower right hand side click the 3 dots on the “MenuItems”.

Click the + button.

Give your new menu item a name in the “Title” field.

Select an Icon.

In the “Page” field select the custom “List View” page in this case named “KitchenScenesRGB.xaml”

We now have a new menu item called “Fibaro RGBW”

You can also add a tile to a “Group” page sub-group area, but this is more tricky and you need to create a Plugin virtual device linking it to your custom “List View” page and then you can assign this plugin device to your Group like any other device.

I have also done this in the attached sample .hrp file, so you can see how its achieved.

Here you can see an auto generated “Kitchen” Group and a sub-group page called “Mood Lights” and our new tile which when pressed will take you to the custom “List View” page.

Some screen shots from my live project:

You will need to change the icon images and labels text for your own, and the “Run” buttons Event Clicked Bindings, changed to point to your own Vera scenes etc.