-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhelp.html
254 lines (253 loc) · 11.5 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<html>
<head>
</head>
<body>
<h1>Audio System Design Tool for Teensy Audio Library - Help</h1>
Hi,<br>
<br>
In July I posted here to show some changes that I had done to the "Audio System Design Tool"<br>
<a href="https://forum.pjrc.com/threads/61630-Audio-System-Design-Tool-update-AudioMixerX-lt-n-gt">https://forum.pjrc.com/threads/61630...MixerX-lt-n-gt</a><br>
<br>
note. in the following text I will just refer "Audio System Design Tool" as "Tool"<br>
<br>
And at that time I had just beginning to understand how the code worked,<br>
and there was some things that I did not fully understand,<br>
also I had made the changes on a old version of the "Tool".<br>
<br>
After that I decided to give it a go with a newer version.<br>
<br>
(I think this was a really good/fun way to learn about html, css and javascript)<br>
<br>
Now the "Tool" is pretty stable with no known bugs,<br>
except for some minor visual stuff that will be fixed soon.<br>
<br>
at post #10<br>
<a href="https://forum.pjrc.com/threads/64572-Simple-Way-to-add-Polyphony">https://forum.pjrc.com/threads/64572...-add-Polyphony</a><br>
I mention a ACE-editor bug, that bug is now fixed.<br>
( that means the ACE-editor can be resized to any size)<br>
<br>
Here is the result:<br>
<a href="https://manicken.github.io/">https://manicken.github.io/</a><br>
source:<br>
<a href="https://github.com/manicken/manicken.github.io">https://github.com/manicken/manicken.github.io</a><br>
<br>
<img src="helpImgs/MainScreenDemo.png"/><br>
<br>
I have included my complete Poly Synth Project into the html<br>
it's available at the rightmost menu -> Examples -> Manicken Poly Synth<br>
that can be exported as a zip/or using the plugin (more about that down)<br>
<br>
<br>
As you can see a lot has happened:<br>
<br>
* Settings tab at the right sidebar<br>
where some user customizations can be done<br>
like project name + default include header<br>
settings are sorted in different categories,<br>
and subcategories.<br>
The settings are saved with the project.<br>
<br>
* Workspace toolbar:<br>
common functions cut copy paste<br>
workspace move left/right (to organize the tabs)<br>
GUI Edit/Run (only used for the UI objects)<br>
<br>
the toolbar can be hidden in the settings<br>
<br>
* Drop down Import and Export Menus<br>
<img src="helpImgs/ImportMenu.png"/>
<img src="helpImgs/ExportMenu.png"/><br>
<br>
* when exporting/saving the nodes are sorted by the visible major grid columns<br>
1 4 7<br>
2 5 8<br>
3 6 9<br>
<br>
note. the UI items are never sorted<br>
<br>
* Simple export is used for "classic" exports.<br>
At the moment it only supports exporting of the current "tab"<br>
and is only meant to be used when doing small and simple projects<br>
it currently have no support for arrays and subclasses<br>
however it exports:<br>
IncludeDef, Variables, CodeFile, Function, AudioStreamObject and DontRemoveCodeFiles node-types.<br>
<br>
* save/load the whole design to/from a JSON file<br>
<br>
* create a design in parts that is then exported as different classes<br>
(was already in my prev. version)<br>
<br>
* export the whole class based design to a zip file<br>
for those that don't want to use the extensions and/or<br>
just want to make a "shippable" version<br>
this zip also contains the JSON in human readable format.<br>
<br>
* menu "buttons" that is not that obvious have popup descriptions.<br>
<br>
* create code directly in the "Tool" using ACE editor<br>
with local multilevel autocomplete,<br>
that means it uses the current design objects to create the autocomplete list.<br>
It also utilizes the embedded documentation to create the function lists,<br>
with descriptions both for the objects and object functions.<br>
Autocomplete currently don't have support for variables.<br>
<br>
example how the autocomplete looks:<br>
<br>
<img src="helpImgs/Autocomplete_MultiLevel.png"/><br>
<br>
Code is edited in CodeFile and Function node types.<br>
<br>
* Arduino IDE plugin/extension<br>
https://github.com/manicken/arduinoAPIwebserver<br>
<br>
* VSCODE extension<br>
https://github.com/manicken/vscode_api_webserver<br>
<br>
* in short the IDE extensions is used to create a direct link between the "Tool"<br>
and the IDE:s (so that no copy/paste is needed).<br>
The extensions send all exported classes as separate files, to make nice and tidy code files.<br>
The extensions also make it possible to send verify/upload commands so that you can make all<br>
development in the "Tool".<br>
i.e. Just click export (simple/class) then click upload, and the changes are direcly applied<br>
without even touching either Arduino IDE or VSCODE.<br>
<br>
The extensions also capture the output of the compile output and send them to the "Tool"<br>
visible in the "Tool" bottom output-log<br>
<br>
Note. Arduino IDE compile verbose mode generates alot of information,<br>
so in short: the output in the "Tool" still outputs data long after the actual compile has been finished<br>
in the Arduino IDE.<br>
<br>
In VSCODE the compile don't generate so much information and that is not having any "delay"<br>
but in VSCODE the terminal capture is not working by default, and VSCODE needs to be started with<br>
the parameter --enable-proposed-api JannikSvensson.api-webserver<br>
(yes proposed-api is available in the standard version, even if microsoft say it's not)<br>
the information of doing so is available at the VSCODE extension github page.<br>
<br>
Only the Arduino IDE extension is supporting the "midi to websocket bridge"<br>
that is used by "UI item node" midiSend commands.<br>
This is because midi is not native in Node.js, and the node-midi (https://www.npmjs.com/package/midi)<br>
had some version compatibility problems in VSCODE.<br>
<br>
But I have made the Arduino IDE plugin .jar executable,<br>
that only contains the "midi to websocket bridge".<br>
<br>
The MIDI device selection is done in the "Tool" at the settings tab - BiDirData WebSocketBridge - MIDI<br>
<br>
* UI nodes (directly resizeable)<br>
is meant to be used together with the BiDirData WebSocketBridge<br>
to control a midi device from the "Tool"<br>
this is to make it easier to have everything in one "project".<br>
<br>
to send data to a connected midi device the sendmidi(0x90, 60, 0x3F) command is used (note. that the parameters can be mixed types)<br>
<br>
All UI nodes have user-selectable colors.<br>
<br>
UI node types currently supported:<br>
<br>
* group (is in the UI category)<br>
can contain groups of nodes, all types are supported<br>
can even place group into group, fully drag/drop (not like "Node-Red" group)<br>
completely made from scratch.<br>
the objects placed inside a group uses "global" position and not local (as expected),<br>
this is because I did not want to screw up the positions and also make it easier to code.<br>
the group act like a lasso-selection (but it uses a node-list to determite which nodes that is "inside")<br>
<br>
the group can have label that is placed inside it at the top center<br>
(in a future version it should be user placeable like in the "node-red"-group)<br>
<br>
I plan to use the group like a exportable class/(seperate object) so that it can be used like a array.<br>
so the checkbox "Export as class" have no function yet.<br>
<br>
example of grouped listboxes:<br>
<br>
<img src="helpImgs/GroupedListBoxes.png"/><br>
<br>
* UI_Button<br>
have seperate pressed and release send data fields (the text in the field is the raw data sent)<br>
<br>
* UI_Slider (vertical or horizontal orientation)<br>
(send on move or release)<br>
have a bottom placed label that can show the current value<br>
(the text to show is parsed using javascript eval(), that means complex formulas can be used)<br>
have a "Send Format" field that is also parsed by the eval, example:<br>
"midisend(0xB0,"+d.midiId+"," + d.val + ");"<br>
<br>
<img src="helpImgs/H_Slider.png"/><img src="helpImgs/V_Slider.png"/><br>
<br>
* UI_Label<br>
is a borderless node with a selectable background color<br>
<br>
* UI_ListBox<br>
contains a list of items and behaves like radio buttons.<br>
when placed in a group and the group have the checkbox "Individual ListBox Mode" unchecked they all<br>
behaves like a big listbox item (can be used when long list of items need to be splitted into many columns)<br>
sendCommand example:<br>
"midiSend("+(0xB0+d.midiCh)+","+d.midiId+","+d.sel ectedIndex+")"<br>
<img src="helpImgs/ListBox.png"/><br>
<br>
* UI_Piano (one octave)<br>
this is the most advanced (by design) node yet<br>
it's a single octave Piano-part (multiple can be stacked together to form a full size 128key keyboard)<br>
<br>
sendCommand example:<br>
"midiSend("+(d.keyDown+d.midiCh)+","+(d.octave*12+ d.keyIndex) +",127)"<br>
<br>
<img src="helpImgs/Piano.png"/><br>
<br>
* UI_ScriptButton<br>
this is the most fun node type,<br>
it's used editable JavaScript that is executed when the button is pressed (in GUI run mode)<br>
this can be used to automate alot of things,<br>
I have used to automatically place the full-size keyboard above, with all sendCommands prefilled.<br>
Also I have used it to place the sliders used to control the envelope.<br>
And to make a beatiful rainbow equalizer slider-array.<br>
<br>
It uses the View.js as the eval base, so that every function available in View.js can be used directly.<br>
<br>
It can also be used for a custom export for custom structures.<br>
<br>
* the import and export has been drop down menus with a lot of choices<br>
<br>
* the palette have all categories closed by default (so its easier to find items)<br>
+ automatic close of other than current selected<br>
+ input and output have sub categories sorted by "device"(don't know what to call it)<br>
+ used category which contains all AudioObject-types used (to make it easier to make copies of used objects)<br>
+ 3 new categories:<br>
1. tabs (contains class IO nodes + all class nodes)<br>
<br>
* print function at right menu/(ctrl+p) that only uses the workspace-area as the print source<br>
<br>
* save button (ctrl+s) to ensure that the design is saved<br>
save notification that shows when the design is saved<br>
<br>
* Junction Nodes (used to split many signals and to make the design easier to follow)<br>
have two variants one that goes in normal direction L-R<br>
and one that goes in the reverse direction<br>
<br>
example of R-L junction usage:<br>
<img src="helpImgs/ReverseJunction.png"/><br>
<br>
I tried my best to make the embedded documentation as clear as possible,<br>
but contributions is appreciated.<br>
Or if there is something that needs more explanation, please let me know.<br>
<br>
<br>
List of future plans (in priority order):<br>
<br>
* tidy up the node label/text redraw code<br>
(to make it more efficient because the getTextSize is taking alot of time)<br>
so buffering of the textDimensions is needed for all labels/texts<br>
<br>
* Make a very simple sequencer with the help of piano as guide and group with lines for the sequence part<br>
the notes/actions should be done with the UI_Button (because it have both pressed(enter) and released(leave) actions)<br>
<br>
* make group export as class<br>
I have included two proposed designs into the html<br>
it's available at the rightmost menu -> Examples -> GroupBasedDesign (this contains two tabs with each design)<br>
<br>
* "exploded" export where a design can be defined in tabs but then exported as "classic"-export<br>
<br>
* multitab code editor<br>
</body>
</html>