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%)`

Gestion de rectangles par CANVAS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager