# HG changeset patch
# User Edouard Tisserant
# Date 1597065957 -7200
# Node ID 49799de67540ba934ab0c4cb7ef9421fe0db05ab
# Parent 895bbeced72df0c5d8712a93a6031e708e219684
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
diff -r 895bbeced72d -r 49799de67540 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt Mon Aug 10 14:00:20 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt Mon Aug 10 15:25:57 2020 +0200
@@ -4119,8 +4119,6 @@
enTimer = false;
- svg_dist = 0
-
dispatch(value) {
@@ -4131,13 +4129,19 @@
- this.handle_position(value);
-
- }
-
-
-
- handle_position(value){
+ this.update_DOM(value, this.handle_elt);
+
+
+
+ }
+
+
+
+ last_drag = false;
+
+
+
+ update_DOM(value, elt){
let [min,max,start,totallength] = this.range;
@@ -4145,7 +4149,29 @@
let tip = this.range_elt.getPointAtLength(length);
- this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+ elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+
+
+
+ if(this.setpoint_elt != undefined){
+
+ if(this.last_drag!= this.drag){
+
+ if(this.drag){
+
+ this.setpoint_elt.setAttribute("style", this.setpoint_style);
+
+ }else{
+
+ this.setpoint_elt.setAttribute("style", "display:none");
+
+ }
+
+ this.last_drag = this.drag;
+
+ }
+
+ }
}
@@ -4153,140 +4179,166 @@
on_release(evt) {
+ window.removeEventListener("touchmove", this.on_bound_drag, true);
+
+ window.removeEventListener("mousemove", this.on_bound_drag, true);
+
+
+
+ window.removeEventListener("mouseup", this.bound_on_release, true)
+
+ window.removeEventListener("touchend", this.bound_on_release, true);
+
+ window.removeEventListener("touchcancel", this.bound_on_release, true);
+
if(this.drag){
this.drag = false;
}
+ this.update_position(evt);
+
+ }
+
+
+
+
+
+ on_drag(evt){
+
+ if(this.enTimer && this.drag){
+
+ this.update_position(evt);
+
+ //reset timer
+
+ this.enTimer = false;
+
+ setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+
+ }
+
}
update_position(evt){
- if(this.drag){
-
- var html_dist = 0;
-
-
-
- //calculate size of widget in html
-
- var range_borders = this.range_elt.getBoundingClientRect();
-
- var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
-
- var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
-
-
-
- //get range and mouse coordinates
-
- var mouseX = undefined;
-
- var mouseY = undefined;
-
- if (evt.type.startsWith("touch")){
-
- mouseX = Math.ceil(evt.touches[0].clientX);
-
- mouseY = Math.ceil(evt.touches[0].clientY);
+ var html_dist = 0;
+
+
+
+ //calculate size of widget in html
+
+ var range_borders = this.range_elt.getBoundingClientRect();
+
+ var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
+
+ var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
+
+
+
+ //get range and mouse coordinates
+
+ var mouseX = undefined;
+
+ var mouseY = undefined;
+
+ if (evt.type.startsWith("touch")){
+
+ mouseX = Math.ceil(evt.touches[0].clientX);
+
+ mouseY = Math.ceil(evt.touches[0].clientY);
+
+ }
+
+ else{
+
+ mouseX = evt.pageX;
+
+ mouseY = evt.pageY;
+
+ }
+
+
+
+ //get handle distance from mouse position
+
+ if (minX > mouseX && minY < mouseY){
+
+ html_dist = 0;
+
+ }
+
+ else if (maxX < mouseX && maxY > mouseY){
+
+ html_dist = range_length;
+
+ }
+
+ else{
+
+ // calculate distace
+
+ if(this.fi > 0.7){
+
+ html_dist = (minY - mouseY)/Math.sin(this.fi);
}
else{
- mouseX = evt.pageX;
-
- mouseY = evt.pageY;
+ html_dist = (mouseX - minX)/Math.cos(this.fi);
}
- //get handle distance from mouse position
-
- if (minX > mouseX && minY < mouseY){
+ //check if in range
+
+ if (html_dist > range_length){
+
+ html_dist = range_length;
+
+ }
+
+ else if (html_dist < 0){
html_dist = 0;
}
- else if (maxX < mouseX && maxY > mouseY){
-
- html_dist = range_length;
-
- }
-
- else{
-
- // calculate distace
-
- if(this.fi > 0.7){
-
- html_dist = (minY - mouseY)/Math.sin(this.fi);
-
- }
-
- else{
-
- html_dist = (mouseX - minX)/Math.cos(this.fi);
-
- }
-
-
-
- //check if in range
-
- if (html_dist > range_length){
-
- html_dist = range_length;
-
- }
-
- else if (html_dist < 0){
-
- html_dist = 0;
-
- }
-
- }
-
-
-
- this.svg_dist=(html_dist/range_length)*this.range[1];
-
-
-
- //redraw handle
-
- //this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]);
-
- //this.value_elt.textContent = String(Math.ceil(svg_dist));
-
-
-
- if(this.enTimer){
-
- this.apply_hmi_value(0, Math.ceil(this.svg_dist));
-
-
-
- // TODO : update ghost cursor and call this.request_animate()
-
-
-
- //reset timer
-
- this.enTimer = false;
-
- setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
-
- }
+
}
+
+
+ this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]);
+
+
+
+ this.apply_hmi_value(0, this.svg_dist);
+
+
+
+ // update ghost cursor
+
+ if(this.setpoint_elt != undefined){
+
+ this.request_animate();
+
+ }
+
+ }
+
+
+
+ animate(){
+
+ this.update_DOM(this.svg_dist, this.setpoint_elt);
+
}
@@ -4297,6 +4349,18 @@
this.enTimer = true;
+ window.addEventListener("touchmove", this.on_bound_drag, true);
+
+ window.addEventListener("mousemove", this.on_bound_drag, true);
+
+
+
+ window.addEventListener("mouseup", this.bound_on_release, true)
+
+ window.addEventListener("touchend", this.bound_on_release, true);
+
+ window.addEventListener("touchcancel", this.bound_on_release, true);
+
this.update_position(evt);
}
@@ -4329,27 +4393,27 @@
-
-
- this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this));
-
- this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
-
- this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
-
-
-
- window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
-
- window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
-
-
-
- window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
-
- window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
-
- window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
+ this.bound_on_select = this.on_select.bind(this);
+
+ this.bound_on_release = this.on_release.bind(this);
+
+ this.on_bound_drag = this.on_drag.bind(this);
+
+
+
+ this.element.addEventListener("mousedown", this.bound_on_select);
+
+ this.element.addEventListener("touchstart", this.bound_on_select);
+
+
+
+ if(this.setpoint_elt != undefined){
+
+ this.setpoint_style = this.setpoint_elt.getAttribute("style");
+
+ this.setpoint_elt.setAttribute("style", "display:none");
+
+ }
@@ -4369,7 +4433,7 @@
- value min max
+ value min max setpoint
diff -r 895bbeced72d -r 49799de67540 svghmi/widget_slider.ysl2
--- a/svghmi/widget_slider.ysl2 Mon Aug 10 14:00:20 2020 +0200
+++ b/svghmi/widget_slider.ysl2 Mon Aug 10 15:25:57 2020 +0200
@@ -8,95 +8,127 @@
fi = undefined;
drag = false;
enTimer = false;
- svg_dist = 0
dispatch(value) {
if(this.value_elt)
this.value_elt.textContent = String(value);
- this.handle_position(value);
+ this.update_DOM(value, this.handle_elt);
+
}
- handle_position(value){
+ last_drag = false;
+
+ update_DOM(value, elt){
let [min,max,start,totallength] = this.range;
let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
let tip = this.range_elt.getPointAtLength(length);
- this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+ elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+
+ if(this.setpoint_elt != undefined){
+ if(this.last_drag!= this.drag){
+ if(this.drag){
+ this.setpoint_elt.setAttribute("style", this.setpoint_style);
+ }else{
+ this.setpoint_elt.setAttribute("style", "display:none");
+ }
+ this.last_drag = this.drag;
+ }
+ }
}
on_release(evt) {
+ window.removeEventListener("touchmove", this.on_bound_drag, true);
+ window.removeEventListener("mousemove", this.on_bound_drag, true);
+
+ window.removeEventListener("mouseup", this.bound_on_release, true)
+ window.removeEventListener("touchend", this.bound_on_release, true);
+ window.removeEventListener("touchcancel", this.bound_on_release, true);
if(this.drag){
this.drag = false;
}
+ this.update_position(evt);
+ }
+
+
+ on_drag(evt){
+ if(this.enTimer && this.drag){
+ this.update_position(evt);
+ //reset timer
+ this.enTimer = false;
+ setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+ }
}
update_position(evt){
- if(this.drag){
- var html_dist = 0;
+ var html_dist = 0;
- //calculate size of widget in html
- var range_borders = this.range_elt.getBoundingClientRect();
- var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
- var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
+ //calculate size of widget in html
+ var range_borders = this.range_elt.getBoundingClientRect();
+ var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
+ var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
- //get range and mouse coordinates
- var mouseX = undefined;
- var mouseY = undefined;
- if (evt.type.startsWith("touch")){
- mouseX = Math.ceil(evt.touches[0].clientX);
- mouseY = Math.ceil(evt.touches[0].clientY);
+ //get range and mouse coordinates
+ var mouseX = undefined;
+ var mouseY = undefined;
+ if (evt.type.startsWith("touch")){
+ mouseX = Math.ceil(evt.touches[0].clientX);
+ mouseY = Math.ceil(evt.touches[0].clientY);
+ }
+ else{
+ mouseX = evt.pageX;
+ mouseY = evt.pageY;
+ }
+
+ //get handle distance from mouse position
+ if (minX > mouseX && minY < mouseY){
+ html_dist = 0;
+ }
+ else if (maxX < mouseX && maxY > mouseY){
+ html_dist = range_length;
+ }
+ else{
+ // calculate distace
+ if(this.fi > 0.7){
+ html_dist = (minY - mouseY)/Math.sin(this.fi);
}
else{
- mouseX = evt.pageX;
- mouseY = evt.pageY;
+ html_dist = (mouseX - minX)/Math.cos(this.fi);
}
- //get handle distance from mouse position
- if (minX > mouseX && minY < mouseY){
+ //check if in range
+ if (html_dist > range_length){
+ html_dist = range_length;
+ }
+ else if (html_dist < 0){
html_dist = 0;
}
- else if (maxX < mouseX && maxY > mouseY){
- html_dist = range_length;
- }
- else{
- // calculate distace
- if(this.fi > 0.7){
- html_dist = (minY - mouseY)/Math.sin(this.fi);
- }
- else{
- html_dist = (mouseX - minX)/Math.cos(this.fi);
- }
- //check if in range
- if (html_dist > range_length){
- html_dist = range_length;
- }
- else if (html_dist < 0){
- html_dist = 0;
- }
- }
+ }
- this.svg_dist=(html_dist/range_length)*this.range[1];
+ this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]);
- //redraw handle
- //this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]);
- //this.value_elt.textContent = String(Math.ceil(svg_dist));
+ this.apply_hmi_value(0, this.svg_dist);
- if(this.enTimer){
- this.apply_hmi_value(0, Math.ceil(this.svg_dist));
+ // update ghost cursor
+ if(this.setpoint_elt != undefined){
+ this.request_animate();
+ }
+ }
- // TODO : update ghost cursor and call this.request_animate()
-
- //reset timer
- this.enTimer = false;
- setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
- }
- }
+ animate(){
+ this.update_DOM(this.svg_dist, this.setpoint_elt);
}
on_select(evt){
this.drag = true;
this.enTimer = true;
+ window.addEventListener("touchmove", this.on_bound_drag, true);
+ window.addEventListener("mousemove", this.on_bound_drag, true);
+
+ window.addEventListener("mouseup", this.bound_on_release, true)
+ window.addEventListener("touchend", this.bound_on_release, true);
+ window.addEventListener("touchcancel", this.bound_on_release, true);
this.update_position(evt);
}
@@ -113,17 +145,17 @@
let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
this.fi = Math.atan2(start.y-end.y, end.x-start.x);
+ this.bound_on_select = this.on_select.bind(this);
+ this.bound_on_release = this.on_release.bind(this);
+ this.on_bound_drag = this.on_drag.bind(this);
- this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this));
- this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
- this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
+ this.element.addEventListener("mousedown", this.bound_on_select);
+ this.element.addEventListener("touchstart", this.bound_on_select);
- window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
- window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
-
- window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
- window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
- window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
+ if(this.setpoint_elt != undefined){
+ this.setpoint_style = this.setpoint_elt.getAttribute("style");
+ this.setpoint_elt.setAttribute("style", "display:none");
+ }
}
}
@@ -132,6 +164,6 @@
template "widget[@type='Slider']", mode="widget_defs" {
param "hmi_element";
labels("handle range");
- optional_labels("value min max");
+ optional_labels("value min max setpoint");
|,
}
diff -r 895bbeced72d -r 49799de67540 tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg
--- a/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Mon Aug 10 14:00:20 2020 +0200
+++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Mon Aug 10 15:25:57 2020 +0200
@@ -16,7 +16,7 @@
version="1.1"
id="hmi0"
sodipodi:docname="svghmi.svg"
- inkscape:version="0.92.4 (unknown)"
+ inkscape:version="0.92.3 (2405546, 2018-03-11)"
inkscape:label="Layer">
@@ -34,6 +34,13 @@
id="defs2">
+
+
+
+
+
+
+
+
+