Consistency, but at what cost?

I’ve done a lot of work with CSS in recent projects, and I’ve been pondering CSS resets. I use the popular reset stylesheet published by Eric Meyer, because it’s small and light, and in the public domain. I’m very happy with it as a reset, but I’ve been struck by one of the drawbacks of CSS resets: CSS resets give us greater consistency, at the cost of requiring greater work to style a page.

CSS frameworks such as Blueprint and 960 Grid System (960.gs) attempt to correct this, but I’ve found that these encumber my development process so much that it’s actually more work to use one than it is to just write CSS from the ground up. Blueprint, for example, defines font faces, colors, and a whole slew of classes, some of which I might want and some I might not. Even worse, the styles are grouped in a way that seems designed to make finding and modifying or deleting them very difficult; some styles are even defined in multiple places. When I’ve developed with Blueprint, I’ve spent more time removing extraneous nonsense and reverting its rules than it would take for me to apply a reset and then write my own CSS from the ground up.

960.gs has a different aim than Blueprint. 960.gs is a rapid prototyping tool for layouts, and for that purpose, it is excellent. When I worked on Give-a-Weigh with Jeremy Lindblom and Edgar Hassler, we only had a single evening to finish it, and 960.gs proved an invaluable tool for rapidly building up the layout. Since it’s a layout tool, and not a style tool, 960.gs defines only the most basic of styles. This is appropriate for that tool, but there’s still a small gap to fill:

• Using only a reset stylesheet, or a layout-centric tool like 960.gs I end up repeating a large amount of work from one site to the next to get hum-drum basic styles working, and
• I tend to forgot to style certain elements (code, abbr, del, sometimes even blockquote).

Introducing ReStyle

Fed up with this, I decided to create ReStyle: a stylesheet that first resets browser defaults, and then applies sensible default styles. This stylesheet serves a similar purpose to the user-agent stylesheet provide by a browser, except that it’s consistent across browsers. I had seen Tripoli, and found it to be a great project, but had a few gripes with it:

1. Tripoli disables deprecated HTML elements via CSS. I’m all for standards, but my goal is to apply sensible default styles informed by the principle of least surprise. I believe there’s a good conversation to be had about dropping support for these elements, but I don’t believe a stylesheet is the appropriate place to have it.
2. Tripoli also uses browser hacks to achieve greater compatibility with older browsers, which is not a priority for me. I develop sites for IE7 and above, so I can get away with this. Your mileage may vary if you do not have that luxury.
3. Tripoli applies some of its styles by looking for an element with class content. I wanted to avoid making any stipulations about the nature of your markup, in order to provide sensible defaults everywhere.

About ReStyle

ReStyle is available on GitHub, and is placed under the BSD license.

In creating ReStyle, I stuck with the reset stylesheet from Eric Meyer. This stylesheet provides a good starting point, though it does have a few issues in Internet Explorer 7 (e.g., header tags remain bolded, address tags are italicized) due to the browser’s poor implementation of the inherit value in CSS.

For typography and rhythm, I turned to A List Apart. In particular, for setting font sizes in a consistent manner, I used the techniques described (and rigorously tested) in How to Size Text in CSS. In setting margins, I tried to follow Setting Type on the Web to a Baseline Grid, at least in principle, allowing text to follow a vertical grid. I also set the font-family of body text to be a sans-serif, simply because I find it to be much more readable and attractive. I also fixed the bizarre quirk of Firefox and Chrome that causes them to display monospaced fonts much smaller than their surrounding text.

Beyond those few, I tried to make uncontroversial decisions. Unordered lists are displayed as bulleted lists, ordered as numbered with arabic numerals, <strong> bolds, <em> italicizes, and so on.

I look forward to using ReStyle on future projects, and hope you will do the same. Using Restyle or a similar stylesheet provides all the benefits of using a reset stylesheet, and also provides a good set of default styles that reduces programmer workload. It does so without the cruft and insane design decisions that come along with many CSS frameworks.

