About Onno's Electronics Page

The beginning of E-page

In the year 2000, after I had rediscovered my fascination for electronics in 1999, I decided to build an electronics website of my own. I had been dabbling a bit with HTML before and I had already found out that building a website requires a lot of work. I had seen a number of sites of electronics hobbyists and collectors of quasi antique electronic equipment and I wanted a place on the Internet for my own modest collection and achievements.

Design philosophy

On the technical level, I wanted to stay in control of the HTML code as much as possible, to be able to make lightweight, elegant pages that could be viewed on -ideally- any browser. The browser wars had not yet ended and I hated the banners on many websites saying "Runs Best On Browser X". I have always been a believer in open standards, so I thought I would serve the world best by making a standards compliant website, not a website that would stimulate the use of some specific browser. Having had some experience with the monstruous HTML code that some HTML generators produced, I did not like the idea using one of those. They would introduce syntax errors and browser-specific features in my pages and result in bloated code. OK, I suppose there are tools that produce neat browser-independant code, but I wanted to be in control. So I wanted to use tools that would allow me to stay close to the HTML.

On the content level, I wanted to design a page-lay-out that would be easy to read, pleasant to look at and yet not too stern. I wanted to come up with a format that would allow me to tell an interesting story on every page and spice the stories with nice illustrations and photographs. I looked around for ergonomic guidelines and design rules, and tried to apply those rules as much as I could. Though I don′t pretend to be a professional designer, I do like pretty things that work and are robust.

First edition of E-page

I set out to write HTML pages in a plain text editor. I tried to catch as much style aspects in CSS learning from W3C and the definitive guide on html and css at Handleiding HTML

I hated the limited possibilities of the free text editors that come with Windows. But then I discovered that there was such a thing as Vim, a DOS port of vi/ex. As you will know, ex is an extremely versatile editor that was packaged with UNIX since the beginning of (its) history and vi is the full-screen front-end for it. The only problem with vi/ex is that its commands seem to be designed for martians, not humans. But those who have mastered it, can make it do virtually anything. Today, you would probably use Perl or Python.

Using Vim, I was able to write scripts to make changes to the common elements in the pages. But this turned out to be an error-prone approach.

Some time later, I discovered HTML-kit, a versatile freeware HTML editor. This helped me to write better HTML, but not to apply and change the templates over all the pages of my site.

The design of my site consisted of a low-contrast background image that suits the content of the page, blue headers and footers and a text on a yellowed paper colored background. Site navigation was through 4 clickable icons on top of each screen. A number of these elements have survived.

Using HTP for templates

As the number of pages grew, and I was working from a template to make each new page, it was getting harder and harder to make overall changes to the site. I wanted to change the common navigation elements. I felt I needed some kind of content management system (CMS). But I wanted to keep things simple, and my Internet provider of that time did not provide a CMS.

At the end of 2003, I found out about HTP, a HTML preprocessor. This gave me the chance to separate between templates and content and to make clever text replacements, even to generate automated tables of content. After mastering HTP and writing a number of scripts to have HTP process multiple files, I was able to manage my site the way I wanted.

Uploading the html files remained a tedious task, though. I wondered if it weren't a better idea to use PHP on my webserver to do the things that I now did on my PC at home. The possibility of using PHP only came years later, when I moved my site to my own domain on glowbug.nl. I haven't done so, yet.

Meanwhile, in 2012 I ported the scripts to Linux and started to use the Linux/Posix version of HTP. Surprisingly, I found I had to improve the syntax of some pages as Linux and the Linux/Posix version of HTP are fussier about syntax than the Windows version.

Making photographs

For my first pages, I used the snapshop function of my digital camcorder to make photographs. That wasn't really good enough. The lens caused some distortion and the pictures had a pink tinge in artificial light. A practical annoyance was the awkward and slow procedure to transfer the pictures to my computer.

I also used some scans of some conventional photographs I made with my Canon A-1 camera. Some of these were very good, such as the picture of the 6AU5 valve, taken with a 1-second shutter time to profit from the orange/yellow light emanating from the heater and show how the light reflected from the magnetic shield surrounding the CRT of my 545B scope. With my first digital cameras this kind of picture was out of reach, as the photographs became are too dark and they had problems with infrared light. Using photographic film is by far the best way to show the colors of glowing objects but it is expensive and time consuming.

In spring 2003 I bought a Sony DSC-P71 digital compact camera. After this, I could make pictures quickly and transfer them to my computer instantly.

The Sony camera gave 3-megapixel images and better colors. But to get good colors, I found out I had to watch lighting conditions with every individual photo shoot that I do. And it gave a purple tinge when I tried to photograph hot glowing objects such as the cathode of a valve. Many photographs on the site now (2008) are from this camera.

