Desktop Designer

C64 OS v1.07 is currently in beta testing. It will hopefully be released soon, and is another free system update to all licensed users of Version 1.0 and up.

A whole pile of cool new things are coming in v1.07. However, today I wanted to talk about something a little less well known, but nonetheless I think is pretty cool. It's a new Application that I created for C64 OS called Desktop Designer.

In the very first release of C64 OS, version 1.0, there was a handful of tools included for creating different types of image data that C64 OS consumes. For instance, there was (and still is) a set of two programs found in the //os/desktop/ directory for creating desktop backdrops. How they work is very basic. You load and run screenedit. It clears the screen and installs a very simple listener for PETSCII control characters. It supports one to invert the characters on the screen, one to reload the screen from a filename that you specify, and another to save the screen to that filename by invoking the second too, screensave.

With these two simple tools, you can use the standard screen editor from the READY prompt to draw simple PETSCII pictures on the screen using the cursor keys and the PETSCII symbols on the keyboard. When you get a screen that you like, CONTROL+Z (if memory serves) writes the 1000 bytes of screen memory out to the file. This file can then be opened as a backdrop in App Launcher, in C64 OS.

This pair of tools works, kinda, but they're very hacky and full of weird gotchas and my guess is that no one but me has ever bothered to try to use them to make a backdrop.

I wrote Desktop Designer because I wanted a simple Application, that can run within C64 OS itself, to be able to create these desktop backdrops. But... it evolved into something that is quite a bit more interesting and useful.

The Advantages of being a C64 OS Application

Desktop Designer is, at its heart, a PETSCII graphics editor. But it makes great use of several C64 OS technologies. Among these are included:

• A point and click UI with the mouse
• Pull down menu options
• Discoverable keyboard shortcuts
• Screen compositing, allowing for:
  • Non-destructive guides
  • Floating character palette
  • Transparent drawing and coloring
  • Overlaying menus
  • Use with Utilities
• Standard Open and Save dialog boxes
• Device agnostic storage
• Custom character sets
• Dynamic memory management
• Integration with Fast App Switching

I know you've heard it all before, but all of the above made writing an App like Desktop Designer fun and easy. Most of the hard work has already been done by C64 OS. You would never put as much effort into a stand-alone PETSCII graphics editor for the Commodore 64 as the effort that was put into C64 OS's technologies that can be put profitably to use in an App like this.

For example, the File Open dialog; To pick a file to be opened in Desktop Designer, you get a movable Utility panel that you can interact with by mouse. You get all the device detection and the list of recently accessed files in a resizable left panel. You get sortable directories, and it works with all of the devices that C64 OS supports, like, 1541, 1571, 1581, FD-2000/4000, CMD HD, RAMLink, IDE64 and SD2IEC. This is exceptional, you would never put this level of effort into a stand alone app. But you get this all for free in an App for C64 OS.

Drawing with Desktop Designer

When you first open Desktop Designer you're greeted by this cool looking splash screen.

This splash screen was created in... you guessed it, Desktop Designer! So that's fun. It gives you a little flavor of a few different types of things that can be created or edited with it.

From the menu bar, we have File, Options and Charset, top level menus. From the File menu you can create a new document or open an existing one.

When you start a new document the canvas is cleared. From the Options menu you can choose to show the palette. The palette is a floating box in the middle of the screen, but which is non-destructively composited overtop of the canvas. This shows all 256 characters of the current character set in 8 rows of 32 characters each. Which characters appear here depends on the character set you've chosen.

From the Charset menu you can switch between the C64 OS system character set, any custom character set that was loaded with a file that was opened with an embedded character set, or choose the standard ROM's lowercase/uppercase or uppercase/graphics sets. These can be changed at any time, on-the-fly, either by choosing from the menu or with COMMODORE+1, 2, 3, or 4.

When a set is selected other than the C64 OS system character set, the menu bar and status bar may look slightly broken. If you can't figure out what you're looking for in the menus, a quick press of COMMODORE+1 will switch the character set back to the system set so you can read the menus properly. If a Utility is opened concurrently with Desktop Designer, the character set is automatically changed to the C64 OS system set, but the set that was selected is saved and restored automatically when the Utility is closed.

From the palette, you can choose any character by clicking on it. The selected character appears in a preview space at the bottom left corner of the palette. You can also choose the foreground color from the color palette at the bottom right. The selected foreground color has a small plus symbol drawn over it.

You can now draw on the canvas by clicking, or click-hold-and-drag. Drawing is composited in realtime, so you can draw on the canvas at the same time that the palette is open. You can even click down on the canvas and that drag the mouse over the canvas and it will continue to draw on the canvas behind the palette where you can't see. For the basics of drawing, choose different characters and colors from the palette and click where you want them to appear.

Tips and Tricks for drawing

Desktop Designer is loaded with features to make drawing easier and more powerful.

Constraints

When you want to draw a long straight line, it's easy to accidentally move your mouse off the current row or column you're drawing in. This is annoying because it fills in a cell that you didn't intend to fill in.

You can constrain the drawing cursor along one or the other dimension by holding down modifier keys. Click where you want to start drawing, then hold the LEFT-SHIFT key to lock the drawing to that row. You can now drag left and right, and even if the mouse pointer itself deviates from that row the characters you're drawing stay restricted to that row.

Similarly, you can use the CONTROL key while dragging to constrain the drawing the current column. Constraints make it much faster and easier to draw straight lines and boxes with fewer frustrating mistakes.

Guides

From the Options menu you can toggle the display of two guides, horizontal and vertical. When a guide is turned on it is composited above the canvas (and below the palette if the palette is also showing.) To move a guide, click and drag the guide to a new place.

Just as you can draw under the palette by clicking the canvas and dragging the pointer over top of the palette, you can also draw under the guides.

The guides show a repeating sequence of numbers: 1, 2, 3, 4, 5, 6, 7, 9, 0. These allow you to easily count rows and columns. They also allow you easily line up something you draw on one side of the screen with something you draw on the other side. Alternatively, you can use the numbers on the guides to count how many cells tall or wide something is. This can be very helpful when the characters within the cells connect one to the next making it difficult to see where one cell ends and the other begins.

The keyboard shortcuts CONTROL+W and CONTROL+A are assigned to the guides so using your left hand you can easily toggle the guides on and off while drawing with the mouse in your right hand.

Hidden Features of the Palette

From the color area of the palette, just clicking a color chooses it as the foreground color. You can also use the modifier keys CONTROL and COMMODORE while clicking a color to change the global background and border color.

To the left of the color palette is a block with a diagonal strike through it. Click this to choose the transparent color.

In addition to choosing characters from the character palette to draw, there is one character that represents the C64 OS transparent character. It is the leftmost character of the fourth row. Because this character is the universal transparent character, when the palette is opened and composited to the screen, the palette itself is transparent at this spot! The character and color from the canvas (or the guide) below that cell shines through.

Color and Character Transparency

Using the Palette to select either a transparent color or a transparent character lets you do some cool stuff.

Drawing with the transparent color selected only affects the character map, but leaves the color map unchanged. If you already have the colors you want laid out, this can save a lot of time letting you play around with fitting in different characters without having to constantly pick the right color too.

The transparent character, in my experience, is even more useful. This allows you to take an existing image and either add color to it, or modify the color map only without affecting the characters.

In this sample PETSCII art that I found on CSDb, and then subsequently ripped to the .PET format with the new Image Ripper v2 tool, the trees are an autumn mix of red and light red. Without worrying about the selection of characters, by drawing with the transparent character, it's a snap to recolorize these trees to springtime shades of green.

Way back in 2017 I wrote a blog post about a simple PETSCII art renderer that I wrote for the web. It produces monochrome PETSCII files consisting of just 1000 screen codes and nothing else. This format is today what's used for the desktop backdrops of App Launcher.

But with transparent character drawing in Desktop Designer, you can colorize these images in fun and creative ways.

Typing Strings

Desktop Designer is also great for mocking up C64 OS user interfaces (or even text-based UIs of non-C64-OS software, why not?) In this situation, it is often desirable to layout strings of text. For example, the title bar of a Utility panel or the text on buttons and UI labels.

It would be tedious to have to constantly go back to the palette to pick and click every individual letter. But you don't have to. Start by picking any character from the palette, either a standard character (the top half or top four rows of the character set), or a reversed character (lower half of the set), then click anywhere on the canvas. That character appears where you clicked, but the text cursor is also set there. Type out any regular display characters onto the canvas, and they maintain the color and the reverse/non-reverse state chosen for that initial character.

Supported File Formats

Desktop Designer can open files in a number of formats. The data is rendered to the canvas and the canvas can be saved out to either the original format, or to any of the other supported file formats. The canvas data is converted to the target format during save, and depending on what the format supports, some data on the canvas may not be retained.

• .PET files (Screenshots, images from Image Ripper v2)
• App Launcher desktop backdrops
• Mouse Pointers (Two overlaid hi-res sprites)
• 3x3 Character Icons (C64 OS Application Icons)
• 1x1 Character Icons (C64 OS Icon Library for UIs)
• PETSCII Bots (12x16 and 7x5)

The Unversal .PET Format

The .PET format is the most complete file format that retains 100% of the data that is possible to edit in Desktop Designer. If you want to draw full-screen PETSCII art, then this is the file format for you.

The .PET format is 1000 bytes of screen codes, 1000 bytes of color codes, plus the option to specify either of the C64's two built-in ROM character sets, OR to use a custom character set that is saved and loaded with the .PET file. In addition, the .PET format retains the global background color and border color. Files saved in the .PET format can be opened and viewed later with the Image Viewer Application or with the tool included from the READY prompt for viewing screenshots (//os/c64tools/:petsciiview.o)

Another nice feature of the .PET format is that you can use it to save your work in some intermediate state, or with notes on the side, or with extra detail, or in some cases even multiple copies or variations of your work. Later, you can save either a portion of the screen or the full screen in reduced detail to one of the other formats.

In the screenshot above, multiple variations of the 1x1 memory icon are tried out side-by-side. The whole canvas can be saved in .PET as an "original." And from that original any 8px by 8px sub-region of the screen can be saved out as the 1x1 character icon.

C64 OS Screenshots are captured in the .PET format. So you can open those in Desktop Designer and draw tweaks to layout or play with changes of color that is in the visual context of the OS.

