The Open App Library Project

Building an Open-Source Evernote Alternative: January 2019 Update

Tue, 22 Jan 2019 11:30:00 +0000

The Desktop App

Demo video: This video shows various features of the desktop app. Music by Kevin MacLeod (incompetech.com) under Creative Commons 3.0. Please excuse any flicking in the recording. I should’ve used SimpleScreenRecorder to avoid that problem.

There have been many improvements made in the desktop app. Let’s go over them.

Big performance upgrade

One change that I am very excited about is not actually noticeable - which is a good thing! The note list widget used to use a custom widget for each note in the list - via Qt’s setIndexWidget function.

This wouldn’t cause a major problem until you have hundreds of notes. At that point the app would use more memory (Still way, way less than an Electron app following best practices, haha.) and you would notice a delay when switching between different filtered note views - “All Notes”, “Favorited”, “Notebooks”, “Tags”.

Thanks to the helpful people at the Qt forum I found out that it wouldn’t be too hard to migrate my code to a much more efficient display model - By sub-classing QStyledItemDelegate.

Now, instead of creating custom widgets which take time initializing, the note list items are painted using QPainter, which “performs low-level painting on widgets and other paint devices.”, according to the docs.

Commit c139b824

A C++ API to interact with the back-end API

Qt-Vibrato-Cloud-API-Library was created to provide a C++ API for connecting to the Note Sync Server.

It is essentially complete minus the code for client-side encryption and decryption. That will come soon.

Now I am focusing on using the Qt-Vibrato-Cloud-API-Library in conjunction with the desktop app to sync notes to the cloud.

The back-end API / sync-server has a lot more functionality

A ton of progress was made on the back-end. When the server runs, there is now API documentation available at {SERVER_URL}/docs.

Thanks to the Django Rest Framework it was quite easy to add useful features to the REST API such as sorting & filtering - As an example, you can sort by notes from oldest-to-newest using the URL {SERVER_URL}/notes?ordering=date_created.

The supported authentication types are token authentication and OAuth2. You could generate a token for your account via the URL, {SERVER_URL}/users/login and use HTTP Basic Authentication with your user credentials. Tokens last for 30 days. You also can use the URL {SERVER_URL}/users/logoutall to delete all of your tokens.

Various changes were made to the database model.

sync_hash was added to provide a unique “fingerprint” to all of your notes, notebooks and tags. Why not just use the database’s built-in id field you might ask? It is very easy to run into id conflicts when you have multiple devices that can create notes offline, saving to a SQLite database, and then sending them up to the cloud eventually. The back-end API gives notes, notebooks and tags a unique fingerprint, called a sync_hash which is just a UUID. With this, you can easily check if an object exists in the cloud.

Currently, the sync_hash is read-only and is only set by the back-end server when objects are initially synced to the cloud. But perhaps there are benefits to generating these on the clients too and also using these as “IDs” in foreignkeys as well. This could potentially improve reliability and require less hand-holding (additional code) to sync objects.

The sync server will use Postgres as a database back-end by default. It’s currently using SQLite just for ease of development purposes but that will be changed. However, the desktop and mobile app will still use SQLite as I believe it is the right tool for the job for that particular case.

The row column in the Notebook table allows you to specify a custom ordering of your notebooks. The back-end will also normalize whatever row number you provide to keep things neat & simple. Here’s a quick little text diagram that shows how rows are represented. They represent the current index number of the current hierarchy level.

- Recipes
- Journaling
- CompSci
 - Python
 - C++
Fitness Tracking

Qt uses the same row concept for their TreeModel. Here is their diagram to explain the concept (Ignore the root item):

The status of the web app?

The web app will be put on hold for now as the desktop app and back-end server are top priority.

Likely, the next big thing I will be working on is the mobile app, created in Qt.

The web app has a lot of progress already but I suspect the majority of the users will use the desktop and mobile app, only occasionally using the web app. For that reason it is on hold - but not forgotten or abandoned.

Thank you for the support!

I have received a good amount of encouragement from reddit and greatly appreciate it. Please sign up for the waiting list to get a notification as soon as the app is released if you are interested.

Upcoming project goals

Connecting the desktop app to the sync server.
Ironing out text-editor bugs and adding a more complete feature set to it.
Client-side encryption!
Launching a pre-alpha program.
Plenty of usability and design tweaks.
Creating the mobile application.
Implement the plugin system, using a lisp-like scripting language - likely Chicken Scheme.
Implementing image & file upload support.

Useful links

Embeddable GUIs – A plan for the ultimate software productivity suite

Tue, 15 Jan 2019 16:28:00 +0000

Something real great about using a framework like Qt is the ability to create “widgets” that are very portable and can be embedded in all sorts of other Qt applications.

An example of this is Escriba, our hybrid Rich-text/Markdown editor. This editor can be embedded in any Qt project you wish to create. Vibrato Notes embeds it.

There are two main benefits from the text-editor widget being separated from Vibrato Notes. First, it’s easier to develop. When a developer wants to add features to it, they don’t have to compile the entire Vibrato Notes application. They just compile Escriba, which is a much smaller program. Another benefit is that the project will catch more interest. It being a general-use text-editor embeddable in any Qt app makes it attractive for all sorts of applications. This enables developers who never have heard of Vibrato Notes – or don’t even care to for that matter – to contribute to Escriba. Anyone contributing to Escriba indirectly (Or directly depending on how you look at it) helps Vibrato Notes become a better piece of software.

Now, let’s say I create a todo-list application. I can make it easily embedable and very flexible. This will allow me to both embed it into Vibrato Notes and create a standalone todo-list application. This could help the software appeal to two audiences – those who want todo-list capabilities in Vibrato Notes and those who just simply want a todo-list app. This could even appeal to a third audience depending on how flexible the app is created: Developers who want todo-list capabilities in their software.

There are a lot of productivity apps to be created; maybe not all of them need to be embed in Vibrato Notes. However, creating all sorts of embeddable widgets and creating helper libraries to add features such as a scripting language can make for a set of apps that are extremely customizable and useful.

Dev Log Week #4 - January 1-6

Sun, 06 Jan 2019 15:37:00 +0000

The Changes:

You can now save notes!
Notes load & sync locally using SQLite3
Created SQLManager class and unit-tests for it.
You can change the hierarchy of notebooks
File»New - a new way to create notes, notebooks and tags
Creation shortcut keys - New Note (Ctrl+n), New Notebook (Ctrl+Shift+n), New Tag (Ctrl+Alt+n).

This marks a very important milestone. The main functionality in the desktop app is complete. I will now begin working on connecting the back-end API with the desktop app.

After that is complete I only really have to iron out some bugs and add a settings page.

As for bugs, it’s mainly all on improving the reliability of the Escriba text editor. This means creating more unit-tests to ensure that bi-directional rich-text/markdown conversion is consistent.

As for the settings page, I would like to provide some useful features for users to customize the desktop app. There won’t be a ton of customization in the first version of the app but will be more in-depth later on.

Stay tuned for a pre-alpha release - where you can start playing around with Escriba and sending over feature requests.

Dev Log Week #3 - Decemember 23-31

Mon, 31 Dec 2018 22:49:00 +0000

The Changes:

Fuzzy searching!
Added auto-completion when tagging notes
Added API for search results
Added note-searching UI
Made notebook and tags labels not selectable.
Fixed a segfault bug when user is deleting a tag/notebook they are viewing.
Fixed bug where title in note list wouldn’t update properly.
Fixed bugs while renaming tags

Dev Log Week #2 - Decemember 16-22

Mon, 24 Dec 2018 18:09:00 +0000

The Changes:

Added a ‘trash note’ functionality!
Created a new UI for trashing notes - with bulk-trash/restore!
Polished tagging functions
Added “favorite note” functionality!
Added solid yellow star icon to indicate favorited notes (resources/icons/vibrato-default/icons/vibrato-draw-star-solid.svg)
Added “favorite note” icon to the Escriba text editor toolbar.
Made favorites view update when you un-favorite a note
Added “trashed” property to Note class
Updated the Note class to utilize the updateModifiedDate boolean

Dev Log Week #1 - Decemember 10-15

Mon, 17 Dec 2018 20:00:00 +0000

Welcome to the first weekly dev log of Vibrato Notes! This week I was not massively productive but managed to crank away various important changes in the desktop app.

The Changes:

Added various tag operations (add tag, delete tag, rename tag)
Created a ‘Manager’ class to hold all of the UI Managers. This makes it easy to access each of the UI Manager instances in all of the UI Manager classes.
Improved the ux of the ‘New Note’ feature.
Made the notelist sidebar properly refresh when a notebook is renamed.
Fixed bug where imported notebooks in ‘Default Notebook’ weren’t properly set.
Improved the ux when modifying note data. Most notably, when you right click the notebook tree and create a new notebook, it will immediately got into edit mode. (Saves you the step of having to right click again and edit.)

Vibrato Notes: The Development Progress So Far

Mon, 10 Dec 2018 16:40:00 +0000

In this post I would like to cover the current progress of Vibrato Notes.

There is now a website for Vibrato Notes, btw!

Creating the first version of this app has taken much longer than I initially thought. It’s common to go into software projects thinking that an idea is very easy to implement and then you keep encountering new design problems you hadn’t thought of and the scope of the project keeps increasing.

There were a few problems in the beginning of the development of Vibrato Notes that caused me to spend a lot of time, not neccesarily building the core app, but instead building libraries that would be needed for the app. Examples of those include Markdown Panda and QBasicHtmlExporter.

Escriba is another library I had to spend a decent amount of time on. It is quite important as it is the hybrid text-editor used in the desktop application.

Throughout the experience, I have drastically increased my ability to work with C and C++. It has been a lot of fun even in the most challenging parts, fighting off mysterious segfault after segfault.

Here is a rough overview of the progress:

Component	Progress
Back-end API	Functional, needs slight adjustments.
Web app	Close to completion. On hold while I finish the desktop app.
Desktop app	Good progress but a lot to do.
Mobile app	Not started.

The journey so far.

The whole project started with me creating a bare-minimal API in Django that provided just enough functionality. After that, I started work on the web app.

However, I took a break developing the web app to move onto the desktop app. I was progressing through the web app at quite a fast pace and that is because working with web technologies can be easy. VueJS in particular helped a lot.

…However, C++ isn’t as easy. I was worried I would complete the web app, move onto the desktop app and just completely struggle with it. I like to do the hard things first, saving the easy stuff for last.

C++ (and plain C for MarkdownPanda!) did involve quite a lot of additional learning as I was primarily familiar with languages with garbage collectors.

Working with plain C in particular has improved my documentation-reading skills. There are times where a library has no other documentation other than the code itself and the few comments left within the header files. There are also times where a library that does a specific task does not exist. I needed an HTML to Markdown converter and had to write one myself, with the help of MyHTML.

Qt5 has been an incredibly powerful framework to use. It saves a ton of effort and really makes cross-platform development a breeze. Still, with having to worry about memory management and the header-source-file workflow of C++, it’s still not that quick to prototype applications when you are used to being spoiled with web technologies.

I look forward to implementing a scripting language into Vibrato Notes later on. It will allow me to decouple some non-performance-effecting C++ from the project as well as provide the users with a versatile extension system to use. This is a rough idea now - not set in stone - and will be further explored in the future.

Desktop App Features

In this section I’ll go over a few cool features of the desktop app.

Hybrid rich-text/markdown editor

You can edit in both rich-text and markdown. Switching between the two is easy! I plan on improving and writing more unit-tests to improve the reliability of the bi-directional conversion.

Editing notebooks in a tree-based, hierarchial fashion

Modify the notebook and tags of a note

Layout switching

There are three different layout presets. The default one, one that hides the leftmost sidebar, and one that hides both sidebars, leaving you with the text editor.

Fairly efficient note filtering, allowing you to quickly navigate through hundreds of notes

Web App

The web app is pretty - indeed - however you may notice it lacks a few features of the desktop app. Like I mentioned earlier, I took a break from the web app to build the desktop app. I haven’t touched the code of the web app for a few month and plan to return to it after the desktop app is complete.

Here is a video I took of it a while ago:

[KDE] A note-taking app I'm building, Emacs, and my minimal KDE tweaks from r/UsabilityPorn

Weekly updates

Something new I will be doing is creating a new post every week on OpenAppLibrary.org detailing progress made in the app.

Thanks for reading!

A Guide to Using Icon Themes in Qt on All Platforms

Wed, 14 Nov 2018 16:03:00 +0000

This guide will attempt to demystify the usage of icon themes in Qt applications.

Icon themes are standard on the Linux desktop but seem to be a foreign concept on Mac and Windows. Lucky for us, Qt has integrated icon themes quite seamlessly no matter what operating system you are using.

To see a working example of icon theme usage that uses a variety of techniques from this article, check out our “Qt5 Cross-Platform Icon Themes” repo.

What is an “icon theme”?

FreeDesktop.org created the spec on how icon themes should work in free software desktop environments.

They define an icon theme as the following:

An icon theme is a set of icons that share a common look and feel. The user can then select the icon theme that they want to use, and all applications will use icons from the theme.

Adding your own icons to the default theme

An easy way to add “cross-platform support” is to:

1.) create a folder in your project. (ex. “custom-icons”)

2.) Add all of your icons.

3.) Use the following code to define a fallback icon search pack:

QIcon::setFallbackSearchPaths(QIcon::fallbackSearchPaths() << ":custom-icons");

4.) Create a new resources and add your custom icons. Your qrc file’s structure should look similar to the following:

Now, you can reference any icons in that folder by their filename (minus the file extension). So, in the example of the above screenshot, I would reference the icon as “open-app-library”.

To reference the icons, you can either use Qt Designer or enter it programatically.

Here is how I changed a button’s icon from the example repo:

b2->setIcon( QIcon::fromTheme("open-app-library") );

If it is important to you that the icons should first try to obey the user’s system icons, please make sure to follow the naming conventions defined by FreeDesktop.org. However, if your icon is something truly unique (Like the Open App Library logo I used in this example) you can of course deviate from the specification.

Configuring a new icon theme in Qt

You might want to completely overwrite the system icon theme and use your own.

You could either create your icon theme from scratch or use the many existing themes. I personally like KDE’s Breeze icons and Elementary OS’s icons.

Be aware that not all icon themes include every single icon detailed in the FreeDesktop specification. I’ve found that KDE’s Breeze icons contain the widest selection of icons - I believe they even offer additional icons outside of the specification.

How icon themes work

Here is the file structure of a very minimal icon theme:

└── my-theme/
  └── actions/
    └── 16/
      └── hello-world.png
    └── 24/
      └── hello-world.png
    └── index.theme

It could be even simpler than that! (Note that this structure, while it works, deviates from the specification.)

└── my-theme/
  └── my-special-ui-icons
    └── hello-world.png
  └── index.theme

The most important file is that index.theme. Here is an example of what an index.theme may look like:

[Icon Theme]
Name=My Theme
Comment=An example icon theme

[actions/16]
Size=16
Context=Actions
Type=Fixed

[actions/24]
Size=24
Context=Actions
Type=Fixed

There are all sorts of things you could do in this index.theme file. You could even inherit icons from another theme! Once again, to learn more about how this all works, check out the official specification.

Where does Qt search for icon themes?

Now that we have either downloaded an icon pack or have created our own, how can we actually load it?

First, let’s figure out where Qt is searching for icons. Run the following C++ code (Make sure to include QIcon and QDebug):

qDebug() << QIcon::themeSearchPaths();

Depending on your operating system, you will get different output. Here are the different paths the command returned for me:

/home/doug/.icons
/var/lib/flatpak/exports/share/icons
/usr/share/icons
:/icons

What’s important to know is that while the theme search paths will vary from operating system to operating system, the :icons/ resource path will always be present.

This is where we will place our icon paths.

Adding the icon pack as a resource

If you’re in Qt Creator, the process is quite painless. After you create a new resource file, right click on it and choose “Add existing directory”.

Now, it might be tempting to add EVERY file from your icon pack but that is not the most efficient way.

Instead, only add the index.theme and icons that you plan on using.

For this example project, I decided to use the Zafiro icon pack. Here is what my resources file structure looks like after adding the one icon I wanted:

In case you want to see what my Qt resource file looks like after adding Zafiro, here it is:

<RCC>
    <qresource prefix="/">
        <file>icons/zafiro/index.theme</file>
        <file>icons/zafiro/places/48/folder-alt.svg</file>
    </qresource>
</RCC>

Loading the icon theme programatically

There very well may be a way to do this directly in Qt Designer but I have not yet found it.

Here is how you would load your icon theme in C++:

QIcon::setThemeName( "zafiro" );

Easy peasy!

The result:

Button 1 is showing Zafiro’s folder-alt icon.
Button 2 is showing the custom open-app-library icon.

Bonus tip: Keep HiDPI support in mind

If you ran the example project on a Mac with a retina display or any other device with a HiDPI display, you might have noticed the icons were a little bit blurry.

You can fix this with a single magical line of C++:

QGuiApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);

Before and after:

Note for qt deployment

Be aware that you have to deploy a plugin in case of svg images. You find the SVG + QIconEnginePlugin (as described under https://doc.qt.io/qt-5/qicon.html) plugins/iconengines. Otherwise the theme switch doesn’t work.

Did I miss anything about icon packs?

Hope you have enjoyed this article. If you have any further questions or have any ideas to improve this guide, don’t hesitate to drop a comment below.

You may also edit this page by clicking the “Edit this page” button below and submitting a pull request.

Converting markdown to HTML with Github's CMark-GFM library in C + How to use extensions!

Fri, 26 Oct 2018 22:25:00 +0000

Today, I was working on MarkdownPanda, a bi-directiona HTML/Markdown conversion library that will be very important to Vibrato Notes.

With MarkdownPanda, I have gone through quite the number of Markdown parsers. I started my decision with Sundown and Discount. Then decided to go with Hoedown. I was happy with Hoedown up until the point where I noticed super strange behavior in my unit tests where previous markdown->HTML operations would concatenate onto new ones…Super weird and just made me want to find something new. Came across CMark and found it absolutely perfect..Until I realized tables and strikethroughs were not implemented. And then I found Github’s own CMark-GFM.

At a surface level, the library is super simple and hardly any different than CMark.

Example Program

#include <stdio.h>
#include <string.h>
#include <cmark-gfm.h>

int main()
{
  char *markdown = "# Welcome";
  char *html = cmark_markdown_to_html(markdown, strlen(markdown), CMARK_OPT_DEFAULT);

  printf("%s", html);
  free(html);

  return 0;
}

Easy, right? Must be smooth sailing from here! Well..we do have a bit of a problem. Tables and strikethroughs are not supported by default. There are also other extensions you may find useful.

Using extensions

In order to use extensions you must first make sure to link against libcmark-gfm-extensions. It is an additional library that is created while building CMark-GFM.

Here is an example program that uses markdown extensions:

#include <stdio.h>
#include <string.h>
#include <cmark-gfm.h>
#include <cmark-gfm-core-extensions.h>

// This is a function that will make enabling extensions easier later on.
void addMarkdownExtension(cmark_parser *parser, char *extName) {
  cmark_syntax_extension *ext = cmark_find_syntax_extension(extName);
  if ( ext )
    cmark_parser_attach_syntax_extension(parser, ext);
}

// A function to convert HTML to markdown
char *to_html(char *markdown_string)
{
  int options = CMARK_OPT_DEFAULT; // You can also use CMARK_OPT_STRIKETHROUGH_DOUBLE_TILDE to enforce double tilde.

  cmark_gfm_core_extensions_ensure_registered();

  // Modified version of cmark_parse_document in blocks.c
  cmark_parser *parser = cmark_parser_new(options);

  ///////////////////////
  /// Add extensions here
  ///////////////////////
  addMarkdownExtension(parser, "strikethrough");
  addMarkdownExtension(parser, "table");

  cmark_node *doc;
  cmark_parser_feed(parser, markdown_string, strlen(markdown_string));
  doc = cmark_parser_finish(parser);
  cmark_parser_free(parser);

  // Render
  char *html = cmark_render_html(doc, options, NULL);
  cmark_node_free(doc);

  return html
}

// MAIN FUNCTION
int main()
{
  char *markdown = "# Welcome";
  char *html = to_html(markdown);

  printf("%s", html);
  free(html);

  return 0;
}

Hope this saved you some time! You can check out how we implemented this in MarkdownPanda by viewing markdownpanda_md2html.c.

If you enjoyed, feel free to browse our open-source software.

Announcing WideGuy!

Mon, 08 Oct 2018 16:34:00 +0000

Today I am very happy to announce WideGuy! A simple tool that solves a Linux gaming problem I came across.

It makes switching your monitors to a wide-picture mode (Xinerama) as easy as a click of a button.

Definitely give it a try if multi-monitor gaming is your thing.