Figure out how to use "Isotope" to layout a web page. Try adding images/bokeh plots to a prototype web page.

[dyerlytle]

I have a demo working with two Bokeh plots and an embedded weather web site. The way the sizing works for the windows depends on a definition of the "width of a column". Items embedded in the web page can be the width of this column or twice the width, four times the width, etc. The height can also be controlled in a similar fashion.

We'll have to decide if we will allow the column width to vary with the size of the display being used. For now, I am using a fixed column width and item height. Bokeh plots can be made to resize themselves when the size of the DIV they are embedded in changes but complex plots can be slow to redraw. On the other hand, we can probably check the size of the display the user is using when the page loads and decide on a fixed column width at that time. That way the bokeh plots won't need to resize themselves as the user manipulates the web site.

I am also using the selector buttons to select "all", "graphs", and "weather". "all" shows all the windows, and "graphs" and "weather" only show the pertinent windows. Also the windows rearrange themselves as the shape of the display window is changed and I think this can work for variable size displays even if the column width is fixed when the page loads.

I'll upload the basic demo later today and perhaps I can get it running on my machine so it is live to the outside world. That way, people can check it out without having to download and install.

[dyerlytle]

Resizing Bokeh Plots, and etc.

I've tried having Bokeh plots resize themselves when the number of plots changes on the screen with mixed success. Google searches reveal that others have similar problems so I think we will keep the plot size fixed after the web page loads for now until I get a better handle on the "sizing_mode='scale_both'" parameter. The size of the plots can be set, I think fairly reliably, when the web page is initially loaded, but adjusting the sizes on the fly is fraught with peril. Because the plots can, at least, rearrange themselves when the screen size changes, the collection of plots should fit to a fairly wide variety of screen sizes (although, in some cases the user will have to scroll up and down to see all the plots).

Some of the example code I've used for demonstration purposes is a bit confusing. For example, the example in "_proto/dctwebapps" uses javascript in "static/js/function test.js" to set the height and width of the DIVs in the webpage under the ".example .item" class but also has CSS definitions for those same classes in "static/css/stylestest.css" which are immediately overridden by the javascript mentioned earlier. As I go through some of this example code line by line, I'm cleaning out some of the redundant and unused code.

Here is the javascript code that does the DIV sizing, as an example. It looks through the document, inside a DIV with class "example" for DIVs with class "item" and then checks for attributes of the form, "item_w2" or" item_h4" which mean width2 and height4 respectively and then sizes them based on the current "columnWidth", in this case 400 pixels (the heights are set to multiples of half the height):

      columnWidth = 400;
      $container.find('.item').each(function() {
        var $item = $(this),
          multiplier_w = $item.attr('class').match(/item-w(\d)/),
          multiplier_h = $item.attr('class').match(/item-h(\d)/),
          width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
          height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
        $item.css({
          width: width,
          height: height
        });
      });

I am able to get the DCT all sky camera images from a couple of different places. Both of these work:

• img_path = 'http://dct-allsky.lowell.edu/allsky/dct_allsky.jpg'
• img_path = 'https://lowell.edu/skycamftp/dct_allsky.jpg'

I don't know which to use, it probably doesn't make any difference. Currently, I update the Bokeh plot showing the all sky image every second but in production, it might be every minute or so.

I've also learned to scale external web pages so they fit in a particularly sized DIV when embedded in the Isotope interface. I suspect we won't need this information but, in case we do decide to embed external websites for some reason, here is some HTML/CSS code as an example:

<iframe width="1600" height="1000"
        src="http://www.atmo.arizona.edu/products/wximagery/azir.html"
        style="-webkit-transform:scale(0.45);-moz-transform-scale(0.45);
               -moz-transform-origin: top left; -webkit-transform-origin: top left;
               -o-transform-origin: top left;
               -ms-transform-origin: top left;
                transform-origin: top left; }">
</iframe>

[astrobokonon]

Closing this since I think we've got a path forward for bokeh + django + isotope. They won't resize to fit the users's browser size in the initial version, and that's just the way it will be unless the users scream for it :)