Merge branch 'web_remote' into 'master'

Updated stage view and web remote pages for 2.9.2

Closes #44 and #43

See merge request openlp/documentation!24
This commit is contained in:
Tim Bentley 2021-03-03 07:51:50 +00:00
commit 457c522ea1
47 changed files with 169 additions and 91 deletions

View File

@ -152,6 +152,8 @@ time when saving your service file.
**Note:** If the date and time format does not suit your needs and you are **Note:** If the date and time format does not suit your needs and you are
technically inclined, there is more information at `Python.org`_. technically inclined, there is more information at `Python.org`_.
.. _slide_controller_config:
Slide Controller Slide Controller
^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^
@ -313,6 +315,8 @@ Generic Screen Settings
you only have a single monitor. To close the display window, click on it and you only have a single monitor. To close the display window, click on it and
press the :kbd:`Esc` key. press the :kbd:`Esc` key.
.. _theme_configure:
Themes Themes
====== ======

View File

@ -10,16 +10,16 @@ There is a brief description or link for their intended purpose.
File File
---- ----
|buttons_new| **New:** |buttons_new| **New Service**
Creates a new service. :ref:`new_service` Creates a new service. :ref:`new_service`
|buttons_open| **Open:** |buttons_open| **Open Service**
Load an existing service. :ref:`new_service` Load an existing service. :ref:`new_service`
|buttons_save| **Save:** |buttons_save| **Save Service**
Saves your existing loaded service. Saves your existing loaded service.
**Save As:** **Save Service As:**
Saves your newly created service. Saves your newly created service.
**Recent Files:** **Recent Files:**
@ -28,7 +28,7 @@ File
**Clear List:** **Clear List:**
Clears your recent files list. Clears your recent files list.
**Import:** |buttons_import| **Import:**
This provides the items you can import. This provides the items you can import.
**Settings:** **Settings:**
@ -48,7 +48,7 @@ File
Import Bibles from another program, the internet or a previously exported Import Bibles from another program, the internet or a previously exported
Bible from OpenLP. :ref:`import_bibles` Bible from OpenLP. :ref:`import_bibles`
**Export:** |buttons_export| **Export:**
Provides the items you can export. Provides the items you can export.
**Settings:** **Settings:**
@ -73,10 +73,10 @@ File
View View
---- ----
**Mode:** **Layout Presets:**
These three settings are optimized for setup and live display. These three settings are optimized for setup and live display.
**Default:** **Show all:**
Displays all of the panels of OpenLP. Displays all of the panels of OpenLP.
**Setup:** **Setup:**
@ -87,25 +87,25 @@ View
Clicking on any of the next items will hide or show its respective panel. Clicking on any of the next items will hide or show its respective panel.
|button_mediamanager| **Media Manager:** |button_mediamanager| **Library:**
Hide or show :ref:`library`. Hide or show :ref:`library`.
|button_projectormanager| **Projector Manager:** |button_projectormanager| **Projector Controller:**
Hide or show :ref:`projector`. Hide or show :ref:`projector`.
|button_servicemanager| **Service Manager:** |button_servicemanager| **Service:**
Hide or show :ref:`creating_service`. Hide or show :ref:`creating_service`.
|theme_new| **Theme Manager:** |theme_new| **Themes:**
Hide or show :ref:`themes`. Hide or show :ref:`themes`.
**Preview Panel:** **Preview:**
Hide or show the preview panel. Hide or show the preview panel.
**Live Panel:** **Live:**
Hide or show the live panel. Hide or show the live panel.
**Lock Panels:** **Lock visibility of panels:**
Using this lock will keep all your panel settings the way they Using this lock will keep all your panel settings the way they
are when clicked, whether hidden or showing. Click this again to unlock the are when clicked, whether hidden or showing. Click this again to unlock the
panels. panels.
@ -182,12 +182,16 @@ Help
.. These are all the image templates that are used in this page. .. These are all the image templates that are used in this page.
.. |BUTTONS_NEW| image:: pics/buttons_new.png .. |BUTTONS_NEW| image:: pics/new_service.png
.. |BUTTONS_OPEN| image:: pics/buttons_open.png .. |BUTTONS_OPEN| image:: pics/service_open.png
.. |BUTTONS_SAVE| image:: pics/service_save.png .. |BUTTONS_SAVE| image:: pics/service_save.png
.. |BUTTONS_IMPORT| image:: pics/buttons_import.png
.. |BUTTONS_EXPORT| image:: pics/buttons_export.png
.. |BUTTONS_EXIT| image:: pics/buttons_exit.png .. |BUTTONS_EXIT| image:: pics/buttons_exit.png
.. |THEME_NEW| image:: pics/theme_new.png .. |THEME_NEW| image:: pics/theme_new.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 943 B

