How to use the gui/GuiTR function in gui

init(guiParent) {
    var menu = this._menu = guiParent.addMenu(TR('sceneTitle'));

    // scene
    menu.addButton(TR('sceneReset'), this, 'clearScene' /*, 'CTRL+ALT+N'*/ );
    menu.addButton(TR('sceneAddSphere'), this._main, 'addSphere');
    menu.addButton(TR('sceneAddCube'), this._main, 'addCube');
    menu.addButton(TR('sceneAddCylinder'), this._main, 'addCylinder');
    menu.addButton(TR('sceneAddTorus'), this._main, 'addTorus');

    // menu.addTitle(TR('Torus'));
    // menu.addSlider(TR('Arc'), this._main._torusRadius, this.updateTorusRadius.bind(this), 0.01, Math.PI * 2, 0.001);
    // this.ctrlWI = menu.addSlider(TR('Width'), this._main._torusWidth, this.updateTorusWidth.bind(this), 0.01, 0.5, 0.01);
    // this.ctrlLE = menu.addSlider(TR('Length'), this._main._torusLength, this.updateTorusLength.bind(this), 0.2, 2.0, 0.01);
    // menu.addSlider(TR('Radial'), this._main._torusRadial, this.updateTorusRadial.bind(this), 3, 64, 1);
    // menu.addSlider(TR('Tubular'), this._main._torusTubular, this.updateTorusTubular.bind(this), 3, 256, 1);

    // this.ctrlValidate = menu.addButton(TR('Validate !'), this, 'validatePreview');
    // this.ctrlValidate.setVisibility(false);
    // this.ctrlDiscard = menu.addButton(TR('Discard !'), this, 'discardPreview');
    // this.ctrlDiscard.setVisibility(false);

init(guiParent) {
    // background fold
    var menu = this._menu = guiParent.addMenu(TR('backgroundTitle'));

    this._bg = this._main.getBackground();

    var types = ['Image', 'Environment', 'Ambient env'];
    menu.addCombobox('Type', this._bg._type, this.onBackgroundType.bind(this), types);
    this._ctrlBlur = menu.addSlider('Blur', this._bg._blur, this.onEnvBlur.bind(this), 0.0, 1.0, 0.01);
    this._ctrlBlur.setVisibility(this._bg._type === 1);

    menu.addTitle('Image');
    menu.addButton(TR('backgroundReset'), this, 'resetBackground');
    menu.addButton(TR('backgroundImport'), this, 'importBackground');
    menu.addCheckbox(TR('backgroundFill'), this._main.getBackground()._fill, this.updateFill.bind(this));
  }

init(guiParent) {
    // Pen tablet ui stuffs
    var menu = this._menu = guiParent.addMenu(TR('pressureTitle'));

    menu.addTitle(TR('pressureRadius'));
    menu.addSlider('', Tablet, 'radiusFactor', 0, 1, 0.01);

    menu.addTitle(TR('pressureIntensity'));
    menu.addSlider('', Tablet, 'intensityFactor', 0, 1, 0.01);
  }
}

init(guiParent) {
    var menu = this._menu = guiParent.addMenu(TR('sculptTitle'));
    menu.open();

    menu.addTitle(TR('sculptTool'));

    // sculpt tool
    var optTools = [];
    for (var i = 0, nbTools = Tools.length; i < nbTools; ++i) {
      if (Tools[i]) optTools[i] = TR(Tools[i].uiName);
    }
    this._ctrlSculpt = menu.addCombobox(TR('sculptTool'), this._sculptManager.getToolIndex(), this.onChangeTool.bind(this), optTools);

    GuiSculptingTools.initGuiTools(this._sculptManager, this._menu, this._main);

    this._ctrlTitleCommon = menu.addTitle(TR('sculptCommon'));
    // symmetry
    this._ctrlSymmetry = menu.addCheckbox(TR('sculptSymmetry'), this._sculptManager._symmetry, this.onSymmetryChange.bind(this));

// environments
    var optionEnvs = {};
    for (var i = 0, envs = ShaderPBR.environments, l = envs.length; i < l; ++i)
      optionEnvs[i] = envs[i].name;
    this._ctrlEnvTitle = menu.addTitle(TR('renderingEnvironment'));
    this._ctrlEnv = menu.addCombobox('', ShaderPBR.idEnv, this.onEnvironmentChanged.bind(this), optionEnvs);

    // matcap texture
    var optionMatcaps = {};
    for (var j = 0, mats = ShaderMatcap.matcaps, k = mats.length; j < k; ++j)
      optionMatcaps[j] = mats[j].name;
    this._ctrlMatcapTitle = menu.addTitle(TR('renderingMaterial'));
    this._ctrlMatcap = menu.addCombobox(TR('renderingMatcap'), 0, this.onMatcapChanged.bind(this), optionMatcaps);

    // matcap load
    this._ctrlImportMatcap = menu.addButton(TR('renderingImportMatcap'), this, 'importMatcap');

    // uv texture
    this._ctrlUV = menu.addButton(TR('renderingImportUV'), this, 'importTexture');

    this._ctrlExposure = menu.addSlider(TR('renderingExposure'), 1, this.onExposureChanged.bind(this), 0, 5, 0.001);
    this.onUpdateCtrlExposure();

    menu.addTitle(TR('renderingExtra'));
    this._ctrlTransparency = menu.addSlider(TR('renderingTransparency'), 0.0, this.onTransparencyChanged.bind(this), 0, 100, 1);

    // flat shading
    this._ctrlFlatShading = menu.addCheckbox(TR('renderingFlat'), false, this.onFlatShading.bind(this));

    // wireframe
    this._ctrlShowWireframe = menu.addCheckbox(TR('renderingWireframe'), false, this.onShowWireframe.bind(this));
    if (RenderData.ONLY_DRAW_ARRAYS)

// menu.addSlider(TR('Radial'), this._main._torusRadial, this.updateTorusRadial.bind(this), 3, 64, 1);
    // menu.addSlider(TR('Tubular'), this._main._torusTubular, this.updateTorusTubular.bind(this), 3, 256, 1);

    // this.ctrlValidate = menu.addButton(TR('Validate !'), this, 'validatePreview');
    // this.ctrlValidate.setVisibility(false);
    // this.ctrlDiscard = menu.addButton(TR('Discard !'), this, 'discardPreview');
    // this.ctrlDiscard.setVisibility(false);

    // selection stuffs
    menu.addTitle(TR('sceneSelection'));
    this._ctrlIsolate = menu.addCheckbox(TR('renderingIsolate'), false, this.showHide.bind(this));
    this._ctrlIsolate.setVisibility(false);
    this._ctrlMerge = menu.addButton(TR('sceneMerge'), this, 'merge');
    this._ctrlMerge.setVisibility(false);

    menu.addButton(TR('sceneDuplicate'), this, 'duplicateSelection');
    menu.addButton(TR('sceneDelete'), this, 'deleteSelection');

    // extra
    menu.addTitle(TR('renderingExtra'));
    menu.addCheckbox(TR('darkenUnselected'), ShaderBase.darkenUnselected, this.onDarkenUnselected.bind(this));
    menu.addCheckbox(TR('contourShow'), this._main._showContour, this.onShowContour.bind(this));
    menu.addCheckbox(TR('renderingGrid'), this._main._showGrid, this.onShowGrid.bind(this));
    menu.addCheckbox(TR('renderingSymmetryLine'), ShaderBase.showSymmetryLine, this.onShowSymmetryLine.bind(this));
    this._ctrlOffSym = menu.addSlider('SymOffset', 0.0, this.onOffsetSymmetry.bind(this), -1.0, 1.0, 0.001);
  }

// menu.addSlider(TR('Arc'), this._main._torusRadius, this.updateTorusRadius.bind(this), 0.01, Math.PI * 2, 0.001);
    // this.ctrlWI = menu.addSlider(TR('Width'), this._main._torusWidth, this.updateTorusWidth.bind(this), 0.01, 0.5, 0.01);
    // this.ctrlLE = menu.addSlider(TR('Length'), this._main._torusLength, this.updateTorusLength.bind(this), 0.2, 2.0, 0.01);
    // menu.addSlider(TR('Radial'), this._main._torusRadial, this.updateTorusRadial.bind(this), 3, 64, 1);
    // menu.addSlider(TR('Tubular'), this._main._torusTubular, this.updateTorusTubular.bind(this), 3, 256, 1);

    // this.ctrlValidate = menu.addButton(TR('Validate !'), this, 'validatePreview');
    // this.ctrlValidate.setVisibility(false);
    // this.ctrlDiscard = menu.addButton(TR('Discard !'), this, 'discardPreview');
    // this.ctrlDiscard.setVisibility(false);

    // selection stuffs
    menu.addTitle(TR('sceneSelection'));
    this._ctrlIsolate = menu.addCheckbox(TR('renderingIsolate'), false, this.showHide.bind(this));
    this._ctrlIsolate.setVisibility(false);
    this._ctrlMerge = menu.addButton(TR('sceneMerge'), this, 'merge');
    this._ctrlMerge.setVisibility(false);

    menu.addButton(TR('sceneDuplicate'), this, 'duplicateSelection');
    menu.addButton(TR('sceneDelete'), this, 'deleteSelection');

    // extra
    menu.addTitle(TR('renderingExtra'));
    menu.addCheckbox(TR('darkenUnselected'), ShaderBase.darkenUnselected, this.onDarkenUnselected.bind(this));
    menu.addCheckbox(TR('contourShow'), this._main._showContour, this.onShowContour.bind(this));
    menu.addCheckbox(TR('renderingGrid'), this._main._showGrid, this.onShowGrid.bind(this));
    menu.addCheckbox(TR('renderingSymmetryLine'), ShaderBase.showSymmetryLine, this.onShowSymmetryLine.bind(this));
    this._ctrlOffSym = menu.addSlider('SymOffset', 0.0, this.onOffsetSymmetry.bind(this), -1.0, 1.0, 0.001);
  }

