Transformer SVG en slider
Bonjour,
je cherche rendre interactif un svg généré en javascript. Je n'y arrive pas et je ne suis pas sur d'adopté la bonne stratégie pour y parvenir.
Pouvez vous m'aidez un peu?
voici mon code d'essais:
Code:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<main>
<table border="1px">
<td>
<table>
<tr>
<td>
<label for="cons">Gauge Consigne</label>
</td>
</tr>
<tr>
<td>
<input id="cons" type="number" value="0" min="0" max="360"/>
</td>
</tr>
<tr>
<td>
<input id="slide" type="range" value="0" min="0" max="360"/>
</td>
</tr>
</table>
</td>
<td id="gauge_svg" width=300px height=300px>
</td>
</table>
<style>
.line {
stroke: #bfbfbf;
stroke-width: 1;
fill: none;
}
.gauge-ring {
stroke: #EBEBEB;
}
</style>
<script>
class gauge {
constructor({id = "gauge_svg"}){
this.container=document.getElementById(id)
this.container.innerHTML = /*html*/`
<input class="gauge-slide" type="hidden" value="0" min="0" max="360" />
<svg id="gauge-container" width="100%" height="100%" viewBox="0 0 100 100">
<g transform="translate(50 50)" transform-origin= 50 50 >
<rect x="-50" y="-50" width="100" height="100" style="fill:lemonchiffon;stroke:slategray;stroke-width:1px;"/>
<line class="gauge-needleCons" x1="0" y1="40" x2="0" y2="45" />
<circle class="gauge-centre" cx="0" cy="0" r="5" fill="#eee" stroke="#ccc" stroke-width="0.1 " ></circle>
<circle class="gauge-ring" cx="0" cy="0" r="40" fill="transparent" stroke-width="3.5"></circle>
<g class="ori">
<g class="gaugeG" transform="translate(0 40)" transform-origin= 0 40 >
<circle class="gauge-bullCons" cx="0" cy="0" r="10" fill="#eee" stroke="#ccc" stroke-width="0.1 " ></circle>
<text class="gauge-cons-text" x="0" y="0" stroke-width="0.5" font-size=" 0.5em" text-align= "center" text-anchor= "middle" >
<tspan class="gauge-consLabel"></tspan>
</text>
</g>
</g>
</g>
</svg>
</input>
`
this.containerSVG=this.container.querySelector("svg")
this.bullCons = this.containerSVG.querySelector(".gauge-bullCons")
this.consLabel = this.containerSVG.querySelector(".gauge-consLabel")
this.gaugeconstext = this.containerSVG.querySelector(".gauge-cons-text")
this.gaugeG = this.containerSVG.querySelector(".gaugeG")
this.ori = this.containerSVG.querySelector(".ori")
this.slide = this.container.querySelector(".gauge-slide")
// this.slide.addEventListener("mousedown",this.mouse())
this.slide.mousedown = e => this.mouse()
this.indice=0
}
mouse(){
this.indice++
console.log('val:',this.indice)
this.slide.mousemove = e => {this.ctrl(event.currentTarget.value);console.log(value);}
}
ctrl(value){
this.bullCons.style.transform = `rotate(${value}deg)`
this.consLabel.innerHTML=value
this.ori.style.transform = `
rotate(${value}deg)
`;
this.gaugeconstext.style.transform = `
rotate(${-value}deg)
`;
}
}
let gauge_di = {};//Dictionnaire des instances
gauge_di[1] = new gauge({id : "gauge_svg"})
window.onload = function () {
const container = document.querySelector("#gauge-container");
const bullCons = container.querySelector(".gauge-bullCons");
const consLabel = container.querySelector(".gauge-consLabel");
const gaugeconstext = container.querySelector(".gauge-cons-text");
const gaugeG = container.querySelector(".gaugeG");
const ori = container.querySelector(".ori");
document.querySelector("#cons").addEventListener("change", event => {
gauge_di[1].ctrl(event.currentTarget.value)
});
document.querySelector("#slide").addEventListener("mousedown", event => {
document.querySelector("#slide").addEventListener("mousemove", event => {
gauge_di[1].ctrl(event.currentTarget.value)
});
});
}
</script>
</main>
<footer></footer>
</body>
</html> |
Mon but est de pouvoir cliqué sur le cercle et de modifié la valeur en glissant comme le slidder existant a coté.
J'ai essayé de créé une balise input encadrant le svg, mais j'ai des doute sur cet stratégie. Quel est la bonne Méthode?
J'ai également des problèmes avec la gestion des event: la ligne 80 :
Code:
this.slide.mousedown = e => this.mouse()
n'active pas la methode mouse comme je le souhaite.
En vous remerciant pour le temps que vous m'accorder.
