Pixel information

Questions about Thunkable
1

Is it possible to collect pixel information from an image in thunkable and plot a histogram or graph from the pixel data collected? if possible, please advice or give me a clue on how to.

2

Hi @Chanda_Simfukwe,

I’ve never tried to do something like this, however there are lots of great options in the Cloudinary API that you can access via the MediaDB component.

Are you making some sort of photography app?

4

Thanks for the reply @domhnallohanlon

Not really, Using artificial intelligence image recognition component, can you correct the image pixels information and use the data to plot a graph? Please advice.

@domhnallohanlon
or does the MediaDB component give you access to see the image pixels?

5

The image recognizer or are you using a third-party API?

I took a look this morning and it gives you a JSON response with the top 32 colors in your image, which you could then use to plot a histogram from.

Not sure if that’s what you’re looking for though - can you tell us a bit more about your app? Who will your main users be?

6

@domhnallohanlon

I am about to start developing an app, were i will be using RGB pixels values from an image to plot an histogram graph… i am developing it for my science research project… i will be taking images of some samples we collect in the lab…

7

How can you detect the color intensity RGB values from an image, if you just upload an image in an app? Please advice.

8

@Chanda_Simfukwe isn’t this just a continuation of this topic?

9

@domhnallohanlon yes it is.

10

Ok, please do not create duplicate topics.

I’ve merged everything back into your original post.

Are you trying to get HSL or RGB values?

11

@domhnallohanlon

HSL

12

Unfortunately reading HSL values is not possible with any of our built-in components. Perhaps you can find an API that will generate the required information for you?

As outlined above, you can send your image to the MediaDB, get the hex values for the 32 most common colors and what you can then do is use a formula like this to calculate the HSL values:

https://www.rapidtables.com/convert/color/rgb-to-hsl.html

13

Thank you very much for the response, what of RGB values is it possible?

14

Yes, you can get the hex values for the 32 most common colors in the image from the MediaDB, and actually you’ll probably need to to a hex to rgb conversion first, since I don’t think Thunkable will handle base 16 arithmetic.

15

Any hit you can give me on how i can go about collecting the RGB values for an image from the MediaDB? i will go through again, if i have further questions i will post. Thank you very much for your assistance.

16

I think you’ll have to set up your own Cloudinary acccount then:

  • Send the image to the mediaDB
  • Get the mediaURL from the MediaDB
  • Use the ID to get the HEX values
  • Convert HEX to RGB
    *Convert RGB to HSL

This sounds like quite an involved project - is this your first Thunkable project?

Just our of curiosity, what sort of imaging are you doing? Are you a biologist?

17

No its not my first project, i have been developing apps on Thunkable, i am using an image of the lateral flow strip immunoassay and i am research student in science related fields. Is it possible to convert HEX to RGB and RGB to HSL within the app or i have to do it manually?

18

Cool, sounds very interesting.

You’ll have to create a function yourself to do these conversions, but there are already similar posts about this in the community.

19

Okay thank you, and what about Histograms in Thunkable, any available extensions?