Skip to content

Instantly share code, notes, and snippets.

@PAEz

PAEz/Winamp Stuffs.js

Last active August 29, 2015 14:10
Show Gist options
  • Save PAEz/a1fd05022cf44b200ca3 to your computer and use it in GitHub Desktop.
Save PAEz/a1fd05022cf44b200ca3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Winamp Stuffs.js
/*
Reserved words
--------------
Width
Height
X
Y
Scale - not used yet but will be used to declare the scalling method and details (slice and all that)
*/
var spritesheet = {
"shufrep.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/SHUFREP.BMP",
"repeat": {
Width: 28,
Height: 15,
"on": {
X: 0,
Y: 30,
"active": {
X: 0,
Y: 45
}
},
"off": {
X: 0,
Y: 0,
"active": {
X: 0,
Y: 15
}
}
},
"shuffle": {
Width: 47,
Height: 15,
"on": {
X: 28,
Y: 30,
"active": {
X: 28,
Y: 45
}
},
"off": {
X: 28,
Y: 0,
"active": {
X: 28,
Y: 15
}
}
},
"equalizer": {
Width: 23,
Height: 12,
X:0,
Y:73,
"on": {
X: 0,
Y: 73,
"active": {
X: 46,
Y: 73
}
},
"off": {
X: 0,
Y: 61,
"active": {
X: 46,
Y: 61
}
}
},
"playlist": {
Width: 23,
Height: 12,
X: 23,
Y: 73,
"on": {
X: 23,
Y: 73,
"active": {
X: 69,
Y: 73
}
},
"off": {
X: 23,
Y: 61,
"active": {
X: 69,
Y: 61
}
}
}
},
"cbuttons.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/CBUTTONS.BMP",
Width: 23,
Height: 18,
"previous": {
X: 0,
Y: 0,
"active": {
X: 0,
Y: 18
}
},
"play": {
X: 23,
Y: 0,
"active": {
X: 23,
Y: 18
}
},
"pause": {
X: 46,
Y: 0,
"active": {
X: 46,
Y: 18
}
},
"stop": {
X: 69,
Y: 0,
"active": {
X: 69,
Y: 18
}
},
"next": {
Width: 22,
Height: 18,
X: 92,
Y: 0,
"active": {
X: 92,
Y: 18
}
},
"eject": {
Width: 22,
Height: 16,
X: 114,
Y: 0,
"active": {
X: 114,
Y: 18
}
},
},
"titlebar.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/TITLEBAR.BMP",
"shade": {
Width: 275,
Height: 14,
X: 27,
Y: 42,
"selected": {
X: 27,
Y: 29
},
"position": {
"background": {
Width: 17,
Height: 7,
X: 0,
Y: 36
},
"thumb": {
Width: 3,
Height: 7,
"middle": {
X: 20,
Y: 36
},
"left": {
X: 17,
Y: 36
},
"right": {
X: 23,
Y: 36
}
}
}
},
"button": {
Width: 9,
Height: 9,
"option": { //winamp menu
X: 0,
Y: 0,
"active": {
X: 0,
Y: 9
}
},
"minimize": {
X: 9,
Y: 0,
"active": {
X: 9,
Y: 9
}
},
"shade": {
X: 0,
Y: 18,
"active": {
X: 9,
Y: 18
}
},
"close": {
X: 18,
Y: 0,
"active": {
X: 18,
Y: 9
}
},
"unshade": {
X: 0,
Y: 27,
"active": {
X: 9,
Y: 27
}
}
},
"titlebar": {
Width: 275,
Height: 116,
X: 27,
Y: 14,
"selected": {
X: 27,
Y: 0
},
"llama": {
X: 27,
Y: 61,
"selected": {
X: 27,
Y: 57
}
}
},
"clutterbar": {
Width: 8,
Height: 43,
X: 304,
Y: 0,
"disabled": {
X: 312,
Y: 0
},
"o": {
X: 304,
Y: 44
},
"p": {
X: 312,
Y: 44
},
"i": {
X: 320,
Y: 44
},
"d": {
X: 328,
Y: 44
},
"v": {
X: 336,
Y: 44
}
}
},
"playpaus.bmp": { // play/work indicators
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/PLAYPAUS.BMP",
"play": {
Width: 9,
Height: 9,
X: 27,
Y: 0,
"background": {
// Width:9, // or 2, or what ever
X: 27,
Y: 0
},
"play": {
X: 0,
Y: 0
},
"pause": {
X: 9,
Y: 0
},
"stop": {
X: 18,
Y: 0
},
},
"work": {
Width: 3,
Height: 9,
"on": {
X: 36,
Y: 0
},
"off": {
X: 39,
Y: 0
}
}
},
"monoster.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/MONOSTER.BMP",
"stereo": {
Width: 29,
Height: 12,
"on": {
X: 0,
Y: 0
},
"off": {
X: 0,
Y: 12
}
},
"mono": {
Width: 29,
Height: 12,
"on": {
X: 29,
Y: 0
},
"off": {
X: 29,
Y: 12
}
}
},
"posbar.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/POSBAR.BMP",
Width: 248,
Height: 10,
X: 0,
Y: 0
"background": {
Width: 248,
Height: 10,
X: 0,
Y: 0
},
"thumb": {
Width: 29,
Height: 10,
X: 248,
Y: 0,
"active": {
X: 278,
Y: 0
}
}
},
"volume.bmp": {
URL:"https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91/VOLUME.BMP",
Width: 68,
Height: 13,
X:0,
Y:0
"0": {
X: 0,
Y: 0
},
"1": {
X: 0,
Y: 15
},
"2": {
X: 0,
Y: 30
},
"3": {
X: 0,
Y: 45
},
"4": {
X: 0,
Y: 60
},
"5": {
X: 0,
Y: 75
},
"6": {
X: 0,
Y: 90
},
"7": {
X: 0,
Y: 105
},
"8": {
X: 0,
Y: 120
},
"9": {
X: 0,
Y: 135
},
"10": {
X: 0,
Y: 150
},
"11": {
X: 0,
Y: 165
},
"12": {
X: 0,
Y: 180
},
"13": {
X: 0,
Y: 195
},
"14": {
X: 0,
Y: 210
},
"15": {
X: 0,
Y: 225
},
"16": {
X: 0,
Y: 240
},
"17": {
X: 0,
Y: 255
},
"18": {
X: 0,
Y: 270
},
"19": {
X: 0,
Y: 285
},
"20": {
X: 0,
Y: 300
},
"21": {
X: 0,
Y: 315
},
"22": {
X: 0,
Y: 330
},
"23": {
X: 0,
Y: 345
},
"24": {
X: 0,
Y: 360
},
"25": {
X: 0,
Y: 375
},
"26": {
X: 0,
Y: 390
},
"27": {
X: 0,
Y: 405
},
"thumb": {
Width: 14,
Height: 11,
X: 15,
Y: 422,
"active": {
X: 0,
Y: 422
}
}
},
"balance.bmp": {
URL:"http://jordaneldredge.com/projects/winamp2-js/skins/default/BALANCE.BMP",
Width: 38,
Height: 13,
X:0,
Y:0
"0": {
X: 9,
Y: 0
},
"1": {
X: 9,
Y: 15
},
"2": {
X: 9,
Y: 30
},
"3": {
X: 9,
Y: 45
},
"4": {
X: 9,
Y: 60
},
"5": {
X: 9,
Y: 75
},
"6": {
X: 9,
Y: 90
},
"7": {
X: 9,
Y: 105
},
"8": {
X: 9,
Y: 120
},
"9": {
X: 9,
Y: 135
},
"10": {
X: 9,
Y: 150
},
"11": {
X: 9,
Y: 165
},
"12": {
X: 9,
Y: 180
},
"13": {
X: 9,
Y: 195
},
"14": {
X: 9,
Y: 210
},
"15": {
X: 9,
Y: 225
},
"16": {
X: 9,
Y: 240
},
"17": {
X: 9,
Y: 255
},
"18": {
X: 9,
Y: 270
},
"19": {
X: 9,
Y: 285
},
"20": {
X: 9,
Y: 300
},
"21": {
X: 9,
Y: 315
},
"22": {
X: 9,
Y: 330
},
"23": {
X: 9,
Y: 345
},
"24": {
X: 9,
Y: 360
},
"25": {
X: 9,
Y: 375
},
"26": {
X: 9,
Y: 390
},
"27": {
X: 9,
Y: 405
},
"thumb": {
Width: 14,
Height: 11,
X: 15,
Y: 422,
"active": {
X: 0,
Y: 422
}
}
}
}
function decorate(node, props, parent) {
Object.keys(props).forEach(function(last) {
if ((node.X !== undefined || node.Y !== undefined) && props[last] !== null && node[last] === undefined) node[last] = props[last];
if (node[last] !== undefined) props[last] = node[last];
});
Object.keys(node).forEach(function(key) {
var prop = node[key];
if (typeof prop == 'object') decorate(prop, props, node);
});
// if (parent) node.Parent = parent;
};
Object.keys(spritesheet).forEach(function(key) {
decorate(spritesheet[key], {
Width: null,
Height: null,
X: null,
Y: null,
Image: key
});
});
var flattenObject = function(ob) {
var toReturn = {};
for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if ((typeof ob[i]) == 'object' && ob[i] !== null) {
var flatObject = flattenObject(ob[i]);
for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
toReturn[i + '.' + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
return toReturn;
};
/*
var flat=flattenObject(spritesheet);
// This is to help ya see what the path is to the sprites
console.debug(JSON.stringify(flat,null,' '));
*/
/*
Although not used yet keep in mind....
X and Y correspond to css Top and Left unless their minus in which case they represent Bottom and Right
If a property has a Block property then the properties in it are relative not absolute
These couple of things should allow for anchoring that could be cool for resizing....not a winamp thing, just part of my curiosity
If something has a width and height its a hit zone
Unless its type is Canvas, in which case its a hitzone...sofar...I might add a Hitzone type later?....
If it doesnt have a width and height its a button and taken from the spites width/height
*/
var positions = {
"winamp": {
Sprite: "winamp",
X: 0,
Y: 0,
"titlebar": {
Sprite: "titlebar.bmp.titlebar",
X: 0,
Y: 0,
"option": {
Sprite: "titlebar.bmp.button.option",
X: 6,
Y: 3,
},
"minimize": {
Sprite: "titlebar.bmp.button.minimize",
X: 244,
Y: 3,
},
"shade": {
Sprite: "titlebar.bmp.button.shade",
X: 254,
Y: 3,
},
"close": {
Sprite: "titlebar.bmp.button.close",
X: 264,
Y: 3,
},
},
"clutterbar": {
Sprite: "titlebar.bmp.clutterbar",
X: 10,
Y: 22,
"o": {
X: 10,
Y: 22,
Width: 8,
Height: 10
},
"a": {
X: 10,
Y: 32,
Width: 8,
Height: 8
},
"i": {
X: 10,
Y: 40,
Width: 8,
Height: 8
},
"d": {
X: 10,
Y: 48,
Width: 8,
Height: 8
},
"v": {
X: 10,
Y: 56,
Width: 8,
Height: 9
},
},
"time": { // Add the x/y/width/height...its a hitzone
X: 36,
Y: 26,
Width: 63,
Height: 13,
"minus": {
Font: null,
X: 36,
Y: 26
},
"0": {
Font: null,
X: 48,
Y: 26
},
"1": {
Font: null,
X: 60,
Y: 26
},
/*
This doesnt exist, but it really should....dont like the way the seperator is there when not playing
"seperator":{
Font:null,
X:48,
Y:26
},
*/
"2": {
Font: null,
X: 78,
Y: 26
},
"3": {
Font: null,
X: 90,
Y: 26
},
}.
"songinfo": { // Add the width and height so BitFont knows how many chars can be shown or for if I go with the other method of display
Font: null,
X: 111,
Y: 27
},
"playpause": {
Sprite: "playpaus.bmp.play"
X: 24,
Y: 18
},
"mono": {
Sprite: "monoster.bmp.mono.off",
X: 212,
Y: 41
},
"stereo": {
Sprite: "monoster.bmp.stereo.off",
X: 239,
Y: 41
},
"kbps": {
Font: null,
X: 111,
Y: 43
},
"khz": {
Font: null,
X: 111,
Y: 43
},
"visualization": {
Canvas: true,
X: 24,
Y: 44,
Width: 76,
Height: 15
},
"volume": {
Sprite: "volume.bmp",
X: 107,
Y: 57
},
"balance": {
Slider: true,
Sprite: "balance.bmp",
X: 177,
Y: 57
},
"equalizer": {
Sprite: "shufrep.bmp.equalizer",
X: 219,
Y: 58
},
"playlist": {
Sprite: "shufrep.bmp.playlist",
X: 242,
Y: 58
},
"posbar": {
Slider: true,
Sprite: "posbar.bmp",
X: 16,
Y: 72
},
// "button":{
"previous": {
Sprite: "cbuttons.bmp.previous",
X: 16,
Y: 88
},
"play": {
Sprite: "cbuttons.bmp.play",
X: 39,
Y: 88
},
"pause": {
Sprite: "cbuttons.bmp.pause",
X: 62,
Y: 88
},
"stop": {
Sprite: "cbuttons.bmp.stop",
X: 85,
Y: 88
},
"next": {
Sprite: "cbuttons.bmp.next",
X: 108,
Y: 88
},
"eject": {
Sprite: "cbuttons.bmp.eject",
X: 136,
Y: 89
},
// }
"shuffle": {
Sprite: "shufrep.bmp.shuffle.off",
X: 164,
Y: 89
},
"repeat": {
Sprite: "shufrep.bmp.repeat.off",
X: 253,
Y: 91,
},
"info": {
X: 211,
Y: 89,
Width: 13,
Height: 15
},
},
"shade": {
Sprite: "titlebar.bmp.shade",
X:0,
Y:0,
"option": {
Sprite: "titlebar.bmp.button.option",
X: 6,
Y: 3,
},
"minimize": {
Sprite: "titlebar.bmp.button.minimize",
X: 244,
Y: 3,
},
"shade": {
Sprite: "titlebar.bmp.button.shade",
X: 254,
Y: 3,
},
"close": {
Sprite: "titlebar.bmp.button.close",
X: 264,
Y: 3,
},
"previous": {
Width: 7,
Height: 10,
X: 169,
Y: 2,
},
"play": {
Width: 10,
Height: 10,
X: 176,
Y: 2,
},
"pause": {
Width: 9,
Height: 10,
X: 186,
Y: 2,
},
"stop": {
Width: 9,
Height: 10,
X: 195,
Y: 2,
},
"next": {
Width: 10,
Height: 10,
X: 204,
Y: 2,
},
"eject": {
Width: 10,
Height: 10,
X: 215,
Y: 2,
},
"position": {
Slider: true,
Width: 17,
Height: 7,
X: 226,
Y: 2,
},
"time": {
Width: 25,
Height: 6,
X: 127,
Y: 4,
"minus": {
Font: null,
X: 127,
Y: 4
},
"0": {
Font: null,
X: 133,
Y: 4
},
"1": {
Font: null,
X: 138,
Y: 4
},
/*
This doesnt exist, but it really should....dont like the way the seperator is there when not playing
"seperator":{
Font:null,
X:48,
Y:26
},
*/
"2": {
Font: null,
X: 147,
Y: 4
},
"3": {
Font: null,
X: 152,
Y: 4
},
},
}
}
// ummmm....arrrrrr......
var states = { // what images should be shown for different states
"playingstate": {
"playing": {
"winamp.playpause": "playpaus.bmp.play.play"
},
"stopped": {
"winamp.playpause": "playpaus.bmp.play.stop"
},
"paused": {
"winamp.playpause": "playpaus.bmp.play.pause"
},
},
"titlebar": {
"full": {
},
"shade": {
}
}
}
var mvcstuff = {
}
/*
// This is old and prolly going to be different...well, IS going to be diffrent
var a;
function createStyles(spritesheets) {
function iterate(node, imageID, path) {
if (node.X !== undefined) {
console.debug(imageID + ' ' + path + ' _size');
var rule = '.' + imageID + '.' + path + '{background-position: -' + node.X + 'px -' + node.Y + 'px;}';
// Insert CSS Rule
styleSheet.insertRule(rule, styleSheet.cssRules.length);
rule = '.' + imageID + '.' + path + '._size{width: ' + node.Width + 'px; height:' + node.Height + 'px;}';
// Insert CSS Rule
styleSheet.insertRule(rule, styleSheet.cssRules.length);
}
Object.keys(node).forEach(function(key) {
if (typeof node[key] == 'object') iterate(node[key], imageID, path + '_' + key);
});
}
var styleEl = document.createElement('style'),
styleSheet;
// Apparently some version of Safari needs the following line? I dunno.
styleEl.appendChild(document.createTextNode(''));
// Append style element to head
document.head.appendChild(styleEl);
// Grab style sheet
styleSheet = styleEl.sheet;
Object.keys(spritesheets).forEach(function(key) {
var sheet = spritesheets[key];
var image = key;
var imageID = image.replace('.', '_');
styleSheet.insertRule('.' + imageID + ' { background-image:url(\'' + sheet.URL + '\');}', styleSheet.cssRules.length);
iterate(sheet, imageID, '');
})
a = styleSheet;
}
createStyles(spritesheet);*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment