Consideraciones del Lenguaje PPL - III

GRÁFICOS
Como punto principal de este artículo se debe aclarar que aprender a manipular o
editar los gráficos que podamos crear en la calculadora, no significa que ya podamos
crear Interfaces gráficas propias, por ese motivo en la parte final de este artículo se
adjunta una pequeña introducción a ese tema. La manipulación de gráficos representa
un ~25% de los conocimientos necesarios para crear Interfaces.

La calculadora posee variables gráficas integradas, son en total 10 y no es posible

crear más de su tipo, existe una forma de crear más objetos gráficos pero no es
recomendado por muchas razones (ICON).

Variables gráficas
Existen 10 variables de gráfico en HP Prime, los cuales son G0 a G9. G0 es siempre
el gráfico actual de la pantalla, y es G0 a quien debemos modificar para visualizar los
cambios deseados en pantalla, por lo ya descrito no es posible redefinir su
dimensión o alguna acción similar.

Por lo tanto nos queda G1 a G9 para almacenar nuestros gráficos (objetos gráficos
temporales), en inglés se denomina GROB (Graphic Object). Las variables gráficas
pueden llegar a ser términos o elementos confusos para programadores principiantes,
es por ello que podemos compararlos como lienzos invisibles que se encuentran en
la memoria.
En estos lienzos podemos dibujar rectángulos, textos, líneas, arcos y triángulos, al
igual como se hace en G0 (pantalla de la calculadora); estos lienzos se encuentran
en memoria y necesitan ser creados antes de ser usados (inicializados y
dimensionados). También no son visibles, si fueran siempre visibles no aportarían
muchos beneficios, es por ello que debemos recordar que son variables, similar a una
variable con un valor numérico que no es visible hasta mostrarla en Inicio, MSGBOX o
PRINT; en el caso de las variables gráficas las debemos enviar a G0 para poder
visualizarlas (pantalla de la calculadora).

Las variables gráficas son elementos estáticos (basado en píxeles y no en

vectores), en ningún sentido se puede asignar una animación a una variable como si
fuera una propiedad admitida, esto incluso va para G0, aunque sabemos que la
pantalla tiene un comportamiento dinámico, debemos identificar que G0 esta siendo
modificado cada vez que eso pasa (existe una estructura de fondo que manipula su
variación).

Uso incorrecto

La manipulación de las variables gráficas debe ser comprendida de forma adecuada,

por ese motivo se muestra las formas incorrectas al imaginar usarlas. No es correcto
sumar, restar, multiplicar, asignar o usar cualquier otra operación que no esta
enfocada a la manipulación de gráfico; es posible digitar sumas o alguna otra
expresión, pero eso se debe a que las variables G0-9 siempre son interpretadas como
datos tipo función (ver Consideraciones - 2° Parte); en este sentido se afirma que su
manipulación esta controlada y solo accesible mediante ciertos comandos.

Aunque en Inicio es posible ver a los gráficos insertados en las expresiones creadas,
eso no significa que el gráfico sea parte de ella, solo es una característica de
visualización que adiciona Inicio para los identificadoresgráficos G0-9.

Uso correcto

Los objetos gráficos deben manipularse con comandos de dibujo, es el único medio
que permite acceder a la fuente gráfica a las que hacen referencia sus identificadores.

Los comandos de dibujo tienen tareas como Inicializar-Dimensionar, Editar

píxeles, Interactuar el contenido entre gráficos y Consultar datos; el formato común de
estos comandos requieren parámetros como la variable gráfica a editar y las
características de la acción.
Comandos de dibujo
Dentro de los comandos de dibujo encontramos algunos que no influyen en la edición
de los gráficos, pero se relacionan al tema
como RGB, PX→C, C→PX, ICON, DRAWMENU y FREEZE; algunos de estos
comandos serán discutidos más adelante.

Respecto a los comandos que sí manipulan directamente nuestros gráficos, podemos

clasificarlos con el fin de comprender todo lo que es posible hacer con las variables
gráficas (comprender capacidades y límites). Debemos prestar atención al comando
BLIT, aunque sea el único en su clase, nos permite realizar la tarea más esencial al
usar gráficos: insertar, mezclar y copiar; los gráficos pueden ser copiados parcial o
totalmente.
Ya que el fin de este artículo no es colocar la misma información del manual de
usuario y ayuda de la calculadora, sino dar pautas para su uso, me he limitado solo a
listar los comandos en la imagen anterior, ya existe información suficiente para
estos comandos; posterior a esto se indican algunos usos prácticos.

Para hacer nuestras pruebas en Inicio, usaremos el comando FREEZE, para salir de
la pausa de pantalla presionamos Esc u otra tecla, no podemos presionar Enter por la
razón ya mencionada en la última parte de Consideraciones - 1° Parte. El comando
FREEZE solo congela la pantalla al finalizar el programa, no es útil para Interfaces
gráficas propias.
Si bien es cierto, se puede trabajar directamente sobre G0, no es incoveniente si no
hay necesidad de almacenar los gráficos creados, los gráficos se deben entender
como objetos de almacenamiento al igual que las variables comunes, solo usarlas si
es necesario. Se recomienda eliminar su contenido antes de finalizar el programa,
ya que este no se eliminará hasta apagar la calculadora, por ejemplo con la siguiente
instrucción: DIMGROB(G1,0,0).

Usar gráficos resulta un asunto sencillo, solo es poner sentencias una detrás de otra,
cosa que no representa un reto para el programador; el verdadero reto será al
momento de interactuar con ellos (crear juegos por ejemplo). Algunos comandos
gráficos tienen usos prácticos que resultan muy útiles en ocasiones.
La mayoría de estos usos mostrados estan orientados a un manejo complejo de
gráficos, por lo que es probable que no sean usados (es más solicitado para juegos).

Coordenadas y dimensiones expresadas en listas

La mayoría de comandos de dibujo acepta pares de datos en formato de listas, tanto

para coordenadas y dimensiones; usarlo al momento de programar resulta muy
práctico. Esta característica no esta documentada claramente en el manual.
Sistema de coordenadas: píxel y cartesiano
Hasta el momento se han mostrado ejemplos rápidos, con la finalidad de hacer
una breve demostración de los comandos existentes, pero esto no esta completo si
no entendemos los sistemas de coordenadas que maneja la calculadora.

Los comandos encargados de manipular los objetos gráficos, se encuentran

duplicados debido a que existen 2 sistemas de coordenadas; Las coordenadas
cartesianas (para aplicaciones) y las coordenadas de píxelbasadas en la pantalla
física (para uso general, incluso aplicaciones), los comandos que funcionan con
píxeles tienen un sufijo _P incluído en su nombre.
En este artículo se utilizan los comandos que funcionan con píxeles, debido a que el
otro sistema esta orientado a Aplicaciones (tema que se verá en el siguiente
artículo). Las referencias a píxeles siempre son truncadas a un valor entero, no
es posible referenciar un píxel como [0.5,0.5].

Colores
A menos que se especifique de otra forma, los colores se definen en el formato
#A8R8G8B8 (8 bits para R, G, B y A). El manual recomienda usar la función RGB al
definir los colores con el fin de brindar compatibilidad en dispositivos futuros (la
definición de color puede variar en firmwares futuros, aunque es poco probable).
Variando la intensidad de cada canal de color se logra obtener un gran espectro de
colores; puedes leer más sobre el Modelo de color RGB que se basa en la síntesis
aditiva.

En términos de números enteros hexadecimales, cada 2 cifras se refiere a un canal,

eso gracias a que 0 - 255 es equivalente a #00h - #FFh; la definición de colores esta
popularizado en base hexadecimal (HTML, JavaScript y otros).
Mezclando colores: canal alfa

