Help and Controls

The user interface is very much in the experimental stage at the moment here are some controls to get you started.

The editor

Click 'New Song' on the right to create a new song. The text which appears should help you to work out how the formatting works. Each verse should start with 'v' followed by a number follow by a colon e.g. v1:

After the verse marker there should be a new line (make sure there are no hidden spaces after the colon). After a verse marker chords go on odd lines and words go on even lines. Chords appear in red and words appear in black. If your words appear red this means you are entering them on the wrong line. When you start a new verse you should see that a blue border around the previous verse this means the the verse has been recognised. When you have finished entering the song hit the 'save' button on the right. The first line of the song should now appear in the song selector on the right. To edit a song click the song title then you should be able to edit it in the left panel and save it.

You can add a copyright notice by staring a line with the word 'copy' followed by a colon and a new line e.g.

copy:
John Green, Recent Rainfall 2002

Thanks John for letting us use your songs. If you play these songs in church please be sure to keep a record of it in the CCLI log. Though Recent Rainfall release their songs and lyrics free they can still get paid when people use their songs. I think this is a good model for other Christian artists to consider. By releasing their chords free their music spreads further. The further it spreads the more Churches use it. The CCLI is a fixed cost licence so it does not cost churches that have the licence any extra money to sing John's songs. At the same time John is not restricting anyone who does not have the licence from singing his songs.

Song display

Top right menu

mouseover lyrics - to hide chords and display lyrics only
mouseover chords - to display chords lyrics
mouseover the song select to bring up a list of stored songs then click the one you want.

Keys

normal number keys (1,2,3 etc) display a verse
'0' displays whole song
number pad '0' for previous verse
number pad 'enter' for next verse (this is so you can control it with your foot using a USB number pad while playing a guitar with your hands).

Scroll Mode

Allows you to scroll through a long song with you foot on a mouse while playing the guitar. If your mouse is at the top of the page the top of the song is displayed if your mouse is at the bottom then the bottom of the song is displayed

For coders

If you want to control the look of song then take a look in the source code for normal.html and find the line

var ss_style=createStyle({'verse':0,
    'verse-size':'max-size',
    'chords':'visible','height':.9,
    'xoffset':0,'valign':'middle',
    'verse-css':{'border':'0px solid black',
    'text-shadow':'grey 0.02em 0.02em 0.2em'},
//    'overscan-image':'giants.jpg',
//    'overscan-video':'thistle.ogg',
    'overscan-css':{'opacity':0.1},
    'line-css':{'color':'black'},
    'chord-css':{'color':'red'},
    'song-css':{'text-align':'center'}
    });

This line controls how the song is styled. In the image and video demos this is the only line that changes. In the future styles will be updated through a graphical style editor on a different screen and injected via AJAX. However if you want to have a play this is the best place to start. Below is a list of what the parameters mean:

'verse': which verse to display 0 means whole song 1 means verse 1
'verse-size' :
- 'max-size': verse will appear as large as possible
- 'constant': narrow and wide verses will have the same font size
- 'scroll': song will fill width off the page with the rest of the song visible by scrolling the mouse
'chords': 'visible' | 'hiddden'
'width': fraction of the screen width (as a decimal fraction) that can be used to disply the song. e.g. 0.9 would give a minimum border of 5% left and right.
'height': fraction of the screen height (as a decimal fraction) that can be used to disply the song. e.g. 0.9 would give a minimum border of 5% top and bottom.
xoffset: fraction of the screen width to offset song by e.g. .5 would be half the screen width
yoffset: fraction of the screen height to offset song by e.g. .5 would be half the screen height
'valign': 'top' | 'middle' |'bottom' - within the border and offset should text be aligned with the top middle or bottom of its box
'verse-css' : each verse is in a div with the class set to verse. This tag allows you to set the verse css e.g. font-size, color, background-image, text-align, opacity etc not every value will make sense but this is really powerful. Uses the same syntax as mootool element.setStyles()
'chord-css': as above but for chords e.g. set chord color {'color':'blue'}
'line-css': as above but for lines e.g. set line color {'color':'#bbb'}
'song-css': as above but for songs e.g. set background color {'background-color:'#bbb'}
'overscan-image' : url of a background image you want to fill the background
'overscan-image' : url of a background looped video you want to fill the background
'overscan-css' : If background images are too high contrast it can be hard to read text adding opacity and a background-color can help make the text readable. e.g. for an image or video half faded to black:
{'background-color':'#000','opacity':0.5}

songserve