Easy way to make an e-book

This is what i think the easiest way to make an e-book with Kodular.

Make a design with just a webviewer and a sidemenulayout. Webviewer is fill parent in height and width.

Use the following blocks.


Selection_999(681)

The comments tell what each block does. No need for an extension, all made with the basic components of Kodular.

In the on menu item click the webviewer home url block is loaded with the html file that matches the index number of the item clicked.

So Chapter 1 is index 1 is 1.html, Chapter 2 is index 2 is 2.html, etc etc etc.

A lot of things could be added like image in the menu items or more then one group of chapters, etc etc but that is up to you.

Have fun experimenting.

ebook_template.aia (254.8 KB)

24 Likes

A great guide from our dear @Peter
:grin:

5 Likes

Because of the problems some users have with the webviewer component after the update i tested this again and it is still working for me.

1 Like

Latest update with the new layout. No need for an extension anymore. Just standard components.

Hi Peter,

thanks for posting this!

But as I mentioned here already:


there is no folder /AppInventor anymore.

The correct path to assets for Companion is:
file:/mnt/sdcard/Makeroid/assets/ or:
file:/storage/emulated/0/Makeroid/assets/


Anke
1 Like

Yes i know. But with this you can still use the AppInventor path. I deleted all the folders on my phone from AppInventor and Makeroid and tried the AppInventor path. Maybe there is a difference between the webviewer url and other components that use a path.

I tested it just yet. Deleted my Makeroid folder and no AppInventor folder present. I run the app in the companion and a Makeroid folder is created but the AppInventor path still works.

Although it still works to use the AppInventor path i changed it to the Makeroid path. :+1:
Replaced the block image.

Strange!
For me the AppInventor path is not working, tested on:

  • Galaxy Note 8 (Android 9)
  • Galaxy Note 5 (Android 5)
  • Galaxy S6 (Android 7)
  • Xiaomi Redmi Note 5 (Android 9)
  • OnePlus 6 (Android 9)

Only this path works:
file:///storage/emulated/0/Makeroid/assets/

1 Like

Yep it is:sunglasses:

I have a little update on this guide. I wanted to save the chapter and position on the html file i am reading. There were several things i was thinking about but choose to use these blocks.

image

This is a little tutorial on how to use these blocks.

https://appinventor.mit.edu/explore/ai2/webview-javascript

Remember when you use this you have to Enable Javascript option of the webviewer component.
image

I asked my son @Bart to help me with the javascript or to be honest to make it for me. :crazy_face:

Selection_999(1045)

It sets and gets the position on the html page using the web view string blocks.

These are all the blocks used now in the aia file.

I use a tinyDB to store the chapter and the position on the html page. Storing the chapter is executed when changing chapters. Storing the position happens when the On App Pause block is executed.

Just had to add some blocks, a javascript file to the assets and just add this script tag before the </body> tag in every html file.
image

and it works as it should.

ebook_template.aia (255.8 KB)

6 Likes

Where is this part of the html? Can’t find it…

The html files are inside the aia as an asset.

1 Like

I wanted to know where the .js files were implemented in the HTML file,

or aren’t they? but then where is the part of code for retrieving them? (Too new to HTML and JavaScript :grimacing:)

1 Like

Oh i see now, i forgot to change the html-files. Did it only for myself. :crazy_face:

This has to be added like i said. I will update this guide soon.

image

Control font size in webviewer

how to change the font size(NOT zoom) in the html file in webviewer using a slider or buttons?

Explore the webviewstring function