Way to load external files

[StuFromDrum]

Hey,

First off, this is excellent! By far the most stable and straightforward solution for generating (in my situation, offline) apps from html. Great work :)

I've got a question though, is there a way to create some kind of loading/progress bar for the generated .exe? The app is nudging 400mb and can take a while to load on older machines with no indication that anything is happening. While this is mainly down to hardware issues my aim is just to try and improve the users' experience when they first get hold of the app, if possible.

Have you got any suggestions?

Cheers :)

[jyapayne]

Hey! Thanks :)

One thing I'm working on for the next version is a different packaging option. For big files, it is more beneficial to package the app with a separate folder for all of the files that you will use that are large.

However, for right now, the only thing I can recommend is using javascript to load the large files on the fly, so they aren't loaded into memory straight off the bat. For example,

var dirPath = path.dirname( process.execPath );
var filesPath = dirPath + "/mycoolfiles/";

var fs = require('fs');
fs.readFile(filesPath + '/giantfile.mpeg', function (err, data) {
  if (err) {
    throw err; 
  }
  console.log('Do stuff with my big file.');
});

[jyapayne]

Remember also that if you load files like this, you'll have to make sure they are not in the project folder, or else they will still be included in Web2Exe's packaging. I'm also working on excluding folders from the build.

Cheers!

[StuFromDrum]

Yeah, the javascript isn't really going to work because there's about 120 PDFs and 30 odd MP4s!

But your saying I could package the app to include only an index page and THEN move all the required files to the project folder? That would (a) keep the exe file down to a few kb and (b) make updating a whole lot quicker. Will have a play :)

[mscreenie]

great work, im not sure if its a good idea for a progress bar, it could be difficult to implement because it may involve an additional exe to show such notification.

I read javascript , css and resources will be packaged into one in later releases, this is hugely beneficial, it saves me from having to spend 1-2 minutes combining each file into a single.

then a bonus to this would be minification .

[2braincells2go]

I have been watching this...

I say progress bar belongs in the installer. Or if extracting to a temp directory, the progress bar belongs with the program extracting.

Just my thoughts...

[StuFromDrum]

Perhaps a progress bar wasn't necessarily the correct request. More of a splash screen, or even just an image, just to give the machine a little bit of time to sort itself out in the background. Having done a bit of research on all this though I fully understand the headache of trying to implement this sort of feature.

I've seen chromium args which mention enabling/disabling boot logos/animations (even a chrome logo would suffice in my case) but I don't know if they would even work :/

[jyapayne]

Yes, I agree that some sort of loading bar is necessary for being packed into a single exe, but to my knowledge, I have no idea how to implement such a feature.

My solution to this is going to be different modes of packing the exe, one of which allows for external folders and files that will be loaded as needed instead of at runtime.

[2braincells2go]

Maybe I am alone, but personally I package my completed software with a installer. Even if it is a "portable software" package I do the same.

Have always felt the "progress events" should be left up to installers. I use http://www.installpackbuilder.com/ and it will do everything mentioned here.

As long as your software (W2E) has option to turn off progress/splash image guess it really makes no difference though:)

[StuFromDrum]

Thanks @2braincells2go I'll give that installer a go, but once it's installed would it actually load any faster?

I played with app.js which obviously uses a content/ folder to pull up the assets. While this keeps the exe to a very small size, and therefore loading times, it has a few missing features such as triggering a html video to play full screen. W2E is by far the most complete solution I've found but it's just the loading time that's a stumbling block.

The main reason I'm using a packager such as this anyway is because the project loads pages with ajax. This works fine if you just load up the local index page in firefox but chrome freaks out with cross domain issues -_-

[2braincells2go]

I use paquet builder along with the built-in UPX compressor (info in help docs about setting up). Helps speed things up some and certainly makes the package smaller.

Something I have learned over the years: If a user is staring at their screen with nothing "visual" happening, it seems twice as long to them. Give them a splash screen with some movement and complaints darn near disappear.

Not sure if we should continue this conversation here or not. @jyapayne may be tiring of us, lol.

Cheers!

[jyapayne]

Yes, please move the conversation to email or whatever you like.

I will attempt to make changes that will alleviate the loading, since @2braincells2go is right about the user experience.

[Montoya]

I'm also working on excluding folders from the build.

+1 to this!!!

[jyapayne]

:) This is quite a difficult change, and I'm still working out how to do it properly. There needs to be two modes of exclusion. One mode for just plain excluding folders completely, and the other for excluding folders that you then would like to access from inside your app.

The first one is not that difficult, but the second one requires creating a javascript file with some path modifications to let the app access the files like normal. I'll see what I can come up with.

[2braincells2go]

Hello Sir Joey!

"One mode for just plain excluding folders completely, and the other for excluding folders that you then would like to access from inside your app."

Did you ever find a way load external files from folders within the compiled app directory?

[jyapayne]

Hey Woody!

Unfortunately, not really. You can load external files in Javascript if you check the "Uncompressed Folder" option in the "Compression Settings" tab with NW.js versions greater than or equal to 0.13.0, but I could never really figure out how to set this up to work nicely by just having an option in the interface. If you need more detail, I could probably whip up an example.

[2braincells2go]

Ok, totally understand if you can't work the magic on the interface.

Experimented using javascript but it failed. Might be because used compression and older NW.js, can't remember. Will try it again.

When you have time, example would be nice but no big hurry.

Thanks Joey!

[2braincells2go]

Hey Joey. Hope you are doing good.

I have been playing around with external files and not having much luck. Back in April you had said:

If you need more detail, I could probably whip up an example.

Was wondering if you could provide some real life examples when you get a chance.

Thanks!

Woody

[jyapayne]

Hey Woody,

I've created a sample project that loads an image from outside the project directory. The project is source is located in the package.nw directory. You can run the External File Test.exe to see it in action. Hope it helps!

[2braincells2go]

Your a champ Joey. I thank you much.

Do you mean the project source is in the main download in repository?

[2braincells2go]

Sorry to keep bothering you Joey but cannot seem to find the files?

The project is source is located in the package.nw directory.

[jyapayne]

Haha, oops! I forgot to link the file! Here it is

[2braincells2go]

Thanks Joey. I have been trying to include HTML files without any luck. Cannot seem to find any clear documentation on how to do this with javascript. Is it not possible?

Cheers!

[jyapayne]

It depends on what you mean by include. Do you want to display the HTML on a new page or within the page you are on?

[2braincells2go]

It depends on what you mean by include. Do you want to display the HTML on a new page or within the page you are on?

What I was attempting to do is both actually. Have a software that has some mock math tests. Wanted to display a small banner <div> at bottom to alert when test has been changed/updated. Wanted the HTML to be totally separate. Rather not use iframes as have been doing in past.

Plus, was trying to learn little more about including external files because few students are asking me... I have not a clue, lol. There is sooooo much (mis)information and stackoverflow has totally confused me:)

[jyapayne]

Hey Woody,

Here's another example using an html file instead of an image. It's basically the same process. The only way I found to load a new page externally right now is to load the contents of the file and display it in a new window.

[2braincells2go]

Thank you again Joey for taking time to help, it is much appreciated.

This is further than I have gotten and been working on it off/on for months, lol.

Are there any special plugins I need to use when making my own? Wondering if I am missing needed plugins as did a similar test month or so ago and failed...

Cheers brother!

[jyapayne]

Nope, all you need is in the package.nw folder and the external hello.html. If you export that using Web2Exe, and then copy the hello.html file to the folder that has windows-x64 in it, you should get the exact same result.

[2braincells2go]

Good deal Joey. Most likely I fat fingered something. Tried so many different ways using NW forum and Stackexchange, have lost count. Amazing how much info is out there and much of it doesn't work even with their example files. I am going to have to find time to take a course...