link() function

leota

Hi there, I've created a button in my sketch (using the p5.dom library) and I want it to open a specific webpage when it gets pressed. I know there's the link() function in processing.js, which is what I would need. What's the alternative in p5?

GoToLoop

I guess they've forgotten to implement it! #-o You might consider requesting it below: *-:)
https://github.com/lmccart/p5.js/issues

Nevertheless, I've found link()'s implementation within "processing.js" source: O:-)

p.link = function(href, target) {
  if (target !== undef)  window.open(href, target);
  else                   window.location = href;
};

leota

Thanks man, but how do I implement it in my sketch? Here's how I'm trying to do:

function setup() { 

    createCanvas(windowWidth, windowHeight);
    background(16);

        button = createButton('webpage');
    button.position(windowWidth/2+input.width/2,windowHeight/2);
    button.mousePressed(webpage);
}

function link(href, target) {
  if (target !== undef)  window.open(href, target);
  else                   window.location = href;
};

function webpage() {
    link("p5js.org");
}

GoToLoop

Perhaps this implementation I've just done?: :-/

function link(url, winName, options) {
  winName && open(url, winName, options) || (location = url);
}

References:

• https://developer.mozilla.org/en-US/docs/Web/API/Window.open
• https://developer.mozilla.org/en-US/docs/Web/API/Window.location

Just some lil' observations:

• JS function "statements" don't require semicolons at their end!
• While JS function "expressions" do! @-)

PhiLho

You should put http:// (or https://) in the URLs you want to open, otherwise they might be opened... relative to the current page!

leota

Thanks GoToLoop, your implementation worked!

GoToLoop

https://GitHub.com/processing/p5.js/pull/532

arikar1

GoToLoop can you explain to a beginning coder what the WinName and options would be? having trouble playing all of them together an example would be super helpful. Thanks!

GoToLoop

@arikar1, this thread is about the Pjs version (JS Mode) for function link().
Apparently the Java Mode version got 1 parameter only, the URL as String.
There's no 2nd target parameter there like Pjs': http://ProcessingJS.org/reference/link_/

corbinyo

Here is an example of how to make a button that will direct your current webpage to a url of your choosing.

    var button;

    function setup() {
      createCanvas(500,500);

       button = createButton('GO TO URL');
       button.position(100,100);
       button.size(100,100);
       button.mousePressed(greet);

      function greet() {
        window.location.href = "http://www.google.com";
    }
    }

kfrajer

@GoToLoop Did they ever implemented the openURL() option in p5.js? https://github.com/processing/p5.js/pull/532

An example of using link() in Processing java version: https://processing.org/examples/embeddedlinks.html and it is too bad this is not documented in the reference. Where can I create an ticket to have it in the reference?

Kf

GoToLoop

• I was the only 1 there defending the Java Mode way.
• I've never "won" any argument there whenever some else interfered.
• It's very clear that they haven't accepted link(), not even w/ its name changed to openURL().
• As n1 can see from my argument there, there's no much point creating a link() function w/ another name, b/c it's merely a wrapper for JS' open() and location:

1. https://Developer.Mozilla.org/en-US/docs/Web/API/Window/open
2. https://Developer.Mozilla.org/en-US/docs/Web/API/Window/location

• It only benefits Processing Java folks trying out p5.js, not those who already know JS and the DOM.