[TUTORIAL][How-to] Cast a large indicator for f.i. the changed target temperature

Flows
1

Description:
Create a large status indicator,
which can briefly cast a numeric value
like:
• the target temperature
• volume level
• channel n#
• track n#
• power/gas meter value of the prev. hour
and what not

Screenshots

Needed apps & equipment

  • Google Chromecast app

  • a local webserver, I use the Homey Micro Web server app

  • a device you can cast a website to, f.i. a Ggl Nest Hub or Chromecast

  • HTML files:
    Save them to the www folder on your webserver
    Example for the thermostat:

    • 1. Increased temperature, (filename tadotempup.html)
<!doctype html>
<html>
 <body style="background-color: red";>
    <style>
    h1 {text-align: center;}
    p {text-align: center; font-family: sans-serif; font-size: 45px;  color: steelblue;}
    div {text-align: center; font-family: sans-serif; font-size: 165px; color: white;}
    </style>
    <br/>
    <br/>
       <p>tado° kamer</p>
    <br/>
    <br/>
        <div id="settemp"></div>
    <br/>
    <br/>
        <p>ingestelde temperatuur</p>
    <script>
    const params = new URLSearchParams(window.location.search)
    document.getElementById('settemp').innerHTML = `${params.get('settemp')}°C`;
    </script>
 </body>
</html>
    • 2. Decreased temperature, (filename tadotempdown.html)
      Use the same code as for ‘Increased temperature’, but only change red to blue, and steelblue to paleturquoise 
<body style="background-color: red";>
    p {text-align: center; font-family: sans-serif; font-size: 45px;  color: paleturquoise;}

.
Flows

  • Flow set example
    • Flow 1
      Triggered by a changed value; Slightly delayed so not every ‘in between’ values are getting casted.

.
After 15seconds, I start casting my dashboard again as example.

7 Likes
2

It’s working here, but somehow I get an extra letter cast too:

IMG_20220305_145534
IMG_20220305_1455341920×2560 409 KB

What could cause this?

1 Like
3

Wrong text encoding (the file being interpreted as ISO-Latin-1 but written as UTF-8). Try adding a <head> that sets the correct encoding:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style="background-color: red">
    … etc …
1 Like
4

Tried that. Still the same problem.

The .html file is located on my NAS server in the web directory. I can open it with Chrome on my Mac, and than it looks fine.

Schermafbeelding 2022-03-05 om 17.33.49
Schermafbeelding 2022-03-05 om 17.33.491280×1188 44.4 KB

Perhaps a Google Hub issue?
Other web pages I cast, work fine though.

1 Like
5

Here’s an Artist - Track example

20220305_191909
20220305_1919091920×1131 65.1 KB

  • artist.html
<!doctype html>
<html>
 <body style="background-color: black";>
    <style>
    h1 {text-align: center;}
    p {text-align: center; font-family: sans-serif; font-size: 45px;  color: steelblue;}
    div {text-align: center; font-family: sans-serif; font-size: 55px; color: white;}
    </style>
    <br/>
    <br/>
       <p>Artiest & track</p>
    <br/>
    <br/>
    <br/>
        <div id="track"></div>
    <br/>
    <br/>
        <p>Spotify</p>
    <script>
    const params = new URLSearchParams(window.location.search)
    document.getElementById('track').innerHTML = `${params.get('track')}`;
    </script>
 </body>
</html>