More fun with Morphic: 1st iteration of a Mindmapping tool
The past three days, Noah Domingo (15) and I have been working on a new Morphic example. We have build a first iteration of a Mindmapping tool. Noah shows it in: https://vimeo.com/136943448 We would be interested in some design critique. The way the Rubric text field is embedded in the MindmapNode is not so clean. The code can be loaded by Gofer it smalltalkhubUser: 'StephanEggermont' project: 'Mindmap'; package: 'Mindmap'; load
Nice :) would be fun to see if you can reuse the algo of roassal. Le 21/8/15 23:57, Stephan Eggermont a écrit :
The past three days, Noah Domingo (15) and I have been working on a new Morphic example. We have build a first iteration of a Mindmapping tool. Noah shows it in:
We would be interested in some design critique. The way the Rubric text field is embedded in the MindmapNode is not so clean.
The code can be loaded by
Gofer it smalltalkhubUser: 'StephanEggermont' project: 'Mindmap'; package: 'Mindmap'; load
On 22-08-15 09:55, stepharo wrote:
Nice :) would be fun to see if you can reuse the algo of roassal.
I've taken a look at RTLayout and friends. Looks like a pretty small interface to implement. A separate package with the layouters would be useful. Alexandre? Stephan
Le 22/8/15 17:13, Stephan Eggermont a écrit :
On 22-08-15 09:55, stepharo wrote:
Nice :) would be fun to see if you can reuse the algo of roassal.
I've taken a look at RTLayout and friends. Looks like a pretty small interface to implement.
A separate package with the layouters would be useful. Indeed I always thought about it.
Alexandre?
Stephan
good work On Sat, Aug 22, 2015 at 9:28 PM stepharo <stepharo@free.fr> wrote:
Le 22/8/15 17:13, Stephan Eggermont a écrit :
On 22-08-15 09:55, stepharo wrote:
Nice :) would be fun to see if you can reuse the algo of roassal.
I've taken a look at RTLayout and friends. Looks like a pretty small interface to implement.
A separate package with the layouters would be useful. Indeed I always thought about it.
Alexandre?
Stephan
Excerpts from stepharo's message of 2015-08-22 09:55:04 +0200:
would be fun to see if you can reuse the algo of roassal.
i have taken a stab at that: =========================================================================================== view := RTView new. | activenode prevnode | view when: TRMouseClick do: [ :ev | | label node | "node := shape element." label := RTEditableLabel new height: 30; "i have a very high resolution and like large fonts" text: ''; element. node := RTBox new color: Color white; borderWidth: 2; borderColor: Color black; element. node @ RTDraggable. "select a node to branch of new nodes from it" node when: TRMouseClick do: [ :click | activenode := click element ]. "if the label is empty: '', then its size is 0@0 and is no longer clickable to edit, hence we make the node clickable instead" node when: TRMouseDoubleClick do: [ label shape showTextMorphFor: label ]. node when: TRMouseLeave do: [ label shape hideTextMorphFor: label ]. view add: node; add: label. RTNest new stretchable; on: node nest: {label}. "when the label changes its size, the box doesn't update its size unless we add this workaround" label trachelShape addCallback: (TRExtentCallback new block: [ :aShape :ratio | node trachelShape extent: aShape extent + (20 @ 0) ]). node translateTo: ev position. "label shape showTextMorphFor: label." "this opens the node in edit mode, but somehow messes things up" (activenode notNil and: node ~= activenode) ifTrue: [ prevnode := activenode ]. prevnode ifNotNil: [ edge := RTEdge from: prevnode to: node. edge + (RTBezierLine horizontal withContinuousRectangleAttachPoint; yourself). view add: edge ]. prevnode := node. activenode := node. view signalUpdate ]. view. =========================================================================================== the behavior is a bit different than the usual mindmapping tools as it does not enforce an automatic layout but you are free to place nodes whereever you like by just clicking in the location and moving the node later. that behavior is inspired by a mindmapping tool called labyrint: https://github.com/labyrinth-team/labyrinth https://www.youtube.com/watch?v=Pv3dTovGc0E thanks to alexandre bergel and others who helped me to figure out some problems such as a workaround for RTEditableLabel not working with RTCompositeShape: shape := RTCompositeShape new. shape allOfSameSizeWithPadding. shape add: (RTBox new color: Color white; borderWidth: 2; borderColor: Color black). shape add: (RTEditableLabel new height: 30). the remaining problems are cosmetic. for example i can't seem to get the nodes to open up in edit mode. doing that with the commented line in the code above, wrecks havoc on the node. i also would like RTBezierLine to be horizontal or vertical depending on how the two nodes are positioned to each other. and it should always start at the middle of the rectangles edge at a 90degree angle. lastly, i'd like to have rounded corners on the RTBox. if/when i develop this further, i plan to add the ability to select multiple nodes and add edges between them. be able to move selected nodes as a group, and align selected (or all) nodes according to one of the layouts provided by roassal (tree, circle, etc), things like export to svg or png would also be nice. and of course, package it up... greetings, martin. -- eKita - the online platform for your entire academic life -- chief engineer eKita.co pike programmer pike.lysator.liu.se caudium.net societyserver.org secretary beijinglug.org mentor fossasia.org foresight developer foresightlinux.org realss.com unix sysadmin Martin Bähr working in china http://societyserver.org/mbaehr/
Looks good!!!! You are @embee on Slack right ? :-) Cheers, Alexandre -- _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: Alexandre Bergel http://www.bergel.eu ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
On Nov 19, 2015, at 4:03 PM, Martin Bähr <mbaehr@email.archlab.tuwien.ac.at> wrote:
Excerpts from stepharo's message of 2015-08-22 09:55:04 +0200:
would be fun to see if you can reuse the algo of roassal.
i have taken a stab at that:
=========================================================================================== view := RTView new. | activenode prevnode |
view when: TRMouseClick do: [ :ev | | label node | "node := shape element." label := RTEditableLabel new height: 30; "i have a very high resolution and like large fonts" text: ''; element. node := RTBox new color: Color white; borderWidth: 2; borderColor: Color black; element. node @ RTDraggable.
"select a node to branch of new nodes from it" node when: TRMouseClick do: [ :click | activenode := click element ].
"if the label is empty: '', then its size is 0@0 and is no longer clickable to edit, hence we make the node clickable instead" node when: TRMouseDoubleClick do: [ label shape showTextMorphFor: label ]. node when: TRMouseLeave do: [ label shape hideTextMorphFor: label ]. view add: node; add: label. RTNest new stretchable; on: node nest: {label}.
"when the label changes its size, the box doesn't update its size unless we add this workaround" label trachelShape addCallback: (TRExtentCallback new block: [ :aShape :ratio | node trachelShape extent: aShape extent + (20 @ 0) ]).
node translateTo: ev position.
"label shape showTextMorphFor: label." "this opens the node in edit mode, but somehow messes things up"
(activenode notNil and: node ~= activenode) ifTrue: [ prevnode := activenode ]. prevnode ifNotNil: [ edge := RTEdge from: prevnode to: node. edge + (RTBezierLine horizontal withContinuousRectangleAttachPoint; yourself). view add: edge ]. prevnode := node. activenode := node. view signalUpdate ]. view. ===========================================================================================
the behavior is a bit different than the usual mindmapping tools as it does not enforce an automatic layout but you are free to place nodes whereever you like by just clicking in the location and moving the node later.
that behavior is inspired by a mindmapping tool called labyrint: https://github.com/labyrinth-team/labyrinth https://www.youtube.com/watch?v=Pv3dTovGc0E
thanks to alexandre bergel and others who helped me to figure out some problems such as a workaround for RTEditableLabel not working with RTCompositeShape:
shape := RTCompositeShape new. shape allOfSameSizeWithPadding. shape add: (RTBox new color: Color white; borderWidth: 2; borderColor: Color black). shape add: (RTEditableLabel new height: 30).
the remaining problems are cosmetic. for example i can't seem to get the nodes to open up in edit mode. doing that with the commented line in the code above, wrecks havoc on the node. i also would like RTBezierLine to be horizontal or vertical depending on how the two nodes are positioned to each other. and it should always start at the middle of the rectangles edge at a 90degree angle.
lastly, i'd like to have rounded corners on the RTBox.
if/when i develop this further, i plan to add the ability to select multiple nodes and add edges between them. be able to move selected nodes as a group, and align selected (or all) nodes according to one of the layouts provided by roassal (tree, circle, etc), things like export to svg or png would also be nice.
and of course, package it up...
greetings, martin.
-- eKita - the online platform for your entire academic life -- chief engineer eKita.co pike programmer pike.lysator.liu.se caudium.net societyserver.org secretary beijinglug.org mentor fossasia.org foresight developer foresightlinux.org realss.com unix sysadmin Martin Bähr working in china http://societyserver.org/mbaehr/
Hi, Very nice job! Cheers, Doru On Fri, Aug 21, 2015 at 11:57 PM, Stephan Eggermont <stephan@stack.nl> wrote:
The past three days, Noah Domingo (15) and I have been working on a new Morphic example. We have build a first iteration of a Mindmapping tool. Noah shows it in:
We would be interested in some design critique. The way the Rubric text field is embedded in the MindmapNode is not so clean.
The code can be loaded by
Gofer it smalltalkhubUser: 'StephanEggermont' project: 'Mindmap'; package: 'Mindmap'; load
-- www.tudorgirba.com "Every thing has its own flow"
Hi, Nice to see this mind map example, and that you're working with young people for a brighter future with Smalltalk/Pharo :-). I remember that the first app I want to create and even propose to this list was a Mind mapping + Zooming app (think something like Xmind[1] mixed with prezi[2]), but was too complex to start with by myself, so seeing young people with proper tutorship starting with this is really awesome. I went with outlining and interactive writing which, with GT Tools, seems more approachable. [1] https://en.wikipedia.org/wiki/XMind [2] https://en.wikipedia.org/wiki/Prezi About design critique, I'm too newbie to made any suggestion code wise, but, as a long time user of mind mapping software I could offer some advice about future steps for improvements on this early version. a. The first thing is colors, the vivid green for links can be too vivid. This is a personal taste, but I would recommend to download Xmind and see the provided templates and stick with one of them in colors and graphical style as a prototype of the "end result". b. The second is edges. Curved are the classical style for them, even on paper. Maybe the drawing or arranging mechanism is complicated, but would be nice to have them instead of straight ones. Think in something like http://www.xmind.net/m/ejnN/ or http://www.xmind.net/m/QLmZ/ or http://www.xmind.net/m/jPvm/ as possible layouts for edges. c. Embedding graphics. If you offer this you could have a basic mind mapping tool for pharo for 99% of the cases :-). For the future I think in stuff like layout templates (a la Xmind), links between nodes, collapsible and expandable nodes, multimedia and zooming and you will have a serious contender in the presentation, brainstorming arena! Hope to be able to test it this weekend. This has been a really busy month! Cheers, Offray Ps: I'm planning to use your Spec tutorials to rewrite the interface for my Grafoscopio project trying to mix Spec and GT Tools, as soon as I have time again, so thanks for writing it. On 21/08/15 16:57, Stephan Eggermont wrote:
The past three days, Noah Domingo (15) and I have been working on a new Morphic example. We have build a first iteration of a Mindmapping tool. Noah shows it in:
We would be interested in some design critique. The way the Rubric text field is embedded in the MindmapNode is not so clean.
The code can be loaded by
Gofer it smalltalkhubUser: 'StephanEggermont' project: 'Mindmap'; package: 'Mindmap'; load
Just a small note:you can integrate GT tools as presentations in Spec now using a GlamourPresentationModel, so it seems that what you want to do should be easy. The GlamourPresentationModel is currently in my Playground repository on Smalltalkhub. ( http://smalltalkhub.com/#!/~jfabry/Playground/packages/Spec-Glamour ) There is also an example UI called GlamourPMExample that shows how to use it.
On Aug 22, 2015, at 07:44, Offray Vladimir Luna Cárdenas <offray@riseup.net> wrote:
Ps: I'm planning to use your Spec tutorials to rewrite the interface for my Grafoscopio project trying to mix Spec and GT Tools, as soon as I have time again, so thanks for writing it.
---> Save our in-boxes! http://emailcharter.org <--- Johan Fabry - http://pleiad.cl/~jfabry PLEIAD and RyCh labs - Computer Science Department (DCC) - University of Chile
participants (8)
-
Alexandre Bergel -
Dimitris Chloupis -
Johan Fabry -
Martin Bähr -
Offray Vladimir Luna Cárdenas -
Stephan Eggermont -
stepharo -
Tudor Girba