Enable font-awesome fonts

[DougRzz]

Hi, I love this package. I was going to try and figure out the JupyterWidgets web3 example this weekend but instead, ipywidgets-server made it very easy. Thanks!

So far I have just 1 minor issue. I tried a bqplot example (see code below) using the command

ipywidgets-server bqPlotExample:vBoxPlot

This is the same as the example shown in bqplot/bqplot#316 (comment). The buttons icons which uses font-awesome fonts are not showing when I run in ipywidget-server. Do you know how this can be fixed? Thanks, Doug

from bqplot.interacts import PanZoom
import ipywidgets as widgets
import bqplot as bq
from traitlets import link
from collections import OrderedDict

import numpy as np

buttonWidth = '50px'

x_sc = bq.LinearScale()
y_sc = bq.LinearScale()

x_data = np.arange(500)
y_data = np.random.randn(3, 500)

line_chart = bq.Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, 
                       display_legend=True, labels=["line 1", "line 2", "line 3"] )

ax_x = bq.Axis(scale=x_sc)
ax_y = bq.Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

fig = bq.Figure(marks=[line_chart], axes=[ax_x, ax_y])
fig.layout.width = '95%'

pz = PanZoom(scales={'x': [x_sc], 'y': [y_sc]})
pzx = PanZoom(scales={'x': [x_sc]})
pzy = PanZoom(scales={'y': [y_sc], })

#
zoom_interacts = widgets.ToggleButtons(
                                        options=OrderedDict([
                                            ('xy ', pz), 
                                            ('x ', pzx), 
                                            ('y ', pzy),   
                                            (' ', None)]),
                                            icons = ["arrows", "arrows-h", "arrows-v", "stop"],
                                            tooltips = ["zoom/pan in x & y", "zoom/pan in x only", "zoom/pan in y only", "cancel zoom/pan"]
                                        )
zoom_interacts.style.button_width = buttonWidth

ResetZoomButton = widgets.Button(
    description='',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Reset zoom',
    icon='arrows-alt'
)

def resetZoom(new):
    # Reset the x and y axes on the figure
    fig.axes[0].scale.min = None
    fig.axes[1].scale.min = None
    fig.axes[0].scale.max = None
    fig.axes[1].scale.max = None  
    
ResetZoomButton.on_click(resetZoom)
ResetZoomButton.layout.width = buttonWidth

link((zoom_interacts, 'value'), (fig, 'interaction'))

vBoxPlot = widgets.VBox([fig, widgets.HBox([zoom_interacts,ResetZoomButton])], align_self='stretch')

!

[pbugnion]

Thanks for raising this! You're the first person (besides myself) to raise an issue on ipywidgets_server. Having early feedback is really useful.

ipywidgets_server is not serving the font-awesome CSS at all, at the moment, and bqplot does not (as far as I can tell) provide it. This doesn't cause any errors normally as both the notebook and the ipywidgets embed bundle provide font-awesome themselves.

It probably makes sense for ipywidgets-server to provide the same CSS as the ipywidgets embed bundle, so we should be including font-awesome. I'll work on this this weekend and get a new release out.

[pbugnion]

This should now be fixed (PR #7).

I'll cut release 0.1.1 to include this over the next 48 hours or so.

[DougRzz]

Thanks.
I guess that this PR would also fix the red cross which isn't appearing on the 'valid' widget. I shall test it and let you know.

[pbugnion]

This is now available in ipywidgets_server 0.1.1.

$ pip install -U ipywidgets_server

I've tested the Valid widget on 0.1.1 and it works as expected:

import ipywidgets as widgets

w1 = widgets.Valid(
    value=True,
    description='valid'
)

w2 = widgets.Valid(
    value=False,
    description='invalid'
)

vbox = widgets.VBox([w1, w2])