How to add a property to a morph visually

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

How to add a property to a morph visually

milan zimmermann
Hi:

I am trying to build a quick extremely simple library management application.

Something I am missing that is likely due to my lack of Lively skills:
I create a Morph and call it "Library Application" in the World. I'd
like to add to it a member called "books" which would be a list. Is
there a way to do it visually, apart from creating the Library
Application as a Morph extension with the books member?

(I am afraid following this I have more - naive - questions. Sorry for
the noise...)

Thanks

milan
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

milan zimmermann
On Fri, Feb 10, 2012 at 11:52 PM, Milan Zimmermann
<[hidden email]> wrote:

> Hi:
>
> I am trying to build a quick extremely simple library management application.
>
> Something I am missing that is likely due to my lack of Lively skills:
> I create a Morph and call it "Library Application" in the World. I'd
> like to add to it a member called "books" which would be a list. Is
> there a way to do it visually, apart from creating the Library
> Application as a Morph extension with the books member?
>
> (I am afraid following this I have more - naive - questions. Sorry for
> the noise...)
>
> Thanks
>
> milan

Hmm, now I have formulated my question at another level. I am going
through the Professors introduction. There is a Morph named
ElProfesorOnLivelyKernel. It has a member "this.pages" - I search the
code but cannot figure out where is "this.pages" instantiated, and how
can I see it is a member of ElProfesorOnLivelyKernel, apart from
seeing it in the Editor code... I appreciate any hints however obvious
:)

Thanks,

milan
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

milan zimmermann
On Sat, Feb 11, 2012 at 12:49 AM, Milan Zimmermann
<[hidden email]> wrote:

> On Fri, Feb 10, 2012 at 11:52 PM, Milan Zimmermann
> <[hidden email]> wrote:
>> Hi:
>>
>> I am trying to build a quick extremely simple library management application.
>>
>> Something I am missing that is likely due to my lack of Lively skills:
>> I create a Morph and call it "Library Application" in the World. I'd
>> like to add to it a member called "books" which would be a list. Is
>> there a way to do it visually, apart from creating the Library
>> Application as a Morph extension with the books member?
>>
>> (I am afraid following this I have more - naive - questions. Sorry for
>> the noise...)
>>
>> Thanks
>>
>> milan
>
> Hmm, now I have formulated my question at another level. I am going
> through the Professors introduction. There is a Morph named
> ElProfesorOnLivelyKernel. It has a member "this.pages" - I search the
> code but cannot figure out where is "this.pages" instantiated, and how
> can I see it is a member of ElProfesorOnLivelyKernel, apart from
> seeing it in the Editor code... I appreciate any hints however obvious
> :)
>
> Thanks,
>
> milan

Well I was not clear in my question .. "this.pages" must be a
deserialized Morph, from the xhtml page (or dragged from Parts Bin),
but, how would I create the "this.pages" list and add to the
ElProfesorOnLivelyKernel as a member, if I was to create the Profesor
from scratch ... sorry about keep expanding this, will stop ...

Thanks,

milan
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

Fabian Bornhofen-2
Hi Milan -

you can add properties to a Morph in the same way you can add
properties to any JavaScript object:
aMorph.foo = 'Bar';
would set aMorph's 'foo' property to 'Bar', no matter if it existed
before or not.

In the Object Editor window, 'this' is bound to the morph you're
editing, so you can just open the OE on a morph and eval something
like this.newProperty = newValue. Properties added this way will also
be serialized with the morph.

So I guess there is two things to adding properties to morphs:
(a) it's actually terribly easy if you know how to do it
(b) it's incredibly hard if you don't
It's also hard to tell where and when (class creation? by the user?) a
property was added and which properties are actually crucial for the
code in class Morph to work and which are user-defined add-ons. That's
something to think about.

Best,
Fabian

On Fri, Feb 10, 2012 at 11:10 PM, Milan Zimmermann
<[hidden email]> wrote:

> On Sat, Feb 11, 2012 at 12:49 AM, Milan Zimmermann
> <[hidden email]> wrote:
>> On Fri, Feb 10, 2012 at 11:52 PM, Milan Zimmermann
>> <[hidden email]> wrote:
>>> Hi:
>>>
>>> I am trying to build a quick extremely simple library management application.
>>>
>>> Something I am missing that is likely due to my lack of Lively skills:
>>> I create a Morph and call it "Library Application" in the World. I'd
>>> like to add to it a member called "books" which would be a list. Is
>>> there a way to do it visually, apart from creating the Library
>>> Application as a Morph extension with the books member?
>>>
>>> (I am afraid following this I have more - naive - questions. Sorry for
>>> the noise...)
>>>
>>> Thanks
>>>
>>> milan
>>
>> Hmm, now I have formulated my question at another level. I am going
>> through the Professors introduction. There is a Morph named
>> ElProfesorOnLivelyKernel. It has a member "this.pages" - I search the
>> code but cannot figure out where is "this.pages" instantiated, and how
>> can I see it is a member of ElProfesorOnLivelyKernel, apart from
>> seeing it in the Editor code... I appreciate any hints however obvious
>> :)
>>
>> Thanks,
>>
>> milan
>
> Well I was not clear in my question .. "this.pages" must be a
> deserialized Morph, from the xhtml page (or dragged from Parts Bin),
> but, how would I create the "this.pages" list and add to the
> ElProfesorOnLivelyKernel as a member, if I was to create the Profesor
> from scratch ... sorry about keep expanding this, will stop ...
>
> Thanks,
>
> milan
> _______________________________________________
> lively-kernel mailing list
> [hidden email]
> http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

First steps with Lively Sound

Dan Ingalls-4
In reply to this post by milan zimmermann
Folks -

I finally found a simple sound interface that promises to work for Chrome and Firefox, and to invoke Flash in other cases.


I have a test page working now (in Chrome only) that is capable of generating samples on the fly from my PianoKeyboard morph.

If you'd like to play with it, check out


Caveats:
Of course it sounds crappy because I'm just using a sawtooth wave to test, and there's no reverb, etc, etc.
There seems to be some problem with text in firefox that is preventing it from working there
I've had the basic sound buffer working before in FF
In Safari it claims to load the Flash failure code, but that does not work yet.
Don't try glissando (sliding the mouse on the keyboard) - it will pull the keys off your piano!

Next steps:
Get Stereo and pan working
Port the basic synthesis kernel from Squeak for polyphony and interesting timbres

If you can get it working in some of the other browsers you'll be my hero.

  - Dan

_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

milan zimmermann
In reply to this post by Fabian Bornhofen-2
Thanks Fabian.

This is indeed easy once you described it :) [I assume by OE you mean
the Introspector/Explorer(?), because I did not find a way to do it
from Object Editor - I am only able to add scripts from the Object
Editor]

From the bottom panel of the Introspector/Explorer it works to add a
member just by doing this.books=[]; as you said, thanks.

I tried to add it that way from the introspector/Explorer before, but
now I see my focus must have been on another property like "_Position"
and the bottom pane of the Inspector operates on the focused field, so
the field was not added where I expected it -  which again makes sense
once I know ... [So I thought the bottom Introspector pane did not
work ... I did my homework but slopily]

Perhaps one more question - is there a more visual way to add a
property .. I am thinking, if there was a way to have a List in the
Parts bin, I could drag it on my Morph and it would be added it as a
member ... I guess I am looking for a way to compose non-morph objects
visually into morphs or non-morphs in a way equivalent to how morphs
are composed by grabbing and dropping. But that is only an aside.

Thanks for your help
milan

On Sat, Feb 11, 2012 at 1:32 AM, Fabian Bornhofen
<[hidden email]> wrote:

> Hi Milan -
>
> you can add properties to a Morph in the same way you can add
> properties to any JavaScript object:
> aMorph.foo = 'Bar';
> would set aMorph's 'foo' property to 'Bar', no matter if it existed
> before or not.
>
> In the Object Editor window, 'this' is bound to the morph you're
> editing, so you can just open the OE on a morph and eval something
> like this.newProperty = newValue. Properties added this way will also
> be serialized with the morph.
>
> So I guess there is two things to adding properties to morphs:
> (a) it's actually terribly easy if you know how to do it
> (b) it's incredibly hard if you don't
> It's also hard to tell where and when (class creation? by the user?) a
> property was added and which properties are actually crucial for the
> code in class Morph to work and which are user-defined add-ons. That's
> something to think about.
>
> Best,
> Fabian
>
> On Fri, Feb 10, 2012 at 11:10 PM, Milan Zimmermann
> <[hidden email]> wrote:
>> On Sat, Feb 11, 2012 at 12:49 AM, Milan Zimmermann
>> <[hidden email]> wrote:
>>> On Fri, Feb 10, 2012 at 11:52 PM, Milan Zimmermann
>>> <[hidden email]> wrote:
>>>> Hi:
>>>>
>>>> I am trying to build a quick extremely simple library management application.
>>>>
>>>> Something I am missing that is likely due to my lack of Lively skills:
>>>> I create a Morph and call it "Library Application" in the World. I'd
>>>> like to add to it a member called "books" which would be a list. Is
>>>> there a way to do it visually, apart from creating the Library
>>>> Application as a Morph extension with the books member?
>>>>
>>>> (I am afraid following this I have more - naive - questions. Sorry for
>>>> the noise...)
>>>>
>>>> Thanks
>>>>
>>>> milan
>>>
>>> Hmm, now I have formulated my question at another level. I am going
>>> through the Professors introduction. There is a Morph named
>>> ElProfesorOnLivelyKernel. It has a member "this.pages" - I search the
>>> code but cannot figure out where is "this.pages" instantiated, and how
>>> can I see it is a member of ElProfesorOnLivelyKernel, apart from
>>> seeing it in the Editor code... I appreciate any hints however obvious
>>> :)
>>>
>>> Thanks,
>>>
>>> milan
>>
>> Well I was not clear in my question .. "this.pages" must be a
>> deserialized Morph, from the xhtml page (or dragged from Parts Bin),
>> but, how would I create the "this.pages" list and add to the
>> ElProfesorOnLivelyKernel as a member, if I was to create the Profesor
>> from scratch ... sorry about keep expanding this, will stop ...
>>
>> Thanks,
>>
>> milan
>> _______________________________________________
>> lively-kernel mailing list
>> [hidden email]
>> http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

Lincke, Jens
In reply to this post by milan zimmermann
Hi, Milan

what Fabian meant was that the "this" in the Object Editor (Scriptor) is bound to the object.
I use this to evaluate parts of methods... for example individual lines of the reset methods.

Type "this.foo = [1,2, 3]" 

Am 11.02.2012 um 06:52 schrieb Milan Zimmermann: Is
there a way to do it visually, apart from creating the Library
Application as a Morph extension with the books member?

What I do when I want to have lists in parts I drag a list into that part and have it there.
The actual list is than hold by that list morph and I access it with:
this.get('ListMorph').getList();
this.get('ListMorph').setList(["foo", "bar"]);

This is the way we use lists in most of our Tools, e.g. the Script Editor, PartsBin etc..

Best,
Jens

_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

Roeder, Marko
In reply to this post by milan zimmermann
Hi Milan -

Well I was not clear in my question .. "this.pages" must be a
deserialized Morph, from the xhtml page (or dragged from Parts Bin),
but, how would I create the "this.pages" list and add to the
ElProfesorOnLivelyKernel as a member, if I was to create the Profesor
from scratch …

To make it obvious that this attribute has been added to the Part/rectangle/... , we sometimes added a script called reset() via the ObjectExplorer that simply adds/clears those attributes (you might have to look at some Parts to find one that uses reset - but for example the PartsBin (Tools -> PartsBinBrowser) does).

So in your case it could be something like this:

this.addScript(function reset() {
    this.books = [];
}).tag([]);

Additionally, having defined this script you will also get a menu item "reset" (halo item (M)enu) that executes it. In case of the PartsBinBrowser for example we use reset() to clear any state before publishing changes back to the PartsBin.

