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.