ch09: Added automatic screenshots

docs/ch09-shapes/animations.md

@@ -2,7 +2,7 @@
 
 One of the nice aspects of using Qt Quick Shapes, is that the paths drawn are defined directly in QML. This means that their properties can be bound, transitioned and animated, just like any other property in QML.
 
-TODO SCREENSHOT FILMSTRIP
+![](./assets/automatic/animation.png)
 
 In the example below, we reuse the basic shape from the very first section of this chapter, but we introduce a variable, ``t``, that we animate from ``0.0`` to ``1.0`` in a loop. We then use this variable to offset the position of the small circles, as well as the size of the top and bottom circle. This creates an animation in which it seems that the circles appear at the top and disappear towards the bottom.
 

docs/ch09-shapes/basics.md

@@ -4,7 +4,7 @@ The shape module lets you create arbitrarily paths and then stroke the outline a
 
 In the example below, the path shown in the screenshot here is created. The entire figure, all five filled areas, are created from a single path which then is stroked and filled.
 
-TODO SCREENSHOT OF BASIC
+![](./assets/automatic/basic.png)
 
 <<< @/docs/ch09-shapes/src/shapes/basic.qml#global
 

docs/ch09-shapes/gradients.md

@@ -4,7 +4,7 @@ A shape can be filled in a number of different ways. In this section we will hav
 
 Qt Quick Shapes provides two filling rules controlled using the ``fillRule`` property of the ``ShapePath`` element. The different results are shown in the screenshot below. It can be set to either ``ShapePath.OddEvenFill``, which is the default. This fills each part of the path individually, meaning that you can create a shape with holes in it. The alternative rule is the ``ShapePath.WindingFill``, which fills everything between the extreme endpoints on each horizontal line across the shape. Regardless of the filling rule, the shape outline is then drawn using a pen, so even when using the winding fill rule, the outline is drawn inside the shape.
 
-TODO SCREENSHOT OF FILLMODE
+![](./assets/automatic/fillmode.png)
 
 The examples below demonstrate how to use the two fill rules as shown in the screenshot above.
 
@@ -13,7 +13,7 @@ The examples below demonstrate how to use the two fill rules as shown in the scr
 
 Once the filling rule has been decided on, there are a number of ways to fill the outline. The various options are shown in the screenshot below. The various options are either a solid color, or one of the three gradients provided by Qt Quick.
 
-TODO SCREENSHOT OF GRADIENTS
+![](./assets/automatic/gradients.png)
 
 To fill a shape using a solid color, the ``fillColor`` property of the ``ShapePath`` is used. Set it to a color name or code, and the shape is filled using it.
 

docs/ch09-shapes/paths.md

@@ -2,11 +2,9 @@
 
 As we saw in the last section, shapes are built from paths, which are built from path elements. The most common way to build a path is to close it, i.e. to ensure that it starts and ends in the same point. However, it is possible to create open paths, e.g. only for stroking. When filling an open path, the path is closed by a straight line, basically adding a ``PathLine`` that is used when filling the path, but not when stroking it.
 
-TODO CONFIRM THE STATEMENT ABOVE
-
 As shown in the screenshot below, there are a few basic shapes that can be used to build your path. These are: lines, arcs, and various curves. It is also possible to move without drawing using a ``PathMove`` element. In addition to these elements, the ``ShapePath`` element also lets you specify a starting point using the ``startX`` and ``startY`` properties.
 
-TODO SCREENSHOT FROM PATHS
+![](./assets/automatic/paths.png)
 
 Lines are drawn using the ``PathLine`` element, as shown below. For creating multiple independent lines, the ``PathMultiline`` can be used.
 

docs/ch09-shapes/src/screenshots.qml

@@ -0,0 +1,134 @@
+/*
+Copyright (c) 2012-2021, Juergen Bocklage Ryannel and Johan Thelin
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without 
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, 
+   this list of conditions and the following disclaimer in the documentation 
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software 
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+import QtQuick
+
+// qmllint disable
+Item {
+    id: root
+
+    ListModel {
+        id: sourcesModel
+        ListElement { source: "shapes/animation.qml"; name: "animation.png"; margin: 0; }
+        ListElement { source: "shapes/basic.qml"; name: "basic.png"; margin: 0; }
+        ListElement { source: "shapes/fillmode.qml"; name: "fillmode.png"; margin: 0; }
+        ListElement { source: "shapes/gradients.qml"; name: "gradients.png"; margin: 0; }
+        ListElement { source: "shapes/paths.qml"; name: "paths.png"; margin: 0; }
+   }
+
+    property int p: 0
+    property string assetsource: ""
+    property string assetname: ""
+    property int shootmargin: 0
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.rightMargin: 1
+        anchors.bottomMargin: 1
+
+        border.color: "lightGray"
+        border.width: 1
+
+        Loader {
+            id: loader
+
+            x: 1; y: 1
+
+            focus: true
+
+            onLoaded: {
+                if (loader.source != "") {
+                    if (root.assetsource.indexOf("ss-") == -1) {
+                        root.setSize(loader.item.width, loader.item.height)
+                        root.shoot()
+                    }
+                }
+            }
+        }
+    }
+
+    function setSize(w,h)
+    {
+        loader.x = shootmargin
+        loader.y = shootmargin
+        root.width = w + 2 + shootmargin * 2
+        root.height = h + 2 + shootmargin * 2
+    }
+
+    function shoot()
+    {
+        shootDelay.start()
+    }
+
+    function shootWithDelay(d)
+    {
+        shootDelay.interval = d
+        shoot()
+    }
+
+    Timer {
+        id: shootDelay
+        interval: 100
+        repeat: false
+        onTriggered: root.takeScreenshot()
+    }
+
+    Component.onCompleted: {
+        prepareScreenshot()
+    }
+
+    function prepareScreenshot()
+    {
+        shootDelay.interval = 100
+        console.log("SS: " + p)
+        assetsource = sourcesModel.get(p).source
+        assetname = "../assets/automatic/" + sourcesModel.get(p).name
+        shootmargin = sourcesModel.get(p).margin
+        p += 1
+        loader.source = assetsource
+        console.log("    " + assetname)
+        console.log("    " + loader.source)
+    }
+
+    function takeScreenshot()
+    {
+        console.log("TS: " + assetname)
+
+        shorty.shootFull(assetname)
+        if (p < sourcesModel.count)
+        {
+            loader.source = ""
+            prepareScreenshot()
+        }
+        else {
+            Qt.quit()
+        }
+    }
+}

scripts/make-screenshots.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -e
+
+SCREENSHOTS=$(find -name screenshots.qml)
+
+for SS in $SCREENSHOTS
+do
+    SSD=$(dirname $SS)
+    pushd $SSD > /dev/null
+    shorty screenshots.qml
+    popd > /dev/null
+done