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.

PirateBox Design Update

I am getting frustrated by using Kompozer for editing html/css. It has a "feature" of randomly messing up the link between the html and the css file. Now this causes the site to "fall apart". And no matter how I try to import the file again or add the link, it just wont work. I have to manually edit each line of the css by deleting the "#" in front of the line, linking it to the html file and then adding the "#" tags again. Don't know why does this happen, I figured out this "solution" after some sweating, but its still better than having to rewrite everything.

Anyway, I think I will leave the css within the html file and work with the internal style sheet until I'm finished. I will export it to a style.css file when I'm absolutely done with editing, so it won't cause no more headache.

News

So to make this work quickly and ready to use instead of just showing screenshots I had to simplify the upload form a little. Instead of making a new script and using php for uploading and handling the file, I just included a popup-style upload window that opens in a new page and uploading goes in a separate page without interruption to other processes.

So all the popup does is that it opens a new page to http://piratebox.lan:8080 (droopy) that allows uploading just like before. Sadly this means that there is no upload bar for the moment.

The second step will be to use another iframe for this to merge into the main page but there are some other issues to consider here with sizing and aligning etc. So first it will be a popup-like function. I think its acceptable.

Also forums must be added manually later. I might get a basic design for it, but later only. I first would like to have a working version.

What is included and what isn't

See Sneak-peek at PirateBox Design (new)

The site works at the moment, but as mentioned some functions are just initial and not final versions.

• Chat, upload, download functions and all pages are loading and working as intended. (if not please report)
• The design, especially that of the menu will be upgraded with some fancy effects using css.
• Browser detection will be added in a later stage.
• Upload progress bar and upload form built-in to the main page will be added later, at the moment it is a popup-style thing.
• Add your own home.html file (or modify mine) that will be displayed when someone joins.
• Forum is not included, if you already have your forum, you can add it easily.
• As soon as my time allows I will write a simple script that downloads my design, unpacks it and copies it over to the www folder.
• Please note I have not tested this design on my MR3020, just under Ubuntu. Not a fancy design or anything, I just don't know how small routers will be able to handle it.

Also, sorry for the messy file structure, for some reason I got errors when trying to put in a nice file structure. The page didn't load for some reason and the links were broken. I will look into this and try to fix it for next time.

Screenshots

 

 

Download

After downloading the tar.gz file unpack it and copy the contents into your www folder, but before that backup your own files!

Download (also available in Download tab)

Edit:
Also on Github now! (Latest version, use this!)

Check out my newest design!

Sneak-peek at PirateBox Design (new)

I went from my original idea towards another design, I think this looks "cooler", little bit more advanced maybe and easier to see through as well. See printscreen below:

So far:

• The layout will remain more or less the same as I am planning at the moment. 
• Site uses iframe, so when upload is running you can still browse and chat, etc without interrupting the process.
• There is a progress bar for the upload, only visible when you are actually uploading a file, will be quite handy when/if I make the upload work properly.
• The chat is working fine. Moved it to separate page, so there is no excess drive/CPU usage when not needed.
• The shown page above is the "About" page, when connected users get redirected to the Home page. My idea was that everyone can build a short Home page (that will be shown in the frame, so no hassle) and show that first to anyone who joins. A little info, etc.
• Browse for files is also working as far as I could tell.

Work needs to be done on:

• Upload script is not working at the moment. I have been trying to make it work fir the past few days in my free time (don't have much apparently) but there seems to be an issue with the php script handling the upload. Also need to allow php in the lighttpd settings, don't remember if its allowed by default or not.
• Also trying to add a scrip that would detect mobile browsers from phone for example. These would be redirected to a simpler site. Not because of bandwith usage (no intenet plan used) but because of convenience. Maybe original, simple setup or something similar.
• If I can make the upload script work, I might consider adding a function of uploading multiple files at a time, still in question.
• I will test the design with as many computers as possible, iPads if I can get them etc. and see if it works OK.

This is just a quick update to say I am working on stuff, but because of the lack of time I am not progressing super-fast. Also I have to learn a lot in the meanwhile about css, html, scripting etc, so yes...I'll keep you posted.

If anyone has any ideas or questions (really...any) feel free to share/ask. Also as soon as I have a working "beta version" of my design I will upload it and post a link here.

Please check the more recent version: UPDATE

OneSwarm in Ubuntu

OneSwarm is a lightweight, anonymous P2P file sharing software. It is available for Windows, Linux and Mac as well, both 32 and 64 bit versions. While traditional P2P sharing programmes share data with anyone who ask for it, in OneSwarm you can limit who you want to share your files with. Friends only, chosen friends or public, its entirely up to you.

Check out www.oneswarm.org to download and learn more.

It takes some time to learn using the software if you are new to it, but after that it comes with benefits and easy use.

Some basic setting when you start

Firstly you will need a server to connect to and some friend to transfer files. A good way to start is to add the following URL in both cases: https://oneswarm-support.appspot.com/

You find the link to add the server and friends list on the left hand side of the screen, see below:

Click Add server and copy in the URL provided above. Do the same with Add friends, choose "Subscribe to a friend feed from a community server" and paste the URL. You should have a number of friends and the longer you stay on the network the more will be discovered, the easier file sharing will be.

One issue so far, solved easily

A recent issue I had though was an error message when starting the software saying:

***Required thread seems to have died: OS Friend Connector

Now after looking at the forums I have found a post where it was said that a file could be corrupted and fixing this is easy. Go to your:

~/.oneswarm/osf2f

folder and delete your osf2f.friends file.

(Open your home folder, press Ctrl+H and look for the .oneswarm folder, navigate from there)

Use one of the backups available to recover this file, simple rename it and remove the .backup tag. The file is generated and updated with each new friend made on the network  anyway.

Your OneSwarm should be running now.