Skip to content

Commit a39cbfa

Browse files
jguille2jguille2
committed
adding snapPaintEditors test
1 parent e2978d6 commit a39cbfa

File tree

1,527 files changed

+198765
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,527 files changed

+198765
-0
lines changed

‎snapPaintEditors/API.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# The Snap! API
2+
3+
Jens Mönig, July 07, 2020
4+
5+
This document describes how Snap! can be accessed from an outside program to start scripts, send and retrieve information. The model use case is embedding interactive Snap! projects in other websites such as MOOCs or other adaptive learning platforms.
6+
7+
This experimental Snap! API is a set of methods for an IDE_Morph containing a Snap! project. These methods are maintained to work with future versions of Snap! They can be used to trigger scripts, get feedback from running scripts, and access the project's global variables.
8+
9+
Currently the API consists of the following methods:
10+
11+
#### Broadcast Messages (and optionally wait)
12+
13+
* IDE_Morph.prototype.broadcast()
14+
15+
#### Listen to Messages
16+
17+
* IDE_Morph.prototype.addMessageListenerForAll()
18+
* IDE_Morph.prototype.addMessageListener()
19+
* IDE_Morph.prototype.getMessages()
20+
21+
#### Access Global Variables
22+
23+
* IDE_Morph.prototype.getVarNames()
24+
* IDE_Morph.prototype.getVar()
25+
* IDE_Morph.prototype.setVar()
26+
27+
#### Create and Modify Lists
28+
29+
* IDE_Morph.prototype.newList()
30+
31+
## Referencing the IDE
32+
33+
Getting hold of an ide can usually be achieved by
34+
evaluating:
35+
36+
var ide = world.children[0];
37+
38+
The model case in mind is embedding Snap! in an iframe:
39+
40+
```
41+
<!DOCTYPE html>
42+
<html>
43+
<head>
44+
<title>Snap! iFrame</title>
45+
</head>
46+
<body>
47+
<iframe id="inlineFrameExample"
48+
title="Inline Frame Example"
49+
width="1024"
50+
height="720"
51+
src="snap.html">
52+
</iframe>
53+
</body>
54+
</html>
55+
```
56+
57+
In such a set up the ide can be accessed through the ```contentWindow``` property, e.g.
58+
59+
var ide = document.getElementsByTagName("iframe")[0].contentWindow.world.children[0];
60+
61+
## Interacting with the IDE
62+
63+
### IDE_Morph.prototype.broadcast()
64+
The broadcast() method triggers all scripts whose hat block listens to the specified message. An optional callback can be added to be run after all triggered scripts have terminated.
65+
66+
#### syntax
67+
ide.broadcast(message [, callback]);
68+
69+
#### parameters
70+
* message
71+
- string, the message to be sent to all listeners
72+
* callback | optional
73+
- function to execute after all scripts terminate, no arguments
74+
75+
#### return value
76+
undefined
77+
78+
79+
### IDE_Morph.prototype.addMessageListenerForAll()
80+
The addMessageListenerForAll() method sets up a function that will be called whenever a message is broadcast. The function takes one argument, the message being broadcast, and can be used to react to any message. Multiple message listeners can be set up, they all get executed in the order in which they were added.
81+
82+
#### syntax
83+
ide.addMessageListenerForAll(callback);
84+
85+
#### parameters
86+
* callback
87+
* function to execute whenever a message is sent, takes one argument: The message string
88+
89+
#### return value
90+
undefined
91+
92+
93+
### IDE_Morph.prototype.addMessageListener()
94+
The addMessageListener() method sets up a function that will be called whenever the specified message is broadcast. Multiple message listeners can be set up per message, they all the executed in the order in which they were added.
95+
96+
#### syntax
97+
ide.addMessageListener(message, callback);
98+
99+
#### parameters
100+
* message
101+
* string, the message to which the listener will react. If the message is an empty string the callback will be executed at any broadcast, passing the message as argument
102+
* callback
103+
* function to execute whenever the specified message is sent, takes no argument, except when the message to listen to is the empty string, then it takes the message as argument
104+
105+
#### return value
106+
undefined
107+
108+
109+
#### IDE_Morph.prototype.getMessages()
110+
The getMessage() method returns a new Array that contains all the message strings that occur in the project, both in hat blocks and in broadcast blocks.
111+
112+
#### syntax
113+
ide.getMessages();
114+
115+
#### return value
116+
an Array of strings, or an empty Array
117+
118+
119+
### IDE_Morph.prototype.getVarNames()
120+
The getVarNames() method returns a new Array that contains all the global variable names in the project.
121+
122+
#### syntax
123+
ide.getVarNames();
124+
125+
### return value
126+
an Array of strings, or an empty Array
127+
128+
129+
### IDE_Morph.prototype.getVar()
130+
The getVar() method returns the value of the global variable indicated by the specified name.
131+
132+
#### syntax
133+
ide.getVar(name);
134+
135+
#### return value
136+
whatever value the variable holds.
137+
138+
139+
### IDE_Morph.prototype.setVar()
140+
The setVar() methods assigns a value to the a global variable specified by name.
141+
142+
#### syntax
143+
ide.setVar(name, value);
144+
145+
#### return value
146+
undefined
147+
148+
### IDE_Morph.prototype.newList()
149+
The newList() methods returns a new Snap! list. Optionally a source array containing the list elements can be specified.
150+
151+
#### syntax
152+
ide.newList([array]);
153+
154+
#### return value
155+
a new Snap! List
156+
157+
## Manipulating Lists
158+
159+
Snap! lists can be accessed and manipulated through a set of methods described in the file `lists.js`

‎snapPaintEditors/Backgrounds/BACKGROUNDS

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
atom_playground.jpg Atom Playground
2+
bedroom1.gif Bedroom 1
3+
bedroom2.gif Bedroom 2
4+
berkeley_mural.jpg Berkeley Mural
5+
brick-wall-and-stairs.jpg Brick Wall and Stairs
6+
brick-wall1.jpg Brick Wall 1
7+
brick-wall2.jpg Brick Wall 2
8+
desert.gif Desert
9+
night_city_with_street.gif Night City with Street
10+
party_room.jpg Party Room
11+
pathway.jpg Pathway
12+
xy-grid.gif XY Grid

‎snapPaintEditors/Backgrounds/atom_playground.jpg

75.2 KB
Loading

‎snapPaintEditors/Backgrounds/baseball-field.png

418 KB
Loading

‎snapPaintEditors/Backgrounds/basketball-court1-a.png

212 KB
Loading

‎snapPaintEditors/Backgrounds/basketball-court1-b.png

197 KB
Loading

‎snapPaintEditors/Backgrounds/beach_malibu.jpg

55.2 KB
Loading

‎snapPaintEditors/Backgrounds/beach_rio.png

411 KB
Loading

‎snapPaintEditors/Backgrounds/bedroom1.gif

27 KB
Loading

‎snapPaintEditors/Backgrounds/bedroom2.gif

22.7 KB
Loading

0 commit comments

Comments
 (0)