Added LSP github chat for posterity

src/Atom IDE/README.md

@@ -1,6 +1,15 @@
 # Atom-Plugins-and-Snippets
 My current packages 'n themes plus my personal Atom snippets for, HTML, CSS, JS, PHP, Shell Scripts, etc.
 
+### Auto completion setup
+For your python environment run:
+<br/>
+<code>
+python -m pip install jedi 'python-language-server[all]'
+</code>
+
+For Atom, install this package: https://atom.io/packages/autocomplete-python
+
 ### To Find Or Install The Snippets
 Look in "${HOME}"/.atom/snippets.cson
 

src/Configs/MPV/mpv.conf

@@ -0,0 +1,203 @@
+# vim: syntax=config
+
+
+###########
+# General #
+###########
+
+input-ipc-server=/tmp/mpvsocket         # listen for IPC on this socket
+#load-stats-overlay=no                   # use local stats.lua
+#save-position-on-quit                  # handled by a script
+
+no-border                               # no window title bar
+msg-module                              # prepend module name to log messages
+msg-color                               # color log messages on terminal
+term-osd-bar                            # display a progress bar on the terminal
+use-filedir-conf                        # look for additional config files in the directory of the opened file
+#pause                                   # no autoplay
+keep-open                               # keep the player open when a file's end is reached
+autofit-larger=100%x95%                 # resize window in case it's larger than W%xH% of the screen
+cursor-autohide-fs-only                 # don't autohide the cursor in window mode, only fullscreen
+input-media-keys=no                     # enable/disable OSX media keys
+cursor-autohide=1000                    # autohide the curser after 1s
+prefetch-playlist=yes
+force-seekable=yes
+
+screenshot-format=png
+screenshot-png-compression=8
+screenshot-template='~/Desktop/%F (%P) %n'
+
+hls-bitrate=max                         # use max quality for HLS streams
+
+[ytdl-desktop]
+profile-desc=cond:is_desktop()
+ytdl-format=bestvideo[height<=?1080]+bestaudio/best
+
+[ytdl-laptop]
+profile-desc=cond:is_laptop()
+ytdl-format=bestvideo[height<=?1080][fps<=?30][vcodec!=?vp9][protocol!=http_dash_segments]+bestaudio/best
+
+[default]
+
+
+#########c
+# Cache #
+#########
+
+# Configure the cache to be really big (multiple GBs)
+# We have a lot of memory, so why not use it for something
+
+cache=yes
+cache-default=4000000                   # size in KB
+cache-backbuffer=250000                 # size in KB
+demuxer-max-bytes=1147483647            # ~1 GiB in bytes
+
+
+#############
+# OSD / OSC #
+#############
+
+osd-level=1                             # enable osd and display --osd-status-msg on interaction
+osd-duration=2500                       # hide the osd after x ms
+osd-status-msg='${time-pos} / ${duration}${?percent-pos:　(${percent-pos}%)}${?frame-drop-count:${!frame-drop-count==0:　Dropped: ${frame-drop-count}}}\n${?chapter:Chapter: ${chapter}}'
+
+osd-font='Source Sans Pro'
+osd-font-size=32
+osd-color='#CCFFFFFF'                   # ARGB format
+osd-border-color='#DD322640'            # ARGB format
+#osd-shadow-offset=1                    # pixel width for osd text and progress bar
+osd-bar-align-y=0                       # progress bar y alignment (-1 top, 0 centered, 1 bottom)
+osd-border-size=2                       # size for osd text and progress bar
+osd-bar-h=2                             # height of osd bar as a fractional percentage of your screen height
+osd-bar-w=60                            # width of " " "
+
+
+#############
+# Subtitles #
+#############
+
+sub-auto=fuzzy                          # external subs don't have to match the file name exactly to autoload
+sub-file-paths-append=ass               # search for external subs in these relative subdirectories
+sub-file-paths-append=srt
+sub-file-paths-append=sub
+sub-file-paths-append=subs
+sub-file-paths-append=subtitles
+
+demuxer-mkv-subtitle-preroll            # try to correctly show embedded subs when seeking
+embeddedfonts=yes                       # use embedded fonts for SSA/ASS subs
+sub-fix-timing=no                       # do not try to fix gaps (which might make it worse in some cases)
+sub-ass-force-style=Kerning=yes         # allows you to override style parameters of ASS scripts
+sub-use-margins
+sub-ass-force-margins
+
+# the following options only apply to subtitles without own styling (i.e. not ASS but e.g. SRT)
+sub-font="Source Sans Pro Semibold"
+sub-font-size=36
+sub-color="#FFFFFFFF"
+sub-border-color="#FF262626"
+sub-border-size=3.2
+sub-shadow-offset=1
+sub-shadow-color="#33000000"
+sub-spacing=0.5
+
+
+#############
+# Languages #
+#############
+
+slang=enm,en,eng,de,deu,ger             # automatically select these subtitles (decreasing priority)
+alang=ja,jp,jpn,en,eng,de,deu,ger       # automatically select these audio tracks (decreasing priority)
+
+
+#########
+# Audio #
+#########
+
+audio-file-auto=fuzzy                   # external audio doesn't has to match the file name exactly to autoload
+audio-pitch-correction=yes              # automatically insert scaletempo when playing with higher speed
+volume-max=200                          # maximum volume in %, everything above 100 results in amplification
+volume=45                              # default volume, 100 = unchanged
+
+
+################
+# Video Output #
+################
+
+# Active VOs (and some other options) are set conditionally
+# See here for more information: https://github.com/wm4/mpv-scripts/blob/master/auto-profiles.lua
+# on_battery(), is_laptop() and is_dektop() are my own additional functions imported from scripts/auto-profiles-functions.lua
+
+# Defaults for all profiles
+#vo=gpu
+#gpu-api=opengl
+tscale=oversample                      # [sharp] oversample <-> linear (triangle) <-> catmull_rom <-> mitchell <-> gaussian <-> bicubic [smooth]
+opengl-early-flush=no
+opengl-pbo=no                          # "yes" is currently bugged: https://github.com/mpv-player/mpv/issues/4988
+icc-profile-auto
+
+
+[high-quality]
+profile-desc=cond:is_high(get('width', math.huge), get('height', math.huge), get('estimated-vf-fps', math.huge))
+# hanning with this radius is broken on OSX due to OpenGL driver bug
+#scale=ewa_hanning
+#scale-radius=3.2383154841662362
+scale=ewa_lanczossharp
+cscale=ewa_lanczossoft
+dscale=mitchell
+scale-antiring=0
+cscale-antiring=0
+dither-depth=auto
+correct-downscaling=yes
+sigmoid-upscaling=yes
+deband=yes
+hwdec=no
+
+[mid-quality]
+profile-desc=cond:is_mid(get('width', math.huge), get('height', math.huge), get('estimated-vf-fps', math.huge))
+scale=spline36
+cscale=spline36
+dscale=mitchell
+scale-antiring=1.0
+cscale-antiring=1.0
+dither-depth=auto
+correct-downscaling=yes
+sigmoid-upscaling=yes
+deband=yes
+hwdec=no
+
+[low-quality]
+profile-desc=cond:is_low(get('width', math.huge), get('height', math.huge), get('estimated-vf-fps', math.huge))
+scale=bilinear
+cscale=bilinear
+dscale=bilinear
+scale-antiring=0
+cscale-antiring=0
+dither-depth=no
+correct-downscaling=no
+sigmoid-upscaling=no
+deband=no
+hwdec=no
+
+[4K]
+profile-desc=cond:get('width', -math.huge) >= 3840
+vd-lavc-threads=32
+
+[4K-inverted]
+profile-desc=cond:get('width', math.huge) < 3840
+vd-lavc-threads=0
+
+[default]
+
+
+###################################
+# Protocol Specific Configuration #
+###################################
+
+
+[protocol.https]
+cache=yes
+user-agent='Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:57.0) Gecko/20100101 Firefox/58.0'
+
+[protocol.http]
+cache=yes
+user-agent='Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:57.0) Gecko/20100101 Firefox/58.0'

