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.