function createApp() { let self = this function makeSetter(val) { let setstr = 'this.' + val + '= value; this.redrawEvent();' return setstr } function getNewPosition() { //let allChild = vwf.find("","/*") let cursorVisID = vwf.find("myCursor-avatar-" + vwf.moniker_, "./vis")[0] let avPos = AFRAME.utils.coordinates.parse(vwf.callMethod(cursorVisID, 'worldPosition')); let newPos = [avPos.x, avPos.y, avPos.z] return newPos } return { $cell: true, $type: "div", class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left", $components: [ { $cell: true, $type: "div", class: "mdc-layout-grid__inner", $components: [ { $cell: true, $type: "div", class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12", $components: [ // { // $cell: true, // $type: "button", // class: "mdc-button mdc-button--raised", // $text: "Draw L-System", // onclick: function (e) { // let sceneID = vwf.find("","/")[0]; // vwf_view.kernel.callMethod(sceneID, "drawLSys1"); // } // }, { $cell: true, $type: "button", class: "mdc-button mdc-button--raised", $text: "Create new turtle", onclick: function (e) { let sceneID = vwf.find("", "/")[0]; let turtleID = vwf.find("", "/turtle")[0]; console.log("create new turtle"); let newTurtle = _app.helpers.getNodeDef(turtleID);//vwf.getNode(turtleID, true); newTurtle.properties.position = getNewPosition(); let randomName = "turtle-new-" + _app.helpers.GUID(); vwf_view.kernel.createChild(sceneID, randomName, newTurtle); } } ] }, { $cell: true, $type: "div", class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6", $components: [ { $type: "img", src: "/defaults/assets/lsys/Koch.jpg", class: "mdc-elevation--z2", style: "width: 150px", onclick: function (evt) { let turtleID = vwf.find("", "/turtle")[0]; let params = { "angle": 60, "iteration": 3, "stepLength": 0.3, "rule": 'F++F++F', "axiomF": 'F-F++F-F', "axiomG": '' } vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)]) } } ] }, { $cell: true, $type: "div", class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6", $components: [ { $type: "img", src: "/defaults/assets/lsys/dragon.jpg", class: "mdc-elevation--z2", style: "width: 150px", onclick: function (evt) { let turtleID = vwf.find("", "/turtle")[0]; let params = { "angle": 90, "iteration": 10, "stepLength": 0.3, "rule": 'F', "axiomF": 'F+G+', "axiomG": '-F-G' } vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)]) } } ] }, { $cell: true, $type: "div", class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6", $components: [ { $type: "img", src: "/defaults/assets/lsys/SierpinskiCurve.jpg", class: "mdc-elevation--z2", style: "width: 150px", onclick: function (evt) { let turtleID = vwf.find("", "/turtle")[0]; let params = { "angle": 60, "iteration": 5, "stepLength": 0.3, "rule": 'F', "axiomF": 'G-F-G', "axiomG": 'F+G+F' } vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)]) } } ] }, { $cell: true, $type: "div", class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6", $components: [ { $type: "img", src: "/defaults/assets/lsys/SierpinskiTriangle.jpg", class: "mdc-elevation--z2", style: "width: 150px", onclick: function (evt) { let turtleID = vwf.find("", "/turtle")[0]; let params = { "angle": 120, "iteration": 5, "stepLength": 0.3, "rule": 'F--F--F', "axiomF": 'F--F--F--G', "axiomG": 'GG' } vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)]) } } ] } ] } ] } }