Draw

El módulo Draw se encarga de proporcionar funciones para dibujar en pantalla diferentes tipos de primitivas gráficas, como líneas, rectángulos, círculos, elipses, polígonos, entre otros. Además, también permite mostrar texto y bitmaps. Estas funciones pueden usarse en la VM de Windows y estan especialmente optimizadas para el uso en pantallas TFT conectadas a un ESP32 o un RISC-V.

Las funciones de dibujo en el módulo Draw se basan en coordenadas x-y, lo que significa que puedes especificar la posición en la que se dibujará la primitiva, el tamaño, el color, entre otras características.

Para su uso no hace falta declaralo explicitamente con use Draw ya que lo declara automaticamante el modulo Display, que es el modulo encargado de arrancar el subsistema gráfico, estando referenciado en la propiedad draw de Display. Dado que la propiedad draw del modulo Display es un tambien un modulo, se puede referenciar con una variable para acceder directamente a sus funciones, ejemplo:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Estas tres instrucciones hacen lo mismo, elije el modo que quede mas claro en tu codigo
draw.circlefill(dest.x,dest.y,10);          // Accediendo desde la variable draw 
Draw.circlefill(dest.x,dest.y,10);          // Accediendo desde el modulo Draw, el cual ha declarado el modulo Display
Display.draw.circlefill(dest.x,dest.y,10);  // Accediendo desde la propiedad draw del modulo Display

En general, el módulo Draw es esencial para cualquier aplicación de JARU que requiera gráficos en pantalla y proporciona una forma fácil y eficiente de dibujar primitivas, texto y bitmaps en la pantalla.

---

La función line(x1, y1, x2, y2, [color]) del módulo Draw en JARU se utiliza para dibujar una línea recta en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del punto de inicio (x1, y1) y las coordenadas x e y del punto final (x2, y2) de la línea.

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color de la línea. Si no se proporciona ningún color, la línea se dibujará en el color predeterminado.

La función line utiliza las coordenadas x e y para dibujar la línea de manera precisa en la pantalla. La línea se dibuja desde el punto de inicio (x1, y1) hasta el punto final (x2, y2), y su grosor es de un píxel.

Aquí hay un ejemplo básico que ilustra cómo usar la función line en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja una línea desde (10, 20) a (50, 70) en color rojo
draw.line(10, 20, 50, 70, 0xFF0000);

Este ejemplo dibuja una línea recta de color rojo que va desde el punto (10, 20) hasta el punto (50, 70) en la pantalla. Si no se especifica el color, la línea se dibujará en el color predeterminado.

---

La función circle(x, y, radio , [color]) del módulo Draw en JARU se utiliza para dibujar un círculo en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del centro del círculo (x, y) y el radio del círculo.

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color del círculo. Si no se proporciona ningún color, el círculo se dibujará en el color predeterminado.

La función circle utiliza las coordenadas x e y para determinar la posición del centro del círculo y el radio para determinar su tamaño. El círculo se dibuja con un grosor de línea de un píxel por defecto.

Aquí hay un ejemplo básico que ilustra cómo usar la función circle en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja un círculo en el centro de la pantalla con un radio de 50 píxeles en color azul
draw.circle(Display.width / 2, Display.height / 2, 50, 0x0000FF)

Este ejemplo dibuja un círculo en el centro de la pantalla con un radio de 50 píxeles y un color azul. La función width y height de la instancia Draw se utilizan para determinar el tamaño de la pantalla en píxeles y así poder dibujar el círculo en el centro.

---

La función circlefill(x, y, radio, [color]) del módulo Draw en JARU se utiliza para dibujar un círculo sólido en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del centro del círculo (x, y) y el radio del círculo.

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color del círculo. Si no se proporciona ningún color, el círculo se dibujará en el color predeterminado.

La función circlefill utiliza las coordenadas x e y para determinar la posición del centro del círculo y el radio para determinar su tamaño. El círculo se dibuja de manera sólida, rellenando todo el interior del círculo con el color especificado.

Aquí hay un ejemplo básico que ilustra cómo usar la función circlefill en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja un círculo sólido en el centro de la pantalla con un radio de 50 píxeles en color verde
draw.circlefill(Display.width / 2, Display.height / 2, 50, 0x00FF00)

