Thursday, December 20, 2012

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.

23 comments:

  1. Hello,

    First I like to say great work on the designs! I'm currently working on some of my own based on your code. I was wondering if you have put some thought into customizing the "directory listing" page or the page you are directed to that contains all the downloadable content.

    Currently I'm using Piratebox v.3.2 but I'll be upgrading soon to v.5.1. I was wondering if in v.5.1 can the directory listings be customized? In v.3.2 it's just a long list of links. But I was wondering if it was possible to add "icons", this was it's easier to distinguish ebooks from videos, etc.

    Do you think this is possible?

    ReplyDelete
  2. Directory Listing can be custimzied. There is a small information page on lighttpd.org: http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting

    Hope this helps you a bit.

    Matthias

    ReplyDelete
  3. Wow! Thanks for that Matthias, it's a bit more complicated than I expected. I unfortunately don't have formal or extended coding experience. I still haven't installed the lighttpd version of PB on my MR3020 so maybe once I get that installed this will make more sense. Either way this helps a lot I'll play around with it and see what results I get.

    ReplyDelete
  4. Hello,
    I know that a nicer directory listing would be much easier for navigation and recognizing what file is what. I personally also have to get deeper into the directory listing linked by Matthias, it is definitely a future upgrade.

    I have seen on the forums that you would like more of a chat box. If you only have a set of files you want to share with connected users, you can build another download page where you can have nice folder icons etc. next to the download links (this should be relatively easy, add some icons to the empty space on the main page and make a hyperlink to a file).
    If however you want to customize the uploaded content as well, you will need the above mentioned mod.

    ReplyDelete
  5. Hello Nargen,

    I'm not sure which of of us you are referring to about the "chat box" post. But either way that's secondary, you brought up a good point about building another download page. I'll have to look into that, as I type I'm installing the lighttpd version of PB on my MR3020.

    As far as the customizing the uploaded content I'm not using that feature for my PB. I actually got into the PB stuff through the LibraryBox project (librarybox.us). They forked the PB to make more useful in a educational/library type of environment. I found your custom landing page design by chance because I'm rolling out my own custom PB for a project I started. So I wanted a highly customized landing page with a more modern design and features. Your design fit the bill with everything I wanted.

    So as soon as the installation is finished I'll be applying my custom landing page based on your design and post a picture. I'll see about learning to use Github so I can work with all of this code.

    ReplyDelete
  6. Ok got my PB working with lighttpd and making customization now. By the way I found this link on Matthias scripts page which does exactly what I wanted for the directory listings http://pboxalsace.wordpress.com/2012/05/06/tuto-personnalisez-le-directory-listing-de-votre-piratebox/

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Ok I got some errors but it turns out that I didn't install the correct version of PB. I had installed a later version which caused a bunch of errors. So now I'm installing the proper version and hopefully this fixed the previous errors. Just to be sure if I "cat /opt/piratebox/version" it should return "piratebox-ws_0.5.1" right?

    ReplyDelete
  9. http://pboxalsace.wordpress.com/2012/05/06/tuto-personnalisez-le-directory-listing-de-votre-piratebox/

    This link is to an older version of the PB (0.3.x if I remember correctly), as far as I know it will not work with the 0.5.1 (lighttpd). For the current PirateBox version (0.5.1) you will need to install the lighttpd mod referred to by Matthias.
    You could use the 0.3.x version of PirateBox and then you could go with the directory listing. However in this case you won't have ligghtpd so changing the web design (UI) will be much harder and I don't even know if it can be made too complex.

    I'm happy you found my design useful and feel free to change it.You can get back to me if you need any help with building a secondary download page or something. And I am definitely looking forward to receiving some pictures of the changes you made, it might give some ideas to me as well.

    ReplyDelete
  10. Thanks Nargen,

    As of yet I have been having issues installing PB 0.5.1. I'm gonna jump on IRC to see if I can get some help. I'm also gonna review the forums to see if there's something I missed.

    My handle on the forums and IRC is "hardrived", hopefully I can get the correct version on my MR3020 soon I'm anxious to get my designs running.

    ReplyDelete
  11. I put your design 2.0 in the www-all folder. The design is really nice. I translate everything in french :)
    But when I'm in the piratebox page, the chat isn't working and I can't access the download folder but I can upload a file :P

    Is there some commands to solve this ?

    Thanks ;)

    ReplyDelete
  12. Anonymous,
    are you running PB on a laptop or a router? What error message do you get in the chat window and when you try opening the download page?
    The download page should be just a link to dispaly the contents of the "Shared" folder. Can you please check if you have a link in your www folder to the Shared folder where the files are stored?

    ReplyDelete
  13. I'm running PB on a router, TP-Link MR3020.
    The error message for the chat is : "Triggered ajaxError handler on shoutbox".
    And when I'm trying to open the download page, it's : "404 not found" (url is : piratebox.lan/Shared).
    For "Can you please check if you have a link in your www folder to the Shared folder where the files are stored?", is it in "vi /opt/piratebox/conf/piratebox.conf :

    #------------------- Folder configuration --------------------#
    PIRATEBOX_FOLDER="/opt/piratebox"
    WWW_FOLDER="/opt/piratebox/www"

    #Datafolder , where is you usb-stick // drive mounted
    SHARE_FOLDER="$PIRATEBOX_FOLDER/share"

    #Upload folder
    # Change this if you want to user to upload data in a subfolder
    # Make sure the folder exists
    # UPLOADFOLDER="$SHARE_FOLDER/UPLOAD"
    UPLOADFOLDER="$SHARE_FOLDER/SHARED"

    ReplyDelete
  14. Anonymous,

    just consulted with Sensenmann and you have 2 options here. Since you have your files in the "www-all" folder instead of the "www" folder you can:
    1. Rename to folder to "www" which should solve the problem. Simplest
    2. Leave the folder as "www-all" but open the piratebox.conf & ligghtpd.conf on the router and exchange the path
    "WWW_FOLDER="/opt/piratebox/www" to WWW_FOLDER="/opt/piratebox/www-all"

    ReplyDelete
    Replies
    1. Hi again :D !

      I rename the folder to "www" and the result was that I couldn't access the piratebox web page anymore.
      I made some research and I found this : http://piratebox.aod-rpg.de/dokuwiki/doku.php?id=structure_of_openwrt

      with this command "ls -la /opt/piratebox", I should have this =>
      root@piratebox:~# ls -la /opt/piratebox
      drwxr-xr-x 9 root root 1024 Jan 1 00:03 .
      drwxr-xr-x 4 root root 0 Jan 1 1970 ..
      drwxr-xr-x 2 root root 1024 Jun 17 2012 bin
      drwxr-xr-x 3 root root 1024 Jan 1 00:03 conf
      drwxr-xr-x 2 root root 1024 Jun 17 2012 init.d
      drwx------ 2 root root 12288 Jan 2 1970 lost+found
      lrwxrwxrwx 1 root root 18 Jan 1 00:03 share -> /mnt/usb/PirateBox
      drwxr-xr-x 2 root root 1024 Jun 17 2012 src
      drwxr-xr-x 2 nobody nogroup 1024 Jan 1 00:00 tmp
      -rw-r--r-- 1 root root 19 Jun 17 2012 version
      drwxr-xr-x 5 nobody nogroup 1024 Jan 1 00:04 www

      BUT at the last line, I had something like that :
      www -> /mnt/PirateBox/www_alt
      I think it was that. I can't verify it because now I can't access my piratebox by ssh with the ethernet cable connected to my computer.
      I have this error message everytime I confirm my password :
      Server refused to start a shell/command
      and in Putty : Server refused to allocate pty

      I can access the web page of the piratebox but I'm back at the beginning because I still have the same problems with download, upload and chat...

      EDIT:
      I succeed to enter the password and change the line ("WWW_FOLDER="/opt/piratebox/www" to WWW_FOLDER="/opt/piratebox/www-alt") in "vi /opt/piratebox/conf/piratebox.conf" and now I can access the web page and upload but no chat and the error 404 for download is still there.

      Delete
    2. It is likely that you are still getting an error, because lighttpd, the webserver is looking for the files still in the www folder.

      You also have to modify lighttpd.conf on your router and do the same as you did with piratebox.conf, replace the router from www folder to www_alt.

      Delete
  15. Hi!
    This project is frozen? I`m about AdminPage for PB.

    ReplyDelete
  16. Hello,
    no the project is not frozen! I am doing it in my spare time, so I cannot tell when new features will be added.
    Updates are posted in this blog and on Github as well.

    ReplyDelete
  17. Can I suggest you something?

    Optimize share button: at the moment it look like this: http://i69.servimg.com/u/f69/17/85/32/91/share-10.png

    If you optimize it you can use one button (or image) for browse and send instead of one button for each of them.

    ReplyDelete
  18. Does any one know how to translate lighthttpd into other lang? Ort just the directory listing in 0.5.1?

    ReplyDelete
  19. Is there any chance this design will run with the current PB setups that you can pull straight from the site? I'm super new to all of this and I'm trying to find some stuff that works so I can play around with custom stuff and learn from there.

    I spent some time with the stuff up above, but I'm not certain if I can't get it running because I'm not competent, or because it's not compatible. (I lack the knowledge to tell either way! :P )

    ReplyDelete
  20. Hi!

    Well, this post is over 2 years old and ever since there were a lot of improvements made on this design. More accurately it was rewritten by others while keeping the format more or less the same. (And using the same text I wrote in a rush just to complete that part of the design, which makes me a bit happy.)

    Nevertheless if you want to use this, I'm pretty sure you still can. All you need to do is make a copy of the Piratebox/www folder on your USB drive to somewhere else to keep the original files. Then copy over all the files from my repository [url]https://github.com/Nargren/PirateBox/tree/master/Design2.0[/url] into the same Piratebox/www folder. After rebooting your PB you should be good to go!

    ReplyDelete
  21. Ya...see here you mention more improvements, rewrites by others...if you have some links to those i'd appreciate it. Been looking at the mod/theme area of the PB forums, but nothing jumped out at me.

    ReplyDelete