PirateBox: Design 2.0 Update

First of all a huge thanks to Maxime who has made some really nice improvements to my design that I am discussing here. It is about the "Design 2.0" and see the list of improvements below.

The improvements and changes do not require any change to your PirateBox, except for the www folder where the html files are stored, the pbIMG_ws.img file on your drive.

Improvements

• User gets automatically redirected to mobile version of the website if accessing from mobile device (presuming no preference is set on the device for viewing the browser versions). 
• Display the number of connected users, just to keep track on how many users are connected to the PirateBox.
  (Fundamental part of a PirateBox is that it is fully anonymous and this does not change here. No information is collected from the users, the device only tells the total number of connections, nothing else.)
• There is a very nicely written tutorial for replacing the original PirateBox design with my Design, including instructions how to modify the page for your liking.
• Also the chat was changed slightly. It is no longer operating as an iframe, but as a core part of the index (home) page. As a result of this it will load faster and it will eliminate compatibility issues with some devices. Also since it is now the part of the main page, there is no need for a chat.html page either.

Changing to my Design

 

Download: GitHub

There is a tutorial written by Maxime on GitHub that you can follow, but it is as simple as downloading the "Design 2.0" folder and copying over its contents to the Pendrive's pbIMG_ws.img/piratebox/www folder, overwriting any similar files already there.

Attention: Make sure you do a BACKUP of your own www folder and it's contents before overwriting files or doing any changes.

Screenshots

So that you do not have to go back to previous post to know what design I am talking about.

As you can see nothing has changed in the overall design, the pictures just show how the design looks to have a quick idea of what you get here. The change in chat is not remarkable to the naked eye, but it is a nice new feature that it doesn't need to be loaded and embedded from a separate page, but being part of the main page.

I also cannot show the mobile redirect, but that is one of the nice features I really like. So from now on even people from mobile devices can get a basic view of the site, however if they prefer they can sure view the browser version.

Future Plans

After talking to Maxime we have started to work together to give a better finish to the UI, add more functionality and improve general appearance and usability.
Our plans for the future are to add the following:

• Admin page with the features
• Allow editing (rename, delete etc.) of uploaded files
• Contain a short guide of terminal commands with the most important commands
• Option for owners to add video, music or possible games to the PirateBox that can be streamed to the users. It is likely that only "stronger" PirateBoxes will have this function as this will need larger amount of computing power from the router. (However as browser try opening files instead of downloading them anyway, this sort of works already.)
• Multiple languages support for the site so users could choose to view & use the PirateBox in their own, preferred language.
• Design adjustments to achieve a higher standard and make a more attractive UI in general for the public.

Videos, music and even flash games can be added easily by anyone right now as well. As HTML5 supports a videos and music, this can also be added relatively easily, see the example below for adding a video:

    <article id="video">
    <h1>Copy Is Not Theft!</h1>
    <h2>A short video illustrating the difference between stealing and       copying.</h2>
    <video id="intro_vid" width="600" height="450" controls >
    <source src="multimedia/Copying.Is.Not.Theft.webm" />
    <source src="multimedia/Copying.Is.Not.Theft.mp4" />
    </video>
    </article>

The above code would add a new article (section) to the man page where video(s) would be at multimedia/video.webNow you can see 2 video formats listed there, this is needed because in HTML 5 different browsers support different video types.

Similarly, you could add audio files to your site as well, example:

    <audio controls="controls">
    <source src="multimedia/audio.ogg" type="audio/ogg">
    <source src="multimedia/audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element, soz.
    </audio>

Where again the 2 file types are because of browser supports.
Although note that the standard pbIMG_ws.img container is only 20MB in size and all the files for the website must be in here. Now you can of course make a larger img file that could contain all the files and added videos, but this will take up space on the pendrive. Also the more multimedia you add, the more your box will have to work.

On my custom box I am using a 50MB container with just one short video and audio file for experimental purposes, it looks like this:

As you can see, I also made myself a "Video" and "Games" tab as well, the picture above shows the video page, but there is a flash game uploaded as well. It is running just fine, but not multiplayer.

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

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.

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