mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-23 16:25:22 +03:00
logo customization code autoformatted with 4 space indents and minor refactoring
This commit is contained in:
Kiripolszky Károly
parent
6ef1ae7721
commit
79907fa388
1 changed files with 130 additions and 129 deletions
|
|
@ -80,14 +80,14 @@ FONT.constants = {
|
||||||
TILES_NUM_HORIZ: 24,
|
TILES_NUM_HORIZ: 24,
|
||||||
TILES_NUM_VERT: 4,
|
TILES_NUM_VERT: 4,
|
||||||
MCM_COLORMAP: {
|
MCM_COLORMAP: {
|
||||||
// background
|
// background
|
||||||
'0-255-0': '01',
|
'0-255-0': '01',
|
||||||
// black
|
// black
|
||||||
'0-0-0': '00',
|
'0-0-0': '00',
|
||||||
// white
|
// white
|
||||||
'255-255-255': '10',
|
'255-255-255': '10',
|
||||||
// fallback
|
// fallback
|
||||||
'default': '01',
|
'default': '01',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -165,124 +165,124 @@ FONT.openFontFile = function($preview) {
|
||||||
|
|
||||||
// show a file open dialog and yield an Image object
|
// show a file open dialog and yield an Image object
|
||||||
var openLogoImage = function() {
|
var openLogoImage = function() {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve, reject) {
|
||||||
var validateImage = function(img) {
|
var validateImage = function(img) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve, reject) {
|
||||||
var expectedWidth = FONT.constants.SIZES.CHAR_WIDTH
|
var expectedWidth = FONT.constants.SIZES.CHAR_WIDTH
|
||||||
* FONT.constants.LOGO.TILES_NUM_HORIZ,
|
* FONT.constants.LOGO.TILES_NUM_HORIZ,
|
||||||
expectedHeight = FONT.constants.SIZES.CHAR_HEIGHT
|
expectedHeight = FONT.constants.SIZES.CHAR_HEIGHT
|
||||||
* FONT.constants.LOGO.TILES_NUM_VERT;
|
* FONT.constants.LOGO.TILES_NUM_VERT;
|
||||||
if (img.width != expectedWidth || img.height != expectedHeight) {
|
if (img.width != expectedWidth || img.height != expectedHeight) {
|
||||||
reject(i18n.getMessage("osdSetupReplaceLogoImageSizeError",
|
reject(i18n.getMessage("osdSetupReplaceLogoImageSizeError",
|
||||||
[expectedWidth, expectedHeight, img.width, img.height]));
|
[expectedWidth, expectedHeight, img.width, img.height]));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var canvas = document.createElement('canvas'),
|
var canvas = document.createElement('canvas'),
|
||||||
ctx = canvas.getContext('2d');
|
ctx = canvas.getContext('2d');
|
||||||
canvas.width = img.width;
|
canvas.width = img.width;
|
||||||
canvas.height = img.height;
|
canvas.height = img.height;
|
||||||
ctx.drawImage(img, 0, 0);
|
ctx.drawImage(img, 0, 0);
|
||||||
for (var y = 0, Y = canvas.height; y < Y; y++) {
|
for (var y = 0, Y = canvas.height; y < Y; y++) {
|
||||||
for (var x = 0, X = canvas.width; x < X; x++) {
|
for (var x = 0, X = canvas.width; x < X; x++) {
|
||||||
var rgbPixel = ctx.getImageData(x, y, 1, 1).data.slice(0, 3),
|
var rgbPixel = ctx.getImageData(x, y, 1, 1).data.slice(0, 3),
|
||||||
colorKey = rgbPixel.join("-");
|
colorKey = rgbPixel.join("-");
|
||||||
if (!FONT.constants.LOGO.MCM_COLORMAP[colorKey]) {
|
if (!FONT.constants.LOGO.MCM_COLORMAP[colorKey]) {
|
||||||
reject(i18n.getMessage("osdSetupReplaceLogoImageColorsError"));
|
reject(i18n.getMessage("osdSetupReplaceLogoImageColorsError"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
chrome.fileSystem.chooseEntry({type: 'openFile', accepts: [{extensions: ['png', 'bmp']}]}, function(fileEntry) {
|
chrome.fileSystem.chooseEntry({ type: 'openFile', accepts: [{ extensions: ['png', 'bmp'] }] }, function(fileEntry) {
|
||||||
if (chrome.runtime.lastError) {
|
if (chrome.runtime.lastError) {
|
||||||
console.error(chrome.runtime.lastError.message);
|
console.error(chrome.runtime.lastError.message);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.onload = function() {
|
img.onload = function() {
|
||||||
validateImage(img).then(function() {
|
validateImage(img).then(function() {
|
||||||
resolve(img);
|
resolve(img);
|
||||||
}).catch(function(error) {
|
}).catch(function(error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
reject(error);
|
reject(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
img.onerror = function(error) {
|
||||||
|
reject(error);
|
||||||
|
};
|
||||||
|
fileEntry.file(function(file) {
|
||||||
|
img.src = "file://" + file.path;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
|
||||||
img.onerror = function(error) {
|
|
||||||
reject(error);
|
|
||||||
};
|
|
||||||
fileEntry.file(function(file) {
|
|
||||||
img.src = "file://" + file.path;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// replaces the logo in the font based on an Image object
|
// replaces the logo in the font based on an Image object
|
||||||
FONT.replaceLogoFromImage = function(img) {
|
FONT.replaceLogoFromImage = function(img) {
|
||||||
// takes image data from an ImageData object and returns an MCM symbol as an array of strings
|
// takes image data from an ImageData object and returns an MCM symbol as an array of strings
|
||||||
var imageToCharacter = function(data) {
|
var imageToCharacter = function(data) {
|
||||||
var char = [],
|
var char = [],
|
||||||
line = "";
|
line = "";
|
||||||
for (var i = 0, I = data.length; i < I; i += 4) {
|
for (var i = 0, I = data.length; i < I; i += 4) {
|
||||||
var rgbPixel = data.slice(i, i + 3),
|
var rgbPixel = data.slice(i, i + 3),
|
||||||
colorKey = rgbPixel.join("-");
|
colorKey = rgbPixel.join("-");
|
||||||
line += FONT.constants.LOGO.MCM_COLORMAP[colorKey]
|
line += FONT.constants.LOGO.MCM_COLORMAP[colorKey]
|
||||||
|| FONT.constants.LOGO.MCM_COLORMAP['default'];
|
|| FONT.constants.LOGO.MCM_COLORMAP['default'];
|
||||||
if (line.length == 8) {
|
if (line.length == 8) {
|
||||||
char.push(line);
|
char.push(line);
|
||||||
line = "";
|
line = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var fieldSize = FONT.constants.SIZES.MAX_NVM_FONT_CHAR_FIELD_SIZE;
|
var fieldSize = FONT.constants.SIZES.MAX_NVM_FONT_CHAR_FIELD_SIZE;
|
||||||
if (char.length < fieldSize) {
|
if (char.length < fieldSize) {
|
||||||
var pad = FONT.constants.LOGO.MCM_COLORMAP['default'].repeat(4);
|
var pad = FONT.constants.LOGO.MCM_COLORMAP['default'].repeat(4);
|
||||||
for (var i = 0, I = fieldSize - char.length; i < I; i++)
|
for (var i = 0, I = fieldSize - char.length; i < I; i++)
|
||||||
char.push(pad);
|
char.push(pad);
|
||||||
}
|
}
|
||||||
return char;
|
return char;
|
||||||
};
|
};
|
||||||
|
|
||||||
// takes an OSD symbol as an array of strings and replaces the in-memory character at charAddress with it
|
// takes an OSD symbol as an array of strings and replaces the in-memory character at charAddress with it
|
||||||
var replaceChar = function(lines, charAddress) {
|
var replaceChar = function(lines, charAddress) {
|
||||||
var characterBits = [];
|
var characterBits = [];
|
||||||
var characterBytes = [];
|
var characterBytes = [];
|
||||||
for (var n = 0, N = lines.length; n < N; n++) {
|
for (var n = 0, N = lines.length; n < N; n++) {
|
||||||
var line = lines[n];
|
var line = lines[n];
|
||||||
for (var y = 0; y < 8; y = y + 2) {
|
for (var y = 0; y < 8; y = y + 2) {
|
||||||
var v = parseInt(line.slice(y, y+2), 2);
|
var v = parseInt(line.slice(y, y + 2), 2);
|
||||||
characterBits.push(v);
|
characterBits.push(v);
|
||||||
}
|
}
|
||||||
characterBytes.push(parseInt(line, 2));
|
characterBytes.push(parseInt(line, 2));
|
||||||
}
|
}
|
||||||
FONT.data.characters[charAddress] = characterBits;
|
FONT.data.characters[charAddress] = characterBits;
|
||||||
FONT.data.characters_bytes[charAddress] = characterBytes;
|
FONT.data.characters_bytes[charAddress] = characterBytes;
|
||||||
FONT.data.character_image_urls[charAddress] = null;
|
FONT.data.character_image_urls[charAddress] = null;
|
||||||
FONT.draw(charAddress);
|
FONT.draw(charAddress);
|
||||||
};
|
};
|
||||||
|
|
||||||
// loop through an image and replace font symbols
|
// loop through an image and replace font symbols
|
||||||
var canvas = document.createElement('canvas'),
|
var canvas = document.createElement('canvas'),
|
||||||
ctx = canvas.getContext('2d'),
|
ctx = canvas.getContext('2d'),
|
||||||
charAddr = SYM.LOGO;
|
charAddr = SYM.LOGO;
|
||||||
canvas.width = img.width;
|
canvas.width = img.width;
|
||||||
canvas.height = img.height;
|
canvas.height = img.height;
|
||||||
ctx.drawImage(img, 0, 0);
|
ctx.drawImage(img, 0, 0);
|
||||||
for (var y = 0; y < FONT.constants.LOGO.TILES_NUM_VERT; y++) {
|
for (var y = 0; y < FONT.constants.LOGO.TILES_NUM_VERT; y++) {
|
||||||
for (var x = 0; x < FONT.constants.LOGO.TILES_NUM_HORIZ; x++) {
|
for (var x = 0; x < FONT.constants.LOGO.TILES_NUM_HORIZ; x++) {
|
||||||
var imageData = ctx.getImageData(
|
var imageData = ctx.getImageData(
|
||||||
x * FONT.constants.SIZES.CHAR_WIDTH,
|
x * FONT.constants.SIZES.CHAR_WIDTH,
|
||||||
y * FONT.constants.SIZES.CHAR_HEIGHT,
|
y * FONT.constants.SIZES.CHAR_HEIGHT,
|
||||||
FONT.constants.SIZES.CHAR_WIDTH,
|
FONT.constants.SIZES.CHAR_WIDTH,
|
||||||
FONT.constants.SIZES.CHAR_HEIGHT
|
FONT.constants.SIZES.CHAR_HEIGHT
|
||||||
),
|
),
|
||||||
newChar = imageToCharacter(imageData.data);
|
newChar = imageToCharacter(imageData.data);
|
||||||
replaceChar(newChar, charAddr);
|
replaceChar(newChar, charAddr);
|
||||||
charAddr++;
|
charAddr++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -347,13 +347,13 @@ FONT.preview = function($el) {
|
||||||
};
|
};
|
||||||
|
|
||||||
FONT.logoPreview = function($el) {
|
FONT.logoPreview = function($el) {
|
||||||
$el.empty()
|
$el.empty()
|
||||||
.width(FONT.constants.LOGO.TILES_NUM_HORIZ * FONT.constants.SIZES.CHAR_WIDTH)
|
.width(FONT.constants.LOGO.TILES_NUM_HORIZ * FONT.constants.SIZES.CHAR_WIDTH)
|
||||||
.height(FONT.constants.LOGO.TILES_NUM_VERT * FONT.constants.SIZES.CHAR_HEIGHT);
|
.height(FONT.constants.LOGO.TILES_NUM_VERT * FONT.constants.SIZES.CHAR_HEIGHT);
|
||||||
for (var i = SYM.LOGO, I = FONT.constants.MAX_CHAR_COUNT; i < I; i++) {
|
for (var i = SYM.LOGO, I = FONT.constants.MAX_CHAR_COUNT; i < I; i++) {
|
||||||
var url = FONT.data.character_image_urls[i];
|
var url = FONT.data.character_image_urls[i];
|
||||||
$el.append('<img src="'+url+'" title="0x'+i.toString(16)+'"></img>');
|
$el.append('<img src="' + url + '" title="0x' + i.toString(16) + '"></img>');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
FONT.symbol = function(hexVal) {
|
FONT.symbol = function(hexVal) {
|
||||||
|
|
@ -1878,16 +1878,17 @@ TABS.osd.initialize = function (callback) {
|
||||||
});
|
});
|
||||||
|
|
||||||
// replace logo
|
// replace logo
|
||||||
$('a.replace_logo').click(function () {
|
$('a.replace_logo').click(function() {
|
||||||
if (!GUI.connect_lock) { // button disabled while flashing is in progress
|
if (GUI.connect_lock) { // button disabled while flashing is in progress
|
||||||
openLogoImage().then(function(ctx) {
|
return;
|
||||||
|
}
|
||||||
|
openLogoImage().then(function(ctx) {
|
||||||
FONT.replaceLogoFromImage(ctx);
|
FONT.replaceLogoFromImage(ctx);
|
||||||
FONT.logoPreview($logoPreview);
|
FONT.logoPreview($logoPreview);
|
||||||
}).catch(function(error) {
|
}).catch(function(error) {
|
||||||
console.error("error loading image:", error);
|
console.error("error loading image:", error);
|
||||||
GUI.log(error);
|
GUI.log(error);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//Switch all elements
|
//Switch all elements
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue