How's the outline variables functionality implemented?

108 views
Skip to first unread message

luca leone

unread,
Jun 3, 2016, 2:50:34 AM6/3/16
to Apparatus
Hello everybody,

I have been checking the code source trying to figure out how the creation of a variable, the dragging functionality, and all the interaction in the 'outline' panel has been done. 

I'm a designer, trying to build a prototype with functionalities similar to these ones, and I'm not good with code. Can anyone help me and put me in the right direction on how to do it? Thanks :)

David Young

unread,
Jul 11, 2016, 12:18:40 PM7/11/16
to Apparatus
Luca,

Did you look at the code at master/src/View/Outline.coffee ? That
appears to be responsible for the Outline interaction and rendering.

Just curious, are you prototyping only an outline view, or are you also
establishing and solving geometric constraints between objects?

Dave

--
David Young //\ Trestle Technology Consulting
(217) 721-9981 Urbana, IL http://trestle.tech/

luca leone

unread,
Jul 12, 2016, 2:33:07 AM7/12/16
to Apparatus
Thanks Dave. To answer your question: the first. I saw a similar functionality in a Bret Victor video, I thought it would be nice to have it in an "analytics app" I'm designing. There aren't geometric constraints between objects. I just like the way a user can create variables whose values are the result of expressions. Usually these kind of applications show the user a dashboard with charts. By contrast I'd like to give the user some freedom to make some back-of-the-envelop calculations, creating his own variables.

David Young

unread,
Jul 14, 2016, 10:35:07 PM7/14/16
to Apparatus
On Mon, Jul 11, 2016 at 11:33:07PM -0700, luca leone wrote:
> Thanks Dave. To answer your question: the first. I saw a similar
> functionality in a Bret Victor video, I thought it would be nice to have it
> in an "analytics app" I'm designing. There aren't geometric constraints
> between objects. I just like the way a user can create variables whose
> values are the result of expressions. Usually these kind of applications
> show the user a dashboard with charts. By contrast I'd like to give the
> user some freedom to make some back-of-the-envelop calculations, creating
> his own variables.

That sounds cool. I would like to see that.

You and I may be exploring in similar areas. I have been working on
an authoring environment for "parametric documents" where numbers,
formulas, and words comingle. Jef Raskin's Canon Cat appliance and Bret
Victor's Tangle demo have influenced me.

luca leone

unread,
Jul 15, 2016, 3:06:08 AM7/15/16
to Apparatus
very interesting Dave. If you like the Canon Cat and Tangle then we share the same interests. I was very much influenced by The Humane Interface and I've been reading Victor for the last year. I'd love to see your parametric documents :) In the meantime I'll work on my "analytics prototype" and hopefully I'll come up with something meaningful to share with you. Or - if have another idea / approach - let me know :)

David Young

unread,
Jul 23, 2016, 8:55:52 AM7/23/16
to Apparatus
On Fri, Jul 15, 2016 at 12:06:08AM -0700, luca leone wrote:
> very interesting Dave. If you like the Canon Cat and Tangle then we share
> the same interests. I was very much influenced by The Humane Interface and
> I've been reading Victor for the last year. I'd love to see your parametric
> documents :) In the meantime I'll work on my "analytics prototype" and
> hopefully I'll come up with something meaningful to share with you. Or - if
> have another idea / approach - let me know :)

Luca,

I demonstrate a "parametic document" at work in
https://vimeo.com/172032647 . You may notice some bugs: in a nice
illustration of the "locus of attention," most of the bugs totally
escaped my attention while I made the recording.

In The Humane Interface, Raskin wrote of "transformers," but he
did not go into a lot of detail. I have been developing the
idea of transformers, which I call "lenses." I think of them as
direct-manipulation, live-evaluation UNIX filters. The calculator
behaviors that you see in my demo are roughly in correspondence with
a UNIX calculator such as "bc". I have a live "tee" and "sort". The
lenses should compose, and they will. In this environment, a program
like Apparatus would probably consist of a handful of lenses.

luca leone

unread,
Aug 31, 2016, 3:19:51 AM8/31/16
to Apparatus
Hi Dave :)

very sorry to be so late. I've been on vacation first, then overwhelmed by work. I've watched the demo video of your parametric document, and I think it's VERY interesting what you developed. I saw the lenses: the functionality from a user perspective is similar to what I with Bret Victor tangle.js right (I'm talking about the moving numbers when you drag vertically at the end of the video)?  

You were right at the beginning, what you are doing is very close to my idea of a back-of-the-envelop analytics-calculator (if these last definition makes sense ;-)

David Young

unread,
Aug 31, 2016, 3:52:49 PM8/31/16
to Apparatus
On Wed, Aug 31, 2016 at 12:19:51AM -0700, luca leone wrote:
> Hi Dave :)
>
> very sorry to be so late. I've been on vacation first, then
> overwhelmed by work. I've watched the demo video of your parametric
> document, and I think it's VERY interesting what you developed. I saw
> the lenses: the functionality from a user perspective is similar to
> what I with Bret Victor tangle.js right (I'm talking about the moving
> numbers when you drag vertically at the end of the video)?

Luca,

Happy to hear from you. I'm glad you found the video interesting. Just
yesterday, I made a second video that shows "tee" and "sort" as well as
the calculator. https://vimeo.com/180907829

The new video has narration, but sometimes I have a hard time
understanding my own words! Sorry the sound quality is so poor.
Reply all
Reply to author
Forward
0 new messages