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

**URL:** <https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342>\
**Category:** Flows\
**Created:** [March 5, 2022, 6:45am UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342 "2022-03-05T06:45:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [March 5, 2022, 6:45am UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342/1 "2022-03-05T06:45:23Z")

</div>

**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**

- Increasing the room temperature:  
 ![20220302_213944](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/2/62f3ef57d21956eb25ca11636bd68e8635074e56.jpeg)
- And decreasing:  
 ![20220302_214003](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/c/3c3fcf6407dcb8ebfaa762f841b0736a3f47e403.jpeg)
- A receiver volume level:  
 ![20220305_064805](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/f/8f9e102ad836123dd8d063a3e53395eb6cd1a7f1.jpeg)

**Needed apps & equipment**

- [Google Chromecast app](https://homey.app/a/com.google.chromecast/)

- a local webserver, I use the Homey [Micro Web server app](https://homey.app/a/com.sdn.webserver/)

- 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)

```auto
<!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`

```auto
<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.

- 
  - **Flow 2**  
When the temperature was increased  
_Cast URL (is not displayed properly):  
 [http://YourServerIP/www/tadotempup.html?settemp=](http://YourServerIP/www/tadotempup.html?settemp=)[target temperature]_

- 
  - **Flow 3**  
When the temperature was decreased  
_Cast URL (is not displayed properly):  
 [http://YourServerIP/www/tadotempdown.html?settemp=](http://YourServerIP/www/tadotempdown.html?settemp=)[target temperature]_

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

---

<div class="post-metadata">

**Author:** ![Eternity](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/eternity/32/102113_2.png) [@Eternity](https://community.homey.app/u/Eternity)\
**Post date:** [March 5, 2022, 1:58pm UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342/2 "2022-03-05T13:58:15Z")

</div>

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

 ![IMG_20220305_145534](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/3/c31dd0d0a3c7e02b4afadb7dfe889877cd0af0ef.jpeg)

What could cause this?

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [March 5, 2022, 3:58pm UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342/3 "2022-03-05T15:58:55Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Eternity](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/eternity/32/102113_2.png) [@Eternity](https://community.homey.app/u/Eternity)\
**Post date:** [March 5, 2022, 4:34pm UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342/4 "2022-03-05T16:34:38Z")

</div>

> [@robertklep](#):
>
> ```auto
> <head>
> <meta charset="utf-8">
> </head>
> 
> ```

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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/5/b528cd8af2e56753d4297b0313b2a674049b153f.png)

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

---

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [March 5, 2022, 6:54pm UTC](https://community.homey.app/t/tutorial-how-to-cast-a-large-indicator-for-f-i-the-changed-target-temperature/61342/5 "2022-03-05T18:54:28Z")

</div>

Here’s an **Artist - Track example**

 ![20220305_191909](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/c/fca267e067f4d5f0e09085ea93a6db1a86931f8e.jpeg)

- Flow  
_Cast URL (is not displayed properly): [http://YourServerIP/www/artist.html?track=[artist]-[track]](http://YourServerIP/www/artist.html?track=%5Bartist%5D-%5Btrack%5D)_

- artist.html

```auto
<!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>

```