This is a story about a poor student who just want a storage solution for his musics, video and photos using a Raspberry Pi.
tobychui / arozos
General purposed Web Desktop Operating Platform / OS for Raspberry Pis, Now written in Go!
IMPORTANT NOTES
The current arozos is still under intense development. System structure might change at any time. Please only develop on the current existing ArOZ Gateway Interface (AGI) JavaScript Interface or standard HTML webapps with ao_module.js endpoints.
Features
User Interface
- Web Desktop Interface (Better than Synology DSM)
- Ubuntu remix Windows style startup menu and task bars
- Clean and easy to use File Manager (Support drag drop, upload etc)
- Simplistic System Setting Menu
- No-bull-shit module naming scheme
Networking
- FTP Server
- WebDAV Server
- UPnP Port Forwarding
- Samba (Supported via 3rd party sub-services)
- WiFi Management (Support wpa_supplicant for Rpi or nmcli for Armbian)
File / Disk Management
- Mount / Format Disk Utilities (support NTFS, EXT4 and more!)
- Virtual File System Architecture
- File Sharing (Similar to Google Drive)
- Basic File Operations with Real-time Progress (Copy / Cut / Paste / New File or Folder etc)
Others
- Require as little as 512MB system memory and…
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 :)
tobychui / arozos
General purposed Web Desktop Operating Platform / OS for Raspberry Pis, Now written in Go!
IMPORTANT NOTES
The current arozos is still under intense development. System structure might change at any time. Please only develop on the current existing ArOZ Gateway Interface (AGI) JavaScript Interface or standard HTML webapps with ao_module.js endpoints.
Features
User Interface
- Web Desktop Interface (Better than Synology DSM)
- Ubuntu remix Windows style startup menu and task bars
- Clean and easy to use File Manager (Support drag drop, upload etc)
- Simplistic System Setting Menu
- No-bull-shit module naming scheme
Networking
- FTP Server
- WebDAV Server
- UPnP Port Forwarding
- Samba (Supported via 3rd party sub-services)
- WiFi Management (Support wpa_supplicant for Rpi or nmcli for Armbian)
File / Disk Management
- Mount / Format Disk Utilities (support NTFS, EXT4 and more!)
- Virtual File System Architecture
- File Sharing (Similar to Google Drive)
- Basic File Operations with Real-time Progress (Copy / Cut / Paste / New File or Folder etc)
Others
- Require as little as 512MB system memory and…
Oldest comments (54)
it would be interesting to list the tool you used. Or do you write all by yourself?
Yes, I write it all by myself through out my 3 years journey of developing this system. You can find the source of all the WebApps in my repo.
It is awesome by the way
Awesome!
Thank you!
awesome,
Thanks!
Thanks!
This has been something I've been thinking about. Really interesting on how you implemted it. Any plans for future features or changes. Just curious.
I am thinking of supporting IoT devices (as a control hub) as well as cluster features for redundant file storage across different hosts. But feel free to share your thought by creating an Github issue. I would love to hear your ideas as well :)
I did something once. It's small but could add to ideas you'll come up with to standardize IoT support in ArOZ: github.com/dystopiandev/remoffice-...
I wired an Arduino UNO to a multi-channel relay board (as a sample IoT control gateway), then I linked the UNO to a RPi3B over I2C, which I interacted with from a Node.js backend over a Vue-based interface.
ArOZ is a wonderful concept with gorgeous aesthetics!
Thanks so much for you sharing!
I have checked your Github repo and seems you have done something similar of what I am working on. In ArOZ, it use something similar to your design but instead of I2C + Arduino, it use WiFi with ESP8266. I have uploaded some alpha testing code on Github over here and named it Home Dynamic v2
github.com/tobychui/Home-Dynamic
Maybe I will write a new post sharing my design concepts on this IoT system later.
Impressive
Kudos man! Great work.
Awesome! 🔥🔥
This is neat! I started a similar project at least 3 times but never finished one. Kept getting distracted by the hardware aspect because I'm bad with UI and wimped out. My use case was an RPi with 8" touchscreen as a frontend to an Intel i7 NUC... in my truck. Music, GPS/nav, ODB2, internal and exterior cams, wifi hotspot, video calls, lighting, plus integration with my various ham gear. Hopefully, I'll get back to that project one day!
Your system sounds more powerful than mine! Looking forward to your sharing after it is finished :)
I had a similar idea when I was in 6th or 7th grade of making an "OS in the browser" but back then I was a noob little kid with no skills, the best I got was a lockscreen and an app drawer like that of Firefox OS (remember that?). Seeing this fully realised is very satisfying to me. Great job!
Glad that you like the ArozOS project :)
I still remember Firefox OS as a mobile OS instead of a full desktop interface, and it is also one of the design concepts I studied before I started working on this system. This is the reason that I implemented the web desktop for mobile in ArozOS as well.
I guess now you should have the required skills to make your own "OS in the browser". Maybe you can consider give it a go again after all these years?
Haha I wish! Now that I have enough skills to figure out how to build it, I don't get enough free time 😅. I tried building an actual OS from scratch using an awesome tutorial by Phillip Opperman but it was too much work. Maybe if I get super excited about this again I might give it a go. Until then I might just find some hobbyist OSes and contribute to them.
We shall see!
It's amazing and overwhelming, how did you approach such a large project, I can't even think on how to start something like this.
It starts small (just a few hundred lines of PHP code), then I add things that I want into it during my free time between lectures (and also use it to automate some of my daily works). After years of tiny improvements it grow this large, which is kind of unexpected :D
This is so cool! Really awesome work 👏🏻👏🏻
Thanks!
Well, is really amazing all your work there, will be great if someday a NAS hardware maker use your OS on his devices and pay you for support and next releases.
Thanks! I think I will switch to full time dev if that really happens :)
This is brilliant work, Toby! Keep up the good work <3
This is so cool!