[Solved] How Do I Connect Imagga API To Thunkable

[lwarren265]

Hello!

I am trying to make an app where a user can upload a photo and then when they tap on the photo a text will appear on the screen and tell them what color is where they tapped in the photo. It was suggested to me that I need to use the web API called Imagga. However, I am having trouble figuring out how the API works and how I need to connect it to my app.

I am first uploading the photo to Cloudinary and then I need to send the url for the image from there to the Imagga API. I am also uncertain of how to do this.

Here is my code so far:

The code to get it to upload to Cloudinary works perfectly! The code for Imagga, not so much.

Thanks for taking timme to look at my problem!

[tatiang]

You need to put the API call inside of the “do” section of the photo upload block. The way you have it, your app triggers the photo upload and then immediately triggers the API call without waiting.

But also, you need to give the API input in the form of your image. This is likely to be pretty complicated so I can’t simply tell you how to do it here. It’s helpful if you post a link to the relevant section of the API documentation.

[lwarren265]

Thanks for your help! Here is the link to the API documentation:
https://docs.imagga.com/#colors

[lwarren265]

I have done as you suggested and I have also played around a little bit with the coding.

My code works until it gets to the part about getting a property. The text box (label8) keeps displaying the word null. And I can’t figure out what is going wrong.

[tatiang]

Two things:

1. To troubleshoot JSON which is what an API returns, set a text input’s text value to the green response block and then copy (which is why I use a text input and not a label) and paste it into a forum post here. Make sure to include the full JSON and format it using the </> button in the toolbar above your post.

2. You can watch my API/JSON tutorial here to learn how to do what you want: API JSON Tutorial (Video)

[superfirstcousin0]

Hello!

I’m also tring to connect Imagga API but I always get this error message:

I think it is related to API Key information, that I’m not sure how or where I have to put it. I also attach the blocks I have programmed. Maybe the JSON response configuration can help @Iwarren265

Thanks in advance for your help!

[manyone]

you need to do the following instructions on how to use the api from imagga.com

1. go to your dashboard and click on the COPY icon and paste the contents into a temporary notepad
   

   

2. create these blocks for your program (see link below for remixing). paste the authorization string at the value pointed by the arrow.
   this example is for calling the endpoint for /colors - GET https://api.imagga.com/v2/colors
   the image being analyzed is
   https://imagga.com/static/images/tagging/wind-farm-538576_640.jpg

( the query parameter overall_count is optional). the desired property is the color_variance

this is the json segment

here’s the output

3. below is an example of obtaining the html code corresponding to the second image color
   
   

here is the json segment

and here’s the output

here is the full json (minified)

