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.

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

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.

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.

I write my own web desktop OS for 3 years and this is what it looks like now

Toby Chui ・ Apr 4 '21

#webdev #go #linux #ux

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.

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.

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

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.

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

tobychui / arozos

Web Desktop Operating System for low power platforms, Now written in Go!

Features

User Interface

• Web Desktop Interface
• 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

• Basic Realtime Network Statistic
• Static Web Server (with build in Web Editor!)
• mDNS discovery + SSDP broadcast
• UPnP Port Forwarding
• WiFi Management (Support wpa_supplicant for Rpi or nmcli for Armbian)

File / Disk Management

• Mount Disk Utilities

  • Local File Systems (ext4, NTFS, FAT etc)
  • Remote File Systems (WebDAV, SMB, SFTP etc)

• Build in Network File Sharing Servers

  • FTP, WebDAV, SFTP
  • Basic Auth based simple HTTP interface for legacy devices with outdated browser

• Virtual File System + Sandbox Architecture

• File Sharing (Similar to Google Drive)

• Basic File Operations with Real-time Progress (Copy / Cut / Paste / New File or Folder etc)

Security

• oAuth
• LDAP
• IP White / Blacklist
• Exponential login timeout

Extensibility

• ECMA5 (JavaScript…

View on GitHub

Comments

[Ben Halpern]

This is very neat

[Toby Chui]

Thanks!

[Michael Otu]

🧠...

[Dustin Brett]

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

[Ryan Els]

Very cool.