Offline font-awesome use

[chrisjsewell]

As discussed in maartenbreddels/ipyvolume#41 and maartenbreddels/ipyvolume#55, I can currently embed a custom widget, such that it can be rendered offline, with the following scripts:

<link href="script_dir/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="script_dir/require.min.js" crossorigin="anonymous"></script>
<script src="script_dir/embed-amd.js" crossorigin="anonymous"></script>

and directory structure:

my_embedded.html
ipyvolume.js
script_dir/
    embed-amd.js    
    font-awesome/
    require.min.js

Is it expected that I need a local copy of the font-awesome directory, or is this something embed-amd.js should handle?

To illustrate the issue, if I remove https://github.com/chrisjsewell/chrisjsewell.github.io/blob/master/3d_atomic/converted/3D%20Atomic%20Visualisation_files/ivol_example1.html#L11 in my test file and try to open it offline (having cleared my cache), I get:

(FYI the Roboto Mono download is now fixed)

[jasongrout]

The fonts are stripped out from the webpack bundle, and webpack probably tries to load the from the best guess of where they are. Let me try something...

[jasongrout]

@chrisjsewell, @maartenbreddels - can you see the solution in #1652 and see if that works for your usecase?

[chrisjsewell]

Cheers. Just to clarify, for my example directory structure, would this mean that I would use:

<script>
        window.__jupyter_widgets_assets_path__ = './script_dir/';
</script>
<script src="script_dir/require.min.js" crossorigin="anonymous"></script>
<script src="script_dir/embed-amd.js" crossorigin="anonymous"></script>

I assume I still need a local font-awesome folder present, and I'll still need a require.config call if I wished to have ipyvolume.js in script_dir?

[jasongrout]

I would use:

Yes

I still need a local font-awesome folder present

No, not for the base widgets. If ipyvolume is also including fontawesome, I don't know.

I'll still need a require.config call if I wished to have ipyvolume.js in script_dir

Yes. I think.

[jasongrout]

I think https://github.com/jupyter-widgets/ipywidgets/pull/1652/commits/23701f21e2ccffc90927d7f4d394cd5d5766e37f may be needed to support the require config customizations.

[jasongrout]

I merged #1652 into master. Can you try with it or with master?

[chrisjsewell]

Ah ok, thus far I've got away with not having to have a development version of ipywidgets (just the latest pip), you'll have to bare with me on that. Or if @maartenbreddels could give it a go

[jasongrout]

I'll release an rc1 today.

[jasongrout]

rc1 is released.

[chrisjsewell]

No joy with the font-awesome. If I use window.__jupyter_widgets_assets_path__, it stops the font-awesome from being downloaded from unpkg, but doesn't get it from anywhere else (I'm not sure how to see where its looking).

On the plus side I have the require.config working, so now if I use, for example:

<link href="script_folder/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
<script src="script_folder/require.min.v2.3.4.js" crossorigin="anonymous" data-main='./script_folder/' ></script>
<script>
    require.config({
      map: {
        '*': {
          'ipyvolume': 'ipyvolume_v0.4.0-alpha.3'
        }
      }})
</script>
<script src="script_folder/embed-amd_v0.9.0.js" crossorigin="anonymous"></script>

I can have the directory setup:

my_embedded.html
my_embedded2.html
script_folder/
    font-awesome-4.7.0/
    ipyvolume_v0.4.0-alpha.3.js
    embed-amd_v0.9.0.js
    require.min.v2.3.4.js

I think this is nice, because it makes it explicit what versions I'm using and allows for having different versions of the various scripts in the same folder if I'm saving embedded html created by different ipywidgets/ipyvolume versions :)

[jasongrout]

doesn't get it from anywhere else

Perhaps including the fontawesome elsewhere on the page is loading the font elsewhere, so it isn't needed? It appears to work, right? I think if you can make a simple example (with only basic controls) and post the html somewhere, we can help.

[jasongrout]

Bumping to future - we can keep iterating on the html manager, if the above changes didn't fully solve the problem.

[chrisjsewell]

Yes no problem, I still can't get it to work, but as I have a work around and not much time, lets put a pin in it for now ta