Today we want to talk about our progress so far on PocketBible for Windows. At this point in the project, it’s difficult to show everything we’ve been working on because a lot of it is “under the hood” or “behind the scenes”. It’s related to how PocketBible accesses its files, or the server, or the database where your user data is stored. These are all hard to demonstrate.
But we’re at the point where there are a few things we can demonstrate, and you can see them in the video above. I’ll also briefly describe them here for those of you who, like me, don’t like to watch videos.
We’re trying to make PocketBible more tablet and touch friendly. We’ve taken ideas from our iOS and Android apps. You’ll notice in PocketBible for Windows that the toolbar buttons are a little bigger than they might be in a typical app. This is to accommodate the touch/tablet environment.
The toolbar at the top of the screen is reconfigurable. You can drag buttons onto and off the toolbar from the Preferences screen.
The toolbar on the left side controls the features of the Study Panel. This is where we display your bookmarks, highlights, notes, search results, etc. In particular today, we demo the note editor. We can style text and paragraphs as you might expect, though your edits are not yet saved to the database. You can edit your notes in a plain-text editor if you’re comfortable working around the HTML tags that control the appearance of your notes.
We have a lot of the features related to display books implemented. There’s no “navigation” features yet, but you can scroll through them and see both text and images.
We’ve been doing a lot of work on the Library functions. This is how you download and open books. You can view a list of books installed on the device or books that you own (your Cloud Library account). You can view the lists in a “gallery” format or in a “list” format.
Clicking on a book in the Cloud Library causes it to be downloaded. Clicking on books in your Device Library opens them. You’ll see a progress indicator as you download books, and you can select multiple books to download them all at the same time.
You can choose to see only Bibles, only dictionaries, only commentaries, etc. You can also search for a book by typing a portion of its name in the search field.
There are a limited number of display format preferences implemented. You can currently choose a font, font size, line spacing, and some other options. You can choose from one of several color schemes, including a “dark mode” scheme, and you can create a custom color scheme by choosing colors for each of a couple dozen different elements of the display.
There’s more going on behind the scenes that are hard to demonstrate, and there a lot of things visible on the screen that are really just placeholders. Anything you see on the screen currently could change at any point before release.
About Our Development Tool Set β Electron
I’ve been talking about our innovative, new development environment since before we started coding on the project. I want to explain that in more detail at this point. If you’re not interested in the technical side of what we do, you can probably just jump to the end at this point. π
We’re using a tool called Electron to develop the Windows version of PocketBible. Electron is a framework for creating native applications using Web technologies like JavaScript, HTML, and CSS. It combines node.js (a JavaScript run-time environment) and the Chromium engine (the guts of the Chrome browser built into the app). This allows us to write our code in JavaScript and create our user interface using HTML and CSS just like we would on a website. It wouldn’t be incorrect to describe this as a website running on an embedded Web server inside a Windows executable.
A lot of programs you are already familiar with are implemented using Electron, like VS Code, Facebook Messenger, WhatsApp, Twitch, and Microsoft Teams. We’re encouraged by the fact that Microsoft seems to be committed to this tool set.
This lets us leverage what we know about website design as we design the user interface and write the app.
We can actually use the Chrome developer tools just like you would in your browser to debug the app. We can explore the user interface, set breakpoints in our code, and examine the values of variables β all using tools we’re familiar with from Web development.
Using Electron allows us to use our Macs for Windows development. The video above was shot on a Mac. That’s why you don’t see a menu bar in the app β on a Mac the menu for the active app is displayed at the top of the screen, not in the app’s window. Being able to run the app on a Mac is a real benefit to us since we’re 100% Mac OS here. We use it for Android, iOS, and Mac development. When necessary, we have Windows running on our Macs under Parallels so that we can use Windows apps. But we try to avoid it as much as we can. π
So that’s where things stand as of early February. You can post questions below or send them to [email protected] and they’ll make sure I see them and can respond.
Brief demo of multiple panes. See comments below.