Hi, I’m stuck and could use some insight / expertise again, please.
I’m building a lake/weather app as a b-day gift and want to use my icons, instead of what the Weatherbit API offers.
I can pull their icons into the app, no problem. I put my icons on a server using the same file names, but they’re not getting pulled in. I tried using the actual file path, instead of letting the API designate the icon, and still no luck.
Is it because I need an API, instead of a URL? If so, any suggestions on how to use my icons? Airtable or Base64 hosting or something else?
Weatherbit API URL and Block works fine
h ttps://www.weatherbit.io/static/img/icons/t01d.png (had to add a space after the h so it didn’t convert to the image)
My URL and Block, using a dynamic file path
h ttp://deangebert.com/lakewatcher/t01d.png (space after the h again)
My URL and Block, testing the direct file path
Do all 3 attempts (screenshots) fail to display the image? In my opinion, all three of those should work as long as your API response is correct and you’re parsing it correctly (it appears that you are).
What is the actual value of the property “data.weather.icon” when you access the API? Is it actually “t01d” or is it something else?
Can you provide the full url you are using for the API call (preferably as text, not a screenshot)? You can remove the key/authentication as I have a Weatherbit API account I can use.
Edit: sorry, upon reading over your post again, I see that the problem you’re having is displaying your own image. That should work fine! It can definitely be a url. Have you confirmed the value of Current Icon’s Picture? You can assign a label’s text to that and double-check that it’s the string you typed in (http://deangebert.com/lakewatcher/t01d.png).
What happens if you set Current Icon’s Picture to that same string when the screen opens? In other words, isolate that set of blocks to see if that’s the problem or if embedding it in (I assume) an API call block is the problem.
What do the rest of the blocks that are not visible in that last screenshot look like?
Thanks, @tatiang. I figured it should work. I read through a number of topics here and tried a handful of different approaches, but it’s still not working. Yet.
Hmmm, I’m not quite sure what you’re saying here. Should I try changing the “Partly cloudy…” text with the URL to see if it shows the URL?
Or am I misunderstanding and you’re suggesting I try something else?
I tried that, but it’s still not visible when I try to pull from my URL in a standalone
get block. I also tried changing the resize options, in case that was the culprit (i.e. stretch, contain, etc), but got no love.
Was a good idea, tho. I need to remember to isolate and re-test when something doesn’t cooperate.
</note to self>
Any other ideas? I’m thinking about trying this next. How to retrieve images with a Spreadsheet component
PS – whoops, forgot to add a screenshot of the rest of the blocks involved
This is mainly what I was wondering about:
Does that display your image? It should.
What I meant by “confirming Current Icon’s Picture” is that since you’re using join blocks and property blocks, there’s an assumption about what the value of that string should be but to actually double-check it, you have to do this after you set the Current Icon’s Picture:
Then, you can compare what you think that value/url should be to what is actually displayed in that label. If they are different, then you have a problem to solve.
(Hopefully it’s obvious that where I have Image5, you would have Current Icon.)
Ok, I’m making a little bit of progress with your debug block, which I placed above “Partly cloudy…”
I also tested 2 different things, now that it’s isolated and out of the larger API block.
I removed the debug block, changed
Main>Starts (this randomly fixed a bug a few weeks ago) + replace the hamburger with Current Icon = hamburger disappeared
I also tried a
click on the
AQI Circle image = no change (no icon visible)
So, the URL becomes visible in debug. And the Current Icon image won’t show up anywhere else, but it breaks the hamburger.
I’m thinking the problem isn’t with the blocks, it’s with the image – a) either a setting for my GoDaddy server, b) the image itself, or c) the Component in the Design screen.
I’m going to create and serve a new, clean image first. Then, I’ll dig into a) and c).
Thanks again for all your time and expertise!!
Hmm. Okay, I’m not sure why the static url assigned to an image isn’t displaying in your app.
It definitely works for me with your url.
My apologies! It does not work for me either. I assumed because I can browse to that url on my iMac that it would be fine but it doesn’t appear when previewing the project.
For whatever reason, you may have to host that image elsewhere. Cloudinary is an option.
NP, I’m sure I’ll figure out some way to make it work. Cheers!!
This is a CORS issue. What kind of server are you using to host your images? You CAN see the image when you test this on a device.
Hey @jared, it’s a shared Linux box on GoDaddy.
I’m glad it’s working, after all. I’ll download the Thunkable Live app and take it for a spin tonight. Thanks!!
Ayooooooo, the icon works on Live Test!! Thanks tons, @jared and @tatiang.
Unfortunately, transitioning to the Thunkable Live app isn’t rendering the designs accurately. They really made it look like crap.
In createLogin, there are a handful of assets that are breaking. The toggle switch, Create button, and Reset text are all different than Design.
Fortunately, everything is mostly the same on mainScreen. The high and low temps below Feels like,
sunrise and sunset, and the ft and º labels are displaced.
It seems logical to offer the ability to hide/remove the bottom nav in the app, so people can do an accurate UX/UI review.
Without it, I’ll be iterating until the cows come home. It’ll probably be faster to use XCode and an apk to test on devices.
Personally, I wouldn’t have pushed this version live with QA fails like this. But, at least I can see the icons are being pulled from my server and that was the primary exercise here.
I’ll create a separate topic for the asset breakage/displacement and screen squishing. Hopefully, Thunkable is paying attention to these topics.
Thanks again, guys. It’s another step closer.
I really like your interface and design. Has a nice feel to it. Welcoming and clean but still full of data.
I’m curious how you’re pulling Air Quality values. I ran into an issue with the PurpleAir API that took me past their quota and I haven’t worked on my app since. It was fine for a couple dozen people to use but I really wanted to release it to a larger audience.
Thanks for the kind words. I appreciate it.
But, I’m afraid I can’t tell you about my AQI source. It’s an industry trade secret. (totally kidding!!)
I’m pulling Air Quality, Baro, and UV from Weatherbit. The MVP will be a bday gift and won’t be commercially available, so I can use their free plan. But when we’re done testing and ready for v1, I’ll pay for the lowest plan(s).
At that point, I’ll pull / store / update the data from both APIs every ~20-30 minutes. It’s not quite real-time, but for those 3 metrics, it’ll suffice.
-Weatherbit API - Pricing
-Weather Data & Weather API Pricing | Visual Crossing
And I settled on those APIs by going through a bunch of lists, like these.
-Top 8 Best Free Weather APIs (2021) [25+ Reviewed]
-6 Best Free and Paid Weather APIs | Nordic APIs |
-5 Examples Of Successful Free Weather APIs | APILayer Blog
-The Top 9 Weather APIs for 2022
-7 Trusted Weather API Solution for Your Smart Products
Haha! I took you seriously for a moment there.
Appreciate you sharing the details and links. I’ve used Weatherbit for weather data but I’ll take a look at their Air Quality offerings. I’m really partial to PurpleAir as you saw from my post but I’m up for considering alternatives.
The Visual Crossing “metered” pricing is intriguing.