Branding: expand documentation

- Auto-advance the default presentation
 - Add more example slides to the fancy presentation
 - Expand README.md explaining what the default classes can do
This commit is contained in:
Adriaan de Groot 2018-03-08 12:57:50 +01:00
parent e7849c5ed0
commit 8125698696
3 changed files with 78 additions and 1 deletions

View File

@ -28,9 +28,67 @@ There are two examples of branding content:
the default Calamares icons and a as start-page splash it provides a the default Calamares icons and a as start-page splash it provides a
tag-cloud view of languages. The slideshow is a basic one with a few tag-cloud view of languages. The slideshow is a basic one with a few
slides of text and a single image. No translations are provided. slides of text and a single image. No translations are provided.
- `fancy/` uses translations and offers navigation arrows. These are
provided by the standard Calamares QML classes.
- `samegame/` is a similarly simple branding setup for Generic Linux, - `samegame/` is a similarly simple branding setup for Generic Linux,
but instead of a slideshow, it lets the user play Same Game (clicking but instead of a slideshow, it lets the user play Same Game (clicking
colored balls) during the installation. The game is taken from the colored balls) during the installation. The game is taken from the
QML examples provided by the Qt Company. QML examples provided by the Qt Company.
- `fancy/` uses translations and offers navigation arrows.
Since the slideshow can be **any** QML, it is limited only by your designers
imagination and your QML experience. For straightforward presentations,
see the documentation below.
## Presentation
The default QML classes provided by Calamares can be used for a simple
and straightforward "slideshow" presentation with static text and
pictures. To use the default slideshow classes, start with a `show.qml`
file with the following content:
```
import QtQuick 2.5;
import calamares.slideshow 1.0;
Presentation
{
id: presentation
}
```
After the *id*, set properties of the presentation as a whole. These include:
- *loopSlides* (default true) When set, clicking past the last slide
returns to the very first slide.
- *mouseNavigation*, *arrowNavigation*, *keyShortcutsEnabled* (all default
true) enable different ways to navigate the slideshow.
- *titleColor*, *textColor* change the look of the presentation.
- *fontFamily*, *codeFontFamily* change the look of text in the presentation.
After setting properties, you can add elements to the presentation.
Generally, you will add a few presentation-level elements first,
then slides.
- For visible navigation arrows, add elements of class *ForwardButton* and
*BackwardButton*. Set the *source* property of each to a suitable
image. See the `fancy/` example. It is recommended to turn off other
kinds of navigation when visible navigation is used.
- To indicate where the user is, add an element of class *SlideCounter*.
This indicates in "n / total" form where the user is in the slideshow.
- To automatically advance the presentation (for a fully passive slideshow),
add a timer that calls the `goToNextSlide()` function of the presentation.
See the `default/` example -- remember to start the timer when the
presentation is completely loaded.
After setting the presentation elements, add one or more Slide elements.
The presentation framework will make a slideshow out of the Slide
elements, displaying only one at a time. Each slide is an element in itself,
so you can put whatever visual elements you like in the slide. They have
standard properties for a boring "static text" slideshow, though:
- *title* is text to show as slide title
- *centeredText* is displayed in a large-ish font
- *writeInText* is displayed by "writing it in" to the slide,
one letter at a time.
- *content* is a list of things which are displayed as a bulleted list.
The presentation classes can be used to produce a fairly dry slideshow
for the installation process; it is recommended to experiment with the
visual effects and classes available in QtQuick.

View File

@ -24,6 +24,7 @@ Presentation
id: presentation id: presentation
Timer { Timer {
id: advanceTimer
interval: 5000 interval: 5000
running: false running: false
repeat: true repeat: true
@ -60,4 +61,6 @@ Presentation
Slide { Slide {
centeredText: "This is a third Slide element." centeredText: "This is a third Slide element."
} }
Component.onCompleted: advanceTimer.running = true
} }

View File

@ -93,4 +93,20 @@ Presentation
} }
centeredText: qsTr("This is a fourth Slide element.") centeredText: qsTr("This is a fourth Slide element.")
} }
Slide {
title: qsTr("Slide number five")
writeInText: qsTr("This is example branding for your GNU/Linux distribution. " +
"Long texts in the slideshow are translated and word-wrapped appropriately. " +
"Calamares is a distribution-independent installer framework. ")
}
Slide {
title: qsTr("Slide number five")
content: [
qsTr("Welcome to Fancy GNU/Linux."),
qsTr("This is a customizable QML slideshow."),
qsTr("This is a third Slide element.")
]
}
} }