src/Fixes/IFYOO Controller/Fix GamepadJoystick on Linux ifyoo.sh

@@ -0,0 +1,38 @@
+#fix gamepad/joystick
+#ifyoo - /dev/input/by-id/usb-SHANWAN_Controller-event-joystick
+
+#install needed python libs
+# sudo apt install python3-usb
+# OR
+# python -m pip install pyusb==1.2.1
+
+#get fix script
+#https://gist.github.com/dnmodder/de2df973323b7c6acf45f40dc66e8db3
+wget "https://gist.githubusercontent.com/dnmodder/de2df973323b7c6acf45f40dc66e8db3/raw/693b848098dfc5f0fd03bdcdd9162fde3f2fb482/fixcontroller.py"
+
+chmod +x fixcontroller.py
+
+#you will need to run this every time you plug the controller in
+sudo ./fixcontroller.py
+
+#test the controller
+sudo cat /dev/input/js0
+
+
+
+
+
+###############################3
+
+#!/usr/bin/env python3
+
+import usb.core
+
+dev = usb.core.find(idVendor=0x045e, idProduct=0x028e)
+
+if dev is None:
+    raise ValueError('Device not found')
+else:
+    dev.ctrl_transfer(0xc1, 0x01, 0x0100, 0x00, 0x14) 
+
+##############################3

src/Fixes/IFYOO Controller/fixcontroller.py

@@ -0,0 +1,11 @@
+#!/usr/bin/env python3
+
+import usb.core
+
+dev = usb.core.find(idVendor=0x045e, idProduct=0x028e)
+
+if dev is None:
+    raise ValueError('Device not found')
+else:
+    dev.ctrl_transfer(0xc1, 0x01, 0x0100, 0x00, 0x14) 
+

src/HTML + Javascript/HTML/slideshare-dl-script.js

@@ -0,0 +1,30 @@
+// Run in console of www.slideshare.net then bash download.sh
+
+download = (data, filename, type) => {
+    file = new Blob([data], {type: type});
+    if (window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(file, filename);
+    } else {
+        a          = document.createElement("a"),
+        url        = URL.createObjectURL(file);
+        a.href     = url;
+        a.download = filename;
+
+        document.body.appendChild(a);
+
+        a.click();
+        setTimeout(function() {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+        }, 0);
+    }
+}
+
+data = "";
+imgs = document.getElementsByClassName("SlideImage_picture__Xlef_");
+for (let i = 0; i < imgs.length; i++) {
+    data += "\nwget" + "'" + imgs[i].firstChild.srcset.split(",")[2].replace(" 2048w", "") + "'";
+}
+
+console.log(data);
+download(data, "download.sh", "text");

src/HTML + Javascript/Javascript/pixilate.html

