This is a story about a poor student who just want a storage solution for his musics, video and photos using a Raspberry Pi.

How it looks like when it started

Since 2016, I have been working on this project mainly for storing music and video files so that I can play them during my extra time between lectures in university. This is what it looks like back then.

The old version use PHP5 and later upgrade to PHP7 with Apache server as back-end. It didn't have a database connection although MySQL is installed on the same host that host the system. The system is glue together with a VB.net binary that scan and buffer the song list in background and the php script just render the list as a list of stream-able music files.

The source code can still be found on Github (But please don't use it)

Migration from PHP to Go

After using this system for a year or so, it started to get slow. One of the reason is that I am putting more and more large files into the system, and php itself cannot handle as many request as I needed to make a web desktop system native like. This is most noticeable when I am trying to copy a large file from one location to another location on disk. Hence, I must make a switch to another language. After some research, I decided to go with Go. The system, original named ArOZ Online System, was also renamed to ArozOS for simplicity.

How ArozOS looks like after 3 years

After 3 years of development, it basically recreate the native desktop experience on the web. Let starts with the desktop!

Desktop

The desktop basically recreate a mix of Ubuntu 20.04 as well as Windows. You can see a Ubuntu GNOME like calendar with notification bar.

You can also find a quick menu on the top right hand corner for powering off / restart your host (which can be disabled with startup parameter) and a shortcut for full screen and system settings

Just like Windows, it is really easy to create new items on your desktop as well as changing your desktop wallpaper.

The start menu is kind of remixed style of both world too.

And of course, my favorite rename UX ever:
(No pop-up box is just amazing)

File Manager

After some period of time, I am starting to upload other stuffs to my system. The best way to provide a generic interface for all types of files is of course, a File Manager. So I build one into my system!

The File Manager on top of my web desktop system contains two viewing mode. The list mode and the grid mode.

In Grid Mode, the File Manager will try to render everything to generate a thumbnail for easier file identification. It works on many different file types from video, music or even 3D model files.

The File Manager originally didn't have a way to sort files. As the number of files uploaded into the system are growing larger day by day, this was soon added to provide different sorting modes to make finding a file much easier.

And afterward, search mode (with the magical regex support of course!) was added to make finding files in a large folder much easier.

Btw, it also got a dark theme mode for finding your movie at night.

File Operations

The File Manager provide many basic file functions. You can find all of them in the context menu by right clicking any files or folders.

Just like a native OS, you can choose the open a file with a given WebApp with a default app selector.

To make it much easier to use, I also implement drag & drop style of file operation support. So you can easily drag a file from one File Manager window to another and the system will start copying / moving the file for you.

As Golang provide async way to handle request using go func, it makes it much easier to handle large file operations without freezing the whole system. The progress is powered by websocket and the backend will constantly return the file operation progress using the websocket connection.

File Sharing

Once a while, I would want to share (large) files to my friend. In that case, I can just use my own Web Desktop File Manager's share function!

(This is just an example. Do not give your friend links starting with domain named localhost)

Then my friend can download the file directly from my web desktop cloud system. Very convenience right?

Back to basic: Music and Video

This system was originally created for Music and Video streaming. So after 3 years, these function still exists and even get better then before. With the latest PWA technology, the Music module now become something like this

This interface can also be installed onto an Android phone as WebApp and even the player can be shown in native Android notification (which is call mediaSession btw).

The video module also get updated and powered by latest HTML technology, it can playback video with streaming mode, making movie streaming possible anywhere with a computer and browser.

System Settings

Basics

To manage such a complex system, a complex system setting menu is needed. We try to make it easier for anyone to manage the system so we go with the category approach that categorize system functions into different types.
For the most basic one, we can see CPU usage as well as host hardware information from the setting interface.

WebApps and Subservices.

Of course, as a web desktop platform, I also make an interface for those who need to manage their apps. Here is a list of apps I have written so far.

It doesn't make sense to ask the user (aka me) to change the code every time I want to modify any web apps right?
So I decided to split the webapps into two parts. WebApps are those only require basic permissions and do not interact with the host OS. They will be run inside a sandbox created using ECMA5 VM called Otto. The other type is called Subservice, in which it will need extra permission to interact with the OS and require higher level of access to the backend file system.

You can easily install and uninstall webapps using git link or zip files uploaded to the web desktop system.

Subservices can only be toggled on / off. If you want to make changes to subservice (which might effect system stability), you have to do it with the terminal instead. Here, showing 3 subservice I use most of the time.

Of course just like Windows, you can choose what application to open what file extensions using this menu.

Network and Connections

The web desktop can be accessed via FTP or WebDAV. So to make it easier for me to enable them only if I needed to, I make an interface for them in the System Setting module.

Mounting WebDAV folder on Windows without TLS but with user isolation is quite tricky. I got a few hack to make it to works. But this makes the connection process a bit complex and difficult.

For devices with WiFi, you can even change the device WiFi connection via the system setting interface.

If you enabled uPnP in the startup parameter, you can also setup custom rules in port forwarding. So you can expose more ports for other web services running on the same host.

User System

First of all, a basic user setting page for changing user icons and password

Sometime my friend with no disk space will "borrow" some of my storage places to put his file temporally. In order to isolate users in the system, I created a structure that allows each users belongs to a permission group and then by assigning permission to the group, I can limit what a user can access. Then, I build an UI for setting up those complex group systems.

I also make an UI for enabling the public register function, just in case my friend don't want to let me know his password for creating a new account.

Storage Management

Finally, to manage so many files, we will need disk manager. The System Setting have build in tools to visualize disk usage, help you find space in disk by locating large files and even DISK SMART thanks to a few PR by a user that actually use the system as his NAS OS.

To assign storage devices to permission group, a storage pool architecture was designed to fit this purpose. I doubt this system is the most basic way to implement this feature, but this can leave some space for future system expansion if I want to connect other cloud drive like Google Drive or OneDrive to the web desktop system.

It also got an advance function that allow you to format a partition just like what you do on Windows Disk Manager

Others

There are so many other WebApps that I want to share but due to time limit, I can only show you the most basic one. Maybe later, when I got the time, I will share with you more WebApps I wrote for this system. Here are some screenshot of them

Know More

Feel free to leave a star if you are interested in this project :)