DEV Community

Cover image for Web-desktop: As Native-like As Possible
Toby Chui
Toby Chui

Posted on

Web-desktop: As Native-like As Possible

I have recently been traveling to another city. That is why I brought with me my trusty NUC installed with Debian + ArozOS besides my laptop. As this is my first time loading a few TB worth of files into this system, I soon running into issues where all the files I uploaded to the NUC is hard to find and I don't know what I have uploaded to the web desktop interface. This is how the systems look like before I start traveling.

Image description

And this is how it looks like now. Notice the difference?
Image description

Yes, File Previews!!!

One of the most important things of native operating systems like Windows and MacOS offer on-desktop preview of files. I have always forgotten to add this feature because most of the other web desktop system doesn't provide file previews. Even OS.js (which is the world most stared web-desktop project on Github) didn't implement this feature.
Image description

So I decided write myself one that can preview files on desktop. This is not something difficult as I have already implemented file manager previews in previous milestones.

This is just a simple update. However, if you observe carefully on the Window's File Explorer, other the video preview, you can also see the application that use to open / preview this file type. Here is an example of the preview thumbnail of two mp4 files.
Image description

As a user, you can easily spot:

  1. The filename of this file
  2. What is the video content (preview from first few seconds)
  3. What application will be used to open this file (VLC)

So that is why I also implemented this feature in ArozOS web desktop interface. With these implemented, now I can easily look for a specific file on the desktop.

Image description

Folder Previews

Window's folder preview is really helpful. It can help me look for a folder containing specific preview-able files like photos and videos (e.g. anime series). Although MS decided to remove it in Windows 11, I am implementing this feature in my system. The idea was simple: You first have a background template for the folder, then overlap 1 - 2 preview image on top to create an illusion of layered file structures

Image description

To update the thumbnail, you simply need to check if the mtime of the folder is larger than the mtime of the preview thumbnail. If yes, simply re-run the thumbnail generation tool and we can keep all our thumbnails up-to-date with the content inside the folder(s).

Hovering Tool-tips

If you are a Windows user, you might already knew that you can hover on top of a file on desktop and get its properties by keep hovering on top of the file for a few seconds. This feature was previously added in ArOZ Online Beta but didn't get migrated to the final version. As I just so accidentally need it today and can't find it, I decided to add this feature in as well, which make it even more native OS like.

Image description

And now the web desktop experience is even getting better!

Feel free to take a look at my Github repo if you are interested to host your own ArozOS system for fun :D

GitHub logo tobychui / arozos

General purposed Web Desktop Operating Platform / OS for Raspberry Pis, Now written in Go!

Image

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…

Discussion (5)

Collapse
ben profile image
Ben Halpern

This is very neat

Collapse
tobychui profile image
Toby Chui Author

Thanks!

Collapse
otumianempire profile image
Otu Michael

🧠...

Collapse
dustinbrett profile image
Dustin Brett

Looking good! I've got something similar in my Web OS. I like your attention to detail!

Collapse
ryanguitar profile image
Ryan Els

Very cool.