Feb 29 2012

New site and status update

Category: Lego,Mindstorms,Programs,RICcreator,Software,StepmaniaSpiller @ 20:28

The time has finally come where I ventured out in the myriad of paid hosting providers. Free hosting isn’t really worth it and WordPress.com doesn’t allow you to do anything (without paying buckets). WordPress.com is fine if you just want to have a blog, however as a CS student I want to mess with everything. So I tried a local hosting provider and we will see how this goes…

Status on RICcreator

I haven’t had the time to develop on this for quite some time but I can do some work on this regularly now.  However I’m not going to do that. While far from perfect, RICcreator have matured and I do no longer feel the need to use nxtRICeditv2 anymore. I haven’t even started the program up in months as I’m using RICcreator for everything RIC related now.

As I’m not seeing people use it I will simply fix bugs and add features when I want the functionality. So while not dropped, development will be slow. I will still fix bugs if anyone reports them and I’m open for feature suggestions. I will do one more release which probably will be the last major update for a while.

While I want to move my focus to other things, RICcreator marks an important milestone for me: I am now creating software which I find useful enough to use in my everyday life. RICcreator is my first medium-sized application and I’m quite satisfied with the result.

What I have been doing the last few months

Superus

I was working on in a project group for a project for CS at university, however 4 out of 7 people in the group decided to drop out of CS. So the lone 3 remainders had to write 80 pages in 2 weeks, which worn me out a bit. Anyway, the project was about image editing and we wrote a couple C programs to do several functions. The code is made available at SourceForge as Superus.

It uses a command line interface and only accept PPM input/output so it might not be that useful for many, however it can read 16-bit PPM, edit it in 64-bit float and save it as 8/16-bit using dithering to ensure maximum quality. So it is possible to do certain things which simple isn’t currently possible in GIMP. (It should also be gamma-correct unless we screwed up on the conversions.)

I have written about half of the code, the parts which handle PPM input/output, image representation (how it is stored and worked with internally in the programs), scaling, brightness, blurring/sharpening and various filters. “nielssonnich” wrote the Command line interface and scripting code.

I might continue to do some experiments with this codebase, but it should be considered to be a one-shot project though. I might also write a post about one of the cases where I had to use Superus instead of GIMP to achieve the results I wanted.

BPM graphing

I wrote a small quick program to graph the BPM changes in a .sm chart for DDR rhythmic games which you can read more about here: BPM graphing [Thirdstyle]

I was in the process of porting it to PHP but I didn’t finish it. However I want to finish it soon as I have some bigger plans (see below) which I hopefully will start on in the summer vacation. It shouldn’t be more than 1-2 days work anyway…

What I’m doing now

I have started on a new project for CS with a new group and our goal is to create a spell checker which can correct grammatical errors in Danish. We have not yet decided whether we will try to parse sentences or try to make something like a neural network, but nevertheless this will be a challenging and interesting project.

Another thing I’m working on is a custom theme for this blog. Now that I’m not limited by WordPress.com I can write my own PHP code so I can achieve just want I want. I’m going to take my sweet time on this as it is low on my priority list.

LDraw viewer

At university we are taught C#, however the exercises are quite boring as we have to write some random code which does nothing more exciting than a “Hello, World!” program. So instead I will be working on a project I wanted to do for nearly a year now, a LDraw viewer. It should load a LDraw CAD model and display it on the screen using OpenGL for the graphics.

I’m obviously not trying to create something special here, as there are already several software out there which has similar functionality. This is purely a study project and in particular I want to get a good grip on OpenGL and 3D graphics. However since I also want to cooperate this into my education I will be writing it in C#, to get some proper experience in it. I haven’t written any code so far, but I will do so within a weeks time.

NXT RPG

You heard right, I haven’t forgotten about this project. It pains me that I have not completed the ‘level 2’ mode which contains the battles, so I want to do something about that. I might do a bit of work on it from time to time, but don’t expect sudden rapid development on it ; )

6wd Off-roader

I’m still not done with this project, however I’m almost finished now. Just missing a bit of reinforcing of the mechanics and improving my software and I will call it done, I want to move on after all.

What I will do in the future

DDR for keyboarders

One of the project ideas I have on my Projects plan page and I will attempt to start on it this summer. (This was why I did the BPM graphing thing.) I’m been playing Stepmania for 4-5 years now however I absolutely hate the engine. It is slow, buggy, old-fashioned and straightforward annoying. I want to try making an engine which is very different in a lot of points but which still keeps the good old game play.

This is a very ambitious project and I might not end up with anything useful. However I want to challenge myself even further and I want to tell the community that there are people out here that wants to move on from the old DDR arcade days.

This is definitely a large project and I have to make use of a lot of technologies and techniques I haven’t used on the PC before, only with NXT or PHP. OpenGL, threading, databases and perhaps even some driver interaction stuff.

Conclusion

There is really a lot of stuff I want to do and not really that much time. Can I pull all this off without going overdue? Probably not, but I will really want to try my hardest to arrange my time so I will complete everything. I tend to waste a lot of my time doing random stuff which is really a shame when there is so much I want to do.


Nov 30 2011

Color-independent CSS with alpha overlays

Category: Software,WebdevelopmentSpiller @ 00:07

This sidebar design caught my eye:

There are several of these boxes in different colors and I kinda liked the effect. To create this effect two images are used, one which contains the top part of the box, including the rounded corners and another which just contains the rounded corners for the bottom. (These needs to be separated so that the box can grow.)

However for each color there are a separate set of images and you have to set the color in the CSS too. This requires you to download several almost identical images to view the page which is not optimal. Secondly, in the case you want to change the color, you need to create a new set of images and then find the part in the CSS and change that too. If you wanted to mirror the boxes or change the design a little bit, you would have to redo every image, which again is not optimal.

So the optimal solution would be that the implementation didn’t rely on a specific color and that we could just change the color in the CSS and expect everything to work as intended. And this is indeed possible in this case. We can even use CSS3 transformation to change the color on-the-fly!

Color independent implementation

The trick here is to use alpha compositing to create the effect. If we placed a completely white image on top of the orange color, we would obviously end up with an completely white result. However what if the image had been 50% transparent? Then we would have ended up with a lighter orange color since some of it had been replaced with white.

This is exactly the effect we are going to exploit here. With image formats like PNG you can control the alpha (transparency) of each pixel by drawing on the alpha channel. So we will make a completely white image and then draw the two circles on the alpha channel. Let’s start with looking on the original image:

Notice that it is saved in JPEG and weights 7.18 KB. As explained previously, this should have been saved in PNG as it compresses better. So I remade it from scratch, trying to match the original image.

Here is the image, where we have drawn on the alpha channel instead:

(I had to make it blue as otherwise it wouldn’t have been visible as this blog´s background is white.)

Since this image is completely the same color, just with alternating alpha values, it will work nicely with all backgrounds. Try it out on different backgrounds and see the effect! And take a look at the file size too, it is only 1.82 KB, quite a bit less than the original. (The white version was 1.85 KB)

Using CSS3, we can create our box as easily as this:

width: 223px:
min-height: 140px;
border-radius: 5px;
background-color:  #f07575; /* Some random color here */
background-image:
   background-image: url('overlay.png'),
   -o-linear-gradient( top, rgba(0,0,0,0) 140px, rgba(255,255,255,0.41) 140px);
background-repeat:no-repeat;

First we set the width and the minimal height (so that it can expand), nothing special here. Next up is creating the rounded corners and setting the background color we want.

The background-image is the interesting part. First we use the overlay image we just made for this. We have background-repeat set to no-repeat, so it only appears where we want it.

Then a gradient suddenly appear? This is to make it look as intended when the box becomes larger than the 140px the image is. If we didn’t do anything, this would happen:

So to avoid this we could make our overlay image as long as the box possible could be, for example 1024 pixels high. This would increase the file size a little (to 2.97 KB) so let’s use CSS3 to do it in a more fancy way.

Instead of using a single image, we could use two, our normal overlay and a second overlay 1024 pixels high which is fully transparent the first 140 pixels and then becomes our semi-transparent white colors afterwards that. If we place those two on top of each other (using CSS3 multiple backgrounds) we can replicate the combined image.

Why do this? Because we can make our browser generate the second image by exploiting linear-gradients. Linear gradients are pretty flexible, we can specify several color-stops and the positions those stops should be at. So lets take a look at that piece of CSS again:

-o-linear-gradient( top, rgba(0,0,0,0) 140px, rgba(255,255,255,0.41) 140px);

We start at the top with a fully transparent black which should continue to 140px. Then we change the color to a transparent white, which should start at 140px. Our two colors start and stop at the same place, so we are actually not getting a gradient as the switch is instantaneously. However what we do get is the image we want, and it will automatically expand to even more than 1024 pixel if required.

The sample page ends up looking like this:

CSS2 implementation

The only part I will cover here is how to make the rounded corners color-independent. Download the sample page to see the full implementation.

Adding rounded corners so they don’t depend on the color of the box is pretty simple, just draw the inverted corner so that you draw the page background. This will of cause make it dependent on the background of the page, but it is better than it being dependent on both, right?

(Again in blue because of the blog theme.)

Sample page download

You can download the images and HTML+CSS2/3 source here: http://www.box.com/s/rgslnmrbtaqaeyppbly8

The file css2.html contains the CSS2 implementation and the file css3.html contains the CSS3 implementation. The CSS3 implementation also contains a little extra stuff to make it fall-back more gracefully.

Tags:


Nov 20 2011

Saving images in the correct format

Category: Software,WebdevelopmentSpiller @ 00:32

I quite often see images stored in wrong formats, see for example this website: http://www.retrofit-anime.com/index.html.

Notice the gradient, it contains ugly lines moving from top to bottom. (More visible on a dark background.) It was properly saved as a 1px high image and then stretched downwards (in order to make the file smaller), however it was saved as JPEG. There are two issues here. First of all, the compression artifacts becomes quite clear as they are repeated, however gradients like this also compresses better in a lossless format like PNG, so it is actually larger than it could have been, with worse quality.

So here is a introduction to image formats which will hopefully give you an idea of when to use one format instead of another.

Compression

File formats uses one of 3 types of compression:

  • No compression: The file is simply raw data and can be read and modified directly. The files usually ends up being rather large though.
  • Lossless compression: The format saves the data in a way that makes the data fill less on the disc, however it still contains all the data. (Like a .zip archive.)
  • Lossy compression: Saves the data, but trows away some of it in a way that the user (hopefully) wouldn’t notice.

Each type has its pros and cons. (Examples are all non-image formats.)

Not compressing at all makes it very fast to display the image when you can access the data just as fast. This is usually the case with an HDD as its reading speed is up to 100 MiB/s (and with SSD reaching speeds of 300MiB/s), however not on the web as the speed is rather slow, often something like 0.5MiB/s (which is 4Mb/s). However its simplicity is its main strength and most file formats (.txt, .exe, .doc, .html, .css, .tar and so on) are therefore uncompressed.

Lossless compression reduces file size greatly in most cases and is therefore used when file size is of importance. The downside is that it becomes slower to open and save, as it has to decompress and compress the file each time. It is also a lot harder to implement. Examples are .docx, .zip and .flac.

Lossy compression reaches file sizes which are normally much smaller than possible with lossless compression, however in the process some data is lost and is impossible to recover. While this might sound terrible, the low file size sometimes is worth the trade-off. Lossy compression usually try to trow away the data humans wouldn’t notice (so much) to avoid losing ‘important’ data. Formats which use this kind of compression is normally media formats (like sound, images and movies) as this kind of data usually is rather large. Examples are .mp3 and .h264.

Image format types

There are two different kind of ways to store an image, Raster and Vector. Raster describes a 2D grid of pixels, just like how your monitor displays it. All popular formats are Raster, that is JPEG, PNG and so on. Vector describes how drawing functions should draw on this 2D grid in order to create an image, for example: ‘draw a line from (30,40) to (100,50) and then draw a circle in (50,50) with radius 10’. Examples on vector formats are SVG and Lego Mindstorms RIC.

Since Vector images are something you create from the bottom up, focus in this post will be on the Raster formats.

Colors in images

The more colors you have to represent in an image, the larger the file becomes. So there are several ways of storing colors and switching from one to another greatly affects size. There are three important modes: indexed, grayscale and truecolor.

Truecolor

This is the normal model which contains all the colors you can display on your monitor. This is normally stored as RGB, i.e. three colors.

Grayscale

Grayscale contains only shades of gray and is stored with a single color. This makes it much smaller than Truecolor, however only in grayscale.

Indexed

Indexed is a bit different. Instead of storing a color for each pixel, it stores an index. This index then refers to a color table which contains a list of truecolors. This means it can only store a few colors (usually up to 256), but you can usually get good results anyway with dithering. Some images, like screenshots might only contain a certain subset of colors which can be indexed, reducing the size greatly sometimes without any loss.

Notice however that this index also takes up a bit of space and if your image contains less than 256 pixels, you might be better of staying in Truecolor.

Alpha

This is a special color, which can be used in addition to Truecolor, Grayscale or Indexed. Alpha specifies the transparency of an pixel which can be quite useful when combining several images together.

However in most situations it is not needed, so make sure you don’t save the alpha values in those cases.

Size of colors

In truecolor and grayscale you store levels of certain colors, like Red, Green and Blue for RGB. However the amount of different shades of the color affect file size too.

A color is usually stored as 8-bit which equals to 1 byte, meaning that it can contain 2^8 = 256 shades of that color. Grayscale uses one color, which means one byte per pixel, while Truecolor uses 3 colors, so it uses 3 bytes per color. If there is an alpha color for each pixel, it would use 1 byte more, to a total of 4 bytes per pixel.

Indexed images with a color table of 256 colors would need to store 8 bits per pixel, as 2^8 = 256. However if your color table is 250 you do still need to store 8 bits, since 7 bits only gives 2^7 = 128. So there is not as much advantage going saving a few colors, unless it will reduce the amount of bits needed per pixel. (The color table will of course be smaller though.)

As said, a color is usually sized to 8-bit, however some images might store more than that per color. 16-bit per color is often used with photography as the more levels increases accuracy when editing the images. However this also means that it uses up twice as much space per pixel, 48-bits, and you can’t display this on monitors either as most are 24-bits (or 18-bits for cheap screens). If you don’t need this, converting to 8-bit can significantly reduce file size.

Overview of image formats

Here is a table over the most common image formats (and I added Lego RIC just for fun).

The most important are PNG (lossless) and JPEG (lossy) as most of the others either compresses badly or is relatively unsupported.

The uncompressed formats like .png and .bmp should be avoided unless you have a good reason to use it, PNG provides just as good result at smaller file size.

TIFF is a bit of a joker, it has many features, however only some are implemented in certain applications. Only use it if you know what you are doing.

JPEG2000, JPEG XR and WebP are some of the popular formats for the future, however both are poorly supported at the moment.

GIF still rule animated images, however there are three alternatives out there, APNG, MNG and WebP.

Guidelines:

Saving while working with images (working copy)

Always use the applications native format if you intend to continue working with the image. This is the only way to ensure that as most data as possible is saved. Most formats doesn’t support layers or any other advanced feature your image editor supports, so all this information will get lost.

If you must save it in a genetic image format, use a lossless one like PNG. (TIFF might save more depending on the implementation, experiment!) If  you save it in a lossy format like JPEG, you will degrade image quality each time you save (and then open it again), as it each time trows a different set of information out.

Lossless versus lossy

In general I tend to use lossless whenever file size is not of great concern. HDDs have reached sizes of 3TB, the only thing not worth saving in lossless today is movies.

But lossless does compress better than lossy in some cases. JPEG works great for  photographs and can easily half the file size compared to PNG. However if the images are more simple graphics, like vector graphics or screenshots of your desktop, PNG suddenly compresses much better. Secondly, the JPEG compression artifacts ruins text readability, so PNG is a much better choice here.

To give you an example, here are two separate screenshots of my two monitors.

Example of good PNG compression

The left monitor, the PNG is 448KB and the JPEG became 777KB at acceptable quality. Try to convert the PNG I supplied and see the difference in quality for yourself.

Example of poor PNG compression

On the right monitor a large amount of my wallpaper was visible. Now the PNG suddenly became 1.95 MB while the JPEG was 801KB. (I have only supplied the JPEG here.)

So as you can see, compression depends a lot on the image. For photos use JPEG. For screenshots, your pie-charts and other similar images, use PNG. For images somewhere in between those, try saving in both PNG and JPEG and compare the sizes and quality.

Don’t convert a lossy image

I have seen it a couple times now, a JPEG image converted to PNG for absolutely no reason. The image will not magically get better by converting it to a lossless format! And even in cases where a lossless normally would compress better, it will not because the JPEG compression added artifacts which the lossless compression conserves. The first test image above became 1.5MB instead of 448KB when converting it to JPEG and back.

Trying to convert a lossy to another lossy format will only mean that you loose even more information in the image, so this is not desirable either.

So it is best to keep the lossy file as it is if you are not going to edit on it.

GIF versus PNG

If you try to save an image in both GIF and PNG, PNG might end up being quite a bit larger. However that is because GIF only supports indexed mode and that it is therefore automatically saved like this, while the PNG is saved in truecolor.

If you save PNG is indexed mode, PNG will in almost every case be smaller than GIF. So there is no reason to use GIF, as PNG compresses better and have more features (except animation).

If you are a web-developer, PNG with alpha works in IE7 and up, while PNG in indexed mode should work in IE6 AFAIK. So you should be able to replace GIFs with PNGs here too.

Index colors when possible

Indexing the colors can reduce the size quite a bit. With diagrams and the like you might not use the 256 colors up at all, so you can sometimes do this conversion without loss or with minimal changes. (In those cases you can dither the image to get prettier results, but it will hurt compression ratio. I would recommend to avoid it…)

The file comparison table a few sections above is an indexed PNG, and no colors were reduced as it only contained 140 different colors from the start. The size in truecolor is 22.5 KB, and when indexed it is 9.79 KB. (In JPEG it became ~125 KB…)

Don’t save transparent pixels

If you have some parts of the image fully transparent, the pixels color will still be saved even though it will not be displayed. This way, when you change the alpha, the original color will remain.

However if you do not need to do this anymore, you can change all completely transparent pixels to the same color. While it will not change the image’s appearance, it will reduce the file size. (Your image editor might have an option to do this for you.)

Animation

GIF is still the main format for animations around, and while it only works for indexed images, there are no real alternatives out there which have good application support.

There are currently three formats other than GIF which supports animation, APNG, MNG and WebP.

APNG is a modification of PNG which adds animation, however the issue with this format is that it uses same mime-type as PNG and thus can’t be differentiated. PNG directly disallows multiple images, so they are two different formats. However it is implemented in Firefox (the creators) and Opera.

MNG is also based on PNG, however it is a separate format. It is quite advanced and offer many possibilities than APNG does not, however its complexity is what has caused it to have nearly nonexistent support. (GIMP support, however animation support in GIMP isn’t that great anyway…)

WebP have recently announced animation support (which works similarly as GIF), and as it supports both lossless, lossy and alpha, it sounds promising. While WebP is implemented in Google Chrome (the creators) and Opera, I do not know whether animation have been added yet.

The future

Both JPEG and PNG is fairly old, PNG is from 1996 and JPEG 1992. Compared to how audio and video formats have evolved the past 10 years, images formats are still stuck in the past. I suspect that you could just replace the default compression algorithm in PNG with something like LZMA and get a 10-20% improvement…

JPEG2000 by the JPEG group was a new format which intended to replace the JPEG format. However support have not been very widespread even though the format was publicized 10 years ago. It is getting better by now though.

There are other similar formats, like JPEG XR by Microsoft, however it does not have good support either. WebP is the newest of the bunch which was publicized 1 year ago, however support is increasing and since it is based on WebM, good browser support is likely and it is already natively implemented in Chrome and Opera (and should be working in any WebM compatible browser via a JavaScript shim).

Which format that is going to get widespread is hard to tell. WebP seems to have a better chance on the Web, however I suspect that it doesn’t have as many advanced features as JPEG2000 and JPEG XR which especially photographers wants.

My guess however is that the Web is the most crucial factor, as this is where lossy compression is most important. I still however have my doubts with WebP in professional photography.

Tags: , , , , , , ,


Nov 06 2011

RICcreator – October update

Category: Lego,Mindstorms,RICcreator,SoftwareSpiller @ 00:34

Focus this time has been mostly on sprite creation/editing, with a few nice additions.

Polygon enhancements

The last missing piece in the drawing routine was fill_shape in PolyOut(), which has now been implemented. Here is an example:

