Comunidad Gambas-es
Los iconos, los colorines y la madre que los parió - Versión para impresión

+- Comunidad Gambas-es (https://gambas-es.org)
+-- Foro: Gambas (https://gambas-es.org/forumdisplay.php?fid=3)
+--- Foro: General (https://gambas-es.org/forumdisplay.php?fid=4)
+--- Tema: Los iconos, los colorines y la madre que los parió (/showthread.php?tid=1036)



Los iconos, los colorines y la madre que los parió - Shordi - 18-09-2022

Con el reproductor de sonido me ha surgido otro problema interesante que hasta ahora había detectado pero al que nunca me había enfrentado en serio, el de los iconos y los temas oscuros.

Nunca he sido partidario de usar iconos propios en los programas, no por principios si no porque hay que incluirlos en el ejecutable (o no, pero ese es otro tema que veremos más abajo) y este empieza a tomar dimensiones exageradas y volverse pesado. Por eso siempre utilizo, cuando es posible, los iconos del stock de gambas. Apropiados, adaptados y a tu disposición en un par de clicks.

El problema surge cuando necesitas un icono que no existe en el stock. Tienes entonces que utilizar una imagen que pilles por ahí o hacer una con gambas o con gimp o con lo quieras o crearla en tiempo de ejecución mezclando iconos. Este último método me ha servido muchas veces. Si queremos un botón que abra el diálogo de búsqueda buscamos en el stock el icono de la lupa. Si queremos un botón (o el mismo) que cierre el diálogo de búsqueda mezclamos la lupa con el icono de cerrar, así:

GAMBAS
  1. miButton.picture=MixIcons(stock["24/find"], stock["16/cancel"]) 'nótese que el segundo Picture, que es el que queda sobre el otro es más pequeño para no taparlo del todo
  2.  
  3. Public Sub MixIcons(pic1 As Picture, pic2 As Picture) As Picture 'Une dos Pictures
  4.  
  5.   With paint
  6.     .Begin(pic1)
  7.     .DrawPicture(pic2, 8, 8, pic2.W, pic2.H) 'nótese que las coordenadas del segundo icono están desplazadas de manera que aparezca en la esquina inferior izquierda.
  8.     .End
  9.   Return pic1
  10.  


Y todo queda muy bonito con un botón que muestra una lupa con una X roja delante... o no, que luego le pasas el programa a tu primo, que usa otro tema de escritorio de otra distro distinta y le aparecen unos prismáticos con una x gris delante, o vaya usted a saber qué... pero no importa porque la idea de lo que quieres expresar es clara y nadie se queja.

Sin embargo hay ocasiones en que ningun icono ni mezcla de iconos del stock nos vale y tenemos que incluir la imagen en nuestro proyecto. No problema, es fácil y queda bonito... hasta que utilizas un tema Oscuro de escritorio. Gambas, al detectar un tema oscuro, invierte los colores de todas las imágenes, de manera que si tu icono era una X negra sobre el fondo gris clarito de un tema claro aparecerá como una X blanca sobre el fondo oscuro de un tema oscuro. Eso está perfecto para los iconos del stock, pero puede volver una imagen muy bonita en una mierda ininteligible como no te andes con ojo.

No hay problema, esa inversión sólo se produce para iconos que se asignan en el ide, si los asignamos vía código no se invierten, mantienen sus colores... que pueden ser un desastre cuando el usuario utiliza un tema de escritorio distinto del nuestro (o nosotros nos hartamos y lo cambiamos).  ¿Cómo nos aseguramos entonces de que la visualización de nuestro programa es siempre la adecuada? He aquí la cuestión.

La solución que he encontrado es la siguiente:

1.- Creas (copias, fusilas, pirateas o diseñas), un set de iconos adecuados para la visualización por defecto de tu programa, escritorio claro, por ejemplo, y lo (de momento) ubicas en una carpeta dentro del raiz de tu proyecto.

2.- Creas (copias, fusilas, etc.), otro set de iconos, con los mismos nombres, para la visualización en temas oscuros y la ubicas dentro de otra carpeta distinta de tu proyecto.

3.- Asignas por código los iconos adecuados a los controles según el tema sea claro u oscuro (Application.Darktheme = true)

Tanto rollo para acabar con esta tontería artesana... que no soluciona todos los problemas ni mucho menos.

Problema A: El ejecutable se te hace de un tamaño innoble.

Problema B: Si tu programa dispone de mecanismos de adaptación de colores por el usuario, o si el usuario tiene un tema de escritorio con colores personalizados o inusuales, los iconos pueden quedar horribles

Solución al problema A: Colocas las carpetas de los iconos dentro de la carpeta .Hidden de tu proyecto de manera que no se incluyan en el programa y las incluyes como archivos asociados al mismo a la hora de crear el paquete de instalación diciéndole que los copie en user.home &/ ".local/share/icons/"& Application.name. Luego en tu programa estableces una variable según el tema de escritorio y asignas los iconos según el tema.

GAMBAS
  1. Private sub AsignaIconos()
  2.  
  3. dim PathIcons as string = user.home &/ ".local/share/icons" &/ Application.Name & "/"
  4.  
  5. if Application.DarkTheme then
  6.   sPathicons &= "Dark"
  7.   sPathicons &= "Clear"
  8. miButton1.Picture=Picture.Load(sPathicons&/"icono1.png")
  9. miButton2.Picture=Picture.Load(sPathicons&/"icono3.png")
  10. ......
  11. .....
  12. 'etc, 'etc.



Solución al problema B:
No permites al usuario cambiar los colores del programa o incluyes en tu programa un "Editor de temas" que le permita cambiarlos de manera que le sean agradables.

Con el Reproductor de sonido me he encontrado este problema y he optado por, en principio, crear dos Temas: uno similar al que presenta Audacious (Si, otra vez) con fondo negro y fuente azul, para el que he diseñado una serie de iconos, y otro que es el tema de escritorio, con iconos del Stock. De momento lo dejo así, dejando para un futuro inmediato la creación de un editor de Temas, tal como hice para el programa Soprano, que permita al usuario crear sus propias "Skins", que es como lo llamaban en el viejo Winamp.

Perdón por el ladrillo.

Saludos


RE: Los iconos, los colorines y la madre que los parió - Shell - 18-09-2022

No tenía ni idea que pasará eso con los iconos y los temas oscuros.
Algo he visto con las imágenes, una inversión de esta.

Seguro que hay otra posibilidad que puedes no haber contemplado. Quizás necesites dominar un poco más  Gimp,
la características de la imagen que estas tratando.

¿ Qué te parece crear algún ejemplo sencillo para que todos veamos el problema ?.
Con alguna imagen ajena al stock que sepas que produce ese efecto. Sin ejemplo practico no vemos, no podemos probar
e incluso usuarios de gambas que son de otros idiomas no van a entender un post largo que no está en su lengua.

¿ Has probado la clase image en vez de picture ?.

Saludos


RE: Los iconos, los colorines y la madre que los parió - Shordi - 18-09-2022

Da igual la imagen que pruebes en el control que pruebes: Si la imagen se asigna en el IDE, en la propiedad .Picture, por ejemplo. Sale invertida si tu escritorio tiene un Tema Oscuro. Si la asinas por código sale bien.

No puedo subir un ejemplo porque para verlo tienes que cambiar el tema del escritorio.

Saludos.


RE: Los iconos, los colorines y la madre que los parió - tincho - 18-09-2022

La solucion para todo este asunto yo la encontre usando iconos propios en formato .SVG que al ser vectorial no ocupa nada de espacio, por ejemplo 75 iconos ocupan 98 Kb es decir 1.3 Kb por icono de pormedio, luego en el tema de escritorio oscuro o claro al cargar los iconos pregunto al sistema (con código gambas) si es Dark o no y de acuerdo a eso cambio el color del icono y listo.
Dejo unos pantallazos de GauchoSketch dode todos los iconos son .svg
[Imagen: x01H1kv.png][Imagen: Q3cIWdh.png]


RE: Los iconos, los colorines y la madre que los parió - Shell - 20-09-2022

 Shordi:
 
Cita:Da igual la imagen que pruebes en el control que pruebes: Si la imagen se asigna en el IDE, en la propiedad .Picture, por ejemplo. Sale invertida si tu escritorio tiene un Tema Oscuro

Lo pruebo.


Tincho:

muy chulo GauchoSketch.

Los iconos son muy chulos,  parecen ligeros. Desde luego no es el mismo tipo de imagen.
Parece que Gimp no trabaja directamente con los SVG.

No es un formato que use mucho. Distinto sería si combinamos archivos pdf, conversión, un formulario.
Recuerdo una utilidad llamada InkScape, es un editor.

InkScape
 
(18-09-2022, 18:24)tincho escribió:  por ejemplo 75 iconos ocupan 98 Kb es decir 1.3 Kb por icono de pormedio,

Hay una utilidad "Oh My SVG" que parece que reduce el tamaño de estos. En la Linux MInt 20.3 viene como FlatPack, que raro
no trae ni la web a la que pertenece.

Oh My SVG

Cuestión de probar cuando se necesite.

Saludos


RE: Los iconos, los colorines y la madre que los parió - tincho - 20-09-2022

(20-09-2022, 13:41)Shell escribió:  muy chulo GauchoSketch.

Gracias.
(20-09-2022, 13:41)Shell escribió:  Parece que Gimp no trabaja directamente con los SVG.

Gimp es un editor de imagenes, de pixeles digamos, y como SVG es un formato vectorial lo importa pero antes lo convierte en un aimagen.
Como bien dices, InkScape es el editor de archivos SVG mas extendido en linux pero no el único.
(20-09-2022, 13:41)Shell escribió:  Hay una utilidad "Oh My SVG" que parece que reduce el tamaño de estos

Gracias por el dato pero para los iconos que uso no es necesario ya que son realmente muy simples. Si que uso un programa llamado svgcleaner que es para la terminal de linux y limpia toda informacion superflua y deja solo lo imprescidible ya que por ejemplo inkskape agrega mucha indormacion de texto que en realidad no es util para representar los graficos.
(20-09-2022, 13:41)Shell escribió:  No es un formato que use mucho. Distinto sería si combinamos archivos pdf, conversión, un formulario.

Claro sube el programa y le echamos un vistazo, sobretodo poeruqe el componente de pdf cambio ultimamente en gambas.


RE: Los iconos, los colorines y la madre que los parió - Shell - 22-09-2022

(20-09-2022, 20:14)tincho escribió:  Claro sube el programa y le echamos un vistazo, sobretodo poeruqe el componente de pdf cambio ultimamente en gambas.

No tengo problemas con svg. Blush
Dese luego el editor de svg es para hacer un curso como el de Gimp. Tiene muchas cosas.

Solo que recuerdo una aplicación de Julio que trataba los formularios (que era en papel).
Se escaneaba y se creabas el pdf. Y luego de este se convertía a svg, había que localizar
la entrada de texto (la caja) para poder escribir en ese lugar y se aprovechaba ese formulario 
convertido y no quedaba mal. Habrá otros inventos.

Saludos


RE: Los iconos, los colorines y la madre que los parió - tincho - 22-09-2022

(22-09-2022, 14:20)Shell escribió:  No tengo problemas con svg. Blush

¿Pero que hace tu programa exactamente? Sinceramente no entiendo a donde vas a parar con lo que escribiste, estamos hablando de los iconos y del problema del color en la carga con temas oscuros o claros y tu comentas sobre inkskape o gimp etc, creo que independientemente de tu buena intención no aporta nada al tema, pero bueno es una opinion personal.