# Webviewer, html, asset

**URL:** <https://community.thunkable.com/t/webviewer-html-asset/37984>\
**Category:** Questions about Thunkable X\
**Created:** [July 28, 2018, 8:33am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984 "2018-07-28T08:33:37Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rollke](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/rollke/32/14413_2.png) [@rollke](https://community.thunkable.com/u/rollke)\
**Post date:** [July 28, 2018, 8:33am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/1 "2018-07-28T08:33:37Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 28, 2018, 8:39am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/2 "2018-07-28T08:39:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rollke](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/rollke/32/14413_2.png) [@rollke](https://community.thunkable.com/u/rollke)\
**Post date:** [July 28, 2018, 9:05am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/3 "2018-07-28T09:05:10Z")

</div>

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…😉

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;

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 28, 2018, 9:09am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/4 "2018-07-28T09:09:36Z")

</div>

"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.

---

<div class="post-metadata">

**Author:** ![rollke](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/rollke/32/14413_2.png) [@rollke](https://community.thunkable.com/u/rollke)\
**Post date:** [July 28, 2018, 9:25am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/5 "2018-07-28T09:25:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 28, 2018, 9:36am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/6 "2018-07-28T09:36:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 23, 2020, 2:58pm UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/7 "2020-02-23T14:58:18Z")

</div>

> [@rollke](#):
>
> 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 c

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/6/66e17be3a1c953340bdbda2af564a90976fd763f.png)

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [February 23, 2020, 4:05pm UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/8 "2020-02-23T16:05:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 23, 2020, 5:11pm UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/9 "2020-02-23T17:11:36Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [February 24, 2020, 7:40am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/10 "2020-02-24T07:40:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:40am UTC](https://community.thunkable.com/t/webviewer-html-asset/37984/11 "2024-11-08T11:40:53Z")

</div>


