TileDash - Dashboard pour Homey

đŸ‡«đŸ‡· Français (French)
1


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

Le github est lĂ , et j’ai Ă©galement crĂ©Ă© TileDash tool pour une configuration plus facile.


3 Likes
2

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

:+1:

1 Like
3

Bonjour,
Merci.

Pour la connexion, j’utilise la mĂ©thode Homeydash, 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)

4

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

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


1 Like
5

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

6

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
TileDash745×504 99.7 KB

1 Like
7

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

8

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.

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.

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

/*
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)
9

Bonjour ,

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.

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 , 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 :wink:) 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 :sweat_smile:

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.

1 Like
10

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
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
    ////==========    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 


11

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.

J’ai oubliĂ© de te rĂ©pondre la dessus, j’ai rĂ©cupĂ©rĂ© tous les fichiers ici, ces 2 la n’ont pas Ă©tĂ© modifiĂ©s pour TileDash.

12

La 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
headerFlows1920×130 30.7 KB

Gif flow mobile