Skip to content

Commit

Permalink
Update links in vexflow.com to new tutorial.
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xfe
0xfe committed Jul 13, 2016
1 parent 015d015 commit 22839e9
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 880 deletions.
22 changes: 4 additions & 18 deletions docs/index.html
View file
Expand Up @@ -27,7 +27,7 @@ <h1>VexFlow</h1>
<div class="main">
<b>Music Engraving in JavaScript and HTML5</b>
</div>
pre-pre-pre-alpha by <a href="http://0xfe.blogspot.com">0xfe</a>.
v2.0 by <a href="http://0xfe.blogspot.com">0xfe</a>.
</div>

<div class="content">
Expand Down Expand Up @@ -67,8 +67,6 @@ <h2>Where Do I Start?</h2>
If you're not a programmer, there are many ways to use VexFlow to create, share, or publish your music online:
<p/>
<ul>
<li><a href="http://my.vexflow.com">My VexFlow</a> allows you to create
and publish articles and blog-posts with playable music notation.</li>
<li>The <a href="https://chrome.google.com/webstore/detail/vextab-music-notation/pjggkphnejbllmmkmmgibonkbbhfjnkk">VexTab Google Docs add-on</a> lets you add music notation right in your Google Documents.</li>
<li>You can use the <a href="https://chrome.google.com/webstore/detail/npcffdibegeppkebphaghnpkcjcpopjf">VexTab Chrome Extension</a> to write and share musical snippets hosted on <a href="http://imgur.com">imgur</a> right from your browser.</li>
<li>The <a href="http://www.vexflow.com/vextab/playground/">VexTab Playground</a>
Expand All @@ -77,20 +75,18 @@ <h2>Where Do I Start?</h2>
<p/>
If you're a programmer interested in rendering music notation in your
own applications, take a look at
<a href="docs/tutorial.html">The VexFlow Tutorial</a>.
<a href="https://github.com/0xfe/vexflow/wiki/The-VexFlow-Tutorial">The VexFlow Tutorial</a>.
</div>


<p/>
<h2>Features</h2>
<div class="docs">
It sings, it dances, it does your dishes. Actually it does none of that.
But it can render a mean score. New features in VexFlow are incorporated
quickly into <a href="http://my.vexflow.com">My VexFlow</a>.
But it can render a mean score.

<p/>Have a look
at the <a href="http://my.vexflow.com/articles/53?source=enabled">
New in My VexFlow</a> page for a comprehensive list of features.
at the <a href="http://www.vexflow.com/tests/">tests</a> page for a comprehensive list of features.
</div>

<h2>What is VexTab?</h2>
Expand Down Expand Up @@ -130,16 +126,6 @@ <h2>More Stuff</h2>
</ul>
</div>

<h2>Keep it Flowing!</h2>
<div class="description">
If you use VexFlow, and you'd like to help keep it awesome and active,
consider donating some BitCoin.
<p/>
<center>
<a class="coinbase-button" data-code="ce94e632455ccf74d0fb095eb30da643" data-button-style="custom_small" href="https://coinbase.com/checkouts/ce94e632455ccf74d0fb095eb30da643">Donate Bitcoins</a><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script></script></a>
</center>
</div>

<h2>Stay in Touch</h2>
Keep up with changes at
<a href="http://twitter.com/11111110b">@11111110b</a>,
Expand Down
184 changes: 2 additions & 182 deletions docs/sandbox.html
View file
Expand Up @@ -2,186 +2,6 @@
<html>
<head>
<title>The VexFlow Sandbox</title>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine'
rel='stylesheet' type='text/css'>
<link href="../vextab/style.css" media="screen" rel="Stylesheet"
type="text/css" />

<!-- VexFlow Compiled Source -->
<script src="../build/vexflow-debug.js"></script>
<script src="../build/vexflow-min.js"></script>

<!-- Support Sources -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<style type="text/css">
canvas {
background: #eed;
padding: 10px;
border: 10px solid #ddc;
}

div.egcode {
font-family: Courier;
font-size: 12px;
}
</style>

<script>
/* Take raw javascript code, and return moderately useful HTML */
function prettify_code(code) {
var lines = code.split(/\r\n|\n|\r/);
var new_lines = [];
for (var j = 0; j < lines.length; ++j) {
code = lines[j];
code = code.replace(/\s/g, "&nbsp;");
code = code.replace(/>/g, "&gt;");
code = code.replace(/</g, "&lt;");
new_lines.push(code);
}

pretty_code = "<div class='egcode'>" + new_lines.join("<br/>") + "</div>";
return pretty_code;
}

/*
Find all the javascript examples and copy their source code
into the associated <code> blocks.
*/
$(function() {
$("div.description").each(function(index, sel) {
codes = $(sel).find("code.example");
codes.each(function(i, s) {
var example = $(s).attr("example");
var code = $($(sel).find(
"div.example." + example + " script")[0]).html();
$(s).html(prettify_code(code));
})
})
})
</script>
<meta http-equiv="refresh" content="0; url=https://jsfiddle.net/nL0cn3vL/2/" />
</head>

<body>
<div class="vex">
<a href="http://vexflow.com">VexFlow</a> |
<a href="http://my.vexflow.com">My VexFlow</a> |
<a href="http://vexflow.com/vextab">VexTab</a> |
<a href="http://0xfe.blogspot.com">0xfe</a>
</div>

<div class="header">
<h1>The VexFlow Sandbox</h1>
<div class="main">
<b>A live editor for experimenting with VexFlow</b>
</div>pre-pre-pre-alpha by <a href="http://0xfe.blogspot.com">0xfe</a>.
</div>

<div class="content">


<h2>Have some fun!</h2>

<div class="description sandbox">
Try out the VexFlow API in this live editor.
<p/>
<div class="editor-error"><span class="text"></span></div>
<p/>
<div class="example sandbox" example="sandbox">
<textarea id="sandbox" class="editor"
style="width: 641px; height: 180px; ">
// Get the rendering context
var canvas = $("div.sandbox div.sandbox canvas")[0];

var renderer = new Vex.Flow.Renderer(canvas,
Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
renderer.resize(500, 300); // Resize and clear canvas
ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

// Create and draw the tablature stave
var tabstave = new Vex.Flow.TabStave(10, 0, 500);
tabstave.addTabGlyph();
tabstave.setContext(ctx).draw();

// Create some notes
var notes = [
// A single note
new Vex.Flow.TabNote({
positions: [{str: 3, fret: 7}],
duration: "q"}),

// A chord with the note on the 3rd string bent
new Vex.Flow.TabNote({
positions: [{str: 2, fret: 10},
{str: 3, fret: 9}],
duration: "q"}).
addModifier(new Vex.Flow.Bend("Full"), 1),

// A single note with a harsh vibrato
new Vex.Flow.TabNote({
positions: [{str: 2, fret: 5}],
duration: "h"}).
addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0)
];

Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);</textarea>
<p/>
<canvas width=625 height=160></canvas>

<style>
.editor {
background: #cfc;
border: 10px solid #afa;
font-family: Courier;
font-size: 14px;
}


div.editor-error .text {
background: #faa;
border: 5px solid #f88;
font-family: Courier;
font-size: 14px;
padding: 3px;
display: none;
}

</style>
<script>

var timeout;
var msg = $('div.editor-error .text');

function live_code() {
var code = $("#sandbox").val();

try {
eval(code);
msg.html('').hide();
} catch (e) {
msg.html(e.toString()).show();
}

}

$('#sandbox').on('blur keyup paste', function() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(live_code, 200);
});

live_code();

</script>
<p/>
</div>

<center>
<h2>
Confused? Go read the <a href="tutorial.html">tutorial</a>.
</h2>
</center>
</div>
</body>

</html>
</html>

0 comments on commit 22839e9

Please sign in to comment.