LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
      Pixelator
  


  

Pixelator



CSS
body {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  line-height: 1.5em;
  text-align: center;
  margin: 0 10px;
  background: #333333;
}

h1 {
  text-align: left;
  margin: 0;
  padding: 20px 0;
  color: white;
}

/* section for tools */
section {
  width: 8%;
  min-width: 78px;
  height: 100%;
  float: left;
  background: lightgray;
  -moz-box-shadow: 5px 5px #888888;
  -webkit-box-shadow: 5px 5px #888888;
  box-shadow: 5px 5px #888888;
}

/* nav */
#tools {
  width: calc(100% - 20px);
  float: left;
  padding: 0 10px;
  cursor: auto;
}

/* drawing tools */
#drawingIcons {
  width: 100%;
}

#drawingIcons div,
#iconSave,
#iconDelete
{
  width: 20px;
  height: 20px;
  margin: 30px auto;
}

#iconPencil {
  background: no-repeat center/100% url("https://s26.postimg.org/zf974rz1x/pencil.png");
}

#iconPencil:hover,
#iconPencil:focus,
#iconPencil.selected {
  background-image: url("https://s26.postimg.org/xyxommw51/pencil-white.png");
}

#iconEraser {
  background: no-repeat center/100% url("https://s26.postimg.org/l69kmpkj9/eraser.png");
}

#iconEraser:hover,
#iconEraser:focus,
#iconEraser.selected {
  background-image: url("https://s26.postimg.org/dnqfe2t6d/eraser-white.png");
}

#iconDelete {
  background: no-repeat center/100% url("https://s26.postimg.org/bx7eclbn9/bin.png");
}

#iconDelete:hover,
#iconDelete:focus {
  background-image: url("https://s26.postimg.org/78rehemgl/bin-white.png");
}

/* color picker */
#colorPickerForm p {
  margin: 0;
}

#colorPicker {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}

hr {
  border-bottom-style: ridge;
}

/* width + height */
input[type=number] {
    width: 50%;
    border: 0;
    margin: 3px;
    padding: 3px;
}

#sizePicker {
  padding-top: 15px;
}

/* save */
#iconSave {
  background: no-repeat center/100% url("https://s26.postimg.org/ct8h5saph/save.png");
}

#iconSave:hover,
#iconSave:focus {
  background-image: url("https://s26.postimg.org/fm1optb1x/save-white.png");
}

/* submit */
#iconSubmit {
  width: 20px;
  height: 20px;
  margin: 5px auto 25px auto;
  background: no-repeat center/100% url("https://s26.postimg.org/xfx6r3u45/submit.png");
}

#iconSubmit:hover,
#iconSubmit:focus {
  background-image: url("https://s26.postimg.org/lcrv3jj1x/submit-white.png");
}

em {
  font-size: 7px;
}

/* main */
main {
  width: 92%;
  height: auto;
  float: left;
}

@media only screen and (max-width: 995px) {
  main {
    width: calc(100% - 78px);
  }
}

table,
tr,
td {
    border: 1px solid #333333;
    background: white;
}

table {
    border-collapse: collapse;
    margin: 0 5%;
}

tr {
    height: 20px;
    min-height: 10px;
}

td {
    width: 20px;
    min-width: 10px;
}
JS
$(document).ready(function() {
  /* variables */
  const image = $('#drawingIcons div');
  const table = $('#pixel_canvas');
  const picker = $('#colorPicker');
  const errors = $('#errors');
  const bin = $('#iconDelete');

  let color = picker.val();
  let width = $('#input_width').val();
  let height = $('#input_height').val();

  let mousePressed = false;

  /* drawing icons click event */
  image.on('click', function() {
    color = picker.val();

    /* add/remove class */
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      $(this).addClass('selected').siblings().removeClass('selected');
    }

    /* change cursor */
    if ($(this).prop('id')=='iconPencil') {
      $('html').css('cursor', 'url(images/cursor/cursor-pencil.png) 2 12, pointer');
      paint();
      mousePressed = false;
    } else {
      $('html').css('cursor', 'url(images/cursor/cursor-eraser.png) 2 12, pointer');
      erase();
      mousePressed = false;
    }
  });

  /* generate grid */
  function makeGrid(w, h) {
    table.children().remove();

    for (let i=0; i');
      for (let j=0; j');
      }
    }
  }

  /* generate default grid */
  makeGrid(width, height);

  /* paint/erase functions */
  function paint() {
    picker.change(function(){
      color = $(this).val();
    });

    $('table td').on('mousedown', function() {
      mousePressed = true;
      if(mousePressed) {
        $(this).css("background-color", color);
      }
    })
    .on('mouseup', function() {
      mousePressed = false;
    })
    .on('mouseover', function() {
      if(mousePressed) {
        $(this).css("background-color", color);
      }
    });
  }

  function erase() {
    $('table td').on('mousedown', function() {
      mousePressed = true;
      if(mousePressed) {
        $(this).removeAttr('style');
      }
    })
    .on('mouseup', function() {
      mousePressed = false;
    })
    .on('mouseover', function() {
      if(mousePressed) {
        $(this).removeAttr('style');
      }
    });
  }

  /* clean drawing */
  bin.on('click', function() {
    table.find('td').removeAttr('style');
  });


  /* validate custom grid inputs */
  function validateInputs() {
    width = $('#input_width').val();
    height = $('#input_height').val();

    if (width <= 0 || width > 40 || height <= 0 || height > 40) {
      errors.html('values:
0-40'); return false; } else { errors.text(''); return true; } } /* submit event (icon click) */ $('#iconSubmit').click(function(event){ event.preventDefault(); validateInputs(); if(validateInputs()) { if (image.hasClass('selected')) { image.removeClass('selected'); } makeGrid($('#input_width').val(),$('#input_height').val()); $('html').css('cursor', 'auto'); } }); /* submit event (keyboard enter */ $('input[type=number]').on('keydown', function(event) { if (event.which == 13) { event.preventDefault(); validateInputs(); if(validateInputs()) { if (image.hasClass('selected')) { image.removeClass('selected'); } makeGrid($('#input_width').val(),$('#input_height').val()); $('html').css('cursor', 'auto'); } } }); /* save image as .png */ $("#iconSave").click(function() { html2canvas($("#pixel_canvas"), { onrendered: function(canvas) { Canvas2Image.saveAsPNG(canvas); $("body").remove(canvas); } }); }); });
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv