Local file in html Widget

Elements
1

I was wondering :

  • I know I can paste a html address in a html widget to embed an external site.
  • Can I paste a path to embed a folder that I would drop into the Hype generated folder ?

This is to make an app independent from online files

2

path must be:
${resourcesFolderName}/yourFolderName/

${resourcesFolderName} … this you have to use, because on export the name of the document is pasted in

3

Thanks Strmiska.
Is it what I have to paste in the Html Widget ?
Do you have an example ?

4

yes, try to paste in inner.HTML and try to export - does it work?

5

of cource this way for example:

<img src="${resourcesFolderName}/yourFolderName/img1.png" width="100%" height="100%" preload="auto">

you only can see the result by previewing in browser

6

Can I replace the img by a .html file ? Then, where should I put the folder in which is this file ?

7

never tried this, but i think you can paste “${resourcesFolderName}/yourFolderName/test.html”.
let me know, if it works.
place your folder after export in"${resourcesFolderName}.hyperesources"

2 Likes
8

Perfect ! It works !!

In the element inspector, I’ve put in “specified URL” the following line : HypeDocumentName.hyperessources/EmbedFolderName/index.html

And put the EmbedFolderName into the hype generated HypeDocumentName.hyperessources

Where :

  • HypeDocumentName : is the Hype document name (obvious)
  • EmbedFolderName : Name of the folder that contains the .html file I want to embed and all the elements that it needs
4 Likes
9

This is very interesting. Can I ask you to clarify this workflow more or is it possible to you to send an example files where this feature works?

Do you think this could be a way to create very big Hype sites? Im looking a way to split hype documents in smaller parts to minimize files opening time.

Now my customer needs a big site, which opens very slowly and i thought if the solution could be a separated pages collected with one dumpster file.

Here is the finished work:
http://www.berner.fi/vuosikatsaukset/2014/eng/index.html

This is made totally with hype, but documet size goes far over what is comfortable and i need to do something for that.

10

i can’t understand.
could you give to me hype.project file?

11

The result of this can’t be seen with preview. You have to export the project.

  • Drag the .html file you want to embed in the Ressource library
  • create a box on the stage. Give the box the desired size you want your .html to be embedded
  • Click twice on the box, click on the little pen at the bottom
  • Enter in the box that opens "Embed.hyperesources/EmbedFolder/index.html where EmbedlFolder is the folder containing the .html you want to embed
  • export to HTML5
  • Drag the EmbedFolder into the HypeRessources of the generated HTML5 project

Do you get it ?

12

I’m very busy right now. I try to respond as soon as possible.

13

The key thing here is the last step - when Hype writes out the preview folder or the export folder, it erases previous contents. So you always have to copy the embedded html back into the hyperesources folder, and explicitly call up a preview with the exported .html file. As Kerguelen writes: don’t use the Preview function.

14

I’m trying to enter an image from my resources into an HTML widget on my scene. this code doesn’t seem to be working for me and I was wondering where I went wrong.

Screen Shot 2017-12-06 at 7.34.44 PM.png802×682 23.2 KB

15

One opportunity is to use an iframe-tag AND to put your image in html-document. That “image.html” is the document, which you can present in your iframe.

16

you wrote wrong code:

<img src="${resourcesFolderName}/20VMax-8.png" width="100%" height="100%" preload="auto">

${resourcesFolderName} - should not be renamed