LCD News Readout How-to

This is a How-To to create a LCD style news ticker embedded on your desktop as referenced in my previous post.

What you’ll need

You should be able to find links to these on the main page of most large newspapers and news organizations. We’ll be using the CNN Top Stories feed here.

This is an easy project using the PageScraper extension included with the installation of Samurize. I’m going to assume that you are comfortable working with basic Windows actions and that you are using the Firefox web browser. If you arn’t at least using Firefox… well, we’ve got some talking to do.

1. Download the LCD font and Serious Samurize to your desktop.

2. Install Samurize, then go to Start > Control Panel > Fonts and choose File >Install Font. Browse to where you saved the LCD Font, select it and save.

3. All right, we’re ready to begin!

4. Open the Config Editor. You should find this under Start > All Programs >Serious Samurize. Click on any picture to see a larger version of it if you need more detail. Some of these pictures are large enough that they get cut off by this WordPress theme, so you may need to open the picture up in a separate tab to get better detail.

5. This is the editing window, the large grey area in the center is where you will build your desktop background. Over on the right side you should see a series of tabs. The most important of these is Edit Meters.

This tab should be forward, click on it if it isn’t. Then click on the drop down menu beside ‘Add Meter’.

6. The first thing we are going to do is create our own CNN logo. I’m going to go into a lot of detail here to introduce you to some repetitive things I won’t be mentioning much again. First of all, select Add Text, outlined in red in the graphic above.

This will open up a series of tabs, over on the right hand side of your page. These will be General, Source, Display and Input. We are primarily going to be using General, Source and Display.

7. Click on the Display tab. You should see a Text area. This

is where we will be inputing the text we want to display. Go ahead and type CNN in the text area.

Now, we are going to get things looking better. Move down the toolbar on the right until you see Select Font and Select Color. Click on Select font and go ahead and choose LCD, the font we installed earlier, keep the size regular and increase the font size above 16 point (I’m using a 26 point font). Now, click OK and move over to Select Colour. I suggest a deep red, but a neon green works very well against a black background.

We will need to repeat the steps to choose the font and color for each discrete element to make everything match.

Click over on the grey area where you see your CNN logo, you should be able to move it around the grey workspace. Choose a location near the top of the screen and move the CNN text there with your mouse.

For housekeeping and to keep yourself organized, click over on the General tab and change the name of this meter. I use CNN Logo. Continue this every time you add a page element to keep yourself organized.

8. All Right! You’ve made it through creating a logo in Samurize! Now let’s start the fun stuff! Take a deep breath, stretch, and open up your browser. Go to the CNN webpage and find the RSS feed for Top Stories. Right click and from the context menu choose ‘Copy Link Location.’

If you can’t find it, go ahead and type this in at the proper place

9. Go back to the Config Editor window and click on Add Meter. Go all the way down to the bottom and click on Add Plugin > Page Scraper. This should add a small box in the grey area that says [Plugin Not Yet Executed]. I usually go ahead and change the font and color as mentioned above, in this case I’m going to be using white, 16 point font. I also expand the box area to fill the section I am going to be using for this particular page element.

10. On the toolbar on the right, click on Source.[1]. The plugin should read ‘pagescraper.dll’, then move on down to ‘Select Function to Run’ and choose ‘GetWebpage’ [2]. Finally, click on the Configure button. [3]. This should open up the somewhat intimidating PageScraper configure windows. Take a little time and familarize yourself with the different areas. There is a URL input up top. This is where we’ll paste our RSS feed. The large grey area now dominated by the text telling you where to put the webpage address is wherewe will see the code for the webpage we will be scraping. Down at the bottom iswhere we can customize our output. Take a careful look at some of the coding we’ll be using, especially [Occurence] and %b.

Note the Advanced Options button down at the very bottom. We’ll need to set some features here by the end of our setup.

There are two windows, a background screen and a foreground screen. You can move both around independantly, so arrange things in a comfortable way.

Looks intimidating? Nope! Let’s dive right in!


11. Paste the RSS feed into the URL bar at the very top of the page and click Load. You should see the HTML or XML in the grey window. Now, we need to do some deduction, inferences and testing. Scan down through the code until you find the beginning of the news stories. Right now [10:03 PM 16/09/2008] the top story is the Federal Reserve takeover of AIG. This title is all that we want to display on our desktop, so we can filter out the rest of the content. We’ll do this in two stages.


12. First, lets think big. If we had lots of space we’d want to include all of the news information, but we don’t need the copyright information, the general links and other header information, so let’s set a top limit. Check the box for ‘Page Start Boundary’ and enter the following <item> .[1]

The entire header should now be crossed out, right up to the <title>Fed takes over AIG with $85 Billion Loan</title> section. This gives us a fresh place to start, our first matches should be the headlines we are trying to extract from the page.

13. Second, we’re going to extract the headlines using the [Match1] section below. Check the box for [Match1] [2]. Now that we’ve indicated that we are going to be doing further extraction, another boundary entry area should show up directly above where we checked [Match1]. We remove the tags from the title by

putting <title> in the start boundary section and </title> in the end boundary section. [3] We should be able to see the output below, directly above where we checked [Match1].

We’ve now successfully extracted the headline! Pat yourself on the back. Now recover from the shoulder injury…

Moving on, let’s go down to the bottom and check ‘Return All Occurrences’ [4] then limit our output to 5 [5 and 6] You should be able to see the results down at the very bottom of the background screen.


14. On the background screen, down at the bottom, do you see [Match1]? This section sets the format of how we output our headlines. To make this a little more usable, go ahead and replace [Match1] with [Occurrence] – [Match1] in that section. This gives us numbering for our top stories from CNN.

15. Click down on Advanced Options. Scroll down and check the box ‘Save Output to TMP/HTML file’. Save this file in the default folder [usually C:/Program Files/Samurize/plugins/PageScraper/] by clicking on the … button, and give it a name you will remember. I use CNN Top Stories Custom.tmp. Go all the way down to the bottom and choose how soon you want it updated. CNN has pretty good servers, and I like my news up to the minute so I chose 60 seconds.

Click OK to close out the Advanced Options window, then click OK to close the PageScraper plugin window. You should be back at the main Config Editor window. As a bit of housekeeping, click on the Display tab and remove the ‘Plugin:’ from the Text section. Scroll down the page and check the box ‘Word Wrap’ to display the full headlines.

There you go! It’s finished!

16. Go up to the file menu at the very top of the page and save your project in your My Documents folder. Got back to File and select ‘Launch Instance Manager’. When the Instance Manager has loaded, right click on it and choose ‘Select Config File’. Load your configuration and there you go!

However, as you can imagine from going through all the options avaliable to you you can do significantly more interesting things with Samurize. This only scratches the surface. So, experiment! I’ll end with a couple of screenshots of my desktop to show some other projects you can do. The ToDo list, the clock and the music display are all easy projects that can be completed with the plugins included with Samurize, and the System monitoring section requires the Speedfan program and a plugin for Samurize you can download from the Samurize website.

If you have questions, I highly recommend the Samurize forums.

Below is what I call my ‘Aggressively Simple’ desktop.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: