Another PirateBox UI Design

I took my time and learned a little more about html5 and CSS3 web design and also after reading some comments on reddit for example, I have made yet another UI design for the PirateBox.

Features

• A cleaner structure than before using html5 and CSS3 design elements
• 4 pages only: Home, Download, Forum and Mobile, where chat is included on the main page
• Compatible with Firefox, Chrome, Internet Exlorer plus I have an old Blackberry phone, even on that the layout remained the same and it was displayed just like in my browser
• Mobile version is available from the menu, however as I said, even my old BlackBerry phone could display the standard site properly. (I could not get my script to work, I will keep on working on that)
• Dark colour theme (as most people wanted)
• I have implemented the upload feature in the main page, so no more pop-up (drawback: if someone refreshes the page manually, the upload is interrupted...)
• Download/Browse opens up in a new browser tab, this does not interrupt the upload or trigger the main page to re-load
• Site scales with your screen, so it won't case any issues with smaller screens
• I will publish a slightly different version soon of the same design, which is almost identical, but the chat window is on a different page (more tabs on the top), upload comes still as a pop-up and loads in the background, uninterrupted and some more functions. I am even experimenting with some short html5 video clips on the main page.

Preview

Now initially I wanted to make some screenshots again, but I though it would be nice to put together a short video instead. I have recorded this on my Windows7 machine, because it has a wider screen and it will show and illustrate the features of the site much better than my Ubuntu machine's samaller screen.

Download from GitHub

Again feel free to modify anything on the design, basically any text can be re-written in the html documents (or the logo replaced with your favourite image) as the layout is done by the CSS file. If you don't need the mobile or forum menu elements (if you don't have a forum) simply delete those elements from the nav bar.

Any feedback is more than welcome and I am happy to take some tips of what kind of design YOU want for a PirateBox.

IMPORTANT (Edit)

There was a glitch with the chat as it did not refresh itself. I have fixed this, so please re-download the files from GitHub to apply the changes.
Please check the update of this post: UPDATE

Updating to PirateBox v0.5.1 on the MR3020

Updating an existing PirateBox to a newer version on the MR3020 is somewhat different than making a clean install. It is very similar, but one must pay attention to some details that can slow down the process.

The version 0.5.1 comes with the lighttpd web sever that allows an easy design of an user interface that is presented to users. The web pages ("UI" in this case) can be simply created using html and CSS and easily uploaded to the PirateBox whereas with previous versions there was only a limited area for changes.

What you will need

Known I guess from the previous installation process, but just for the sake of completeness:

• MR3020 with previous PB installation (obviously...)
• 1 x Ethernet cable
• 1 x USB flash drive for the MR3020 (external HDD etc also fine)
• Linux based computer
• Home router with Internet access

Moreover you should know:

• The IP address of your home router
• The root password of your MR3020 (this was set when you installed PB for the first time, find it)

Also you will need some knowledge about the "vi" editor, if you have not used it too much before here is a quick guide with the functions you will need:

• i - Enter edit mode
• ESC - Exit current mode, e.g. exit edit mode
• :q! - Quit without saving the changes
• ZZ - Save changes & quit

Updating

OpenWRT is already installed so those first steps can be ignored here, only the PirateBox package needs to be removed and updated with a new one. Note that you will need Internet connection and hence direct access to your home router for this, off-line installation does not work! (The package downloaded later on is a script package that downloads other packages and configures them, hence Internet access is necessary)

Step 1.

Set a fixed IP address to you PC in the same subnet as your PirateBox, assuming it has the IP 192.168.1.1 set your PC to 192.168.1.xxx
You can set a fixed IP by going to "Edit Connections/Wired/Edit", refer to the image below (I renamed my wired connection to "Cable", this is only personal preference).

 Step 2.

Connect your computer with the ethernet cable to your MR3020 and SSH into your PirateBox on the address 192.168.1.1 (providing you didn't change this after the previous install). In Ubuntu you will need root access to ssh, so

     sudo ssh root@192.168.1.1

After providing your root password and the root password to your router you should now be presented the OpenWRT screen:

 Step 3.

Now edit the network file and check that your settings are OK there. You have to make sure that your MR3020 is on the same subnet as your home router. Now at this point it is likely that your home router will be the dominant, hence check your home router. (Example: if your home router is 192.168.0.1 then you will have to set the MR3020 to 192.168.0.xxx and reboot it for the changes to take effect. "Option gateway" is the home router)

Also an important aspect that if the last 2 DNS entries were removed from the bottom of the file (for most users it has caused redirect errors and hence was often removed) then these need to be put back for the duration of the update. These are necessary to connect to the Internet later on.

     vi /etc/config/network

And make it look similar:

Where 192.168.1.1 is the IP address of the MR3020, 192.168.1.254 is the address of the home router and 8.8.8.8 is a google public DNS.

Step 4.

I assume that if the first time you managed to connect to the Internet and install a previous version of the PB your firewall settings are OK. Again just to make sure it is fine, refer to the image below

     vi /etc/config/firewall

Step 5.

If all these settings are OK disconnect you PC and connect your PB to your home router via ethernet cable. Connect to it through wi-fi and SSH into it just like before.

Firstly PirateBox needs to be stopped and the old image removed, type

     /etc/init.d/piratebox stop
     opkg remove piratebox

Step 6.

Now just to make sure you are connected to the Internet, ping google.com

     ping -c 5 google.com

If you are getting a response it's OK. if not, then you are not reaching the Internet for some reason, in this case go back a few steps and make sure that your settings are OK. (primarily IP subnet and DNS entries in /etc/config/network)

Step 7.

The last step now is to install the new PirateBox image:

     cd /tmp
     wget http://piratebox.aod-rpg.de/piratebox_0.5.1_all.ipk
     opkg install piratebox *

"wget" will download the new PB package and opkg will install it (yes you need the * at the end of the command). Wait until it finishes, reboot when prompted and you are done.

Mobile website for PirateBox and more - Plans

Just a quick update on the PirateBox website design and my further plans.

Concerning the idea of having a mobile website to which all mobile phones would be redirected, I think it would be viable and a good idea to have a clear, easy to navigate and fast-loading small website for mobile users (I am aware that my current web design is, well let's say not ideal for mobile browsing). My aims are to have a minimalist, but cool mobile website with all the functions of the standard PirateBox start page.

My first idea was to carry on with the default PB website, but recently I had another much cooler idea for the graphical design.

My plan is the following:

• Have a main menu with just 4 icons in the middle (or text?) that will lead to further pages with possibly a faded PirateBox logo behind them
• OR a PirateBox logo on the screen with a drop-down menu from the top
• Main menu page will only hold these 4 menu points for fast loading and easy of navigation. Also the aim was to avoid the use of complicated elements like iframes just in case if some mobile phones had difficulties with them.
• 4 mobile websites besides the mobile start page will be: "About", Chat, Browse & Upload
• As I do not really want to copy any icons from anyone, I will try to "design" some on my own (see how it goes...). Plan B is that I download some from some free websites or databases.
• Pages will have return buttons to the main menu.
• I have to put a script to piratebox.lan that will identify mobile browsers and redirect them to the mobile site (This will be a hard nut to crack...) But I am thinking of an index.html which holds the scripts that will differentiate between a mobile device and a web browser at the very first stage.

My plans relating to the upload function:

• Have a graphical indicator of the upload progress.
• Multiple uploads at a time OR upload sequences that start after each other (aka you can add 5 files, but they are not uploaded simultaneously)
• Remove popup style and have it integrated in the website.

Change boot order in GRUB

If you have dual-boot system, aka. you have 2 (or even more) operating systems, you have to select at startup which one to use. Now if you had windows on your machine before and installed Ubuntu afterwards, Ubuntu will be the default OS to start in the GRUB boot manager. This can be changed of course.

I have both Windows and Ubuntu on my desktop computer, but I am using Windows more often so I wanted to have that started by default and only start Ubuntu when I need it. Here is how to change which Operating System to boot automatically.

Change GRUB default boot order

 

First boot into Ubuntu, open a terminal and type:

sudo gedit /etc/default/grub

Look for the GRUB DEFAULT parameter. This is set to 0 by default, which represents the first element in the boot menu list, hence the formula is parameter = (list element) - 1 

Explained as below:

GRUB DEFAULT set to 0 = 1st entry in the list will start by default

GRUB DEFAULT set to 1 = 2nd entry in the list will start by default

GRUB DEFAULT set to 2 = 3rd entry in the list will start by default

and so on. 

On my installation Windows was the 6th in the list so I had to set the value to 5.

That is it done. Sign out and restart your system to see the result for yourself.