Tuesday 21 July 2009

SyntaxHighligher version 2 in Blogger

In a previous blog post I wrote about adding SyntaxHighligher to your blogger page.
I had a few issues with version 2 and at the time resorted to version 1.5.5. Guess what? Yes I solved the little issues I had so here is how to add version 2!
The route is very similar just with some config changes.
Im now using Alex's site to host the source files.

Modify your template to add in CSS and JS files & Add startup script.
Goto Layouts --> Edit HTML to edit your Blogger template.
It's worth taking a backup of your layout, just copy and paste into a text file.
In the previous post I simply added the raw CSS to the template head element, I did this because it didnt seem to work with the linked CSS. This time im using a link element.

You can see that I also added the startup script after the JS includes.

<head>
<!-- Add-in CSS for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode=true;SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;SyntaxHighlighter.all();</script>


<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
Make sure you save your template.

Add your code blocks to your blog
Thats about it really
The changes to the syntaxhighlighter allow greater configuration of the behaviour. It's worth reading the documentation! The main difference for me was to assign the brush in the class attribute:

<pre class="brush: js;">
....encoded code here
</pre>
If your code contains a lessthan < then you need to encode your contents. There are quite a few tools around to Encode HTML.


I have noticed a small issue where the copy/paste element which is Flash is not displaying the icon. I'm goint to try to solve this at some point.

Monday 20 July 2009

Using SyntaxHighligher with Blogger

I'm new to blogs really, so Im just getting to grips with how to
  • Write content peole like
  • Make sure it's readable (grammar/content wise)
  • Make sure it looks pretty
And as my SRM blog post looks like a dogs dinner then i thought i'd address 'make it look pretty' next.

As im a bit of a coder I really find it helps to see code which is easy to read.
So if im going to be putting code on this blog then I need something to make my code look slightly presentable.
There are a few options out there(I will create a list at some point), but to me the easiest is the SyntaxHighlighter by Alex Gorbatchev.

Reasons:
  • It supports multiple programming languages
  • It can be hosted by Alex's site
  • It has a Blogger Mode
So alex's version seems to be up to version 2, and I had some issues getting it to work in Blogger for some reason. I'll work on this for later. Therefore Im going to be using using the version hosted by Google, which is 1.5.1

Updated 21st July 2008 - You may have noticed that the pages are now using version 2 of SntaxHighligher. I'm just in the middle of a blog entry on how to migrate over from 1.5.1


How to enable SyntaxHighlighter 1.5.1 in Blogger
  1. First we need to alter your Blogger Layout to add the required Javascript and CSS files. Goto Layout-->Edit HTML to edit your layout.
  2. Insert the CSS into the styles section of the Template. For some reason having a link element didn't work in Blogger. So I hard copied the code into the template style section, I pasted it after the template style before the ]]>
  3. Insert the relevant JS files into the <head> element. I'm pointing to Google's site.

  4. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>

    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>

    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>

    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>


    See what i did there...using the syntaxhighlighter to show how to install the syntaxhighlighter ;o)

  5. There is also a section of code that you need to add as startup script. This goes after the <body>tag.
    <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>

    This piece of code tells the highligher that it should highlight all elements with the 'name' attribute = 'code'. Also, notice the Blogger Mode!? What this does it a bit of manipulation of the source to replace <br/> with /n... simples.


  6. How to add code to your blog entry.
    Now comes the 'simple' bit, to add code to your place it within a <pre> element. For example:

    <pre name="code" class="vb">
    For index As Integer = 1 To 10
    'do something
    Next
    </pre>
    I had some issues when entering certain html tags such as <link> into my <pre> tags. I therefore encoded the HTML to ensure that this wouldn't cause any issues.

    Once you have added these lines then the SyntaxHighlighter will highlight any code that you embedd in <pre> tags. Clever.

    You can also just highlight certain classes, which is useful if you want to possibly NOT highlight certain <pre> elements.


That's All Folks

Thursday 9 July 2009

How to change the battery on a IV SRM Head unit


I’m not tight, I just know the value of money.

I have an older SRM IV which decided to give up the ghost a while back; it would not hold any charge so I was hoping it was going to be the battery.


I contacted SRM and they suggested sending it back for a service or upgrade (~60EUR & 300 EUR respectively). Now, like I said I’m not tight but there is no way I was going to send my head unit back for a few weeks and pay that amount of cash for what I reckon is a simple battery change.

On a side note you can get the battery changed in the UK for about £60, but for a unit which is outside warranty what's the point? [apart from it being completed by a competent person who would probably replace the unit if they broke it...Ed ]

So before I started I had a Google around to see if anyone else had don't anything similar... I found a few people had replaced the battery in the chainset but not the head unit:
http://weightweenies.starbike.com/forum/viewtopic.php?p=234925


Before I go any further I also looked at the SRM site for any info, here it was i found:

The PowerMeter battery is not self-replaceable. You will need to send it to the Service Center for replacement. ATTEMPTING TO REPAIR IT YOURSELF WILL INVALIDATE THE WARRANTY, and could cause permanent damage to your PowerMeter.Battery life of the PowerMeter will vary between PowerMeters.


So, do I take the possible destructive dangerous path of changing the battery myself? Yeah Why Not. This is about as reckless as I get now I’m bordering on middle age… Extreme Soldering!

So here is the tale of how the battery got replaced in the SRM IV head unit.Please take care, as I really do not hold any responsibility for you breaking your own SRM unit!Important bits are in boldLittle comments are in this style


How to change the battery on a IV SRM Head unit

Cost: £5 for parts
Cooking Time: (45 Minutes)

Utensils

  • Yourself
  • Earthing wrist strap (optional) Have a look why you should be earthed
  • Screwdriver - small yet perfectly formed
  • The Universal Tool (a knife) - Thin Blunt Edge
  • Soldering Iron - careful it's hot
  • Glue Gun - It's a gun which fires glue!
  • Small Scissors - remember not to run with them
  • Solder Sucker (optional) it makes like easy when removing excess solder


Ingredients

  • SRM IV with a defunct battery
  • Replacement Battery Pack (see section for details on model)
  • Glue Gun Glue - Careful as this gets REALLY HOT
  • Solder
  • Salt and Vinegar Crisps/Carrot Sticks - optional - its' a snack.
  • Make sure you set everything up have plant of room and light as this can get a bit fiddly.

1. Remove the Cover

Remove the screws on the back of the SRM head unit. This is easy just make sure you have the correct size phillips/posidrive screwdriver.

The back cover is bonded on with a "glue gun" type compound, this binds to each surface pretty well but will break away with some encouragement.

When removing the back cover I used the blunt edge knife run around the joint and break the seal. You could also make a tool which was a bit like a tyre lever to do this. Use a thin bit of metal.

The glue is flexible so expect a bit of elasticity.

Remove/Lift the back cover very carefully, there are some leads which run to the LCD display, you don't want to be damaging these. Do not over stretch these leads.


Remove the LCD leads, one connector (black connector) simply pulls away from the plug, just be gentle when removing this.

The other connector (white socket) is a type of connector where the LCD connector film is held into the socket by a clamp. This clamp is part of the socket and needs to be ‘released’ before you remove the lead. If you don’t release the socket the LCD connector will not want to come out.


Figure 1 A look at the PCB etc.


Figure 2 The Black Connector
Figure 3 The White Connector - With the latch

Examination of the battery

The battery is a nickel metal hydride mini pack with 4 2/3 size AAA cells (1.2volt cell). These units are pretty standard and can be bought on the web:

3.Remove the battery

The battery sleeve is bonded to the PCB, this concerned me a little as it could be quite easy to damage the PCB by forcing the battery off its bond.

I decided to remove its sleeve and trim this leaving the bottom layer. I would then bond the new battery to the bottom layer.

So, unsolder the terminals using a soldering iron. Using pliers will help insulate the PCB from any heat, but the leads are pretty long and the heat shouldn’t make it anywhere near the PCB.

Remove the battery by cutting the white sleeve, a friend suggested that you could use a hot blunt knife to melt the glue and remove the battery, I didn’t do this.Dispose of the battery;

While nmh batteries are low grade-ish, please make sure you dispose of the battery correctly.



Figure 4 Negative Terminal


Figure 5 Positive Terminal


Solder the NEW Battery in placeIf you missed the bit about which battery to buy, or, if you haven’t bought it yet go back and read it/buy it!

The version I bought has a capacity of300mAh not 280 like the original... bonus extra capacity!I bought a battery with leads as I felt this was more flexible that using tabs.

Ok, Remove the connector at the end of the new battery lead to expose the nice shiny wire. Solder them to the terminals.

Look here for a tutorial on soldering... its worth practicing a bit.

Remember positive is Red(+) and negative is Black(-)

I used a soldering iron set to 170’C

4. Replace LCD Leads
This is basically the reverse of the way you took them off. Ensure they are true/correctly inserted and flush.Remember to lock the white lead in place with the latch on the socket.

5. Test

Plug the unit in to the charger for 3-5 seconds and press the mode button - if the screen comes on then that's probably a good sign.Unplug from the chargerGet the cover back off again while being careful witht he LCD leads.


6. Glue the Battery in place

So we should now be happy that the unit is working, so we can glue the battery into place. I used a small amount of glue and held the battery inplace while it set.
Try to make sure you put it in the same position as the original battery to ensure that the case will close again!

7. Replace the LCD leads

Same as step 4

8. Replace Lid

Remove any old glue which may get in the way of the lid going back on. Run some hot glue gun gunk around the seamReally be careful not to let this touch your skin, its HOT

Try to make sure its in a flush position, you don’t need too much glue!Wipe excess glue with a cloth/paper or you can wait until its cold and use a knife, up to you reallyI held the battery in place while the glue cooled; it only takes a minute or so.

9. Screws back!

Replace the screws in the cover, these are self tappers so be careful.

10. Final TEST

Same as step 5

11. DONE

All works?
Yes - Big Pat on the back and a carrot stick...Yum
No? Bugger! Get on eBay.


So there we have it, we have seen that we can replace the battery of the SRM head unit with ease, as long as you are careful, have the right tools and find the correct components.