/bogue-inkscape

Use Inkscape to easily create Bogue GUI designs

Primary LanguageOCaml

Bogue-inkscape

Use the nice Inkscape drag-and-drop interface to easily create beautiful Bogue GUI designs.

Short description

This library (and command line utility) reads an Inkscape SVG file, and writes Bogue code automatically that transforms the Inkscape objects into Bogue widgets. Of course,

  • only specific Inkscape objects are recognized (see below), and
  • the code must then be manually completed to add the logic of your GUI program.

In other words, Inkscape becomes a helper program that you use to create the Bogue GUI design. See examples below.

Goal

Use Inkscape to help code Bogue designs.

Non-goals

  • Import any Inkscape file. If you think this will transform any Inkscape document into a Bogue GUI, you will be severly disappointed.

  • Program the whole GUI within Inkscape. You will only use Inkscape to create the GUI design, that is, the position and decoration of the various widgets. Yes, in fact you can also help creating connections, but you will still have to program the heart of your code by hand.

Longer description

In order to be correctly recognized, the Inkscape document must be carefully prepared. Obviously, the type of Inkscape objects is of course important, but not only: we also use the ID, the label, and (optionally), the title (and maybe the Description). These fields can be modified in Inkscape with CTRL-SHIFT-o (or right click on the object and select "Object properties"). Click on "define" after each modification.

Here is the dictionary

In the table below, the Inkscape... columns are what you create on the Inkscape side, and the Bogue... columns tell you what Bogue object will be created from this.

Inkscape object Inkscape ID Inkscape Label Inkscape Title Inkscape Description Bogue type Bogue identifier Bogue name Bogue parameters
Rectangle (R) [any unique ocaml id] #Box or #rectxxx [any string] Box widget Inkscape ID Inkscape Title
Rectangle (R) [any unique ocaml id] #Button [any string] [any string] Button widget Inkscape ID Inkscape Title label = Inkscape Desc
Linked Image (C-I) [any unique ocaml id] #Image or #imagexxx [any string] Image widget Inkscape ID Inkscape Title
Linked Image (C-I) [any unique ocaml id] #Button [any string] Button widget TODO Inkscape ID Inkscape Title
Group (C-S-O) [any unique ocaml id] #Layout or #gxxx [any string] Layout Inkscape ID Inkscape Title
Group (C-S-O) [any unique ocaml id] #Button [any string] Button widget w/ label TODO Inkscape ID Inkscape Title group should contain a rect and a text
Connector (O) [any unique ocaml id] #Connection or #pathxxx [any ocaml id] Connection Inkscape ID N/A action = Inkscape Title
- - - - - - - - -
Layer layerxxx layer TODO
  • "ocaml id" means a string that can be used for naming an ocaml variable: starts with a lowercase letter (a-z), and the only allowed char besides (a-z), (A-Z), and (0-9) is underscore '_'. See Ocaml Manual. It is safe to leave Inkscape's default ID. Well, in fact any string is safe, because Bogue-inkscape will automatically transform it into a valid ocaml id anyway.

  • Each Bogue widget will be inserted into a layout for positioning. The layout name is the same as the widget name with "_l" appended (except in case of conflict).

Special setting:

Inkscape Bogue
Document properties --> Metadata --> Title Bogue title

Notes

  • When setting an object parameter in Inkscape, don't forget to click on "Define" to validate your entry.
  • [any unique ocaml id] shoud be a valid Ocaml identifier; it will be sanitized if not the case.
  • When importing an image into the Inkscape document, you should select "Link" and not "Embed".

Inkscape hints

  • When creating the document, select a "real size" that fits your screen/GUI. For instance 80mm x 50mm for a small window. Then, adjust the Inkscape zoom to obtain the theoretical size (check with a ruler! 100% is not always good! On my screen I need to use 125%).
  • It is advisable to work with a grid and align all objects as much as possible
  • When creating a text element, just click and type: don't set up a text zone apriori.

Examples

TODO

TODO

TODO