P5.js-web-editor: Unclear console message if image in loadImage is not found

[eharkins100]

Nature of issue?

• Found a bug (more likely a user error by me)

• Web browser and version:

• Operating System:

• Steps to reproduce this bug:

In openprocessing.org code editor, this code works the way I want it, but in the p5 editor, I get his console message:

Event {isTrusted: true, constructor: Object}

`var imgAA;
var imgBB;
var x = 100;
var y = 100;
var Xspeed = 4;
var Yspeed = 3.5;

function preload(){
imgAA = loadImage('aa.png');
imgBB = loadImage('bb.png');
}

function setup() {
createCanvas(600, 600);
background(100);
}

function draw() {
background(127);
image(imgAA, x, y, 100, 100);
image(imgBB, y, x, 100, 100);
x = x + Xspeed;
y = y + Yspeed;
if (x > width){
Xspeed = -4;
}
if (x < 0){
Xspeed = 4;
}
if (y > height){
Yspeed = -3.5;
}
if (y < 0){
Yspeed = 3.5;
}
}`

[LakshSingla]

@eharkins100 It seems as if you have not actually imported aa.png and bb.png in your sketch.
Solution:

• Under Sketch menu on top bar, click on Add File.
• Drag the PNGs from your desktop on the blank area provided (below text box).

Alternatively, you can host the images on another site and provide its URL instead of aa.png or bb.png

[catarak]

i'm finding the same thing, that i'm able to get that console message to appear if i just copy your code into a new sketch and don't upload any images. however, the console message is not clear, and that's an issue!

[LakshSingla]

@catarak I can help investigating this

[eharkins100]

thank you

i found the problem

i am a newbie and it was my own error

i had an incorrect filepath to the image i was trying to display

i was confused because the console error message did not help me very much

thanks again for your nice disposition to help

take care
ed

On Tue, Mar 5, 2019 at 11:34 PM Laksh Singla [e-mail]
wrote:

@catarak https://github.com/catarak I can help investigating this

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/868#issuecomment-469943386,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AuBFDwrpL52sDr-jiwuwIgFTOTzlPEiRks5vTylSgaJpZM4be3FA
.

--
Ed Harkins
Middle School Technology
[email protected] | [phone]

--
_Confidentiality Notice: This email and any attachments contain information
belonging to Nido de Aguilas which may be confidential. This information is
intended solely for the individual or entity to which it is addressed. If
you are not the intended recipient, you are notified that disclosing,
copying, distributing, or other use of this information is strictly
prohibited. If you have received this email in error, please notify the
sender immediately._

[eharkins100]

thanks for your help!

very appreciated

On Tue, Mar 5, 2019 at 7:31 PM Cassie Tarakajian [e-mail]
wrote:

i'm finding the same thing, that i'm able to get that console message to
appear if i just copy your code into a new sketch and don't upload any
images. however, the console message is not clear, and that's an issue!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/868#issuecomment-469885037,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AuBFD9roYfT9-7PcbMIlHhuJaszd90_8ks5vTvBSgaJpZM4be3FA
.

--
Ed Harkins
Middle School Technology
[email protected] | [phone]

--
_Confidentiality Notice: This email and any attachments contain information
belonging to Nido de Aguilas which may be confidential. This information is
intended solely for the individual or entity to which it is addressed. If
you are not the intended recipient, you are notified that disclosing,
copying, distributing, or other use of this information is strictly
prohibited. If you have received this email in error, please notify the
sender immediately._

[GaurangTandon]

Hello @catarak, I'd like to work on this issue. I did basic research about it and it seems that the issue is not with the Console component. That componenet is displaying all the information it receives as consoleEvent. Now, it receives consoleEvent from IDEView, so I believe the problem might be there. However, I have not yet been able to pinpoint the source of lacking event information yet.

What I plan to be able to do is trap 404 server response errors, and be able to display a helpful message for that. So, I put a console.log(messageEvent); in the handleConsoleEvent method in PreviewFrame component. Even then, it yields an error, by looking at which it is very difficult to identify that it was because of missing assets (log link). The only useful thing I found was the id property on each of the errors:

MessageEvent
data: Array(2)
 0:
  log: Array(1)
   0:
    data: [{…}]
     id: "389dba67-ce82-dcf8-a321-9b4b-1552902855952"
     method: "error"

Do you have any suggestions on how I could make use of this id to determine what type of an error it was? Or is there some other way that you can think of? Thanks!

[catarak]

there's a file called client/utils/previewEntry.js that's loaded into the preview that catches console messages. i think there's an issue with this, or another event handler needs to be added.

[catarak]

closing as duplicate of #468