Archive for April, 2013

Upgrading Sabayon and Building Chrome

Apr 26 2013 Published by under Linux

One advantage of using Sabayon is that you can compile programs to be optimized for your CPU architecture. There are many optimization options and I use -march=native -O3 -pipe -fomit-frame-pointer -ftracer -floop-interchange -floop-block -ftree-loop-distribution -freorder-blocks-and-partition. Chrome on Linux is the fastest browser for sites that you visit often, as they are cached. Furthermore, you can boost Chrome performance beyond the benchmarks.
I follow a few simple steps for upgrading Sabayon:

  1. equo update
  2. equo install entropy equo
  3. equo repo mirrorsort sabayon-weekly
  4. equo upgrade
  5. equo conf update

Wolfden has a nice article explaining these steps. To upgrade Chrome, I use the Portage package manager:

  1. emerge –sync
  2. layman -S
  3. equo install sys-devel/gcc-[version]
  4. gcc-config -c
  5. equo install www-client/chromium-[version]
  6. emerge -av –oneshot –nodeps =www-client/chromium-[version]

There were errors coming from different packages when I tried to compile them without steps 3-5, such as configure: error: C compiler cannot create executables and gcc-config: error: could not run/locate ‘g++’. Installing the gcc version listed in gcc-config -c fixed the problem.

No responses yet

Calculating Prime Numbers in Python

Apr 24 2013 Published by under Python Fiddle

The repository of Python code snippets on Python Fiddle now has 742 posted and counting. Among them, there are several for listing prime numbers. The naive approach by factoring definitely isn’t efficient:

Another approach also contains the hidden double for loop:

Way to go with this one, packing a little program into the regular expression:

If I were to do it, I’d implement it with Eratosthenes’s algorithm.

No responses yet

The CS 467 Experience at Waterloo

Apr 18 2013 Published by under Courses

At the exam today Professor Mosca wore a suite again. He does that too often teaching the class. Maybe he wants us to take graduate courses in the field. He talks about the classes every time a relevant lecture topic comes up.

Compared to other classes I took this term, I learned the most from this one. I read the first few chapters of the textbook before the class, but got bogged down by the notation. Taking the class and working on the assignments helped me to learn it. The slides had extra material to go along with the textbook.

Those walks in the QNC building were memorable. The wooden stairs hanging in the air with light filtering through glass walls and white boards beside sofas capture the spirit of the building.

The solutions to homework assignments were always simple, but they’re challenging when going through the material for the first time. I spent many days this term working on them, long enough that I would have read How to Solve It at the start of the term. I plan to read that book as I start work next month, since the problems solving skills always help.

One response so far

Custom Pins on Bing Maps with an Image Frame

Apr 03 2013 Published by under Programming

On a recent project developing a friend tracking application for BlackBerry 10, I used Bing Maps for showing the locations of people in the contact list because Google Maps did not work on the device. The Bing Maps API has less community support and example code compared to Google Maps. This tutorial explains how to customize a pin in Bing Maps. The goal is to display an arrow pointing to a specific location with a profile picture and the name of the person above it. This is accomplished by using the API where possible with the addition of CSS and images to fill the gap.

To create a PushPin, Location and PushpinOptions objects are passed as arguments.

Bing Map PushPin

the default PushPin

When initializing the PushpinOptions object, the relevant options for positioning and displaying the text are text and textOffset.

var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
        text: "My Name",
        textOffset: new Microsoft.Maps.Point(-12, 10),
        typeName: 'blackText',
        width: 128
});

In order to display the text label so that the letters appear on a single line, it is necessary to make the div wider by adjusting width. Note that setting the width has shifted the pin, which will be readjusted later. The textOffset option sets the amount the text is shifted from the PushPin icon. By default, the Bing Maps uses a white text label. It can be changed by setting its CSS class using the typeName option. Here, we set the typeName to “blackText”.

.blackText div {
    color: black !important;
}

Bing default PushPin with label

Bing Maps allows the pin to be replaced with an icon, but there is no API for overlaying an image on a pin.

var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
        text: "My Name",
        width: 128,
        textOffset: new Microsoft.Maps.Point(-12, 10),
        typeName: 'blackText',
        icon: "images/Map_pin2.png",
        height:128
});

Bing default PushPin with icon
However, the goal is to display a dynamic profile picture with a pin below it. The solution is to use the same approach for setting the label color. I inspected the HTML elements with jQuery on $(‘.blackText’). This is a useful technique when the HTML element cannot be located with the mouse cursor in Chrome developer tools or FireBug.

<a href="#" class="blackText MapPushpinBase" style="position: absolute; cursor: inherit; overflow: hidden; pointer-events: all; left: -64px; top: -128px; width: 128px; height: 128px; line-height: 0px;">
<img src="images/Map_pin2.png">
<div style="position: absolute; text-align: center; width: 100%; font-weight: bold; font-style: normal; font-variant: normal; font-size: 10pt; line-height: normal; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255); left: -12px; top: 10px;">My Name</div>
</a>

Since blackText is an anchor tag, it is possible to insert a background image for it:

a.blackText {
    background-image: url("images/Map_pin2.png");
    background-repeat: no-repeat;
}

and replace the pin image in the API call with the profile picture:

var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
        text: "My Name",
        width: 128,
        textOffset: new Microsoft.Maps.Point(-12, 10),
        typeName: 'blackText',
        icon: "http://placekitten.com/80/80",
        height:128
});

Bing PushPin overlay image
The next step is to reposition the image and the label. Since the CSS border width can push the content in the CSS box model, the border width should be set before adjusting margins and padding.

I added an orange frame around the profile image to make it fit with the pin.The background color shows through the padding, with the margin adjustment pushing the image to the right.

a.blackText img{
    margin-left: 8px;
    margin-top: 0px;
    padding:5px;
    background-color:#ff4500;
    -webkit-border-radius: 2px;
}
var imageHeight = 80;
var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
        text: "My Name",
        width: 168,
        textOffset: new Microsoft.Maps.Point(50, imageHeight/2),
        typeName: 'blackText',
        icon: "http://placekitten.com/80/80",
        height:128
});

Bing PushPin with custom image
As a bonus, why not add a pink double border? Simply override the default image border with a higher priority rule.

a.blackText img{
    margin-left: 2px;
    margin-top: 0px;
    padding:5px;
    border:3px solid #ffb6c1 !important;
    background-color:#ff4500;
    -webkit-border-radius: 2px;
}

Bing PushPin custom image double border
Finally, the pin needs to be repositioned over its original location. The anchor option sets the (x, y) offset of the pin relative to the width and height.

var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
        text: "My Name",
        width: 168,
        textOffset: new Microsoft.Maps.Point(50, imageHeight/2),
        typeName: 'blackText',
        icon: "http://placekitten.com/80/80",
        anchor: new Microsoft.Maps.Point(52,112),
        height:128
});

Bing PushPin anchor position

No responses yet