My Showcase (updated for 2022)

[Martyn_Barnett]

Hi noble community

Some of you may have seen my Showcase post some time ago when my wall-mounted tablet project implemented with THR went live. My showcase project post did receive quite a lot of positive feedback, and actually received some requests for help from fellow community members - including some that wanted some paid help (:-))…

… so, I thought I’d post an update on my project and show how it has matured and evolved over the past few months.

(note: some of the animations have been captured in a small low res gif to give you an idea of what the animations bring to the experience)…

The Tablets are always-on, but they do have a PowerON/OFF timer built into the Android… the one in the kitchen is on morning to evening, and the lounge one is on weekday evenings, and the cinema one is on at the weekends. They all time out after 1200 seconds of inactivity to a screensaver implemented by Bill’s Screensaver Plugin. As you can see, I have overlaid the time, date and weather forecast onto the screensaver video, and as I mentioned on the previous post I have changed all the weather icons to be much sexier.

The Home Page is still fairly basic and will be further advanced to include the energy Monitor plugin that I posted about last week. The bottom half shows tiles of devices that are switched on in the house. that serves as a single place to view which TVs or Amps have been left on (by the daughter!)… But one cool thing is that there is a message window that pops up and flashes to indicate various status - such as if a window is open, or if the washing machine is still running, or if its Trash Day tomorrow…

When I pushed this update to the tablets, the Wife loved the “Trash Day” message, and rapidly put in a request for a details page so she’d know what trash to put out on what week… (I mean, like she ever puts the trash out anyway!!!)… anyway, to keep the WAF high I put a button on the popup message.

I’ve also done quite a lot of work to upgrade the House Audio page… now it is animated with a background video that makes it stand out…

But the really cool addition is the ability to manage “now playing” and playlists…

Its also pretty cool that when you are listening to the radio, you can get the current now-playing track through the broadcast;

The motion Sensors in the Security Page are now also animated so that they flash on and off when they are open or activated so that the tablet draws the eye to the event…

also in the Security Page, we now have the CCTV Cameras shown on the HouseMap where they are installed, and the button icons allow me to view any camera in real time by pressing on the location that the camera is installed…

The Lights and Appliances page hasn’t changed much, but I did add new buttons to open/close the garage doors and electric gates…

I have been able to integrate a couple of additional devices with new plugins… first the Projector in the Cinema where its nice to be able to monitor Lamp Life and Filter Usage etc… this is all pulled from the home made device plugin in Vera.

… and the Washing Machine that is pulled in through SmartThings, that now pops up into the Message Window when the Washing Machine is running or the sock drawer is opened to show the time remaining on the current wash…

I also made a change to the Weather Forecast page that has a context relevant background video with transparency…

Anyway, thats about the extent of the updates… hope that it continues to inspire others…

Any questions please let me know. Always happy to help anyone if I can.

[Jdamore]

Wow! Looks stunning! Love it.

How did you animate the status window?

@Martyn_Barnett

But one cool thing is that there is a message window that pops up and flashes to indicate various status - such as if a window is open, or if the washing machine is still running, or if its Trash Day tomorrow…

Did you get this to loop or did you just use a bunch of property actions (that eventually run out)?

[Martyn_Barnett]

Hi.
I have a scene that runs on a timer and it toggles a flash variable. So every 2 seconds I can set something (anything) to flash. Either on or off, or in the case of my security page I can toggle the background colour.

[Steve19 (Steve Berry)]

Hi Martyn

The trash reminder is a brilliant idea. I’ve updated your hrp with my local bin day schedule. Which is a collection on the same each week but alternating between recycling and then general waste & garden waste.

Is it possible to show the correct colour bin for each alternate collection day? & if so how

Thx

[Martyn_Barnett]

Hi Steve

Thank you
Well… changing the colour of the bin is the easy bit actually… You will have noticed that I get the day name of tomorrow using the Weather Plugin that tells us the name of the day for ForecastDay0 (thats tomorrow)… so a simple data trigger on the ForecastDay0 name of “Wednesday” for example enables us to make the Trash Day icon visible or invisible… BUT… advancing that into a rule that knows WHICH Wednesday it is, well, thats a little bit more complex.

I mean, sure, its easy enough to use the Date/Time control to get the date, and then for you to essentially hard code into the rule all of the fortnightly dates for Green Bin and all of the other fortnightly dates for Black bin, but thats a pretty heavy lookup table to put into the Data Triggers.

I know Bill tries to discourage the use of them, but if it was me I’d be doing this in a Script. It would be easy enough to write a little JavaScript to do this…

[Steve19 (Steve Berry)]

HI Martyn, yes I sussed out the use of the weather forecast day, thanks. I think you are quite right that hard coding the dates would be a burden on the system, its not essential but it would be a cool nice to have touch. I don.t have any javascript wrting skills so that’s out for me at present… unless you were to find it useful for your own project and maybe share it?

Would it be possible or even easier to simply pick a start date ( my bin day is Tuesday) and then every 14 days alternate the bin colours so not necesarily needing to know the actual dates? Xmas and certain bank holidays sometime alter the the schedule but there would be no need to handle that. Also, the reclycling notice from the council is displayed in the popup anyway so it’s relatively easy to look at which bin needs to go out on which day. For me the colour change would be the image of the bin next to the “it’s bin day tomorrow” button. I’ve removed the large bin image on the popup as my bin details doc is wider than yours. You said changing the colour of the bin is easy - would that be a case of having two bin images and then the system inserting the releavent one as necessary?

so,would I be correct in establishing the following parameters for coding …

Bin 1 colour: [Blue]
Bin 2 Colour:[Black]
Bin collection day: [Tuesday]
Bin 1 Start Date:[12-07-2022]
Bin 2 Start Date: [Bin 1 Start Date +7]
Repeat Bin 1 days: [14]
Repeat Bin 2 days: [14]

Then something to prompt uploading the next years collection schedule and updating the parameters with any collection day changes. so if end date is passed a propmt/ pop up appears over the collection schedule image.
Yearly Schedule starts:[05-04-2022]
Yearly Schedule ends:[21-03-2023]

Hope this makes sense - but I have no idea how to code this in THR

[Martyn_Barnett]

Hi Steve

Ok, having slept on this, i think the answer might be simpler than we thought… quite simply we need to know if the current week number is ODD or EVEN… that will give us a fortnightly schedule.

So, I built the script and tested it, and it works…

Do this…

Step 1: Upload a new image for a Black Bin, so you will have different icons for Recycling week, and Trash week.

Step 2: Give the elements in your Trash Day Grid a name… the Label and the Image are the most important. We will be writing a script and the script needs to know the names of these elements.

Step 3: Create a new trigger on the gTrashDay grid, and set it as an Event Trigger that will fire when the grid is loaded… like this…

Step 4: Set the Action for that new event to be a ScriptAction, like this…

Step 5: Paste in this simple Javascript code into the Script window…

(the code is below so you can cut and paste it in…)

// Get the current WEEK NUMBER
var currentDate = new Date();
var startDate = new Date(currentDate.getFullYear(), 0, 1);

var days = Math.floor((currentDate - startDate) / (24 * 60 * 60 * 1000));
var weekNumber = Math.ceil(days / 7);

// Determine if the Week number is odd or even
if (weekNumber % 2 == 0)
{
// EVEN NUMBER = GREEN BIN
tBinDay.Text = “Tomorrow is RECYCLING Day”;
iBinDay.Image = “BinDay.png”;
}
else
{
// ODD NUMBER = BLACK BIN
tBinDay.Text = “Tomorrow is BLACK Bin Day”;
iBinDay.Image = “black_bin.png”;
}

Now, on EVEN Weeks you will see this…

and on ODD weeks you will see this…

Woohoo!!.. now you’ve only got to adjust your script if your schedule is different.

[Steve19 (Steve Berry)]

Amazing! Thats perfect. Thank you Martyn.
I’ll get onto this later & give a whirl!

[Steve19 (Steve Berry)]

Hi Martyn
So I’m testing out your procedure above but when I run the simulation I get this error message :Line12 unexpeced token ILLEGAL

I presume that the existing Bin day text and Bin day image are removed & the boxes left blank as the values are added by the script.

What do you think I have missed? I can’t find anything obvious. I’m running THR on a windows laptonp running windows 10.

[Martyn_Barnett]

Hi Steve

Did you give the text and image elements the right names? tBinDay and iBinDay (case sensitive). ?

and no, you don’t need to change or remove the existing text and image fields in the designer… the script will just overwrite them when it runs.

[Martyn_Barnett]

in fact… you might do more harm than good by clearing the fields in the designer… I’d leave defaults in there Steve.

[Steve19 (Steve Berry)]

I’ve checked everything Martyn, even copied and pasted the tBinDay and iBinDay from the script to ensure they are identical. Could it be a javascript issue on my laptop? I put back the original text and image values.

[Steve19 (Steve Berry)]

[Steve19 (Steve Berry)]

Martyn, I have been playing around with the day of the week to get it to trigger and leaving ForecastDay0.DayOfWeek unchanged. For each value ie Monday - Sunday the rule doesnt trigger ie doesnt break for each day - except today, Thursday, which is the day I set to simulate tomorrow being bin day. Do I need to change the forecast day to a different day number to match the bin day text value?

Edit:
Hi Martyn
After a bit more testing, I think there is an anomaly whereby if you add today as the Data Trigger value the code returns the error on line 12. IS it a day calculation issue ? When it was Thursday I got the error and when I just changed it to Friday - the error occured. so I tried Thursday again and because its not Thursday anymore, there was no popup & no error. So whilst the pop up did occur just now ( value set as Friday) it was the original bin day message accompanied by the error message. Which is what I got when it was Thursday. I’m off to bed now - been playing with this for to long I’m going to set the value as Saturday and see what happens on Saturday.

[Martyn_Barnett]

Weird Steve… can’t explain what you are seeing… I don’t see that problem here.

Can you send me your HRP ? I will take a look…

[Steve19 (Steve Berry)]

yes will do - however, I tried the changes in the original hrp file you sent me and the error occurs there as well if you set the Bin day value to today’s value. I just tried it again setting value to Friday and the bin day message appeared but with the normal info and also the error message which only apprears briefly. Basically everything is triggerring - just not the script.

[Steve19 (Steve Berry)]

Hi Martyn

Email sent as requested.

[Martyn_Barnett]

Hi Steve

Ok, I have worked out what is wrong with that script that is giving you the Unexpected token: ILLEGAL error… in fact its not a script problem at all… its an anomaly of cutting and pasting from this forum…

Look at this snip:

Can you see how the string in the first conditional is in a sort of Brown Colour, and the string in the second conditional is in Black ? This is because the editor does not like the speechmarks that the act of pasting in the string from this form caused…

To make the string actually be a string (and not a syntax error), just delete the speechmarks (at both ends of each string), and you will see the text go brown - that means the editor knows its a string.

You can see that I have done the first one for you…

Give it w whirl and the syntax error will go away!

[Steve19 (Steve Berry)]

Wow! No way would I have ever figured out that one. Well spotted. Thank you.

[Steve19 (Steve Berry)]

All working as intended now