Multiple use of the same object

[walch]

Dear Jeremy,
I would like the user to see the same text in different places by clicking the same button several times.
The first time the user clicks on the “speed” button, the sentence is presented on Canvas1. After he has added Canvas2 and pressed the “speed” button again, the sentence should appear on Canvas2. It does, but at the same time, the sentence disappears from Canvas1.
Do I have to “park” hidden objects on the canvas (10 in total) to give them the values, because the text object can only be shown once?

getButton("speed")
  .callback( newFunction( ()=>{
    try { getCanvas(getVar("canvasnr_button")._element.value).add( getVar("site")._element.value, getVar("mid")._element.value, getText("Beschleunigung" + getVar("nr")._element.value))._runPromises();
    }
    catch (e) { }
  }).call(),getVar("mid").set("middle at 50%"),getVar("nr").set("2"),
        getVar("site").set("left at 55%")
        ),

(imagine the number canvasnr_button+1 and the user would click “speed” again)
Thank you for your support!
Christin

[Jeremy]

Dear Christin,

If you want some text to be displayed at multiple locations on the page at the same time, then you need as many Text elements. If you know in advance that you’ll have up to 10 elements, you can create all 10 elements in advance:

newCanvas("canvas1", 200,200),newCanvas("canvas2", 200,200),newCanvas("canvas3", 200,200),newCanvas("canvas4", 200,200),newCanvas("canvas5", 200,200),
newCanvas("canvas6", 200,200),newCanvas("canvas7", 200,200),newCanvas("canvas8", 200,200),newCanvas("canvas9", 200,200),newCanvas("canvas10", 200,200)
,
newText("Beschleunigung1"),newText("Beschleunigung2"),newText("Beschleunigung3"),newText("Beschleunigung4"),newText("Beschleunigung5"),
newText("Beschleunigung6"),newText("Beschleunigung7"),newText("Beschleunigung8"),newText("Beschleunigung9"),newText("Beschleunigung10")
,
newVar("nr",1)
,
newButton("speed")
  .callback( getVar("nr")
    .test.is(1).success( getText("Beschleunigung1").print("left at 55%","middle at 50%",getCanvas("canvas1")) )
    .test.is(2).success( getText("Beschleunigung2").print("left at 55%","middle at 50%",getCanvas("canvas2")) )
    .test.is(3).success( getText("Beschleunigung3").print("left at 55%","middle at 50%",getCanvas("canvas3")) )
    .test.is(4).success( getText("Beschleunigung4").print("left at 55%","middle at 50%",getCanvas("canvas4")) )
    .test.is(5).success( getText("Beschleunigung5").print("left at 55%","middle at 50%",getCanvas("canvas5")) )
    .test.is(6).success( getText("Beschleunigung6").print("left at 55%","middle at 50%",getCanvas("canvas6")) )
    .test.is(7).success( getText("Beschleunigung7").print("left at 55%","middle at 50%",getCanvas("canvas7")) )
    .test.is(8).success( getText("Beschleunigung8").print("left at 55%","middle at 50%",getCanvas("canvas8")) )
    .test.is(9).success( getText("Beschleunigung9").print("left at 55%","middle at 50%",getCanvas("canvas9")) )
    .test.is(10).success( getText("Beschleunigung10").print("left at 55%","middle at 50%",getCanvas("canvas10")) )
    .set(v=>v+1)
  )
  .print()

Jeremy

[walch]

Hello Jeremy,
Thank you for your answer! I didn’t express myself precisely enough.

I have 9 buttons (speed, consumption, hp,… – like on a car quartet card) that generate text on the left or right of one of 10 canvases, depending on a variable, which are filled one after the other.
So I have a total of 18 possible pieces of text that the user can generate by pressing one of the buttons. Each of these 18 pieces of text should be able to appear several times on one of the 20 possible places (left or right on the respective canvas).
My question now is: Can I place 20 hidden text elements (instead of preparing 20*9 elements) on the canvas and pass them the corresponding selected text element? I know there is no set method for the text elements, but can I work around this?
This is a part of the code to make my description easier to understand.
Thanks a lot!
Christin

newButton ("PS", "Leistung "+ "<br>"+ variable.LeistungPS  + " PS")
,
//...
newText("PS1", "Der "+variable.model + " hat eine Leistung von " + variable.LeistungPS + " PS")
,
newText("PS2", " er hat eine Leistung von " + variable.LeistungPS + " PS.")
,
 //...
newCanvas("canvas1",780,20 )
    .settings.add( "right at 100%", "middle at 50%", getButton("+1").print())
    .css( "border" , "solid 1px black" )    
    ,
newCanvas("canvas2",780,20 )   
	.settings.add( "right at 100%", "middle at 50%", getButton("+2").print())
    .css( "border" , "solid 1px black" )
    .settings.hidden()
    ,
//...
newCanvas("canvas10",780,20 )
    .css( "border" , "solid 1px black" )
    .settings.hidden()
,
//...
newVar("site", "left at 0%"), //left or right on the canvas
newVar("mid", "middle at 50%"),
newVar("nr", "1"),//Text1 or Text2
newVar("canvasnr_button", "canvas1"), //canvas where the text should appear, changes when Button "+" is pressed

getButton("PS")
	.callback( newFunction( ()=>{
	try { getCanvas(getVar("canvasnr_button")._element.value).add( getVar("site")._element.value, 
                                                                       getVar("mid")._element.value, 
                                                                       getText("PS"  + getVar("nr")._element.value))
              ._runPromises();
    }
    catch (e) { }
	}).call(),
       getVar("mid").set("middle at 50%"),getVar("nr").set("2"),
       getVar("site").set("left at 55%")
    ),
//...

[Jeremy]

Hello Christin,

There is a method to set the text of a Text element: .text

Here is an illustration of what I think you are trying to achieve:

TEXTS = [
    null, // index 0, unused
    (m,l)=>`Der ${m} hat eine Leistung von ${l} PS`, // index 1
    (m,l)=>` er hat eine Leistung von ${l} PS.`, // index 2
    (m,l)=>` test ${l} test2 ${m}.`, // index 3
    // etc. 
]

Tempalte( variable =>
 newTrial(
    newButton("PS") // create this button now (don't apply the defaultButton below to this button)
    ,
    // I just use these two buttons for testing purposes
    newButton("Next text").callback( getVar("nr").set(v=>v+1) ),
    newButton("Switch side").callback( getVar("side").set(d=>d=="left"?"right":"left") )
    ,
    newVar("side", "left"), // which side to print the text
    newVar("nr", 1),        // which text to print (will look up TEXTS using the value)
    newVar("canvasnr",1)    // which canvas to print on
    ,
    defaultCanvas.css( "border" , "solid 1px black" ).print() // add a border a print all the canvases created below
    ,
    defaultButton.callback( getVar("canvasnr").set(v=>v+1) ) // increment canvasnr upon click on the buttons created below
    ,
    newCanvas("canvas1", 780, 20) // this button will make canvas2 visible
        .add("right at 100%", "middle at 50%", newButton("+1").callback(getCanvas("canvas2").visible(),self.remove()) )
        .add(0, "middle at 50%", newText("left1",""))
        .add("right at 90%", "middle at 50%", newText("right1",""))
    ,
    defaultCanvas.hidden() // hide all the canvases created below
    ,
    newCanvas("canvas2", 780, 20) // this button will make canvas3 visible
        .add("right at 100%", "middle at 50%", newButton("+2").callback(getCanvas("canvas3").visible(),self.remove()) )
        .add(0, "middle at 50%", newText("left2",""))
        .add("right at 90%", "middle at 50%", newText("right2",""))
    ,
    newCanvas("canvas3", 780, 20)
        .add("right at 100%", "middle at 50%", newButton("+3").callback(getCanvas("canvas4").visible(),self.remove()) )
        .add(0, "middle at 50%", newText("left3",""))
        .add("right at 90%", "middle at 50%", newText("right3",""))
    ,
    newCanvas("canvas4", 780, 20)
        // etc.
    ,
    getButton("PS")
        .callback( 
            // Create a Var element whose text content is fetched from TEXTS, based on the index in nr
            newVar("txt").set(getVar("nr")).set(n=>TEXTS[n](variable.model,variable.LeistungPS))
            ,
            getVar("side").test.is("left").success( 
                // left
                getVar("canvasnr")
                    .test.is(1).success( getText("left1").text(getVar("txt")) )
                    .test.is(2).success( getText("left2").text(getVar("txt")) )
                    .test.is(3).success( getText("left3").text(getVar("txt")) )
                    // etc.
            ).failure(
                // right
                getVar("canvasnr")
                    .test.is(1).success( getText("right1").text(getVar("txt")) )
                    .test.is(2).success( getText("right2").text(getVar("txt")) )
                    .test.is(3).success( getText("right3").text(getVar("txt")) )
                    // etc.
            )
        )
        .center()
        .print()
    ,
    // etc.
    getButton("Next text").center().print(),getButton("Switch side").center().print()
    ,
    newKey(" ").wait()
  )
)

Jeremy

[Author]

Posts