0 Votes

News

Version 1.1 par john le 2026/09/26 16:33

Page secondaire news, définie dans news.yml. Elle regroupe des informations qui changent en continu : capteurs du Pico W, image astronomique du jour, flux RSS, vols d'un aéroport, actualités, cours et portefeuilles de cryptomonnaies. Configuration commune et déploiement : Dashy.

En-tête et navigation

pageInfo:
 title: News
 description: Some RSS feed
 navLinks:
    - title: Home
     path: /
pages:
  - name: bookmarks
   path: bookmark.yml
  - name: cpu
   path: cpu.yml
  - name: news
   path: news.yml

Sections

SectionIcôneItemsWidgetsAffichage
IoT — Pico Whl-raspberry-piPico Wembedrows: 2
NASAhl-nasa—apod—
Debian CVEhl-debian-linux—rss-feed—
Aeroporthl-flightaware—flight-data—
Newsfad fa-newspaper—rss-feedrepliée (collapsed: true)
Mediashl-youtube—news-headlinesrepliée (collapsed: true)
Crypto markethl-bitcoin—crypto-watch-list—
Binance Walletshl-gollum—wallet-balancerows: 2, cols: 2
Uphold Walletsfavicon distant (URL complète)—wallet-balancerows: 2, cols: 2

Les sections Debian CVE et Aeroport portent useProxy: true au niveau de la section : Dashy ne le lit pas à cet endroit, leurs widgets appellent donc leur API directement depuis le navigateur.

Item

      - title: Pico W
       description: Interface Web LED + État
       icon: hl-raspberry-pi
       url: http://<IP_PICO>
       statusCheck: true

La vérification d'état est faite par le serveur de Dashy, qui doit pouvoir joindre <IP_PICO> depuis le conteneur. Le lien ne fonctionne que depuis le LAN ; l'interface du Pico est aussi relayée par SWAG sous /pico/ sur le domaine de Dashy, derrière Authelia.

Widgets

embed (capteurs du Pico W)

Widget HTML libre : Dashy injecte le HTML, le CSS et le script fournis. Ici, le script lit toutes les 30 secondes l'API JSON du Pico W (température, humidité, pression, altitude) et affiche quatre cartes.

      - type: embed
       options:
         html: |
           <div id="pico-widget">
             <div id="pico-content">
               <p style="text-align:center;color:#888;">Chargement…</p>
             </div>
           </div>
         css: |
           #pico-widget { font-family: sans-serif; color: #e0e0e0; padding: 8px 4px; }
           #pico-widget .pico-grid { display: flex; gap: 12px; justify-content: space-around; flex-wrap: wrap; }
           #pico-widget .pico-card { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 18px; text-align: center; min-width: 90px; flex: 1; }
           #pico-widget .pico-icon { font-size: 1.8em; margin-bottom: 6px; }
           #pico-widget .pico-value { font-size: 1.5em; font-weight: bold; color: #fff; }
           #pico-widget .pico-label { font-size: 0.72em; color: #aaa; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
           #pico-widget .pico-footer { text-align: center; font-size: 0.68em; color: #666; margin-top: 10px; }
           #pico-widget .pico-error { color: #ff6b6b; text-align: center; padding: 10px; font-size: 0.85em; }
         script: |
           (function() {
             var API = 'http://<IP_PICO>/api';
             function getColor(t) {
               if (t < 10) return '#74b9ff';
               if (t < 20) return '#55efc4';
               if (t < 27) return '#fdcb6e';
               return '#ff7675';
             }
             function render(d) {
               var now = new Date().toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit',second:'2-digit'});
               document.getElementById('pico-content').innerHTML =
                 '<div class="pico-grid">' +
                   '<div class="pico-card"><div class="pico-icon">🌡️</div>' +
                     '<div class="pico-value" style="color:' + getColor(d.temperature) + '">' + d.temperature.toFixed(1) + '°C</div>' +
                     '<div class="pico-label">Température</div></div>' +
                   '<div class="pico-card"><div class="pico-icon">💧</div>' +
                     '<div class="pico-value">' + d.humidity.toFixed(1) + '%</div>' +
                     '<div class="pico-label">Humidité</div></div>' +
                   '<div class="pico-card"><div class="pico-icon">🔵</div>' +
                     '<div class="pico-value">' + d.pressure.toFixed(1) + '</div>' +
                     '<div class="pico-label">Pression hPa</div></div>' +
                   '<div class="pico-card"><div class="pico-icon">⛰️</div>' +
                     '<div class="pico-value">' + d.altitude.toFixed(1) + ' m</div>' +
                     '<div class="pico-label">Altitude</div></div>' +
                 '</div>' +
                 '<div class="pico-footer">Mis à jour à ' + now + '</div>';
             }
             function fetchData() {
               fetch('/cors-proxy', { headers: { 'Target-URL': API } })
                 .then(function(r) { return r.json(); })
                 .then(render)
                 .catch(function() {
                   document.getElementById('pico-content').innerHTML =
                     '<p class="pico-error">⚠️ Impossible de joindre le Pico</p>';
                 });
             }
             fetchData();
             setInterval(fetchData, 30000);
           })();
  • Le script appelle lui-même /cors-proxy avec l'en-tête Target-URL : la page Dashy est en https et le Pico en http sur le LAN, un appel direct serait bloqué (contenu mixte et CORS). Derrière SWAG, <IP_PICO> doit figurer dans allowed_internal.
  • L'API du Pico doit renvoyer un objet JSON avec les champs numériques temperature, humidity, pressure et altitude.
  • Aucun identifiant.

apod

Affiche l'image astronomique du jour de la NASA, avec son titre et sa description. Ni option ni identifiant.

      - type: apod

rss-feed

Affiche les derniers articles d'un flux RSS, converti en JSON par le service rss2json. Utilisé pour les avis de sécurité Debian et pour un site d'actualité Ubuntu.

      - type: rss-feed
       options:
         rssUrl: <URL_FLUX_RSS>
         limit: 2
  • rssUrl : adresse du flux (pour les avis de sécurité Debian : le flux DSA du site Debian).
  • limit : nombre d'articles affichés.
  • Aucun identifiant : rss2json est utilisé en accès gratuit, avec un nombre de requêtes limité.

flight-data

Affiche les prochains départs et arrivées d'un aéroport, via l'API AeroDataBox distribuée par RapidAPI.

      - type: flight-data
       options:
         airport: <CODE_OACI>
         apiKey: <CLE_API_RAPIDAPI>
         limit: 12
         direction: all
  • airport : code OACI à quatre lettres de l'aéroport.
  • direction : all, departure ou arrival.
  • limit : nombre de vols affichés.
  • apiKey : clé RapidAPI. Créer un compte sur RapidAPI, s'abonner à l'API AeroDataBox (offre gratuite, quota mensuel limité), puis copier la clé X-RapidAPI-Key de l'application par défaut. Elle est commune à toutes les API RapidAPI du compte.
  • La clé est envoyée dans l'en-tête x-rapidapi-key. Le proxy de SWAG ne relaie pas cet en-tête : ne pas mettre ce widget en useProxy: true derrière SWAG sans l'ajouter au bloc Lua. Dans la configuration actuelle, l'appel part directement du navigateur.

news-headlines

Affiche les derniers titres d'actualité d'un pays et d'une langue, via Currents API.

      - type: news-headlines
       useProxy: true
       options:
         lang: fr
         country: FR
         count: 2
         apiKey: <CLE_API_CURRENTS>
  • lang / country : langue et pays des articles.
  • count : nombre de titres affichés.
  • apiKey : clé Currents API, obtenue en créant un compte gratuit sur le site de Currents API, puis copiée depuis son tableau de bord. Quota quotidien limité.
  • La clé passe dans l'adresse de la requête (paramètre apiKey) : elle traverse le proxy de SWAG sans réglage particulier.

crypto-watch-list

Affiche le cours, la variation et la capitalisation d'une liste de cryptomonnaies, via l'API publique CoinGecko. Aucun identifiant.

      - type: crypto-watch-list
       options:
         currency: EUR
         assets:
            - ethereum
            - bnb
            - basic-attention-token
  • assets : identifiants CoinGecko des monnaies, tels qu'ils apparaissent dans l'adresse de leur page sur CoinGecko (pas le symbole boursier).
  • currency : devise d'affichage.

wallet-balance

Affiche le solde et les dernières transactions d'une adresse de portefeuille, via l'API publique BlockCypher. Utilisé deux fois, une adresse par section.

      - type: wallet-balance
       options:
         coin: eth
         network: main
         address: '<ADRESSE_WALLET>'
  • coin / network : chaîne interrogée (eth sur le réseau principal).
  • address : adresse publique du portefeuille, entre guillemets pour qu'elle reste une chaîne. Ce n'est pas un secret d'accès, mais elle relie le tableau de bord aux fonds et à l'historique du portefeuille : une donnée personnelle, à ne pas publier.