Ankündigung

Einklappen
Keine Ankündigung bisher.

GUI-Menü in babylon.js dynamisch schreiben lassen. Eventuell mit string to object?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • GUI-Menü in babylon.js dynamisch schreiben lassen. Eventuell mit string to object?

    Hallo,

    Ich arbeite derzeit in der GUI von babylon.js und versuche ein Menüelement dynamisch zu befüllen. Der Code zu diesem GUI-Objekt sieht zunächst folgendermaßen aus.
    PHP-Code:
    var createMenu = [{
                            
    text'Sponsor A',
                            
    value1,
                            
    selectedfalse
                        
    }, {
                            
    text'Sponsor B',
                            
    value2,
                            
    selectedfalse
                        
    }, {
                            
    text'none',
                            
    value0,
                            
    selectedtrue
                        
    }, ];


    var 
    select BABYLON.GUI.CreateSelect(
                        
    createMenu, {
                            
    label'Select :',
                            
    labelWidth70,
                            
    itemWidth140,
                            
    itemHeight32,
                            
    fontSize16,
                            
    thickness1,
                            
    colors: {
                                
    background'#222',
                                
    text'white',
                                
    border'#448D00',
                                
    highlight'#444'
                            
    },
                            
    buttonText'...',
                            
    onChange: [ () => {
                                
    //alert( select.value )
                                
    setSponsor select.value;
                                
    body_placeAd_AirDuctsetSponsor )
                            } ]
                        }
                    );
                    
    select.verticalAlignment BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                    
    select.isVertical false;
                    
    select.horizontalAlignment BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                    
    //alert(decalPathH640[setSponsor][1])
                    
    ui.addControlselect ); 
    Das funktioniert auch soweit. Nun will ich allerdings die Werte aus einen Array rausholen und mir die Einträge ins Menü schreiben lassen. (Arraygröße ändert sich!)
    PHP-Code:
    var decalPathH640 = [];
    decalPathH640] = [ "none""../../images/game/advertising/ads_free_spot.gif" ];
    decalPathH640] = [ "Marlboro""../../images/game/advertising/marlboro.gif" ];
    decalPathH640] = [ "Samsung""../../images/game/advertising/samsung.gif" ];

    //Create Dropdownmenu to choose Sponsors.        
                    
    var createMenu;
                    var 
    entry "";
                    var 
    createMenuEntries = [];
                    var 
    arrayLength decalPathH640.length;

                    for (var 
    i=0i<arrayLengthi++) {
                            
    createMenuEntries] = {
                                
    textdecalPathH640][ ],
                                
    valuei,
                                
    selectedfalse
                            
    }
                            if(
    entry == ""){
                                
    entry createMenuEntries];
                            }else if(
    entry != "" && != arrayLength-1){
                                
    entry entrycreateMenuEntries], + " ";
                                
    //alert("wird aufgerufen");
                            
    }
                            if(
    == arrayLength-1){
                                
    createMenu = [entrycreateMenuEntries]];
                            }
                    }

    //Babylon GUI.
    var select BABYLON.GUI.CreateSelect(
                        
    createMenu, {
                            
    label'Select :',
                            
    labelWidth70,
                            
    itemWidth140,
    .................
    ................. 
    Hier bekomme ich nur den ersten und den letzten Menüpunkt.

    Ich dachte nun daran, einen string in ein Objekt zu konvertieren, da ich den String einfacher befüllt bekomme. Allerdings will auch das nicht klappen. Hier der erste Testaufbau:
    PHP-Code:
    var createMenu "[{text: 'Sponsor A', value: 1, selected: false}, {text: 'Sponsor B', value: 2, selected: falsetext: 'none' ,value: 0, selected: true}, ]";
    //var createMenu = "[{text: 'Sponsor A', value: 1, selected: false}]";
    var createMenuObj JSON.parse(createMenu);

    //Babylon GUI.
    var select BABYLON.GUI.CreateSelect(
                        
    createMenuObj, {
                            
    label'Select :',
                            
    labelWidth70,
                            
    itemWidth140,
    .................
    ................. 
    Hat jemand einen Tip für mich?

  • #2
    Gültige JSON-Daten verwenden. Deine sind kaputt. Im Browser kommt:

    SyntaxError: JSON.parse: expected property name or '}' at line 1 column 3 of the JSON data

    Kommentar


    • #3
      Manchmal ist der Fehler schon so offensichtlich, dass man sich schon schämt, den Code öffentlich gemacht zu haben.

      Aus
      Code:
      var createMenu = "[{text: 'Sponsor A', value: 1, selected: false}]";
      var createMenuObj = JSON.parse(createMenu);
      wird
      Code:
      var createMenu = '[{"text": "Sponsor A", "value": 1, "selected": false}]';
      var createMenuObj = JSON.parse(createMenu);
      und schon klappt es.

      Das Ganze sieht nun so aus:
      Code:
      //Path Array from 640x640 advertising images.
      var decalPathH640 = [];
      decalPathH640[ 0 ] = [ "none", "../../images/game/advertising/ads_free_spot.gif" ];
      decalPathH640[ 1 ] = [ "Marlboro", "../../images/game/advertising/marlboro.gif" ];
      decalPathH640[ 2 ] = [ "Samsung", "../../images/game/advertising/samsung.gif" ];
      
      //Create Dropdownmenu to choose Sponsors.
                      var menuText = '{"text": "';
                      var menuValue = '", "value": "';
                      var menuSelcetedFalse = '", "selected": false}';
                      var menuSelcetedTrue = '", "selected": true}';
                      var createMenu;
                      var createMenuObj;
                      var arrayLength = decalPathH640.length;
      
                      for (var i=0; i<arrayLength; i++) {
      
                              if(i == 0){
                                  createMenu = menuText + decalPathH640[ 0 ][ 0 ] +  menuValue + i + menuSelcetedTrue;
                              }else{
                                  createMenu = createMenu + ", " + menuText + decalPathH640[ i ][ 0 ] +  menuValue + i + menuSelcetedFalse;
                              }
                      }
                      createMenuObj = JSON.parse("[" + createMenu + "]");
      
      
      
      
      var select = BABYLON.GUI.CreateSelect(
                          createMenuObj, {
                              label: 'Select :',
                              labelWidth: 70,
                              itemWidth: 140,
                              itemHeight: 32,
                              fontSize: 16,
                              thickness: 1,
                              colors: {
                                  background: '#222',
                                  text: 'white',
                                  border: '#448D00',
                                  highlight: '#444'
                              },
                              buttonText: '...',
                              onChange: [ () => {
                                  //alert( select.value )
                                  setSponsor = select.value;
                                  body_placeAd_AirDuct( setSponsor )
                              } ]
                          }
                      );
                      select.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                      select.isVertical = false;
                      select.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                      //alert(decalPathH640[setSponsor][1])
                      ui.addControl( select );
      Problem ist somit gelöst. Danke für den Hinweis auf das Offensichtliche.

      Kommentar


      • #4
        Du bist ganz schön umständlich ...

        HTML-Code:
        var decalPathH640 = [];
        decalPathH640[0] = ["none", "../../images/game/advertising/ads_free_spot.gif"];
        decalPathH640[1] = ["Marlboro", "../../images/game/advertising/marlboro.gif"];
        decalPathH640[2] = ["Samsung", "../../images/game/advertising/samsung.gif"];
        var createMenuObj = [];
        decalPathH640.forEach( function (item, index){
          createMenuObj.push(
            {text: item[0], value: index , selected: index==0}
          )
        });
        oder benutze map:

        HTML-Code:
        var createMenuObj = decalPathH640.map((v, i) =>
          ({text: v[0], value: i , selected: i==0}));

        Kommentar


        • #5
          Danke, probier ich bei Gelegenheit aus.

          Kommentar

          Lädt...
          X