svghmi/gen_index_xhtml.xslt
branchsvghmi
changeset 3021 49799de67540
parent 3019 497aac6522a3
child 3024 0a9f6f29b7dd
equal deleted inserted replaced
3020:895bbeced72d 3021:49799de67540
  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 &amp;&amp; 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 &gt; mouseX &amp;&amp; minY &lt; 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 &lt; mouseX &amp;&amp; maxY &gt; 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 &gt; 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 &gt; mouseX &amp;&amp; minY &lt; mouseY){
  4300     <xsl:text>            if (html_dist &gt; 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 &lt; 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 &lt; mouseX &amp;&amp; maxY &gt; 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 &gt; 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 &gt; 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 &lt; 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>
  4327 </xsl:text>
  4391 </xsl:text>
  4328     <xsl:text>        this.fi = Math.atan2(start.y-end.y, end.x-start.x);
  4392     <xsl:text>        this.fi = Math.atan2(start.y-end.y, end.x-start.x);
  4329 </xsl:text>
  4393 </xsl:text>
  4330     <xsl:text>
  4394     <xsl:text>
  4331 </xsl:text>
  4395 </xsl:text>
  4332     <xsl:text>
  4396     <xsl:text>        this.bound_on_select = this.on_select.bind(this);
  4333 </xsl:text>
  4397 </xsl:text>
  4334     <xsl:text>        this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this));
  4398     <xsl:text>        this.bound_on_release = this.on_release.bind(this);
  4335 </xsl:text>
  4399 </xsl:text>
  4336     <xsl:text>        this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
  4400     <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
  4337 </xsl:text>
  4401 </xsl:text>
  4338     <xsl:text>        this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));
  4402     <xsl:text>
  4339 </xsl:text>
  4403 </xsl:text>
  4340     <xsl:text>
  4404     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
  4341 </xsl:text>
  4405 </xsl:text>
  4342     <xsl:text>        window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
  4406     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
  4343 </xsl:text>
  4407 </xsl:text>
  4344     <xsl:text>        window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
  4408     <xsl:text>
  4345 </xsl:text>
  4409 </xsl:text>
  4346     <xsl:text>
  4410     <xsl:text>        if(this.setpoint_elt != undefined){
  4347 </xsl:text>
  4411 </xsl:text>
  4348     <xsl:text>        window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
  4412     <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
  4349 </xsl:text>
  4413 </xsl:text>
  4350     <xsl:text>        window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
  4414     <xsl:text>            this.setpoint_elt.setAttribute("style", "display:none");
  4351 </xsl:text>
  4415 </xsl:text>
  4352     <xsl:text>        window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
  4416     <xsl:text>        }
  4353 </xsl:text>
  4417 </xsl:text>
  4354     <xsl:text>
  4418     <xsl:text>
  4355 </xsl:text>
  4419 </xsl:text>
  4356     <xsl:text>    }
  4420     <xsl:text>    }
  4357 </xsl:text>
  4421 </xsl:text>
  4367       </xsl:with-param>
  4431       </xsl:with-param>
  4368     </xsl:call-template>
  4432     </xsl:call-template>
  4369     <xsl:call-template name="defs_by_labels">
  4433     <xsl:call-template name="defs_by_labels">
  4370       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  4434       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  4371       <xsl:with-param name="labels">
  4435       <xsl:with-param name="labels">
  4372         <xsl:text>value min max</xsl:text>
  4436         <xsl:text>value min max setpoint</xsl:text>
  4373       </xsl:with-param>
  4437       </xsl:with-param>
  4374       <xsl:with-param name="mandatory" select="'no'"/>
  4438       <xsl:with-param name="mandatory" select="'no'"/>
  4375     </xsl:call-template>
  4439     </xsl:call-template>
  4376     <xsl:text>
  4440     <xsl:text>
  4377 </xsl:text>
  4441 </xsl:text>