Im playing with ya stuff and want sprite sheets for all the bmp files.
Ive converted what was in your css and that skinspec pdf but that still leaves a bunch of files.
Id love the x/y position and names of elements. I can figure them out by hand I guess, but would rather not and Im totally crap at naming things.
Here's what I have so far incase anyone else wants to play...
/*
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,
"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,
"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
}
},
},
"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: 0,
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",
"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,
"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,
"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 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);
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent