Webviewer, html, asset

Thunkable Discuss
#1

Hi,
I tested some workarounds for canvas.
It is very convenient to use assets for that. Edit a htm file with an external html editor. Save it wit the html suffix.
Then load this file in your project. If your editor did not use the suffix html, you simply rename the uploaded file.
With the webviewer you can load your file (simply the filename with html suffix).
This seems to me very easy. The sideeffect is, that you can publish your html file as plain text in this forum.
I am now testing with canvas that fits to the screen and drawing with fingertouch. When ready, I will publish.

By the way: I would like to have a vety simple text editor in the thncable x environment, because then it would be easier to make changes…

1 Like
#2

Hi,

Do you want to use a simple text editor with a highlight and edit function or something like a simple notepad? If the second, for example, I sometimes use block comment fields to create multi-line text.

#3

I have no problem with a simple texteditor.
Only thought that it could be convenient to edit the text in the asset directly in the environment (friendly hint for the developers…:wink:

But the real problem I am working on is:
Creating a canvas with the size of the screen (by use of the javascript instructions screen.width and screen.height).

This:

Your browser does not support the HTML5 canvas tag.

does not work.

I did not find a proper solution. But I am working on it.
Wanted to use something like:
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;

#4

"Your browser does not support the HTML5 canvas tag. "

I remember you showed your example of working with the canvas and it worked.

If you give me your canvas code, I’ll try to run it on my devices and check it.

#5

Hi, thank you.

But actually I have two problems.

  • I cannot create a link (share link generator error)

  • And I am on tour with my ipad. I can edit my projekts, but whenever I create a link (when taht works) it is not possible to copy the address of that link. Do not know why. I then have to wait for beeing at home and doing it on my desktop computer.

#6

Well, at the opportunity I’ll see what is with the canvas.

To work with the canvas, I would suggest that you work with some ready-made framework, for example,

  • processing.js with P5.js
  • paper.js
  • D3.js
1 Like
#7

Hey @actech, are you suggesting that D3.js javascript can be executed locally from the phone? I would love to be able to load this into an app and send info to be graphed. Do you know if this is a capability of thunkableX. to be able to load a JS file and to then do something like this to inject the desired code

Like I load in the JS file

Then set the webvier URL to be this

Screen Shot 2020-02-23 at 9.07.48 AM
Screen Shot 2020-02-23 at 9.07.48 AM1686×722 50.6 KB

1 Like
#8

Hey,

To run Javascript locally on iOS, all Javascript code must be in a single html file. If Javascript is in the plug-in file, this will not work.

You can run Javascript locally in Thunkable X, but how will you exchange data between App and JavaScript?

1 Like
#9

@actech That is what I’m trying to figure out. I feel like I’ve seen examples from you where the html is entered through text blocks. Could the JavaScript go there as well? I’m not familiar with this method or any programming besides these blocks on thunkable

isnt that shown in your example app? using HTML in text blocks?

#10

Unfortunately, HTML examples will not work on an iOS device (dataURI does not work in WebViewer for installed app on iOS). Therefore, there are no simple and reliable solutions. There are very complex, not universal solutions to exchange data via a web server or Firebase (such an example is on the screenscrframework7 in my demo project.). However, the latter option is not reliable due to the fact that the access keys to Firebase need to be made public, which increases the risk of hacking the Firabase account.