13 September 2009

Suntour vintage derailleur maintenance

Suntour derailleurs are solid constructed components that perform troublefree for a long period of time. But as years go by they suffer from wear that ultimately leads to failure. From my experience it´s often the tension spring of the parallelogram cage that breaks and leaves the derailleur useless. But how can this spring be exchanged; after all the derailleurs of Suntour are, like the ones of Shimano, rivetted and not fully able to be taken apart, like the ones of e. g. Mavic?!
This how-to illustrates the complete disassembly of Suntour derailleurs, the exchange of damaged parts and finally the re-assembly of the whole mechanism to form a functioning derailleur. This article further wants to show how one can substitute a broken tension spring with a self-made spring made from hardware store parts. At the beginning i´ll try to define some terms i will use in the further text. The orientation is set according to the normal mounting position on the bicycle. Parts oriented to the center line of the bike are are referred as "inboard", parts oriented outside as "outboard". The parts of the derailleur that bear the pivots are called "front parallelogram body" (FPB) and "rear parallelogram body" (RPB). They guide the two parallelogram arms (inboard parallelogram arm (IPA), outboard parallelogram arm (OPA)). The entity of FPB/RPB and IPA/OPA is called the parallelogram cage. The parts of a Suntour derailleur that can be disassembled are the pulley cage and the spring-loaded hanger bolt assembly. The pulley cage can be detached removing the M4 set screw. The spring-loaded cage is unloaded rotating it clockwise up to the "twelve o´clock" position and pulling it out of the FPB. The hanger bolt assembly can be opened removing a circlip that secures the bolt.


The disassembly of the rivetted parallelogram cage is shown in the following part.


Fig. 1: To drive out the pivots a small hole has to be drilled in the upper extension of their axis. Using a small stub steel nail and a hammer the pivots can be driven out.

 



Fig. 2: The required drilling to drive out the pivot under the hanger bolt housing has to be performed meticulously, because the position direct above the pivot has to be reached exactly. The picture shows the relative location of the drilling entrance. Because of the more precise mode of action i use hand drillers of the caliber 1.5 mm.

 



Fig. 3: After drilling the pivots are driven out using the steel nail and a hammer. As a support i use a wood board with a small recess below the pivot.

 



Fig. 4: To remove the parallelogram spring a brass bushing in the IPA has to be driven out. To do this an M5 screw is placed on top of the fixated IPA and gentle (!) hammering is applied. After this the inner (serrated), the outer brass bushing and the parallelogram spring can be separated.

 



Fig. 5: If there are no original Suntour spare springs available, a replacement spring can be formed using a pull-spring taken from a local hardware store (outer diameter 12.5, inner diameter 9.5, wire gauge 1.5 mm). To keep the cylindrical form of the spring during the forming and bending, it is hoisted onto a fitting wood stick.

 



Fig. 6: After bending the spring is shortened using a bolt-cutter and the IPA is reassembled. The self-prepared spring bears the option to control the preloaded tension in a distinct range. Therefore one can fine-tune the shifter and will be able to build it up using a less amount of operating force. The picture shows from front to rear: the broken original Suntour spring, the newly built spare spring (not shortened) and the outer and inner brass bushing.

 



Fig. 7: A completely disassembled parallelogram cage. Its OPA has been broken. After exchange of the OPA the derailleur could be newly built up.

 




Fig. 8,9: After thorough cleaning and lubrication the derailleur can be re-assembled. The IPA has to be inserted into the FPB folded to the inner side and is rivetted. The RPB is connected with the IPA and rivetted. As the last step the OPA is mounted and rivetted, which tensions the parallelogram spring.

 



Fig. 10: The newly rivetted derailleur.

 


The drill holes can be left untouched or tinned which masks the the modification of the derailleur. To leave the drill holes as they are bears the benefit that the derailleur can be opened for maintenance very easy. Another application for the dissassembly of the rivetted parallelogram cage is the completion of a derailleur from parts of broken derailleurs. This is a valid option since the last "generation" of Suntour derailleurs are identical in construction (leave out the Superbe Pro derailleur).

* * * * * *

02 July 2009

i do it my way - a blogger workflow

here is a quick outline of the procedure i use when preparing an article for a blog hosted on the appletalker scrapbook and other blogger hosted blogs to which i contribute my words of infinite wisdom. it's not a definitive guide and i'm not making any claims that this is the 'right' way to do it but, as anyone who blogs even semi-regularly via blogger knows, the process can be teethgrindingly irritating. after many years of trying different approaches [including using desktop clients like marsedit and ecto], this is the method that works best for me.

    equipment needed:
  • a rough draft of your article
  • images used [prepared in a web ready format]
  • a good HTML editor [i recommend textmate. beg, steal, borrow or even buy it!]