After

Width:  |  Height:  |  Size: 323 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 638 B

After

Width:  |  Height:  |  Size: 297 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 278 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 839 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

@ -5,17 +5,15 @@ The Stage View
Stage view gives you the ability to set up a remote computer, netbook or Stage view gives you the ability to set up a remote computer, netbook or
smartphone to view the live service being displayed on the projection screen in smartphone to view the live service being displayed on the projection screen in
an easy to read font on a black background. This is a text only viewer, tough it an easy to read font on a black background. This is a text only viewer, though it
will show thumbnails of images and presentations. will show thumbnails of images and presentations.
The first step is to make sure the Remote plugin is activated. You can accomplish You can configure the settings you use with the web browser. You can find these
this by following the instructions in the :ref:`plugin_list`. The second step is to
configure the settings you will use with the web browser. You can find these
instructions and settings in :ref:`remote_tab`. instructions and settings in :ref:`remote_tab`.
Open a web browser, type in the Stage View URL you found in :ref:`remote_tab` Open a web browser, type in the Stage View URL you found in :ref:`remote_tab`
and press the :kbd:`Enter` key. For this example we will use and press the :kbd:`Enter` key. For this example we will use
\http://192.168.1.73:4316/stage. You will then be presented with the home page \http://192.168.1.112:4316/stage. You will then be presented with the home page
of the OpenLP Stage View. On most browsers you can press F11 to go into of the OpenLP Stage View. On most browsers you can press F11 to go into
fullscreen mode. fullscreen mode.
@ -24,10 +22,14 @@ fullscreen mode.
At the top right hand side you will see the time of day. This can be changed At the top right hand side you will see the time of day. This can be changed
from 12 hour to 24 hour format in :ref:`remote_tab`. If you added a note to the from 12 hour to 24 hour format in :ref:`remote_tab`. If you added a note to the
the song it will be the next line below the time. See :ref:`adding_note` the song it will be the next line below the time. See :ref:`adding_note`
for adding notes. Below the note will be the Bible or song verse numbers and one for adding notes. On the same line as the clock will be the Bible or song
of those will be highlighted. The lyrics or verses highlighted below the verse verse numbers and one of those will be highlighted. The lyrics or verses
numbers correspond to the highlighted verse number. In this example V1 is highlighted below the verse numbers correspond to the highlighted verse number.
highlighted and the corresponding first verse below it is highlighted. In this example V1 is highlighted and the corresponding first verse below
it is highlighted.
At the bottom right had side you will see a :guilabel:`Close` button. Clicking on the
button will close the stage page and open the Web-Remote main page.
If there is an image, presentation or media being displayed you will see the If there is an image, presentation or media being displayed you will see the
title of the displayed item. Below the title will show the next item to be title of the displayed item. Below the title will show the next item to be
@ -44,35 +46,51 @@ html. To create a custom stage view, go to the OpenLP Data Folder by going to
folder names :file:`stages`. Inside the :file:`stages` folder you can now create folder names :file:`stages`. Inside the :file:`stages` folder you can now create
a folder which will be the name of your custom view, an example could be a folder which will be the name of your custom view, an example could be
:file:`myview`. Now copy :file:`stage.html`, :file:`stage.css` and :file:`myview`. Now copy :file:`stage.html`, :file:`stage.css` and
:file:`stages.js` from inside OpenLPs program folder :file:`stages.js` from `Custom Stage View Zip <https://gitlab.com/openlp/wiki/-/wikis/Development/custom_stage.zip>`_
:file:`openlp/plugins/remote/html/`, and customize them to your needs. Remember and customize them to your needs.
to modify :file:`stage.html` to the other files from the custom stage view
folder, for instance :file:`stages/myview/stage.css` for a custom
:file:`stage.css`.
To access the custom stage view in a browser go to http://myopenlpip:4316/stage/myview. To access the custom stage view in a browser go to http://myopenlpip:4316/stage/myview.
.. _main_view: .. _main_view:
The Live View The Main View
============= =============
Live view gives you the ability to set up remote computers that will mirror Main view gives you the ability to set up remote computers that will mirror
what your projector is showing. The Live view basically works by taking what your projector is showing. The Main view basically works by taking
screenshots of what the projector is showing and then presenting it in a screenshots of what the projector is showing and then presenting it in a
browser. This means that audio and video playback will not be presented in the browser. This means that audio and video playback will not be presented in the
Live View. Main View.
The first step is to make sure the Remote plugin is activated. You can accomplish You can configure the settings you use with the web browser. You can find these
this by following the instructions in the :ref:`plugin_list`. The second step is to
configure the settings you will use with the web browser. You can find these
instructions and settings in :ref:`remote_tab`. instructions and settings in :ref:`remote_tab`.
.. image:: pics/live_view_song.png .. image:: pics/live_view_song.png
Open a web browser, type in the Main View URL you found in :ref:`remote_tab` Open a web browser, type in the Main View URL you found in :ref:`remote_tab`
and press the :kbd:`Enter` key. For this example we will use and press the :kbd:`Enter` key. For this example we will use
\http://192.168.1.73:4316/main. You will then be presented with the home page \http://192.168.1.112:4316/main. You will then be presented with the home page
of the OpenLP Live View. On most web browsers you can press F11 to go into of the OpenLP Live View. On most web browsers you can press F11 to go into
fullscreen mode. fullscreen mode.
.. _cord_view:
The Chord View
==============
The Chord view is stage view that displays chords if they are in the songs.
You can configure the settings you use with the web browser. You can find these
instructions and settings in :ref:`remote_tab`.
.. image:: pics/web_remote_cords_adjustment.png
The chords view adds another control for translation of the cords. clicking on
this control will translate the chords up or down an octive.
Open a web browser, type in the Stage View URL you found in :ref:`remote_tab`
and press the :kbd:`Enter` key. For this example we will use
\http://192.168.1.112:4316/chords. You will then be presented with the home page
of the OpenLP Stage View. On most browsers you can press F11 to go into
fullscreen mode.
.. image:: pics/web_remote_cords.png

