ColorFilter - Apply a color filter to an image or change a specific color within that image (icon), and detect colors in the image.

ColorFilter
Apply a color filter to an image or change a specific color within that image (icon),
and detect colors in the image.

Single color:

Screenrecorder-2025-10-20-02-32-43-314-1

Specific color of the image with different colors:

Screenrecorder-2025-10-20-02-35-02-329-2

Download image with color applied:

Screenrecorder-2025-10-20-02-33-48-56

Downloaded image capture

The downloaded image (png):

TestImageFilter


Note:

  • Use Download function only for icons with a single color.
    • At the moment, the downloads of the icons with various colors are pixelated, so I'll leave it pending.

DetectAllColors

Detects all unique colors in an image and returns a list of colors in hexadecimal format.


DetectionTolerance

Sets the tolerance for detecting unique colors (0-100). Higher values ​​group more similar colors together.

Default: 15


ReplaceColor

Replaces a specific color in the image with another color

Colors can be in any of the following formats:

color_red

text (1)

blocks (8)


ColorTolerance

Sets the tolerance for color replacement (0-100). Higher values ​​replace more similar colors.

Default: 22


DetectedColorsCount

Gets the number of unique colors detected in the image.


ApplyColorToList

Applies color filters to multiple components. Like buttons and image.

  • Each color in the list will change the color of the same position where the component is located.

  • If only one color is provided, it is applied to all components.


LoadImage

Load an image from a path to an image component.


Download

Download the image with the filter applied to the Downloads folder.

  • In width and height you must put the same measurements of the image you upload or a smaller amount, since if you put a higher amount it will be downloaded pixelated.

  • Available formats: png, jpg.

  • Use Download function only for icons with a single color.


ApplyColor

Applies a color filter to an individual Image component.


ClearFilters

Clears all filters and color replacements applied to an image.


ColorsDetected

Triggered when unique colors have been detected in an image.

component_event (2)


ImageSaved

Fired when the filtered image has been successfully saved.

component_event


ImageSaveError

Fires when an error occurs while saving the image.

component_event (1)


v1.0 Oct 20, 2025.

ColorFilter.aia (43.5 KB)

joejsanz.joedevcolorfilter.aix (15.7 KB)


JDK: 11
Minimum API Level: 21
Updated On: 2025-10-20T07:00:00Z

Built using: FAST-CLI v5.2.2-premium


Thanks.

5 Likes

Hello @Joejsanz .

I want to ask you a question about colors in a image.
Do you know how can i make a filtering in a captured image (a photo), and filter from the RGB the REDS only. I want to separate the lower reds from the upper reds.
Any idea you can share will me will be apreciated.

Pd. I can make it with an html and javascript, but i want to insert this in the AI2 scheme and i cannot do it. that's the reason of asking this. I need help to move forward

1 Like

I have an idea, you mean color separation, like how it is separated in screen printing?

Could you show me an example of what you expect to be displayed?
An image would help me get a better idea.

Perfecto, yo en la semana te envio el ejemplo en el que estoy trabajando. Si se puede me gustaria enviarte un mensaje privado, por que es MUY LARGA DE EXPLICAR LA APLICACION DE ESTO, Y ME PARECE QUE SI VOS PODES, YO TE COMPARTO EL CONTENIDO Y LUEGO HACES UNA PUBLICACION CON TODO EL CONTENIDO AL QUE PUEDAS LLEGAR A DESARROLLAR, TE VA A SERVIR MAS A VOS. SOLO LO PIENSO, NO NECESARIAMENTE TIENE QUE SER ASI. ES PARA NO HACER UNA PUBLICACION GIGANTE, LA DESCRIPCION QUE TE TENGO QUE HACER ES MUY, MUY LARGA, PERO VERE DE SER LO MAS CONCRETO POSIBLE.
MIL GRACIAS. JOE.
PD. Escribi en castellano por que se que me entiendes. Nada mas que por eso.

and most of your post in CAPS!

1 Like

Please no CAPS LOCK. Thank you.
Taifun


1 Like

Sorry @TIMAI2 and @Taifun.

My mistake.

My brain was switched in spanish and i keep writing as i write in spanish (remarking writing in capslock).
Well. Obviously i will write a long, long text for explain this. :smiley:
Again. Sorry for my mystake. (i was in auto mode).

Lo que buscas es algo asi?

Separacion de colores RGB, tiene el umbral inferior en 0 y superior en 255




Y este es umbral inferior: 90 y superior: 150



Hola Joe.

Acá te paso lo que busco.
De antemano pido disculpas por lo engorroso que va a ser leer esto y espero no saltarme ninguna norma como la vez anterior. :slight_smile:

Yo estoy intentando hacer una app que según un análisis (visual) y matemático, reconozca el grado de salud de una planta.
Para esto se necesita por lo general que se use una camara que tenga un sensor IR (infrarojo).
Al faltarle el IR a la gran mayoría de los dispositivos móviles, lo que pienso hacer es usar una transformación matemática para que del RGB tome los rojos altos y los muy altos, como si fueran un PSEUDO IR. ¿Me explico? que los rojos muy altos sean tomados como IR, ya que no están lejos de ser eso, conceptualmente.

No es lo mejor, pero se puede hacer.
A esta transformación se la utiliza dentro del estudio de GIS. (software de información geográfica) y se usan imágenes de satélite que tengan bandas visibles e infrarojas de varios tipos. (cercana, media, lejanas... o sea termicas).
Yo quiero hacerlo con el visible y desde un telefono (en vez de con un satelite y con bandas infrarojas)
En fin. no te quiero molestar con tanto dato.

Yo lo que quiero es de una imagen RGB, que separe los valores de los ROJOS, y los separe en 2 ramas. Los rojos que estén dentro de un umbral que pueda determinar yo mismo, por ejemplo:.

Los Rojos que equivalen al 240 a 250 (tomarlos como INFRAROJO). Y hacer un balance sobre ellos.
Yo tengo un html que pude armar en función de esa necesidad. (pero no lo puedo subir).
Yo en el ejemplo use valores desde el 0 al 127 y del 128 al 255. Es solo un ejemplo que puedo variar a mi gusto. A esto me gustaría tener la posibilidad de ponerlo yo como parte de una opción de la extensión, ejemplo: umbral mínimo del rojo, umbral máximo del rojo, incluso separar en mas secciones el rojo también seria útil o usar lo mismo para el azul (el verde no importa, no tiene utilidad cientifica). el azul es del ultra violeta y el rojo del infrarojo.
El tema es que a este filtro me gustaría poder cargarlo a voluntad, como si fuera una extensión o si alguien me ayuda ajustarlo para poder cargarlo y luego ejecutarlo a través de html dentro de una app.

use un filtro de transformación de colores en imágenes usando canvas en Javascript, (el único color afectado debe ser el rojo, con valores mayores a 127 pasa a rojo de 255, y los menores a 127 pasan a AMARILLO) este ejemplo usa esos valores.

La app tendría un botón para cargar la imagen (fotografía de la planta con todos los canales del RGB), un boton para ejecutar esta transformación y un botón para exponer los cálculos matemáticos y mostrar una matriz matemática que equivale a la transformación -que se ejecuto-.

en el ejemplo que te paso (por ser un html) solo esta el botón para cargar la imagen, la imagen con la transformación y el negativo.

(Lo único que me falta es la carga y el filtro de la imagen), el análisis matemático y conceptual para cualquier caso, yo ya lo tengo hecho.

No es mas que eso.

Esto no tiene una aplicación económica, pero si una aplicación ACADÉMICA, y prometo compartir el crédito académico con el que me ayude a realizar o alcanzar la resolución de este proyecto.

Yo a este proyecto lo encaro desde el punto de vista geológico, por que es para mi tesis de grado. (licenciatura en geología).

La app va a servir para analizar centenares de plantas, catalogarlas con este análisis y luego generar un informe en función a los datos recopilados.
Insisto que compartiré el crédito académico con el que me ayude a terminar de desarrollar la app. Este es el ultimo paso.
Transformar el html en algo viable desde la app, poder cargarlo en una rutina que pueda ser ejecutada con unos botones dentro de la app para que muestren las imágenes y los datos del análisis. NADA MAS.

Adjunto imágenes , pero no puedo subir el html. Como hacemos con el html?
Quedo a tu disposición sobre el html.

images (1)

Snap328

1 Like