Combo Button and physical button

[cristallo]

I am using Combo button inside an svg hierarchy so I cannot use use onactivate event because it does not fire.

It looks like a well known bug.

square-buttons-sometimes-no-action

I am using onclick as workaround and it is working fine but I have noticed that the Combo button is not linked anymore with the nearest physical button.

How can fix this issue?

How can I trigger an action when right-up or right-down physical buttons are pressed?

I've already tried to use document.onkeypress event but it does not fire when right-up or right-down are pressed. It fires properly only when back button is pressed.

[thaberkern]

Same for me. Anyone got this working?

[SunsetRunner]

I had a similar challenge. Check out this thread .... everything you need is there ...

https://community.fitbit.com/t5/SDK-Development/Physical-Button-Exit-App/m-p/2375320

[thaberkern]

Mhm. In my case only the back key is fired as an event. Never got a down or up for the right buttons 😞

[SunsetRunner]

Can you post up your document.onkeypress code?

[thaberkern]

At the moment it is only:

document.onkeypress = function(e) {

    console.log(e.key);

}

Maybe the reason is the views library of @gaperton causing the problem!? Will check is with a "naked" app

[thaberkern]

Yes in a naked app without content there is no problems with the keypress event. It is fired and handled. Didn't get why this is a problem in a more complex app with more markup and views

@gaperton Maybe you can support?

[SunsetRunner]

I am using Ionic Views and have it working .....

In your application class you should have

 onMount(){
   document.onkeypress = this.onKeyPress;
 }


    onKeyPress = e => {
        e.preventDefault();
        if( e.key === 'up' ) {
          console.log("Up");
        }
        if( e.key === 'down' ){
           console.log("Down");
        }
        if( e.key === 'back') {
              console.log("Down");
               this.unmount();
               me.exit();
        } 
    }

Hope the above helps.

[gaperton]

@SunsetRunner gave the right answer. Yes, you should do all the initialization stuff inside of the appropriate `onMount()` method (Application's in this case).

Here's how the same code in my Velocity app looks like. LoadingScreen calls its callback when the GPS is connected, and then you can switch between two screens.

class Velocity extends Application {
  radar = new RadarScreen();
  history = new HistoryScreen();
  
  onMount(){
    this.screen = new LoadingScreen(() => {
      gpsData.onChange = () => this.render();
      document.onkeypress = this.switchScreens;
      Application.switchTo( 'radar' );
    });
  }

  switchScreens = ({ key }) => {
    if( key === 'down'){
      this.screen = this.screen === this.radar ? this.history : this.radar;
    }
  }
}

Velocity.start();

[ndown]

The answers are not very helpful. 

Ive tried everything around onkeypress until i was sick of it.

small workaround that works nicely:

this._btnDone.onkeydown = function(evt){
me.exit();
}

var exitApp = function(){ me.exit() };
//triggered when physical button clicked
this._btnDone.onkeydown = function(evt){
  exitApp()
}

//triggered when combo button clicked
this._btnDone.onclick = function(evt){ 
  exitApp() 
}

I hope this helps anyone who is having a hard time around this event.

[gurumukhi]

I noticed that combo buttons have issue with getting triggered along with with physical buttons clicks when I had displayed combo buttons on few screens and not on others. While the combo buttons were included in a svg which was being hidden using svgScreenName.style.display="none", the problem started occurring. I simply moved the buttons outside and used buttonName.visibility="hidden" to hide these buttons and then I am no longer facing this issue. You can see related source code at https://github.com/gurumukhi/fitbit-yoga-app/blob/master/app/index.js