Este ejemplo dibuja un círculo sólido en el centro de la pantalla con un radio de 50 píxeles y un color verde. La función width y height del modulo Draw se utilizan para determinar el tamaño de la pantalla en píxeles y así poder dibujar el círculo en el centro.

---

La función ellipse(x, y, rx, ry, [color]) se utiliza para dibujar una elipse en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del centro de la elipse (x, y), el radio en el eje x (rx) y el radio en el eje y (ry).

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color de la elipse. Si no se proporciona ningún color, la elipse se dibujará en el color predeterminado.

La función ellipse utiliza las coordenadas x e y para determinar la posición del centro de la elipse y los radios rx y ry para determinar su tamaño. El tamaño y la forma de la elipse se definen en función de los radios proporcionados.

Aquí hay un ejemplo básico que ilustra cómo usar la función ellipse en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja una elipse en el centro de la pantalla con un radio de 50 píxeles en el eje x y 30 píxeles en el eje y en color rojo
draw.ellipse(d.width / 2, d.height / 2, 50, 30, (255, 0, 0))

Este ejemplo dibuja una elipse en el centro de la pantalla con un radio de 50 píxeles en el eje x y 30 píxeles en el eje y, y un color rojo. La función width y height de la instancia Draw se utilizan para determinar el tamaño de la pantalla en píxeles y así poder dibujar la elipse en el centro

---

En JARU, la función Draw.ellipsefill(x, y, rx, ry, [color]) se utiliza para dibujar una elipse rellena en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del centro de la elipse (x, y), el radio en el eje x (rx) y el radio en el eje y (ry).

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color de relleno de la elipse. Si no se proporciona ningún color, la elipse se dibujará con el color de relleno predeterminado.

A diferencia de la función Draw.ellipse, que dibuja una elipse sin rellenar, la función Draw.ellipsefill rellena el interior de la elipse con el color especificado, creando así una forma sólida.

Aquí hay un ejemplo básico que ilustra cómo usar la función Draw.ellipsefill en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja una elipse rellena en el centro de la pantalla con un radio de 50 píxeles en el eje x y 30 píxeles en el eje y en color azul
draw.ellipsefill(Display.width / 2, d.height / 2, 50, 30, 0x0000FF)

Este ejemplo dibuja una elipse rellena en el centro de la pantalla con un radio de 50 píxeles en el eje x y 30 píxeles en el eje y, y un color azul. La función width y height del modulo Draw se utilizan para determinar el tamaño de la pantalla en píxeles y así poder dibujar la elipse en el centro.

---

La función Draw.rect(x1, y1, x2, y2, [color]) se utiliza para dibujar un rectángulo sin relleno en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del punto de inicio del rectángulo (x1, y1) y las coordenadas x e y del punto final del rectángulo (x2, y2).

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color del borde del rectángulo. Si no se proporciona ningún color, el rectángulo se dibujará con el color de borde predeterminado.

Aquí hay un ejemplo básico que ilustra cómo usar la función Draw.rect en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibujamos un rectángulo sin relleno desde (50, 50) hasta (150, 150) en color rojo
draw.rect(50, 50, 150, 150, (255, 0, 0))

Este ejemplo dibuja un rectángulo sin relleno en la pantalla que comienza en las coordenadas (50, 50) y termina en las coordenadas (150, 150), y se dibuja en color rojo.

---

La función Draw.rectfill(x1, y1, x2, y2, [color]) del módulo Draw de JARU se utiliza para dibujar un rectángulo relleno en la pantalla. Los parámetros que se deben proporcionar son las coordenadas x e y del punto de inicio del rectángulo (x1, y1) y las coordenadas x e y del punto final del rectángulo (x2, y2).

Opcionalmente, se puede proporcionar un argumento adicional color que especifica el color del relleno del rectángulo. Si no se proporciona ningún color, el rectángulo se rellenará con el color de relleno predeterminado.

Aquí hay un ejemplo básico que ilustra cómo usar la función Draw.rectfill en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja un rectángulo relleno desde (50, 50) hasta (150, 150) en color verde
draw.rectfill(50, 50, 150, 150, 0x00ff00)

Este ejemplo dibuja un rectángulo relleno en la pantalla que comienza en las coordenadas (50, 50) y termina en las coordenadas (150, 150), y se rellena con el color verde.

La función Draw.rectfill dibuja un rectángulo relleno, mientras que la función Draw.rect dibuja un rectángulo sin relleno. Si se desea un rectángulo con borde y relleno, se pueden utilizar ambas funciones en secuencia.

---

La función Draw.setcolor(color) del módulo Draw permite establecer el color de dibujo actual para las operaciones de dibujo siguientes. En lugar de pasar los valores de los componentes rojo, verde y azul por separado, esta función acepta un valor hexadecimal de 24 bits que representa los componentes de color.

El valor hexadecimal de 24 bits se compone de 6 dígitos hexadecimales que representan los valores de los componentes rojo, verde y azul del color. Cada componente puede tomar un valor entre 0 y 255 (o entre 00 y FF en notación hexadecimal).

Por ejemplo, para establecer el color de dibujo en un verde brillante, se puede llamar a la función Draw.setcolor con el valor hexadecimal 0x00FF00. El primer par de dígitos representa el componente rojo, que es cero, seguido del componente verde, que es 255 (máximo brillo) y el último par de dígitos representa el componente azul, que también es cero.

Ejemplo de cómo usar la función Draw.setcolor con un valor hexadecimal en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Establecer el color de dibujo actual en verde brillante
draw.setcolor(0x00FF00)

// Dibujar un círculo relleno en el centro de la pantalla
draw.circlefill(160, 120, 50)

En este ejemplo, se establece el color de dibujo en verde brillante mediante la función Draw.setcolor, pasando el valor hexadecimal 0x00FF00. Luego, se dibuja un círculo relleno en el centro de la pantalla utilizando la función Draw.circlefill. Debido a que se estableció el color de dibujo antes de dibujar el círculo, el círculo se dibuja en el color verde brillante.

Es importante tener en cuenta que el color de dibujo establecido por la función Draw.setcolor se utiliza para todas las formas de dibujo subsiguientes hasta que se establezca un nuevo color de dibujo. Para volver al color de dibujo predeterminado, se puede llamar a la función Draw.setcolor con el valor de color predeterminado, que es (255, 255, 255).

---

La función Draw.setcolorbg(color) del módulo Draw, permite establecer el color de fondo actual para las operaciones de dibujo subsiguientes. Al igual que la función Draw.setcolor, esta función acepta un valor hexadecimal de 24 bits que representa los componentes de color.

El valor hexadecimal de 24 bits se compone de 6 dígitos hexadecimales que representan los valores de los componentes rojo, verde y azul del color. Cada componente puede tomar un valor entre 0 y 255 (o entre 00 y FF en notación hexadecimal).

Por ejemplo, para establecer el color de fondo en un azul oscuro, se puede llamar a la función Draw.setcolorbg con el valor hexadecimal 0x000080. El primer par de dígitos representa el componente rojo, que es cero, seguido del componente verde, que también es cero, y el último par de dígitos representa el componente azul, que es 128.

Aquí hay un ejemplo de cómo usar la función Draw.setcolorbg con un valor hexadecimal en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Establecer el color de fondo actual en azul oscuro
draw.setcolorbg(0x000080)

// Borra la pantalla con el color azul oscuro
draw.cls(200, 200, 400, 300)

En este ejemplo, se establece el color de fondo en azul oscuro mediante la función Draw.setcolorbg, pasando el valor hexadecimal 0x000080. Luego, se borra la pantalla utilizando la función Draw.cls. Debido a que se estableció el color de fondo antes de borrar la pantalla, esta se borra con el color azul oscuro.

Es importante tener en cuenta que el color de fondo establecido por la función Draw.setcolorbg se utiliza para todas las formas de dibujo subsiguientes hasta que se establezca un nuevo color de fondo. Para volver al color de fondo predeterminado, se puede llamar a la función Draw.setcolorbg con el valor de color predeterminado, que es (0, 0, 0) para el fondo.

---

La función Draw.setpixel(x, y, [color]) del módulo Draw permite establecer el color de un píxel en las coordenadas (x, y) de la pantalla. Si se proporciona un valor de color opcional, el píxel se establecerá en ese color; de lo contrario, el píxel se establecerá en el color actualmente seleccionado mediante la función Draw.setcolor.

El valor de x representa la coordenada horizontal del píxel y el valor de y representa la coordenada vertical del píxel. Ambos valores deben ser enteros que estén dentro de los límites de la pantalla.

El valor opcional de color es un número entero que representa el color del píxel. Este valor debe ser un número hexadecimal de 24 bits que representa los componentes de color rojo, verde y azul. Si se omite el valor de color, se utilizará el color actualmente seleccionado.

Aquí hay un ejemplo de cómo usar la función Draw.setpixel en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Establecer el color de dibujo en rojo
draw.setcolor(0xFF0000)

// Dibujar un píxel rojo en las coordenadas (100, 100)
draw.setpixel(100, 100)

// Dibujar un píxel verde en las coordenadas (200, 100)
draw.setpixel(200, 100, 0x00FF00)

// Dibujamos un píxel azul en las coordenadas (300, 100)
draw.setpixel(300, 100, 0x0000FF)

En este ejemplo, se establece el color de dibujo en rojo mediante la función Draw.setcolor. Luego, se dibujan tres píxeles en las coordenadas (100, 100), (200, 100) y (300, 100) utilizando la función Draw.setpixel. El primer píxel se establece en rojo porque se estableció el color de dibujo en rojo. El segundo píxel se establece en verde porque se proporcionó un valor de color verde de 24 bits. El tercer píxel se establece en azul porque se proporcionó un valor de color azul de 24 bits.

Es importante tener en cuenta que la función Draw.setpixel puede ser muy lenta cuando se utilizan muchos píxeles, ya que cada píxel debe ser establecido individualmente. Para dibujar formas más grandes, como líneas, rectángulos o círculos, es más eficiente utilizar las funciones de dibujo de formas correspondientes en lugar de dibujar píxeles individuales.

---

La función getpixel(x, y) en JARU se utiliza para obtener el color del pixel en las coordenadas (x, y) de la pantalla.

La función toma dos argumentos: x y y, que son las coordenadas del pixel que se desea leer. El valor de color devuelto es un entero que representa el color del pixel en formato RGB de 24 bits. El formato RGB de 24 bits utiliza 8 bits para cada uno de los tres componentes de color (rojo, verde y azul).

ejemplo de cómo se puede utilizar la función getpixel(x, y) en JARU:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Dibuja un círculo en la pantalla
draw.circlefill(100, 100, 50, 0xff0000)

// Lee el color del pixel en las coordenadas (100, 100)
color = draw.getpixel(100, 100)

// Imprime el valor del color en formato hexadecimal
print("El color del pixel es:", hex(color))

En este ejemplo, se dibuja un círculo rojo en la pantalla utilizando la función Draw.circlefill(). Luego, la función Draw.getpixel() se utiliza para leer el valor del color del pixel en las coordenadas (100, 100). Finalmente, se imprime el valor del color en formato hexadecimal utilizando la función hex()

---

La función Draw.cls() se utiliza para limpiar la pantalla y establecer todos los píxeles en un color de fondo determinado.

La función toma un argumento opcional color, que especifica el color de fondo deseado. Si no se proporciona un valor de color, se utilizará el color establecido en Draw.colorbg como color de fondo por defecto.

La función Draw.cls() es útil para borrar todo lo que se ha dibujado previamente en la pantalla y establecer un nuevo lienzo en blanco para empezar a dibujar.

Aquí hay un ejemplo de cómo se puede utilizar la función Draw.cls() en JARU para borrar la pantalla y establecer el color de fondo en blanco:

use Display
var draw=Display.draw; // De esta forma se accede directamente a las funciones del modulo Draw a traves de la variable draw

// Establece el color de fondo en blanco
draw.cls(0xffffff)

// Dibuja un círculo rojo en la pantalla
draw.circlefill(100, 100, 50, 0xff0000)

En este ejemplo, la función Draw.cls() se utiliza para establecer el color de fondo en blanco y borrar la pantalla. Luego, se dibuja un círculo rojo en la pantalla utilizando la función Draw.circlefill().

---

---

---

---