cynic
/
0x40-web
mirror of https://github.com/kurisufriend/0x40-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Serial interface for flashing LEDs. Uses JUart

Browse Source
serial
William Toohey 10 years ago
parent 565eb1431d
commit 12eb2ef3c3
2 changed files with 160 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      js/HuesCanvas.js
  2. 138
      serial.html

22
js/HuesCanvas.js
Unescape View File

@ -59,6 +59,7 @@ function HuesCanvas(element, aContext, core) {
this.colourFadeLength=0; this.colourFadeLength=0;
this.oldColour=0xFFFFFF; this.oldColour=0xFFFFFF;
this.newColour=0xFFFFFF; this.newColour=0xFFFFFF;
this.serialColour = 0;
this.blendMode = "hard-light"; this.blendMode = "hard-light";
// Chosen because they look decent // Chosen because they look decent
@ -73,6 +74,26 @@ function HuesCanvas(element, aContext, core) {
requestAnimationFrame(this.getAnimLoop()); requestAnimationFrame(this.getAnimLoop());
} }
HuesCanvas.prototype.sendSerial = function() {
if(!ser)
return;
var col = this.colour;
if(this.blackout) {
bOpacity = (this.aContext.currentTime - this.blackoutStart)*10;
bOpacity = Math.min(1, bOpacity);
col *= 1 - bOpacity;
col = Math.floor(col);
}
if(col == this.serialColour)
return;
this.serialColour = col;
var str = String(col);
for(var i = 0; i < str.length; i++) {
ser.send(str[i]);
}
ser.send("\n".charCodeAt(0));
}
HuesCanvas.prototype.resizeHandler = function(that) { HuesCanvas.prototype.resizeHandler = function(that) {
return function() {that.resize();}; return function() {that.resize();};
} }
@ -224,6 +245,7 @@ HuesCanvas.prototype.animationLoop = function() {
if(this.animating) { if(this.animating) {
requestAnimationFrame(this.getAnimLoop()); requestAnimationFrame(this.getAnimLoop());
} }
this.sendSerial();
} }
HuesCanvas.prototype.setImage = function(image) { HuesCanvas.prototype.setImage = function(image) {

138
serial.html
Unescape View File

@ -0,0 +1,138 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>0x40</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hues-x.css">
<link rel="stylesheet" href="css/hues-m.css">
<link rel="stylesheet" href="css/hues-r.css">
<link rel="stylesheet" href="css/hues-w.css">
<link rel="stylesheet" href="css/hues-res.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/HuesCore.js"></script>
<script type="text/javascript" src="js/HuesSettings.js"></script>
<script type="text/javascript" src="js/HuesUI.js"></script>
<script type="text/javascript" src="js/HuesCanvas.js"></script>
<script type="text/javascript" src="js/ResourcePack.js"></script>
<script type="text/javascript" src="js/ResourceManager.js"></script>
<script type="text/javascript" src="js/SoundManager.js"></script>
<script type="text/javascript" src="js/lib/zip.js"></script>
<script type="text/javascript" src="js/lib/zip-fs.js"></script>
<script type="text/javascript">
ser = null;
window.onload = function() {
zip.workerScriptsPath = "js/lib/";
var defaults = {
respacks : [//"./respacks/Defaults_v5.0.zip",
"./respacks/CharPackagev0.03.zip",
"./respacks/HuesMixB.zip",
"./respacks/PackShit.zip"
],
//load : false, //debug
autoplay : false // debug
};
core = new HuesCore(defaults);
// Serial
function plugin0() {
return document.getElementById('plugin0');
}
plugin = plugin0;
if(plugin().valid){
//alert(plugin().echo("Serial seems to be working!"));
console.log("Serial plugin working!");
} else {
alert("Serial is not working :(");
}
console.log("initialising serial!");
ser = plugin().Serial;// Get a Serial object
ser.open("COM4");// Open a port
ser.set_option(115200,0,8,0,0);// Set port options
};
</script>
</head>
<body>
<object id="plugin0" type="application/x-juart" width="0" height="0" style="position:absolute;top:-1000">
<param name="onload" value="pluginLoaded" />
</object>
<div id="preloadHelper">
<div id="preloader">
<div id="preMain">0x00</div>
<div id="preSub"></div>
</div>
</div>
<div id="settingsHelper">
<div id="settingsWindow">
<div id="closeButton">x</div>
<div id="tabs">
<input class="tab-input" type="radio" name="tabs" id="tab1">
<label class="tab-label" for="tab1">RESOURCES</label>
<input class="tab-input" type="radio" name="tabs" id="tab2">
<label class="tab-label" for="tab2">OPTIONS</label>
<input class="tab-input" type="radio" name="tabs" id="tab3" checked>
<label class="tab-label" for="tab3">INFO</label>
<div id="tab1-content" class="tab-content">
<!-- Populated by ResourceManager.js -->
<div id="huesResources"></div>
</div>
<div id="tab2-content" class="tab-content">
<!-- Populated by HuesSettings.js -->
<div id="huesSettings"></div>
</div>
<div id="tab3-content" class="tab-content">
<div id="about">
<h1>0x40 Hues of JS, v0.1</h1>
<h2>Adapted from the <a target="_blank" href="http://0x40hues.blogspot.com">0x40 Flash</a></h2>
<h2>Web-ified by <a target="_blank" href="https://github.com/mon">mon</a></h2>
<h3>With help from <a target="_blank" href="https://github.com/kepstin/0x40hues-html5">Kepstin</a></h3>
</div>
<div id="reference">
<div class="info-ref">
<h3>Beat glossary</h3>
<ul>
<li>x Vertical blur (snare)</li>
<li>o Horizontal blur (bass)</li>
<li>- No blur</li>
<li>+ Blackout</li>
<li>| Short blackout</li>
<li>: Color only</li>
<li>* Image only</li>
<li>X Vertical blur only</li>
<li>O Horizontal blur only</li>
<li>~ Fade color</li>
<li>= Fade and change image</li>
</ul>
</div>
<div class="info-ref">
<h3>Keyboard shortcuts</h3>
<ul>
<li>↑↓ Change song</li>
<li>←→ Change image</li>
<li>[SHIFT] Random song</li>
<li>-+ Change volume</li>
<li>[M] Toggle mute</li>
<li>[F] Toggle automode</li>
<li>[H] Toggle UI hide</li>
<li>[C] Character list</li>
<li>[S] Song list</li>
<li>[W] Toggle window</li>
<li>[R] Resource packs</li>
<li>[O] Options</li>
<li>[I] Information</li>
<li>[1-4] Change UI</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Populated by HuesUI.js -->
<div id="huesUI"></div>
<canvas id="waifu" width="1280" height="720"></canvas>
</body>
</html>
Write Preview
Loading…
Cancel
Save