Basic storybook - No audio

[davidmoore1]

Storybooks are books that have a picture on each page and text that goes with it. In the more complex versions that will be covered in other issues, it can have audio playing, automatic page advancement, and Ken Burns type of motion on the images. For the initial simplest case, PWA needs to support picture books without audio or motion. Each page has a text and a picture defined. The view changes depending upon whether the app is being viewed in landscape mode or portrait mode. In portrait mode, the picture is displayed at the top of the screen and the text is viewed in the bottom of the screen. In landscape mode, it only displays the picture as a full screen image.

Portrait mode:

Landscape mode:

As with the scripture books, double tapping the screen changes it to full screen mode (and back)

Advance from page to page as you would with the scripture paging. Text for the first page of this book (which is displayed above)

\id 005
\toc2 No Audio

\page 1 
\img image1.jpeg
\m One day, Peter asked Jesus, “Master, how many times should I forgive my brother when he sins against me?  Up to seven times?” 
\m Jesus said, “Not seven times, but seventy times seven!” 
\m By this, Jesus meant that we should always forgive. Then Jesus told this story.

Besides the \img and \m markers, for img url and paragraph, the following entries may also be present: \video followed by the video file name \b blank line paragraph \pc - centered paragraph \pr - right justified paragraph

\s1 Heading 1 \s2 Heading 2 \s3 Heading 3

Configuration for a non audio storybook:

        <book id="005" type="story">
            <n>No Audio</n>
            <v>NA</v>
            <ct c="9" />
            <cn value="1-9" />
            <font-choice type="book-collection" />
            <f>UnfaithfulServant2.usfm</f>
            <audio-story-book mode="single-file" />
            <page num="1">
                <image-filename>UnfaithfulServant2-image1.jpeg</image-filename>
            </page>
            <page num="2">
                <image-filename>UnfaithfulServant2-image2.jpeg</image-filename>
            </page>
            <page num="3">
                <image-filename>UnfaithfulServant2-image3.jpeg</image-filename>
            </page>
            <page num="4">
                <image-filename>UnfaithfulServant2-image4.jpeg</image-filename>
            </page>
            <page num="5">
                <image-filename>UnfaithfulServant2-image5.jpeg</image-filename>
            </page>
            <page num="6">
                <image-filename>UnfaithfulServant2-image6.jpeg</image-filename>
            </page>
            <page num="7">
                <image-filename>UnfaithfulServant2-image7.jpeg</image-filename>
            </page>
            <page num="8">
                <image-filename>UnfaithfulServant2-image8.jpeg</image-filename>
            </page>
            <page num="9">
                <image-filename>UnfaithfulServant2-image9.jpeg</image-filename>
            </page>
            <features type="book">
                <e name="show-chapter-numbers" value="no" />
                <e name="lock-orientation" value="none" />
                <e name="show-border" value="inherit" />
                <e name="story-image-max-height" value="45" />
                <e name="show-in-book-selector" value="inherit" />
                <e name="show-verse-numbers" value="inherit" />
            </features>
            <images type="illustration">
                <image width="410" height="230">image1.jpeg</image>
                <image width="410" height="230">image6.jpeg</image>
                <image width="410" height="230">image7.jpeg</image>
                <image width="410" height="230">image8.jpeg</image>
                <image width="410" height="230">image4.jpeg</image>
                <image width="410" height="230">image5.jpeg</image>
                <image width="410" height="230">image9.jpeg</image>
                <image width="410" height="230">image2.jpeg</image>
                <image width="410" height="230">image3.jpeg</image>
            </images>
        </book>

Note that the size of the illustration may need to be adjusted by the "Resize the image files to reduct the app size" in Media/illustrations in SAB. (features resize-illustrations-width if resize-illustrations is true). This may also be overridden at the book level

[davidmoore1]

The text area is a scrollable view. The text may exceed the area that's visible. If it does, the user can scroll through the text. The picture remains on the screen as it is with only the text scrolling.

[davidmoore1]

I was going to make a separate about borders, but it seems to small. If borders are defined and active for this book, then the border is displayed around the text window in portrait view. It does not appear in landscape view at all:

[davidmoore1]

Besides the codes mentioned above, ordered and unordered lists are also supported. An example screen would be as follows (even though it makes no sense in context)

The source text for that screen would be:

\img image2.jpeg

\s1 The Story
\s2 Unmerciful Servant
\m Jesus said, “The kingdom of God is like a king who wanted to settle accounts with his servants. One of his servants owed a huge debt worth 200,000 years' wages.”
\zuli1 One
\zuli1 Two
\zuli1 Three
\b 
\zon1 1
\zoli1 One
\zoli1 Two 
\zoli1 Three
\b 
\zon1 7
\zoli1 Test
\zoli1 Test 2
\b 

The html for that screen in the app would be: