Referencing to a sketchpad when introducing new canvas in javascript

DahmSF

Hi Sebastiaan,

is there a way to access a build in sketchpad to change it via the canvas function in OSWeb?

Is it better to access a feedback_item instead of a sketchpad? I want to add some rectangles to mark what was selected. If i got it right, i need to define the canvas in the javascript_item first, before i can access it.

That's what i tried to get an idea:

if (vars.subject_nr % 2 == 0) {

var age_canvas = items['age_nice'].canvas

}

else if (vars.subject_nr % 2 == 1) {

var age_canvas = items['age_ugly'].canvas

}

Stephan

eduard

Hi Stephan,

I can't tell you whether it is possible or not (does your code work?). One way to try is to create a canvas and set it then as the canvas that is associated of a sketchpad. If you can update it like that, it should work I guess.

Is it better to access a feedback_item instead of a sketchpad?

That doesn't matter. If it works, it should work for either.

Eduard

DahmSF

Hi eduard,

the above code does not work to reference to a sketchpad_item. Unfortunately.

Your answer makes me happy because the idea was straight at least. 😄

I will try out to replace the sketchpad_item with an inline_javascript in which i create the canvas by code and report what happened.

Best,

Stephan

DahmSF

The code runs fine in OS, but not in OSWeb.

In first javascript i created the canvas. (It is also shown in OSWeb)

Then I asked for a mouse_response.

Then in a javascript i want to give feedback on the mouse_response, so that you see what you selected.

var y_min = [-242,-212,-184,-154,-126,-97,-68,-38,-10,18,48,78,106,134,160,190,218,248,277,308]

var year_list = [2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985]




if (vars.cursor_x > 322 && vars.cursor_x < 428 && vars.cursor_y > 212 && vars.cursor_y < 318){

vars.OK = 1

}




for (let i = 0; i < 20; i++) {

var y_max = y_min[i]+26

if (vars.cursor_x > -354 && vars.cursor_x < -294 && vars.cursor_y > y_min[i] && vars.cursor_y < y_max){

vars.year = year_list[i]

if (vars.subject_nr%2 == 0) {

Age_Nice.rect({x:-354,y:y_min[i],w:60,h:26,color:'blue'})

}

else if (vars.subject_nr%2 == 1) {

Age_Ugly.rect({x:-354,y:y_min[i],w:60,h:26,color:'blue'})

}

}

}

When i click on the defined positions to create a rectangle i get:

Uncaught reference error: Age_Nice is not defined. It tells me that the canvas does not exist. But that's not the point. It does. It is even shown. If I click somewhere else, the repeat circle works fine. So the canvas is shown again.

DahmSF

I think the prepare phase in the inline_javascripts does not work for canvas neither. Is that related to the above error?

DahmSF

Here is the complete error message from the console:

Access to image at 'file:///C:/Users/20212256/AppData/Local/Temp/img/opensesame.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

opensesame.png:1 Failed to load resource: net::ERR_FAILED

tmpz9fzxn7o.html:104 Uncaught (in promise) Event

VM21:17 Uncaught ReferenceError: Age_Nice is not defined

  at eval (eval at _eval (tmpz9fzxn7o.html:2), <anonymous>:17:17)

  at JavaScriptWorkspace._eval (tmpz9fzxn7o.html:35)

  at InlineJavaScript.run (tmpz9fzxn7o.html:35)

  at ItemStore.run (tmpz9fzxn7o.html:35)

  at Sequence.run (tmpz9fzxn7o.html:35)

  at MouseResponse._complete (tmpz9fzxn7o.html:35)

  at MouseResponse._complete (tmpz9fzxn7o.html:35)

  at MouseResponse._complete (tmpz9fzxn7o.html:35)

  at Events.proceed (tmpz9fzxn7o.html:35)

  at Events._time (tmpz9fzxn7o.html:35)

DevTools failed to load source map: Could not load content for file:///C:/Users/20212256/AppData/Local/Temp/vendors~osweb.1.4.0.bundle.js.map: System error: net::ERR_FILE_NOT_FOUND

DevTools failed to load source map: Could not load content for file:///C:/Users/20212256/AppData/Local/Temp/vendors~osweb.1.4.0.bundle.css.map: System error: net::ERR_FILE_NOT_FOUND

DahmSF

I kept searching for a solution on that problem. I have the impression that the problem has to do with global variables stuff. The canvas created in one javascript_inline cannot be accessed in another javascript_inline. This is not really fine, as I need a response in between which cannot be coded in javascript_inline (which would help me most).

My solution for now is to create the same canvases again in each java_inlinescript.

@sebastiaan @eduard : Are there better options?

Greetings,

Stephan

eduard

Hi Stephan,

I thought with the latest osweb persistent workspace were possible? See here for the documentation:

https://osdoc.cogsci.nl/3.3/manual/javascript/about/#the-persistent-object-preserving-objects-across-scripts

So if I am not mistaken, there is no need to recreate all your canvasses if you store them in a persistent object.

Does that work?

Eduard