Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Compact data option to bitmap converter #549

Merged
merged 10 commits into from
Jul 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/jekyll-pub.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ jobs:
- name: Setup Ruby
uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
with:
ruby-version: '3.1' # Not needed with a .ruby-version file
ruby-version: '2.7' # Not needed with a .ruby-version file
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
cache-version: 0 # Increment this number if you need to re-download cached gems
- name: Setup Pages
Expand Down
1 change: 1 addition & 0 deletions _sass/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1082,6 +1082,7 @@ div.container.detail {
font-weight: bold;
}
div#cpp-container,
#boot-sub { display: none; }
#stat-sub { display: none; }
}

Expand Down
108 changes: 54 additions & 54 deletions _tools/rgb565/converter.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
* : @shitcreek
*/

var bitmap_converter = function() {
var bitmap_converter = () => {

// Extend jQuery.event.fix for copy/paste to fix clipboardData
$.event.fix = (function(originalFix) {
$.event.fix = ((originalFix) => {
return function(e) {
e = originalFix.apply(this, arguments);
if (e.type.indexOf('copy') === 0 || e.type.indexOf('paste') === 0) {
Expand All @@ -56,28 +56,26 @@ var bitmap_converter = function() {
$output = $('#output'),
$pasted = $('#pasted'),
$field_arr = $('#rle16-on'),
tobytes = function(n) {
return Math.ceil(n / 8);
},
tohex = function(b) {
tobytes = (n) => { return Math.ceil(n / 8); },
tohex = (b) => {
return '0x' + ('0000' + (b & 0xFFFF).toString(16)).toUpperCase().slice(-4);
},
data_source,

error_message = function(msg) {
error_message = (msg) => {
$err.text(msg).show();
console.log(msg);
},

restore_pasted_cpp_field = function() {
restore_pasted_cpp_field = () => {
$pasted.val(paste_message).css('color', '');
},

/**
* Set the image src to some new data.
* On $img.load it will call generate_cpp.
*/
load_url_into_image = function(data_url, w, h) {
load_url_into_image = (data_url, w, h) => {
$img = $('<img/>');

if (w) $img.width(w);
Expand All @@ -86,7 +84,7 @@ var bitmap_converter = function() {
$img.one('load', generate_cpp) // Generate when the image loads
.attr('src', data_url); // Start loading image data

$field_arr.change(function(e) {
$field_arr.change((e) => {
generate_cpp(e, true);
});
},
Expand All @@ -98,9 +96,9 @@ var bitmap_converter = function() {
* - File input field, passing the first selected file.
* - Image pasted directly into a textfield.
*/
load_file_into_image = function(fileref) {
load_file_into_image = (fileref) => {
var reader = new FileReader();
$(reader).one('load', function() {
$(reader).one('load', () => {
load_url_into_image(this.result);
});
// Load from the given source 'file'
Expand All @@ -110,7 +108,7 @@ var bitmap_converter = function() {
/**
* Draw the given image into one or both canvases.
*/
render_image_into_canvases = function($i, notlarge) {
render_image_into_canvases = ($i, notlarge) => {
var img = $i[0],
iw = img.width,
ih = img.height;
Expand Down Expand Up @@ -138,7 +136,7 @@ var bitmap_converter = function() {
* - Otherwise it repeats the following word N + 1 times.
* - Each RGB565 word is stored in MSB / LSB order.
*/
rle_encode = function(data) {
rle_encode = (data) => {
var distinct, i, nr, rledata, rsize, v;
rledata = [];
distinct = [];
Expand Down Expand Up @@ -176,7 +174,7 @@ var bitmap_converter = function() {
return rledata;
},

rle_decode = function(rle_data) {
rle_decode = (rle_data) => {
var decoded = [];
var color = 0;
var done = false;
Expand All @@ -203,7 +201,7 @@ var bitmap_converter = function() {
return decoded;
},

splitRGB = function(raw565_data) {
splitRGB = (raw565_data) => {

var arrayLength = raw565_data.length;
var bitmap = [];
Expand All @@ -228,7 +226,7 @@ var bitmap_converter = function() {
* - Convert the image data into C text.
* - Display the image and converted text.
*/
generate_cpp = function(e, no_render) {
generate_cpp = (e, no_render) => {

// Get the image width and height in pixels.
var iw = $img[0].width,
Expand Down Expand Up @@ -343,7 +341,8 @@ var bitmap_converter = function() {
size += 2;
}
i += count;
} else {
}
else {
outstr = append_byte(outstr, rval);
outstr = append_byte(outstr, rledata[i] >> 8);
outstr = append_byte(outstr, rledata[i] & 255);
Expand Down Expand Up @@ -374,7 +373,7 @@ var bitmap_converter = function() {
/**
* Get ready to evaluate incoming data
*/
prepare_for_new_image = function() {
prepare_for_new_image = () => {
$err.hide();

/**
Expand All @@ -393,7 +392,7 @@ var bitmap_converter = function() {
* Finds the correct line-length before scanning for data.
* Does well screening out most extraneous text.
*/
process_pasted_cpp = function(cpp) {
process_pasted_cpp = (cpp) => {

prepare_for_new_image();
restore_pasted_cpp_field();
Expand All @@ -403,9 +402,9 @@ var bitmap_converter = function() {
mostlens = [],
contains_rle16 = false,
pasted_tablename;
$.each(cpp.split('\n'), function(i, s) {
$.each(cpp.split('\n'), (i, s) => {
var pw = 0;
$.each(s.replace(/[ \t]/g, '').split(','), function(i, s) {
$.each(s.replace(/[ \t]/g, '').split(','), (i, s) => {
if (s.match("_rle16")) {
contains_rle16 = true;
pasted_tablename = s.slice(s.search("uint8_t") + 7, s.search("\\["));
Expand All @@ -417,13 +416,12 @@ var bitmap_converter = function() {
mostlens[pw] = 0;
});

var wide = 0,
high = 0;
var wide = 0, high = 0;

// Find the length with the most instances
var most_so_far = 0;
mostlens.fill(0);
$.each(lens, function(i, v) {
$.each(lens, (i, v) => {
if (++mostlens[v] > most_so_far) {
most_so_far = mostlens[v];
wide = v;
Expand All @@ -434,31 +432,31 @@ var bitmap_converter = function() {

// Split up lines and iterate
var bitmap = [],
rledata = [],
bitstr = '';
$.each(cpp.split('\n'), function(i, s) {
rledata = [],
bitstr = '';
$.each(cpp.split('\n'), (i, s) => {
s = s.replace(/[ \t]/g, '');
// Split up bytes and iterate
var wordline = [],
len = 0;
$.each(s.split(','), function(i, s) {
len = 0;
$.each(s.split(','), (i, s) => {
//console.log("s value:",s);
var b;
if (s.match(/\b0x[0-9a-f]+/i)) { // Hex
b = parseInt(s.substring(2), 16);
if (contains_rle16) rledata.push(b);
} else if (s.match(/[0-9]+/)) // Decimal
}
else if (s.match(/[0-9]+/)) // Decimal
b = s * 1;
else
return true; // Skip this item

if (!contains_rle16) {
var r_data = (b & 0xF800) >> 6 + 5 - 3;
var g_data = (b & 0x07E0) >> 5 - 2;
var b_data = (b & 0x001F) << 3;

var r_data = (b & 0xF800) >> 6 + 5 - 3,
g_data = (b & 0x07E0) >> 5 - 2,
b_data = (b & 0x001F) << 3;
Array.prototype.push.apply(wordline, [r_data, g_data, b_data, 0xFF]);
len += 1;
len++;
}
});
if (len == wide && !contains_rle16) {
Expand All @@ -468,9 +466,9 @@ var bitmap_converter = function() {
});

if (contains_rle16) {
var sizeEnd = pasted_tablename.lastIndexOf('x');
var sizeMid = pasted_tablename.lastIndexOf('x', pasted_tablename.lastIndexOf('x') - 1);
var sizeStart = pasted_tablename.lastIndexOf('_', pasted_tablename.lastIndexOf('_') - 1);
var sizeEnd = pasted_tablename.lastIndexOf('x'),
sizeMid = pasted_tablename.lastIndexOf('x', pasted_tablename.lastIndexOf('x') - 1),
sizeStart = pasted_tablename.lastIndexOf('_', pasted_tablename.lastIndexOf('_') - 1);

wide = parseInt(pasted_tablename.substring(sizeStart + 1, sizeMid));
high = parseInt(pasted_tablename.substring(sizeMid + 1, sizeEnd));
Expand All @@ -497,7 +495,7 @@ var bitmap_converter = function() {
* Prep the form for a pasted image.
* Call to load and process the image data.
*/
process_pasted_image = function(fileref) {
process_pasted_image = (fileref) => {
$filein.val('');

prepare_for_new_image();
Expand All @@ -512,14 +510,14 @@ var bitmap_converter = function() {
* For image data call process_pasted_image to process it.
* Call process_pasted_cpp to parse the code into an image.
*/
convert_clipboard_to_image = function(e) {
convert_clipboard_to_image = (e) => {
var clipboardData = e.clipboardData || window.clipboardData,
items = clipboardData.items,
found, data;
items = clipboardData.items,
found, data;

// If the browser supports "items" then use it
if (items) {
$.each(items, function() {
$.each(items, () => {
switch (this.kind) {
case 'string':
found = 'text';
Expand All @@ -530,9 +528,10 @@ var bitmap_converter = function() {
return false;
}
});
} else {
}
else {
// Try the 'types' array for Safari / Webkit
$.each(clipboardData.types, function(i, type) {
$.each(clipboardData.types, (i, type) => {
switch (type) {
case 'text/plain':
found = type;
Expand Down Expand Up @@ -569,15 +568,16 @@ var bitmap_converter = function() {
* If the file input value changes try to read the data from the file.
* The reader.load() handler will fire on successful load.
*/
$filein.change(function() {
$filein.change(() => {

prepare_for_new_image();

var fileref = $filein[0].files[0];
if (fileref) {
data_source = "the file '" + fileref.name + "'";
load_file_into_image(fileref);
} else
}
else
error_message("Error opening file.");

//return false; // No default handler
Expand All @@ -591,34 +591,34 @@ var bitmap_converter = function() {

// If the output is clicked, select all
$output
.on('mousedown mouseup', function() {
.on('mousedown mouseup', () => {
return false;
})
.on('focus click', function(e) {
.on('focus click', (e) => {
this.select();
return false;
});

// Paste old C++ code to see the image and reformat
$pasted
.focus(function() {
.focus(() => {
var $this = $(this);
$this
.val('')
.css('color', '#F80')
.one('blur', restore_pasted_cpp_field)
.one('paste', function(e) {
.one('paste', (e) => {
$this.css('color', '#FFFFFF00');
convert_clipboard_to_image(e);
$this.trigger('blur');
return false;
});
})
.keyup(function() {
.keyup(() => {
$(this).val('');
return false;
})
.keydown(function() {
.keydown(() => {
$(this).val('');
});
};
Expand Down
11 changes: 6 additions & 5 deletions _tools/u8glib/converter.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,16 @@ <h1>Bitmap Converter</h1>
<label title="Marlin 1.x">&nbsp;<input type="radio" name="marlin-ver" value="1" />&nbsp;Marlin 1.x</label>
<label title="Marlin 2.x">&nbsp;<input type="radio" name="marlin-ver" value="2" checked="checked" />&nbsp;Marlin 2.x</label>
<br/>
<label title="Generic bitmap.">&nbsp;&nbsp;<input type="radio" name="bitmap-type" value="bits" checked="checked" />&nbsp;Bitmap</label>
<label title="Format for _Bootscreen.h">&nbsp;<input type="radio" name="bitmap-type" value="boot" />&nbsp;Boot</label>
<label id="boot-sub" title="Include compact data.">&nbsp;&nbsp;<input type="checkbox" id="compact-on" />&nbsp;Compact</label>
<label title="Format for _Statusscreen.h">&nbsp;<input type="radio" name="bitmap-type" value="stat" />&nbsp;Status</label>
<br/>
<label id="liton-lbl" title="Light pixels are solid.">&nbsp;&nbsp;<input type="checkbox" id="lit-on" />&nbsp;Light</label>
<label title="Invert the output bits.">&nbsp;&nbsp;<input type="checkbox" id="inv-on" />&nbsp;Invert</label>
<label title="Output in Binary (not Hex) format.">&nbsp;&nbsp;<input type="checkbox" id="bin-on" checked="checked" />&nbsp;Binary</label>
<label title="Include an ASCII representation.">&nbsp;&nbsp;<input type="checkbox" id="ascii-on" />&nbsp;ASCII Art</label>
<label title="Use UTF8 blocks instead of ASCII.">&nbsp;&nbsp;<input type="checkbox" id="skinny-on" />&nbsp;Narrow</label>
<br/>
<label title="Generic bitmap.">&nbsp;&nbsp;<input type="radio" name="bitmap-type" value="bits" checked="checked" />&nbsp;Bitmap</label>
<label title="Format for _Bootscreen.h">&nbsp;<input type="radio" name="bitmap-type" value="boot" />&nbsp;Boot</label>
<label title="Format for _Statusscreen.h">&nbsp;<input type="radio" name="bitmap-type" value="stat" />&nbsp;Status</label>
<label title="Use UTF8 blocks instead of ASCII.">&nbsp;&nbsp;<input type="checkbox" id="skinny-on" disabled />&nbsp;Narrow</label>
<span id="stat-sub">
:<label title="Right-justify the image.">&nbsp;&nbsp;<input type="checkbox" id="rj-on" />&nbsp;&gt;&gt;</label>
<label class="tbd" title="Overlay a bed image.">&nbsp;&nbsp;<input type="checkbox" id="bed-on" />&nbsp;Bed</label>
Expand Down
Loading
Loading