Best,

- Marko

_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel

smime.p7s (6K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

milan zimmermann
In reply to this post by Lincke, Jens
On Sat, Feb 11, 2012 at 4:41 AM, Jens Lincke
<[hidden email]> wrote:
> Hi, Milan
>
> what Fabian meant was that the "this" in the Object Editor (Scriptor) is
> bound to the object.
> I use this to evaluate parts of methods... for example individual lines of
> the reset methods.
>
> Type "this.foo = [1,2, 3]"

ah I see Thanks Jens - I seem to be let down by small usability issues
.. when I tried to click in the OE earlier, I clicked somewhere in the
pane and started typing, but nothing happened. I see now that I have
to click on the very top of the pane, and start typing, as the text
box is only one line. (I realize this is the same in the any text, but
I got used to it on a one-line texts or if the text is not empty; I
wonder if there is a way for the text field to be more like a
multi-line text area that fills it's owner even if empty...)

>
> Am 11.02.2012 um 06:52 schrieb Milan Zimmermann: Is
>
> there a way to do it visually, apart from creating the Library
> Application as a Morph extension with the books member?
>
>
> What I do when I want to have lists in parts I drag a list into that part
> and have it there.
> The actual list is than hold by that list morph and I access it with:
> this.get('ListMorph').getList();
> this.get('ListMorph').setList(["foo", "bar"]);
> etc...
> see http://lively-kernel.org/repository/webwerkstatt/documentation/livedoc/Morphic/Widgets/List.xhtml
>
> This is the way we use lists in most of our Tools, e.g. the Script Editor,
> PartsBin etc..

Thanks, all the livedocs are greatly useful - what I meant here
though, was whether there is a way to add a Javascript list object []
(rather than a List Morph) as a non-visual container to a Morph (or
other non-visual object) but do that visually by drag and drop. Sort
of being able to wrap any Javascript object (not just a Morph) into a
"visual representation" such as a tile, and use those tiles to build
other objects, whether they are Morphs or plain objects. But that is
an aside, thanks for everyone's help!

Later,

milan
>
> Best,
> Jens
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: First steps with Lively Sound

Robert Krahn-4
In reply to this post by Dan Ingalls-4
> Of course it sounds crappy because I'm just using a sawtooth wave to test, and there's no reverb, etc, etc.
> There seems to be some problem with text in firefox that is preventing it from working there
> I've had the basic sound buffer working before in FF

The callback that was used in the synth object was only working for Chrome audio. I changed it to let it call the more general method.

> In Safari it claims to load the Flash failure code, but that does not work yet.

The audio lib works with Safari but currently only on HTML pages. The SWF object is not correctly embedded in XHTML pages and thus the audio interface isn't available. Can anyone who know more then me about Flash have a look at that?


Some slight improvements:
- no need to execute the workspace every time, the synth object will be deserialized
- use morphic to for stepping
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: How to add a property to a morph visually

milan zimmermann
In reply to this post by Roeder, Marko
On Sat, Feb 11, 2012 at 7:18 AM, Roeder, Marko
<[hidden email]> wrote:

> Hi Milan -
>
> Well I was not clear in my question .. "this.pages" must be a
> deserialized Morph, from the xhtml page (or dragged from Parts Bin),
> but, how would I create the "this.pages" list and add to the
> ElProfesorOnLivelyKernel as a member, if I was to create the Profesor
> from scratch …
>
>
> To make it obvious that this attribute has been added to the
> Part/rectangle/... , we sometimes added a script called reset() via the
> ObjectExplorer that simply adds/clears those attributes (you might have to
> look at some Parts to find one that uses reset - but for example the
> PartsBin (Tools -> PartsBinBrowser) does).
>
> So in your case it could be something like this:
>
> this.addScript(function reset() {
>     this.books = [];
> }).tag([]);
>
> Additionally, having defined this script you will also get a menu item
> "reset" (halo item (M)enu) that executes it. In case of the PartsBinBrowser
> for example we use reset() to clear any state before publishing changes back
> to the PartsBin.
>
> Best,
>
> - Marko

Marko:

Perfect, this is a great convention - just the sort of thing I was
looking for, as it makes it obvious there is a way for the Morph state
to be (re)initialized and is found by the method search!

I will be using that

Thanks,

milan
_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: First steps with Lively Sound

Dan Ingalls
In reply to this post by Dan Ingalls-4
Yayy, progress...

The PianoKeyboard in the Parts Bin now includes a built-in synthesizer (still very crude) so it can make sound.

There's a demo page at...


This works in Chrome and Firefox but not in Safari, where it tries to fall back to Flash, but this does not work for some reason. If you can figure out what is wrong with the Flash code, please let us know! Thanks to Robert for several tips and fixes.

- Dan
-----------
On Feb 11, 2012, at 12:20 AM, Daniel Ingalls wrote:

Folks -

I finally found a simple sound interface that promises to work for Chrome and Firefox, and to invoke Flash in other cases.


I have a test page working now (in Chrome only) that is capable of generating samples on the fly from my PianoKeyboard morph.

If you'd like to play with it, check out


Caveats:
Of course it sounds crappy because I'm just using a sawtooth wave to test, and there's no reverb, etc, etc.
There seems to be some problem with text in firefox that is preventing it from working there
I've had the basic sound buffer working before in FF
In Safari it claims to load the Flash failure code, but that does not work yet.
Don't try glissando (sliding the mouse on the keyboard) - it will pull the keys off your piano!

Next steps:
Get Stereo and pan working
Port the basic synthesis kernel from Squeak for polyphony and interesting timbres

If you can get it working in some of the other browsers you'll be my hero.

  - Dan


_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
Reply | Threaded
Open this post in threaded view
|

Re: First steps with Lively Sound

John Maloney
Excellent progress!

It will be great when the sampled audio API get's picked up by other browsers.

At the moment, I don't know of any way to do sound synthesis from a browser on iOS. Safari doesn't support either the FF or Chrome sampled sound API and, of course, the iPad doesn't support Flash either. Please let me know if you figure out a way!

        -- John


On Feb 13, 2012, at 2:06 AM, Daniel Ingalls wrote:

> Yayy, progress...
>
> The PianoKeyboard in the Parts Bin now includes a built-in synthesizer (still very crude) so it can make sound.
>
> There's a demo page at...
>
>     http://lively-kernel.org/repository/webwerkstatt/users/Dan/SoundTest2.xhtml
>
> This works in Chrome and Firefox but not in Safari, where it tries to fall back to Flash, but this does not work for some reason.  If you can figure out what is wrong with
>  the Flash code, please let us know!
>
> Thanks to Robert
> for several tips and fixes.
>
>   - Dan
> -----------
> On Feb 11, 2012, at 12:20 AM, Daniel Ingalls wrote:
>
>> Folks -
>>
>> I finally found a simple sound interface that promises to work for Chrome and Firefox, and to invoke Flash in other cases.
>>
>> https://github.com/grantgalitz/XAudioJS
>>
>> I have a test page working now (in Chrome only) that is capable of generating samples on the fly from my PianoKeyboard morph.
>>
>> If you'd like to play with it, check out
>>
>> http://lively-kernel.org/repository/webwerkstatt/users/Dan/SoundTest1.xhtml
>>
>> Caveats:
>> Of course it sounds crappy because I'm just using a sawtooth wave to test, and there's no reverb, etc, etc.
>> There seems to be some problem with text in firefox that is preventing it from working there
>> I've had the basic sound buffer working before in FF
>> In Safari it claims to load the Flash failure code, but that does not work yet.
>> Don't try glissando (sliding the mouse on the keyboard) - it will pull the keys off your piano!
>>
>> Next steps:
>> Get Stereo and pan working
>> Port the basic synthesis kernel from Squeak for polyphony and interesting timbres
>>
>> If you can get it working in some of the other browsers you'll be my hero.
>>
>>   - Dan
>

_______________________________________________
lively-kernel mailing list
[hidden email]
http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel