# Pixel information

**URL:** <https://community.thunkable.com/t/pixel-information/76049>\
**Category:** Questions about Thunkable X\
**Created:** [May 9, 2019, 7:23am UTC](https://community.thunkable.com/t/pixel-information/76049 "2019-05-09T07:23:22Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 7:23am UTC](https://community.thunkable.com/t/pixel-information/76049/1 "2019-05-09T07:23:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 8:36am UTC](https://community.thunkable.com/t/pixel-information/76049/2 "2019-05-09T08:36:11Z")

</div>

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](https://docs.thunkable.com/media-db).

Are you making some sort of photography app?

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 9:01am UTC](https://community.thunkable.com/t/pixel-information/76049/4 "2019-05-09T09:01:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 11:51am UTC](https://community.thunkable.com/t/pixel-information/76049/5 "2019-05-09T11:51:18Z")

</div>

> [@Chanda\_Simfukwe](#):
>
> Not really, Using artificial intelligence image recognition component,

The [image recognizer](https://docs.thunkable.com/image-recognizer) or are you using a third-party API?

> [@Chanda\_Simfukwe](#):
>
> MediaDB component give you access to see the image pixels?

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?

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 12:10pm UTC](https://community.thunkable.com/t/pixel-information/76049/6 "2019-05-09T12:10:03Z")

</div>

@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…

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 11:41am UTC](https://community.thunkable.com/t/pixel-information/76049/7 "2019-05-09T11:41:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 12:13pm UTC](https://community.thunkable.com/t/pixel-information/76049/8 "2019-05-09T12:13:49Z")

</div>

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

> [@Pixel information](http://community.thunkable.com/t/pixel-information/76049):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 12:33pm UTC](https://community.thunkable.com/t/pixel-information/76049/9 "2019-05-09T12:33:49Z")

</div>

@domhnallohanlon yes it is.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 12:44pm UTC](https://community.thunkable.com/t/pixel-information/76049/10 "2019-05-09T12:44:08Z")

</div>

Ok, please do not create duplicate topics.

I’ve merged everything back into your original post.

> [@Chanda\_Simfukwe](#):
>
> How can you detect the color intensity

Are you trying to get HSL or RGB values?

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 12:46pm UTC](https://community.thunkable.com/t/pixel-information/76049/11 "2019-05-09T12:46:09Z")

</div>

@domhnallohanlon

HSL

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 12:53pm UTC](https://community.thunkable.com/t/pixel-information/76049/12 "2019-05-09T12:53:08Z")

</div>

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](https://www.rapidtables.com/convert/color/rgb-to-hsl.html)

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 12:57pm UTC](https://community.thunkable.com/t/pixel-information/76049/13 "2019-05-09T12:57:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 1:02pm UTC](https://community.thunkable.com/t/pixel-information/76049/14 "2019-05-09T13:02:33Z")

</div>

> [@domhnallohanlon](#):
>
> 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.

Yes, you can get the hex values for the [32 most common colors](https://cloudinary.com/documentation/upload_images?query=histo&c_query=Semantic%20data%20extraction#semantic_data_extraction) 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.

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 1:07pm UTC](https://community.thunkable.com/t/pixel-information/76049/15 "2019-05-09T13:07:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 1:17pm UTC](https://community.thunkable.com/t/pixel-information/76049/16 "2019-05-09T13:17:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 1:29pm UTC](https://community.thunkable.com/t/pixel-information/76049/17 "2019-05-09T13:29:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [May 9, 2019, 1:34pm UTC](https://community.thunkable.com/t/pixel-information/76049/18 "2019-05-09T13:34:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chanda\_Simfukwe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chanda_simfukwe/32/32125_2.png) [@Chanda\_Simfukwe](https://community.thunkable.com/u/Chanda_Simfukwe)\
**Post date:** [May 9, 2019, 1:38pm UTC](https://community.thunkable.com/t/pixel-information/76049/19 "2019-05-09T13:38:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:13pm UTC](https://community.thunkable.com/t/pixel-information/76049/20 "2024-11-08T12:13:52Z")

</div>


