# How to link Ximiliar app to Thukable

**URL:** <https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704>\
**Category:** Questions about Thunkable X\
**Created:** [March 31, 2022, 2:45am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704 "2022-03-31T02:45:58Z")\
**Posts on this page:** 15\
**Page:** 4

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 6, 2022, 3:27am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/63 "2022-04-06T03:27:16Z")

</div>

i mean , show me your thunkable screen that contains the label1 component - in design mode highilight label1 and show picture of whole screen. that’s where the label appears - not on your ximilar screen!

---

<div class="post-metadata">

**Author:** ![gsturm3605jl](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@gsturm3605jl](https://community.thunkable.com/u/gsturm3605jl)\
**Post date:** [April 6, 2022, 3:29am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/64 "2022-04-06T03:29:40Z")

</div>

![Screen Shot 2022-04-05 at 11.29.21 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/d/1d916e8dcde1489a82b161b7e93f300dc3ec59fb.jpeg)

I made it red

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 6, 2022, 3:32am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/65 "2022-04-06T03:32:46Z")

</div>

maybe this is one of those cases that works in live-test (at mobile) only, never at pc. have you tried that? (you need to download a thunkalbe app from play store to use)

---

<div class="post-metadata">

**Author:** ![gsturm3605jl](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@gsturm3605jl](https://community.thunkable.com/u/gsturm3605jl)\
**Post date:** [April 6, 2022, 3:33am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/66 "2022-04-06T03:33:39Z")

</div>

yes I have been doing all the “testing on my phone” since it only works on iOS and Android

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 6, 2022, 4:18am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/67 "2022-04-06T04:18:46Z")

</div>

> [@manyone](#):
>
> [Imgur: The magic of the Internet](http://i.imgur.com/fwxooMv.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/d/0d7d9acfa0615b3f9be41cdd4f391cc094a3c2e4.png)

---

<div class="post-metadata">

**Author:** ![gsturm3605jl](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@gsturm3605jl](https://community.thunkable.com/u/gsturm3605jl)\
**Post date:** [April 18, 2022, 2:26am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/68 "2022-04-18T02:26:03Z")

</div>

@muneer @tatiang  
@manyone has been amazing at helping with this project so far and has been doing most of the work. I was wondering if wither of you would be able to tag in for the next steps of the project. Manyone has gotten the Ximilar site to connect to thunkable which is great. I am now able to call a single “item” or "multiple(2) as of right now but the next step that I need is being able to take a picture and the button will tell me what it is, I have no idea where to go from here or how to do it but manyone says  
“unfortunately there is no thunkable block currently available that can convert an image to base64. if there you simply take photo, pass it through the converter and the resulting base64 can go to ximilar.”

I was wondering if either of you had a suggestion on how this might work. As of right now the app works by giving it a picture of the url and it tells me what it is. Now I need to be able to take a picture or upload a picture and the app will tell me what the picture is through the Ximilar (custom recognition) app.

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 18, 2022, 2:51am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/69 "2022-04-18T02:51:25Z")

</div>

as far as i know, ximilar can handle images in two forms:

1. via the \_url parameter - an actual image (.jpg, .png, etc) , with a specific URL (ie. accessible via any browser)
2. OR via the \_base64 parameter - its base64 equivalent, the full uncompressed base64 string

i read somewhere in the thunkable forums that the camera block used to have a convert-to-base64 function available but it was discontinued. IF it were available, you would just use it directly “inside” thunkable before sending it to ximilar.  
i’m pretty sure @muneer has a way of converting the image to base64 but via a webapi call. it just means you need to send your image “outside” then wait for its base64 string to return before you can send that to ximilar.  
@muneer, if you can point that to me, i’ll be glad to try it. (EDIT. i see the link at the top of the thread - i’ll try it later)

(here’s the descsription from ximilar regarding images)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/2/b2a221b89e786a741633f8b3ff16d6e5e51c546a.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 18, 2022, 3:08am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/70 "2022-04-18T03:08:55Z")

</div>

My thought would be to upload the photo to Cloudinary using the built-in Thunkable Camera blocks. That will generate a url. The downside is that uploading to Cloudinary can be slow.

If we had the ability to reduce file size before uploading to Cloudinary (see [(Thunkable X) Picture resize before uploading to MediaDB · Issue #224 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/224)), this would be simple and fast.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 18, 2022, 5:52am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/71 "2022-04-18T05:52:49Z")

</div>

As you have rightly guessed @manyone ,

This is my demo for images in Base64.

[https://x.thunkable.com/projectPage/61f68431c3761001dba12df1](https://x.thunkable.com/projectPage/61f68431c3761001dba12df1)

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 18, 2022, 9:31am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/72 "2022-04-18T09:31:03Z")

</div>

your demo provided the perfect solution, @muneer - as always.  
@gsturm3605jl , you should thank @muneer!  
his solution kills 2 birds with one stone. the file picker that comes with his routine will allow you to select a photo from the camera - OR - any photo from your gallery! and the photo selected is converted to base64 ready to use in the ximilar classifier.

you just have to do the following:  
add the following components to a new screen:  
web viewer, image, label, webapi

for webviewer, set the url to this:  
`https://izonemedia.w3spaces.com/file-to-base64.html`

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/9/d909c585a6be667d95adc645caf685862178386d.png)

set the image to 150x150 (you can try other sizes later - i havent tried)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/7/87fc93b7bc2833f130718709e56596833e101477.png)

then use the following blocks (@gsturm3605jl - look in your mailbox for link to my project - open it, select screen2 before doing live test)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/6/169a48684b9ae2abdfb87d261210a6741793a5fe.png)

the funniest thing happened when i tested the camera mode and switched the front and back cameras - look at how the ximilar classifier tagged me! i’m wondering about its accuracy!

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/f/1f9ae13977be51ded719f5c86dd50a62492565a8.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 18, 2022, 5:29pm UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/73 "2022-04-18T17:29:52Z")

</div>

> [@manyone](#):
>
> look at how the ximilar classifier tagged me! i’m wondering about its accuracy!

Nice catch.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 18, 2022, 9:44pm UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/74 "2022-04-18T21:44:12Z")

</div>

> [@manyone](#):
>
> for webviewer, set the url to this:  
> `https://izonemedia.w3spaces.com/file-to-base64.html`

You can create your own HTML file and host it in your server if you want.

This is the file I created. You can add style on it and other triggers if you wish.

```auto
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Convert local file to Base64</title>
    <script 
    src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
    type="text/javascript"></script>
  </head>
  <body>
    <input type="file" accept="image/*" onchange="encodeImageFileAsURL(this)" />
    <script>
      function encodeImageFileAsURL(element) {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function() {
          ThunkableWebviewerExtension.postMessage(reader.result);
          document.write('RESULT: ', reader.result);
        }
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![gsturm3605jl](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@gsturm3605jl](https://community.thunkable.com/u/gsturm3605jl)\
**Post date:** [April 19, 2022, 1:07am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/75 "2022-04-19T01:07:16Z")

</div>

That was it! It works Thank you all for everything @manyone ill probably still be in touch.

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [April 19, 2022, 1:27am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/76 "2022-04-19T01:27:26Z")

</div>

i’m glad i was able to help. i’m thankful for the help @muneer provided.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [July 18, 2022, 1:28am UTC](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704/77 "2022-07-18T01:28:23Z")

</div>

Closed on July 18, 2022, 1:28am UTC

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

[Previous page](https://community.thunkable.com/t/how-to-link-ximiliar-app-to-thukable/1810704.md?page=3)