# TileDash - Dashboard pour Homey

**URL:** <https://community.homey.app/t/tiledash-dashboard-pour-homey/101630>\
**Category:** 🇫🇷 Français (French)\
**Tags:** dashboard\
**Created:** [January 19, 2024, 10:42am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630 "2024-01-19T10:42:31Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [January 19, 2024, 10:42am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/1 "2024-01-19T10:42:31Z")

</div>

![](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/9/79248448969bd48cf623220580c0dc1433a3cc25.png)  
J’ouvre un topic français pour TileDash, si vous avez des questions j’y répondrais avec plaisirs.

TileDash est un tableau de bord pour Homey. Le sujet principal est ici: [TileDash - an Homey Dashboard](https://community.homey.app/t/tiledash-an-homey-dashboard/98802)

Le [github est là](https://github.com/sebyldino/TileDash), et j’ai également créé [TileDash tool](https://tiledash-tool.000webhostapp.com/) pour une configuration plus facile.

![](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/a/4a2b478960784966122e2de5428e28c518387aaf.jpeg)  
[![](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/e/ce8dc1aebb56d5f26c2b87708955faaf06967890.gif) ](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/e/ce8dc1aebb56d5f26c2b87708955faaf06967890.gif)

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [March 28, 2024, 6:55pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/2 "2024-03-28T18:55:40Z")

</div>

Bonjour,  
Super boulot !  
Je recherchais justement quelque chose basé sur du langage Web pour une bonne personnalisation et un suivi assez simple.

J’ai posté sur le fil en anglais à propos de ce qui semble un bug avec l’adresse des Homey Pro 2023…

J’aimerais faire quelques types supplémentaires :

- climatisation (target temp, mode, temp inside, temp outside, fan rate, fan direction, mode eco et mode power)
- Ampli home cinema (volume, source, on/off)
- Aspirateur Robot (On/Off, zone, piece, coordonnées)
- Station météo / prévisions météo (capteur multiples)

La base, ce serait un menu déroulant avec plusieurs possibilités… Je vais regarder ça. (Je connais l’Arduino, un peu le HTML, et CSS, mais pas trop le JS… Une bonne occasion de s’y mettre.)  
Mais si jamais vous avez une proposition, je suis preneur !  
PS : j’ai adapté simplement le type DOORBIRD\_POPUP pour les caméras Reolink (mais image statique pour le moment…) L’adresse à utiliser :

> url = item.doorbirdIP + ‘/cgi-bin/api.cgi?cmd=Snap&channel=4&rs=1213abc&user=’ + item.user + ‘&password=’ + item.password;

Bonne continuation

👍

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [March 29, 2024, 5:26am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/3 "2024-03-29T05:26:34Z")

</div>

Bonjour,  
Merci.

Pour la connexion, j’utilise la méthode [Homeydash](https://community.homey.app/t/homeydash-com-a-homey-dashboard/13509), j’ai une Homey Pro 2019, a tester avec une 2023 pour voir si déjà la méthode de connexion fonctionne ou si c’est dans le code de TileDash.

Pour les cartes supplémentaire, pas de soucis je pourrai regarde ce que je peux faire car je n’ai aucun de ces 4 appareils. Je te solliciterai certainement en MP pour avoir certaines infos.

J’ai des caméra réolink mais je n’ai pas encore commencé le type CAMERA, donc ta piste est intéressante.  
Au lieu de “?cmd=Snap”, peut être tester “?cmd=Stream” ou “?cmd=Preview”. (Ce n’est qu’une hypothèse)

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [March 29, 2024, 11:08am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/4 "2024-03-29T11:08:01Z")

</div>

Bonjour,

La méthode HomeyDash 2019 semble en effet différente de la version 2023…  
Cependant, j’ai l’impression que ça fonctionne quand même. En dépits de l’erreur, les retours d’états semblent fonctionner… Je loupe peut être un truc.

En attendant, je me suis penché sur la clim Daikin, et j’ai un truc adapté de tes codes qui fonctionne :  
[Petit clip démo](https://drive.google.com/file/d/1-GdkCyvva5S8aHA1yyjQK0mMR4O838ZE/view?usp=sharing)

Il me reste à faire les fonctions :

- vitesse du ventilateur
- mode auto
- mode éco
- orientation des ailettes
- mode powerfull

A+

PS : Pour a caméra, ni Stream ni Preview n’existe dans l’API CGI Reolink, j’ai tout de même essayé, et ca renvoie bien une erreur…

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [March 29, 2024, 6:00pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/5 "2024-03-29T18:00:39Z")

</div>

C’est pas mal du tout ce que t’as fais! Les cartes sont vraiment sympa!

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [March 29, 2024, 6:29pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/6 "2024-03-29T18:29:38Z")

</div>

Voila la dernière mouture, je pars pour le WE de Pâques , j’y retravaillerai la semaine prochaine. Bonne soirée et bon weekend.

 ![TileDash](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/e/8e3c7914e7735c164e963dcd0006174feaf2e5f5.jpeg)

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [April 9, 2024, 8:23am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/7 "2024-04-09T08:23:30Z")

</div>

J’ai un peu avancé, je tends vers quelque chose qui commence à ressembler au dashboard que je voulais … Malheureusement, pour le moment, j’ai autant de pages HTML que d’icones en bas. Idealement un rafraichissement dynamique uniquement du body avec des dashbord différent serait plus sympa, mais je n’y suis pas encore…  
[Démo Point d’avancement](https://drive.google.com/file/d/1-Ha8PwtlNr6AbsQWHVCsj8nZtKIk5ifF/view?usp=sharing)  
J’ai ajouté une couleur perso par icone (optionnelle), j’aimerais pouvoir avoir le choix entre icone ou image… Je vais y réfléchir…  
Je bloque sur plusieurs petits trucs pour le moment … (Des soucis avec le CORS policy lorsque je fais des requêtes dans mes scripts, par exemple pour le jour tempo…)  
J’aimerais aussi rapatrier les données des insights pour les placer dans des graphs… Si t’as des pistes pour ceci ca m’intéresse.  
A+

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [April 9, 2024, 2:47pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/8 "2024-04-09T14:47:05Z")

</div>

> [@Yoann\_PETITJEAN](#):
>
> Malheureusement, pour le moment, j’ai autant de pages HTML que d’icones en bas.

Qu’entends tu pars là? Chaque icone est lié vers un autre TileDash en quelque sorte?  
Il serai possible de créer un `<div>` pour chaque page et des les afficher suivant l’icone cliquée et les autres masquées. Ainsi l’ensemble est chargé 1 seul fois et on clique sur les icones pour naviguer.

> [@Yoann\_PETITJEAN](#):
>
> Je bloque sur plusieurs petits trucs pour le moment … (Des soucis avec le CORS policy lorsque je fais des requêtes dans mes scripts, par exemple pour le jour tempo…)

Je pense que le problème viendrai de requête http vers https? Tu pourrais peut être créer un tag ou un device virtuel dont tu détermine sa valeur par un flow. Tu pourra ensuite récupérer sa valeur dans TileDash.

> [@Yoann\_PETITJEAN](#):
>
> J’aimerais aussi rapatrier les données des insights pour les placer dans des graphs… Si t’as des pistes pour ceci ca m’intéresse.

J’ai déjà commencé à travailler sur ce point. Il est possible de récupérer les valeurs comme ceci:

```auto
/*
heure = lastHour
6h = last6Hours
24h = last24Hours
7j = last7Days
14j = last14Days
31j = last31Days
*/

const deviceId = 'ID_du_device'; //Renseigne l'ID du device dont tu souhaites récupérer ses différentes valeurs
const capabilityID = 'measure_temperature'; // capabilityID à récupérer
const resolution = 'last7Days'// Ici la plage souhaité. last7Days donnera les valeurs sur les 7 derniers jours
const target = 'homey:device:'+ deviceId;

const device = await Homey.devices.getDevice({ id: deviceId });
const deviceInsight = device.insights;
const insightCapability = deviceInsight.find(insight => insight.id === capabilityID); 

const json = {
  uri: target,
  id: capabilityID,
  type: 'number',
  title: 'Température',
  titleTrue: null,
  titleFalse: null,
  units: '°C',
  decimals: 2,
  resolution: resolution
};

//log(deviceInsight);
log("\n====================")
//log(insightCapability);

const insightLog = await Homey.insights.getLogEntries(insightCapability);
const jsonInsight = await Homey.insights.getLogEntries(json);

//log(insightLog);
//log((insightLog.values).length)
log(jsonInsight);

```

J’ai prévu une petite mise à jour d’ici quelque temps pour:

- l’ajout de flow dans le header
- rechargement lorsque TileDash reviens en avant plan (principalement utile sur smartphone)

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [April 10, 2024, 5:22am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/9 "2024-04-10T05:22:04Z")

</div>

Bonjour ,

> [@sebyldino](#):
>
> Qu’entends tu pars là? Chaque icone est lié vers un autre TileDash en quelque sorte?  
> Il serai possible de créer un `<div>` pour chaque page et des les afficher suivant l’icone cliquée et les autres masquées. Ainsi l’ensemble est chargé 1 seul fois et on clique sur les icones pour naviguer.

Oui effectivement, chaque icone en bas est un bouton vers une page HTML, chargeant un TileDash différent. J’ai essayé avec un rechargement uniquement du body avec du JS + XML mais je suis trop débutant pour y arriver comme ca visiblement. De plus, ma page avec les caméras n’est pas un TileDash, car ce sont en fait des snap et actuellement j’ai un rafraichissement de chaque snap de caméra toute les secondes. Je n’y suis arrivé qu’en HTML pur.

> [@sebyldino](#):
>
> > [@Yoann\_PETITJEAN](#):
> >
> > Je bloque sur plusieurs petits trucs pour le moment … (Des soucis avec le CORS policy lorsque je fais des requêtes dans mes scripts, par exemple pour le jour tempo…)
> 
> Je pense que le problème viendrai de requête http vers https? Tu pourrais peut être créer un tag ou un device virtuel dont tu détermine sa valeur par un flow. Tu pourra ensuite récupérer sa valeur dans TileDash.

Je crois (d’après ce que j’ai compris en me renseignant) qu’il faudrait que je fasse la requête via un serveur proxy pour que cela fonctionne (ma page est actuellement hébergée sur un NAS. il me faudrait donc installer un serveur proxy dessus)  
(Source : [Tutoriel vidéo HTTP : Comprendre CORS | Grafikart](https://grafikart.fr/tutoriels/cors-http-navigateur-1180) , en bas de page : proxy obligé visiblement)

Par contre, j’ai bien récupéré dans un script Homey les infos TEMPO loguées dans des tags.(d’après un post auquel tu avais répondu et aidé d’ailleurs, merci 😉) Bizarrement je ne trouve nulle part ces tags, pour voir si le script fonctionne. Je viens de EEdomus, et le passage à Homey est assez violent, je ne retrouve pas mes petits 😅

Comme je découvre un peu tout d’un coup, j’avoue que je m’éparpille un peu aussi. Pour récapituler, voila ce que j’ai modifié dans tes sources :

- Création d’une tuile “Climatisation.js” basée sur Thermostat, avec les fonctionnalités vues ci-dessus
- Modification de “sensor.js” pour y ajouter la couleur de chaque icone séparément (donc ajout d’un paramètre _color_ et _secondColor_ dans l’objet items du dashboard
- Modification du CSS pour personnalisation
- Création d’un “IPCamPopup.js” basé sur “popup.js” pour y inclure un snap de caméra. Ca fonctionne, et j’essayerai d’y ajouter un rafraichissement du snap. Je me disais d’ailleurs que je pourrais peut être utiliser “image.js” comme base pour afficher un roll sur mes caméras en page d’accueil
- Evidemment adaptation du “tiledash.app.js” en conséquence.

Concernant les insight, merci pour le code, je vais regarder comment ca foncitonne.

Au fait, tu n’aurais pas les js “athom-api.min.js” et “moment.min.js” en version non compressée ? Ca me permettrait d’essayer de résoudre l’erreur de connexion  
Merci encore en tout cas !  
Si je peux donner un coup de main pour faire de la basse besogne, n’hésite pas.

---

<div class="post-metadata">

**Author:** ![Yoann\_PETITJEAN](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/yoann_petitjean/32/104736_2.png) [@Yoann\_PETITJEAN](https://community.homey.app/u/Yoann_PETITJEAN)\
**Post date:** [April 11, 2024, 5:10am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/10 "2024-04-11T05:10:03Z")

</div>

> [@sebyldino](#):
>
> > [@Yoann\_PETITJEAN](#):
> >
> > Malheureusement, pour le moment, j’ai autant de pages HTML que d’icones en bas.
> 
> Qu’entends tu pars là? Chaque icone est lié vers un autre TileDash en quelque sorte?  
> Il serai possible de créer un `<div>` pour chaque page et des les afficher suivant l’icone cliquée et les autres masquées. Ainsi l’ensemble est chargé 1 seul fois et on clique sur les icones pour naviguer.

Re !

J’ai entrepris de faire des modifications pour tout charger d’un coup !

- J’ai changé le dashbord.js en dashboard\_div.js dans lequel l’objet dashboard est devenu dashboardS, un genre de tableau de dashboard ayant chacun un div\_id

```auto
const dashboards = [
  {
    div_id: "Accueil",
    dashboard: [
      {
        title: "Météo",
	width: 4,
	height: 5,
	items: [
	    {
		position: [0,0],
		type: "SENSOR",
		width: 2,
              // etc ....
           },
      },
      {
        title: "Thermostats",
        // ... etc ...
      },
      // ... autres tuiles ...
    ]
  },
  {
    div_id: "Ouvrants",
    dashboard: [
      {
        title: "Tests",
        // ... etc ...
      },
      // ... autres tuiles ...
    ]
  },
  // ... autres tableaux de bord ...
];

```

- j’ai changé le tiledash.app.js pour faire un forEach sur les dashboards

```auto
    ////========== Create each group in each page (group in dashboards.js) ==========
	
dashboards.forEach(db => {
  var div = document.createElement("div");
  div.id = db.div_id;
  document.body.appendChild(div);
	
    db.dashboard.forEach(function (group, index) {
//... le reste de ton code ...
    });//END create group
}); //END Create each page for group

```

- il me reste à modifier tous les .js dans le dossier de type…

C’est bien ce que tu voulais dire par créer des `<div>` ?  
Parce que j’ai essayé autrement, mais je me retrouvais toujours avec plusieurs dashboard.js et plusieurs tiledash.app.js…  
Bon après je découvre un peu le javascript et le HTML au fur à mesure …

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [April 12, 2024, 12:24pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/11 "2024-04-12T12:24:50Z")

</div>

Salut Yoann,

Oui l’idée c’est ça, de créer des pages dans le dashboard.js.  
C’était un des points d’amélioration que j’avais en tête.

Avec le retour des beaux jours je suis plutôt dans le jardin que sur le PC désolé.

Mais ta mise en forme du dashboard.js me parait cohérente, tu redéfinis bien un tableau pour chaque “sous dashboard” que tu viens bien chercher avec une boucle `forEach` dans le tiledash.app.js.

> [@Yoann\_PETITJEAN](#):
>
> Au fait, tu n’aurais pas les js “athom-api.min.js” et “moment.min.js” en version non compressée ?

J’ai oublié de te répondre la dessus, j’ai récupéré tous les fichiers [ici](https://github.com/athombv/homey.ink), ces 2 la n’ont pas été modifiés pour TileDash.

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [June 11, 2024, 10:20am UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/12 "2024-06-11T10:20:59Z")

</div>

La [v0.4](https://github.com/sebyldino/TileDash/releases/tag/v0.4) est disponible.

#### Notes pour la v0.4

- Ajout des flows et advanced flows dans le header (a définir dans le dashboard.js)
- Ajout de la possibilité de désactiver le screenSaver sur mobile
- Rafraichissement de la page quand elle revient en avant plan sur mobile

 ![headerFlows](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/a/ea3224699f57b633fde1b84341b239af53e18fd5.jpeg)

![Gif flow mobile](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/c/4c859750f9873f0dae615e6fbc92b38424303e9f.gif)

---

<div class="post-metadata">

**Author:** ![sebyldino](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sebyldino/32/20067_2.png) [@sebyldino](https://community.homey.app/u/sebyldino)\
**Post date:** [November 20, 2024, 2:23pm UTC](https://community.homey.app/t/tiledash-dashboard-pour-homey/101630/13 "2024-11-20T14:23:11Z")

</div>

[v0.5](https://github.com/sebyldino/TileDash/tree/v0.5?tab=readme-ov-file) disponible

- Ajout de pages
- Ajout type GAUGE
- Ajout de 2 thème: smooth-light et smooth-dark
- Ajout de variables dans les css pour personnalisation plus facile (voir ‘:root’ dans chaque css)
- Ajustement des slider
- Ajustement de la vue mobile
- Ajustement de certain style css
- Possibilité de définir le token dans le fichier dashboard.js
- Le nom de groupe est maintenant optionnel

 ![Capture d'écran 2024-11-20 151127](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/a/9abd7397b8ef3fc0f2de0d387c9bb514d03b93a0.jpeg)

 ![Capture d'écran 2024-11-20 150951](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/8/1800af50d0c8db084abc3ded751fc7056abde6b9.jpeg)