public Image ThresholdGS(float thresh)
{
    Bitmap b = new Bitmap(_image);

    for (int i = 0; i < b.Height; ++i)
    {
        for (int j = 0; j < b.Width; ++j)
        {
            Color c = b.GetPixel(j, i);

            double magnitude = 1 / 3d * (c.B+c.G+c.R);

            if (magnitude < thresh)
            {
                b.SetPixel(j,i,Color.FromArgb(0,0,0));
            }
            else
            {
                b.SetPixel(j,i, Color.FromArgb(255,255,255));
            }
        }
    }

    return b;
}

Results

As outlined in the previous post, I created a form that would allow me to run each threshold method repeatedly to find an average time per threshold operation. The results are given in the table below. For these tests, an arbitrary threshold of 125 was chosen. The image used 24 bits-per-color and had a size of 479 x 700 pixels.

The first observation is simple: GetPixel\SetPixel SUCKS! It took longer to do 10 operations using that method than it took to do 500 using either of the other two. We also see that the IntPtr method, while not a terrible alternative (if, for some reason, the use of unsafe code was strictly not allowed) is also moderately slower than the pointer method.

Test Program

I wrote up a simple test program to perform these tests. It also includes a subjective test, wherein one can select the threshold method and then move a slider to set different threshold values to see how quickly the image changes. The subjective test agrees with the results above.

If you poke around in the program a bit, you’ll also discover a couple of extras, including some tests of using a square-root-of-squares type method for finding the magnitude of a pixel (applied to thresholding, and grayscaling). There is also a method that allows convolution filters to be applied to the image, though editing the filters is very cumbersome. Expect to see new, more-complete versions this program in the future.

The program and code are attached. The code includes a .sln file. To run the program (if you don’t download the code), just unzip the .dll and .exe into any directory on your system. To load an image, drag and drop one onto the big empty picture box from your filesystem. You can start the tool I used to generate the numbers by clicking the performance analysis button. If you modify the program in any non-trivial way, or use it or the image processing library in anything else, please notify me. You may not use either the program or the library to make a profit in any way without my express written permission.

I first became interested in C# image processing when I decided for some reason that I should write a program that would allow me to control a media player (e.g., Winamp) on my computer using a webcam and a laser pointer. This remains, to me, an interesting project, but it was simply too audacious for my skill level (and still is, to be honest, as I am but a beginner). One of the first problems I ran into in my naive approach was that using the Bitmap.Getpixel and Bitmap.Setpixel methods was ridiculously slow. Some quick googling revealed that what I needed was the magic of unsafe code and pointers. I quickly rewrote my functions, and was on my way.

A Different Approach

Recently, however, I discovered that there is a middle ground between unsafe code and the Getpixel and Setpixel methods which does not required the use of the unsafe keyword or pointers. I decided to give this a try to see how it performed, both objectively and subjectively.

The key thing to note here was that the Scan0 property of the BitmapData class is an IntPtr and not a pointer. This means that rather than dropping into an unsafe block, we can simply use the overloads of the System.Runtime.InteropServices.Marshal.Copy method to copy bytes to and from the location of the image in memory.

To test the performance of this method and the usual unsafe method, I wrote two methods which would each threshold an image. I also created a Windows form with a slider that would allow me to change the threshold value in real time, and watch how quickly the image responded (the subjective part of the test). The reasons I chose thresholding were that it’s often one of the first things done to an image during machine processing, and it’s simple to write. Aside from that, we’re really only interested in the time consumed by reading and writing the data to the image, which shouldn’t be affected by the operations perfomed on the data.

The first method, listed below, uses the IntPtr approach.

/*No unsafe keyword!*/
public Image ThresholdMA(float thresh)
{
    Bitmap b = new Bitmap(_image);

    BitmapData bData = b.LockBits(new Rectangle(0, 0, _image.Width, _image.Height), ImageLockMode.ReadWrite, b.PixelFormat);

    /* GetBitsPerPixel just does a switch on the PixelFormat and returns the number */
    byte bitsPerPixel = GetBitsPerPixel(bData.PixelFormat);

    /*the size of the image in bytes */
    int size = bData.Stride * bData.Height;

    /*Allocate buffer for image*/
    byte[] data = new byte[size];

    /*This overload copies data of /size/ into /data/ from location specified (/Scan0/)*/
    System.Runtime.InteropServices.Marshal.Copy(bData.Scan0, data, 0, size);

    for (int i = 0; i < size; i += bitsPerPixel / 8 )
    {
        double magnitude = 1/3d*(data[i] +data[i + 1] +data[i + 2]);
        if (magnitude < thresh)
        {
            data[i] = 0;
            data[i + 1] = 0;
            data[i + 2] = 0;
        }
        else
        {
            data[i] = 255;
            data[i + 1] = 255;
            data[i + 2] = 255;
        }
    }

    /* This override copies the data back into the location specified */
    System.Runtime.InteropServices.Marshal.Copy(data, 0, bData.Scan0, data.Length);

    b.UnlockBits(bData);

    return b;
}

The second method uses pointers.

/*Note unsafe keyword*/
public unsafe Image ThresholdUA(float thresh)
{
    Bitmap b = new Bitmap(_image);

    BitmapData bData = b.LockBits(new Rectangle(0, 0, _image.Width, _image.Height), ImageLockMode.ReadWrite, b.PixelFormat);

    byte bitsPerPixel = GetBitsPerPixel(bData.PixelFormat);

    /*This time we convert the IntPtr to a ptr*/
    byte* scan0 = (byte*)bData.Scan0.ToPointer();

    for (int i = 0; i < bData.Height; ++i)
    {
        for (int j = 0; j < bData.Width; ++j)
        {
            byte* data = scan0 + i * bData.Stride + j * bitsPerPixel / 8;

            double magnitude = 1/3d*(data[0] + data[1] + data[2]);
            /*Just write the data into memory*/
            if (magnitude < thresh)
            {
                data[0] = 0;
                data[1] = 0;
                data[2] = 0;
            }
            else
            {
                data[0] = 255;
                data[1] = 255;
                data[2] = 255;
            }
        }
    }

    b.UnlockBits(bData);

    return b;
}

That basically covers the code and approach. In Part II (tomorrow, I promise!!), I’ll post a full .sln and results of the comparison.

As previously discussed, LCD Smartie supports .Net plugins already. The requirements are that a public class be created with the name as LCDSmartie. This class can have up to 20 methods called funtion1-function20. These functions should take two strings, and return a string. (For more details, you can check out the instruction page for plugin authors.)

I wanted to be able to test the function which did the actual counting down, so I created a new solution as a console application, and then added a second project as a library that would actually do the countdown. Structuring the solution this way makes it so that both a .dll and an .exe are generated when the project is compiled.

My function1 looks like this:

public string function1(string a, string b)
{
    DateTime sunset = Sunset(DateTime.Now);

    if (DateTime.Compare(sunset, DateTime.Now) < 0)
        sunset = Sunset(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day + 1));

    //doing this subtraction returns a TimeSpan object, whose ToString method I call
    return (sunset - DateTime.Now).ToString();

}

The return value of this function is a string representing the amount of time between now and sunset. If the sunset has already happened today (a very depressing turn of events indeed), it counts down till tomorrow’s sunset.

After testing my function using the the console application, the final step was to get LCD Smartie to call my function1 and send the output to the LCD. In line with the rest of the software’s philosophy, this was quite simple. All I had to do was copy the .dll to Smartie’s plugin directory, and then go to the configuration screen. The screen has a formidable look, but is quite simple. To get an item to display on a given line, you just enter that function on that line (my LCD has 4 lines, so there are 4 input boxes). The $dll function is used to call a .dll implementing the plugin interface. It takes 4 arguments: the dll name, the function number, and two strings that will be passed to the function. Below is a screenshot of my configuration screen.

One thing to note on this screen is I use the BigNum plugin to display multi-line numbers. The plugin is widely configurable, so I’ll refer you to their site for that information. And finally, a screenshot of LCD Smartie’s preview window. Unfortunately, I don’t have any pics of my actual timer available right now.

And finally, here is the code for LCD Smartie plugin. This is self-contained enough that I will just release the .cs file, but if you have any trouble configuring the solution or projects, let me know. For more complicated projects in the future, I will release full .slns. This code is in the public domain, but if you happen to do something interesting with it, or find it useful, it would be nice if you let me know.

C# is my language of choice for desktop applications, so I immediately set out to find a way to use it to write the controller software for the LCD. At first, I looked to the Crystalfontz LCD software, but found the software to be poorly documented, and plugins difficult to write, requiring that a DLL be written, which would be loaded by a Windows service running the in the background. After some time fruitlessly spent searching for help on the Crystalfontz forums, I ended up finding a different program entirely: LCD Smartie. LCD Smartie has built-in support for writing plugins in .NET, and simply requires that plugin-authors create a class with the same name as their DLL filename, which implements up to 20 public methods named function1-function20.

Knowing that this would do exactly what I wanted, I moved on to calculating the time of sunset. Fortunately, I’d recently discovered one of those obscure functions that PHP is known for, date_sunset, and more importantly, djwice’s comment, containing links to information on the algorithm used by this function. I implemented the following sunset function using the algorithm outlined on this page.

public DateTime Sunset(DateTime date)
{
    int dayOfYear = date.DayOfYear;

    double tApprox = dayOfYear + ((18 - LON / 15) / 24);

    double meanAnomaly = (0.9856 * tApprox) - 3.289;

    double sunTrueLon = meanAnomaly + (1.916 * Sin(meanAnomaly)) + (0.020 * Sin(2 * meanAnomaly)) + 282.634;

    if (sunTrueLon > 360) while (sunTrueLon > 360) sunTrueLon -= 360;
    if (sunTrueLon < 0) while (sunTrueLon < 0) sunTrueLon += 360;

    double rightAscension = Atan(0.91764 * Tan(sunTrueLon));

    if (rightAscension > 360) while (rightAscension > 360) rightAscension -= 360;
    if (rightAscension < 0) while (rightAscension < 0) rightAscension += 360;

    rightAscension = rightAscension + 90 * (Math.Floor(sunTrueLon / 90) - Math.Floor(rightAscension / 90));

    rightAscension = rightAscension / 15;

    double sinDec = .39782 * Sin(sunTrueLon);
    double cosDec = Cos(Asin(sinDec));

    double cosHour = (Cos(ZENITH) - sinDec * Sin(LAT)) / (cosDec * Cos(LAT));

    double hour = Acos(cosHour) / 15;

    double time = hour + rightAscension - (0.06571 * tApprox) - 6.622;

    time = time - LON / 15;
    time -= 7;

    while (time < 0) time += 24;
    while (time > 24) time -= 24;

    DateTime sunset = new DateTime(date.Year, date.Month, date.Day, (int)time, (int)((time - (int)time) * 60), 0);

    return sunset;
}

Since geography is done using degrees, but math is done in radians, I decided to write my own trig functions that handled the conversion for me. I’m sure you all know how to do that ( :p ), but in case you don’t, here are cosine and arccosine, from which you should be able to extrapolate to figure out the rest.

private double Cos(double degrees)
{
    return Math.Cos(Math.PI / 180 * degrees);
}

private double Atan(double x)
{
    return 180 / Math.PI * Math.Atan(x);
}

Also note that I use the constants LAT (latitude), LON (longitude) and ZENITH. latitude and longitude are simply the ones corresponding to your location (lookup here), and the standardised value for the zenith is given in the above algorithm link to be 90° 50′, or 90.83333°. After some fiddling, I found that the above code in fact generated the same exact sunset time as the one printed in my local papers. With that done, I moved on to writing the plugin and tweaking the timer to display well on the LCD.