@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <!-- <link rel="shortcut icon" href="fave_icon.png"> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+    <style media="screen">
+        body {
+            overflow: hidden;
+            background-color: rgba(44, 44, 44, 1.0);
+        }
+
+        h3 {
+            color: #FFFFFF64;
+        }
+
+        ul, li {
+            list-style: none;
+        }
+
+        #draw-area,
+        #draw-area-preview {
+            border-spacing: 0px;
+            aspect-ratio: 4/3;
+        }
+
+        #draw-area {
+            width: 100%;
+        }
+
+        #draw-area > tbody > tr > td {
+            border: 1px solid rgba(64, 64, 64, 1.0);
+            border-collapse: collapse;
+        }
+
+        #draw-area-preview {
+            border: 1px solid rgba(88, 88, 88, 1.0);
+        }
+
+        #palette-list {
+            height: 40vh;
+            overflow: auto;
+        }
+
+        .selected-color {
+            border: 2px solid rgb(0, 232, 255);
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container-fluid m-3">
+        <div class="row">
+            <div class="col">
+                <div class="row vh-50 mt-3">
+                    <div id="previewScrollDetector" class="col">
+                        <table id="draw-area-preview" class="mx-auto" style="height: 25vh;" ondragstart="return false;" ondrop="return false;">
+                            <tbody id="draw-area-preview-body"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col">
+                <div class="row">
+                    <div class="col text-center">
+                        <button id="h-mirror" type="button" class="btn btn-secondary">H-Mirror</button>
+                        <button id="v-mirror" type="button" class="btn btn-secondary">V-Mirror</button>
+                        <button id="bucket-fill" type="button" class="btn btn-secondary">Bucket</button>
+                        <button id="eraser" type="button" class="btn btn-secondary">Erase</button>
+                        <button id="save" type="button" class="btn btn-secondary">Save</button>
+                    </div>
+                </div>
+
+                <div class="row mt-3">
+                    <div class="col vh-100">
+                        <table id="draw-area" class="vh-50" ondragstart="return false;" ondrop="return false;">
+                            <tbody id="draw-area-body"></tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col">
+                        <!-- Add animation tracks here -->
+                    </div>
+                </div>
+            </div>
+
+            <div class="col">
+                <div class="row">
+
+                    <div class="col">
+                        <h3>Color Palette</h3>
+                        <input type="file" id="colorPaletteFile" class="btn btn-dark" name="colorPaletteFile"/>
+                        <div id="palette-list" class="row mt-3 mb-3">
+
+                        </div>
+                    </div>
+                    <div class="col">
+                        <input id="color" type="color">
+                    </div>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+
+
+    <script type="text/javascript">
+        const drawArea    = document.getElementById("draw-area");
+        const drawPreview = document.getElementById("draw-area-preview");
+        const colrPalFile = document.getElementById("colorPaletteFile");
+
+        const prevScroll  = document.getElementById("previewScrollDetector");
+        const palette      = document.getElementById("palette-list");
+
+        const tbody       = document.querySelector('#draw-area tbody');
+        const pTbody      = document.querySelector('#draw-area-preview tbody');
+
+        const hmirror     = document.getElementById("h-mirror");
+        const vmirror     = document.getElementById("v-mirror");
+        const bucketFill  = document.getElementById("bucket-fill");
+        const eraser      = document.getElementById("eraser");
+        const save        = document.getElementById("save");
+
+        const isLogging   = false;
+        let isHMirror     = false;
+        let isVMirror     = false;
+        let isBucketFill  = false;
+        let isErasing     = false;
+
+
+        const update_pixel = (cell = null, isEraseCall = false) => {
+            const color        = document.getElementById("color");
+            const colorStyle   = (!isErasing && !isEraseCall) ? "background-color: " + color.value : "";
+
+            const row          = cell.parentElement;
+            const pCell        = drawPreview.rows[row.rowIndex].cells[cell.cellIndex];
+
+            const hRowIndex    = drawArea.rows.length - row.rowIndex - 1;
+            const vRowIndex    = drawArea.rows[row.rowIndex].cells.length - cell.cellIndex - 1;
+            const vhRowIndex   = drawArea.rows[hRowIndex].cells.length - cell.cellIndex - 1;
+
+            const hCell        = drawArea.rows[hRowIndex].cells[cell.cellIndex];
+            const pHCell       = drawPreview.rows[hRowIndex].cells[cell.cellIndex];
+
+            const vCell        = drawArea.rows[row.rowIndex].cells[vRowIndex];
+            const pVCell       = drawPreview.rows[row.rowIndex].cells[vRowIndex];
+
+            const vhCell       = drawArea.rows[hRowIndex].cells[vRowIndex];
+            const pVHCell      = drawPreview.rows[hRowIndex].cells[vhRowIndex];
+
+            let cellCollection = [];
+            cellCollection.push(cell);
+            cellCollection.push(pCell);
+
+            if (isHMirror) {
+                cellCollection.push(hCell);
+                cellCollection.push(pHCell);
+            }
+
+            if (isVMirror) {
+                cellCollection.push(vCell);
+                cellCollection.push(pVCell);
+            }
+
+            if (isHMirror && isVMirror) {
+                cellCollection.push(vhCell);
+                cellCollection.push(pVHCell);
+            }
+
+            set_pixel_color(cellCollection, colorStyle);
+
+            if (isLogging) {
+                console.log(cell.innerHTML, row.rowIndex, cell.cellIndex);
+            }
+        }
+
+        const set_pixel_color = (cellCollection = [], colorStyle = "") => {
+            for (var i = 0; i < cellCollection.length; i++) {
+                cellCollection[i].style = colorStyle;
+            }
+        }
+
+        const fill_action = (cell = null) => {
+            if (!cell) { return; }
+
+            const color    = document.getElementById("color");
+            const colorVal = (isBucketFill && !isErasing) ? "background-color: " + color.value : "";
+
+            for (let i = 0; i < drawPreview.rows.length; i++) {
+                let row  = drawArea.rows[i];
+                let row2 = drawPreview.rows[i];
+
+                for (let j = 0; j < drawPreview.rows[0].cells.length; j++) {
+                    row.cells[j].style  = colorVal;
+                    row2.cells[j].style = colorVal;
+                }
+            }
+        }
+
+        const load_pixel_grid = (rowi = 32, coli = 32) => {
+            for (let i = 0; i < rowi; i++) {
+                let row  = drawArea.insertRow(-1);
+                let row2 = drawPreview.insertRow(-1);
+
+                for (let j = 0; j < coli; j++) {
+                    row.insertCell(-1);
+                    row2.insertCell(-1);
+                }
+            }
+        }
+        
+        const toggle_button = (elm = null, isTrue = false) => {
+            if (!elm) { return; }
+
+            if (isTrue) {
+                elm.classList.remove("btn-secondary");
+                elm.classList.add("btn-primary");
+            } else {
+                elm.classList.remove("btn-primary");
+                elm.classList.add("btn-secondary");
+            }
+        }
+
+        const save_image = () => {
+            const rowi = drawPreview.rows.length;
+            const coli = drawPreview.rows[0].cells.length;
+            let imageData = new ImageData(coli, rowi);
+            let colors    = [];
+
+
+            for (let i = 0; i < drawPreview.rows.length; i++) {
+                let row = drawPreview.rows[i];
+
+                for (let j = 0; j < row.cells.length; j++) {
+                    let style    = row.cells[j].style;
+                    let colorVal = style["background-color"].replace("rgb", "")
+                                                            .replace("(", "")
+                                                            .replace(")", "")
+                                                            .split(",");
+                    let l        = row.cells.length * i + j
+                    let rgba     = []
+
+                    for (let k = 0; k < colorVal.length; k++) {
+                        try {
+                            rgba.push( parseInt(colorVal[k], 10) );
+                        } catch (e) {
+                            rgba.push(null);
+                        }
+                    }
+
+                    const isTransparent = (rgba.length == 3 && rgba == [null, null, null])
+                    rgba.push( isTransparent ? null : 255 );
+
+                    colors.push(rgba);
+                }
+            }
+
+            let k = 0;
+            for (let i = 0; i < imageData.data.length; i+=4) {
+                imageData.data[i + 0] = (colors[k][0] == null) ? 0 : colors[k][0];  // R value
+                imageData.data[i + 1] = (colors[k][1] == null) ? 0 : colors[k][1];  // G value
+                imageData.data[i + 2] = (colors[k][2] == null) ? 0 : colors[k][2];  // B value
+                imageData.data[i + 3] = (colors[k][3] == null) ? 0 : colors[k][3];  // A value
+
+                k += 1;
+            }
+
+            return imageData;
+        }
+
+        const imagedata_to_uri = (imageData = null) => {
+            if (!imageData) { return; }
+
+            const canvas  = document.createElement('canvas');
+            const ctx     = canvas.getContext('2d');
+
+            canvas.width  = imageData.width;
+            canvas.height = imageData.height;
+            ctx.putImageData(imageData, 0, 0);
+
+            return canvas.toDataURL();
+        }
+
+        const download_uri = (uri = null, name = "pixilate_image.png") => {
+            if (!uri) { return; }
+
+            const link    = document.createElement("a");
+            link.download = name;
+            link.href     = uri;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            delete link;
+        }
+
+        const load_from_data_url = (dataUrl = null) => {
+            if (!dataUrl) { return; }
+
+            let image    = new Image();
+            image.onload = (data) => {
+                let canvas    = document.createElement('canvas');
+                let context   = canvas.getContext('2d');
+                canvas.width  = image.width;
+                canvas.height = image.height;
+                context.drawImage(image, 0, 0 );
+
+                const imageData = context.getImageData(0, 0, image.width, image.height).data;
+                delete canvas;
+
+                clearChildNodes(palette);
+                let colors = {};
+                for (let i = 0; i < imageData.length; i+=4) {
+                    let red   = imageData[i + 0];
+                    let green = imageData[i + 1];
+                    let blue  = imageData[i + 2];
+                    let alpha = imageData[i + 3];
+                    let key   = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+
+                    if (colors[key]) { continue; }
+                    colors[key] = [red, green, blue, alpha];
+                }
+
+                let keys = Object.keys(colors);
+                for (let i = 0; i < keys.length; i++) {
+                    let liElm   = document.createElement("LI");
+                    let color   = keys[i];
+                    liElm.style = `background-color: ${color}; width: 32px; height: 32px`;
+                    liElm.class = "col";
+                    palette.appendChild(liElm);
+                }
+
+            };
+
+            image.src = dataUrl;
+        }
+
+        const decode_array_buffer = async (buffer = null) => {
+            if (!buffer) { return; }
+
+            let mime;
+            let a = new Uint8Array(buffer);
+            let nb = a.length;
+            if (nb < 4) { return null; }
+
+            let b0 = a[0];
+            let b1 = a[1];
+            let b2 = a[2];
+            let b3 = a[3];
+
+            if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4E && b3 == 0x47) {
+                mime = 'image/png';
+            } else if (b0 == 0xff && b1 == 0xd8) {
+                mime = 'image/jpeg';
+            } else if (b0 == 0x47 && b1 == 0x49 && b2 == 0x46) {
+                mime = 'image/gif';
+            } else {
+                return null;
+            }
+
+            let binary = "";
+            for (var i = 0; i < nb; i++){
+                binary += String.fromCharCode(a[i]);
+            }
+
+            let base64 = window.btoa(binary);
+            return 'data:' + mime + ';base64,' + base64;
+        }
+
+        const clearChildNodes = (parent = null) => {
+            if (!parent) { return; }
+
+            while (parent.firstChild) {
+                parent.removeChild(parent.firstChild);
+            }
+        }
+
+        const rgb2hex = (r = 0, g = 0, b = 0) => {
+            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        }
+
+
+
+        const start = () => {
+            load_pixel_grid();
+        }
+
+
+
+        prevScroll.addEventListener("wheel", function (e) {
+            let size = parseInt( drawPreview.style.height.replace("vh", "") );
+
+            size += (e.deltaY < 0) ? 5 : -5;
+            if (size >= 10 && size <= 75) {
+                drawPreview.style.height = size + "vh";
+            }
+        });
+
+        tbody.addEventListener("mousemove", function (e) {
+            const cell  = e.target.closest('td');
+            if (!cell) { return; }
+
+            if (e.buttons == 1) { update_pixel(cell); }
+            if (e.buttons == 4) { update_pixel(cell, true); }
+        });
+
+        tbody.addEventListener("mousedown", function (e) {
+            const cell  = e.target.closest('td');
+            if (!cell) { return; }
+
+            if ((e.buttons == 1 || e.buttons == 4) && isBucketFill) {
+                fill_action(cell);
+            }
+
+            if (e.buttons == 1) { update_pixel(cell); }
+            if (e.buttons == 4) { update_pixel(cell, true); }
+        });
+
+        bucketFill.addEventListener("mouseup", function (e) {
+            if (e.buttons == 0) {
+                isBucketFill = !isBucketFill;
+                toggle_button(bucketFill, isBucketFill);
+            }
+        });
+
+        save.addEventListener("mouseup", function (e) {
+            if (e.buttons == 0) {
+                download_uri( imagedata_to_uri( save_image() ) );
+            }
+        });
+
+        palette.addEventListener("mouseup", function (e) {
+            const cell  = e.target.closest('li');
+            if (!cell) { return; }
+
+            try {
+                const elm = document.getElementsByClassName('selected-color')[0];
+                elm.classList.remove("selected-color");
+            } catch (e) { }
+
+            let color = cell.style["background-color"].replace("rgb", "")
+                                                        .replace("(", "")
+                                                        .replace(")", "")
+                                                        .split(",");
+            let hex   = rgb2hex( parseInt(color[0]), parseInt(color[1]), parseInt(color[2]))
+
+            const colorElm = document.getElementById("color");
+            cell.classList.add("selected-color");
+            colorElm.value = hex;
+        });
+
+        colrPalFile.addEventListener("change", function (e) {
+            const file   = e.target.files[0];
+            const reader = new FileReader();
+
+            reader.readAsArrayBuffer(file,'UTF-8');
+
+            reader.onload = readerEvent => {
+                const content = readerEvent.target.result;
+
+                decode_array_buffer(content).then((dataUrl) => {
+                    if (!dataUrl) { return ; }
+                    load_from_data_url(dataUrl);
+                });
+
+            }
+
+        });
+
+        eraser.addEventListener("mouseup", function (e) {
+            if (e.buttons == 0) {
+                isErasing = !isErasing;
+                toggle_button(eraser, isErasing);
+            }
+        });
+
+        hmirror.addEventListener("mouseup", function (e) {
+            if (e.buttons == 0) {
+                isHMirror = !isHMirror;
+                toggle_button(hmirror, isHMirror);
+            }
+        });
+
+        vmirror.addEventListener("mouseup", function (e) {
+            if (e.buttons == 0) {
+                isVMirror = !isVMirror;
+                toggle_button(vmirror, isVMirror);
+            }
+        });
+
+
+        start();
+    </script>
+
+</body>
+</html>