Creating and Modifying Views

Basic concept – the two types of information in a TuneLing

Channels: A Channel is a collection of a single type of information, such as lyrics, chords, charts, and more. There is no limit to the number of channels, and every TuneLing will typically have at least a few. A channel is often a variation of another, such as “Guitar with Capo”, and “Guitar without Capo”. Channels are created by TuneLing authors.

Views: A View is the visual layout of what you see while a TuneLing is playing. It is made up of one or more “panes“, each of which displays a single channel’s information. There is no limit to the number of Views in a single TuneLing; every TuneLing will have at least one, and many will have more. Views are always created by TuneLing authors, but can also be created by TuneLing users.

The Views in a TuneLing appear under its name, in the navigation panel on the left side of the app window, under the TuneLings Media LibraryYou can switch between Views at any time, even during playback!

To select a View, it’s best to click to the right or left of its name! If you click on the name itself, you might unintentionally put the text in Editable mode, meaning you can change its name – which you rarely want to do. If you accidentally do this, just click again to the right or left of the name to take it out of Editable mode.

Contextual (popup) menus

Creating and modifying Views is performed primarily by using contextual menus – the menus that “pop up” when you right-click (or Control-click) over a specific object on the screen. Below are explanations for each menu item, in its correct context.

To create a new View

Right-click on the song name in the left-side navigation panel to create a new view from the popup menu. (By default it will be named “A View”, but you can make the name editable by clicking on it once):

Screen Shot 2019 01 15 at 10.51.54 AM 1 In-App HELP Modifying Views


Then select the new View. Its content will be an empty gray rectangle:


Screen Shot 2019 01 15 at 10.55.52 AM In-App HELP Modifying Views

You can delete a View by right-clicking its name, and selecting “Delete View” from it’s popup menu. This can’t be undone, so be careful!

Configuring Views

As illustrated in the image below, when you right-click on a View:

Any pane can be split into two, either horizontally or vertically, whether or not it already has content (i.e. a Channel).

Any pane can be removed whether or not it already has content.

Any pane can have a Channel assigned (or re-assigned) to it.

Assign Channel screen shot In-App HELP Modifying Views

You can adjust the sizes of panes by clicking and dragging the dividing lines between them.

Channel Types

There are several type of channels, each one with its own set of display options. These per-channel-type choices will be visible when you right-click on objects within a pane, as described below.

Instrument Channels

An instrument channel fills a single pane with the neck of an instrument (e.g. guitar or ukulele). Right-clicking directly on an instrument neck adds the following options to the contextual menu:

Show Fret Numbers: Toggles whether or not fret numbers are displayed.

Show Finger Numbers: Toggles whether or not recommended finger numbers are displayed over individual notes.

Auto-Zoom Neck: Toggles between showing the entire instrument neck, or zooming into just the relevant part of the neck, in order to show it more visibly. The segments of the neck that are “zoomed” into are defined by the author, and can change (“move around”) during playback. 

Include Next Chord: Adds the display of the next chord to be played, in a lighter color, along with the current chord. 

Orientation: Selects between displaying the neck horizontally, or vertically (top-down or bottom-up)

Dexterity: Selects between displaying the neck for right-handed or left-handed players.

Capo Chord Naming: Selects between several chord naming styles when capos are in use.

Screen Shot 2019 01 15 at 11.20.16 AM In-App HELP Modifying Views
Sample contextual menu for an instrument channel

Text Channels

A text channel displays either Lyrics, or Annotations, but they function similarly and therefore have the same set of options, as shown below:

Granularity: selects between highlighting (changing color) the current text one word at a time, or one whole line at a time. Annotations are typically treated as whole lines; Lyrics are typically treated as individual words.

Text Justification: Selects between right, left or centered justification for text. Annotations are usually left-justified, and lyrics are usually centered, but this is a matter of personal preference.

Screen Shot 2019 01 15 at 11.48.30 AM In-App HELP Modifying Views
Sample contextual menu for text channels…

Show (Hide) Fonts and Colors: This brings up the typical dialog boxes for font and color selection, as shown below:

Screen Shot 2019 01 15 at 11.54.00 AM In-App HELP Modifying Views

To change colors for any text pane, first click in the pane to select it, then click Text Color, Hilight Color, or BG color in the font selection panel (shown above), to control whether you’re changing the normal text, the highlighted (active) text, or the background color. Then use the color panel to make any changes.


Chart is a composite channel, usually including chord symbols derived from an instrument channel. You can right-click directly over these chords to change some options (such as dexterity), but not as many as in a pure instrument channel.

You can right-click over the white space in a Chart to modify other options, as in this image, explained below:

Chart contextual menu
Sample contextual menu for a Chart…

Show Headers: Toggles the display of the gray area (often containing lyrics) at the top of each row in the Chart.

Number of Rows: Selects how many rows are displayed in the Chart. The maximum number is automatically computed, to prevent attempts to show rows that are too small. (This cannot be modified while audio is playing.) If the number of rows is 1, the chart will automatically scroll horizontally during playback.

Bars Per Row: Selects how many bars are displayed in each row. (This cannot be modified while audio is playing.)

Center Lyrics Within Rows: When lyrics are displayed in row headers, this controls whether lyrics are placed over each bar when they occur, or are centered in the row, as whole lines.

Use colors to show rhythm: Toggles whether or not colored bars are used to indicate the precise time at which chord changes occur. This is a very important and powerful feature, deserving special explanation:

The precise time at which chord changes occur in music is frequently not “on the beat”, but rather “syncopated”, meaning between the beats. It’s not really possible to graphically portray syncopation in a Chart using only chord symbols – they’re too large to be precisely placed when close to each other, and they can cross over bar divisions, or from one row to the next. Instead we use two colors, overlaid onto the “ruler” – the bottom of the row, which is divided into individual beats and sub-beats. The color changes are very precise; each one represents a chord change (or sometimes, rhythmic emphasis of a single non-changing chord). The horizontal position of the chord symbol may be less precise than the ruler, simply for readability. When the chord symbol can’t fit neatly above the color change, it’s still easy to know which chord to play: simply look for the closest chord above a color change (even if the chord appears in the next bar – this is actually very common!). 

Lyrics At Top Of Row: When lyrics are displayed in row headers, this controls whether lyrics appear above or below the main content of each row. The default position is below.

Adjusting Chord Placement In Charts

When a Chart pane is created, its chords are horizontally positioned based on precisely when they occur in time. When there aren’t too many chords in quick succession, and most of those chords occur on the beat, this is visually perfect. But if chords change quickly, they can appear too close together (even “smashing” into each other), or when there is a lot of syncopation, chords can straddle bar lines. While this may be rhythmically correct, it can be hard to read, or just plain ugly.

So you can adjust the horizontal postitions of chords in a Chart pane, to remedy this situation. Generally, these issues are addressed in authoring TuneLings, so they’re usually fixed before you even see them. However, if a user creates a new Chart pane with different dimensions, or changes an existing one, it’s possible that some of these adjusted chords positions will need a bit of re-adjustment. Here’s how to do that, using a simple example.

Observe the three images to the right:

The top image shows the problem – a syncopated chord, straddling a bar line. We’ll move that chord horizontally (in either direction – your choice), so it’s easier to read, but still close to the time when it occurs, a half-beat before the start of the second bar. Here’s how:

  • To select a chord for re-positioning, double-click it, and it will highlight with a gray background, as shown in the second image. Pro Tip: You can select multiple chords at once, by holding down SHIFT while double-clicking. To de-select chords, type SHIFT-Escape, or just play audio.
  • Once the desired chords are selected, type the right or left arrow keys while holding SHIFT or COMMAND, as many times as you need, to re-position the chord(s) to your liking. That’s all you have to do – you can just start playback to de-select them.
  • NOTE: Normally, we don’t want to move chords very far, so chords will “refuse” to move more than about a half-beat outside their bar. To override this, hold down SHIFT and CONTROL while moving chords, and you’ll be able to move them as far as you want.
Misplaced Chord 1 In-App HELP Modifying Views
Chord straddling bar line (ugly!)…
Misplaced Chord Grayed In-App HELP Modifying Views
Chord highlighted for re-positioning…
Corrected Chord In-App HELP Modifying Views
Chord after re-positioning.

Web Lyrics

TuneLings can display lyrics two ways. When we have consent to display lyrics from the song’s publisher, we show them as a customized Text Channel, as described above. These lyrics will be nicely formatted, with changeable fonts and colors, Karaoke-style highlighting as each word or line is sung, and will automatically scroll as the music plays.

When we are not licensed to display lyrics, we can still show them by embedding a page of lyrics from a licensed external website. These lyrics aren’t as nice – they don’t highlight or scroll, but are often adequate. When we use “web lyrics” pages, the contextual menu will include simple Web navigation functions, such as “Reload“, or “Back“, as in any normal web browser. You’ll rarely need these, but if you accidentally click on an ad, or other unwanted content in such a lyrics page, you’ll want that “Back” function to return to the previous page (as shown below).

Screen Shot 2019 01 15 at 1.41.22 PM In-App HELP Modifying Views

Miscellaneous notes

Some changes to Views won’t take effect until you resume audio playback.

All changes to Views will be automatically saved when you quit the TuneLings application.