Originally I planned on just using the code from the firmware however when I did so I noticed that the polygons didn’t look quite as good as I expected. The code which the firmware implementation was based on was both poorly implemented and flawed, so both the firmware and RICcreator ended up having the same issues.

So I spend some time on fixing up on those issues and modifying the algorithm to fix the flaws. This also means that the output isn’t exactly as on the NXT until is fixed there. I will write a full post about this later, when I’m done fixing a XOR issue with unfilled polygons which is also apparent in the firmware.

Sprite Editor

Sprites are no longer created at 100×64, you start out with an empty sprite like in nxtRICedit now. It is a minor thing but still rather important anyway.

I have also fixed up the scrollbars a bit. Still not perfect, but a lot better than before. A reset button has also been added in the corner.

Image importing

I have added a third way to convert images to 2 colors, Floyd–Steinberg dithering. While dithering in most cases look quite neat, it is not that useful when used on the NXT screen. The resolution is simply too small in most cases, making it difficult to see what it actually is. It does work well on some images occasionally, so experiment!

Dithering, Global thresholding and Adaptive  thresholding now also takes gamma in account. Almost every image on the web is encoded in sRGB which defines power of a RGB value. 0 means black, 255 means  completely white. The value for 50% black, 50% white however is ~187 and not 127. I might write a full post about this later.

Another enhancement is that adaptive thresholding have been greatly optimized. Actually, I just cache some results, however this meant that the complexity was reduced from O( n^2 ) to O( 2n ) where n is the size parameter. Before a size of 30 would be quite slow, now you can use 99 without even notice any slowdown.

Download

Please delete any settings.xml files from previous versions.

Revision 154 win32: RICcreator rev. 154 – win32.zip

Revision 153 source: RICcreator rev. 153 – src.zip

The source version also includes test and example .ric files. (The reason it is one revision older is that I forgot to add some .dll´s in the Windows build which takes care of image loading.)

Tags: , , , , , , ,


Oct 16 2011

Password security

Category: SoftwareSpiller @ 00:39

After about 3 years of using the same password I decided it was about to create a new one. I simple don’t think my password is secure enough. But how do you make a secure password?

Common guidelines:[1]

  • Keep the password at least 8 characters long.
  • Use mixed case letters and mix in numbers. Include special characters if possible.
  • Use different passwords for different sites.
  • Change passwords every 3 months.
  • Do not include personal information.
  • Do not include sequences or repeated characters.
  • Do not include dictionary words, abbreviations or common misspellings.
  • Do not write your password down (or at least keep it inaccessible for unauthorized people).

I will admit that I use the same password everywhere and I do not think it is feasible to have a separate password for each site. Since you have to create logins for about every site out there, you easily end up having to remember 20-30 passwords. To have a separate password for each site you easily end up making a list of them which is potentially unsafe. And then you have to change all the passwords once in a while which is honestly a pain to do.

Avoiding security

It is near impossible to keep security to a maximum everywhere you go, so why even try? Actually, wouldn’t it be better to avoid the need of having security at all?

How many of the 20 to 30 accounts are actually important to keep safe? I tried making a list and I would say I only have one, my “NemID” account which gives access to banking accounts and services by the government.

So what makes an account important? The importance of an account is equal to the loss you experience when it is hijacked. Based on this I make three categories of web-accounts:

  • Sites dealing with money (banks, stores, casino)
  • Personal content (personal websites, blogs, YouTube)
  • Social networking (Facebook, chats, forums)

Minimizing loss

Instead of just accepting how important an account is it is much better to actively make it less important, in order words, minimizing the loss in the worst case scenario.

With sites dealing with money, to the greatest amount as possible, make sure they are only dealing with an account which can’t be overdrawn and only have a small amount of money in that account at a given time.

If the site contains personal content like WordPress, YouTube, and deviantART, always keep a local backup so you can create a new account and restore the content. You might lose ratings and similar it is still the content which is important.

My plan

Important accounts will have a strong password and is changed every 3 months. (Actually, the only account in this category is my bank account.) Passwords will be automatically generated.

Semi-important accounts like my WordPress and SourceForge accounts will have a single medium-strong password which will rarely be changed. Backups will be taken of personal content. The password will most be an obfuscated passphrase which is easy to write.

Unimportant accounts (which are about 75%) will just use the old password.

 

Tags: ,


Oct 12 2011

MainWindow vs. Editor

Category: Lego,Mindstorms,RICcreator,SoftwareSpiller @ 21:24

RICcreator is a MDI application which is implemented by using tabs. Because tabs are used, only one document is viewed at a time.

Up to this point it was implemented using QTabWidget which provides tabs and a area on each tab to place widgets in. Using this, a editor (ricfile_widget) was created on each tab which each owned a ricfile.

When a user clicked on an action in the menus or toolbars, this action had to be routed to the editor currently shown. Since there are about 10-15 commands which deals with the ricfile, 10-15 wrapper functions had to exist in the MainWindow with 10-15 actual implantations in the editor. There were mainly two types of actions, open/save/export actions and actions which added a specific object.

The open/save/export actions are useful no matter which editor you are currently using, while the “add polygon” action is pretty useless when using an editor for modifying RIC fonts. (Not implemented) The goal was therefore to keep the implementations for open/save/export in MainWindow while removing all the other actions from MainWindow and keeping them strictly in ricfile_widget.

