Need help with html

How can i visualize this script in web viewer?

Hi @Balanced_Kitchen,

See this post:

Navigate to the srcHtml screen to see an example. I’ve used this before and it works.

1 Like

Does this work for iOS devices?

To my knowledge, yes. Unless the Web Viewer has changed since I last tested this but I have had success with it using Wordpress API and a Web Viewer.

Does this work with JavaScript or only html?

I’ve never gotten JavaScript to kid eith this method. I gave up a while back. I remember it working on android but not iOS.

I used quickchart.io until the webviewer POST method was released for this exact reason.

I don’t believe this is to do with graphs :thinking: Looks like it is to do with playing audio?

1 Like

Yes! Playing audio.
https://www.muses.org/

Sorry. I was more referring to the script in the snippet above. This is JavaScript. It was my understanding that JavaScript doesn’t work in the method mentioned above. I though to use JavaScript/interact eith the browser you have to use the webviewer POST command

1 Like

Could you show me how?

@Balanced_Kitchen if it’s just an audio file you could host it via Cloudinary (this is possible if you set the file type to be a video, see here). You could also use a service like AWS.

See Thunkable Docs on the Sound Component.

I want to make something more beautiful!
For example:
https://x.thunkable.com/copy/aaa9c77ca2de35943164c993a8749516

Thunkable is extremely powerful. It is possible to recreate something like this in the designer. The only external piece you will need is a gif of some sorts that has the colourful background. Everything else is pretty straight forward.

(edit)

I made this up pretty easily: https://x.thunkable.com/projects/5ec84ac2e946332eaa1c64ee/1f47fdbf-e15f-45bd-b5c5-403b5da48398/designer

Basic gif background, I just nabbed this off of Giphy, used an online editor and a little bit of Photoshop to get the circle to fade out seamlessly around the edges. Basically I went ham on the blur. The original gif is square and so I just made up an overlay with a black background and the circular cut out in the middle.

I just fired in some components, the ring around the edge breaths. I didn’t bother looking too hard for a gif like yours but I thought I’d show you a way about doing something like the example you provided :slight_smile:

Ideally you’d want to import the gif into something like PS, then make it rounded instead of using an overlay. This way you can change background however you like inside of Thunkable.

This is a very good idea. Thanks @eoinparkinson

I added information to the scrHTML page that my solution using the data URI does not work in the installed app on iOS.

To work with HTML, use WebViewer and the new PostMessage function. A universal example can be viewed on the scrExchange screen in the ACTech demo 2020 project.

But I think your example won’t work because of a security policy violation. It will work if you place it on a web server and use a link to it in the app.

2 Likes

Sound Component can’t play live streams for iOS. That’s a problem for me!

Use WebViewer for this.

2 Likes

It is possible to use WebViewer as @actech has said above, and also the video player component. I don’t know the exacts on which file formats are supported but here’s a test stream that I just grabbed from an m3u. http://pri.gocaster.net/highlandradio This plays on WebViewer and Video Player. You can use buttons to set the video player to play/pause.

I am unsure if Apple or Google will allow active invisible components.

1 Like

See my example. Perhaps it will help you.

scrRadio in the project https://x.thunkable.com/projects/5d70f93f8a62b4079eedaff2/project/properties/designer/

2 Likes

This platform has a lot of features, but also so many limitations. The sound component does not work properly under iOS and this requires the use of a web viewer. But then you are limited in using only “play” and “stop”. And the result is an ordinary player, but I like it.
https://x.thunkable.com/copy/0804fb57873bb9c2baf2cbc6bf550a27