The Klunky Schematic Drawing Web Page is intended for use by radio amateurs to draw small schematics. The capabilties of the web page are not great and the limitations of it make it suitable only for small schematics. If schematics bigger than the small ones that can be produced by the web page are needed, then one of the commercially available schematic drawing programs should be used.

However, small schematics are ideal for many radio amateurs. Since the web page is available to all and runs on many web browsers on a variety of computers, radio amateurs all over the world can use it to draw schematics. The HTML generate function can be used to put schematics on the web and thus allow hams to share schematics with each other. The schematics can also be screen captured and pasted into documents and thus included in the publications that hams produce.

The web page is written in HTML and Javascript. Because of that the source code is wide open and available to all. Radio amateurs are encourged to take the code, modify it, and create something even more useful to the ham community. The way the web page operates does not have to be limited to schematics. It could be extended to other uses such as printed circuit board layout.

II. Basic Operation

The original version of the Klunky Schematic Web Page is available at ../drawsch/drawsch.html. This version doesn't have all of the bells and whistles of the full version and so is perhaps better for demonstrating the basic operation.

Open a new window with your web browser so you can read this guide and play with the web page at the same time. Follow the link above and the original version should load. As it loads you will see the symbols clunk in. Once it has fully loaded you should see a table of symbols with one symbol displayed above the table and a blank area below the table.

Note that if you refresh the web page your schematic will disappear. Don't go to a different web page or your schematic will also disappear. Save your schematic first. See below on how to save.

The first thing to do is to select the symbol that you want. This is also where you will find out if your browser is going to work or not. Put the mouse pointer over any of the symbols in the table and click it. The symbol that's isolated above the table should change to the symbol in the table that you have clicked.

If it doesn't work try a few more times. If you can't make it work you might need to enable Javascript. If it just absolutely refuses to obey you might need to upgrade your browser. It does work with Internet Explorer 5 and Netscape 6.

Now that you have selected the symbol you want, you can place it anywhere in the drawing area below the table of symbols. Put the mouse pointer where you want the symbol and click. The symbol should clunk into that place. You can place as many symbols as you want in the drawing area but the drawing area is of limited size. You can't place symbols outside the drawing area.

The drawing area is also a table like the table of symbols above it, but there's no border around each individual symbol. You can place only one symbol in each cell of the the table. The alignment and the size of the table cells is fixed. You can't place a symbol halfway between one cell and another. This is why when you place a symbol it seems to magically line up with the other symbols in the drawing. There is no other choice.

This is also a severe limitation. A more sophisticated drawing program will allow you to drag symbols around to wherever you want. If you need to scrunch them up close in a schematic in order to cram more in, you can do that in the sophisiticated programs. On the Klunky Schematic Drawing Web Page you can only put symbols in the few places that have been defined for them.

So, proceed to place some resitors or capacitors or whatever you want in your circuit. Now comes the process of hooking them up. In sophisticated programs you just start drawing in wires. On the Klunky Schematic Drawing Web Page you have to place the wires as thoough they were symbols. In the table of symbols you should find straight wires, elbows, tees, and one kind of cross.

To draw a staight wire that crosses more than one cell you have to place a straight symbol in each cell. When you want to turn a corner you select the appropriate elbow and place it. If you need a tee just select it and place it.

These wires connect the middle of the sides of the cells. The component symbols are also designed so the components connect to the middle of the sides of the cells, so the wires and the components line up.

There is only one kind of 4 way cross, one with no connection. Use of a 4 way cross that is a connection causes misunderstandings, based on experience. If only one type is allowed, there can be no misunderstanding. If you need to make a 4 way cross that is a connection, combine two tees side by side. This might be a limitation on your schematic, but it keeps people from "letting the smoke out".

When you place a symbol that you don't want, you can erase it by selecting the blank symbol in the upper left corner of the symbol table and clicking on the symbol you don't want. If you want to change a symbol to a different one, just select the desired symbol in the symbol table and click on the place it goes. What ever symbol that's there will disappear and the correct one will clunk into place.

After you have drawn your schematic you need to save it. In this version of the web page there are only two ways you can save your schematic, by printing it out or doing a screen capture. Print the schematic as you would any web page. Different computers do screen captures in different ways. See the user's guide for your computer on how to do that. Some machines do a screen capture when you hold down the ALT key and hit the print screen key. You can then fire up a paint program and paste the schematic in.

Refreshing the web page causes your schematic to disappear. This is a way of deleting the one you have and staring a new one.

In this version of the web page there are also only two ways of annotating your schematic, paste it into a paint program and annotate there, or print it out and write the labels on the print out with a pen.

III. General Operation

The general version of the Klunky Schematic Web Pags is available at ../klunky/framed.html. This is the version with all of the bells and whistles.

Open a new window and follow the above link. Two frames will appear, one on top and one on the bottom. The top frame has the drawing symbols and the bottom frame has the drawing area. Frames were used because they are independently scrollable. So, you can scroll the symbol frame to the symbols of interest and you can scroll the drawing frame to the spot in the drawing you working on. Just use the scroll bars on the frames.

Web browsers have a full screen mode of operation. It might good to put the web browser in that mode while you're working on the schematic. On some web browsers it's as easy as hitting the F11 key on the keyboard. See your web browser's documentation on how to use full screen mode.

You can click on symbols in the symbol table and place them in the drawing just as you did in the simple version. The drawing area of the general version is larger than the drawing area of the simple version. Just use the scroll bars on the drawing frame to scroll to the section you want.

The only thing in the drawing frame is the schematic. So when you open the webpage it will appear blank. Nothing will in it until you place a symbol. Be carefull about going to other web pages, either by entering new URL's, the history list, refresh, or the back button. Your schematic will disappear and your work will be lost!

To mitigate that you can temporarily save your schematic to a cookie. Cookies are those nasty things that web browsers keep so comercial sites can store information on your machine. But in this case cookies are used to save your schematic. The schematic cookies aren't transmitted back to the server.

Below the symbol table are keywords for various functions. One keyword is "save" and another is "recall". When you click the keyword "save" you schematic will be saved to a cookie associated with the Klunky server called f1save. When you click the keyword "recall" the f1save cookie will be recalled and the schematic redrawn. If you remember to click save while you're drawing your schematic, intermediate copies of it will be saved and you can recall them and recover if your schematic accidentally disappears.

Later a way of saving cookies with more than the name f1save will be discussed. The f1save cookie is retained on your machine for 30 days. If you need to keep it longer, recall it and save it again.

Cookies are associated with sites. So if you access the Klunky site with one URL and use a different URL later, you can't get at the cookies you saved with the first URL.

There are also keywords for "left", "right", "up", and "down". If you run out of room on the right side of a schematic, you can slide the whole thing to the left by clicking on the left keyword. You can also slide the whole schematic right, up or down by clicking on the appropriate keyword. Symbols falling off one side of the schematic will show up on the other side. But symbols falling off the top or bottom of the schematic are lost.

The general version also has many more symbols than the basic version. These symbols will appear in row 4 of the symbol table, which is blank when the web page is opened. To get the symbols to appear in row 4 click on the appropriate keyword that appears below the symbol table. For example, if you want to draw with vaccum tubes, click on the "tubes" keyword. Symbols for a triode, tetrode, and pentode will appear in row 4. You can now select these symbols and place them just as you would any other symbol.

Since Klunky is pretty clunky about the way it hooks things up there are also some symbols with the tubes that help you make connections to them. Next to the triode is a symbol that lets you make connections to the filaments and the cathodes of the tubes. Next to the pentode is a symbol that lets you connect to the screen grids. Just place these symbols next to the tubes and then you can make the connections to them. There are also symbols like that for the switches and others.

The keywords immediately below the symbol table are an attempt to be descriptive of the kind of symbols that will appear in row 4 when the keyword is clicked. If you click one of those keywords and you're off-line, the symbol might not appear in row 4 because the browser hasn't yet down loaded it. Click on save to save your schematic, Refresh the web page, which will require reconnecting to the server. Then click the keyword of the symbols you want. Then click recall to get your schematic back.

The display keyword allows you to display your schematic all by itself. Clicking on display will open a new browser window and after a time delay the schematic will be displayed there. Even on a 500 MHz machine it takes several seconds for the schematic to appear. After the schematic has appeared you can do a screen capture and paste the result into a paint program for further editing. On some machines a screen capture is done by holding down the alt key and hitting the print screen key on the keyboard.

Klunky is very clunky about the way annotation is done, that is, the way components are labeled, such as R1, C3, U4, etc. Since html is frozen once it is displayed, the annotations can't be added as you draw. However space for them can be reserved. If you click the "misc" keyword you should se one of the symbols in row 4 to be "label". Click this symbol and place it where you want labels to go. The actual labels will be added later in the utilities frame.

There are 2 others ways of annotating your schematic. Perhaps the easiest and most straight forward is to just print it out and write the labels on the print out. The other way is to do a screen capture as above and use a paint program to edit the schematic and add the annotation.

Print your schematic by using the web browsers print command.

IV. Utilities

Clicking the utilities keyword will cause the symbols to dissappear and the utilities frame to appear in the top frame. The schematic should still be in the bottom frame but click save before clicking utilities just to make sure.

The top part of the utilities frame lets you use more cookies. You can name a cookie almost anything by typing the name in the box next to the cookie function you want to perform. However, there are restrictions on the name. Spaces, commas and semicolons are not allowed. Names like "vfobuffer" are.

To save the current schematic in a cookie, type the name in the box next to the save command, and click the save command. To specify a time other than 30 days to save to the cookie, enter that before saving it. To recall the cookie, type the name in the box next to the recall command and click it. You can delete a cookie by entering the name and clicking the command.

You can see all of the cookies associated with the URL in all of they're encoded glory by clicking the show all cookies command. That's useful mostly for debugging.

You can generate html for your schematic by clicking the generate html command. The html will appear in the top frame. You can then select all of the text and copy it to a file. You then have a stand alone web page of your schematic.

