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 : 70
Taille : 27,9 Ko

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

Gestion de rectangles par CANVAS

JavaScript

Discussions similaires

Partager

Partager