4117 </xsl:text> |
4117 </xsl:text> |
4118 <xsl:text> drag = false; |
4118 <xsl:text> drag = false; |
4119 </xsl:text> |
4119 </xsl:text> |
4120 <xsl:text> enTimer = false; |
4120 <xsl:text> enTimer = false; |
4121 </xsl:text> |
4121 </xsl:text> |
4122 <xsl:text> svg_dist = 0 |
|
4123 </xsl:text> |
|
4124 <xsl:text> |
4122 <xsl:text> |
4125 </xsl:text> |
4123 </xsl:text> |
4126 <xsl:text> dispatch(value) { |
4124 <xsl:text> dispatch(value) { |
4127 </xsl:text> |
4125 </xsl:text> |
4128 <xsl:text> if(this.value_elt) |
4126 <xsl:text> if(this.value_elt) |
4129 </xsl:text> |
4127 </xsl:text> |
4130 <xsl:text> this.value_elt.textContent = String(value); |
4128 <xsl:text> this.value_elt.textContent = String(value); |
4131 </xsl:text> |
4129 </xsl:text> |
4132 <xsl:text> |
4130 <xsl:text> |
4133 </xsl:text> |
4131 </xsl:text> |
4134 <xsl:text> this.handle_position(value); |
4132 <xsl:text> this.update_DOM(value, this.handle_elt); |
4135 </xsl:text> |
4133 </xsl:text> |
4136 <xsl:text> } |
4134 <xsl:text> |
4137 </xsl:text> |
4135 </xsl:text> |
4138 <xsl:text> |
4136 <xsl:text> } |
4139 </xsl:text> |
4137 </xsl:text> |
4140 <xsl:text> handle_position(value){ |
4138 <xsl:text> |
|
4139 </xsl:text> |
|
4140 <xsl:text> last_drag = false; |
|
4141 </xsl:text> |
|
4142 <xsl:text> |
|
4143 </xsl:text> |
|
4144 <xsl:text> update_DOM(value, elt){ |
4141 </xsl:text> |
4145 </xsl:text> |
4142 <xsl:text> let [min,max,start,totallength] = this.range; |
4146 <xsl:text> let [min,max,start,totallength] = this.range; |
4143 </xsl:text> |
4147 </xsl:text> |
4144 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
4148 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
4145 </xsl:text> |
4149 </xsl:text> |
4146 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
4150 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
4147 </xsl:text> |
4151 </xsl:text> |
4148 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
4152 <xsl:text> elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
|
4153 </xsl:text> |
|
4154 <xsl:text> |
|
4155 </xsl:text> |
|
4156 <xsl:text> if(this.setpoint_elt != undefined){ |
|
4157 </xsl:text> |
|
4158 <xsl:text> if(this.last_drag!= this.drag){ |
|
4159 </xsl:text> |
|
4160 <xsl:text> if(this.drag){ |
|
4161 </xsl:text> |
|
4162 <xsl:text> this.setpoint_elt.setAttribute("style", this.setpoint_style); |
|
4163 </xsl:text> |
|
4164 <xsl:text> }else{ |
|
4165 </xsl:text> |
|
4166 <xsl:text> this.setpoint_elt.setAttribute("style", "display:none"); |
|
4167 </xsl:text> |
|
4168 <xsl:text> } |
|
4169 </xsl:text> |
|
4170 <xsl:text> this.last_drag = this.drag; |
|
4171 </xsl:text> |
|
4172 <xsl:text> } |
|
4173 </xsl:text> |
|
4174 <xsl:text> } |
4149 </xsl:text> |
4175 </xsl:text> |
4150 <xsl:text> } |
4176 <xsl:text> } |
4151 </xsl:text> |
4177 </xsl:text> |
4152 <xsl:text> |
4178 <xsl:text> |
4153 </xsl:text> |
4179 </xsl:text> |
4154 <xsl:text> on_release(evt) { |
4180 <xsl:text> on_release(evt) { |
4155 </xsl:text> |
4181 </xsl:text> |
|
4182 <xsl:text> window.removeEventListener("touchmove", this.on_bound_drag, true); |
|
4183 </xsl:text> |
|
4184 <xsl:text> window.removeEventListener("mousemove", this.on_bound_drag, true); |
|
4185 </xsl:text> |
|
4186 <xsl:text> |
|
4187 </xsl:text> |
|
4188 <xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true) |
|
4189 </xsl:text> |
|
4190 <xsl:text> window.removeEventListener("touchend", this.bound_on_release, true); |
|
4191 </xsl:text> |
|
4192 <xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true); |
|
4193 </xsl:text> |
4156 <xsl:text> if(this.drag){ |
4194 <xsl:text> if(this.drag){ |
4157 </xsl:text> |
4195 </xsl:text> |
4158 <xsl:text> this.drag = false; |
4196 <xsl:text> this.drag = false; |
4159 </xsl:text> |
4197 </xsl:text> |
4160 <xsl:text> } |
4198 <xsl:text> } |
4161 </xsl:text> |
4199 </xsl:text> |
|
4200 <xsl:text> this.update_position(evt); |
|
4201 </xsl:text> |
|
4202 <xsl:text> } |
|
4203 </xsl:text> |
|
4204 <xsl:text> |
|
4205 </xsl:text> |
|
4206 <xsl:text> |
|
4207 </xsl:text> |
|
4208 <xsl:text> on_drag(evt){ |
|
4209 </xsl:text> |
|
4210 <xsl:text> if(this.enTimer && this.drag){ |
|
4211 </xsl:text> |
|
4212 <xsl:text> this.update_position(evt); |
|
4213 </xsl:text> |
|
4214 <xsl:text> //reset timer |
|
4215 </xsl:text> |
|
4216 <xsl:text> this.enTimer = false; |
|
4217 </xsl:text> |
|
4218 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
4219 </xsl:text> |
|
4220 <xsl:text> } |
|
4221 </xsl:text> |
4162 <xsl:text> } |
4222 <xsl:text> } |
4163 </xsl:text> |
4223 </xsl:text> |
4164 <xsl:text> |
4224 <xsl:text> |
4165 </xsl:text> |
4225 </xsl:text> |
4166 <xsl:text> update_position(evt){ |
4226 <xsl:text> update_position(evt){ |
4167 </xsl:text> |
4227 </xsl:text> |
4168 <xsl:text> if(this.drag){ |
4228 <xsl:text> var html_dist = 0; |
4169 </xsl:text> |
4229 </xsl:text> |
4170 <xsl:text> var html_dist = 0; |
4230 <xsl:text> |
4171 </xsl:text> |
4231 </xsl:text> |
4172 <xsl:text> |
4232 <xsl:text> //calculate size of widget in html |
4173 </xsl:text> |
4233 </xsl:text> |
4174 <xsl:text> //calculate size of widget in html |
4234 <xsl:text> var range_borders = this.range_elt.getBoundingClientRect(); |
4175 </xsl:text> |
4235 </xsl:text> |
4176 <xsl:text> var range_borders = this.range_elt.getBoundingClientRect(); |
4236 <xsl:text> var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
4177 </xsl:text> |
4237 </xsl:text> |
4178 <xsl:text> var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
4238 <xsl:text> var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
4179 </xsl:text> |
4239 </xsl:text> |
4180 <xsl:text> var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
4240 <xsl:text> |
4181 </xsl:text> |
4241 </xsl:text> |
4182 <xsl:text> |
4242 <xsl:text> //get range and mouse coordinates |
4183 </xsl:text> |
4243 </xsl:text> |
4184 <xsl:text> //get range and mouse coordinates |
4244 <xsl:text> var mouseX = undefined; |
4185 </xsl:text> |
4245 </xsl:text> |
4186 <xsl:text> var mouseX = undefined; |
4246 <xsl:text> var mouseY = undefined; |
4187 </xsl:text> |
4247 </xsl:text> |
4188 <xsl:text> var mouseY = undefined; |
4248 <xsl:text> if (evt.type.startsWith("touch")){ |
4189 </xsl:text> |
4249 </xsl:text> |
4190 <xsl:text> if (evt.type.startsWith("touch")){ |
4250 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
4191 </xsl:text> |
4251 </xsl:text> |
4192 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
4252 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
4193 </xsl:text> |
4253 </xsl:text> |
4194 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
4254 <xsl:text> } |
|
4255 </xsl:text> |
|
4256 <xsl:text> else{ |
|
4257 </xsl:text> |
|
4258 <xsl:text> mouseX = evt.pageX; |
|
4259 </xsl:text> |
|
4260 <xsl:text> mouseY = evt.pageY; |
|
4261 </xsl:text> |
|
4262 <xsl:text> } |
|
4263 </xsl:text> |
|
4264 <xsl:text> |
|
4265 </xsl:text> |
|
4266 <xsl:text> //get handle distance from mouse position |
|
4267 </xsl:text> |
|
4268 <xsl:text> if (minX > mouseX && minY < mouseY){ |
|
4269 </xsl:text> |
|
4270 <xsl:text> html_dist = 0; |
|
4271 </xsl:text> |
|
4272 <xsl:text> } |
|
4273 </xsl:text> |
|
4274 <xsl:text> else if (maxX < mouseX && maxY > mouseY){ |
|
4275 </xsl:text> |
|
4276 <xsl:text> html_dist = range_length; |
|
4277 </xsl:text> |
|
4278 <xsl:text> } |
|
4279 </xsl:text> |
|
4280 <xsl:text> else{ |
|
4281 </xsl:text> |
|
4282 <xsl:text> // calculate distace |
|
4283 </xsl:text> |
|
4284 <xsl:text> if(this.fi > 0.7){ |
|
4285 </xsl:text> |
|
4286 <xsl:text> html_dist = (minY - mouseY)/Math.sin(this.fi); |
4195 </xsl:text> |
4287 </xsl:text> |
4196 <xsl:text> } |
4288 <xsl:text> } |
4197 </xsl:text> |
4289 </xsl:text> |
4198 <xsl:text> else{ |
4290 <xsl:text> else{ |
4199 </xsl:text> |
4291 </xsl:text> |
4200 <xsl:text> mouseX = evt.pageX; |
4292 <xsl:text> html_dist = (mouseX - minX)/Math.cos(this.fi); |
4201 </xsl:text> |
|
4202 <xsl:text> mouseY = evt.pageY; |
|
4203 </xsl:text> |
4293 </xsl:text> |
4204 <xsl:text> } |
4294 <xsl:text> } |
4205 </xsl:text> |
4295 </xsl:text> |
4206 <xsl:text> |
4296 <xsl:text> |
4207 </xsl:text> |
4297 </xsl:text> |
4208 <xsl:text> //get handle distance from mouse position |
4298 <xsl:text> //check if in range |
4209 </xsl:text> |
4299 </xsl:text> |
4210 <xsl:text> if (minX > mouseX && minY < mouseY){ |
4300 <xsl:text> if (html_dist > range_length){ |
|
4301 </xsl:text> |
|
4302 <xsl:text> html_dist = range_length; |
|
4303 </xsl:text> |
|
4304 <xsl:text> } |
|
4305 </xsl:text> |
|
4306 <xsl:text> else if (html_dist < 0){ |
4211 </xsl:text> |
4307 </xsl:text> |
4212 <xsl:text> html_dist = 0; |
4308 <xsl:text> html_dist = 0; |
4213 </xsl:text> |
4309 </xsl:text> |
4214 <xsl:text> } |
4310 <xsl:text> } |
4215 </xsl:text> |
4311 </xsl:text> |
4216 <xsl:text> else if (maxX < mouseX && maxY > mouseY){ |
4312 <xsl:text> |
4217 </xsl:text> |
|
4218 <xsl:text> html_dist = range_length; |
|
4219 </xsl:text> |
|
4220 <xsl:text> } |
|
4221 </xsl:text> |
|
4222 <xsl:text> else{ |
|
4223 </xsl:text> |
|
4224 <xsl:text> // calculate distace |
|
4225 </xsl:text> |
|
4226 <xsl:text> if(this.fi > 0.7){ |
|
4227 </xsl:text> |
|
4228 <xsl:text> html_dist = (minY - mouseY)/Math.sin(this.fi); |
|
4229 </xsl:text> |
|
4230 <xsl:text> } |
|
4231 </xsl:text> |
|
4232 <xsl:text> else{ |
|
4233 </xsl:text> |
|
4234 <xsl:text> html_dist = (mouseX - minX)/Math.cos(this.fi); |
|
4235 </xsl:text> |
|
4236 <xsl:text> } |
|
4237 </xsl:text> |
|
4238 <xsl:text> |
|
4239 </xsl:text> |
|
4240 <xsl:text> //check if in range |
|
4241 </xsl:text> |
|
4242 <xsl:text> if (html_dist > range_length){ |
|
4243 </xsl:text> |
|
4244 <xsl:text> html_dist = range_length; |
|
4245 </xsl:text> |
|
4246 <xsl:text> } |
|
4247 </xsl:text> |
|
4248 <xsl:text> else if (html_dist < 0){ |
|
4249 </xsl:text> |
|
4250 <xsl:text> html_dist = 0; |
|
4251 </xsl:text> |
|
4252 <xsl:text> } |
|
4253 </xsl:text> |
|
4254 <xsl:text> } |
|
4255 </xsl:text> |
|
4256 <xsl:text> |
|
4257 </xsl:text> |
|
4258 <xsl:text> this.svg_dist=(html_dist/range_length)*this.range[1]; |
|
4259 </xsl:text> |
|
4260 <xsl:text> |
|
4261 </xsl:text> |
|
4262 <xsl:text> //redraw handle |
|
4263 </xsl:text> |
|
4264 <xsl:text> //this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]); |
|
4265 </xsl:text> |
|
4266 <xsl:text> //this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
4267 </xsl:text> |
|
4268 <xsl:text> |
|
4269 </xsl:text> |
|
4270 <xsl:text> if(this.enTimer){ |
|
4271 </xsl:text> |
|
4272 <xsl:text> this.apply_hmi_value(0, Math.ceil(this.svg_dist)); |
|
4273 </xsl:text> |
|
4274 <xsl:text> |
|
4275 </xsl:text> |
|
4276 <xsl:text> // TODO : update ghost cursor and call this.request_animate() |
|
4277 </xsl:text> |
|
4278 <xsl:text> |
|
4279 </xsl:text> |
|
4280 <xsl:text> //reset timer |
|
4281 </xsl:text> |
|
4282 <xsl:text> this.enTimer = false; |
|
4283 </xsl:text> |
|
4284 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
4285 </xsl:text> |
|
4286 <xsl:text> } |
|
4287 </xsl:text> |
4313 </xsl:text> |
4288 <xsl:text> } |
4314 <xsl:text> } |
4289 </xsl:text> |
4315 </xsl:text> |
|
4316 <xsl:text> |
|
4317 </xsl:text> |
|
4318 <xsl:text> this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]); |
|
4319 </xsl:text> |
|
4320 <xsl:text> |
|
4321 </xsl:text> |
|
4322 <xsl:text> this.apply_hmi_value(0, this.svg_dist); |
|
4323 </xsl:text> |
|
4324 <xsl:text> |
|
4325 </xsl:text> |
|
4326 <xsl:text> // update ghost cursor |
|
4327 </xsl:text> |
|
4328 <xsl:text> if(this.setpoint_elt != undefined){ |
|
4329 </xsl:text> |
|
4330 <xsl:text> this.request_animate(); |
|
4331 </xsl:text> |
|
4332 <xsl:text> } |
|
4333 </xsl:text> |
|
4334 <xsl:text> } |
|
4335 </xsl:text> |
|
4336 <xsl:text> |
|
4337 </xsl:text> |
|
4338 <xsl:text> animate(){ |
|
4339 </xsl:text> |
|
4340 <xsl:text> this.update_DOM(this.svg_dist, this.setpoint_elt); |
|
4341 </xsl:text> |
4290 <xsl:text> } |
4342 <xsl:text> } |
4291 </xsl:text> |
4343 </xsl:text> |
4292 <xsl:text> |
4344 <xsl:text> |
4293 </xsl:text> |
4345 </xsl:text> |
4294 <xsl:text> on_select(evt){ |
4346 <xsl:text> on_select(evt){ |
4295 </xsl:text> |
4347 </xsl:text> |
4296 <xsl:text> this.drag = true; |
4348 <xsl:text> this.drag = true; |
4297 </xsl:text> |
4349 </xsl:text> |
4298 <xsl:text> this.enTimer = true; |
4350 <xsl:text> this.enTimer = true; |
4299 </xsl:text> |
4351 </xsl:text> |
|
4352 <xsl:text> window.addEventListener("touchmove", this.on_bound_drag, true); |
|
4353 </xsl:text> |
|
4354 <xsl:text> window.addEventListener("mousemove", this.on_bound_drag, true); |
|
4355 </xsl:text> |
|
4356 <xsl:text> |
|
4357 </xsl:text> |
|
4358 <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true) |
|
4359 </xsl:text> |
|
4360 <xsl:text> window.addEventListener("touchend", this.bound_on_release, true); |
|
4361 </xsl:text> |
|
4362 <xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true); |
|
4363 </xsl:text> |
4300 <xsl:text> this.update_position(evt); |
4364 <xsl:text> this.update_position(evt); |
4301 </xsl:text> |
4365 </xsl:text> |
4302 <xsl:text> } |
4366 <xsl:text> } |
4303 </xsl:text> |
4367 </xsl:text> |
4304 <xsl:text> |
4368 <xsl:text> |