|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
____________________________
168D.- JavaScript. Comparar dos imágenes.
 p169C4_javascript_image_compare.aia
- Vamos a comparar dos imágenes.
- Nos basamos en este código de JavaScript.
https://dev.to/madsstoumann/accessible-image-compare-one-line-of-javascript-3gn4
- En este ejemplo tenemos dos imágenes, una en color y la otra en blanco y negro.
- Según deslizemos el dedo por la imagen veremos la parte izquierda en color y la derecha en blanco y negro.
_________________
- Diseño.
_________________
- Bloques.
_________________
- Código.
|
image_compare.htm |
<!DOCTYPE html><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
.c-compare {
--h: 9;
--m: 1rem 0;
--w: 16;
--thumb-bgc: red;
--thumb-bgc-focus: hsla(0, 70%, 70%, 0.7);
--thumb-w: 1rem;
margin: 0; var(--m);
position: relative;
}
.c-compare::after {
content: "";
display: block;
padding-bottom: calc((var(--h) / var(--w)) * 100%);
}
.c-compare__left,
.c-compare__right {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
}
.c-compare__left {
clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
}
.c-compare__right {
clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
}
.c-compare__range {
background-color: transparent;
box-sizing: border-box;
font-family: inherit;
height: 100%;
margin: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
}
.c-compare__range::-moz-range-thumb {
background-color: var(--thumb-bgc);
cursor: ew-resize;
height: 100%;
width: var(--thumb-w);
}
.c-compare__range::-webkit-slider-thumb {
background-color: transparent; //var(--thumb-bgc);
cursor: ew-resize;
height: 100%;
width: var(--thumb-w);
}
.c-compare__range:focus::-webkit-slider-thumb {
background-color: var(--thumb-bgc-focus);
box-shadow: 0 0 0 3px var(--thumb-bgc);
}
.c-compare__range:focus::-moz-range-thumb {
background-color: var(--thumb-bgc-focus);
box-shadow: 0 0 0 3px var(--thumb-bgc);
}
.c-compare__range::-moz-range-track {
background: transparent;
background-size: 100%;
box-sizing: border-box;
}
.c-compare__range::-webkit-slider-runnable-track {
background: transparent;
background-size: 100%;
box-sizing: border-box;
height: 100%;
}
.c-compare__range,
.c-compare__range::-webkit-slider-runnable-track,
.c-compare__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="c-compare" style="--value:50%;">
<img class="c-compare__left" src="trocadero_c.png" alt="Color" />
<img class="c-compare__right" src="trocadero_b.png" alt="B/W" />
<input type="range" class="c-rng c-compare__range" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`)" />
</div>
</body>
</html>
|
_________________
2.- Valor de la posición.
p169C4_javascript_image_compare_v2.aia
- Modificando la siguiente línea podemos obtener el valor de la posición donde se encuentra la separación de las dos imágenes, será un número del 0 al 100.
<input type="range" class="c-rng c-compare__range" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`); window.AppInventor.setWebViewString('' + this.value)" />
__________________________________
|