let's get started.

before i go anywhere near blogger, i write up my article in draft format in textmate. this allows me to work in a comfortably sized window in a text editor, rather than that cramped wee text entry box in the blogger interface. for some reason i always find my creative juices [such as they are] flow more easily when i'm writing in an anonymous text editor window, rather than staring at that blogger interface, trying to think what i want to say. i think it's the same psychological effect which causes all my greatest artwork to be scribbled on the backs of envelopes, while anything i try to draw in a pristine, eagerly awaiting sketchbook turns out to be shite.

draft version of article - written in textmate:

OK- so i've written up the text of my article. the next step is to source and prepare any images i want to include. for this i tend to use 'the daddy' [aka photoshop] but any image editor which will allow you to save images in a webready format will do.

i'm not going to go into the ins and outs of the various web-friendly image formats out there, but basically; GIF for graphical style images [logos, line-art etc], JPEG for photographic images and PNG for either [although PNG files tend to be larger in filesize than either GIF or JPEG]. if you want a handy hint on how to remember which format for which type of image, learning the meaning of the acronyms will help; GIF stands for graphics interchange format and JPEG stands for joint photographic experts group.

when saving web-ready copies of my images, i usually make them no larger than 800px on their longest side. blogger scales the images down to a maximum of 400x300px anyway for display on your blog, so as not to break the standard template layouts. [tho' people can click on the image to view a larger version in its own window], so you might as well scale your images with that in mind. unless you're showcasing your photographic talents with high resolution imagery, i dinnae see much point in uploading an image four times larger than it's going to be appear on the page. you might as well work to just over display size, so you know that the image is going to be 'readable' on the page at its reduced size.

it's at this point that i usually darken blogger's door for the first time, and create my new article.

before i type a word of text, i upload all my web-ready images into the new empty article. the reason i do this is because of one of the most infuriatingly irritating bugs in blogger; whenever you add a new image, blogger inserts the code for it at the beginning of the HTML for the article, irrespective of where the insertion point is in the text. this means that if you are in the middle of writing a long article directly in the blogger interface and you try to add the images as you go along, you have to constantly scroll to the top of the article [and remember this is all taking place in a postage stamp sized text entry box in your web browser], cut the code for the newly inserted image, scroll back down again to where your insertion point used to be and paste it in there. it's much less hassle to just dump all the images in at the start and then work the text in and around them as necessary.

uploading the images in blogger. use the 'add another image link' to queue your images in batches of five at a time for uploading. set layout to 'none' size to 'large' and make sure to upload them in reverse order!:

BTW - all the references to working in the blogger interface in this article assume i am working in edit HTML mode, rather than compose mode. in my experience compose mode generates such a complete hash of code spaghetti that when [not if!] something goes wrong with the layout, you'll be tearing your hair out, wading through all the auto-generated proprietary code tags, trying to sort it out. much easier and cleaner to write your own HTML and use edit HTML mode to work in.

compose mode = divil's butthermilk!:

i also turn off the preference [you'll find it under settings > formatting ]to automatically convert linebreaks, as i like to have complete control over the HTML code i'm using, and not rely on the blogger engine to second guess what i'm trying to do. besides which, this option generates loads of fugly <br /> tags in your code, instead of proper grown-up <p> ... </p> tags

turn off auto-linebreak creation:

one more caveat with image uploading; not only do i upload all my images before writing a single line of my article in the blogger interface but - just to make it even more fun! - i also upload them in reverse order.

'why is this?', you ask, with an idiotic expression playing about your simian features.

well, dear reader, it's because of the abovementioned fact that blogger will insert the code for each new image, as i upload it, at the top of the HTML code for the article. so if i have three images to put in my article [let's throw caution to the wind and name them image01.jpg, image02.jpg and image03.jpg] then, if i upload image01.jpg first and then image02.jpg, the code for image02.jpg will be inserted above the code for image01.jpg. carry on with the process for all your images and you'll find they appear on your page in reverse order.

dontcha just l-u-u-r-r-r-ve blogger!

one other thing i do is to use layout - none when uploading images. while this may not be as visually sexy as using the left, center [sic] or right options, which generate CSS float tags, it's a lot less hassle, as you dinnae have to faff about putting in 'clearing tags' where your text has wrapped round your images in unwanted ways. also set image size to large. this will make blogger use the actual size of the image if under 400x300px, or a maximum of 400x300px, if larger.

so to summarize where we're up to so far:

  • write the draft of your article in a text editor
  • prepare your images in web ready format [max size 800 x 600]
  • create a new empty article in blogger and upload all the images into it in the reverse order they should appear on the page

once you've uploaded all your images, you'll have a nice chunk of HTML code in your blogger article, which will look something like this:

at this point it's time to abandon blogger's shitty interface and return to the saner world of your favourite HTML editor.

i now cut all the HTML image code from the blogger window and paste it into the top of my draft article document in textmate [remembering to set the document mode to HTML, so that i get access to nice syntax colouring and also textmate's excellent HTML editing tools].

image code pasted into my textmate draft:

at this point, this article is going to start reading a bit like an advert for textmate. i apologise in advance for this. i'm not on commission from macromates, nor do i have any links with the company or the developer, i just happen to think that textmate is the dog's bollox, when it comes to text editors on the mac. you may have your own favourites, but let me indulge myself by showing you how easy textmate makes it for me to format up my blog articles.

the first thing i do is put a few linebreaks in between the HTML code for each image. this disnae alter the formatting of the article in any way, as HTML ignores whitespace. but having a bit of whitespace between each image code block makes it easier for me to see where the 'gaps' are between the images, so i can start cutting and pasting the paragraphs of my draft article into the correct positions, relative to the images. at this point i make constant use of textmate's HTML preview window [accessed via [CTRL+ALT+CMD+P ] to make sure i'm cutting and pasting into the proper places. dinnae worry that, at this stage, the layout is all over the place. we've not added any HTML tags to format up the text yet. this part of the exercise is just about getting the various blocks of text and the images in the correct order.

spacing out the image tag blocs, so the dog can see the rabbit:

chopping up the text and inserting it in and around the images:

textmate preview window showing that, although the layout is still all over the show, we're getting all the 'bits' in the right order [BTW - the images in this and a few of the other screenshots are not actually from this article. that's because this article is one of those rare - and confusing! - ones where the article is effectively documenting its own creation. this makes it a bit difficult to include the actual images at some points, without causing huge rents in the space/time continuum. so you'll just have to use your imaginations!]:

now that the text has been cut'n'pasted into the proper order in relation to the accompanying images, it's time to start formatting it up.

i now surround each paragraph of text in <p> ... </p> tags. here textmate's' HTML formatting shortcuts really make the job a breeze. select a paragraph of text and hit CTRL+SHIFT+W this automagically wraps the selected text in HTML tags. by default these are <p> ... </p> tags, so the job's a good 'un. note however that the 'P' of the opening paragraph tag is selected. if i now start typing i can change that 'P' inside the tag to generate any other HTML tag i want. so, if i start typing 'a href='....' the tag will turn into an anchor [or link] tag, instead of a paragraph tag. the really nice thing is that as my typing changes the beginning tag, the end tag automatically changes to match.

hand-coding HTML made easy, the textmate way:

select your block of text:

hit CMD+SHIFT+W and textmate surrounds the text in <p> ... </p> tags

if you dinnae want a paragraph tag, just start typing and textmate will automagically update the tag pair:

but, as i say, i usually start with just adding the paragraph tags, whereupon, textmate's preview window shows that, at last, the article is starting to look readable.

with paragraph tags added the text is now readable enough for a bit of typo-hunting:

at his stage, with my text in a readable format, i usually do the first of many 'read throughs', checking for typos and sentences that are badly worded, even by my semi-literate standards. next, i go back and start adding the icing on the cake, as regards formatting up the rest of the article text; adding bold and italic tags, putting in links and making bulleted lists etc. [incidentally the traditional text formatting commands of CMD+B and CMD+I also work for adding bold and italic tags to selected text, as well as the CTRL+SHIFT+W then type B or I method].

one last textmate trick, before i finish my eulogy and return to getting my article up onto blogger; anyone who's ever hand-coded a list in HTML knows what a ball-ache that can be. with textmate's HTML shortcuts, it's a veritable piece of piss. assume you have a chunk of lines of text which you want to make into a list:

select the block of text:

hit CTRL+SHIFT+CMD+W - this command differs from the regular CTRL+SHIFT+W in that it surrounds each selected line individually in a pair of tags, rather than the selected block as a whole. these tags default to <li> ... </li> which is just what we wanted:

now select your block of text again [this time including the <li> ... </li> tags]:

hit CTRL+SHIFT+W - textmate surrounds the whole block in <p> ... </p> tags:

immediately type UL [or OL if you want an ordered list] - the tags change to <ul> ... </ul>

and there you have it - an HTML list, in less time than it takes to pick your nose. at this point anyone who's ever hand-coded HTML before and lists in particular will appreciate why i tend to get a bit evangelical about textmate on occasions.

one final suggestion although this isnae textmate specific; working in a text editor you can use find and replace to greatly speed up formatting as well:

dinnae forget that the good ol' fashioned find/replace can speed things up too:

OK - back to blogger. by now, thanks to textmate's HTML generating magic, you should have your article formatted up and ready to paste into that empty article you set up previously. proof-read a few times, fix any errors [i usually do this in textmate and then re-paste into blogger again] and then publish your article.

this has been quite a long article and i'm sure more than a few of you will be thinking - 'why go to all that hassle? why not just use blogger's compose mode or one of those desktop WYSIWYG apps like ecto or marsedit?'.

to which my answer is:

blogger's compose mode generates atrociously complicated and proprietory HTML code. if you dinnae care about your code, or the fact that WYS-is-not-quite-WYG then feel free to use it. just pray you never need to hand edit it when something goes wrong!

desktop blogger clients like ecto and marsedit work well up to a point. however they generate completely different image code from that which is generated when you upload images to blogger directly. you may actually prefer ecto or marsedit's image code, as it's more 'traditional' but the blogger image code does integrate better with picasa [which blogger uses to host your images] and which allows your images to be clicked upon to view a full size version [if appropriate]. i've kind of got used to blogger's image code, so that's why i use it as the starting point for hand-crafting my articles.

using a text editor to compose my articles and then pasting the code into blogger means that i have a clean HTML backup saved on my hard drive for every blog article i write. since i also keep the folder of webready images alongside the HTML file, a simple find/replace on the image tags in the HTML file would allow me to recreate a standalone version of that article, if i wanted to publish it elsewhere.

quite apart from these reasons, i actually find it less hassle to compose my articles this way. once you get your head round this way of working, it's actually more efficient and speedier and offers more control, than working in blogger itself or any of the desktop clients i have tried.

* * * * * *

Suntour vintage Accushift Plus index control thumb shifter maintenance

Intro:
Many of you may know them, many still use them on their vintage mountain bike or randonneur and appreciate them because of their low weight and ability to be run in friction mode when the lever or the derailleur are somehow damaged. But as time goes by, and weather and dust keep on having a bad influence on the delicate mechanics inside such a lever, one may feel the need to overhaul the lever to restore correct indexing. This how-to article mainly relies on the pictures that illustrate the complete "clean-lube-adjust" procedure done with a 1991 7-speed Suntour XC ltd. thumb shifter. But this can be applied to all modern Accushift plus indexed shift levers Suntour produced during it´s last few years before it went out of business in the mid-nineties, even the road bike downtube shifters that are mounted on braze-on studs bear the same interchangeable mechanics inside and therefore can serve as a spare part supply (they can be purchased for a small fraction of that money one has to pay for a new out-of-the box NOS "thumbie").


Fig. 1: The thumb shifter (XC ltd. rear derailleur, Accushift Plus 7-speed) connected to the mounting bracket.

 


Fig. 2: The toggle screw removed which also serves the clamping of the friction/index mechanism in order to adjust the friction of the system.

 


Fig. 3: The mechanism inside the lever can be opened by removing a circlip in the recession of the plastic cap assembly using a flat head screwdriver.

 


Fig. 4: The cap assembly opened. The upper part of the friction/index mechanism is visible.

 


Fig. 5: The ball holder plate with the two indexing steel balls. The balls are inserted into the holes in line with the broad inner noses (not the ones marked with an engraved "circle" symbol!).

 


Fig. 6: The indexing cam ring. Seven pits on each side serve as resting points for the two indexing balls. This cam ring still looks good and needs only cleaning.

 


Fig. 6a: This cam ring taken from another thumb shifter (Suntour XC Pro, 8-speed) suffers from massive wear. The shifter was unable to "hold gears" and general shifting performance was poor. Note the "engraved" grooves between the index pits which prevent the correct positioning of the lever.

 


Fig. 6b: The index cam ring can be refurbished by grinding the surface until the grooves have disappeared. The index pits have to be deepened using a dremel tool and a fine abrasive tip.

 


Fig. 6c: The loss of thickness of the index cam ring has to be compensated by an additional washer. I prepared one by cutting and sanding an old credit card type plastic card (white ring inside the lever). During reassembly the new washer is placed under the index cam ring.

 


Fig. 7: An exploded view of all parts of the thumb shifter

 


Fig. 8: After thorough cleaning of all parts they are greased with a ball bearing grease and the lever is reassembled according to fig. 7. The ball holder plate must be inserted like it is shown in this picture. The friction/index cam plate has two areas, one with a pit which engages the friction mode and one with a flat surface which presses the indexing balls against the index cam ring and ensures the latching of the gears. For reassembly i found it suitable to insert the friction/index cam plate in friction position because the pits help to hold the whole mechanism in correct place. After placing of the cap assembly the whole lever can be secured by inserting the circlip. Although there is some special tool for handling circlips, with a little bit of patience and practice this step can be done using two flat head screwdrivers.

 


A cross-section scheme of the parts of the assembled thumb shifter. The blue parts are connected with the plate holder/axis, the black parts move with the lever during shifting, red: the index balls. This scheme also illustrates how the cup spring is assembled the right way.

 

To date i have managed to refurbish three Suntour XC Pro and one XC ltd. index thumb shifter, two of them had fully lost function before performing the touch up. This saved me a large amount of money spent otherwise and i hope this little how-to is of use for some of the folks that still ride Suntour equipped bikes out there. If you have any suggestions or questions concerning this how-to or other Suntour-related topics, feel free to contact me!

* * * * * *

01 July 2009

extreme contrast in photoshop

here's a handy technique for really giving your images some hyper contrast in photoshop.

let's take an image which looks a bit wishy washy and see what we can do to make it a bit more punchy.

here's one i prepared earlier:

traditionally you would up the contrast of an image like this by using photoshop's brightness/contrast slider, either by applying image > adjustments > brightness/contrast directly to the image or, if you're a wee bit smarter and prefer to work non-destructively, by using a brightness/contrast adjustment layer.

applying a brightness/contrast adjustment layer:

let's throw the contrast up full:

layers panel, showing the image with the brightness/contrast adjustment layer applied:

and here you have the final result - our wishy-washy image with the contrast shoved all the way up to 100%:

it's a lot better, but it's not 'hyper-mega-super-eleventy billion 111!!!-contrasty©'.

we could increase the contrast by applying another adjustment layer... and another... and another... but that's a time-consuming way to go about it and it also looks absolutely shite, as the image will very quickly start to almost posterise as you layer on additional contrast layers.

there is a better way and, weird as it may seem, it involves using that old favourite of anyone who's ever brought a scanned image into photoshop and had to sharpen it up; namely the unsharp mask filter.

first of all we need to select our image layer and choose filter > convert for smart filters [smart filters are the filter equivalent of adjustment layers, in that they allow us to piss about with filters in a non-destructive way. the original image remains untouched and the effects of any smart filters we apply can be increased, lessened or removed altogether].

convert the layer for smart filters:

next you need to apply filter > sharpen > unsharp mask to your image:

usually, when using the unsharp mask filter for it's 'regular day job' you'd start with the radius down quite low and the amount up around 50% and start twiddling from there. when using unsharp mask as a 'hyper-mega-super-eleventy billion 111!!!-contrasty©' filter, you start off the other way round.

turn the amount right down to 1% and whack the radius up to somewhere between 80 and 100 pixels:

now start edging the amount slider upwards. as you do so you'll notice that the contrast of your image starts to increase really dramatically. you'll also notice that you've got a helluva lot more contrast to play with as, unlike the traditional contrast slider, which only goes up to 100% - in true spinal tap fashion, the amount slider of the unsharp mask filter goes up to 500%. so you can add far more contrast this way than you can using the actual contrast controls in photoshop.

in the image below, i've knocked the amount up to 134%. that's probably a bit much for this image, as it's starting to bleach out in places, but it gives you an indication of what this technique can do. theoretically i've still got another 366% to play with [although in practice the image will break up before you get anywhere near that level].

amount turned up to 134%:

i eventually went for somewhere about 109%:

as you can see from the comparison below, the unsharp mask filter with the amount slider barely off the starting blocks gives far superior contrast to the brightness/contrast adjustment layer, running at full speed. it's an interesting technique and well worth having a tinker with, if you really want to go for some extreme contrast.

unsharp mask technique [LEFT] - traditional brightness/contrast adjustment layer [RIGHT]:

* * * * * *