Design

Instead of having the QTabWidget manage the editor for us, we make MainWindow keep track of it instead. Secondly we change the ownership of ricfiles to the MainWindow. To do this we make a class which keep track of a ricfile which contains the information needed. The class (openRicfile) contains the following information:

  • The ricfile
  •  The file source, was this created in the program, loaded from the HDD or downloaded from the NXT?
  • The ricfile editor which is used to edit this file.
  • The name of the file
  • The file edit state, has the file been changed since it was loaded?

Since MainWindow now owns the ricfile and the required information about it to save/export the file, the actions can now be directly implemented here.

To make it possible to create different editors, we create an interface between the MainWindow and editor. As open/save/export is now done by MainWindow and that every other command was editor specific the interface must not contain any of these. To still be able to have editor specific commands in MainWindow we allow the editor to create a Toolbar which the MainWindow will shown.

In return we add a requiriment to the editor, it must be able to change the active ricfile. The interface (ricfileEditor) have the following properties:

  • Change the ricfile to be edited by specifying a openRicfile.
  • Request a toolbar to be shown
  • Signal which tells MainWindow when openRicfile as been edited.

Implementation

Instead of using a QTabWidget, a QTabBar is used instead. QTabBar only shows the tabs, it does not create a space to hold widgets. However we get slightly more control over the tabs appearance. But now that an editor can change file, we only need one for each type and therefore not a separate space.

In openRicfile we therefore only save the editor type for each file. So openRicfile instead keeps an list of implemented editors. When we request a editor, it will return the editor specified by the openRicfile. (Editors will only be created on request to preserve resources.) But since there is only one editor, we will need to store information about how the file was viewed in the editor, as this is lost when changing file. I still need to implement this, but it will just be an extra field in openRicfile containing the required information.

All the “Add [object]” actions have been implemented as a Toolbar in ricfile_widget, so MainWindow is now completely free of them, it just changes the shown toolbar whenever a new editor is to be shown.

Results

MainWindow and ricfile_widget is now much cleaner implemented as it doesn’t contain functions which is half implemented in MainWindow and half implemented in ricfile_widget.

Secondly it is now possible add new editors quite easily and there is an way of adding actions to be shown in the MainWindow.

A side effect is that memory use has dropped greatly. ricfile_widget used about 600KB of RAM, so after opening 10 files you had doubled the memory use of the program. Now it only increases with a few KB for each file. (This is an empty file however, haven’t quite tested it with large files, but it shouldn’t be too much nevertheless.)

Another side effect is that since QTabBar is now used, it is possible to specify the text color of each tab individually. So a file which have been edited and not saved yet is highlighted by changing the color to red and adding an asterisk to the end:

Download

RICcreator rev. 133 – win32


Oct 06 2011

Customizing my Windows computer – part 2

Category: SoftwareSpiller @ 05:46

More customization to be done, still far from the goal. Just minor tweaks this time.

Fix disappeared Explorer jump list

Not quite a customization, but I will include it here never the less. As you perhaps have spotted in the last post, I do not have either “Recent” or “Pinned” entries in my Explorer jump list. This is caused by a bug in win7 which has been known since the beta days, yet it still appears to be unfixed.

The reason appears to be that the file containing the jump list entries have been corrupted. You can find the files here: (You must enter the path, you can’t navigate to the folder!)

%AppData%MicrosoftWindowsRecentAutomaticDestinations

The file containing the Explorer jump list is “1b4dd67f29cb1962.automaticDestinations-ms”, just delete it to get it working again. However if you experience this issue with another application, simply delete all entries (to the Recycle Bin) and pin a entry to that application. The file that now appears is the jump list for that application. Simply press CTRL+Z to undo the previous delete and select “Don’t move” when it attempts to undelete the broken file.

Change locations of user folders

You can move your “My Documents” folder by right-clicking it and clicking “Properties”. Click “Move…” under the “Location” tab. (It will ask whether you want to move the current contents to the new location.) You can do this for most of the folders in %USERPROFILE%, for example your Desktop.

I use a separate HDD partion (D:) for all my data so I can easily format the system drive and reinstall Windows without loosing anything important. Since applications sometimes save user data or other strange stuff in those automatically, I moved them all to “D:userconfWindows”. It will make a reinstall a little bit easier.

I also started to stop using “My Documents”, “My Music” and “My Videos” completely. The “My Documents” folder in particular is misused by many applications so all kinds of weird stuff ends up here, removing my attention from what I’m actually trying to store in those folders.

Modify the Start menu

As more and more entries get into the start menu, it gets increasingly harder to find the programs you want. You can edit it by changing the contents this the following two folders:

%APPDATA%MicrosoftWindowsStart Menu
%PROGRAMDATA%MicrosoftWindowsStart Menu

The first folder is for your user, the second is for all users. The entries in the first will automatically be merged together with the second.

Notice that if you start editing these folders, then the shortcuts will not be automatically deleted when you uninstall the application since the paths have changed.


Notice that I prefix folders which contains several applications with “#”, this makes them stand on the top of the list. (You can’t do this on top-level folders of some reason though, it will not merge the user and all user folder correctly.) To make the folders which contains several applications stand out I the icon (the method is explained in the last section). Also note that I have the “HxD” program listed twice, an easy to reach shortcut at the top and a folder containing the uninstaller and more.

You can also change the paths of these two Start Menu folders by doing the same as explained in the previous section. I have moved all normal shortcuts into the all-user folder and I moved the user folder to “D:userconfWindows”. In this folder I placed links to all the portable applications I have on my D: drive, so these will survive after a reinstall. (It requires that the drive letter remains the same though.)

Extending Aero Snap

EDIT: multi-monitor support was removed from the free version and I found a better alternative, WinSplit Revolution. I find this one better and it is completely free, so check out that one instead. EDIT END

Aero Snap doesn’t work very well when using multiple monitors and it doesn’t give you as many possibilities as similar solutions in Linux. Luckily there are a few tools out there to replace it. I tried two and settled on AqauSnap.

AqauSnap only supports simple grid operations, like right-upper corner, but I do not need more than that anyway. Multi-monitor support and with a bit of tweaking okay graphics. Hotkeys are implemented, however it doesn’t work well across monitors. Furthermore you can’t undock a maximized window with the mouse.

All in all, it works better than Aero Snap, but there is still room for improvement. You can download it from the authors homepage or read more about it here.

Disabling the desktop

The desktop easily ends up being cluttered because you trow all kinds of random stuff into it. Most of the time it is just stuff I just dump there because I’m too lazy to properly navigate to the folder it should have been in. So I will try force myself do it properly from the start.

Hiding the icons is easy, just right-click on the desktop and uncheck “View->Show desktop icons”. (You should pin the Recycle Bin to Explorer first though.)

This doesn’t prevent you from saving stuff here, it just hides it. However you can change the permissions for the Desktop folder and disallow Write operations. To do this, right-click on your Desktop folder (located in %USERPROFILE%) and click “Properties”. Under the “Security” tab, click “Edit…”. In this window, check the “Deny” box for “Write” for the users you want to restrict.

If you restricted the right users it should now give you an error message if you try to save/move anything to the desktop. I fear it might annoy some installers which want to create shortcuts on the desktop, but I don’t think it will be a major issue.

Using folder icons

Using visual clues to locate a folder instead of relying on reading the text makes it much easier to find. If you have a fitting .ico file, changing the icon is painless.

Right-click the folder and click “Properties”. Under the “Customize” tab, click “Change Icon…” at the bottom. Click “Browse…” to select the .ico file you want to use. (The list is used in case you select a .dll or .exe which contains multiple icons.)

If the folder icon does not update, try pressing F5 a couple of times. To get most out of folder icons, only apply them to your most used folders as it makes them stand out more.

 

Tags: , , , , , , , ,



Sep 28 2011

RICcreator – September update

Category: Lego,Mindstorms,RICcreator,SoftwareSpiller @ 17:56

Not much have happened on the SVN repository, this is the pain of not having an Internet connection and not being able to do local commits with SVN…

Overview:

  1. Offset added in nxtCanvas
  2. VarMaps and Polygons
  3. Command line improvements
  4. Adaptive thresholding
  5. Loading RIC files from a byte stream
  6. Download

Offset added in nxtCanvas

A huge update has been made to nxtCanvas which emulates the NXT screen. And offset to the drawing commands have been added, so instead of always assuming the lower left corner to be (0,0) it can be anywhere on the canvas.

It is not intended to be changed manually however. The reason for adding this is because you get some ugly side effects when automatic resizing of the canvas is turned on. If you use PointOut(-1,-1) with automatic resizing turned on, the canvas is expanded and the point is drawn at (0,0). However if you do this a second time, PointOut(-1,-1) will point to another pixel than the previous call which might not be desireable.

However a more serious issue was in the editing GUI for nxtCanvas. If you for example tries to draw a line it shows a preview before actually drawing it. When you move the cursor outside the canvas it automatically resizes. However if you moved the cursor to a negative coordinate it would still keep the canvas in the same place. If you tried to draw a line to (-10,-10) this command might have been issued 5-10 times because of the live preview, causing the canvas to be rapidly expanded. Because of this the live preview has until now had automatic resizing turned off, only turning it on just before the user stopped drawing.

While this is finally working as intended now, adding that offset was a pain since it caused pretty much everything drawing related to break.

VarMaps and Polygons

VarMaps have been implemented for a long time, however it didn’t have an editable GUI. And since this is one of the most important elements, RICcreator have been pretty much useless so far. The reason that I didn’t add it until now was that I was not satisfied with the way it is implemented in nxtRICeditv2 and wanted to do this differently. However I didn’t get any ideas on how to improve it so in the end I just implemented a similar design.

VarMaps and Polygons have been implemented using the same datatype in RICcreator, so the GUI for them both is the same.

With this done, RICcreator now supports editing every RIC opcode in the enhanced firmware. Only thing lacking now is implementing fill_shape for polygon and the special copy options for RIC fonts.

Command line improvements

RICcreator supported one parameter, a filepath to a RIC file to open. You can now open several files at a time by specifying more than one filepath.

A completely new addition is converting files through the command line. By using the “-convert” parameter you can convert RIC files to PNG. It is used like this:

RICcreator -convert FROM_FORMAT TO_FORMAT filepath

If you want to convert “circles.ric” to png you use it like this:

RICcreator -convert RIC PNG circles.ric

This will create “circles.ric.png” in the same folder as “circles.ric”.

Formats are:

  • RIC: ricfile, can be used for both input and output
  • PNG: PNG image, only output
  • C: C header file, only output

RICScript will be added when implemented. Currently conversion is done with all RIC parameters set to 0, if anyone have a good idea to how these could written on the command line speak up!

A note on the PNG export using the command line is that the nxtCanvas is set to 0x0 and then every draw command resizes the canvas to fit everything. So the resulting PNG will not be 100×64, it will be sized to contain everything drawn and the (0,0) point.

Adaptive thresholding

Thanks to the material Linus from Mindboards gave me I have now implemented adaptive thresholding in the import image dialog. I have written the algorithm myself so it is a bit slow right now.

The improvement with using adaptive thresholding instead of global ranges from almost nothing to quite a bit. However it is more difficult to get good results with it so for now global thresholding is default.

Global vs. Adaptive thresholding comparizion

Global thresholding to the left, adaptive thresholding to the right

Loading RIC files from a byte stream

It is now possible to load a RIC file from an array internally. This makes RIC loading much more flexible. I cover this more deeply in another post though. The most noticeable change this made for RICcreator is that the default RIC font is now embedded into the program and that it is possible to convert the file into a C header.

Download

Pre-Alpha revision 130: RICcreator rev. 130 – win32.zip


Sep 28 2011

Loading RIC files from a byte stream

Category: Lego,Mindstorms,RICcreator,SoftwareSpiller @ 17:48

riclib have until now read RIC files directly from a file stream. This is done using a distributed approach, each nxtVariable is passed a file stream pointer and loads the data it needs by itself.

A ricfile in riclib is made up by an array of ricObjects which each contains a list of nxtVariables containing the data. When a ricfile starts loading, it reads the first 4 bytes which contains the ricObject header and creates the ricObject which have the same opcode as specified in the header. That ricObject read funciton is then called, loading each of the nxtVariables it has. The whole process is then repeated untill it is not possible to read another header.

Adding a second source to read from would require an extra read command to be added for each nxtVariable which would be a lot of work.

A file can easily be converted into a char array, so I could just drop direct file reading and rewrite every function to read from a char array instead. Actually, I should have done this from the start. (I didn’t because this would require 3 paramters to be passed each time, the char pointer, the current position in the array and the total lenght of the array.)

I decided of some reason to do a more complicated approach. I added a abstract base class nxtIO which is used by nxtVariable to read and write to RIC files. I have then added to classes which inherits nxtIO, nxtFile which implements file IO and nxtStream which implements IO on a char array. The advantages of doing it like this is that I only need to pass one parameter, the nxtIO pointer, and that it is possible to add several other types of IO without redoing the reading functions in nxtVariable. The disadvantage is that it is more work and that I probably will not need to be able to read/write from anything else than char arrays anyway…

The reason behind using byte streams

One of the key goals with riclib and the reason it is keept seperate from the GUI code is that it should be easy to use it to extend other applications to use RIC files. However since it needed a RIC file containing the font to use with TextOut to be located together with the exe this could complicate matters for the application developer.

So one of the key benifits with reading from a byte stream is that a RIC file can be embedded into the exe. IO to a byte stream can be used in the other direction too, in order to create a C header file containing a RIC file to easily embed the RIC file into C/C++/NXC programs. (quick implementation done)

Another important reason is that when you use riclib in other applications you might not be able to read/write directly from/to a file. Consider that you want to upload and download RIC files to the NXT. The interface functions will undoubtly use byte streams instead of files. (I will add this feature as soon I as can figure out how to do it.)

Another case would be using riclib together with the Windows Shell. Once I figure out how to create a COM module I’m planning to add RIC support into Windows Explorer. While supported, Microsoft discourages using filepaths and suggests accepting and using bytestreams instead.

Example

I’m currently creating an image viewer using QT. QT already supports most image formats like JPG, PNG, BMP, SVG and more, but allows you to create plugins to implement special fileformats. So I created a plugin to extend QT to support ricfiles using riclib. This will not just extend my application, but every QT application using QT’s inbuilt image functions. (The application and plugin will be posted in the near future.)

I will not go into depth about how this is done however one of the key aspects is that QT is not using filepaths, but its own QIODevice class which does a similar task as my nxtIO class. I could create a sub-class which inheriths nxtIO and read/writes to a QIODevice, but I took the easy solution and just used the QIODevice to read the whole file in one go and use nxtStream instead.

QByteArray data = device()->readAll(); //Read all bytes in QIODevice into data
nxtStream stream( data.data(), data.size() ); //Create a nxtStream using data
ricfile file;
file.read( &stream ); //Read the RIC file

nxtStream takes a char pointer and a int holding the size of the array. What is left is just drawing the file:

nxtCanvas canvas;
canvas.set_auto_resize( true );
file.Draw( &canvas );

The canvas is created at size 0x0 with auto_resize on. The RIC file then draws on the canvas, expanding it as needed.

The next step is to convert the nxtCanvas into an image format the application supports which is normally rather trivial. One thing to remember is that (0,0) is located in the lower left corner in nxtCanvas where it is most often located in the upper left corner in other formats.


« Previous PageNext Page »