Las mezclas se relacionan con el uso del nivel de opacidad/transparencia, valor que
también varía de 0 a 255 (8 bits - #FFh); no todos los comandos aceptan el canal alfa
al definir colores. Las mezclas realizadas sobre los gráficos se basan en el grado de
superposición de un color de mezcla sobre un color base, esta acción no debe
confundirse como un sistema de color aditivo (como pasa con la combinación de
canales RGB).

Los comandos ARC, TEXTOUT, LINE y TRIANGLE no aceptan el canal alfa (LINE y
TRIANGLE sí lo aceptan en sus formas avanzadas). La creación de GROB's sin fondo
con el comando DIMGROB presenta problemas pero se espera que sea solucionado
en el futuro (reemplazable con un BLIT con exclusión de color).

La pantalla y los colores realmente almacenados

Aunque se haya mostrado la mezcla de colores mediante el canal alfa, el resultado en

el gráfico es un color sólido por píxel; el color de píxel final no tiene un valor de
transparencia, tampoco es posible definir un color base con un canal alfa porque la
calculadora no esta preparado para ello.

Ya que estamos usando el comando GETPIX (consultar el color de un píxel),

aprovecharemos para reconocer la limitación de bits que posee la pantalla de la
calculadora. Veamos cómo los colores insertados no son los mismos que los
consultados.

Esto esencialmente se debe a que la pantalla de la calculadora tiene una

profundidad de color de 16 bits(especificaciones técnicas de pantalla). Estos 16 bits
de datos estan separados en 1 bit para alfa, 5 bits para rojo, 5 bits para verde y 5 bits
para azul, A1R5G5B5 (15bits definen el color), medidas distintas a las que se ha
estandarizado en la calculadora con fines prácticos A8R8G8B8 (32 bits
donde 24bits definen el color).
Con esto podemos afirmar que la calculadora posee menos combinaciones de colores
que las pantallas comerciales a las que estamos acostumbrados; pero esto no se
considera una desventaja si no somos quisquillosos. La reducción de tonos no es
notable a menos que se usen imágenes como la mostrada, donde existen colores
similares con tonos cercanos como en el cielo.

Otra observación a este ajuste de bits para cada píxel en la calculadora, es que solo
tenemos 1 bit para definir un dato alfa almacenable (color final en un gráfico),
siendo así que muchos comandos no aceptan el canal alfa y simplemente muestran o
no muestra un color (similar a un verdadero y falso). Esto representa claramente
un obstáculo para una combinación avanzada de gráficos, pero son limitaciones a las
que nos debemos ajustar a la hora de programar (el programador se adapta al
dispositivo con el que trabaja).

Funciones con paso por referencia?

Se mostró antes que usar variables graficas en expresiones, resultan asumidas como
datos tipo función, y que sólo los comandos de dibujo pueden interpretarlos para
acceder a los objetos gráficos que hacen referencia; por esa razón la creación de
funciones para editar variables gráficas resulta práctica, ya que al pasar
los identificadores como datos tipo función permite seleccionar el gráfico deseado.

La función propia Imprimir simula un paso por referencia, esto gracias a cómo son
interpretados las variables gráficas en el código, la forma de acceder a los GROB's
que tienen los comandos de dibujo y por último que las variables gráficas son globales
(accesibles desde cualquier ámbito).

DRAWMENU
Recordando nuevamente que los gráficos son estáticos, debemos sobreentender que
este comando solo nos apoya con el dibujado estándar de menús fiel al tema de la
calculadora. Por lo tanto siempre se ubica en la parte inferior de la pantalla; el dibujo
solo se crea en G0. El comando también permite una lista como único parámetro.
La calculadora tiene esa área definida como la Zona de menú (320x21), área que
responde de forma especial frente al resto de la pantalla ante los gestos táctiles.

No es posible personalizar el comando mediante parámetros para mostrar opciones

desplegables, DRAWMENU no es una interfaz gráfica integrada.

ICON (No recomendado)

La directiva ICON permite crear más objetos gráficos locales a un programa
(conserva cambios), para ello se necesita el programa DIMGROB Generator con el
que obtenemos un código hexadecimal de la imagen solicitada; este código suele ser
extenso de acuerdo a la cantidad de colores que componen la imagen.

Sintaxis
Se definen con la directiva ICON antepuesta al nombre del objeto gráfico seguido del
código hexadecimal. Esta línea de código puede ubicarse en cualquier parte del
programa pero fuera de cualquier función (el código hexadecimal no puede ser
modificado por espacios o saltos de línea).

Para usar estos objetos gráficos usamos sus identificadores en formato de cadenas,
de esta manera es posible usarlos con los comandos de dibujo, excepto con
DIMGROB y SUBGROB.
Objetivo

Esta característica nos permite usar imágenes complejas dentro de un programa (la
idea es enviar imágenes pequeñas); no debe reemplazar el uso de las variables
gráficas integradas (usarlo como destino de los comandos de dibujo), es posible
modificarlos pero tienen más un propósito de origen.

Tamaño excesivo en programas

Programar en HP Prime significa adecuarse a sus características, no es óptimo tratar

de usar imágenes de computadora sin una verdadera necesidad (aunque muchos
crean que usar imágenes de fondo es genial). El uso de imágenes sí es adecuado en
Aplicaciones, ya que permiten usar archivos JPG y PNG.

Inconvenientes con la memoria RAM

ICON ha sido el causante de fallas de memoria desde su nacimiento, los

desarrolladores de HP explicaron su diseño y desventaja en un foro concurrente. El
problema surge debido al uso inadecuado que le han dado los programadores al
tomar la desición de enviar imágenes de forma despreocupada; este problema incluso
dió la idea de eliminarlo en firmwares futuros (decisión muy dificil).

En resumen, un objeto gráfico creado a partir de ICON, permanece en memoria RAM

aunque sea local al programa (así fue diseñado); por este motivo muchos usuarios
presentan problemas de memoria insuficiente, más aún si mencionamos la loca idea
de leer PDF's en la calculadora, donde hasta hace pocos años estos documentos
eran convertidos en imagenes y luego convertidos en gráficos nombrados con ICON
(presentándose como beneficio cuando era una desventaja).

Notas sobre ICON

Debe evitarse aún si se toman consideraciones para su uso, ocupa espacio en
almacenamiento y memoria RAM de manera no óptima. Si es necesario el uso de
gráficos detallados se recomienda usar Aplicaciones.

Debido a esto es que en los tutoriales que he fabricado para la calculadora, no

recomiendo su uso y menciono que no envíen programas mayores a 500KB,
asumiendo que el programa ha explotado esta característica.

Introducción a Interfaz gráfica propia

Asumiendo que entendemos perfectamente cómo diseñar el cuerpo de un
programa, usar variables gráficas, elegir los tipos de datos adecuados, crear códigos
eficientes y tener en mente las limitaciones de la calculadora; avanzaremos un paso
más hacia la creación de flujos gráficos.

Hasta ahora hemos visto la manipulación de gráficos estáticos, puesto que no lo

hemos integrado en una estructura de código que le indique hacer cambios ante los
eventos que pueda accionar el usuario; es aquí donde el programador nuevamente
debe usar su magia y mejorar sus conocimientos. Para lograr crear una interfaz
debemos dibujar la pantalla en momentos exactos y necesarios, darle al usuario el
tiempo de responder ante una petición como lo haría el comando INPUT; dicho de
otro modo, engañar a los usuarios con la interacción que tendrá la pantalla con las
teclas y pantalla (como hacerles creer que en la pantalla existen botones).

Detectando acciones de teclado y pantalla

Para lograr esto usaremos la instrucción WAIT(-1), al ejecutarlo el comando retornará

el ID de la tecla presionada o la coordenada de píxel y tipo de gesto en pantalla, es un
comando que permite una total consulta sobre las acciones que pueda realizar el
usuario.
El programa en espera de una instrucción

El comando WAIT(-1) no avanza a menos que se realice una acción o pase 60

segundos, por lo que solo nos falta ingresarlo en un bucle que permita tener un flujo
constante de captura de acciones. En el siguiente ejemplo se observa cómo la
instrucción WAIT(-1) puede retornar el tipo de evento de pantalla, para ello se
adicionó un WAIT(0.5) para observar todos los eventos identificados.

Debemos evitar usar los comandos ISKEYDOWN o GETKEY dentro del mismo bucle,
ya que ocasionan conflictos incluso con los eventos de pantalla, es posible usarlo
dentro de subfunciones que regulen un compartamiento independiente al bucle
principal.

La inserción de gráficos

Como se aprecia en el código anterior, existen instrucciones gráficas fuera del bucle
que crean el gráfico base (gráfico estático que no es necesario redibujar), esto es
igual a una buena práctica de ahorro de recursos, los fondos y gráficos base deben
insertarse o crearse fuera de los bucles, solo pueden ir instrucciones gráficas que
involucren la parte dinámica del programa.

Otro punto importante es que no es recomendable usar directamente G0, ya que es

posible que la pantalla muestre un parpadeo aparente (molestia visual), por lo que se
puede recurrir a G1 (320x240) para construir todos los gráficos necesarios antes de
mostrarse en pantalla.

Función de verificación de toque: zona presionada

A nivel de programación se suele usar zonas rectangulares que limitan la zona de

influencia de algún botón o campo dinámico, esto permite simplificar los datos a usar
para la verificación del toque realizado; pues solo necesitaremos verificar si la
coordenada del toque esta entre las coordenadas de la zona definida para un campo.

La función Si_Toca es relativamente sencilla, recibe como parámetros las

coordenadas de la zona a verificar como datos tipo lista, retorna 1 (verdadero) si se ha
tocado la zona indicada, de lo contrario retorna 0 (falso); debido a que esta función
necesita interactuar con Accion, esta variable deberá tener un ámbito global.

Estructura de captura de la acción: bucle de reconocimiento de acciones

En el caso de una Interfaz Gráfica Propia, la estructura del programa pasa a

convertirse en una estructura de reconocimiento de acciones de usuario; mediante
una estructura CASE se organiza las diferentes respuestas teniendo en cuenta el
orden de los tipos de gestos en pantalla. Sabemos que la variable Acción puede ser
tipo lista para pantalla y tipo real para teclado, por lo que debemos separar su lectura.
Descarga el código: PPL-EstructuraCaptura

En el bucle de reconocimiento de acciones, capturaremos en primer lugar el evento,

luego dirigimos la acción con la estructura CASE, para ello debemos conocer el
comportamiento de WAIT(-1) y adecuarnos; aquel comando posee respuestas muy
útiles como el inicio de toque, fin de toque, finalización del toque (permite diferenciar
entre un clic y un desplazamiento o zoom).

Ejemplo aplicativo: Intefaz de entrada

En este ejemplo simple, se simula una interfaz de entrada de datos en celdas, como
se sabe los fondos pueden editarse como el programador lo desee; en este caso nos
enfocamos un poco en la interacción del código para capturar las acciones del
usuario, es posible agregarle más características que mejoren la experiencia del
usuario, pero este ejemplo trata de ser sencillo para servir como un ejemplo base.

Los campos de edición reconocen solo las operaciones básicas, cuando los datos
numéricos van a imprimirse suele usarse STRING para dar el formato deseado puesto
que cada usuario puede tener una configuración distinta. Los valores ingresados
estan controlados por un intervalo de valores y siempre serán enteros por referirse a
coordenadas de píxel. No tiene implementado una característica que limite la escritura
de datos dentro de su campo, por lo tanto cuando se salga del campo habrá dibujos
residuales.

Descarga el código: PPL-EntradaDatos

Capacidad de una Interfaz gráfica con WAIT(-1)

Entendiendo cada comportamiento, es posible definir cualquier tipo de acción ante los
diversos tipos que reconoce la calculadora, ya sea crear una interfaz similar a un
INPUT, una tabla de datos y demás interfaces que se nos puedan ocurrir.

En esta pequeña introducción solo se muestra una de las 2 formas que existen para
crear una interfaz gráfica, la cual es la más útil, simple y recomendada. Si deseas ver
un artículo más completo puedes ingresar a Creando una Interfaz Gráfica.
En resumen y datos finales
Las variables gráficas no se pueden asignar con := o ►, ya que su sistema de edición
o entrada de datos es diferente que los tipos numéricos o cadenas; para manipular
estos objetos debemos usar comandos especiales de dibujo como BLIT,
DIMGROB, LINE, etc.

Las variables gráficas deben usarse si se necesita almacenar gráficos, y su

visualización se logra con BLIT (refiriéndose a su inserción en G0). Es posible usar
parte de ellas y tener varios gráficos organizados en una sola variable.

Para visualizar los gráficos en pantalla, luego de usar un BLIT, necesitamos pausar o
retener el refrescado en pantalla, eso se logra con FREEZE, WAIT o WAIT(-1).
También es posible mediante un bucle debidamente controlado con un WAIT(0.01), el
valor de 0.01 se recomienda para estos casos.

La instrucción WAIT(-1) es la mejor opción para la creación de Intefaces Gráficas

Propias, debido a que brinda características de pausa y reconocimiento de
teclado/pantalla. Recuerda no combinarlos con ISKEYDOWN y GETKEY.
 Consideraciones del Lenguaje PPL -
IV
APLICACIONES
Antes de querer desarrollar grandiosas aplicaciones es realmente importante entender
ciertos conceptos de funcionamiento, conceptos respecto al diseño de la calculadora
que aclararán la idea de cómo debe ser el desarrollo de una App y cómo es que el
usuario espera que funcione.

En resumen, una aplicación brinda al usuario beneficios de manejabilidad hacia su

calculadora, y para lograrlo podemos dar simples cambios a una App como modificar
su iniciación y vistas predeterminadas, hasta incorporar interfaces gráficas propias o
programar con archivos.

Coordenadas de píxel y cartesianas - HP Prime

septiembre 22, 2017

En la calculadora HP Prime existen dos sistemas de coordenadas para la creación de

gráficos sobre la pantalla o sobre las variables gráficas; el sistema común es el de
coordenadas de píxel, mientras que las coordenadas cartesianas son de uso
especial.

Coordenadas de píxel y cartesianas

Gráficos en HP Prime

Los comandos encargados de manipular los objetos gráficos, se encuentran

duplicados debido a que existen 2 sistemas de coordenadas; Las coordenadas
cartesianas (para aplicaciones) y las coordenadas de píxelbasadas en la pantalla
física (para uso general, incluso aplicaciones), los comandos que funcionan con
píxeles tienen un sufijo _P incluído en su nombre.

Gráficos en coordenadas de píxel

Las referencias a píxeles siempre son truncadas a un valor entero, no es posible

referenciar un píxel como [0.5,0.5].

Las coordenadas de píxel son usadas comunmente en cualquier dispositivo, puesto

que se basan directamente en las referencias del hardware, es decir que las pantallas
siempre suelen basarse en referencias de píxel donde el punto [0,0] se encuentra en
la esquina superior izquierda de la pantalla.

Sin importar el tamaño de las variables gráficas, el punto fijo siempre será el [0,0],
bajo ese fundamento es que podemos interactuar los diversos objetos gráficos con los
comandos de dibujo.

Esta información ha sido extraída del artículo dedicado a programadores respecto a

gráficos en la calculadora HP Prime: Consideraciones del lenguaje PPL - III.

Gráficos en coordenadas cartesianas

La mayoría de aplicaciones tiene habilitada la Vista de gráfico, esta tiene variables

como Xmin, Xmax, Ymin, Ymax que controlan el campo de dibujo en las aplicaciones
(inserción de gráficos a través de los comandos de dibujo). Las Apps por lo tanto
facilitan el escalado y ajuste para la inserción de gráficos si se decide trabajar en un
sistema cartesiano.
El punto fijo entre gráficos es la esquina superior izquierda definido por Xmin y Ymax,
todas las variables gráficas se dibujaran en base a estas dimensiones; dibujar en un
sistema cartesiano equivale a convertir internamente los datos, ajustándolos y
ubicándolos para obtener finalmente su coordenada de píxel, que de acuerdo al
artículo anterior, siempre son redondeados al número menor. Entender que variar la
escala de las coordenadas luego de haber realizado un dibujo no significa que el
dibujo también se redimensionará, los gráficos son estáticos, siguen siendo píxeles
los datos que son almacenados.
Entonces los comandos de dibujo que no poseen el sufijo adicional son quienes
actúan graficando en base a la configuración de la Vista de gráfico de la App actual en
un sistema de coordenadas cartesianas (aunque preferiría que los de píxel sean
quiene no tengan el sufijo).

Las variables como Xmin pueden ser manipulados desde un programa, por lo que es
posible usar coordenadas cartesianas en programas si se realiza un adecuado
respaldo y restaurado de sus valores. La desventaja de intentar usar el sistema
cartesiano desde un programa recae sobre la inexistencia de estas variables en
muchas Apps, el efecto es el error al intentar compilar el programa. No es
recomendable intentar usar el sistema cartesiano incorporado al desarrollar
programas, la alternativa es tratar los datos dando la escala y posicionamiento
deseado.

En las aplicaciones donde no existen estas variables, sí es posible usar coordenadas

cartesianas pero no manipularlas, la relación es 1 unidad = 10 píxeles, la
intersección de los ejes aproxima al centroide de la pantalla obviando la zona de
menú.

Aclarando otro punto respecto a gráficos, es que las vistas redefinidas no traen
consigo la asignación de títulos (barra superior con hora y batería) como Vista
simbólica NuevaApp o cualquier variación diferente a lo ya conocido sobre interfaces
integradas y el concepto de la variable de gráfico G0 como gráfico estático.

Esta información ha sido extraída del artículo dedicado a programadores respecto al

desarrollo de aplicacione en la calculadora HP Prime: Consideraciones del lenguaje
PPL - IV.
Conclusión

Las coordenadas de píxel son de uso general y para todo tipo de programas, incluído
para el desarrollo de aplicaciones, puesto que se basa en el fundamente general
orientado a la programación para estandarizar y agilizar la creación de gráficos.

Las coordenadas cartesianas estan orientadas a representaciones matemáticas,

estadísticas y similares; para evitar cualquier tipo de error de compilación es
recomendable usarlo solo en el desarrollo de aplicaciones

Una App en HP Prime

Comprender el significado de una App se relaciona fuertemente con el funcionamiento
de la calculadora, debido a que la calculadora siempre tiene una App abierta; al
encontrarnos en todo momento sobre una aplicación podemos navegar con facilidad
gracias a las teclas dedicadas a ese fin que implementó HP calculator group. De
acuerdo a lo descrito, notamos que la calculadora esta orientada a usar
Aplicaciones, las cuales de alguna manera siempre estan en segundo plano,
podiéndose acceder a cualquiera de sus vistas en cualquier instante.
"La mayoría de las aplicaciones tienen tres vistas principales: la simbólica, de gráfico
y la numérica. Estas vistas se basan en las representaciones simbólica, gráfica y
numérica de los objetos matemáticos. Se accede a ellas mediante las
teclas Symb, Plot y Num. Por lo general, estas vistas le permiten definir un objeto
matemático (como una expresión o una sentencia abierta), trazarlo y ver los valores
que genera." - Ayuda de la calculadora

"Cada una de estas vistas va acompañada de una vista de configuración que permite
configurar la apariencia de los datos en la vista principal correspondiente. Estas vistas
se denominan Config. simbólica, Config. de gráfico y Configuración numérica. Puede
acceder a ellas pulsando Shift Symb, Shift Plot y Shift Numrespectivamente." -
Ayuda de la calculadora

El diseño original de las aplicaciones permite retornar a cualquiera de sus vistas;

por lo que es importante implementar esta funcionalidad, brindar una adecuada
experiencia al usuario, evitando Apps confusas que no siguen los mismos conceptos
básicos nombrados hasta ahora.

Conocimientos requeridos
La creación de Apps en la calculadora es el paso casi inmediato tras entender
conceptos básicos para el desarrollo de programas, puesto que son exactamente lo
mismo con la diferencia que se adiciona características de manipulación que mejoran
enormemente la experiencia del usuario. Se necesita comprender lo siguiente para
 seguir adecuadamente el hilo de este artículo.

 Anidación de funciones
 Ámbito de variables
 Estructura principal de un programa
 Pautas para crear una Interfaz gráfica (opcional)

Creando una App

Una aplicación puede ser desarrollada solo agregando algunas funciones a una App
integrada, o reemplazando su contenido con interfaces integradas/propias, cual sea la
forma el punto es el mismo, crear tu propia App. Modificar una App equivale a
modificar el programa de aplicación que se encarga de redefinir teclas específicas y
también el comportamiento al entrar por primera vez a la App, este código se
almacena automáticamente en un archivo con extensión .hpappprgm.

Una App adiciona el uso de variables de aplicación y la gestión de archivos, ambos

casos se explicarán más adelante.

Comandos dedicados

STARTVIEW(n): Inicia una vista integrada de la App al finalizar la ejecución de un

programa o una vista glogal como la Pantalla de Inicio, útil para controlar el cambio de
vistas.
STARTAPP("nombre"): Inicia una aplicación al terminar la ejecución de un programa,
su uso no es frecuente en el desarrollo de aplicaciones.

Empezamos creando la nueva App

Crear una nueva aplicaciones es sinónimo de duplicar una App integrada o modificada
, ya sea desde la Biblioteca de aplicaciones o desde el Kit de conectividad; el sistema
nos pedirá un nuevo nombre y la App base con el cual fabricará los nuevos archivos
vinculados/asociados que conformarán el cuerpo de la App. Esta nueva App puede
ser arrastrada desde el Kit de conectividad, lista para ser transferida a otras
calculadoras.
Al tratarse de una copia surge el término "App base", para referirnos a la App de
partida y de la cual profundizaremos más adelante. Debido a que siempre debemos
usar una aplicación base, trae consigo variables y funciones heredadas, vista
simbólica, gráfica y numérica, variables de control de tales vistas como Xmin, Ymin e
incluso la configuración modificada si es que la App base ya contaba con
modificaciones. Si se elige la App base vacía (Ninguno), esta solo heredará la Vista
Configuración Simbólica por defecto y las variables de manipulación de una App
(AAngle, AFormat, ADigits, AFiles, etc).

Redefinición de teclas principales

Consiste en definir funciones que reemplazarán el comportamiento de las teclas, es

decir, se ejecutarán estas funciones reemplazando el funcionamiento común de la
App base. La codificación se realiza sobre el programa de aplicación.

En resumen la creación de las funciones Symb, Plot, Num, SymbSetup, PlotSetup y

NumSetup dentro del programa de aplicación, reemplaza la ejecucción común de las
teclas por la ejecucción de las funciones definidas en el programa de aplicación.

Redefinición de tecla View: menu Vista

Complementando lo indicado en el manual, se puede crear un nuevo menú Vista si

adicionamos la palabra clave VIEW en la definición de una función, es decir
asociamos la ejecución de una función existente al menú Vista.

Redifinición de la información de la App

Definiendo una función llamada Info se logra el mismo efecto mostrado, por ejemplo
mostrando una caja de texto con MSGBOX con el nombre, versión y fecha de nuestra
App.
En la versión FW 11226 y posiblemente en otras versiones, esta redefinición no surge
efecto.

Arranque de la nueva App

El toque final para redefinir el flujo de nuestra App es definir la función START quien
se ejecutará cada vez que se ingrese a la App mediante la Biblioteca de aplicaciones
o el comando STARTAPP.

El principal objetivo de crear la función START es decidir qué nueva vista se ejecutará
de entre todas nuestras funciones creadas (definir la pantalla inicial de la App). Si
elegimos a la vista simbólica modificada como la primera en mostrarse al iniciar
nuestra App deberemos anidar la función Symb con la función START como es usual.
Otro cometido de esta función es ocultar la vista nativa a la que nos dirije la App base,
para ello usaremos el comando STARTVIEW para iniciar una vista seleccionada al
final de la ejecución del primer ingreso.

Funciones exportadas

La creación de este tipo de funciones esta orientado a usarlas en conjunto con la

aplicación, es decir serán características especiales que liberaremos para el uso de
nuestra nueva aplicación. Se definen como es usual, anteponiendo la instrucción
EXPORT a las funciones deseadas; para exportar las funciones seleccionadas para el
menu Vista, se coloca el EXPORT antes de la instrucción VIEW.
Las funciones exportadas se pueden encontrar desde el cuadro de
herramientas/Aplicaciones/Nueva App; pueden usarse de la misma forma que las
funciones exportadas comunes, a diferencia que no podrán ejecutarse con si nos
encontramos sobre otra App, para lograrlo debermos usar un prefijo de
acceso: NuevaApp.Función01.

La App base y la App vacía

App base

Al duplicarse una App, solo se copia una especie de identificador, los datos de
configuración y los datos que contenga, es recomendable restaurar una App antes
de copiarla como base para evitar datos inútiles. No se esta duplicando toda la App
como su codificación, eso es algo que se encuentra integrado en el firmware, se
podría decir que solo se logra copiar una cáscara que reutiliza el código interno de la
App integrada. De acuerdo a lo descrito, el nuevo ícono no se esta duplicando, solo
esta usando el mismo ícono de la App base, los únicos íconos duplicados son los
íconos nuevos (icon.png).

Las vistas siguen existiendo y no pueden ser completamente bloqueadas, es

cierto que se modifica la acción de las teclas Symb, Plot y Num pero si se usa el
comando STARTVIEW se ingresará a las vistas originales.

Los comandos y variables de la aplicación también se duplican y no se pueden ocultar

o eliminar, así que son puntos a considerar al momento de elegir nuestra App base.

App vacía

Si se elige a la App vacía (Ninguno) como App base, el programador obtendrá una
App limpia para trabajarla desde 0, se asegura de poseer la App base más ligera
respecto al resto, y obviamente no arrastrará variables/funciones residuales que sí
poseen sus compañeras y que posiblemente no nos sean útiles. La App vacía fue
implementada a partir del firmware 2018 01 24 (13333).

Los elementos que conserva este tipo de App para asegurar su correcto
funcionamiento son la vista de Configuración simbólica que toda App requiere poseer
para que el usuario realice sus configuraciones personales, y las variables de
aplicación que permiten al programador manipular la aplicación como AAngle,
AFormat, ADigits, AComplex, AFiles, AFilesB, DelAFiles, ANote, AProgram, AVars y
DelAVars.

La elección

Duplicar una App involucra a datos integrados (configuración), datos introducidos

(como una función), nuevas variables de usuario (AVars) y los archivos vinculados
(AFiles, como el ícono propio), de acuerdo a la necesidad y planificación es que se
elige cualquiera de las Apps existentes, sin medir a una sobre otra, simplemente una
puede ajustarse mejor a tu proyecto actual.

Pautas para creación de una App

Desarrollo

Si la App que desarrollas es de un ámbito simple y sencillo, por lo menos aloja tu

única función principal en todas las vistas o solo en la tecla Num (enfocada al ingreso
de datos), para permitir el acceso en cualquier instante como es lo esperado; sin
mencionar sobre definir adecuadamente la función START.
Otro acabado es anular las vistas que no necesitarás de la App base (a menos que
uses la App vacía), ya sea definiendo las funciones vacías respectivamente o
iniciando una vista nativa no implementada que lanzará un mensaje de advertencia
bien intuitivo.

Por último no olvidarnos del menú Vista, redefinirlo por lo menos una vez porque
usualmente la App base trae consigo su propio menú Vista que puede acceder a las
vistas nativas, opción que no sería adecuada. Esto no será necesario si se eligió una
App base adecuada (que originalmente no tiene esta opción).
Depuración

Como una aplicación no se ejecuta igual que los programas, no tenemos forma de
identificar el tipo de error por compilación o ejecución de forma simple, para ello es
recomendable usar funciones externas (un programa aparte), de esa manera se
trabaja tranquilamente sobre el programa externo que al finalizar puede ser fusionado
con la App (permitiendo usar PrimeMom).
Codificar la App no directamente sobre las funciones de las vistas nos facilita crear el
enlace que debe existir entre las vistas, ya que no termineramos la ejecucción del
anidado de funciones pero sí se eliminará toda variable local que ya no utilizaremos
(problema de funciones recursivas), permitiéndonos ejecutar nuevamente las
funciones de forma limpia.
 Ícono
Esta funcionalidad resulta ser la más atractiva para los usuarios y programadores
principiantes, de todas formas no debemos subestimar la creación de esta
característica, puesto que muchas veces se requiere de conocimientos muy cercanos
al diseño gráfico para obtener un resultado deseado.

 Es un simple archivo vinculado a la aplicación con el nombre "icon.png".

 La dimensión recomendable es 38x38 píxeles.
 Admite solo transparencias completas (mayores a 128).

El ícono puede crearse con el Kit de conectividad: "Añadir ícono de la aplicación" o

"Añadir archivo" (envío directo de "icon.png"), también es posible usar AFiles en la
misma calculadora.
 Por ser un archivo de tipo imagen enviado a la calculadora, se recomienda con
insistencia aplicar las consideraciones de compresión de imágenes y tener en cuenta
los limites de la calculadora.

Es recomendable no usar bordes con degradado transparente, puesto que la

calculadora solo reconoce opaco o transparente; las dimensiones pueden ser
diferentes a 38x38, sin embargo este será escalado y ajustado a la dimensión 38x38,
ocasionando una pérdida de calidad puesto que el redimensionado de imágenes es
básico en la calculadora.

Las Apps respecto a los Programas

Ventajas para el usuario

 Mejora el acceso
 Agregar un ícono representativo (su diseño es un trabajo adicional)
 Tiene un flujo continuo de ejecución (como en las Apps integradas)

Ventajas para el programador

 La App le da un lineamiento de funcionamiento fijo y conocido por el usuario.
 La conservación de datos es más consistente.

Desventajas para el programador

 Una app no retorna valor a través de sus vistas o al iniciarse, las funciones principales
usualmente son locales, por lo que no se puede acceder a ellas sino es con las teclas
Symb, Plot y Num; por eso se aconseja programar la App primero desde un programa
externo para poder detectar los errores de ejecución, al final se podrá acoplar el
código dentro de la App.

Observación
Los beneficios de una App sobre un programa convencional es notorio, sin embargo
crear todo programa como una App es contradictorio a nivel de optimización; es de
acuerdo a la estimación del nivel de importancia y frecuencia de uso de un programa,
que decidimos si es realmente necesario amontonarlo o sobrecargar la Biblioteca de
aplicaciones; debemos evitar la idea de abandonar o dejar de lado el uso del catálogo
de programas.

Gráficos en coordenadas cartesianas

La mayoría de aplicaciones tienen habilitada la Vista de gráfico, esta tiene variables
como Xmin, Xmax, Ymin, Ymax que controlan el campo de dibujo en las aplicaciones
(inserción de gráficos a través de los comandos de dibujo). Las Apps por lo tanto
facilitan el escalado y ajuste para la inserción de gráficos si se decide trabajar en un
sistema cartesiano.
El punto fijo entre gráficos es la esquina superior izquierda definido por Xmin y Ymax,
todas las variables gráficas se dibujaran en base a estas dimensiones; dibujar en un
sistema cartesiano equivale a convertir internamente los datos, ajustándolos y
ubicándolos para obtener finalmente su coordenada de píxel, que de acuerdo al
artículo anterior, siempre son redondeados al número menor. Entender que variar la
escala de las coordenadas luego de haber realizado un dibujo no significa que el
dibujo también se redimensionará, los gráficos son estáticos, siguen siendo píxeles
los datos que son almacenados.
Entonces los comandos de dibujo que no poseen el sufijo adicional son quienes
actúan graficando en base a la configuración de la Vista de gráfico de la App actual en
un sistema de coordenadas cartesianas (aunque preferiría que los de píxel sean
quiene no tengan el sufijo).

Las variables como Xmin pueden ser manipulados desde un programa, por lo que es
posible usar coordenadas cartesianas en programas si se realiza un adecuado
respaldo y restaurado de sus valores. La desventaja de intentar usar el sistema
cartesiano desde un programa recae sobre la inexistencia de estas variables en
muchas Apps, el efecto es el error al intentar compilar el programa. No es
recomendable intentar usar el sistema cartesiano incorporado al desarrollar
programas, la alternativa es tratar los datos dando la escala y posicionamiento
deseado.

En las aplicaciones donde no existen estas variables, sí es posible usar coordenadas

cartesianas pero no manipularlas, la relación es 1 unidad = 10 píxeles, la
intersección de los ejes se aproxima al centroide de la pantalla obviando la zona de
menú.

Aclarando otro punto respecto a gráficos, es que las vistas redefinidas no traen
consigo la asignación de títulos (barra superior con hora y batería) como Vista
simbólica NuevaApp o cualquier variación diferente a lo ya conocido sobre interfaces
integradas y el concepto de la variable de gráfico G0 como gráfico estático.

Variables de aplicación: AVars

Las variables que asociamos a una aplicación son similares a las variables de usuario,
a diferencia que pueden ser usadas solo al posicionarnos en la App asociada, no
tienen restricciones adicionales. Se almacenan en un archivo con
extensión .hpappvar.

Para crearlos usamos AVars("NuevaVariable"); debido a que tienen un ámbito externo

deben crearse antes de usarse en nuestro programa de aplicación. Es adecuado
crearlo ubicándonos en nuestra App y crear la nueva variable desde Inicio con
AVars("NuevaVariable"):=Dato.
Aunque es posible usar estas variables sin problemas dentro de nuestro programa de
aplicación, este ocasionará problemas de compilación si la App es enviada por
primera vez a una nueva calculadora (se soluciona recompilando pero no es
adecuado), más aún siendo esta característica orientado a su uso poco frecuente, un
dato tipo resultado o de almacenamiento de valores. El uso correcto de las variables
de aplicación es con AVars("NuevaVariable") o EXPR("NuevaVariable"), como la
referencia es una cadena no genera inconvenientes con la compilación.

Las variables de aplicación son públicas, las podemos encontrar desde el cuadro de
herramientas/Aplicaciones/NuevaApp. Se eliminan con DelAVars.
Archivos en HP Prime: AFiles, AFilesB
La gestión de archivos fue implementado a partir del firmware 2015 04 27 (7820)
mediante la adición de las variables de aplicación AFiles, AFilesB y DelAFiles que
como se puede revisar en la ayuda de la calculadora, pueden crear archivos si no
existen, modificarlos, consultar sus bytes y eliminar el archivo especificado.

Gracias a esa implementación se permite crear con facilidad archivos, los cuales se
llenan con datos que provienen de cualquier variable que escojamos, luego estos
archivos pueden ser reutilizados en cualquier momento. Debemos entender como
principio de programación que los programas siempre se ejecutan con los datos
alojados en la memoria RAM (32MB), y los archivos se encuentra en la unidad de
almacenamiento (memoria flash 256MB), por esa razón debemos cargar su contenido
a variables y usar esos datos con normalidad.

Los archivos asociados en la aplicación se ubican directamente sobre la carpeta de la

aplicación, no es posible crear carpetas internas para organizar los archivos
creados o importados. Cualquier archivo puede ser enviado a la calculadora, pero no
podrán ser leídos sin un intenso esfuerzo, tener en cuenta siempre las limitaciones de
la calculadora.

El proceso de transferencia de datos de la memoria flash (almacenamiento) a la

memoria RAM tiene una velocidad menor respecto a una consulta equivalente de una
variable; por esta razón no es recomendable usar los archivos
insistentemente como si fueran variables locales de un programa, debemos usarlo
para almacenar datos que requieran ser consultados en otra ejecucción del programa
o en otra calculadora.

Con estas asignaciones hacia nombres de archivos mediante AFiles se logra enviar la
estructura del dato usado por HP Prime, exactamente como la usa la memoria RAM.
La reutilización de estos archivos en HP Prime es fácil gracias a que cada dato incluye
su tipo internamente, por lo que no requerimos de aspectos detallados como
declaración de punteros según el tipo de dato.

La variable AFilesB permite manipular los bytes del archivo, si solo usamos el
nombre del archivo retornará la cantidad de bytes que contiene el archivo (Tamaño de
archivo en bytes). Usando la variable AFilesB podemos inspeccionar los Tipos de
datos: Bytes de estrutura que nos ayudaría a exportar nuestros archivos a otros
sistemas.

La posibilidad de trabajar con archivos, llega a ser confuso si no se comprende el flujo

de uso, volver a recordar que un archivo pertenece a la unidad de almacenamiento
(flash memory) y la ejecución de programas se realiza siempre desde la memoria
RAM.

Imágenes PNG y JPG

Desde la liberación de las variables de aplicación AFiles, AFilesB y DelAFiles, se
integró conjuntamente un interpretador para archivos PNG. Posteriormente a partir del
peligroso firmware 2016 04 14 (10077), la calculadora agrega el soporte para
imágenes JPG. Los formatos mencionados estan soportados nativamente por la
calculadora y por esa razón su manipulación posee una velocidad muy adecuada.

Lectura: Envío a variable gráfica

Entendiendo que los archivos se leen asignándolos en variables (encontrar un medio

que lo almacene en memoria) tenemos el siguiente esquema
general, G1:=("imagen.png/jpg") para cargar la imagen en G1. Se puede cargar una
imagen directamente sobre G0.
Cargar una imagen en una variable gráfica significa colocar exactamente el contenido
del archivo (datos comprimidos) y tomar la misma dimensión, si el gráfico se edita se
convierte a datos por píxel para el manejo común de gráficos que puede
incrementar su peso considerablemente (datos sin compresión, 2bytes por píxel),
recordando que el contenido de las variables gráficas se conservan, por lo que es
aconsejable eliminar los datos que ya no usaremos al finalizar la ejecución y al mismo
tiempo aplicar los criterios de optimización en HP Prime para el envío de imágenes.
No confundir el archivo con los datos cargados, ambos datos no poseen el mismo
tamaño de bytes ya que los archivos se enfocan más al tratado de datos.

Un pequeño resumen sobre los formatos de imágenes, el cual es un tema extenso y

adicional, se afirma que ambos formatos aplican compresión de datos ya sea con
o sin pérdida de calidad. El formato PNG tiene la capacidad de conservar la calidad de
una imagen y permitir transparencias, posee tipos, filtros y métodos de compresión
que pueden destacar enormemente la diferencia de tamaño con otros formatos de la
misma imagen (en ocasiones), fue creado como sucesor del formato GIF, puedes ver
más en optimización de imágenes PNG. El formato JPG puede aplicar niveles de
compresión usualmente con pérdida, es muy útil para fotos, no es recomendable por
ejemplo para capturar la pantalla de la calculadora que posee el mismo color sobre
áreas grandes de píxeles.

Escritura: Creación de archivos

Podemos enviar las variables gráficas hacia archivos de imagen; el envío se realiza
respecto al gráfico completo, para crear el archivo de la imagen parcial se puede usar
SUBGROB para ; para crear un archivo PNG usamos AFiles("archivo[.png]"):=G1,
colocar la extensión es opcional puesto que el dato almacenado sigue siendo en
formato PNG.
Para una archivo JPG usamos AFiles("archivo.jpg",[1,100]):=G1 donde opcionalmente
podemos elegir el porcentaje de compresión (1%-15% compresión fuerte, 98%-100%
compresión baja), sino se especifica el porcentaje (calidad) se asume 60. Se
recomienda aplicar un porcentaje de compresión adecuado puesto que la creación de
imágenes desde la calculadora, como capturar la pantalla, puede crear un archivo
notablemente más pesado que si realiza en formato PNG.

Beneficio adicional

El beneficio es notorio, podemos leer nativamente imágenes en la calculadora; pero

también se puede sacar provecho a esto con fines de compresión de imágenes,
puesto que la calculadora posee un lector y generador de archivos para estos
formatos, es decir, posee algoritmos propios de compresión en base a la profundidad
de color de la calculadora. Logramos la compresión cargando y generando un nuevo
archivo.
 En este ejemplo se uso el logo de Facebook, que tenía transparencias y había sido
previamente comprimiendo en Photoshop, el tamaño se reduce considerablemente,
cuya causa puede ser la reducción de colores y bytes por canal. El logo aún puede
ser comprimido a un punto cómodamente visible con programas externos como Riot.

Conservando datos tras la ejecucción

Conservar datos resulta una tarea fácil para una App (en programas se intenta), todo
dato de configuración o almacenado por el usuario debe respaldarse en una variable
de aplicación (no recomendado por ser editables) o mejor aún con un archivo
asociado. La carga de estos datos hacia las variables de ejecución no es una tarea
complicada al llegar hasta este punto.

Las aplicaciones deben prestar un flujo contínuo y confiable, por esa razón
debemos realizar los preparativos para no tener pérdida de datos tras la recompilación
del código de la aplicación; el código es recompilado al enviar la App a una
calculadora nueva, al dar guardar desde el Kit de conectividad si tenemos abierta la
App, por último cuando se visualiza el código desde el catálogo de programas.

Para más pautas y conceptos puedes revisar cómo conseguir el almacenamiento

persistente de datos.

Resumen de archivos de una App

Una aplicación llamada "NuevaApp" es equivalente en Windows a una carpeta
denominada NuevaApp.hpappdir, que puede contener la mayoría de estos archivos:

 NuevaApp.hpapp → Identificador de app base, datos* de aplicación y configuración

 NuevaApp.hpappprgm → Programa de aplicación (Symb, Plot, Num, View, etc)
 NuevaApp.hpappvars → Definición y datos de variables de aplicación
 NuevaApp.hpappnote → Contenido de la vista de información
 Otros archivos → Archivos asociados a la aplicación (ícono, imágenes, textos, etc)

*Los datos de aplicación son todo dato modificable que posee una app integrada
como: la expresión F1 de App Función, definición de un círculo de App Geometría, las
celdas existentes de App Hoja de cálculo, Result de App Inferencia, las listas C1 y C2
de App Var 2 estadística, incluso los datos que aparentan estar vacíos poseen un
valor que los identifica en esa condición. En cuanto a datos de configuración de vistas
tenemos el formato de número, sistema angular, mostrar ejes, rango de ejes o el
nombre del archivo que será usado como fondo en la Vista de gráfico, etc.