mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 11:04:00 +00:00
Refactor multi-display and font
This commit is contained in:
Jordan Eldredge
parent
9fba6f0337
commit
e575ee24b4
4 changed files with 84 additions and 97 deletions
123
js/font.js
123
js/font.js
|
|
@ -1,78 +1,63 @@
|
|||
// Manage rendering text from this skin's text.bmp file
|
||||
define({
|
||||
define([], function(){
|
||||
var Font = function() {
|
||||
|
||||
// Fill a node with a <div> containing character <div>s
|
||||
setNodeToString: function(node, string) {
|
||||
var stringElement = this._stringNode(string);
|
||||
node.innerHTML = '';
|
||||
node.appendChild(stringElement);
|
||||
},
|
||||
// Fill a node with a <div> containing character <div>s
|
||||
this.setNodeToString = function(node, string) {
|
||||
var stringElement = document.createElement('div');
|
||||
for (var i = 0, len = string.length; i < len; i++) {
|
||||
var char = string[i].toLowerCase();
|
||||
stringElement.appendChild(this.characterNode(char));
|
||||
}
|
||||
node.innerHTML = '';
|
||||
node.appendChild(stringElement);
|
||||
};
|
||||
|
||||
// Get a <div> containing char
|
||||
characterNode: function(char) {
|
||||
return this.displayCharacterInNode(char, document.createElement('div'));
|
||||
},
|
||||
// Get a <div> containing char
|
||||
this.characterNode = function(char) {
|
||||
return this.displayCharacterInNode(char, document.createElement('div'));
|
||||
};
|
||||
|
||||
// Style/populate a <div> to display a character
|
||||
displayCharacterInNode: function(character, node) {
|
||||
var position = this._getCharPosition(character);
|
||||
var row = position[0];
|
||||
var column = position[1];
|
||||
var verticalOffset = row * 6;
|
||||
var horizontalOffset = column * 5;
|
||||
// Style/populate a <div> to display a character
|
||||
this.displayCharacterInNode = function(character, node) {
|
||||
var position = this._fontLookup[character] || this._fontLookup[' '];
|
||||
var verticalOffset = position[0] * 6;
|
||||
var horizontalOffset = position[1] * 5;
|
||||
|
||||
var x = '-' + horizontalOffset + 'px';
|
||||
var y = '-' + verticalOffset + 'px';
|
||||
node.style.backgroundPosition = x + ' ' + y;
|
||||
node.classList.add('character');
|
||||
var x = '-' + horizontalOffset + 'px';
|
||||
var y = '-' + verticalOffset + 'px';
|
||||
node.style.backgroundPosition = x + ' ' + y;
|
||||
node.classList.add('character');
|
||||
|
||||
node.innerHTML = character;
|
||||
return node;
|
||||
},
|
||||
node.innerHTML = character;
|
||||
return node;
|
||||
};
|
||||
|
||||
// Get a <div> containing a digit
|
||||
digitNode: function(digit) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('digit');
|
||||
div.classList.add('digit-' + digit);
|
||||
return div;
|
||||
},
|
||||
// Get a <div> containing a digit
|
||||
this.digitNode = function(digit) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('digit');
|
||||
div.classList.add('digit-' + digit);
|
||||
return div;
|
||||
};
|
||||
|
||||
|
||||
// Get a <div> containing character <div>s
|
||||
_stringNode: function(string) {
|
||||
var parentDiv = document.createElement('div');
|
||||
for (var i = 0, len = string.length; i < len; i++) {
|
||||
var char = string[i].toLowerCase();
|
||||
parentDiv.appendChild(this.characterNode(char));
|
||||
}
|
||||
return parentDiv;
|
||||
},
|
||||
|
||||
// Find the background offsets for a given character
|
||||
_getCharPosition: function(char) {
|
||||
var position = this._fontLookup[char];
|
||||
if (!position) {
|
||||
return this._fontLookup[' '];
|
||||
}
|
||||
return position;
|
||||
},
|
||||
|
||||
/* TODO: There are too many " " and "_" characters */
|
||||
_fontLookup: {
|
||||
'a': [0, 0], 'b': [0, 1], 'c': [0, 2], 'd': [0, 3], 'e': [0, 4], 'f': [0, 5],
|
||||
'g': [0, 6], 'h': [0, 7], 'i': [0, 8], 'j': [0, 9], 'k': [0, 10],
|
||||
'l': [0, 11], 'm': [0, 12], 'n': [0, 13], 'o': [0, 14], 'p': [0, 15],
|
||||
'q': [0, 16], 'r': [0, 17], 's': [0, 18], 't': [0, 19], 'u': [0, 20],
|
||||
'v': [0, 21], 'w': [0, 22], 'x': [0, 23], 'y': [0, 24], 'z': [0, 25],
|
||||
'"': [0, 26], '@': [0, 27], '0': [1, 0], '1': [1, 1],
|
||||
'2': [1, 2], '3': [1, 3], '4': [1, 4], '5': [1, 5], '6': [1, 6], '7': [1, 7],
|
||||
'8': [1, 8], '9': [1, 9], '_': [1, 11], ':': [1, 12],
|
||||
'(': [1, 13], ')': [1, 14], '-': [1, 15], "'": [1, 16], '!': [1, 17],
|
||||
'+': [1, 19], '\\': [1, 20], '/': [1, 21], '[': [1, 22],
|
||||
']': [1, 23], '^': [1, 24], '&': [1, 25], '%': [1, 26], '.': [1, 27],
|
||||
'=': [1, 28], '$': [1, 29], '#': [1, 30], 'Å': [2, 0], 'Ö': [2, 1],
|
||||
'Ä': [2, 2], '?': [2, 3], '*': [2, 4], ' ': [2, 5], '<': [1, 22],
|
||||
'>': [1, 23], '{': [1, 22], '}': [1, 23]
|
||||
}
|
||||
/* TODO: There are too many " " and "_" characters */
|
||||
this._fontLookup = {
|
||||
'a': [0, 0], 'b': [0, 1], 'c': [0, 2], 'd': [0, 3], 'e': [0, 4], 'f': [0, 5],
|
||||
'g': [0, 6], 'h': [0, 7], 'i': [0, 8], 'j': [0, 9], 'k': [0, 10],
|
||||
'l': [0, 11], 'm': [0, 12], 'n': [0, 13], 'o': [0, 14], 'p': [0, 15],
|
||||
'q': [0, 16], 'r': [0, 17], 's': [0, 18], 't': [0, 19], 'u': [0, 20],
|
||||
'v': [0, 21], 'w': [0, 22], 'x': [0, 23], 'y': [0, 24], 'z': [0, 25],
|
||||
'"': [0, 26], '@': [0, 27], '0': [1, 0], '1': [1, 1],
|
||||
'2': [1, 2], '3': [1, 3], '4': [1, 4], '5': [1, 5], '6': [1, 6], '7': [1, 7],
|
||||
'8': [1, 8], '9': [1, 9], '_': [1, 11], ':': [1, 12],
|
||||
'(': [1, 13], ')': [1, 14], '-': [1, 15], "'": [1, 16], '!': [1, 17],
|
||||
'+': [1, 19], '\\': [1, 20], '/': [1, 21], '[': [1, 22],
|
||||
']': [1, 23], '^': [1, 24], '&': [1, 25], '%': [1, 26], '.': [1, 27],
|
||||
'=': [1, 28], '$': [1, 29], '#': [1, 30], 'Å': [2, 0], 'Ö': [2, 1],
|
||||
'Ä': [2, 2], '?': [2, 3], '*': [2, 4], ' ': [2, 5], '<': [1, 22],
|
||||
'>': [1, 23], '{': [1, 22], '}': [1, 23]
|
||||
};
|
||||
};
|
||||
return Font;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ define([
|
|||
this.handle = document.getElementById('title-bar');
|
||||
this.body = this.nodes.window;
|
||||
|
||||
this.textDisplay = MultiDisplay.init(Font, this.nodes.songTitle);
|
||||
this.textDisplay = new MultiDisplay(this.nodes.songTitle);
|
||||
this.textDisplay.addRegister('songTitle');
|
||||
this.textDisplay.addRegister('position');
|
||||
this.textDisplay.addRegister('volume');
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
// Single line text display that can animate and hold multiple registers
|
||||
define({
|
||||
node: null, // The DOM node of the display
|
||||
registers: {},
|
||||
init: function(font, node) {
|
||||
this.font = font;
|
||||
define(['font'], function(Font) {
|
||||
var MultiDisplay = function(node) {
|
||||
this.font = new Font();
|
||||
this.node = node;
|
||||
this.registers = {};
|
||||
this._marqueeLoop();
|
||||
return this;
|
||||
},
|
||||
addRegister: function(key) {
|
||||
};
|
||||
|
||||
MultiDisplay.prototype.addRegister = function(key) {
|
||||
// Create element node
|
||||
var register = document.createElement('div');
|
||||
register.style.display = 'none';
|
||||
|
|
@ -19,28 +18,29 @@ define({
|
|||
text: '',
|
||||
marquee: false
|
||||
};
|
||||
},
|
||||
setRegisterText: function(register, text) {
|
||||
// Set text of register
|
||||
};
|
||||
|
||||
// Set text of register
|
||||
MultiDisplay.prototype.setRegisterText = function(register, text) {
|
||||
this.font.setNodeToString(this.registers[register].node, text);
|
||||
},
|
||||
hideAllRegisters: function() {
|
||||
};
|
||||
|
||||
MultiDisplay.prototype.showRegister = function(showKey) {
|
||||
for (var key in this.registers) {
|
||||
this.registers[key].node.style.display = 'none';
|
||||
var display = (key === showKey) ? 'block' : 'none';
|
||||
this.registers[key].node.style.display = display;
|
||||
}
|
||||
},
|
||||
showRegister: function(key) {
|
||||
this.hideAllRegisters();
|
||||
// Show the one register
|
||||
this.registers[key].node.style.display = 'block';
|
||||
},
|
||||
startRegisterMarquee: function(key) {
|
||||
};
|
||||
|
||||
MultiDisplay.prototype.startRegisterMarquee = function(key) {
|
||||
this.registers[key].marquee = true;
|
||||
},
|
||||
pauseRegisterMarquee: function(key) {
|
||||
};
|
||||
|
||||
MultiDisplay.prototype.pauseRegisterMarquee = function(key) {
|
||||
this.registers[key].marquee = false;
|
||||
},
|
||||
_marqueeLoop: function() {
|
||||
};
|
||||
|
||||
MultiDisplay.prototype._marqueeLoop = function() {
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
for (var key in self.registers) {
|
||||
|
|
@ -57,5 +57,7 @@ define({
|
|||
}
|
||||
self._marqueeLoop();
|
||||
}, 220);
|
||||
}
|
||||
};
|
||||
|
||||
return MultiDisplay;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ define([
|
|||
JSZip
|
||||
) {
|
||||
return {
|
||||
font: Font,
|
||||
font: new Font(),
|
||||
init: function(visualizerNode, analyser) {
|
||||
this._createNewStyleNode();
|
||||
this.visualizer = Visualizer.init(visualizerNode, analyser);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue