Windows 93 – I plan to do better… eventually

EDIT: I did not make Windows 93. Zombectro and Jankenpopp did.

A friend of mine showed me Windows 93 today. I have to admit that it’s fairly impressive, but I found it to be quite coincidental that my friend shared it because I’ve had the idea of doing something like that for a long time.

Windows 93 desktop

Windows 93 – First boot.

I’ve had the ambitious idea of making a Web-based Windows 95/98 clone for years now (since 2008); I just haven’t had the time to actually do it. I intended it to be a project to help me learn jQuery and AJAX, as well as something to apply my then-few-months-old HTML/CSS/JavaScript knowledge. I chose Windows 95 because it has a simple interface that is relatively easy to recreate using HTML and CSS. I would have liked to copy Windows 98, but the gradient proved difficult to replicate with CSS 2 using unprefixed code.

Due to other priorities, and with hopes that new advances would make recreating the look much easier, I shelved the project. The next time I thought about reviving it was when I made a winmine (Minesweeper) clone in Java that looked almost exactly like the XP version, which I lamely called “Losemine” (whose source code I may or may not get around to publishing).

Losemine/Winmine comparison

Losemine (winmine clone). On the left is the original WinXP winmine. The other two are the clone running on Linux and Windows.

Still, I didn’t end up doing anything with the clone project except think that I could make a DHTML port of Losemine and have that as one of my applications for the Windows clone.

Sometime in the beginning of September of this year, I started work on a Web-based Windows Classic theme designer (source code on GitHub). The goal is to be able to configure the colour scheme of a Windows theme through a Web interface and dynamically output a valid Windows theme file. My motivations for starting this project are to learn Git and to update my HTML/CSS/JavaScript skills. My biggest motivation is that ever since I migrated to Linux, I haven’t been able to sanely develop any Windows Classic themes. My options so far have been to reboot to Windows or run a Windows virtual machine. Rebooting to Windows every time I want to make a theme is highly unreasonable, and running a Windows virtual machine isn’t always an option when I only have 4GB of memory. I don’t want to stop making themes altogether, because I’ve made some really nice themes, even if I do say so myself (if any of them catch your eye, leave a comment and I’ll post a link to the theme file), some of which are featured here:

Unwilling to go on without making some sort of attempt to ease theme development, I started work on the theme designer. Even from the conception of the Windows clone project, I wanted everything to look as close to the original as possible, even down to the pixel, much like the winmine clone. With the thought in mind that the theme engine will be crucial to the Windows clone project, I’m writing the code with the intent to reuse it in the Windows clone project with minimal edits.

This is what I have so far, as of writing this post (rendered on Pale Moon 24.7.2):

The theme preview area as of 2014-10-27 for my Windows Classic Theme Designer

The theme preview area as of 2014-10-27 for my Windows Classic Theme Designer

Compare that with the original:

Preview area for Windows Standard

Preview area for Windows Standard

Apart from the “Selected” text, whose look I kept from previous versions of Windows to make it more useful, it’s actually a fairly accurate reconstruction. The only things I need to work on are the font details and the dialog window button. Overlaying my reconstruction with the original yields this:

My reconstruction overlaid on top of the real thing.

My reconstruction overlaid on top of the real thing.

I spent a good month or so playing around with the titlebar and buttons just to get them to look right. Although it may not appear so, the titlebar gradient does not stretch from one end to the other; instead, it only spans the title itself. The left-most area with the icon and the right-most area with the window controls have solid-colour backgrounds, namely the left and right endpoints of the gradient. The window controls also would not have a predetermined width, since there aren’t always just the three window control buttons. These requirements made stretching the title area by floating the icon and window controls impossible as a solution. I tried using a CSS table, but that made the window control buttons flow vertically. After weeks of searching, I discovered that flexbox was exactly what I needed.

The buttons were also a fairly time-consuming element, although not as much as the titlebar. The problem with the buttons is that they require a compound border. CSS only provides a single border, so the hack that I settled with was using multiple solid box shadows. Box shadows don’t displace anything, so each button has to have at least a 2px border to compensate (which is probably why the dialog button in my reconstruction is off).

About a week ago, I decided to rewrite my stylesheets to use SCSS/SASS. SASS supports variables, and variables are very useful when certain elements should take the same colour all the time. In fact, that’s what Windows does: in a standard theme file, there’s a section ([Control Panel\Colors]) that defines the various colours used throughout Windows. It contains something like the following:

ActiveTitle=10 36 106
Background=58 110 165
Hilight=10 36 106
HilightText=255 255 255
TitleText=255 255 255
Window=255 255 255
WindowText=0 0 0
Scrollbar=212 208 200
InactiveTitle=128 128 128
Menu=212 208 200
WindowFrame=0 0 0
MenuText=0 0 0
ActiveBorder=212 208 200
InactiveBorder=212 208 200
AppWorkspace=128 128 128
ButtonFace=212 208 200
ButtonShadow=128 128 128
GrayText=128 128 128
ButtonText=0 0 0
InactiveTitleText=212 208 200
ButtonHilight=255 255 255
ButtonDkShadow=64 64 64
ButtonLight=212 208 200
InfoText=0 0 0
InfoWindow=255 255 225
GradientActiveTitle=166 202 240
GradientInactiveTitle=192 192 192
ButtonAlternateFace=192 192 192
HotTrackingColor=0 0 128
MenuHilight=0 0 128
MenuBar=192 192 192

That is, the variable, followed by an equals sign (=), followed by space-delimited decimal RGB values.

Converting that into SCSS and formatting it nicely (and sorting, because it’s a mess otherwise) results in this:

$ActiveBorder:   rgb(212,208,200);
$ActiveTitle:    rgb( 10, 36,106);
$AppWorkspace:   rgb(128,128,128);
$Background:     rgb( 58,110,165);
$ButtonAlternateFace:   rgb(192,192,192);
$ButtonDkShadow:   rgb( 64, 64, 64);
$ButtonFace:     rgb(212,208,200);
$ButtonHilight:  rgb(255,255,255);
$ButtonLight:    rgb(212,208,200);
$ButtonShadow:   rgb(128,128,128);
$ButtonText:     rgb(  0,  0,  0);
$GradientActiveTitle:   rgb(166,202,240);
$GradientInactiveTitle: rgb(192,192,192);
$GrayText:       rgb(128,128,128);
$Hilight:        rgb( 10, 36,106);
$HilightText:    rgb(255,255,255);
$HotTrackingColor:      rgb(  0,  0,128);
$InactiveBorder: rgb(212,208,200);
$InactiveTitle:  rgb(128,128,128);
$InactiveTitleText:     rgb(212,208,200);
$InfoText:       rgb(  0,  0,  0);
$InfoWindow:     rgb(255,255,225);
$Menu:           rgb(212,208,200);
$MenuBar:        rgb(192,192,192);
$MenuHilight:    rgb(  0,  0,128);
$MenuText:       rgb(  0,  0,  0);
$Scrollbar:      rgb(212,208,200);
$TitleText:      rgb(255,255,255);
$Window:         rgb(255,255,255);
$WindowFrame:    rgb(  0,  0,  0);
$WindowText:     rgb(  0,  0,  0);

The original code can be easily converted using a regular expression substitution (i.e. search and replace). In Vim, this substitution can be used:

:s/\(.*\)\s*=\s*\(.*\)\s\+\(.*\)\s\+\(.*\)/$\1: rgb(\2,\3,\4)

Since the only things that change are the colours (and the fonts and font sizes, but that’s more advanced), I created a template file as a SASS partial and added an include directive for the template at the end of every theme file. This modular approach is nice because if there’s an error in the template, I only have to change it once in the template instead of once for every theme.

The next challenge is to figure out how to implement a scroll bar. If it weren’t for the little square in the corner when there are two scrollbars, absolutely-positioned elements would have done the trick.

Scrollbar corner

The corner where two scrollbars meet

After that, the preview is more or less done, but that’s only half of the project. The second part is the actual configurator, using jQuery to make it dynamic.

It’s interesting to note that this project is completely text-based, even the images. The window control buttons, and eventually the scrollbar buttons, are SVG images, which is an XML-based format (and XML is text-based). Using SVG allows the buttons to scale cleanly when necessary and be recoloured dynamically.

Again, the theme designer, even in its currently-unusable-but-still-impressive state, can be accessed through the project page, and the source code through the GitHub repository.

It may take months to finish the theme designer, and it’ll probably take a few years for the Windows clone to surface, but when it does, it’ll be worth it.

Advertisements
9 comments
  1. I am aware of the Windows 98 theme for Tumblr, and it looks “proper” because it uses actual images from Windows 98. Of course, using images greatly restricts customization, so that’s not an option for me. Plus, it’s more impressive to code it by hand.

  2. Even older, there’s Michael Vincent’s home page which imitates Windows 3.1 impressively well (in what it does implement, anyway). It even allows you to do some limited customization, namely changing the wallpaper.
    On the technical side, the buttons are handled using CSS sprites, and the interactivity is coded in plain JavaScript (i.e. no jQuery)!

  3. Powerplayer said:

    Hey that could make an android win95 launcher i always wanted one also it could fix the bugs in classictheme for windows 8 at http://forum.thinkpads.com/viewtopic.php?f=67&t=113024

    could you make an android launcher with this code and possibly help fix up the broken classictheme on windows 10?

    • I’m sorry, but I’m afraid you’re overestimating my abilities. I neither have the time nor the experience for either of those. The two codebases are unrelated and one will not help you solve the other.
      Also note that I’m not the author of Windows 93, and the themes that I make are under Windows 7, which still supports the Classic theme.

      On the technical side for the Win8/10 classic theme, it’s not a theme in itself. It actually works by disabling the theme service, making Windows fall back to the built-in Classic theme that Microsoft tried to bury. The bugs are there because Microsoft no longer supports the Classic theme and coded things under the assumption that the theme service is running.

  4. Corey said:

    Hey do you mind giving out the source code for Windows 93 as I wanted to edit it and give it my own spin/ design and play around with it since its very interesting all running in the browser, heck maybe ill make my own Linux vsersion of it if I wanted to.

`$name' says...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: