Skip to content

Commit b488c25

Browse files
GregwarGregwar
committed
Adding parameters (#13)
1 parent aa84a39 commit b488c25

13 files changed

+640
-16
lines changed

‎css/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,12 @@ body {
1010
margin:5px;
1111
border:1px solid #aaa;
1212
}
13+
14+
a {
15+
color:#c00;
16+
font-size:12px;
17+
}
18+
19+
a:hover {
20+
color:black;
21+
}

‎demo/gains.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ blocks.register({
77
type: [
88
{
99
name: "Gain",
10-
type: "number"
10+
type: "number",
11+
default: [1]
1112
}
1213
],
13-
default: [1]
1414
},
1515
],
1616
inputs: [

‎demo/sin.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,18 @@ blocks.register({
1010
{
1111
name: "Frequency",
1212
type: "number",
13-
units: "Hz",
14-
default: 1
13+
unit: "Hz",
14+
default: 10
1515
},
1616
{
1717
name: "Phase",
1818
type: "number",
19-
units: "°",
19+
unit: "°",
2020
default: 0
21+
},
22+
{
23+
name: "Invert",
24+
type: "bool"
2125
}
2226
],
2327
inputs: [

‎form.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="js/jquery.js"></script>
5+
<script type="text/javascript" src="js/jquery.json.js"></script>
6+
<script type="text/javascript" src="js/jquery.formserialize.js"></script>
7+
8+
<script type="text/javascript" src="js/test.js"></script>
9+
10+
<link rel="stylesheet" type="text/css" href="js/blocks.css" />
11+
<link rel="stylesheet" type="text/css" href="css/style.css" />
12+
</head>
13+
<body>
14+
<h1>Blocks demo</h1>
15+
<form>
16+
Text:
17+
<input type="text" name="textValue" /><br />
18+
Checkbox:
19+
<input type="checkbox" name="check" /><br />
20+
Select:
21+
<select name="values">
22+
<option value="1">Opt 1</option>
23+
<option value="2">Opt 2</option>
24+
<option value="3">Opt 3</option>
25+
</select><br />
26+
Text:
27+
<textarea name="text"></textarea><br />
28+
Array:
29+
<input type="text" name="arr[]" />
30+
<input type="text" name="arr[]" />
31+
<input type="text" name="arr[]" />
32+
</form>
33+
<a href="#" class="serialize">Serialize</a>
34+
</body>
35+
</html>

‎index.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
<html>
33
<head>
44
<script type="text/javascript" src="js/jquery.js"></script>
5-
5+
<script type="text/javascript" src="js/jquery.json.js"></script>
66
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
7+
<script type="text/javascript" src="js/jquery.formserialize.js"></script>
8+
79
<script type="text/javascript" src="js/utils.js"></script>
10+
<script type="text/javascript" src="js/parameterfield.js"></script>
11+
<script type="text/javascript" src="js/parametersmanager.js"></script>
812
<script type="text/javascript" src="js/segment.js"></script>
913
<script type="text/javascript" src="js/edge.js"></script>
1014
<script type="text/javascript" src="js/blocksmenu.js"></script>

‎js/block.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ Block = function(blocks, blockType, id)
1919
// Is the user dragging ?
2020
this.drag = null;
2121

22+
// Parameters
23+
this.parameters = null;
24+
this.parametersManager = null;
25+
2226
// Position
2327
this.x = 0;
2428
this.y = 0;
@@ -37,7 +41,9 @@ Block = function(blocks, blockType, id)
3741
*/
3842
this.getHtml = function()
3943
{
40-
html = '<h3>' + blockType.name + '</h3>';
44+
html = '<div class="parameters"></div>';
45+
html += '<div class="blockTitle">' + blockType.name + ' <div class="gear"></div></div>';
46+
html += '<div class="parametersRender"></div>';
4147

4248
// Handling inputs & outputs
4349
handle = function(key) {
@@ -79,12 +85,14 @@ Block = function(blocks, blockType, id)
7985

8086
div.append(html);
8187
this.div = div.find('#block' + this.id);
88+
this.parametersManager = new ParametersManager(this.div.find('.parameters'), blockType, this);
89+
this.parameters = this.parametersManager.getDefaults();
8290
this.initListeners();
8391
this.redraw();
8492
};
8593

8694
/**
87-
* Sets the position of the block
95+
* Sets the position and the scale of the block
8896
*/
8997
this.redraw = function(selected)
9098
{
@@ -108,6 +116,8 @@ Block = function(blocks, blockType, id)
108116
}
109117
}
110118

119+
self.div.find('.parametersRender').html(self.parametersManager.getHtml());
120+
111121
self.div.removeClass('block_selected');
112122
if (selected) {
113123
self.div.addClass('block_selected');
@@ -120,7 +130,7 @@ Block = function(blocks, blockType, id)
120130
this.initListeners = function()
121131
{
122132
// Drag & drop the block
123-
self.div.find('h3').mousedown(function(event) {
133+
self.div.find('.blockTitle').mousedown(function(event) {
124134
if (event.which == 1) {
125135
self.drag = [blocks.mouseX/blocks.scale-self.x, blocks.mouseY/blocks.scale-self.y];
126136
}
@@ -133,12 +143,14 @@ Block = function(blocks, blockType, id)
133143
self.hasFocus = false;
134144
});
135145

146+
// Handle focus on the I/Os
136147
self.div.find('.input, .output').hover(function() {
137148
self.focusedIo = $(this).attr('rel');
138149
}, function() {
139150
self.focusedIo = null;
140151
});
141152

153+
// Dragging
142154
$('html').mousemove(function(evt) {
143155
if (self.drag) {
144156
self.x = (blocks.mouseX/blocks.scale-self.drag[0]);
@@ -147,6 +159,7 @@ Block = function(blocks, blockType, id)
147159
}
148160
});
149161

162+
// Drag the block
150163
$('html').mouseup(function() {
151164
self.drag = null;
152165
});
@@ -158,6 +171,11 @@ Block = function(blocks, blockType, id)
158171
event.preventDefault();
159172
}
160173
});
174+
175+
// Handle the parameters
176+
self.div.find('.gear').click(function() {
177+
self.parametersManager.toggle();
178+
});
161179
};
162180

163181
/**

‎js/blocks.css

+34-6
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
}
6262

6363
.blocks_js_editor .contextmenu .family .childs {
64-
margin-left:125px;
64+
margin-left:123px;
6565
margin-top:-20px;
6666
}
6767

@@ -94,18 +94,32 @@
9494
-o-user-select:none;
9595
}
9696

97-
.blocks_js_editor .block_selected {
98-
border:2px solid #0a0;
99-
}
100-
101-
.blocks_js_editor .block h3 {
97+
.blocks_js_editor .blockTitle {
98+
font-weight:bold;
10299
background-color:#eee;
103100
padding:1px;
104101
margin:-1px;
105102
margin-bottom:2px;
106103
cursor:move;
107104
}
108105

106+
.blocks_js_editor .block .gear {
107+
width:14px;
108+
height:14px;
109+
background-image:url('gfx/gear.gif');
110+
float:right;
111+
cursor:pointer;
112+
opacity:0.5;
113+
}
114+
115+
.blocks_js_editor .block .gear:hover {
116+
opacity:1.0;
117+
}
118+
119+
.blocks_js_editor .block_selected {
120+
border:2px solid #0a0;
121+
}
122+
109123
.blocks_js_editor .input,
110124
.blocks_js_editor .output {
111125
background-color:#fff;
@@ -148,3 +162,17 @@
148162
float:right;
149163
margin:1px;
150164
}
165+
166+
.blocks_js_editor .block .parameters {
167+
display:none;
168+
position:absolute;
169+
background-color:white;
170+
border:2px solid #aaa;
171+
padding:3px;
172+
z-index:50;
173+
width:250px;
174+
}
175+
176+
.blocks_js_editor .block .parameters input {
177+
width:200px;
178+
}

‎js/blocks.js

-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ Blocks = function()
104104
// Detect clicks on the canvas
105105
self.div.mousedown(function(evt) {
106106
self.canvasClicked();
107-
evt.preventDefault();
108107
});
109108

110109
self.div.mousedown(function(event) {

‎js/gfx/gear.gif

192 Bytes
Loading

‎js/jquery.formserialize.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
$.fn.serializeForm = function()
2+
{
3+
var o = {};
4+
var a = this.serializeArray();
5+
$.each(a, function() {
6+
if (o[this.name]) {
7+
if (!o[this.name].push) {
8+
o[this.name] = [o[this.name]];
9+
}
10+
o[this.name].push(this.value || '');
11+
} else {
12+
o[this.name] = this.value || '';
13+
}
14+
});
15+
return o;
16+
};
17+
18+
$.fn.unserializeForm = function(data)
19+
{
20+
var setValue = function(input, value) {
21+
if (input.attr('type') == 'checkbox') {
22+
value = !!value;
23+
input.attr('checked', value);
24+
} else {
25+
input.val(value);
26+
}
27+
};
28+
29+
for (key in data) {
30+
var value = data[key];
31+
var input = $('*[name="'+key+'"]');
32+
33+
if (value instanceof Array) {
34+
for (k in value) {
35+
setValue($(input[k]), value[k]);
36+
}
37+
} else {
38+
setValue(input, value);
39+
}
40+
}
41+
};

0 commit comments

Comments
 (0)