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

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 …

1

1

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

cdt

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

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 :sweat_smile:

cdt

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

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 :slight_smile:

cdt

Re,

Du coup après l’ISS je viens d’enchainer

on installe l’intégration

on mélange bien les entités et les attributs et on met tout dans une button card

et 15 min (réglable) avant un launch

1

et mise en test de meteocss II le retour :smiley:

cdt