Memri / Tools / CVU Editor_old

CVU Editor_old

UNDER CONSTRUCTION..

Memri browser-app repo

The CVU Editor is a web-based developer tool to write and debug CVU Language, with with an in-app debug console that comes with syntax highlighting and auto-complete. The Client app updates every time you make changes on the views you are creating, for easy and convenient trial and error development.

The Memri developer tool lives in the browser-application repository and must be installed separately in order to use it.


The client uses CVU language (c-view or Cascading Views) –that combines the best of HTML and CSS– for defining the interfaces in the app, which you can customize, or create your own!

CVU language enables you to control how you view and use your information. It’s a language that’s easy to understand and allows you to control your view (or perspective) on your information. Think of it as a language that forms the window through which you can see your information. With the CVU language you can describe how you want to view data such as notes, emails, messages and photos.

Memri comes with a default set of CVU definitions that you can use on the most common data types (e.g. note, person, address, photo). Each user can also write their own views.

Why another language?

We want CVU to be accessible and easy to use for non-programmers. We started using the JSON format, but quickly noticed that the many syntax errors made that a non-intuitive choice. However, the most important reason for designing CVU is to give the user control over their own user interface. So we needed an easy-to-write script that could quickly load at runtime into Memri. We made the views cascade in order to allow the user to easily modify their views.

Installing

Clone the repository and install (Make sure you have git and npm installed):

$ git clone https://gitlab.memri.io/memri/browser-application.git
$ cd browser-application
$ npm install

To run:

$ npm run start

Open http://localhost:9000 in your favorite browser to open the developer tool. Make sure your pod is running and the client has connected at least once so that the default database is uploaded to your pod.

In the text field at the top left of the page write the url of the pod and press the connect to pod button.

To use mock data instead of pod, write mock instead of the url.

If pod does not allow connection, you may need to use --disable-web-security flag for chrome (Note, this flag is applied only if --user-data-dir=someDir is provided as well)

Add/Customize a view

The definitions are grouped by selector. There are default CVU definitions that are read-only and can be opened to easily copy and paste instructions that you may wish to customize. The user defined CVU files are editable. Click the plus button to add a new CVU definition and start customizing.


Get involved in creating new CVU interfaces. We are an open community!

Learn more about contributing to memri GitLab icon


Learn more:

more content:


Displaying your data in a renderer

The screenshot to the right shows the Memri browser displaying a set of example notes. The Memri browser has a navigation bar at the top with several buttons. In the bottom there is a search bar with another set of buttons. All these buttons can be set in a CVU definition. This gives maximum control over the way you view your information.

Between the navigation in the top and the search in the bottom there is a list that renders one row for each note. We call the logic responsible for displaying this the renderer. This specific renderer is the list renderer and as you can deduce, it displays information in a list.


Some other feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


And another

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Checkout the tutorial on Creating a Notes View Example

Get involved in creating new CVU interfaces. We are an open community!

Learn more about contributing to memri GitLab icon