{“result”:{“colors”:{“background_colors”:[{“b”:44,“closest_palette_color”:“light bronze”,“closest_palette_color_html_code”:“#8c5e37”,“closest_palette_color_parent”:“skin”,“closest_palette_distance”:4.52967214584351,“g”:82,“html_code”:“#7e522c”,“percent”:51.0419311523438,“r”:126},{“b”:145,“closest_palette_color”:“cerulean”,“closest_palette_color_html_code”:“#0074a8”,“closest_palette_color_parent”:“blue”,“closest_palette_distance”:7.5955286026001,“g”:120,“html_code”:“#527891”,“percent”:48.7481651306152,“r”:82}],“color_percent_threshold”:1.75,“color_variance”:37,“foreground_colors”:[{“b”:37,“closest_palette_color”:“brownie”,“closest_palette_color_html_code”:“#584039”,“closest_palette_color_parent”:“brown”,“closest_palette_distance”:6.22881174087524,“g”:50,“html_code”:“#473225”,“percent”:53.2818565368652,“r”:71},{“b”:163,“closest_palette_color”:“sand”,“closest_palette_color_html_code”:“#c1b7b0”,“closest_palette_color_parent”:“light grey”,“closest_palette_distance”:4.85505628585815,“g”:179,“html_code”:“#c7b3a3”,“percent”:36.0360336303711,“r”:199},{“b”:192,“closest_palette_color”:“electric blue”,“closest_palette_color_html_code”:“#363b7c”,“closest_palette_color_parent”:“blue”,“closest_palette_distance”:14.8790979385376,“g”:0,“html_code”:“#0000c0”,“percent”:10.682110786438,“r”:0}],“image_colors”:[{“b”:44,“closest_palette_color”:“medium brown”,“closest_palette_color_html_code”:“#7c5a2c”,“closest_palette_color_parent”:“skin”,“closest_palette_distance”:4.31696796417236,“g”:83,“html_code”:“#7d532c”,“percent”:51.4569625854492,“r”:125},{“b”:145,“closest_palette_color”:“cerulean”,“closest_palette_color_html_code”:“#0074a8”,“closest_palette_color_parent”:“blue”,“closest_palette_distance”:7.94029760360718,“g”:121,“html_code”:“#537991”,“percent”:48.3985824584961,“r”:83}],“object_percentage”:1.51922690868378}},“status”:{“text”:“”,“type”:“success”}}

finally here is the project for remixing -copy screen ‘imagga’
https://x.thunkable.com/copy/0e431237483efaff64938496f6d310b0

[lwarren265]

I have tried playing around with all of your suggestions and now I am getting the word “null” pop up in the label I am using for error messages. I am confused as to why I am getting this.
I watched your video @tatiang and my web API url keeps displaying this message:
{“status”:{“text”:“Please provide content for processing.”,“type”:“error”}}
I don’t understand what this message means or why I am getting it. Help would be greatly appreciated!

[lwarren265]

Also this is what my code currently looks like:

I tried using @manyone 's suggestion and it is not working for me. I had to rearrange it to fit my project and it isn’t working either.
As always thanks for everyone’s help and suggestions!

[manyone]

first of all, the property you’re trying to get (overall_count) is not returned in the json string. you may have been looking at a different endpoint.
i don’t know how to refer to an image from a photo library.
for testing, can you replace the image url with an actual url to an image on the web? you can use the photo from the example

https://imagga.com/static/images/tagging/wind-farm-538576_640.jpg

and also try to get property ‘result.colors.color_variance’ just like mine
(it is important to use the correct property)

can you double check you variable name for auth_str? (compare to mine)

[superfirstcousin0]

Thank you so much!!! Now I’ve got it working!!!

[manyone]

Can you mark this thread solved. Thanks

[superfirstcousin0]

For me it’s done, but the person that begun with this thread is @lwarren265.
I don’t know if he has solved it all…

[lwarren265]

No. I still have not figured out my problem. What I am trying to do is quite complicated and has proved very difficult though all of your help and suggestions have been very helpful to me. I have been doing some coding and trouble shooting and am still working to figure out my problem.

[lwarren265]

I have done what you suggested here and have watched your video. (which was very helpful by the way) I tried troubleshooting and the API is not returning any JSON. This also occurs when I try plugging the url as said in your video into a search bar and again no JSON returns. I am unsure of where my error may be.

The url Imagga said to use is this: https://api.imagga.com/v2/colors
When put in the response bar it gets me the result of:
{“status”:{“text”:“Please provide content for processing.”,“type”:“error”}}

And when I try the url with my API key I get the result of:
Not Found

Could you please try to help me?

• Thanks -

[manyone]

have you tried what i suggested above? i know my example works. can you apply my blocks and parameters to your program just to see if you are getting the results?
the things you need are::

1. provide an image_url (use the example i gave)
2. provide the same object property in my example. youshould note that the property your request depends on the structure of the json you receive. (for example you just can’t request the property ‘overall_count’ if that key isn’t in the returned json string - i provided the returned json string for the call i issued).
   i just want to see if you can achieve the same results i got but while using your blocks!

[lwarren265]

Hello! Been away for a while coding! A teacher of mine solved the problem on her own and then passed her knowledge onto me. Which I now bestow upon you.

1. initialize a variable
   
2. Upload the photo to Cloudinary and then set the variable with the url Cloudinary returns:
   
3. Imagga can recognize up to five colors in an image. Here is how you get that information to populate onto the screen. You will need multiple text boxes.

• One to display the information and one to display an error message with the type of error if there is a problem.
• You will also have to initialize another variable it will be set up and defined later in the code

Since Imagga can recognize up to five colors in an image you have to say in your code what will happen if there are five colors or four colors or three colors, etc…

In Imagga you can ask for the Fancy color name but this code will get you the closet pallete parent. So the simple color name if you will.

Have fun coding!!

-lwarren265