Teclado virtual en DescartesJS

Joel Espinosa Longi

Cuando creamos recursos interactivos donde se requiere que el usuario introduzca valores textuales o numéricos, tenemos a nuestra disposición diversos tipo de controles, como los campos de texto y los pulsadores donde se pueden introducir directamente los valores. Si el dispositivo en el que se visualiza el interactivo cuenta con un teclado físico entonces es posible utilizarlo para introducir los valores. Pero, qué ocurre cuando el interactivo se visualiza en un dispositivo móvil (como una tableta) que no cuenta con un teclado físico, por lo general en este tipo de dispositivos se presenta un teclado virtual proporcionado por el propio sistema operativo del dispositivo, este teclado en el contexto de los recursos interactivos presenta algunos problemas ya que puede cubrir una gran parte de la escena o reducir dramáticamente el tamaño en el que se muestra el recurso interactivo, lo que puede complicar la interacción.

Recurso Introducción a la geometría analítica del proyecto Un100, visto desde un dispositivo Android.
Recurso Introducción a la geometría analítica del proyecto Un100, visto desde un dispositivo Android junto con el teclado virtual que el sistema operativo proporciona.
Recurso Introducción a la geometría analítica del proyecto Un100, visto desde un dispositivo con iOS.
Recurso Introducción a la geometría analítica del proyecto Un100, visto desde un dispositivo con iOS junto con el teclado virtual que el sistema operativo proporciona.

Para ayudar a solventar el problema con los teclados virtuales nativos, a partir de la versión 1.1 del editor de DescartesJS y la 2021-11-10 de descartes-min.js, se incorpora a cualquier control que tenga un campo de texto la posibilidad al ser pulsado, de mostrar un teclado virtual propio ubicado dentro de la escena interactiva, lo que previene el problema de cambio de tamaño o posición que presentan los teclados virtuales nativos.

Para esto se agregaron tres nuevos parámetros, los cuales se encuentran presentes en todos los controles que tienen un campo de texto asociado, es decir, controles de tipo: barra, campo de texto, menú y pulsador.

En el siguiente interactivo podemos ver las diferentes distribuciones de teclas que se pueden utilizar en el teclado virtual.

Estos nuevo parámetros permiten al autor de recursos interactivos decidir la distribución de las teclas y la posición del teclado virtual, lo que mejora la usabilidad de las escenas visualizadas en dispositivos sin un teclado físico. Mientras que en dispositivos con un teclado físico se pueden ingresar los valores de forma tradicional (usando el teclado físico) o por medio del teclado virtual; lo cual da versatilidad a las escenas interactivas.

Cambiando los colores del teclado virtual

El estilo visual del teclado virtual presenta colores neutros que pueden ir bien con la mayoría de los recursos interactivos, pero si es necesario cambiar los colores para que el teclado se ajuste a un diseño visual particular, es posible hacerlo por medio de reglas CSS.

La razón de realizarlo por medio de reglas CSS es para evitar agregar parámetros adicionales a los controles, así como tener solamente un conjunto de reglas que determinen la apariencia de todos los teclados que utiliza un recurso interactivo.

Para cambiar el estilo tenemos las siguientes clases CSS que podemos cambiar:

Así por ejemplo, con el siguiente estilo en una escena interactiva:

.DescartesKeyboardContainer {
  background-color: rgba(0, 0, 0, 0.5);
}
.DescartesKeysContainer {
  background-color: #2980b9;
}
.DescartesKeysContainer div {
  background-color: #c0392b;
  color: #f1c40f;
}

obtenemos el siguiente estilo en el teclado.

Nota

Para evitar que el teclado se desajuste o no se dibuje correctamente, lo recomendable es modificar solo los colores de fondo y del texto.