run
load
select all
select none
lively.morphic.Tests
TestRunner
X
M
–
If something does not look right you can reset the sandbox:
save world
This is a sandbox... \n\tyou can change it\n\tplay around\n\tand save it:
![](\"http://lively-kernel.org/repository/webwerkstatt/media/hpi_logo.png\"){kind=logo}
Grazie per le prove!
Welcome to the sandbox in Webwerkstatt!\nThis page can be used to try out Lively and available applications. You might want to start with a tutorial about how objects can be manipulated (mov|webm). For more documentation please see the FAQ. If you have problems add a question there or send it to the mailing list. Shortcuts are here.\n\nPlease note: To save this and other pages you need an account!\n\nSee also the PartsBin sandbox page.
Webwerkstatt Sandbox\n
reset
// undefinedevaluate the following lines step by step by selecting an\n// expression and press CMD or Ctrl + d\n\n// Morphs have a name\ncar = $morph('Car');\nshow(car)\n\n// we can add methods to morphs\ncar.addScript(function drive() {\n this.moveBy(pt(10, 0))\n})\n\n// evaluate to move the car a bit\ncar.drive()\n\n// we enhance the drive method so that the car will not leave the visble bounds\ncar.addScript(function drive() {\n if (this.world().visibleBounds().containsRect(this.bounds()))\n this.moveBy(pt(10, 0))\n})\n\n// now we let the car drive alone\ncar.startStepping(60/*ms*/, 'drive')\n\n// stop it!\ncar.stopStepping()\n\n// Can you extend drive() so that the car turns when it reaches a border?
Code example: Building a car
X
M
–
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
x0
x0
x1
x2
x3
x4
x5
x6
x7
0
0
letter score
word score
game score
top word
best game
best word
multiplier
pause
restart
quick
how to play
clear (esc)
delete (del)
enter (retn)
Quick Brown Fox
X
M
–
x0
x0
x1
x2
x3
x4
x5
x6
x7
0
0
letter score
word score
game score
top word
best game
best word
multiplier
pause
restart
quick
how to play
clear (esc)
delete (del)
enter (retn)
Quick Brown Fox
X
M
–
","extent":{"__isSmartRef__":true,"id":3287},"__LivelyClassName__":"lively.morphic.Shapes.External","__SourceModuleName__":"Global.lively.morphic.Shapes"},"3285":{"init":"initHTML","appendShape":"renderHTML","setPosition":"setPositionHTML","setExtent":"setExtentHTML","setFill":"setFillHTML","setBorderColor":"setBorderColorHTML","setBorderWidth":"setBorderWidthHTML","setStrokeOpacity":"setStrokeOpacityHTML","setBorderRadius":"setBorderRadiusHTML","setBorderStyle":"setBorderStyleHTML","setOpacity":"setOpacityHTML","setClipMode":"setClipModeHTML","getExtent":"getExtentHTML"},"3286":{"x":94,"y":94,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3287":{"x":0,"y":0,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3288":{"replaceRenderContext":"replaceRenderContextHTML","init":"initHTML","append":"appendHTML","remove":"removeHTML","triggerEvent":"triggerEventHTML","setTransform":"setTransformHTML","setPosition":"setPositionHTML","setRotation":"setRotationHTML","setExtent":"setExtentHTML","setScale":"setScaleHTML","setVisible":"setVisibleHTML","setOrigin":"setOriginHTML","setPivotPoint":"setPivotPointHTML","setClipMode":"setClipModeHTML","showsVerticalScrollBar":"showsVerticalScrollBarHTML","showsHorizontalScrollBar":"showsHorizontalScrollBarHTML","getScrollBarExtent":"getScrollBarExtentHTML","setHandStyle":"setHandStyleHTML","setPointerEvents":"setPointerEventsHTML","setToolTip":"setToolTipHTML","focus":"focusHTML","blur":"blurHTML","setFocusable":"setFocusableHTML"},"3289":{"morph":{"__isSmartRef__":true,"id":3283},"__LivelyClassName__":"lively.morphic.EventHandler","__SourceModuleName__":"Global.lively.morphic.Events"},"3290":{"x":3,"y":3,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3291":{"x":0,"y":0,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3292":{"submorphs":[],"scripts":[],"shape":{"__isSmartRef__":true,"id":3293},"id":2208,"renderContextTable":{"__isSmartRef__":true,"id":3298},"textChunks":[{"__isSmartRef__":true,"id":3299}],"eventHandler":{"__isSmartRef__":true,"id":3301},"grabbingEnabled":false,"droppingEnabled":false,"halosEnabled":true,"_Padding":{"__isSmartRef__":true,"id":3302},"_ClipMode":"hidden","fixedWidth":false,"_WhiteSpaceHandling":"pre","fixedHeight":false,"allowInput":false,"_FontFamily":"Helvetica","_FontSize":8,"_Position":{"__isSmartRef__":true,"id":3303},"priorExtent":{"__isSmartRef__":true,"id":3304},"_MaxTextWidth":null,"_MaxTextHeight":null,"_MinTextWidth":null,"_MinTextHeight":null,"evalEnabled":false,"isLabel":true,"_HandStyle":"default","_Align":"center","eventsAreIgnored":true,"_PointerEvents":"none","owner":{"__isSmartRef__":true,"id":3282},"_Visible":true,"__LivelyClassName__":"lively.morphic.Text","__SourceModuleName__":"Global.lively.morphic.TextCore"},"3293":{"_Position":{"__isSmartRef__":true,"id":3294},"renderContextTable":{"__isSmartRef__":true,"id":3295},"_Extent":{"__isSmartRef__":true,"id":3296},"_ClipMode":"hidden","_BorderWidth":0,"_BorderColor":{"__isSmartRef__":true,"id":162},"_Fill":{"__isSmartRef__":true,"id":3297},"_Opacity":0.8,"_BorderRadius":2,"__LivelyClassName__":"lively.morphic.Shapes.Rectangle","__SourceModuleName__":"Global.lively.morphic.Shapes"},"3294":{"x":0,"y":0,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3295":{"init":"initHTML","appendShape":"renderHTML","setPosition":"setPositionHTML","setExtent":"setExtentHTML","setFill":"setFillHTML","setBorderColor":"setBorderColorHTML","setBorderWidth":"setBorderWidthHTML","setStrokeOpacity":"setStrokeOpacityHTML","setBorderRadius":"setBorderRadiusHTML","setBorderStyle":"setBorderStyleHTML","setOpacity":"setOpacityHTML","setClipMode":"setClipModeHTML"},"3296":{"x":70,"y":15,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3297":{"r":1,"g":1,"b":1,"a":1,"__LivelyClassName__":"Color","__SourceModuleName__":"Global"},"3298":{"replaceRenderContext":"replaceRenderContextHTML","init":"initHTML","append":"appendHTML","remove":"removeHTML","triggerEvent":"triggerEventHTML","setTransform":"setTransformHTML","setPosition":"setPositionHTML","setRotation":"setRotationHTML","setExtent":"setExtentHTML","setScale":"setScaleHTML","setVisible":"setVisibleHTML","setOrigin":"setOriginHTML","setPivotPoint":"setPivotPointHTML","setClipMode":"setClipModeHTML","showsVerticalScrollBar":"showsVerticalScrollBarHTML","showsHorizontalScrollBar":"showsHorizontalScrollBarHTML","getScrollBarExtent":"getScrollBarExtentHTML","setHandStyle":"setHandStyleHTML","setPointerEvents":"setPointerEventsHTML","setToolTip":"setToolTipHTML","focus":"focusHTML","blur":"blurHTML","setFocusable":"setFocusableHTML","updateText":"updateTextHTML","setTextExtent":"setTextExtentHTML","setMaxTextWidth":"setMaxTextWidthHTML","setMaxTextHeight":"setMaxTextHeightHTML","setMinTextWidth":"setMinTextWidthHTML","setMinTextHeight":"setMinTextHeightHTML","getTextExtent":"getTextExtentHTML","getTextString":"getTextStringHTML","ignoreTextEvents":"ignoreTextEventsHTML","enableTextEvents":"enableTextEventsHTML","setFontFamily":"setFontFamilyHTML","setFontSize":"setFontSizeHTML","setTextColor":"setTextColorHTML","setPadding":"setPaddingHTML","setAlign":"setAlignHTML","setVerticalAlign":"setVerticalAlignHTML","setDisplay":"setDisplayHTML","setWhiteSpaceHandling":"setWhiteSpaceHandlingHTML","focusMorph":"focusMorphHTML"},"3299":{"style":{"__isSmartRef__":true,"id":3300},"chunkOwner":{"__isSmartRef__":true,"id":3292},"storedString":"RotatingStar","__LivelyClassName__":"lively.morphic.TextChunk","__SourceModuleName__":"Global.lively.morphic.TextCore"},"3300":{"__LivelyClassName__":"lively.morphic.TextEmphasis","__SourceModuleName__":"Global.lively.morphic.TextCore"},"3301":{"morph":{"__isSmartRef__":true,"id":3292},"__LivelyClassName__":"lively.morphic.EventHandler","__SourceModuleName__":"Global.lively.morphic.Events"},"3302":{"x":5,"y":2,"width":0,"height":-2,"__LivelyClassName__":"Rectangle","__SourceModuleName__":"Global"},"3303":{"x":15,"y":81,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3304":{"x":40,"y":10,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3305":{"_Position":{"__isSmartRef__":true,"id":3306},"renderContextTable":{"__isSmartRef__":true,"id":3307},"_Extent":{"__isSmartRef__":true,"id":3308},"_ClipMode":"visible","_BorderColor":{"__isSmartRef__":true,"id":162},"_Fill":{"__isSmartRef__":true,"id":3309},"_BorderRadius":6,"_BorderWidth":0,"__LivelyClassName__":"lively.morphic.Shapes.Rectangle","__SourceModuleName__":"Global.lively.morphic.Shapes"},"3306":{"x":0,"y":0,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3307":{"init":"initHTML","appendShape":"renderHTML","setPosition":"setPositionHTML","setExtent":"setExtentHTML","setFill":"setFillHTML","setBorderColor":"setBorderColorHTML","setBorderWidth":"setBorderWidthHTML","setStrokeOpacity":"setStrokeOpacityHTML","setBorderRadius":"setBorderRadiusHTML","setBorderStyle":"setBorderStyleHTML","setOpacity":"setOpacityHTML","setClipMode":"setClipModeHTML"},"3308":{"x":100,"y":100,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3309":{"r":0.9,"g":0.9,"b":0.9,"a":1,"__LivelyClassName__":"Color","__SourceModuleName__":"Global"},"3310":{"replaceRenderContext":"replaceRenderContextHTML","init":"initHTML","append":"appendHTML","remove":"removeHTML","triggerEvent":"triggerEventHTML","setTransform":"setTransformHTML","setPosition":"setPositionHTML","setRotation":"setRotationHTML","setExtent":"setExtentHTML","setScale":"setScaleHTML","setVisible":"setVisibleHTML","setOrigin":"setOriginHTML","setPivotPoint":"setPivotPointHTML","setClipMode":"setClipModeHTML","showsVerticalScrollBar":"showsVerticalScrollBarHTML","showsHorizontalScrollBar":"showsHorizontalScrollBarHTML","getScrollBarExtent":"getScrollBarExtentHTML","setHandStyle":"setHandStyleHTML","setPointerEvents":"setPointerEventsHTML","setToolTip":"setToolTipHTML","focus":"focusHTML","blur":"blurHTML","setFocusable":"setFocusableHTML"},"3311":{"morph":{"__isSmartRef__":true,"id":3282},"__LivelyClassName__":"lively.morphic.EventHandler","__SourceModuleName__":"Global.lively.morphic.Events"},"3312":{"x":210,"y":105,"__LivelyClassName__":"Point","__SourceModuleName__":"Global"},"3313":{"protocol":"http:","hostname":"www.lively-kernel.org","pathname":"/repository/webwerkstatt/PartsBin/Demos/","__LivelyClassName__":"URL","__SourceModuleName__":"Global.lively.Network"},"3314":{"partsSpaceName":"PartsBin/Demos/","name":"RotatingStar","part":null,"json":null,"__LivelyClassName__":"lively.PartsBin.PartItem","__SourceModuleName__":"Global.lively.PartsBin"},"3315":{"submorphs":[{"__isSmartRef__":true,"id":3316},{"__isSmartRef__":true,"id":3325}],"scripts":[],"shape":{"__isSmartRef__":true,"id":3338},"id":2209,"renderContextTable":{"__isSmartRef__":true,"id":3343},"eventHandler":{"__isSmartRef__":true,"id":3344},"droppingEnabled":true,"halosEnabled":true,"__layered_draggingEnabled__":true,"accessibleInInactiveWindow":true,"_Position":{"__isSmartRef__":true,"id":3345},"partsBinURL":{"__isSmartRef__":true,"id":3346},"targetName":"Windmill","partItem":{"__isSmartRef__":true,"id":3347},"owner":{"__isSmartRef__":true,"id":2993},"isSelected":false,"__LivelyClassName__":"lively.morphic.PartsBinItem","__SourceModuleName__":"Global.lively.morphic.ScriptingSupport"},"3316":{"submorphs":[],"scripts":[],"shape":{"__isSmartRef__":true,"id":3317},"id":2243,"renderContextTable":{"__isSmartRef__":true,"id":3321},"eventHandler":{"__isSmartRef__":true,"id":3322},"droppingEnabled":true,"halosEnabled":true,"eventsAreIgnored":true,"_HandStyle":"default","_PointerEvents":"none","_Position":{"__isSmartRef__":true,"id":3323},"priorExtent":{"__isSmartRef__":true,"id":3324},"owner":{"__isSmartRef__":true,"id":3315},"__LivelyClassName__":"lively.morphic.Morph","__SourceModuleName__":"Global.lively.morphic.Core"},"3317":{"renderContextTable":{"__isSmartRef__":true,"id":3318},"_ClipMode":"visible","_Extent":{"__isSmartRef__":true,"id":3319},"stringifiedShapeNode":"
List Windows
WindowFinder
X
M
–
some text
root
Object Explorer
X
M
–
\\.js|\\.xhtml$
50
diff
http://lively-kernel.org/repository/webwerkstatt/
Filename filter:
open
No. of results:
Author filter:
LatestChangesViewer
X
M
–
root
Usage:\n- enter url and press \"rerender\", this will visualize the serialization graph of the world / part \n\n\nNavigation Help:\n- drag mouse to navigate\n- scroll mouse to zoom in and out\n- click on node to get more info (shown in the bottom left)\n- drag node to refine layout\n\nFiltering:\n- select element under the \"ignore\" button to not display it in the next rendering \n- to revert this, select items in the list on the right and press \"do not ignore\"\n\nGeneral\n- use the dark gray knob in the bottom right corner to resize this app
rerender
ingore ->
<- do not ignore
http://lively-kernel.org/repository/webwerkstatt/empty.xhtml\n\n
name: 0 World [lively.morphic.World]
help
SerializationGraph
X
M
–
no target
Border color\n
Fill\n
Border width
Border radius
Layout
adjustForNewBounds
resizeWidth
resizeHeight
moveVertical
Border style
Opacity
centeredVertical
scaleHorizontal
scaleVertical
configure
centeredHorizontal
moveHorizontal
StyleEditor
X
M
–
GradientBehavior
ColorBehavior
button