View File

@ -13,7 +13,7 @@ guest speaker or worship team leader to control their own slides if needed.
The Web Remote was moved to being part of the core program in version 2.9.2. The Web Remote was moved to being part of the core program in version 2.9.2.
The only thing you need to do is go into :ref:`configure`, select the Remote Interface The only thing you need to do is go into :ref:`configure`, select the Remote Interface
item int the menu on the left side of the Settings window then press the item in the menu on the left side of the Settings window then press the
Check for Updates button. If the Current version number is not the same as Check for Updates button. If the Current version number is not the same as
Latest Version then press the Upgrade button. When the numbers match, press the Latest Version then press the Upgrade button. When the numbers match, press the
OK button at the bottom of the settings window. OK button at the bottom of the settings window.
@ -26,16 +26,16 @@ instructions and settings in :ref:`remote_tab`.
Open a web browser, type in the Remote URL you found in :ref:`remote_tab` and Open a web browser, type in the Remote URL you found in :ref:`remote_tab` and
press the :kbd:`Enter` key. For this example we will use press the :kbd:`Enter` key. For this example we will use
\http://192.168.1.73:4316. You will then be presented with the home page of the \http://192.168.1.112:4316. You will then be presented with the home page of the
OpenLP Remote. OpenLP Remote. The picture shows a service with nothing in it.
.. image:: pics/web_remote_start.png .. image:: pics/web_remote_start.png
Service Manager Service Manager
--------------- ---------------
Clicking on :guilabel:`Service Manager` will display the service item list from The web remote opens to the :guilabel:`Service` page and if a service is
the :ref:`creating_service`. loaded, it will display the service item list from the :ref:`creating_service`.
.. image:: pics/web_remote_service.png .. image:: pics/web_remote_service.png
@ -44,38 +44,65 @@ Slide Controller.
You will find the following buttons throughout the web remote interface. You will find the following buttons throughout the web remote interface.
|web_remote_home| The home button is found on most of the pages in the top |web_remote_menu_button| The Menu button is found on most of the pages in the top
left hand corner of the remote interface and clicking it will take you back left hand corner of the remote interface and clicking it will display a menu
to the home page of the OpenLP remote. of the web remote pages and a helpful setting.
|web_remote_refresh| When changes are made on the main computer clicking on |web_remote_menu|
refresh will show the changes in the remote viewer.
|web_remote_blank| Clicking this button will blank the display on the Selecting any of the top five menu items will change the web remote page to
projector screen. Clicking on an item in the Service Manager will the page responsible for that area of the web remote.
automatically show the item on the screen.
Selecting any of the three views will change the web remote page to the default
view selected.
|web_remote_theme| Clicking this button will blank the display on the Enabling the :guilabel:`Fast Switch` setting will display
a set of Icons at the bottom of the page to switch between
pages without using the menu.
|WEB_REMOTE_ICON|
|web_remote_previous_item| This button will move upward through the Service
items to the previous items.
|web_remote_next_item| This button will move downward through the Service
items to the next item.
|web_remote_previous| This button will move upward through the Slide Controller.
If the settings :ref:`slide_controller_config` have been enabled this button will move from the first slide of a
service item to the last slide of the prevoius service item.
|web_remote_next| This button will move you downward through the Slide Controller.
If the settings :ref:`slide_controller_config` have been endables this button will move freom the last slide of a
service item to the next first slide of the next service item.
|web_remote_black| This button will blank the display on the projector screen.
If the settings :ref:`slide_controller_config` have been enabled clicking on an item in
the Service Manager will automatically show the item on the screen.
|web_remote_theme| This button will blank the display on the
projector screen to the current theme. Note that this is not available for projector screen to the current theme. Note that this is not available for
item which does not use themes, such as images, presentations and media. item which does not use themes, such as images, presentations and media.
Clicking on an item in the Service Manager will automatically show the If the settings :ref:`slide_controller_config` have been enabled clicking on an item in
item on the screen. the Service Manager will automatically show the item on the screen.
|web_remote_desktop| Clicking this button will hide the display on the |web_remote_desktop| This button will hide the display on the projector screen
projector screen and therefore show the desktop. Clicking on an item in the and therefore show the desktop. If the settings :ref:`slide_controller_config` have been
Service Manager will automatically show the item on the screen. enabled clicking on an item in the Service Manager will automatically show the item
on the screen.
|web_remote_show| If the screen is blanked, clicking on this button will |web_remote_show_presentation| If the screen is blanked, clicking on this button will
unblank the display. unblank the display.
|web_remote_previous| This button will move you upward through the Service |web_remote_show_service| This button will display the Service page of the web remote.
Manager and Slide Controller.
|web_remote_show_slides| This button will display the Slides page of the web remote.
|web_remote_next| This button will move you downward through the Service
Manager and Slide Controller. |web_remote_show_alerts| This button will display the Alerts page of the web remote.
**Note:** The buttons Blank, Show, Prev and Next are conveniently located on |web_remote_show_search| This button will display the Search page of the web remote.
the top and the bottom of the remote interface to help eliminate scrolling.
|web_remote_show_themes| This button will display the Themes page of the web remote.
Slide Controller Slide Controller
---------------- ----------------
@ -87,14 +114,9 @@ Controller interface.
You will find the verses displayed as they appear in the live view on the main You will find the verses displayed as they appear in the live view on the main
computer and the first verse will be displayed on the projection screen. You can computer and the first verse will be displayed on the projection screen. You can
use the :guilabel:`Prev`, :guilabel:`Next` or click on each verse using the use the |web_remote_previous|, |web_remote_next| or click on each verse using the
mouse to display them. mouse to display them.
.. image:: pics/web_remote_slide2.png
When the slides shown are either images or presentations a small thumbnail will
be shown.
**Note:** The remote interface replicates the OpenLP software. When displaying **Note:** The remote interface replicates the OpenLP software. When displaying
images, clicking on a single image in the service manager will display it images, clicking on a single image in the service manager will display it
immediately. The first image in a group of images and the first slide in a immediately. The first image in a group of images and the first slide in a
@ -104,8 +126,8 @@ web remote service manager.
Alerts Alerts
------ ------
You can send an alert to the projection screen by entering the text in the box You can send an alert to the projection screen by entering the text on the line
and clicking on :guilabel:`Show Alert`. The alert will be displayed as you have and clicking on :guilabel:`Send`. The alert will be displayed as you have
it configured in :ref:`configure_alerts`. it configured in :ref:`configure_alerts`.
.. image:: pics/web_remote_alert.png .. image:: pics/web_remote_alert.png
@ -136,31 +158,61 @@ be displayed below the search button.
.. image:: pics/web_remote_search_complete.png .. image:: pics/web_remote_search_complete.png
After finding the song you searched for, clicking on the song will bring up the After finding the song you searched for, click on :guilabel:`Send Live` to
next screen. immediately display your media on the Live screen. Click on :guilabel:`Add to Service`
to add your media to the bottom of the :ref:`creating_service`.
Theme Manager
---------------
The :guilabel:`Theme` page lets you select a Global or Service level theme. When the theme
changes is dependent on the theme settings under :ref:`theme_configure`. To make
the change take effect on the current Service Item you will need to resend the Service Item
to the Live screen.
.. image:: pics/web_remote_theme.png
Clicking on any item in the Theme Manager will select the theme.
You can select the Theme Level, if you want to see the theme names and how many columns you
want to view on the page.
.. image:: pics/web_remote_search_options.png
Click on :guilabel:`Go Live` to immediately display your media on the projection
screen. Click on :guilabel:`Add to Service` to add your media to the bottom of
the :ref:`creating_service`. Click on :guilabel:`Add & Go to Service` to add
your media to the bottom of the :ref:`creating_service`, and go to the web
remote service manager.
.. These are all the image templates that are used in this page. .. These are all the image templates that are used in this page.
.. |WEB_REMOTE_HOME| image:: pics/web_remote_home.png .. |WEB_REMOTE_MENU_BUTTON| image:: pics/web_remote_menu_button.png
.. |WEB_REMOTE_REFRESH| image:: pics/web_remote_refresh.png .. |WEB_REMOTE_MENU| image:: pics/web_remote_menu.png
.. |WEB_REMOTE_ICON| image:: pics/web_remote_icons.png
.. |WEB_REMOTE_PREVIOUS_ITEM| image:: pics/web_remote_icons_previous_item.png
.. |WEB_REMOTE_NEXT_ITEM| image:: pics/web_remote_icons_next_item.png
.. |WEB_REMOTE_BLANK| image:: pics/web_remote_blank.png .. |WEB_REMOTE_BLANK| image:: pics/web_remote_blank.png
.. |WEB_REMOTE_THEME| image:: pics/web_remote_theme.png .. |WEB_REMOTE_THEME| image:: pics/web_remote_icons_show_background.png
.. |WEB_REMOTE_DESKTOP| image:: pics/web_remote_desktop.png .. |WEB_REMOTE_DESKTOP| image:: pics/web_remote_icons_show_desktop.png
.. |WEB_REMOTE_SHOW| image:: pics/web_remote_show.png .. |WEB_REMOTE_SHOW| image:: pics/web_remote_show.png
.. |WEB_REMOTE_PREVIOUS| image:: pics/web_remote_previous.png .. |WEB_REMOTE_PREVIOUS| image:: pics/web_remote_icons_previous_slide.png
.. |WEB_REMOTE_NEXT| image:: pics/web_remote_next.png .. |WEB_REMOTE_NEXT| image:: pics/web_remote_icons_next_slide.png
.. |WEB_REMOTE_BLACK| image:: pics/web_remote_icons_show_black.png
.. |WEB_REMOTE_SHOW_PRESENTATION| image:: pics/web_remote_icons_show_presentation.png
.. |WEB_REMOTE_SHOW_SERVICE| image:: pics/web_remote_icons_show_service.png
.. |WEB_REMOTE_SHOW_SLIDES| image:: pics/web_remote_icons_show_slides.png
.. |WEB_REMOTE_SHOW_ALERTS| image:: pics/web_remote_icons_show_alerts.png
.. |WEB_REMOTE_SHOW_SEARCH| image:: pics/web_remote_icons_show_search.png
.. |WEB_REMOTE_SHOW_THEMES| image:: pics/web_remote_icons_show_themes.png