Discussion :

[mormic]

bonjour à tous
je souhaite afficher dans une page HTML l'état de 2 interrupteurs:

Pour cela j'ai tenté ce qui suit:
HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
    <div id="divCanvas1">
        <canvas class="inter" id="inter11"></canvas>
        <br>
        <canvas class="inter"id="inter12"></canvas>
    </div>
    <div id="divCanvas2">
        <canvas class="inter" id="inter21"></canvas>
        <br>
        <canvas class="inter" id="inter22"></canvas>
    </div>

CSS

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
17
18
19
20
21
22
23
#divCanvas1{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 650px;
}
#divCanvas2{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 700px;
}
.inter{
  width: 25px;
  height: 25px;
  margin: 3px;
}
#inter11, #inter21{
  border: 1px solid red;
}
#inter12, #inter22{
  border: 1px solid green;
}

JS

Code :

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
function chargeEtatInterBase(){
    const i11=document.getElementById("inter11");
    const i12=document.getElementById("inter12");
    const i21=document.getElementById("inter21");
    const i22=document.getElementById("inter22");
    const ctxI11=i11.getContext("2d");
    const ctxI12=i12.getContext("2d");
    const ctxI21=i21.getContext("2d");
    const ctxI22=i22.getContext("2d");
    ctxI11.fillStyle="red";
    ctxI11.fillRect(1,1,300,300);
    ctxI11.font= "100px Arial";
    ctxI11.fillText("ON",50,80);
    ctxI22.fillStyle="green";
    ctxI22.fillRect(1,1,300,300);
    ctxI22.font= "100px Arial";
    ctxI22.fillText("OF",50,80);
}

Je ne vois pas apparaître le texte "ON" "OF".
Je pense qu'il y a moyen d'améliorer la chose pour faire plus simple.
Si quelqu'un pouvait me filer un petit coup de main.
Merci.

[mormic]

Bonjour,
En relisant les infos sur le "canvas" je me suis rendu compte que je n'avais pas compris le fonctionnement. Je crois maintenant avoir cerné le sujet; alors si cela vous intéresse voici ma solution:
HTML

Code html :

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

1
2
    <canvas id="inter1" width="35px" height="60px"></canvas>
    <canvas id="inter2" width="35px" height="60px"></canvas>

CSS

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#inter1{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 700px;
}
#inter2{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 740px;
}

JS

Code :

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
let alt=false;
const i1=document.getElementById("inter1");
const i2=document.getElementById("inter2");
const ctxI1=i1.getContext("2d");
const ctxI2=i2.getContext("2d");
function chargeEtatInterBase(){
    ctxI1.fillStyle="green";
    ctxI1.fillRect(5,30,25,25);
    ctxI2.fillStyle="green";
    ctxI2.fillRect(5,30,25,25);
    ctxI1.font = "12px Arial";    
    setInterval(actionInter,500);
}
function actionInter(){
    if(alt){
        ctxI1.clearRect(5,30,25,25);
        ctxI1.fillStyle="red";
        ctxI1.fillRect(5,5,25,25);
        ctxI1.fillStyle="black";
        ctxI1.fillText("ON",10,20);
        alt=false;
    }
    else{
        ctxI1.clearRect(5,5,25,25);
        ctxI1.fillStyle="green";
        ctxI1.fillRect(5,30,25,25);
        ctxI1.fillStyle="black";
        ctxI1.fillText("OF",10,47);
        alt=true;
    }
}

j'ai fait une petite animation pour montrer le fonctionnement.
Il y a surement moyen d'améliorer ce code. Mais cela fonctionne.
Merci à ceux aux lecteurs.

[NoSmoking]

Bonjour,

Il y a surement moyen d'améliorer ce code.

Pourquoi passer par des éléments <canvas> quand cela se gère simplement en HTML-CSS avec plus de souplesse ?

Mais cela fonctionne.

c'est ce qui compte avant tout !