Gestion de rectangles par CANVAS

Version imprimable

Bonjour
J'ai besoin de positionner 9 rectangles sur ma page HTML puis de les contrôler en JS après réception d'infos du serveur.
L'idée est de refléter à l'intérieur de chaque rectangle l'état d'ouverture de volets (ex 20%, 60%, fermeture,...)
Il me faut aussi les repérer (ex volet cuisine, salle,....)
J'ai trouver une solution pour les afficher sur ma page HTML de base:
Code:

1 2 3 4 5 6 7 8 9 <canvas id="v1" width="50" height="100"></canvas> <canvas id="v2" width="50" height="100"></canvas> <canvas id="v3" width="50" height="100"></canvas> <canvas id="v4" width="50" height="100"></canvas> <canvas id="v5" width="50" height="100"></canvas> <canvas id="v6" width="50" height="100"></canvas> <canvas id="v7" width="50" height="100"></canvas> <canvas id="v8" width="50" height="100"></canvas> <canvas id="v9" width="50" height="100"></canvas>
J'ai bien compris que tout le contrôle doit se faire par JS.
Mais, est-il possible de contrôler individuellement chaque rectangle en mettant une variable, par exemple:
Code:

1 2 let vn = ""; canvas = document.getElementById(vn);
Merci d'une aide éclairée.

25/10/2023, 13h32
SpaceFrog

C'est bien compliqué ...
Perso je serai passé par des divs imbriqués en gérant le width
https://jsfiddle.net/6hbdfy2o/

Pour des gaines circulaires ^^ : https://jsfiddle.net/6hbdfy2o/1/

oui en effet c'est très compliqué.
Alors je tente comme vous le préconisé, une autre solution:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
        <div id="tableau">
            <table>
                <caption>Etat des volets</caption>
                <tr>
                    <th>v1</th>
                    <th>v2</th>
                    <th>v3</th>
                    <th>v4</th>
                    <th>v5</th>
                    <th>v6</th>
                    <th>v7</th>
                    <th>v8</th>
                    <th>v9</th>
                </tr>
                <tr id="vol">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table{
  border-collapse: separate;
  border-spacing: 20px;
}
td, th{
  border: 1px solid black;
  padding: 10px;
}
#tableau{
  display: flex;
  justify-content: center;
  margin: auto;
}
td{
  height: 60px;
}

Mais c'est encore compliqué car comment remplir les cellules d'une couleur en fonction du pourcentage d'ouverture??

Et puis une remarque sur le centrage du tableau sur la page: avant c'était simple de le faire avec <table align="center"> mais ce n'est pas dans les règles. Il faut passer par CSS et là cela devient aussi très compliqué! Pouquoi ce cas de figure n'a pas été prévu simplement?

25/10/2023, 15h55
SpaceFrog

As tu été voir les liens proposés dans mon post précédent ...

si tu préfères passer par un table ... tu peux tout de même utiliser le même principe avec des divs ...
https://jsfiddle.net/5n4c79xg/1

avec l'indication du pourcentage
https://jsfiddle.net/5n4c79xg/2/

Salut à tous,

Ou alors ?

Les nombres aléatoires représentent les infos du serveur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <style>
      .divCanvas {
        display: inline-block;
        margin: 10px 10px;
      }
 
      canvas {
        width: 50px;
        height: 100px;
        border: 1px solid #000000;
        background: gray;
      }
 
      button {
        display: block;
        width: 50px;
        height: 35px;
        cursor: pointer;
      }
    </style>
  </head>
 
  <body>
    <div id="container"></div>
 
    <script>
      var mescanvas = ''
 
      for (let i = 1; i < 10; i++) {
        let aleat = Math.floor(Math.random() * 100)
        mescanvas += `<div class="divCanvas"><canvas id="v${i}"></canvas><button>${aleat}%</button></div>`
      }
 
      document.getElementById('container').innerHTML = mescanvas
 
      for (const bouton of document.getElementsByTagName('button')) {
        bouton.addEventListener('click', () => {
          let pourcent = bouton.innerText,
            canvasselet = bouton.parentElement.firstChild
 
          canvasselet.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`
        })
      }
    </script>
  </body>
</html>

25/10/2023, 19h50
mormic
merci SpaceFrog mais avec

Citation:

avec l'indication du pourcentage
https://jsfiddle.net/5n4c79xg/2/

je n'ai que des tirets verts qui apparaissent et comme je ne comprends pas le JQuery, je n'arrive pas a débugger.

merci ASCIIFOND pour cet exemple qui correspond (sans les boutons) à ce que je voudrais faire. Par contre je ne comprends pas la syntaxe:
Code:

1 2 canvasselet = bouton.parentElement.firstChild canvasselet.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`
25/10/2023, 22h02
ASCIIDEFOND
Citation:
Envoyé par mormic

... Par contre je ne comprends pas la syntaxe:

Code:

1 2 canvasselet = bouton.parentElement.firstChild canvasselet.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`
On ajoute au style de la balise <canvas> sélectionnée un background-image.
Ce qui correspondra en HTML

Code:

<div id="v1" style="background-image: linear-gradient(to top, rgb(168, 235, 18) 23%, rgb(159, 156, 156) 0%);">23%</div>

Ici nous avons 23% du background de la balise <canvas> qui sera de couleur verte (#a8eb12 ou rgb(168, 235, 18)) et les 77% restant seront de couleur gray (rgb(159, 156, 156)) qui est d'ailleurs la couleur par défaut.
La symbole % pour la deuxième couleur est important sinon il y aura un effet gradient entre les deux couleurs.

Plus d'infos sur linear-gradient()
https://developer.mozilla.org/en-US/...inear-gradient
26/10/2023, 08h15
SpaceFrog

Citation:

je n'ai que des tirets verts qui apparaissent et comme je ne comprends pas le JQuery, je n'arrive pas a débugger.

Ce n'est pas niveau JQUERY que ça se passe
c'est niveau CSS ...
il te faut mettre un   dans le div et gérer sa hauteur ...

Sinon bien vi ASCIIDEFOND le fait de passer par le background radient te dispense même d'imbriquer des div, tu peux directement mettre le css sur les td...
https://jsfiddle.net/7juebsLz/

C'est très facilement convertible en JS pur sans JQUERY (c'est juste que je code beaucoup plus vite avec :oops:)
26/10/2023, 12h17
mormic

J'opte pour la solution de ASCIIFOND qui m'est plus facile à gérer.
J'ai eu un peu de mal à comprendre le chargement des balises HTML par JavaScript mais cela est intéressant.
Il me faut maintenant l'intégrer dans mon projet global en l'occurence lire un tableau qui contient l'état des volets et afficher le résultat sur réception du serveur.
Je vous remercie pour l'aide très riche que vous m'avez apportée.
Dès que cela fonctionnera, j'enverrai mon script.
Bien cordialement
Michel

Bonjour
je reviens vers vous pour une question subsidiaire.
Voici comment j'ai adapté le script:
Code:

1 2 3 4 5 6 7 8 9 10 let etatVol = [50,25,75,10,100,100,100,100,100]; let mescanvas = ''; for (let i = 1; i < 10; i++) { mescanvas += `<div class="divCanvas"><canvas id="v${i}"></canvas><span>${etatVol[i-1]}%</span></div>`; } document.getElementById('container').innerHTML = mescanvas; for (const taux of document.getElementsByTagName('span')) { let pourcent = taux.innerText, canvasselet = taux.parentElement.firstChild; canvasselet.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`; }
Il me suffit d'adapter un élément du tableau etatVol pour afficher le nouvel état des volets.
Ma question: est-il possible d'ajouter V1, V2,... au dessus de chaque rectangle?

Salut mormic,

En ajoutant une balise <span> et en englobant le tout dans une nouvelle balise <div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>...
        /* Seulement sur la première balise <span> --> nth-child(1) */      
        div span:nth-child(1) {
          display: inline-block;
          width: 100%;
          text-align: center;
          font-size: 40px;
        }</style>
...
for (let i = 1; i < 10; i++) {
    mescanvas += `<div><span>V${i}</span><div class="divCanvas"><canvas id="v${i}"></canvas><span>${etatVol[i-1]}%</span></div></div>`;
}
...

27/10/2023, 18h12
mormic
merci ASCIIDEFOND mais cela ne semble pas fonctionner: les rectangles se mettent verticalement et le label au dessus de chaque rectangle est: $V(i).
Le fait que j'ai déjà un span dans l'écriture n'est-ce pas source de confusion pour le style:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 span { display: block; width: 50px; height: 35px; cursor: pointer; } div span:nth-child(1) { display: inline-block; width: 100%; text-align: center; font-size: 40px; }
J'ai essayé d'ajouter des id sur chaque span, sans résultat.

Et en simplifiant un peu comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <style>
        .divParent {
            display: inline-block;
            margin: 10px 10px;
        }
 
        .divParent div {
            width: 50px;
            height: 100px;
            border: 1px solid #000000;
            background: gray;
            color: black;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }
 
        .divParent span {
            display: inline-block;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="container"></div>
    <script>
        let etatVol = [50, 25, 75, 10, 100, 10, 100, 100, 100], mescanvas = ''
 
        for (let i = 1; i < 10; i++) {
            //#1 - Affichage du pourcentage en bas dans une balise <span> 
            mescanvas += `<div class="divParent"><span>V${i}</span><div class="position" id="v${i}"></div><span>${etatVol[i - 1]}%</span></div>`
 
            //#2 - Affichage du pourcentage au centre
            //mescanvas += `<div class="divParent"><span>V${i}</span><div class="position" id="v${i}">${etatVol[i - 1]}%</div></div>`
        }
        document.getElementById('container').innerHTML = mescanvas
 
        for (const taux of document.getElementsByClassName('position')) {     
            let pourcent = taux.parentElement.lastChild.innerText
            taux.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`
        }
    </script>
</body>
 
</html>

Il y a deux solutions pour afficher le pourcentage.

28/10/2023, 12h01
mormic

1 pièce(s) jointe(s)

Super ASCIIDEFOND le résultat est exactement ce que j'espérais. Dommage que je n'ai pas trouvé la solution moi-même.
Mais tous ces conseils diffusés sur ces forums sont tellement bénéfiques pour l'apprentissage.
Merci encore pour cette aide.
Pièce jointe 645851