Skip to content

Commit

Permalink
removed styleguide
Browse files Browse the repository at this point in the history 
- removed styleguide
- watching json file changes with gulp
- soundfont usage
  • Loading branch information
@truj
truj committed Feb 11, 2019
1 parent 0c90686 commit 6f5dcae
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 44 deletions.
13 changes: 2 additions & 11 deletions gulpfile.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
Expand All @@ -29,7 +28,7 @@ function loadConfig() {

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy)));

// Build the site, run the server, and watch for file changes
gulp.task('default',
Expand Down Expand Up @@ -67,14 +66,6 @@ function resetPages(done) {
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
Expand Down Expand Up @@ -155,5 +146,5 @@ function watch() {
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
gulp.watch('src/data/**').on('all', gulp.series(pages, browser.reload));
}
1 change: 0 additions & 1 deletion src/assets/scss/pages/screenshots.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.screenshots {
$img-padding: 0.4rem;
.cell {
Expand Down
6 changes: 5 additions & 1 deletion src/data/src-examples.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,11 @@
},
"billie-jean": {
"m": "billie-jean.midicapl",
"s": "billie-jean.svg"
"s": "billie-jean.svg",
"s2": "billie-jean-2.svg"
},
"soundfont": {
"m": "soundfont.midicapl"
},
"set-tempo": {
"m": "set-tempo.midicapl"
Expand Down
1 change: 0 additions & 1 deletion src/pages/screenshots.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: index
meta-title: Midica - Screenshots
---

<div class="grid-container screenshots">
<div class="grid-x grid-padding-x">
<div class="cell">
Expand Down
21 changes: 12 additions & 9 deletions src/pages/tutorial-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h2>Introduction</h2>
<div class="cell">
<p>
This is the first chapter of the MidicaPL tutorial, teaching the basics of the language.
If you did not yet follow the <a href="">preparation instructions</a>, please do so before you continue reading.
If you did not yet follow the <a href="tutorial.html">preparation instructions</a>, please do so before you continue reading.
</p>
</div>
</section>
Expand All @@ -41,18 +41,18 @@ <h2>Instrument Definition Block</h2>
</div>
<div class="cell">
<p>
The first thing to be defined inside of a source file must be the instruments that each channel uses.
Each channel that will be used later must be initialized inside of a block beginning with
Before you can play any sounds, you must define the instruments to be used by each channel.
Every channel that will be used later must be initialized inside of a block beginning with
<code>INSTRUMENTS</code> and ending with <code>END</code>.
</p>
<p>
The only exception is the percussion channel (channel <em>9</em>) which may (but does not need to) be defined explicitely.
The only exception is the percussion channel (channel <em>9</em>) which may (but does not need to) be defined explicitly.
</p>
</div>
<div class="cell medium-shrink">{{> src-example src-examples.instruments }}</div>
<div class="cell medium-auto">
<p>
Each line inside this block contains 3 columns, separated by one or more whitespaces.
Each line inside of this block contains 3 columns, separated by one or more whitespaces.
The last column may also contain more whitespaces. These are not interpreted as separator but as a part of the content.
</p>
</div>
Expand All @@ -69,10 +69,10 @@ <h3>1st column</h3>
<div class="cell large-4">
<h3>2nd column</h3>
<p>
The second column describes the instrument. It may contain a valid <em>instrument ID</em> or a <em>MIDI program number</em>.
The second column describes the instrument. It may contain a valid <em>instrument ID</em> or <em>drumkit ID</em> or the accoring <em>MIDI program number</em>.
</p>
<p>
Valid instrument IDs can be found in the <em>info window</em> under <a href="/#info-config">Configuration / Instrument IDs</a>
Valid instrument or drumkit IDs can be found in the <em>info window</em> under <a href="/screenshots.html#info-config">Configuration</a>
</p>
</div>
<div class="cell large-4">
Expand All @@ -83,8 +83,11 @@ <h3>3rd column</h3>
</div>
<div class="cell">
<p>
In the above example we use an <em>instrument ID</em> for the channels <em>0</em> and <em>1</em> and a <em>MIDI program number</em> for the
channels <em>2</em> and <em>9</em>. The line defining the percussion channel (<em>p</em>) is optional. If it is omitted, the standard drumkit
In the above example we use an <em>instrument ID</em> for the channels <em>0</em> and <em>1</em>, a <em>MIDI program number</em> for
channel <em>2</em>, and a <em>drumkit ID</em> for channel <em>9</em>.
</p>
<p>
The line defining the percussion channel (<em>p</em>) is optional. If it is omitted, the standard drumkit
(MIDI program number <em>0</em>) is used.
</p>
</div>
Expand Down
78 changes: 58 additions & 20 deletions src/pages/tutorial-2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ <h4>Tuplets</h4>
</p>
<p>
The second tuplet is a 3:4 tuplet modifying all lengths by 4/3. So you see that a tuplet can also be defined to make notes longer
instead of shorter. This tuplet contains a nested triplet (marked in blue) that has been explicitely defined as <code>t3:2</code>
instead of shorter. This tuplet contains a nested triplet (marked in blue) that has been explicitly defined as <code>t3:2</code>
instead of <code>t</code>. Because of the nesting, both tuplet modifiers have to be attached to each other.
</p>
<p>
Expand Down Expand Up @@ -349,7 +349,7 @@ <h2>Percussion Instruments</h2>
<p>
When playing something later in this channel, this is not a note but a certain percussion instrument.
Instead of the note name you write a percussion ID. Each percussion instrument has a long ID and a short ID.
The valid IDs can be seen in the <em>info window</em> under <a href="/#info-config">Configuration / Percussion IDs</a>.
The valid IDs can be seen in the <em>info window</em> under <a href="/screenshots.html#info-config">Configuration / Percussion IDs</a>.
</p>
<p>
The next two examples are equivalent. They play the intro for "We Will Rock You" by "Queen".
Expand All @@ -368,6 +368,15 @@ <h2>Percussion Instruments</h2>
<div class="cell">{{> src-example src-examples.billie-jean }}</div>
<div class="cell">
<p>
The short percussion IDs from this example are equivalent to the following long IDs:
</p>
<ul>
<li><code>hhc</code> equals <code>hi_hat_closed</code></li>
<li><code>sd1</code> equals <code>snare_drum_1</code></li>
<li><code>bd1</code> equals <code>bass_drum_1</code></li>
</ul>
<p>
The first result score is easier to read for non-drummers. The second one is more compact and more what a dummer is used to.
</p>
</div>
</section>
Expand All @@ -376,26 +385,59 @@ <h2>Percussion Instruments</h2>
<h2>Using Soundfonts</h2>
</div>
<div class="cell">
The first thing to be defined inside of a source file must be the instruments that each channel uses.
Each channel that will be used later must be initialized inside of a block beginning with
<code>INSTRUMENTS</code> and ending with <code>END</code>.
<h3>Include Soundfont File</h3>
</div>
<div class="cell">
<p>
In the preparation section you learned how to <a href="/tutorial.html#sound">load a Soundfont</a> manually in the main window of
the Midica application.
</p>
<p>
But there are a lot of different soundfonts out there, specialized for different kinds of music. So maybe you want to use different
soundfonts for different songs. And maybe you don't want to choose the soundfont file manually each time you switch to another
MidicaPL file containing another song.
</p>
<p>
In this case you can use the <code>SOUNDFONT</code> command. Its only parameter is the path to a soundfont file in the
<code>.sf2</code> format. The path can be either absolute or relative to the source file containing the command.
</p>
</div>
<div class="cell">{{> src-example src-examples.soundfont }}</div>
<div class="cell">
<p>
Of cause this does not work on someone else's computer because he will probably not have the same
soundfont in the same file path inside of his fils system.
And it will also not work in an exported MIDI file because soundfont information cannot be stored in a MIDI sequence.
</p>
</div>
<div class="cell medium-shrink">{{> src-example src-examples.instruments }}</div>
<div class="cell medium-auto">
Each line inside this block contains 3 columns, separated by one or more whitespaces.
The last column may also contain more whitespaces. These are not interpreted as separator but as a part of the content.
<div class="cell">
<h3>Bank Descriptions</h3>
</div>
<div class="cell">{{!-- ensure a line break --}}</div>
<div class="cell large-4">
<h3>1st column</h3>
<div class="cell">
<p>
In chapter 1 you learned the simplest form of defining <a href="/tutorial-1.html#instruments">instruments</a> for each channel.
Remember: In the second column of each line we used an <em>instrument ID</em> or a <em>drumkit ID</em> or a
<em>MIDI program number</em>.
</p>
<p>
The first column contains the chanel number. Valid values are the numbers <code>0</code> - <code>15</code> and the symbol <code>p</code>.
Each ID is mapped to a program number internally. And program numbers can only have values from 0 to 127.
But comprehensive soundfonts can contain much more than 128 different instruments. In this case the instruments
are selected by a combination of a <em>program number</em> and a <em>bank description</em>.
</p>
<p>
<code>p</code> is just an alias for <code>9</code> which is the percussion channel number.
In the second column of an instrument line the bank description can be attached to the ID or program number separated by a
<code>,</code> symbol. E.g. <code>VIOLIN,5</code> or <code>40,5</code> would select a violin with the bank description 5.
</p>
<p>
A Bank description can consist of
Bank numbers can consist of an <abbr title="Most Significant Byte">MSB</abbr> and an
<abbr title="Least Significant Byte">LSB</abbr>. If they are not explicitly defined, they are set to 0 by default.
</p>
<p>
In most cases only the MSB is used. That means the LSB is 0.
</p>
</div>
<div class="cell large-4">
<div class="cell">
<h3>2nd column</h3>
<p>
The second column describes the instrument or drumkit. In the simplest form it can just be identical with an
Expand All @@ -408,18 +450,14 @@ <h3>2nd column</h3>
bank MSB, if the LSB is 0.
</p>
</div>
<div class="cell large-4">
<h3>3rd column</h3>
The third column contains a description of the instrument. This will be displayed as a channel comment in the player.
</div>
<div class="cell">
The following example assumes that the currently loaded soundfont supports a multi-channel drumkit on bank 15360 (MSB 120, LSB 0).
Otherwise the drums could only be used in channel <em>9</em>.
</div>
<div class="cell">{{> src-example src-examples.instruments-2 }}</div>
</section>
<aside>
Now you know most of the lowlevel commands of MidicaPL. Please continue with <a href="tutorial-1.html">chapter 3</a> to learn about
Now you know most of the lowlevel commands of MidicaPL. Please continue with <a href="tutorial-3.html">chapter 3</a> to learn about
highlevel syntax like blocks and macros.
</aside>
</div>
Loading

0 comments on commit 6f5dcae

Please sign in to comment.