In October 2008 I bought a digital SLR camera, a Nikon D60. This one gives even better photographs. With this camera, I can control speed and aperture as I want to, and its sensor makes much better photographs of glowing objects. I tried it on an EF80 being tested in a tube tester. But for most pictures, the main obstacle to good pictures still is good lighting. I'm still broding on a photo set and some way to use slave flashes and diffusers for flashlight.

Graphic and photo editing

Over the years, I have used different software packages to edit photographs and make graphics. Because I only use these programs every now and then, I didn't want to invest a lot of money.

At first, I used a trial version of Paint Shop Pro. That worked fine, but the trial version didn't last long. I also used a free Microsoft photo manipulation program that came with Office 2000. I had it on my laptop from work, but not at home. I used it to produce the background graphics and buttons for the first version of E-page. At home, I installed Windows XP and Office XP in early 2002. The Microsoft Photo Editor program that came with it, was less powerful than its predecessor. Frankly, it was a bummer. It uses a primitive algorithm for image scaling, that causes moiré effects and its sharpening procedure causes a lot of speckles. I started to use HP Photo Editor, that came with my HP printer. That gave much better scaling options and allowed me to correct white balance a bit. I also tried the photo manipulation software that came with Nero 7. That was even better, but the user interface was a bit awkward.

Finally, I was tipped by a colleague about a brilliant open source, freeware photo and graphics editor called GIMP. I was warned that the user interface was a bit clunky. But that was more than outweighed by the excellent photo manipulation algorithms, different options to manipulate and correct colors, the possibilities to correct perspective faults and perform operations on selected areas. I quickly learned how to produce some sort of logo that I could use to imprint watermarks on pictures. The GIMP has a lot more possibilities that I will learn. It can also be used to draw graphics to further spice up the pages.

Drawing schematics

Schematic diagrams are the most important type of graphics on a website on electronics. I have always found it awkward to draw them on the computer. On a number of pages, such as the home-built M13 regulated high voltage supply I used scans of hand-drawn schematics and polished them a bit. At work, I used Visio a lot to make diagrams. It proved to be possible to use Visio for electronic circuit diagrams, but I had to design my own library of symbols. I have drawn the Eddystone 870 schematic using Visio, but that was quite a lot of work. Visio turned out to be a bit akward for this type of work, as it just refused to keep my components on a 1 mm grid and it made a lot of errors when converting a diagram to a bit-map output format.

I didn't want to spend big money on a CAD software package and tried using Microsoft Paint, which was prohibitively awkward. Good freeware software to draw schematics was hard to find, but finally in November 2008 I found TinyCAD, a freeware schematic capture program available for Windows. I have first used it to draw the “Principle of Operation” circuit for the Heathkit V-7A VTVM and found it was quite easy to draw schematics with it. Though the component libraries that came with it, are a bit of a hodge-podge, it is easy to edit the library symbols and make them into something that approaches ISO electronic symbols. I will certainly be using TinyCAD for more diagrams.

New layout - no tables

Striving for perfection, though admittedly fallible, I'm more than a bit sensitive to arguments by real purists that certain concepts in computing should be used in the way they are meant to be.

To be more precise: I wanted to replace the table based lay-out of my site by a lay-out that was totally controlled by CSS positioning. That turned out to be harder than I thought.

In 2005, when I moved my site to glowbug.nl, I changed the icons on the top of the page to buttons, whose appearance was controlled by CSS. But I still needed tables for the main lay-out and for the lay-out of figures with accompanying text.

I did a lot of searching, and from a number of sources, some of which are: ValidWeb.nl, Digital Web magazine, The noodle incident CSS guide, WebsiteTips.com, I learned just enough to use CSS positioning and make it work across different browsers.

On 2008-07-20 I published the new home page and a new chapter of the site, Intricate Instruments. At the same moment, I published the slightly adapted versions of the pages under Projects and Neon. Because the main text area for the pages had become a bit narrower, I had to check all of the pages to make sure the alignment of photographs and diagrams was OK, and none of the photographs was too wide. In September and October I finished the task of converting all pages to the new design. A lot of older pages, especially the ones describing radios and scopes, did't yet have an introduction paragraph and were not adapted to the standard layout for a figure with a caption.

In that course, I have also replaced more than three quarters of the photographs, making new renditions of the original files. Some of the pictures were too wide. Others I found too small, not showing enough details. There were also a lot of photographs that had ugly colors, caused by bad lighting. Most of those could be improved using GIMP. Finally, I decided to add a watermark to all of the photographs I had re-rendered. After some experimentation in HP's Photo Editor, Nero and GIMP, I found out how to quickly make watermarks from a template using GIMP. Some of the photographs still carry one of the early watermarks, those I will replace in due time.

On 2008-10-19, I finished converting all of the pages to the new lay-out and improving more than half of the pictures using GIMP. Since, I have added yet more pages. But the site will never be complete. I have at least 20 more collectibles that deserve a page of their own. And improvement will continue. If you think you have suggestions, please don't hesitate and go to the contact form.