Picture element card, vaste sujet, mes pistes de recherche, voir les solutions qui me conviennent

freetronic · Janvier 6, 2026, 2:26

Re,

Nouveau challenge ? en tout local sur un pi4 de test avec un vieux fichier qui trainait, (je n’ai pas retrouvé le bon pour le moment …

je doute de le faire, mais j’aime bien l’idée

cdt

Pulpy-Luke · Janvier 6, 2026, 2:30

Salut

J’avais réfléchi à ça à un moment aussi, mais niveau manipulation c’est pas aussi souple (ou trop) et sur un petit écran il faut pas de gros doigts

freetronic · Janvier 6, 2026, 3:35

Hello,

Pour le moment je me heurte surtout à la transparence du rendu 3D et je m’y casse les dents j’ai pourtant simplifié au max …

si je ne trouve pas je mettrais mon code

cdt

freetronic · Janvier 7, 2026, 10:56

Re,

Bon ben j’ai trouvé, je pensais que le soucis c’était le code, mais le soucis c’est le navigateur ( firefox )…

firefox

edge

Bref je trouve pas (et vu que je veux conserver firefox, on va en rester là).
Si quelqu’un à une idée lumineuse je prend, sinon je stoppe la recherche. J’ai tenté un tas d’approches…

      - type: custom:mod-card
        style:
          left: 50%
          top: 50%
          transform: translate(-50%, -50%)
          width: 1000px
          height: 80%
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              border: none !important;
              box-shadow: none !important;
            }
        card:
          type: vertical-stack
          cards:
            - type: iframe
              aspect_ratio: 100%
              url: /local/3d_view/index.html
              style:
                top: 55.3%
                left: 53.2%
                width: 80.5%
                height: 80%
                z-index: 10
                filter: opacity(0.999);
              card_mod:
                style: |
                  ha-card {
                    background: none transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                  }
                  iframe {
                    background: transparent !important;
                  }
                  :host {
                    --ha-card-background: transparent !important;
                  }

pas très propre et blindé en transparence

<!DOCTYPE html>
<html lang="fr" style="background: transparent;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test 3D</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html { 
            width: 100%; 
            height: 100%; 
            background: transparent !important;
            overflow: hidden;
        }
        model-viewer {
            width: 100%;
            height: 100%;
            display: block;
            --poster-color: transparent;
            --progress-bar-color: transparent;
        }
        /* Forcer la transparence du canvas WebGL */
        model-viewer > canvas {
            background: transparent !important;
        }
    </style>
</head>
<body>
    <model-viewer
        src="plan.glb"
        camera-controls
        auto-rotate
        exposure="1"
        shadow-intensity="1"
        tone-mapping="neutral"
        alt="Plan 3D">
    </model-viewer>
    
    <script>
        // Forcer la transparence du canvas après le chargement
        document.addEventListener('DOMContentLoaded', function() {
            const viewer = document.querySelector('model-viewer');
            viewer.addEventListener('load', function() {
                // Tenter de forcer l'alpha sur le contexte WebGL
                const canvas = viewer.shadowRoot.querySelector('canvas');
                if (canvas) {
                    canvas.style.background = 'transparent';
                }
            });
        });
    </script>
</body>
</html>

cdt

freetronic · Janvier 8, 2026, 1:10

Re,

J’ai revu la partie météo, je ne savais pas trop quoi mettre en bas à droite hors la carte lune que je vois en live sur le plan, du coup j’ai mis l’ISS