Webview

Overview

Webview is a component to display web pages. Why does LetmKara want to display web page while it is just a karaoke player? Because web technology, which includes html, javascript and CSS, allows very fast implementation of user interface and also very beautiful user interface.

LetmKara uses Chromium Embedded Framework (CEF) for rendering web pages. Chromium is the core in Chrome browser. A webview is like a tab in Chrome browser.

Components use Webview

On-screen display (OSD): user interface overlay on video window, shows you which song are playing, seekbar, time, ...
Background: beside image and video as background in video window, Webview can be choosed as background. There are some you can choose, but they are kind of experiments only.
Main window: the graphic interface to search, select song, search youtube, ... is a web page.
Youtube player: youtube player is actually an embedded player in a webview. This approach has flexibility, video quality can change dynamically, depending on your internet speed.
Webview apps: experiments, there are game, youtube-tv, ...

Select OSD theme

I made some themes for OSD: default, christmas and Tet new year.

Choose webview package

To select a theme, go to menu Webview => choose webview packages. Select On-screen display, choose package and click OK. Button Settings is for configuration of the selected webview package. This settings can also be accessed from menu webview => On-screen display => settings.

osd settings

Because Karaoke scoring is just for fun only and requires some visual effects, its settings is placed here instead of in Settings Window.

Select webview as background

Background with webview can be set in Settings Window, tab General. Now they are experiments only.

For now you can choose:

bar visualization: a sound visualization. Work only with audio file. Here how it looks:

webview as background bar visualization

photos slide show: show not just an image but all image in a selected folder. Click on settings to choose folder and other settings for slide show. Here the settings:

Photo slide show settings

Customization

If you have knowledge of web development, especially front-end, you can make your own interface for OSD, main window, background or other webview apps.

For example, this guy changed some image:

Back ...