Multi line Text box needed!

p5.js Coding Questions
1

Is there any function for a multi line textbox input? like createInput() but in paragraph form like the one im typing in right now

2

Sounds like you’re looking to a text area?

In HTML, you’d use a <textarea> tag. More info here.

In P5.dom, you can create a textarea using the createElement() function:

createElement('textarea', 'your text here');

More info in the reference.

6 Likes
3

Thanks so much @Kevin !

As the reference seems incomplete, how would I set a maximum letter count for the element?

4

The reference is not incomplete- you’re just entering HTML-land where things are a bit different.

I’d recommend googling something like “html textarea set maximum length” for a ton of results.

1 Like
5

So there isn’t a way to do it in the script?(with p5.js) I would have to make the area in the html itself?

6

Remember that P5.js is “just” JavaScript code. Try googling something like “javascript textarea set maximum length” for a ton of results.

Taking a step back, I encourage you to get comfortable using google- not everything is going to be obvious from the P5.js reference, especially stuff that gets into HTML and general JavaScript. The good news is there are a lot of really great resources out there, just a search away! Good luck!

2 Likes
7

Ok, one more: what would the ID for my created element be?

8

wait i found it nevermind

9

It’s all up to you. You can set whatever ID you want.

1 Like
10

for future views here is the link to all the element functions:
https://p5js.org/reference/#/p5.Element

11 
'use strict';

let textArea;

function setup() {
  noCanvas();
  textArea = createElement('textarea').attribute('maxlength', 30).size(100, 50);
}
2 Likes
12

.textBounds doesnt work for new lines

13

What do you mean with new lines? You mean \n character? Please provide some code for context.

Kf

14 
function preload(){
    font = loadFont('assets/Quicksand-Regular.otf');
}



var activeMessages = [];
var messageHistory = [];



function showMessages() {

    for(var i = 0; i < activeMessages.length; i++){
        //textBubble(activeMessages)
    }

};


function textLine(textin,x,y){
    textSize(15);
    this.x = x;
    this.y = y;

    this.lines = 1;
    this.height = this.lines*10;


    this.sampleLine = textin //split(textin,' ');
    this.tb = font.textBounds(this.sampleLine,this.x,this.y)

    this.smp = split(this.sampleLine, '\n');

    this.showText();
}

textLine.prototype.showText = function(){

      rect(this.tb.x-3,this.tb.y-3,this.tb.w+5,this.tb.h+5)

      console.log(this.smp.length)

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

        text(this.sampleLine,this.x,this.y);

  //  }

};

function setup() {
    createCanvas(1000,550);
    textFont(font)
}

function draw() {
    background(200,200,200);
    new textLine("hello world! welcome to the\nworld of coding",200,200)
}

as seen the textbox only appears with the first line of code, i am experimenting with using a for loop to detect “\n” and multiplying the width by a number but im not finished yet

15 
function preload(){
    font = loadFont('assets/Quicksand-Regular.otf');
}



var activeMessages = [];
var messageHistory = [];



function showMessages() {

    for(var i = 0; i < activeMessages.length; i++){
        //textBubble(activeMessages)
    }

};


function textLine(textin,x,y){
    textSize(15);
    this.x = x;
    this.y = y;

    this.lines = 1;
    this.height = this.lines*10;


    this.sampleLine = textin //split(textin,' ');
    this.smp = split(this.sampleLine, '\n');

    this.tb = font.textBounds(this.sampleLine,this.x,this.y);

    this.showText();
}

textLine.prototype.showText = function(){

        rect(this.tb.x-3,this.tb.y-3,this.tb.w+5,(this.tb.h+5)*this.smp.length)

        console.log(this.smp.length)

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

        text(this.sampleLine,this.x,this.y);

  //  }

};

function setup() {
    createCanvas(1000,550);
    textFont(font)
}

function draw() {
    background(200,200,200);
    new textLine("hello world! welcome to the\nworld of coding\nim awesome im awesome im awesome im awesome im awesome",200,200);
}

But then: the width messes up!

16

So yeah i have a dilema

17

Try this. This link should give you some leads: https://p5js.org/reference/#/p5/textAscent
You can use the multitext html element. It didin’t work for you?

Kf

var fmtMsg;
var activeMessages = [];
var messageHistory = [];

function setup() {
  createCanvas(1000, 550);
  //textFont(font)
    fmtMsg=new textLine("hello world! welcome to the\nworld of coding\nim awesome im awesome im awesome im awesome im awesome", 200, 200);
}

function draw() {
  background(200, 200, 200);
  
  fmtMsg.showText();
}


function textLine(textin, x, y) {
  textSize(15);
  this.x = x;
  this.y = y;

  this.th = textAscent()+textDescent();  
  this.smp = split(textin, '\n');

  this.lines = this.smp.length;
}

textLine.prototype.showText = function() {
  
  for( i=0;i<this.lines;i++){
    text(this.smp[i],this.x,this.y+i*this.th);
  }

};
1 Like