Unicode Pad

p5.disableFriendlyErrors = true;

let font;

fontsize = 32;

let cnt;

let hnt;

let inp = 0;

let counter;

let cstart = 33;     // first decimal character to display

let cstart2 = 'f0';  // first hex character to display

// An array of buttons

var buttons = new Array(6);  // Six buttons, but you can have more (or fewer)

var buttname = ['PREV','NEXT','SAVER','RESET','COPY1','COPY2'];  // The names of your buttons

var action = [prev, next, saver, resett, copier, copier2];  // The names of the functions they trigger

var lshift = 0;

var tshift = 0;

let gap = 52;

let margin = 10;

// A design choice - uncomment the effect you want and comment out the one you don't want

​

// the next two lines set the text color to white and vary only the background colors

//var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"]; // The foreground text colors

//var bgcolors = ["#ff0000", "#FF9900", "#00dd00", "#00cccc", "#8080ff", "#ff00ff"]; // The background text colors  

​

// the next two lines set the background color to light grey and vary only the text colors

var colors = ["#ff0000", "#ff9900", "#00dd00", "#00cccc", "#8080ff", "#ff00ff"]; // The foreground text colors

var bgcolors = ["#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee"]; // The background text colors

var hidden = 0;

var lpos = 800; // horizontal position of panel left top corner

var tpos = 355; // vertical position of panel left top corner

​

function preload() {

  // Ensure the .ttf or .otf font is stored in the assets directory

  // is loaded before setup() and draw() are called

}

​

function setup() {

  createCanvas(1112, 834);

  // this is a special deactivated button that provides a backdrop for the other buttons

  // it has been made partially transparent by the 'aa' characters in its color definition

  backbutt = createButton("")

  backbutt.position(lpos, tpos);

  backbutt.size(120, 290);

  backbutt.style("background-color", '#eeeeeeaa'); // optional

  backbutt.style('border-radius', '12px');  

  backbutt.attribute('disabled','true');

  // These buttons hide and show the panel

  hidebutt = createButton("HIDE")

  hidebutt.position(lpos + 20, tpos + 10);

  hidebutt.style("font-size", 14+"px");

  hidebutt.size(80, 30);

  hidebutt.mousePressed(hider);

  hidebutt2 = createButton("SHOW")

  hidebutt2.position(lpos + 20, tpos + 10);

  hidebutt2.style("font-size", 14+"px");

  hidebutt2.size(80, 30);

  hidebutt2.mousePressed(hider);

  hidebutt2.hide();

  // Loops to create and evenly space out the buttons

  for (var i = 0; i < buttons.length; i++) {

    buttons[i] = createButton(buttname[i])

  }

  for (var i = 0; i < buttons.length; i++) {

    buttons[i].position(lpos + 10, 400+40*i);

    buttons[i].style("color", colors[i]);

    buttons[i].size(100, 35);

    buttons[i].style("background-color", bgcolors[i]); // optional

    buttons[i].style("font-size", 20+"px");

    buttons[i].style("border-color", '#444444');

    buttons[i].style('border-radius', '12px');  // ***** rounded corners! ********* 

    buttons[i].mousePressed(action[i]);

  }

​

  inp = createInput('decimal');

  inp.position(980, 390);

  inp.size(120,30);

  inp.style("font-size", 18+"px");  

  inp.input(myInputEvent);

  cnt = 33;

  translate(margin * 4, margin * 4);

  textAlign(CENTER, CENTER);

  showLetter();

  inp2 = createInput('hex');

  inp2.position(980, 480);

  inp2.size(120,30);

  inp2.style("font-size", 18+"px"); 

  inp2.input(myInputEvent2);

  hnt = 23;

  //translate(margin * 4, margin * 4);

  //textAlign(CENTER, CENTER);

  showLetter();

}

​

function draw() {

  //background(255);

  // Set text characteristics

  textSize(fontsize);

  textAlign(CENTER, CENTER);

  textSize(20);

  noStroke();

  text("Input a range start #", 1000,370)

  // Set the gap between letters and the left and top margin

  translate(margin * 4, margin * 4);

  fill(255);

  noStroke();

  //rect(766, -32, 300, 24);

  //rect(0,0,width/1.5,height);

  stroke(0);

  fill(0);

​

  // Set the counter to start at the character you want

  // in this case 33, which is the exclamation point symbol

  counter = cstart;

  cfinish = 210+Number(cstart);

  textSize(20);

  textAlign(LEFT);

  noStroke();

  text(cstart+" to "+cfinish, 850, 410);  // decimal

  text(hex(cstart,6)+" to "+hex(cfinish,6), 850, 500); // hex

  textAlign(CENTER);

  text("Character "+cnt,950, 538)

  text(char(cnt),950, 578)

  stroke(0);

  // Loop as long as there is space on the canvas

  for (let y = 0; y < height - gap *2; y += gap) {

    for (let x = 0; x < width * .67 - gap; x += gap) {

      //cnt++;

      // Use the counter to retrieve individual letters by their Unicode number

      let letter = char(counter);

      // draw square 'buttons'

      fill(255);

      rect(x - 25, y - 25, 50, 50, 8, 8);

​

      // Add different color to the vowels and other characters

      if (

        letter === 'A' ||

        letter === 'E' ||

        letter === 'I' ||

        letter === 'O' ||

        letter === 'U' ||

        letter === 'a' ||

        letter === 'e' ||

        letter === 'i' ||

        letter === 'o' ||

        letter === 'u'

      ) {

        fill('#ed225d');

      } else {

        fill(0);

      }

​

      // Draw the letter to the screen

      noStroke();

      textSize(fontsize);

      text(letter, x, y);

      stroke(0);

      // Increment the counter

      counter++;

    }

  }

}

​

function prev(){

  fill(255)

  noStroke();

  rect(840,396,240,30);

  rect(840,488,240,30);

  if (cstart >= 210)

    cstart -= 210

}

​

function next(){

  fill(255);

  noStroke();

  rect(840,396,240,30);

  rect(840,488,240,30);

  cstart += 210

}

​

function saver(){

  save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");

}

​

function resett(){

  background(255);

  cstart = 33;

}

​

function myInputEvent(){

  fill(255);

  noStroke();

  rect(840,396,240,30);

  rect(840,488,240,30);

  cstart = Number(inp.value());

}

​

function myInputEvent2(){

  fill(255);

  noStroke();

  rect(840,396,240,30);

  rect(840,488,240,30);

  cstart = unhex(inp2.value());

}

​

function copier(){

​

   /* Copy the text for the current character */

  navigator.clipboard.writeText("Character "+cnt);

​

  /* Alert the copied text */

  alert("Copied the text: " + "Character "+cnt);

}

​

function copier2(){

​

   /* Copy the text for the current character */

  navigator.clipboard.writeText(char(cnt));

​

  /* Alert the copied text */

  alert("Copied the text: " + char(cnt));

}

​

function hider(){

  hidden = 1 - hidden;

  if (hidden == 1){

    for (var i = 0; i < buttons.length; i++) {

      buttons[i].hide()

    }

    backbutt.hide()

    hidebutt.hide();

    hidebutt2.show();

  }else{

    for (var i = 0; i < buttons.length; i++) {

      buttons[i].show()

    }

    backbutt.show()

    hidebutt.show();

    hidebutt2.hide();

  }

}

​

let lapse = 0;    // mouse timer

function mousePressed(){

  // prevents mouse press from registering twice

  if (millis() - lapse > 400){

    if (mouseX > 10 && mouseX < 738 && mouseY > 10 && mouseY < 790){

      background(255);

      x = mouseX - 10;

      y = mouseY - 10;

      cnt = cstart + int(x/52) + int(y / 52) * 14;

      //print(cnt);

      showLetter();

      lapse = millis();

    }

  }

}

​

function showLetter(){

  textSize(200);

  noStroke();

  text(char(cnt), width *.8, 170);

  textSize(36);

  text("Character ", width *.8, 0);

  textSize(24);

  text(parseInt(cnt,6)+' hex, '+cnt+' dec', width *.8, 40);

}

​