Cosmos. Widgets now also in laststep

As you might have gathered, I pick up on speed with my little project. Now that many components are written and in place, I can pretty much add anything I want, really.

The next thing I decided to add after virtual desktops is a little widget engine that allows you to add little bits of information on the desktop, like you would expect it nowadays from a modern operating system. The widgets can have any shape and form, can even be completely translucent.

To make this possible I had to create a parser for the files that contain the information for the widgets… sorry, Cosmoids. Those are CML files, and are in a very simple format, I explain in a second.

Seeing is believing eh?

This is the little testing and demo Cosmoid. As you can see it has a text label, an image, and two buttons. When you click the “Rain!” button, the image changes. No wai!!

Nothing spectacular, but it demonstrates that it works.

This is the corresponding cosmoid.cml file which is read in the beginning and makes up this particular Cosmoid. First entirely:

[Information]
Name = Demo Cosmoid
Background = Resources/csm_back.png
Active = YES

[Dimensions]
Width = 300
Height = 200
Position = 827.000000, 764.000000

[Content]
TextLabel = helloLabel, Hello Cosmos!, 250, 20, 25, 150, white, bold, 16
Image = sunImage, Resources/sunny.png, 90, 20
Button = sunChanger, Sun!, sunImage, setMyImage:, Resources/sunny.png, 100, 20
Button = rainChanger, Rain!, sunImage, setMyImage:, Resources/rainy.png, 200, 20

That’s it! Isn’t that simple? Let me explain some things.

[Information]
Name = Demo Cosmoid
Background = Resources/csm_back.png
Active = YES

This block should be obvious.

[Dimensions]
Width = 300
Height = 200
Position = 827.000000, 764.000000

This defines the width and height of the Cosmoid, as well as its location. You can either define a position from left and from bottom of the screen – or use “Center” on one or both to center it on the screen when loaded. The “Position” parameter is updated in real time when the user drags it to a different location on the desktop – and this is how it remembers its position after a reboot or re-logon.

Now for the elements. Right now, for starters, I support text labels, images, and buttons. Gotta start somewhere right?

[Content]
TextLabel = helloLabel, Hello Cosmos!, 250, 20, 25, 150, white, bold, 16

The syntax is as follows:
ID, string to display, width, height, from left border, from bottom border, text color, text weight (”bold” or “normal”), text size

Next is:

Image = sunImage, Resources/sunny.png, 90, 20

Syntax:
ID, image to display, from left border, from bottom border

Now with buttons it gets slightly more interesting as they do something or manipulate elements. They look like:

Button = sunChanger, Sun!, sunImage, setMyImage:, Resources/sunny.png, 100, 20
Button = rainChanger, Rain!, sunImage, setMyImage:, Resources/rainy.png, 200, 20

Syntax:
ID, text to display, ID of element to manipulate, action, parameter (or if none, put ‘nil’), from left border, from bottom border

So as you can see – you quite literally construct your Cosmoid line by line in a single file – it cannot be easier than that!

And I call it CML – Cosmos Markup Language.

Cosmoids have to be places in either: /Users/YOUR_USERNAME/Library/Cosmoids (for personal use only) or /Library/Cosmoids (system wide availability). The file that builds a Cosmoid is always called ‘cosmoid.cml’.

Obviously there’s gonna be a graphical construction tool for this, so don’t worry! Also Cosmoids can be configured via the Settings tool.