Ingrese un valor de cursor entre 0 y 1999 para mover el cursor emulado en pantalla.





Modelando una VGA Estándar con HTML5 (Historia Informativa 1)

Uno de los grandes beneficios de HTML5 es la etiqueta <canvas>, que no solo es capaz de manipular imágenes, transparencia, rotar, dibujar primitivas gráficas, entre otras cosas; sino que también nos permite manejar pixeles individuales RGBA, con 8 bits por componente de color, para un total de 24 bits de profundidad de color más 8 bits del canal Alpha.

Desafortunadamente, hay pocos trucos que se pueden usar para acelerar a la velocidad del hardware crudo la escritura a un elemento <canvas>. Aun así, conociendo todo lo necesario, se pueden crear aplicaciones casi en tiempo real con gráficos, aunque se requiere de un CPU de más de 2 GHz para aplicaciones que realmente hagan algo "útil" de manera totalmente fluida.

En este caso, deseamos crear un emulador simple de una tarjeta VGA estándar. Para esto necesitamos:

- Un elemento <canvas> principal, con color de fondo negro, y de 640x400 pixeles (para emular un modo de video inicializado al modo de texto 80x25).

- Un elemento <div> con el tamaño apropiado (8x2) y color gris claro inicialmente, para emular el cursor de texto, inicialmente en la posicíón 0,0. Hemos evitado tener que dibujar y borrar constantemente este cursor parpadeante porque de lo contrario la complejidad y el rendimiento en el uso del elemento <canvas> disminuiría enormemente solo por algo tan simple como animar el parpadeo del cursor.

- Un hilo para activar la animación del cursor.

Esta es la base mínima para crear un efecto visual mediante HTML5, que emule la salida de texto de una VGA estándar.

El siguiente paso es agregar todos los registros VGA al código de JavaScript del emulador de la VGA. Estos registros deben contener inicialmente los valores que una VGA estándar contendría cuando está configurada con el modo de texto 80x25 de 16 colores.

Los primeros registros a emular son los registros 14 y 15 del CRTC, los que contienen el byte mayor y el byte menor, respectivamente, de la posición del cursor de texto en la pantalla.

El hilo de la animación del cursor debe también manejar el valor completo de 16 bits de dicho registro, con un valor entre 0-1999 para el modo de texto 80x25.

El hilo está diseñado de una forma en la que, tan pronto como alteramos el registro emulado 14 y/o 15 del CRTC, el cursor actualiza su posición de forma inmediata. Con esto, hemos emulado el manejo de la posición del cursor con éxito.

Lo siguiente que hay que hacer es definir una manera en la que podemos mantener el contenido de los caracteres en memoria, y una manera también de actualizar de manera fluida el contenido de los caracteres mostrados en pantalla. Una de las cosas muy particulares que debemos hacer para tener coherencia es mantener una copia de una fuente ASCII real, en el código de nuestro emulador, para tener las combinaciones de bits que nos servirán para escribir cada pixel de los caracteres.