menu.addTitle(TR('multiresTitle'));
    this._ctrlResolution = menu.addSlider(TR('multiresResolution'), 1, this.onResolutionChanged.bind(this), 1, 1, 1);
    var dual = menu.addDualButton(TR('multiresReverse'), TR('multiresSubdivide'), this, this, 'reverse', 'subdivide');
    this._ctrlReverse = dual[0];
    this._ctrlSubdivide = dual[1];
    dual = this._dualButtonDel = menu.addDualButton(TR('multiresDelLower'), TR('multiresDelHigher'), this, this, 'deleteLower', 'deleteHigher');
    this._ctrlDelLower = dual[0];
    this._ctrlDelHigher = dual[1];
    this._ctrlDelLower.domButton.style.background = this._ctrlDelHigher.domButton.style.background = 'rgba(230,53,59,0.35)';

    var cbResolution = this.remeshResolution.bind(this);

    // surface nets remeshing
    menu.addTitle(TR('remeshTitle'));
    this._ctrlRes1 = menu.addSlider(TR('remeshResolution'), Remesh.RESOLUTION, cbResolution, 8, 400, 1);
    menu.addCheckbox(TR('remeshBlock'), Remesh, 'BLOCK');
    menu.addButton(TR('remeshRemesh'), this, 'remesh');

    // marching cube remeshing
    menu.addTitle(TR('remeshTitleMC'));
    this._ctrlRes2 = menu.addSlider(TR('remeshResolution'), Remesh.RESOLUTION, cbResolution, 8, 400, 1);
    menu.addCheckbox(TR('remeshSmoothingMC'), Remesh, 'SMOOTHING');
    menu.addButton(TR('remeshRemeshMC'), this, 'remeshMC');

    // dynamic
    menu.addTitle(TR('dynamicTitle'));
    this._ctrlDynamic = menu.addCheckbox(TR('dynamicActivated'), false, this.dynamicToggleActivate.bind(this));
    this._ctrlDynSubd = menu.addSlider(TR('dynamicSubdivision'), MeshDynamic, 'SUBDIVISION_FACTOR', 0, 100, 1);
    this._ctrlDynDec = menu.addSlider(TR('dynamicDecimation'), MeshDynamic, 'DECIMATION_FACTOR', 0, 100, 1);
    this._ctrlDynLin = menu.addCheckbox(TR('dynamicLinear'), MeshDynamic, 'LINEAR');
    this.updateDynamicVisibility(false);
  }

init(guiParent) {
    var menu = this._menu = guiParent.addMenu(TR('stateTitle'));
    menu.addButton(TR('stateUndo'), this, 'onUndo', 'CTRL+Z');
    menu.addButton(TR('stateRedo'), this, 'onRedo', 'CTRL+Y');
    menu.addTitle(TR('stateMaxStack'));
    var states = this._main.getStateManager();
    menu.addSlider('', StateManager.STACK_LENGTH, states.setNewMaxStack.bind(states), 3, 50, 1);
  }

init(guiParent) {
    this.domVerts = document.createElement('ul');
    this.domVerts.innerHTML = TR('meshNbVertices');

    this.domFaces = document.createElement('ul');
    this.domFaces.innerHTML = TR('meshNbFaces');

    this.domUl = document.createElement('span');
    this.domUl.appendChild(this.domVerts);
    this.domUl.appendChild(this.domFaces);
    var style = this.domUl.style;
    style.cursor = 'default';
    if (style.float === undefined) style.cssFloat = 'right';
    else style.float = 'right';

    guiParent.domTopbar.appendChild(this.domUl);
  }