Install h5ai

by | May 21, 2014 | BibleBox

NOTE – At the moment the File Download counter doesnt work after installing h5ai – my goal is to have both h5ai presentation of files AND a file download count feature, so I am working on having both. h5ai is a software tool which provides enhanced directory listing of files in folders on webservers. Why you might want to install it on your BibleBox?  Check out these before and after images!

BibleBox screenshot file listing

Folder File listing without _h5ai installed

Folder Listing with -h5ai installed

Folder Listing with -h5ai installed

To install h5ai on your BibleBox follow these steps:

  1. Download the  h5ai-setup.zip file which includes  2 files – h5ai_installer.tar and install_h5ai.sh.  This download of _h5ai from BibleBox.org contains an options.json file with options already set for best use on the BibleBox TP MR3040 router.
    • NOTE: testing various options in the options.json file of _h5ai lead to the settings in this file.  If you want to modify it yourself go ahead, but know that showing file previews, enabling selected downloads as packages, displaying folder trees, all makes browsing files on the BibleBox S.L….O…..W)
  2. Unzip the h5ai-setup.zip file and copy the 2 files h5ai_installer.tar and install_h5ai.sh in the h5ai-setup folder to the root folder on your USB (ignore the .DS_Store file – thats a file from Mac)
  3. Plug the USB into your BibleBox and power it on
  4. Connect the BibleBox ethernet to your computer (remember to manually set an IP address on your computer as 192.168.1.2)
  5. Connect to the BibleBox using SSH

    Putty SSH LOGIN

    PuTTY SSH Login

  6. After logging in, from PuTTY or Terminal (OS X) run the following commands:
    1. cd /mnt/usb/
    2. chmod 755 install_h5ai.sh
    3. sh install_h5ai.sh
  7. After the BibleBox has restarted browse the shared folders to confirm the changes and that _h5ai is working for you as intended.
  8. You can then put the USB back into your computer and delete the h5ai_installer.tar and install_h5ai.sh files from the root folder on the USB as they have all been copied to the BibleBox itself.

Im happy with how it looks and with all the “bells and whistles” turned off in _h5ai’s options.json file it works pretty well on a small router like the MR3040.  Further testing and feedback will be more helpful.  Please post in the comments or Forum if you’ve got some experiences to share.

Shared folders with _h5ai File listing

by | Apr 12, 2014 | BibleBox

I have been looking at ways to make the file listings on the BibleBox much better looking than the Apache default.  I found h5ai developed by Lars Jung and like the look of it. It’s built with HTML5 Boilerplate, jQuery + Modernizr and can be implemented with only a few easy steps, and, best of all, the listings can be presented in multiple languages.

I’ve tried it on a website I manage (BibleHub.org) and here’s some screenshots showing a share folder on that site (running with Apache) with h5ai and without so you can see the enhancements that h5ai offers. It’s pretty cool, and the sort of thing I have wanted to incorporate into the BibleBox.  Check out the difference!!

BibleBox h5ai

Default listing without h5ai installed

BibleBox h5ai

Folder list with h5ai – list view, small

BibleBox h5ai

Folder view with h5ai, List view, large

BibleBox h5ai

Folder view with h5ai, Icon view, large

To setup h5ai on your website follow these steps (if hosting is using Apache)

Requires PHP 5.2.1+

  1. Copy folder _h5ai to the document root directory of your web server and visit http://YOUR-DOMAIN.TLD/_h5ai/. The page that loads will give you some hints on your server’s capabilities.
  2. Add /_h5ai/server/php/index.php to the end of your webservers default index-file list. All directories that don’t have a valid index file will get styled by h5ai.

Examples of the second step for Apache web servers:

  • If using Apache httpd 2.2/2.4: in httpd.conf or in any directory’s .htaccess file add the following line:

DirectoryIndex index.html index.php /_h5ai/server/php/index.php

h5ai Configuration:

You can also configure the settings of h5ai by modifying the options.json file in the _h5ai/conf  folder on your webserver.

[~yourwebserveraddress]/_h5ai/conf/options.json

Everything is explained really clearly in the options.json file and Lars has done a great job making it easy to understand.

You can set downloads of multiple files as a zipped file (.zip), show QR codes for files, choose whether or not to show thumbnail files also.

Download h5ai here