The generate html function is where label symbols are replaced with the actual labels. As the html is generated the schematic is scanned starting at the top left and proceeding to the right. When it gets to the right margin it moves down and does the next row of symbols. When the label symbol is encountered, the label that's been entered into the next label box is used to replace the symbol. The label boxes are used from left to right as the schematic is scanned.

After the html with the labels has been generated it then must be selected, copied, pasted and saved to a file. When the schematic is openned as a stand alone web page, the labels will appear. If an error is made, it's probably easier to edit the html file than to try to regenerate it.

The next function on the utilities page is the link function. Enter an URL into the link box and then click the command. A requested to click another link in the bottom frame will appear. When that is clicked the new frame appears in the bottom. It can be any web page but it only makes sense to link to web pages that have be generated by Klunky. You then click the back command in the top frame and return to the symbol table. You can then edit the schematic that was linked to.

V. Theory of Operation

The symbols are images that are 37 pixels by 37 pixels. An image can be anything that fits in 37 by 37 pixels, even little photographs. The symbols are designed with a paint program and then translated into jpeg files for use with the web page. The choice of 37 by 37 pixels was arbitrary but seems to be working very well.

The symbol table is just a table of available symbols. A border is drawn around each symbol to denote that it is in the symbol table.

The drawing area is also just a table of symbols. A border is not drawn around each symbol here. Even in a blank schematic the drawing area is full of symbols. They're all blank.

When you click on a symbol in the symbol table, the Javascript program records the source URL for the symbol. It also sets the source URL of the current symbol image to that. That causes the current image to change to the symbol that was clicked.

When you click on a spot in the drawing area, the URL for that spot is set to the source URL that has been recorded. This causes the current symbol to appear in the drawing area.

By clicking on symbols in the symbol table and then clicking in the drawing area a schematic is drawn. Since the symbols are images in html, a web browser that supports click events in images is required. If your web browser doesn't, nothing will happen. The newest version of the popular web browsers support click events in images.

The middle of the top, bottom, and sides of the symbols are the connection points to them. So for a symbol to connect to the one next to it, a line must be drawn to the middle of the appropriate side. That means symbols really only have 4 connection points, one on each side. Symbols that need more than 4 connection points, such as tubes, can be accomodated by having special symbols to bring the non-standard connection points out to the standard points.

Having the connection points in the middle of the sides also means that some creativity needs to be used when designing symbols for components that look better when connected at other than the center of a side. If it looks really bad a special symbol to bring the connection out to a standard point to be used with the component symbol can be created. But it still might look clunky.

The wires in the Klunky editor are symbols. A not-so-clunky commercial schematic editting program will allow you to enter wires just by clicking on the ends of where they go and where they turn. But the Klunky editor has to use symbols for straight horizontal and vertical sections, and 4 elbows for each direction of a turn, and 4 kinds of junctions, and 1 four-way cross.

The keywords that perform commands are links that instead of taking you to another URL, they call a Javascript routine instead. So you might notice that the behave like links. They're one color before you use them, and another color after.

There are 4 html files for Klunky. Here's a list of them.
framed.html - top level, doesn't do much except calls 2 frames.
f1.html - frame 1 with all the symbols.
f2.html - frame 2 with the blank drawing space.
uts.html - utilities frame.

There are well over 100 symbols in jpeg files for Klunky. Since they won't all fit in the symbol table at once, row 4 is reserved for symbols that are selected by keyword. Initially row 4 of the symbol table is blank. Clicking the keyword immediatelly below the symbol table for a group of symbols causes those symbols to appear in row 4. This was easy to do. Clicking the keywords calls Javascript functions that copy the source URL's for a group of symbols into the row 4 images source URL's. When the row 4 symbols are then clicked, the source URL's become the current symbol.

Cookies are used to save schematics because I don't know how to do file I/O in Javascript.

VI. Conclusion

I'm writing Klunky as a way to learn Javascript programming.

I was working on some other Javascript projects, particullary one that did Javascript animation. In that I was copying source URL's to images to cause them to change. It worked and then I got this idea that if you could click on an image and capture the source URL, you could move images around a web page. Since I'm an electrical engineer and not really a computer programmer, it occurred to me that this might be a way to make a schematic drawing program that runs in web browsers.

I came into work and I tried some experiments and the thing worked. I then got excited and wrote the basic version of Klunky in about 2 days. It worked and I posted it to the QRP-L mailing list. I got a good response from the great amateur radio operators there so I have continued to work on Klunky.

There are some important implications, I think, of the Klunky schematic editor. It works over the internet, which is the big-deal hyped-up technology these days. It runs on multiple kinds of machines, including PC's and Macs. Since it's written in html and Javascript it's wide open source code. Any neophyte programmer can easily figure out how to get into the guts of Klunky. And it draws simple, sort of clunky, schematics.

These things imply that it's ideal for amateur radio. It can be shared all over the world, which is where hams are. It can be used with diverse equipment, which hams have. It it can be modified, which hams love to do. And hams need simple, albiet clunky, schematics.

So, Klunky is my gift to amateur radio. If some ham, somewhere, can get some use out of it, he's welcome to it.