diff --git a/.github/workflows/jekyll-pub.yml b/.github/workflows/jekyll-pub.yml index 12f38e5db6..0d9ce09394 100644 --- a/.github/workflows/jekyll-pub.yml +++ b/.github/workflows/jekyll-pub.yml @@ -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 diff --git a/_sass/_custom.scss b/_sass/_custom.scss index 1e08a27d76..cbe0ceb688 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -1082,6 +1082,7 @@ div.container.detail { font-weight: bold; } div#cpp-container, + #boot-sub { display: none; } #stat-sub { display: none; } } diff --git a/_tools/rgb565/converter.js b/_tools/rgb565/converter.js index 34adfdf2d6..88196979f7 100644 --- a/_tools/rgb565/converter.js +++ b/_tools/rgb565/converter.js @@ -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) { @@ -56,20 +56,18 @@ 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', ''); }, @@ -77,7 +75,7 @@ var bitmap_converter = function() { * 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 = $(''); if (w) $img.width(w); @@ -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); }); }, @@ -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' @@ -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; @@ -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 = []; @@ -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; @@ -203,7 +201,7 @@ var bitmap_converter = function() { return decoded; }, - splitRGB = function(raw565_data) { + splitRGB = (raw565_data) => { var arrayLength = raw565_data.length; var bitmap = []; @@ -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, @@ -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); @@ -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(); /** @@ -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(); @@ -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("\\[")); @@ -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; @@ -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) { @@ -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)); @@ -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(); @@ -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'; @@ -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; @@ -569,7 +568,7 @@ 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(); @@ -577,7 +576,8 @@ var bitmap_converter = function() { 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 @@ -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(''); }); }; diff --git a/_tools/u8glib/converter.html b/_tools/u8glib/converter.html index 5f6c091a22..ae92495e3b 100644 --- a/_tools/u8glib/converter.html +++ b/_tools/u8glib/converter.html @@ -21,15 +21,16 @@

Bitmap Converter


+ + + + +
- -
- - - + : diff --git a/_tools/u8glib/converter.js b/_tools/u8glib/converter.js index 4034e7b2b7..4e03f52e58 100644 --- a/_tools/u8glib/converter.js +++ b/_tools/u8glib/converter.js @@ -22,6 +22,7 @@ * By : @jbrazio * @thinkyhead * @shitcreek + * @dust * Todo: * - Composite status image from logo, nozzle, bed, fan * - Slider for threshold (jQuery.ui) @@ -31,10 +32,10 @@ * */ -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) { @@ -71,26 +72,28 @@ var bitmap_converter = function() { $ascii = $('#ascii-on'), $skinny = $('#skinny-on'), $hotends = $('#hotends'), + $compact = $('#compact-on'), $rj = $('#rj-on'), $bed = $('#bed-on'), $fan = $('#fan-on'), $vers = $('input[name=marlin-ver]'), $type = $('input[name=bitmap-type]'), + $bootop = $('#boot-sub'), $statop = $('#stat-sub'), $pasted = $('#pasted'), - $field_arr = $('#bin-on, #ascii-on, #skinny-on, #hotends, #rj-on, #bed-on, #fan-on, input[name=marlin-ver], input[name=bitmap-type]'), - tobytes = function(n) { return Math.ceil(n / 8); }, - tohex = function(b) { return '0x' + ('0' + (b & 0xFF).toString(16)).toUpperCase().slice(-2); }, - tobin = function(b) { return 'B' + ('0000000' + (b & 0xFF).toString(2)).slice(-8); }, - random_name = function(prefix) { return (prefix||'') + Math.random().toString(36).substring(7); }, - grayscale = function(rgb) { return rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11; }, + $field_arr = $('#bin-on, #ascii-on, #skinny-on, #hotends, #compact-on, #rj-on, #bed-on, #fan-on, input[name=marlin-ver], input[name=bitmap-type]'), + tobytes = (n) => { return Math.ceil(n / 8); }, + tohex = (b) => { return '0x' + ('0' + (b & 0xFF).toString(16)).toUpperCase().slice(-2); }, + tobin = (b) => { return 'B' + ('0000000' + (b & 0xFF).toString(2)).slice(-8); }, + random_name = (prefix) => { return (prefix||'') + Math.random().toString(36).substring(7); }, + grayscale = (rgb) => { return rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11; }, rnd_name, 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', ''); }, @@ -98,7 +101,7 @@ var bitmap_converter = function() { * 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 = $(''); if (w) $img.width(w); @@ -107,7 +110,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){ generate_cpp(e, true); }); + $field_arr.change((e) => { generate_cpp(e, true); }); $lit.change(generate_cpp); $invert.change(generate_cpp); @@ -121,19 +124,87 @@ 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() { - load_url_into_image(this.result); - }); + $(reader).one('load', () => { load_url_into_image(this.result); }); // Load from the given source 'file' reader.readAsDataURL(fileref); }, + /** + * Bitwise RLE (run length) encoding + * Convert data from raw mono bitmap to a bitwise run-length-encoded format. + * - The first nybble is the starting bit state. Changing this nybble inverts the bitmap. + * - The following bytes provide the runs for alternating on/off bits. + * - A value of 0-14 encodes a run of 1-15. + * - A value of 16 indicates a run of 16-270 calculated using the next two bytes. + */ + bitwise_rle_encode = (data) => { + function get_bit(data, n) { + return (data[Math.floor(n / 8)] & (0x80 >> (n % 8))) ? 1 : 0; + } + + function try_encode(data, isext) { + const bitslen = data.length * 8; + let bitstate = get_bit(data, 0); + const rledata = [bitstate]; + const bigrun = isext ? 256 : 272; + let medrun = false; + + let i = 0; + let runlen = -1; + while (i <= bitslen) { + const b = i < bitslen ? get_bit(data, i) : null; + runlen += 1; + if (bitstate !== b || i === bitslen) { + if (runlen >= bigrun) { + isext = true; + if (medrun) return [ + [], isext + ]; + const rem = runlen & 0xFF; + rledata.push(15, 15, Math.floor(rem / 16), rem % 16); + } else if (runlen >= 16) { + rledata.push(15, Math.floor(runlen / 16) - 1, runlen % 16); + if (runlen >= 256) medrun = true; + } else { + rledata.push(runlen - 1); + } + bitstate ^= 1; + runlen = 0; + } + i += 1; + } + + const encoded = []; + let ri = 0; + const rlen = rledata.length; + while (ri < rlen) { + let v = rledata[ri] << 4; + if (ri < rlen - 1) v |= rledata[ri + 1]; + encoded.push(v); + ri += 2; + } + + return [encoded, isext]; + } + + // Try to encode with the original isext flag + //const warn = data.length > 300000 ? "This may take a while" : ""; + //console.log("Compressing image data...", warn); + let isext = false; + let encoded = []; + [encoded, isext] = try_encode(data, isext); + if (encoded.length === 0) { + [encoded, isext] = try_encode(data, true); + } + return [encoded, isext]; + }, + /** * Draw the given image into one or both canvases. */ - render_image_into_canvases = function($i, notsmall, notlarge) { + render_image_into_canvases = ($i, notsmall, notlarge) => { var img = $i[0], iw = img.width, ih = img.height; // The small image needs no update if not changing @@ -167,7 +238,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, ih = $img[0].height; @@ -196,6 +267,8 @@ var bitmap_converter = function() { is_asc = $ascii[0].checked, // Include ASCII version of the bitmap? is_thin = $skinny[0].checked, // A skinny ASCII output with blocks. + is_compact = $compact[0].checked && vers == 2 && type == 'boot', // Display compact data for marlin 2.0 only with bootscreen + is_stat = type == 'stat', // "Status" has extra options is_lpad = is_stat && !$rj[0].checked, // Right justify? @@ -275,7 +348,7 @@ var bitmap_converter = function() { // Render the modified Preview Image tctx.putImageData(tref, 0, 0); var $vimg = $('').width(iw).height(ih) - .one('load', function(){ render_image_into_canvases($(this), true, false); }) + .one('load', () => { render_image_into_canvases($(this), true, false); }) .attr('src', $tcnv[0].toDataURL('image/png')); } @@ -311,6 +384,8 @@ var bitmap_converter = function() { cpp += '\nconst unsigned char ' + name + '[] PROGMEM = {\n'; + const bitmap_data = []; // keep a copy of the bitmapdata + /** * Print the data as hex or binary, * appending ASCII art if selected. @@ -333,6 +408,7 @@ var bitmap_converter = function() { xx++; } // Append the byte and optional comma or space + bitmap_data.push(byte); // populate the bitmap data cpp += tobase(byte) + (y != ih - 1 || x < lastx ? ',' : is_asc ? ' ' : ''); } @@ -342,6 +418,29 @@ var bitmap_converter = function() { cpp += '};\n'; + if (is_compact) { + const [rledata, isext] = bitwise_rle_encode(bitmap_data); + + function rle_emit(rledata, rawsize, isext) { + let outstr = ''; + const rows = rledata.reduce((acc, val, i) => { + if (i % 16 === 0) acc.push([]); + acc[acc.length - 1].push(`0x${val.toString(16).padStart(2, '0').toUpperCase()}`); + return acc; + }, []); + for (let i = 0; i < rows.length; i++) { + outstr += ` ${rows[i].join(', ')},\n`; + } + + outstr = outstr.slice(0, -2); + const size = rledata.length; + const defname = isext ? 'COMPACT_CUSTOM_BOOTSCREEN_EXT' : 'COMPACT_CUSTOM_BOOTSCREEN'; + return `\n// Saves ${rawsize - size} bytes\n#define ${defname}\nconst unsigned char custom_start_bmp_rle[${size}] PROGMEM = {\n${outstr}\n};\n`; + } + + cpp += rle_emit(rledata, bitmap_data.length, isext); + } + /* if (is_stat) if ($fan[0].checked) @@ -373,9 +472,17 @@ var bitmap_converter = function() { /** * Get ready to evaluate incoming data */ - prepare_for_new_image = function() { + prepare_for_new_image = () => { $err.hide(); + function bootop_update() { + const v = $vers.filter(':checked').val(); + if ($vers.filter(':checked').val() == '2' && $type.filter(':checked').val() == 'boot') + $bootop.show(); + else + $bootop.hide(); + } + /** * Kill most form actions until an image exists. * @@ -387,12 +494,17 @@ var bitmap_converter = function() { $lit.off(); $invert.off(); $field_arr.off(); + bootop_update(); // Restore cosmetic 'ASCII Art' behavior - $ascii.change(function(){ $skinny.prop('disabled', !this.checked); return false; }); + $ascii.change((e) => { $skinny.prop('disabled', !$(e.target).is(':checked')); return false; }); + + // Remove 'Compact' option for Marlin 1.x + $vers.change(bootop_update); // Restore cosmetic 'Status' behavior - $type.change(function() { + $type.change(() => { + bootop_update(); if ($(this).val() == 'stat') $statop.show(); else $statop.hide(); }); }, @@ -403,16 +515,16 @@ 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(); // Get the split up bytes on all lines var lens = [], mostlens = []; - $.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(/0x[0-9a-f]+/i) || s.match(/0b[01]+/) || s.match(/B[01]+/) || s.match(/[0-9]+/)) ++pw; }); @@ -425,7 +537,7 @@ var bitmap_converter = function() { // 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 * 8; @@ -436,11 +548,11 @@ var bitmap_converter = function() { // Split up lines and iterate var bitmap = [], bitstr = ''; - $.each(cpp.split('\n'), function(i,s) { + $.each(cpp.split('\n'), (i,s) => { s = s.replace(/[ \t]/g,''); // Split up bytes and iterate var byteline = [], len = 0; - $.each(s.split(','), function(i,s) { + $.each(s.split(','), (i,s) => { var b; if (s.match(/0x[0-9a-f]+/i)) // Hex b = parseInt(s.substring(2), 16); @@ -484,7 +596,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) => { $invert.prop('checked', 0); $filein.val(''); @@ -503,14 +615,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; // If the browser supports "items" then use it if (items) { - $.each(items, function(){ + $.each(items, () => { switch (this.kind) { case 'string': found = 'text'; @@ -524,7 +636,7 @@ var bitmap_converter = function() { } 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; @@ -564,7 +676,7 @@ 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(); @@ -588,26 +700,26 @@ var bitmap_converter = function() { // If the output is clicked, select all $output - .on('mousedown mouseup', function(){ return false; }) - .on('focus click', function(e){ this.select(); return false; }); + .on('mousedown mouseup', () => { return false; }) + .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(){ $(this).val(''); return false; }) - .keydown(function(){ $(this).val(''); }); + .keyup(() => { $(this).val(''); return false; }) + .keydown(() => { $(this).val(''); }); }; head.ready(bitmap_converter);