"The Home Remote" dashboard app demo video

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.

Something I’d have to try for sure.

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

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

image

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

image

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:

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

image

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

1 Like

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

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

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.

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.

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

Yes an automatically generated page or Group as they call it

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

No I don’t think so.

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

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

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.

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

1 Like

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.

image

image

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.

image

image

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”

image

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.

image

Some screen shots from my live project:

image

image

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.

You can also change the Toast Popup message text that appears upon pressing each Run button:

Attached is the .hrp project file example.

List-View-Page-Example.zip (251.0 KB)

1 Like

Nice, I will dig in to this app during the winter :slight_smile:

I’m working on making better light tiles, which looks like it will be possible.

This is the default look and the grey colour when the light is on is your chosen “Accent” colour, not sure if I can turn that off yet?

ON:
image

OFF:
image

My edited custom Light tile, I’ve added a dimmer slider and my own state icons, plus moved things around.

ON:
image

OFF:
image

EDIT:

These are better now getting near final versions:

image

image

Side Lamps

image

image

Looks loads better now:

Before:

Attached is this custom dimmer light tile if you want to try it out, copy the .xaml file to the Templates folder in the Home Remote designer app.

Then on your Vera device change its “TileTemplate” field to DimmerTileIconBulb.xaml

image

You will need to assign your desired on / off icons on the IconElement datatriggers.

DimmerTileIconBulb.zip (1.2 KB)

1 Like

Some new tiles created:

Light Switches no dimmers:

New ON / OFF switches with different state icons:

Vera House Modes and Run Scene tiles:

Not settled on the actual final icons yet these are quick and dirty:

I still need to sort out the opacity when the switches are on its on top of the icons :sleepy:

Final look of my Home Remote dashboard app.

1 Like

Best Home Automation shopping experience. Shop at getvera!

© 2021 Ezlo Innovation, All Rights Reserved. Terms of Use | Privacy Policy | Forum Rules