Scriptable external Webpages

Scriptable
1

Hello Community,

I love scriptable and it‘s opportunities. A lot of source codes are already available and you can customize it to your needs. Great stuff.

Here are some examples.

image
image1200×2400 299 KB
image
image1200×2400 329 KB
image
image1800×3200 987 KB

My question:

Is it possible to add external websites or even better stored html pages from Scriptable-iCloud folder to a widget (like old iFrame approach via webview)?

Would like to add html using css (WebKit animation) JavaScript and images.

Thanks and a nice weekend to you all.

2

You can render the webpage with WebView and then take somehow a screenshot of them which you then can display in the widget.

I saw this tweet and he also has posted the code he used (in the answers to the tweet) so maybe you can replicate it with an external website.

1 Like
3

It will generate an image, right?

I would like to perform webkit animation like

div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}

4

Did you try downloading the HTML, save it in Scriptable’s iCloud folder and then load it into the WebView with file:///...?

5

I did this

const fm_icloud = FileManager.iCloud();
let file = fm_icloud.documentsDirectory()+“/html/index.html”;
console.log(bg path ${file}.);
WebView.loadFile(file, new Size(0, 300))

But it is not loading the images defined in the index.html

6

So it loads the index.html? How are the images referenced in it, and where are they located?

7

Currently in html defined as:

<img src="img/widgetBG.jpg">

So image file relatively stored to html file (within icloud scriptable folder)

8

Did you post any HTML?

If so, don’t forget the forum will read that as valid Markdown and try to display it. Remember to wrap code examples in triple back ticks.

E.g.

```html
<img src="/images/foo.png>
```
10

Sorry. Didn‘t know that. Updated post above.

11

Hello,

do you think it is possible to include an iFrame in the HTML given in the tweet above?
I can’t get the iFrame displaying, while all the HTML/CSS gets rendered fine.

Thanks to you all for giving me a hint!

12

I haven’t tried it yet so I can’t say much.

A guess though would be that the iframe has not loaded yet when you take the screenshot to make the image.