You can drag text, pictures, and other HTML elements to ToonTalk.
You can drag them from a web browser in another window or other programs that support drag and drop.
You can drag image files to ToonTalk as well.
Text elements can be edited.
Click on the text to open its backside and edit its text.
Try it:
You can add controllers for style attributes of elements.
Open the backside and click on Add or remove style attributes.
Add top, left, and a few others.
Notice that as you move the widget around the numbers change.
Try changing the numbers.
You can drag and drop URLs from another browser window into ToonTalk.
If the URL is an image, sound, or video then the corresponding element widget is created.
If the URL contains plain text then a plain text element widget is created that will contain the text that is contained in the web page when it is loaded.
Otherwise ToonTalk will make an iframe of the URL.
Here's a simple example of a spinning image. Click the green flag to get it started.
This will be replaced by a work area containing one thing: an element.
top level widget
{
"semantic": {
"type": "top_level",
"backside_widgets": [
{
"widget": {
"semantic": {
"type": "element",
"html": {
"shared_html_index": 0
},
"attributes": [
"rotate"
],
"attribute_values": [
12.74
],
"backside_widgets": [
{
"widget": {
"semantic": {
"type": "box",
"size": 3,
"contents": [
{
"semantic": {
"type": "number",
"operator": "+",
"numerator": "50",
"denominator": "1",
"format": "mixed_number",
"infinite_stack": true
},
"view": {
"backside": false
},
"version": 1
},
{
"shared_widget_index": 0
},
{
"semantic": {
"type": "box",
"size": 2,
"contents": [
{
"semantic": {
"type": "bird",
"nest": {
"shared_widget_index": 0
}
},
"view": {
"saved_width": 70,
"saved_height": 102,
"backside": false
},
"version": 1
},
{
"semantic": {
"type": "number",
"operator": "+",
"numerator": "1",
"denominator": "20",
"format": "mixed_number"
},
"view": {
"saved_width": 76,
"saved_height": 55,
"backside": false
},
"version": 1
}
],
"horizontal": true,
"name": ";;",
"infinite_stack": true
},
"view": {
"backside": false
},
"version": 1
}
],
"horizontal": true,
"name": "speed;elapsed;delay"
},
"view": {
"frontside_width": 379,
"frontside_height": 106,
"frontside_left": 181.8125,
"frontside_top": 75.703125,
"saved_width": 379,
"saved_height": 106,
"backside": false
},
"version": 1
}
},
{
"widget": {
"semantic": {
"type": "bird",
"nest": {
"semantic": {
"type": "function_nest",
"function_type": "number",
"function_name": "delay"
},
"view": {
"backside": false
},
"version": 1
}
},
"view": {
"frontside_width": 70,
"frontside_height": 102,
"frontside_left": 655.3125,
"frontside_top": 98.109375,
"saved_width": 70,
"saved_height": 102,
"backside": false
},
"version": 1
}
},
{
"widget": {
"semantic": {
"type": "robot",
"frontside_conditions": {
"semantic": {
"type": "element",
"html": {
"shared_html_index": 0
},
"attributes": [
"rotate"
],
"attribute_values": [
0
],
"erased": true
},
"view": {
"saved_width": 116,
"saved_height": 102,
"backside": false
},
"version": 1
},
"backside_conditions": {
"box": {
"semantic": {
"type": "box",
"size": 3,
"contents": [
{
"semantic": {
"type": "number",
"operator": "+",
"numerator": "1",
"denominator": "1",
"format": "mixed_number",
"erased": true
},
"view": {
"saved_width": 76,
"saved_height": 55,
"backside": false
},
"version": 1
},
{
"semantic": {
"type": "nest",
"contents": [
{
"widget": {
"semantic": {
"type": "number",
"operator": "+",
"numerator": "51",
"denominator": "1000",
"format": "decimal",
"approximate": true,
"erased": true
},
"view": {
"saved_width": 85,
"saved_height": 71,
"backside": false
},
"version": 1
}
}
],
"guid": "toontalk_id_1429089883667",
"serial_number": 3,
"name": "#8"
},
"view": {
"saved_width": 116,
"saved_height": 98,
"backside": false
},
"version": 1
},
{
"semantic": {
"type": "box",
"size": 2,
"contents": [
{
"semantic": {
"type": "bird"
},
"view": {
"backside": false
},
"version": 1
},
{
"semantic": {
"type": "number",
"operator": "+",
"numerator": "1",
"denominator": "20",
"format": "mixed_number",
"erased": true
},
"view": {
"backside": false
},
"version": 1
}
],
"horizontal": true,
"name": ";;"
},
"view": {
"backside": false
},
"version": 1
}
],
"horizontal": true,
"name": "speed;elapsed;delay"
},
"view": {
"backside": false
},
"version": 1
}
},
"body": {
"type": "body",
"steps": [
{
"type": "robot_action",
"action_name": "pick up a copy of",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 0
}
},
"additional_info": {
"time": 1920
}
},
{
"type": "robot_action",
"action_name": "drop it on",
"path": {
"type": "path.to_entire_context",
"is_backside": true
},
"additional_info": {
"left_offset_fraction": 0.821672245108136,
"top_offset_fraction": 0.4210425204918033,
"time": 1709
}
},
{
"type": "robot_action",
"action_name": "open the backside",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 1
}
},
"additional_info": {
"time": 1023
}
},
{
"type": "robot_action",
"action_name": "click the button of",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 1
}
},
"additional_info": {
"button_selector": ".toontalk-settings-backside-button",
"time": 3065
}
},
{
"type": "robot_action",
"action_name": "edit",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 1
}
},
"additional_info": {
"setter_name": "set_operator",
"argument_1": "*",
"toString": "by changing the operator to * of the number",
"button_selector": ".toontalk-times-radio-button",
"time": 2532
}
},
{
"type": "robot_action",
"action_name": "pick up",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 1,
"removing_widget": true
}
},
"additional_info": {
"time": 1481
}
},
{
"type": "robot_action",
"action_name": "drop it on",
"path": {
"type": "newly_created_widgets_path",
"index": 0
},
"additional_info": {
"time": 3213
}
},
{
"type": "robot_action",
"action_name": "pick up",
"path": {
"type": "newly_created_widgets_path",
"index": 0,
"removing_widget": true
},
"additional_info": {
"time": 1588
}
},
{
"type": "robot_action",
"action_name": "drop it on",
"path": {
"type": "path_to_style_attribute",
"attribute": "rotate",
"element_widget_path": {
"type": "path.to_entire_context"
}
},
"additional_info": {
"time": 4253
}
},
{
"type": "robot_action",
"action_name": "pick up a copy of",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "box",
"next_path": {
"type": "box_path",
"index": 2
}
},
"additional_info": {
"time": 8284
}
},
{
"type": "robot_action",
"action_name": "drop it on",
"path": {
"type": "path.to_backside_widget_of_context",
"type_name": "bird"
},
"additional_info": {
"time": 2497
}
}
]
},
"name": "#1"
},
"view": {
"frontside_width": 66,
"frontside_height": 110,
"frontside_left": 51.515625,
"frontside_top": 69.703125,
"saved_width": 66,
"saved_height": 110,
"backside": false
},
"version": 1
}
}
]
},
"view": {
"frontside_width": 116,
"frontside_height": 102,
"frontside_left": 50.368526458740234,
"frontside_top": 15.90234375,
"backside_width": 0,
"backside_height": 0,
"backside_left": 0,
"backside_top": 0,
"saved_width": 116,
"saved_height": 102,
"backside": false
},
"version": 1
}
}
]
},
"view": {
"background_color": "rgb(245, 240, 240)",
"backside_width": 586,
"backside_height": 245,
"backside_left": 8,
"backside_top": 17981.21875,
"backside": true,
"drag_x_offset": 295,
"drag_y_offset": 165.78125
},
"version": 1,
"shared_widgets": [
{
"semantic": {
"type": "nest",
"contents": [
{
"widget": {
"semantic": {
"type": "number",
"operator": "+",
"numerator": "13",
"denominator": "250",
"format": "decimal",
"approximate": true
},
"view": {
"backside": false
},
"version": 1
}
}
],
"guid": "toontalk_id_1429081045432",
"serial_number": 1,
"name": "#1"
},
"view": {
"saved_width": 116,
"saved_height": 98,
"backside": false
},
"version": 1
}
],
"shared_html": [
"%3Cimg%20src%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAHQAAABiCAYAAACBFfehAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQKAgwmyL1cYQAAApVJREFUeNrtnctygzAMRYHxfxu%2BnC46yaSpg3kEWbo%2Bd9d20aDjK0uCmDHnPFhpXpb1z885j4OI3q%2Ft39%2BNrjV5CUJEuDWILa5ttHLo3ovfE5B5WVarIF353N059EpQH79TStvdAD0M%2BwWypZsBalV8dQR1IkkBFAH0d1%2BjgBHcQ0stCBiEiqIt134TtpdJjsxgwVOT723hUhQBM34fGsmdLdN305S7NeV5DANIs0GA9lTdWoKdgKl1vWPLG9wUSIGBAtMG9mQBCZh2iz7d%2BY8AeS5mV5yaAKmlyUOaQEZAj1ofuO330uTpw6ByHI8YKwEynmO3AFf30D2rA5hCRRECKLqSfisZE6A9OpSn9Ui5CKAIoBREJ%2FdQ%2BkwcigCKaFvQaYcCVTDlAtW%2F0lY1C8CADn2eJvLhpBFallga12EAmNBwAaBicAEqBhegPbctCKAIoAigCKCqlS5AxZQIQbxe8%2Flz4fsvODQS0MLNk3fIU4k8iuvc6XnQE1AlVDwFhVtmMfbQ3UABGw8kfaggzE2guDMWSFKuIMzqYOH9hTaE2r8OPZdLayMEFJcqAmUI4Xr%2FrBZFODYWzMtAAesL5tcGC6RgP%2FFjUiQEE6C9V7mkXd%2FuxKGC4pkiAVfi0JZAb27xcKiIM3EoVS6VboSY4FADmPJvJ6QAAijpFqAURbKrtqeUe8v7Q%2FeeSNbLfVTLRdz8pepjJyexdDFYmHPu5lgdq2zUzKG9PrYiO5w%2F%2FCpLngvWcWgJZESHWyzI5B1mLTjewVpnlUQwtBT%2Bfuic8%2BjNpS0X4tQMQuWiI7rTw2duOlj4tKeeCcydLt3ztUovC9AFUE997WuxVRtZPtK9p2wCULFCjNtnDBY0XKraEnX3GKd6b%2FsDP0SOhuSTXq8AAAAASUVORK5CYII%3D'%20alt%3D'empty-nest-red.png'%2F%3E"
]
}