Getting Started

How to use loistoTXT

1. Open the admin interface

Here you see quite empty workspace for now. At top there is file menu, where you can create New workspace, Load and Save. Yuo see as well some tabs: song, lyrics, titles and lights. And everything is empty for now.

Lets create some content, so head on and click Manage songs,

2. Manage songs

Manage song opens a new view. Here you can see later all the songs in the loistoTXT. Songs are saved at data/songs as easy to edit json files. You can at this view use the Search to filter the list. Let's create a example song. Go ahead and click New Song.

3. New song-window

Depending on your browser settings, you either see or not see a new popup window, some browsers might as well open a new tab. If you don't see anything, please check your browser settings.

4. Fill in the infos

Next thing is to fill in the song infos. The editor should be easy to use. Use Add part to add more parts to the song and in the part use Add Text.

Each text field takes only up to 2 lines, and visible text area is optimized for line length. Remember as well to fill in filename. I could used uuid's for the songs, but i think setting a filename is easier for read at data directory: data/songs.

Editing

You can remove text block with the trash icon, and duplicate with the copy icon next to the lines. The you can drag'n'drop the elements with move-icon. Undo has 20 steps.

5. Import a song to workspace

We are back at the main window.

1. Click Refresh at the bottom to bring the new songs to the view.
2. Click Import next to the song.
3. Click Close

6. Load song to view

At the view new song is being added. All the songs are in list at the view. Active songs are highlighted with green. You can drag'n'drop to order the songs using the move icon. To activate/load a song to lyrics view, click Play button.

7. Lyrics view

Here you see the songs infos and texts.

Areas

1. Song operate area
2. Preview area
3. Quick controls

8. How to operate lyrics view

You can easily switch the livestream lyrics by just clicking any of the lyrics boxes. Go ahead and click the first one, and you see preview shows the title as well. The preview is actually the same view what goes to OBS later.

1. To switch lyrics, just click on new lyrics box or use the Quick button arrows.
2. To clear the view, click same box again to deselect, or click Clear at the quick buttons.

Linking loistoTXT to OBS

1. Open up the OBS

I assume you have some scenes done already... if not, right click at the scenes-box and create a scene.

1. Click a scene to active
2. Right click at Sources

2. Add brower source

Next select add --> Browser

3. Create source

For the first source you select Create.

You don't have to create no more than 1 browser Source for the text layer. For other Scenes you can just do add existing.

4. Check your nodejs console window

In the nodejs console window you get an IP-address of the app. You'll need next to either type this or copypaste. To copy the text, just select the text and after press enter at keyboard.

5. Browser source properties

Set the URL from your clipboard using ctrl-v, or type the address. Set width and height to match your OBS framesize (see obs settings) Clear everything from Custom CSS-text box. Make sure, that there's not selected: Shutdown source when not visible and refresh browser when scene becomes active

6. Source added, but view is empty!

And this is normal. Same happens when you loadup the project next time as well: Correct order to start up things:

1. (Start QLC+)
2. Start OBS
3. Start loistoTxt

Then go to OBS and select your browser source and click refresh

7. After clicking refresh...

Go to loistoTXT and just use normally the app, the apps are now linked.