Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic storybook - No audio #596

Open
davidmoore1 opened this issue Jun 10, 2024 · 3 comments · May be fixed by #645
Open

Basic storybook - No audio #596

davidmoore1 opened this issue Jun 10, 2024 · 3 comments · May be fixed by #645
Assignees
@gmjgeek

Comments

@davidmoore1
Copy link
Contributor

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:
noaudioportrait

Landscape mode:
NoaudioLandscape

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

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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:
storybookborder

@davidmoore1 davidmoore1 mentioned this issue Jun 10, 2024
Open
@davidmoore1
Copy link
Contributor Author

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)
Simulator Screenshot - iPhone 15 - 2024-06-10 at 15 18 20

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:

Screenshot 2024-06-10 at 3 21 04 PM

@gmjgeek gmjgeek self-assigned this Jul 17, 2024
@gmjgeek gmjgeek moved this from No Status to In Progress in 2024 Summer Interns - PWA Jul 17, 2024
@gmjgeek gmjgeek linked a pull request Jul 19, 2024 that will close this issue
Draft
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gmjgeek gmjgeek

Labels
None yet
Projects
2024 Summer Interns - PWA
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Basic Storybook gmjgeek/appbuilder-pwa
2 participants
@davidmoore1 @gmjgeek