DCD9D9
RGB Hex value:
Alpha value:
Button
undefined
Gravatar Demo
X
M

1
About Fabrik-style hookup and the Parts List
X

Menu
I'll start by documenting what *is*, and then say a bit about where I want to get to. That way, you can start playing with it right away, and maybe help me get it to a better state of completion. Where this began: When we use connect currently, there are several things that make it not feel lightweight and natural. First, if we want to connect things up, there are no connectors for us to use, let alone to suggest the possibility of connection. Instead we have to invoke a connection mode from the morph menu, and we have to choose from more sources than are normally useful. Similarly as we try to connect a source to another component, it is done through a menu with many items. The first goal of this project is to make things as simple as in Fabrik (and hooking up your TV) - draw a wire from a named pin on a source, and drop it on a named pin on the thing you want to hook it to. Poof, it's done. I have done this in a manner that uses the exact same connect framework so that it can fairly easily be an option for lots of our application programming. This may not be the best approach, but it seemed to me the simplest thing that could possibly work. The main artifact here, and the other introduction to the UI is what I call a parts list. When you use its 'choose target' button, you can point it at a world or something within the world that works as a similar interacting set of components (the example I've used is Bert's Gravatar demo). This presents a list of the parts in that world or similar context and shows what are the natural inputs and outputs of widget-like things and various processing-like things. It shows these in a spreadsheet-like grid, along with a few items such as their property name, input/output modality, and current value. If an output has been connected to an input, then that is indicated in the column that is currently named 'rule'. By analogy to spreadsheets, when a given object property (row) is selected, a text frame displays an editable conversion rule that is the 'converter function' of the current connect mechanism. Here again, instead of the user having to think of making a converter, and invoking it by a menu command, and perhaps having to figure where to put it on the screen, there is already a place for it, and it is ready to use with no gesture needed except to select the property in the parts list, just like a cell in a spreadsheet. The parts list panel has a few more affordances - an update button that causes the grid to be updated if components or connections have been added or removed, and a ticking button that should be able to be on all the time, rendering the update button useless. That's the idea at least. There's also a prototypical pin that is cloned to provide pins for connectable properties when you use the show pins/hide pins control. Here the idea was that pins would be show all the time during development, but probably hidden when the application is in use. Don't try to use the pin; it's just there so i can edit the prototype, and so that this entire mechanism can be saved as a single part in the PartsBin. If you are curious about how the thing is designed and what is the state of completion, then read the two methods aboutMe and yetToDo in the parts list object. I put these two methods in everything I build, and they usually appear at the beginning and end of the method list. Things actually work already, and you can play with the various components in this world, including buttons, text, lists, a colorChooser and an elephant. You can see what preparation I've done for these particular components in the method, installPinSpecs. Many objects in the system have similar protocols to support visual connect, and I simply haven't reconciled my approach with that existing pattern. Now would be as good a time as any to do so. Because the parts list is simply a view of objects and connections, it can be removed, the world saved and reloaded, and anew parts list happily reinstated. Also, to a certain extent (I've been playing with Bert's Gravitar example), the parts list can even be hooked up to view and alter some connect-heavy apps written before the parts list existed. If you wanted to experiment with hooking some data to a D3 view, you would want to declare pinSpecs for the D3 views, and then type your data into a text window. You could hook the savedTextString of the text to the input of D3 with a converter that would do an eval of the string. In case it isn't clear, connections can be made by wiring between pins, and they can be broken by deleting the wires. You can also use all the old connect mechanisms with the same effect. The 'rule' column is mislabeled - it should probably be called 'source' - and you cannot write in it. The only thing that can be written in the table at this time is the function pane at the bottom that is intended to be analogous to the rule edit pane of a spreadsheet, and that is simply a view onto a connect converter.simply a view onto a connect converter. To try it out, select the line for Elephant.setScale, and edit the function to return 2*value.
Connected
Parts List on <lively.morphic.World#1>
X
M

function converter(value) { return 2*value; }
Update
Stop Ticking
hide pins
morph
pin
I/O
value
rule
ColorPicker
color
output
rgb(220,217,217)

Slider
value
output
0.4341

Button
fire
output
true

Elephant
setScale
input
0.4341
Slider.value
Elephant
setFill
input
rgb(220,217,217)
ColorPicker.color
Text3
textString
input
true
Button.fire
Text3
savedTextString
output
undefined

List
setList
input
undefined
List.onLoad
List
selection
output
1

Text4
textString
input
1
List.selection
Text4
savedTextString
output
undefined

Text2
textString
input
--

Text2
savedTextString
output
undefined































choose target