autoscroll and focus

This commit is contained in:
Alessio
2020-06-16 08:27:56 +02:00
parent 2493f0117e
commit cd478f16e4
6 changed files with 55 additions and 55 deletions
@@ -2,30 +2,30 @@
<div class="svg-area">
<img src="assets/svg/disegno-quote-velocita.svg" />
<div class="borded_label" id="quota1">
<div>
<div v-focus-on="positions_frame_intermediate_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_frame_intermediate_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_frame_intermediate_speed">
<img src="assets/icons/png/bassa.png" />
<span>{{recipe.positions_frame_intermediate_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota2">
<div>
<div v-focus-on="positions_frame_lower_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_frame_lower_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_frame_lower_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_frame_lower_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota3">
<div class="borded_label" id="quota3" v-focus-on="">
<div>
<img src="assets/icons/png/discesa.png" />
<span>00</span>
@@ -37,7 +37,7 @@
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota4">
<div class="borded_label" id="quota4" v-focus-on="">
<div>
<img src="assets/icons/png/discesa.png" />
<span>00</span>
@@ -50,18 +50,18 @@
</div>
</div>
<div class="borded_label" id="quota5">
<div>
<div v-focus-on="positions_frame_upper_position">
<img src="assets/icons/png/discesa.png" />
<span>{{recipe.positions_frame_upper_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_frame_upper_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_frame_upper_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota6">
<div class="borded_label" id="quota6" v-focus-on="positions_frame_unload_position">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.positions_frame_unload_position.setpointHMI}}</span>
@@ -1,35 +1,35 @@
<template>
<div class="svg-area">
<img src="assets/svg/disegno-quote-velocita-stampo.svg" />
<div class="borded_label" id="quota1">
<div class="borded_label" id="quota1" v-focus-on="positions_mould_intermediate_position">
<div>
<img src="assets/icons/png/quota.png" />
<span>{{recipe.positions_mould_intermediate_position.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota2">
<div class="borded_label" id="quota2" v-focus-on="">
<div>
<img src="assets/icons/png/quota.png" />
<span>00</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota3">
<div class="borded_label" id="quota3" v-focus-on="">
<div>
<img src="assets/icons/png/quota.png" />
<span>00</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota4">
<div class="borded_label" id="quota4" v-focus-on="">
<div>
<img src="assets/icons/png/quota.png" />
<span>00</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota5">
<div class="borded_label" id="quota5" v-focus-on="">
<div>
<img src="assets/icons/png/quota.png" />
<span>00</span>
@@ -38,48 +38,48 @@
</div>
<div class="borded_label" id="quota6">
<div>
<div v-focus-on="positions_mould_upperdeceleration_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_mould_upperdeceleration_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_mould_upperdeceleration_speed">
<img src="assets/icons/png/bassa.png" />
<span>{{recipe.positions_mould_upperdeceleration_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota7">
<div>
<div v-focus-on="positions_mould_upper_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_mould_upper_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_mould_upper_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_mould_upper_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota8">
<div>
<div v-focus-on="positions_mould_lowerdeceleration_position">
<img src="assets/icons/png/discesa.png" />
<span>{{recipe.positions_mould_lowerdeceleration_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_mould_lowerdeceleration_speed">
<img src="assets/icons/png/bassa.png" />
<span>{{recipe.positions_mould_lowerdeceleration_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota9">
<div>
<div v-focus-on="positions_mould_lower_position">
<img src="assets/icons/png/discesa.png" />
<span>{{recipe.positions_mould_lower_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_mould_lower_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_mould_lower_speed.setpointHMI}}</span>
<small>mm</small>
@@ -2,54 +2,54 @@ e<template>
<div class="svg-area">
<img src="assets/svg/disegno-controstampo-quote-velocita.svg" />
<div class="borded_label" id="quota1">
<div>
<div v-focus-on="positions_upperplate_lower_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_upperplate_lower_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_upperplate_lower_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_upperplate_lower_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota2">
<div>
<div v-focus-on="positions_upperplate_lowerdeceleration_position">
<img src="assets/icons/png/salita.png" />
<span>{{recipe.positions_upperplate_lowerdeceleration_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_upperplate_lowerdeceleration_speed">
<img src="assets/icons/png/bassa.png" />
<span>{{recipe.positions_upperplate_lowerdeceleration_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota3">
<div>
<div v-focus-on="positions_upperplate_upper_position">
<img src="assets/icons/png/discesa.png" />
<span>{{recipe.positions_upperplate_upper_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_upperplate_upper_speed">
<img src="assets/icons/png/alta.png" />
<span>{{recipe.positions_upperplate_upper_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota4">
<div>
<div v-focus-on="positions_upperplate_upperdeceleration_position">
<img src="assets/icons/png/discesa.png" />
<span>{{recipe.positions_upperplate_upperdeceleration_position.setpointHMI}}</span>
<small>mm</small>
</div>
<div>
<div v-focus-on="positions_upperplate_upperdeceleration_speed">
<img src="assets/icons/png/bassa.png" />
<span>{{recipe.positions_upperplate_upperdeceleration_speed.setpointHMI}}</span>
<small>mm</small>
</div>
</div>
<div class="borded_label" id="quota5">
<div class="borded_label" id="quota5" v-focus-on="">
<div>
<img src="assets/icons/png/quota.png" />
<span>00</span>
@@ -8,25 +8,25 @@
<div class="body">
<div class="input-area">
<label>{{'positions_upperplate_lower_position' | localize('Quota inferiore')}}</label>
<numeric v-model="recipe.positions_upperplate_lower_position" />
<numeric v-model="recipe.positions_upperplate_lower_position" id="positions_upperplate_lower_position"/>
</div>
<slider v-model="recipe.positions_upperplate_lower_position"></slider>
<div class="input-area">
<label>{{'positions_upperplate_lower_speed' | localize('Velocità discesa')}}</label>
<numeric v-model="recipe.positions_upperplate_lower_speed" />
<numeric v-model="recipe.positions_upperplate_lower_speed" id="positions_upperplate_lower_speed"/>
</div>
<slider v-model="recipe.positions_upperplate_lower_speed"></slider>
<hr />
<div class="input-area">
<label>{{'positions_upperplate_upper_position' | localize('Quota superiore')}}</label>
<numeric v-model="recipe.positions_upperplate_upper_position" />
<numeric v-model="recipe.positions_upperplate_upper_position" id="positions_upperplate_upper_position"/>
</div>
<slider v-model="recipe.positions_upperplate_upper_position"></slider>
<div class="input-area">
<label>{{'positions_upperplate_upper_speed' | localize('Velocità salita')}}</label>
<numeric v-model="recipe.positions_upperplate_upper_speed" />
<numeric v-model="recipe.positions_upperplate_upper_speed" id="positions_upperplate_upper_speed"/>
</div>
<slider v-model="recipe.positions_upperplate_upper_speed"></slider>
@@ -34,12 +34,12 @@
<div class="input-area">
<label>{{'positions_upperplate_upperdeceleration_position' | localize('Corsa')}}</label>
<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" />
<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" id="positions_upperplate_upperdeceleration_position"/>
</div>
<slider v-model="recipe.positions_upperplate_upperdeceleration_position"></slider>
<div class="input-area">
<label>{{'positions_upperplate_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" />
<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" id="positions_upperplate_upperdeceleration_speed"/>
</div>
<slider v-model="recipe.positions_upperplate_upperdeceleration_speed"></slider>
@@ -47,12 +47,12 @@
<div class="input-area">
<label>{{'positions_upperplate_lowerdeceleration_position' | localize('Corsa')}}</label>
<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" />
<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" id="positions_upperplate_lowerdeceleration_position"/>
</div>
<slider v-model="recipe.positions_upperplate_lowerdeceleration_position"></slider>
<div class="input-area">
<label>{{'positions_upperplate_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" />
<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" id="positions_upperplate_lowerdeceleration_speed"/>
</div>
<slider v-model="recipe.positions_upperplate_lowerdeceleration_speed"></slider>
</div>
@@ -8,13 +8,13 @@
<div class="body">
<div class="input-area">
<label>{{'positions_frame_lower_position' | localize('Quota inferiore')}}</label>
<numeric v-model="recipe.positions_frame_lower_position" />
<numeric v-model="recipe.positions_frame_lower_position" id="positions_frame_lower_position"/>
</div>
<slider v-model="recipe.positions_frame_lower_position"></slider>
<div class="input-area">
<label>{{'positions_frame_lower_speed' | localize('Velocità discesa')}}</label>
<numeric v-model="recipe.positions_frame_lower_speed" />
<numeric v-model="recipe.positions_frame_lower_speed" id="positions_frame_lower_speed"/>
</div>
<slider v-model="recipe.positions_frame_lower_speed"></slider>
@@ -22,13 +22,13 @@
<div class="input-area">
<label>{{'positions_frame_intermediate_position' | localize('Quota intermedia')}}</label>
<numeric v-model="recipe.positions_frame_intermediate_position" />
<numeric v-model="recipe.positions_frame_intermediate_position" id="positions_frame_intermediate_position"/>
</div>
<slider v-model="recipe.positions_frame_intermediate_position"></slider>
<div class="input-area">
<label>{{'positions_frame_intermediate_speed' | localize('Velocità a quota intermedia')}}</label>
<numeric v-model="recipe.positions_frame_intermediate_speed" />
<numeric v-model="recipe.positions_frame_intermediate_speed" id="positions_frame_intermediate_speed"/>
</div>
<slider v-model="recipe.positions_frame_intermediate_speed"></slider>
@@ -36,13 +36,13 @@
<div class="input-area">
<label>{{'positions_frame_upper_position' | localize('Quota superiore')}}</label>
<numeric v-model="recipe.positions_frame_upper_position" />
<numeric v-model="recipe.positions_frame_upper_position" id="positions_frame_upper_position"/>
</div>
<slider v-model="recipe.positions_frame_upper_position"></slider>
<div class="input-area">
<label>{{'positions_frame_upper_speed' | localize('Velocità salita')}}</label>
<numeric v-model="recipe.positions_frame_upper_speed" />
<numeric v-model="recipe.positions_frame_upper_speed" id="positions_frame_upper_speed"/>
</div>
<slider v-model="recipe.positions_frame_upper_speed"></slider>
@@ -50,7 +50,7 @@
<div class="input-area">
<label>{{'positions_frame_unload_position' | localize('Quota')}}</label>
<numeric v-model="recipe.positions_frame_unload_position" />
<numeric v-model="recipe.positions_frame_unload_position" id="positions_frame_unload_position"/>
</div>
<slider v-model="recipe.positions_frame_unload_position"></slider>
</div>
@@ -8,30 +8,30 @@
<div class="body">
<div class="input-area">
<label>{{'positions_mould_lower_position' | localize('Quota inferiore')}}</label>
<numeric v-model="recipe.positions_mould_lower_position" />
<numeric v-model="recipe.positions_mould_lower_position" id="positions_mould_lower_position"/>
</div>
<slider v-model="recipe.positions_mould_lower_position"></slider>
<div class="input-area">
<label>{{'positions_mould_lower_speed' | localize('Velocità discesa')}}</label>
<numeric v-model="recipe.positions_mould_lower_speed" />
<numeric v-model="recipe.positions_mould_lower_speed" id="positions_mould_lower_speed"/>
</div>
<slider v-model="recipe.positions_mould_lower_speed"></slider>
<hr />
<div class="input-area">
<label>{{'positions_mould_intermediate_position' | localize('Quota intermedia')}}</label>
<numeric v-model="recipe.positions_mould_intermediate_position" />
<numeric v-model="recipe.positions_mould_intermediate_position" id="positions_mould_intermediate_position"/>
</div>
<slider v-model="recipe.positions_mould_intermediate_position"></slider>
<hr />
<div class="input-area">
<label>{{'positions_mould_upper_position' | localize('Quota superiore')}}</label>
<numeric v-model="recipe.positions_mould_upper_position" />
<numeric v-model="recipe.positions_mould_upper_position" id="positions_mould_upper_position"/>
</div>
<slider v-model="recipe.positions_mould_upper_position"></slider>
<div class="input-area">
<label>{{'positions_mould_upper_speed' | localize('Velocità salita')}}</label>
<numeric v-model="recipe.positions_mould_upper_speed" />
<numeric v-model="recipe.positions_mould_upper_speed" id="positions_mould_upper_speed"/>
</div>
<slider v-model="recipe.positions_mould_upper_speed"></slider>
@@ -39,12 +39,12 @@
<div class="input-area">
<label>{{'positions_mould_upperdeceleration_position' | localize('Corsa')}}</label>
<numeric v-model="recipe.positions_mould_upperdeceleration_position" />
<numeric v-model="recipe.positions_mould_upperdeceleration_position" id="positions_mould_upperdeceleration_position"/>
</div>
<slider v-model="recipe.positions_mould_upperdeceleration_position"></slider>
<div class="input-area">
<label>{{'positions_mould_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
<numeric v-model="recipe.positions_mould_upperdeceleration_speed" />
<numeric v-model="recipe.positions_mould_upperdeceleration_speed" id="positions_mould_upperdeceleration_speed"/>
</div>
<slider v-model="recipe.positions_mould_upperdeceleration_speed"></slider>
@@ -52,12 +52,12 @@
<div class="input-area">
<label>{{'positions_mould_lowerdeceleration_position' | localize('Corsa')}}</label>
<numeric v-model="recipe.positions_mould_lowerdeceleration_position" />
<numeric v-model="recipe.positions_mould_lowerdeceleration_position" id="positions_mould_lowerdeceleration_position"/>
</div>
<slider v-model="recipe.positions_mould_lowerdeceleration_position"></slider>
<div class="input-area">
<label>{{'positions_mould_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" />
<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" id="positions_mould_lowerdeceleration_speed"/>
</div>
<slider v-model="recipe.positions_mould_lowerdeceleration_speed"></slider>
</div>