Multiple use of the same object

PennController for IBEX Forums Support Multiple use of the same object

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10683
    walch
    Participant

    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

    #10686
    Jeremy
    Keymaster

    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

    #10688
    walch
    Participant

    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%")
        ),
    //...
    #10693
    Jeremy
    Keymaster

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.