With the Image Ripper v2 tool (//os/c64tools/:imgrip.o) demo PETSCII art that has been released in .PRG format (most common on CSDb) can be converted to .PET as a pure data-format. This lets you open PETSCII art in Image Viewer to enjoy within C64 OS, or in Desktop Designer where you can make your own changes. here are a few wonderful examples, brought into C64 OS via the .PET format.

Desktop Backdrops for App Launcher

A desktop backdrop consists of only 1000 bytes of screencodes. Additionally, since the backdrop is rendered in the context of the operating system, it should be edited using the C64 OS system character set.

Colors are not retained in the file format, because the images are monochrome and the color is provided by customizable desktop settings in App Launcher itself. You can however use Desktop Designer to provide the colors so you can get a feel for what it will look like in App Launcher.

There are two handy features to help you work with colors and desktop backdrops. From the Options menu you can open the Colors Utility. Picking a color with this Utility fills the entire color map with that color. This is different than picking color from palette. Because this is more destructive, it's safely tucked away in the Colors Utility. You wouldn't want to replace all the colors in piece of PETSCII art you were working on by accident.

The other feature is, invert, also found in the Options menu. This flips bit 7 on all characters in the screen map. This is not as dangerous. It gets it a keyboard shortcut to trigger it easily. If triggered accidentally, you can perfectly reverse its effect simply by triggering it again. It's very useful for desktop backdrops because you often want to draw something small, like a neat logo, but you want to logo to appear in the global background color and then the majority of screen to be filled with solid blocks so they take the foreground color and merge at the edges of the screen with the border.

The following example illustrates this more clearly.

To create this image, first, the Colors Utility was used to fill the color map with black. Then the clear option was used to fill the screen map with space characters. Because the bits of the space character are all 0s, the black does not show at all, only the global background color of white shows.

The logo is quite small, however, so it was drawn by choosing the solid block character, $a0, which is the reverse of space, $20. The logo was then drawn with the transparent color selected from the palette so that the filled black in the color map is unaffected. Then the typed string feature was used to type the word 'MEGADATH' below the logo.

Lastly, using the invert feature, the skull became white, and the white surroundings became black, which merge with the black border. And the backdrop is completed.

Mouse Pointers

Loading a mouse pointer renders the bits of both pointer sprites into the PETSCII canvas. Sprites are 24 pixels across by 21 pixels high. The mouse pointer uses two sprites but they always overlap. These are rendered to the canvas as two different colors and two different characters.

The sprites are loaded into the canvas at a special offset within the canvas: The second row, that is, the row immediately below the menu bar. This was done so that you can see the full sprite data without having to hide the menu bar. And starting in the 1st column. It is recommended that you use the guides, as shown in the screenshots below, to demarcate the right and bottom bounds of the sprites. Any data drawn to the canvas outside the 24x21 columns and rows will not be retained when you save the canvas as a mouse pointer.

When saving it is the characters in the screen map that determine which bits are set in the sprite data. The colors are irrelevant but used to help you see the different sprites more easily. By default the sprites are loaded using a space for unset bits, a solid block for set bits in one of the two sprites, and the diagonal stripes block for set bits in the other sprite. When saving, the diagonal stripes character can in fact be any character, other than a space or a solid block.

The screenshot, above right, shows that we've just modified the standard Amiga-style mouse pointer that ships with C64 OS. A question mark was added, just for fun. To see what it will look like as a real mouse pointer, the Mouse Utility can be opened concurrently with Deskop Designer. Just click the pointer radio button and it reloads in the pointer from the file.

New to C64 OS v1.07 is the ability to choose large sprites for the mouse pointer. To do this, hold the CONTROL key while clicking the radio button to select the pointer style. The sprites is doubled in both directions.

3x3 Character Icons

In C64 OS, Applications have a standard icon that is composed of 3x3 characters. These are referred by the datatype, image/3icon.

Desktop Designer can load and edit 3icons allowing you to create a nice icon for your own Application, or hack around and modify the icons of existing Applications. Icon files are stored in Application bundle directories with the name "icon.charset".

An icon that's 3x3 characters is, slightly larger than a sprite, 24x24 pixels. These get rendered as full characters to 24 columns and 24 rows. Again, like sprites, the pixel data is rendered starting at the 2nd row, just below the menu bar, and starting in the 1st column. In order to see and edit the bottom-most row of pixel data it is necessary to hide the status bar. This can be done with the global keyboard shortcut, CONTROL+COMMODORE+SPACE.

You can see in the screenshots above that the status bar is hidden to reveal the bottom pixel row of the icons. In the left shot, the guides are being used to help align elements within the icon, just as you would for any PETSCII art. Although only the vertical guide is needed to mark the bounds of the icon's width, since the height always runs from just below the menu bar all the way to the bottom of the screen.

When loading icon data, the pixel data is rendered, similarly to how mouse pointer sprites are rendered, except that there is no overlapping of two sprites. Off bits are rendered with a space and on bits are rendered by a solid block. When saving though, spaces save as 0 bits and any character that is not a space saves as an 1 bit.

The invert feature previously mentioned for desktop backdrops is also very useful for icons. If you want your icon to mostly be a dark square with something etched out of the middle of it, it is easier to draw the small etched part in foreground and then invert all the bits.

We can see this in the above examples, along with the vertical guide being used to mark the 24 column width of the icon. After saving an icon that's being edited inside an App bundle, fast switch back to File Manager and you can open the About This App Utility and inspect the Application. If you don't like how it looks in its natural size or surrounding context, fast app switch back into Desktop Designer and keep tweaking.

This is a good example too of saving a file to the .PET format as an working original. When saving to the 3icon file format nothing under or to the right of the guide will be retained. However, you can use space right of the guide to type some notes yourself about ideas to work on. Then save the file as a .PET file to retain the whole canvas. When you're satisfied, you can export the data to an actual 3icon file with File → Save As... → 3x3 Icon

Love for PETSCII Bots

I love PETSCII Bots! You can download the set of over 2400 of them from the from the C64 OS software releases page. Originally distributed on CSDb, these have been renamed and repackaged for easy access and viewing from C64 OS. I thought I'd give a little love to them in Desktop Designer too.

A PETSCII Bot is essentially just small PETSCII art with the uppercase/graphics character set and a robot theme. When you load a PETSCII bot it renders centered into the left side of the canvas. This allows you to work on your own PETSCII bot on the right hand side whilst looking at the technique that the great Cal Skuthorpe has employed on the left.

Here is another great example of saving your intermediate work as an original document to the .PET format. This will retain both the example PETSCII Bot along with your in-progress work elsewhere on the canvas.

When you're satisfied with how your bot has turned out, you use the guides to mark the origin of your Bot, the top and left edges. Then choose File → Save As... → and either the large or small PETSCII Bot format depending on which you've drawn. That exports just that segment of the canvas as your new PETSCII Bot, ready to be distributed and viewed by software designed to view the PETSCII Bot format. These include, the bigbotview program included in the c64tools directory with C64 OS, the Image Viewer Application, and perhaps other programs available on CSDb.

C64 OS Icon Library

C64 OS has included an icon library from the v1.0 release. Not to be confused with a shared library, which is executable code, the icon library is a collection of useful and reusable user interface icons.

Every icon is assigned an 8-bit integer value, and the library will eventually be a collection of 256 useful icons. Many of those 256 possible values have not yet been defined. Applications and Utilities can use a KERNAL call, loadicns (in the service module), to very easily import icons from the icon library into the Application's character set.

Applications that opt to make use of the system-provide icon library get the benefit of having a ready-made set of easily loadable graphical characters for making their UI more engaging. But there are other benefits; Different Apps that use the icon library will share visible characteristics, helping to make them look like they belong to a unified system. Another benefit is the ability to change the appearance of these icons, independently of the Apps that use them. Change the icon once, and all the Apps and Utilities that load in that icon acquire that change automatically. Combined with the Themes Utility, C64 OS is actually quite skinnable.

Editing a 1x1 (8px by 8px) icon from the icon library is much the same as editing an Application icon, only it's smaller. The area of the canvas that is saved back to the icon starts in the first row below the menu bar and starts in the leftmost column.

In the above screenshots, you can see that we took the heart icon, one of several, that is used in the Settings Utility. Changed it a bit, removing some bits to give it the appearence of a reflection, saved it. You can see that it appears in its new form immediately after reopening the Settings Utility.

Fun and Games

When I was a kid, I loved to just draw stuff using the PETSCII character set and colors from the READY prompt. The only problem was that I couldn't easily save my work. It didn't really matter though, because I just loved playing with my Commodores. (VIC-20 first, then later C64 and C128.)

Another problem with the screen editor is that it bumps characters around sometimes in weird ways. For example, if you have a character too close to the end of the line, and you push INSERT to make a space, it might accidentally wrap to the next screen row! And if it does that, it'll push the lines below down. And there is no way to get them back to where you want them. So, you had to be very very careful.

With Desktop Designer you can use your mouse, and guides and the palette, etc. And you can just draw and have fun. I'm not an artist, but it's enjoyable nonetheless to just tinker around. The above were copied from a sprite sheet I found online. They're super low-res, using only the solid square character. But they're still fun to play with, and they look really cool.

Here's another fun one I was playing around with, and I think turned out pretty cool. This one plays with pairs of colors that graduate in brightness from left to right, and then do that again in the bottom half colors, with a dither pattern that blends the bottom and top colors. It's fun, right? Plus, it's super easy to save your work. And this doesn't even take into consideration that with Fast App Switching, you can switch back to File Manager or some other App and do other things with your C64, then switch back to your artwork and it's right where you left it.

If I'd had this as a kid, it would have blown my mind.

Speaking of fun and games. I often play paper games with my kids, but we play them on a "Boogie Board." They look a bit like an iPad mini, but with a stylus. They're only monochrome though. You draw on them and press the button to clear the screen. There is no concept of saving your work. It's more like an electronic version of a chalk slate that school children would have had long ago.

It occurred to me that one could play games in a similar fashion using Desktop Designer. So I created these two templates. They're primitive, paper-based games. But I thought it was a clever and unorthodox use of a PETSCII drawing app. Plus, unlike on the Boogie Board, you can save your game to a file and open it up later.

Final Words

Desktop Designer requires C64 OS v1.07, because it depends on some new features and some bug fixes in the context drawing system that are part of the C64 OS KERNAL.

When C64 OS v1.07 is released, the target release date is sometime in December 2024, Desktop Designer will be made available as a stand-alone App, available for free for download from the C64 OS Software Releases page.

I hope people have fun with it and find it as useful as I do.

Do you like what you see?

You've just read one of my high-quality, long-form, weblog posts, for free! First, thank you for your interest, it makes producing this content feel worthwhile. I love to hear your input and feedback in the forums below. And I do my best to answer every question.

I'm creating C64 OS and documenting my progress along the way, to give something to you and contribute to the Commodore community. Please consider purchasing one of the items I am currently offering or making a small donation, to help me continue to bring you updates, in-depth technical discussions and programming reference. Your generous support is greatly appreciated.

Greg Naçu — C64OS.com

Want to support my work?

C64 OS version 1.04 is now available

The best way to help C64OS.com grow and continue is to purchase a commercial copy of C64 OS version 1.04.

Join the growing C64 OS user community. Take advantage of the powerful and useful features available now, and get access to run new and future software made for C64 OS.

Learn More Order Now

C64OS.com is hosted on a Digital Ocean droplet.

Digital Ocean is a cloud hosting platform, built for developers. They make it simple to get started. They have intuitive administrative tools and reasonable prices. And they can scale as your needs grow.

If you sign up with this referral link, you'll get a $100 credit, and after you've spent $25, I'll get $25. If you are looking for a cloud platform to host your website or web app, this is win-win.

Sign up for Digital Ocean with this refereral link.
Save money and help C64OS.com at the same time.

No, thank you.

Want to support my hard work? Here's how!