Monthly Archives: April 2018

[Pharo-dev] [ann] gt diagrammer

Hi,

We are happy to announce an initial version of GT Diagrammer, an engine for constructing diagrams interactively. This is the newest addition to the next generation GT built on Bloc.

It looks like this:

unnamed.png
We chose to work on Diagrammer for multiple reasons. First, developers often need to create hand-built diagrams to communicate intentions, and an integrated experience should not require us to leave our environment to create them. At the same time, Diagrammer is an application that requires a widget and interactions, and thus it is a nice exercise for Bloc and Brick.

One requirement we had from the beginning was to make it work with any Bloc element. This means that the editing part had to be reasonably generic. To this end, we now have elements that can define visual editors. This is somewhat a combination between Magritte descriptions, and inspector extensions. An interesting side effect is that now we can edit visual properties when inspecting any element. In other words, we got the basic infrastructure of a UI painter. It looks like this:
https://twitter.com/feenkcom/status/982656456968241152

The user interface essentially relies on two widgets: scrollable list and toggle button. While the visual look of the toggle button is inspired from material design, the most interesting part is that now we have an implementation for controlling looks per element instance. A key issue here is that looks can react to events coming from the element and inject visual attributes and possible even change behavior (for example, changing an icon while pressing a button). We will post more about looks soon.

We now also have a nice solution for overlays. For example, we have an overlay showing selection and an overlay for resizing elements.

Perhaps less obvious, Diagrammer also offers a basic infrastructure for the area of visual languages. As Diagrammer works with any Bloc elements, we can simply create dedicated visual elements. As an example, Diagrammer comes with an implementation of a UML class figure. Furthermore, as the functionality does not impose a specific model, custom language semantics can be mapped on visual actions.

There are several things to do still for it to become a mature solution. An important next step is to serialize a diagram scene in a reproducible manner. Currently, the diagram (or any element) can be exported as pdf (https://twitter.com/feenkcom/status/976580153802358786), svg (https://twitter.com/feenkcom/status/976578060429484032), png, gif or jpeg by directly using the low level canvas. However, for the diagram to be truly useful we need to store the result in either code or another reloadable form such as STON. Other future directions are related to figure controlling (for example, custom anchors or line bending points) and to enhanced editors.

To play with it, the easiest way is to download the new GT in a Pharo 6.1 image:
Metacello new
baseline: ‘GToolkit’;
repository: ‘github://feenkcom/gtoolkit/src’;
load.

And then inspect:
GtDiagrammerElement new

Cheers,
The feenk team

 


www.tudorgirba.com
www.feenk.com

“Presenting is storytelling.”

Advertisements

Learning Object-Oriented Programming, Design and TDD with Pharo

Hi

We are happy to officially announce that

Learning Object-Oriented Programming, Design and TDD with Pharo

is now available for print on http://www.lulu.com/shop/st%C3%A9phane-ducasse-and-damien-pollet/learning-object-oriented-programming-design-and-tdd-with-pharo/paperback/product-23583973.html

Pharo association members will soon receive a 20% reduction!

Stéphane Ducasse and Damien Pollet

 

[ANN] MaterialDesignLite v1.2.0 for Seaside

Hello everyone,

Today I released the version v1.2.0 of MaterialDesignLite for Seaside.
(https://github.com/DuneSt/MaterialDesignLite)

The main changes are:
– There is a brand new demo with more examples and documentation. You
can find it here: https://mdl.ferlicot.fr
– There is a new concepts: The extensions. Extensions are not describe
by Material Design but are meant to help developers while building web
application. This release contains 3. A way to simplify the use of
dialogs, called “root dialog”, a resizeable left panel and a resizeable
right panel with tabs.
– There is a new widget: the progress widget
– New brushes to use premade typography and typogaphy styles

This release is tagged with v1.2.0 and I also introduced tags v1.2.x and
v1.x.x which are moving tags following patch and minor versions.

Here is the full changelog of the release:
https://github.com/DuneSt/MaterialDesignLite/blob/b5ef0dcbcb9b84aeea774db382e1d72f1f7d26ea/CHANGELOG.md

If you have issues, need a new feature or have a comment on the project
feel free to open a issue:

https://github.com/DuneSt/MaterialDesignLite/issues

Have a nice day!

Cyril Ferlicot