Gestion de rectangles par CANVAS

**mormic** · 25/10/2023, 10h57

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let vn = "";
canvas = document.getElementById(vn);

Merci d'une aide éclairée.

**SpaceFrog** · 25/10/2023, 13h32

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/

**mormic** · 25/10/2023, 15h08

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

et

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**SpaceFrog** · 25/10/2023, 15h55

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/

**ASCIIDEFOND** · 25/10/2023, 17h20

Salut à tous,

Ou alors ?

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mormic** · 25/10/2023, 19h50

merci SpaceFrog mais avec

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
           canvasselet = bouton.parentElement.firstChild 
canvasselet.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`

**ASCIIDEFOND** · 25/10/2023, 22h02

Envoyé par mormic

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**SpaceFrog** · 26/10/2023, 08h15

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

)

**mormic** · 26/10/2023, 12h17

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

**mormic** · 27/10/2023, 12h04

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**ASCIIDEFOND** · 27/10/2023, 16h47

Salut mormic,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>`;
}
...

**mormic** · 27/10/2023, 18h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**ASCIIDEFOND** · 27/10/2023, 19h13

Et en simplifiant un peu comme ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mormic** · 28/10/2023, 12h01

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.
Nom : Capture.PNG
Affichages : 46
Taille : 27,9 Ko

Nom : Capture.PNG
Affichages : 46
Taille : 27,9 Ko

Gestion de rectangles par CANVAS

JavaScript

Discussions similaires

Partager

Partager