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.
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)
A great guide from our dear
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.
Latest update with the new layout. No need for an extension anymore. Just standard components.
thanks for posting this!
But as I mentioned here already:
Don’t know why it doesn’t work for you, this is what I get
Edit: Ignore my answers as I figured out why it works for me, a clue using multiple builders
there is no folder / AppInventor anymore.
The correct path to assets for Companion is:
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.
Replaced the block image.
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:
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.
This is a little tutorial on how to use these blocks.
Remember when you use this you have to
option of the webviewer component.
I asked my son
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.
</body> tag in every html file.
and it works as it should.
ebook_template.aia (255.8 KB)
Where is this part of the html? Can’t find it…
The html files are inside the aia as an asset.
I wanted to know where the .js files were implemented in the HTML file,
Oh i see now, i forgot to change the html-files. Did it only for myself.
This has to be added like i said. I will update this guide soon.
Control font size in webviewer
how to change the font size(NOT zoom) in the html file in webviewer using a slider or buttons?
Where is [ebook_template.aia| ? Link didn’t work.