How to do animated buttons on AirConsole controller?

Question

How to do animated buttons on AirConsole controller?

107 Views Asked by Arkade At 04 May 2020 at 12:30

We use animated GIF buttons on our controls and it was working fine until we got to wider user testing where some users had iPhones (not Androids that all had previously). They were using the AirConsole app to control in case that's relevant. The animated GIFs don't seem to animate there. Obviously we're looking for an answer that works on all AirConsole's supported platforms. (Animated GIFs seemed like a lowest common denominator type answer!)

Any ideas / help? Do we need to do something specific or encode a particular way?

Otherwise (if it isn't supported), I guess we'll have to see if we can detect controller platform (browser info in JS?) and provide an alternative. (I'd guess probably JS swapping image frames. Otherwise entirely back to the drawing board :( ) Please suggest those alternatives if you know them!

We're writing the HTML and JavaScript by hand (not using a generator). Here are what I hope are all the appropriate bits.

  .main-button{
      position: absolute;
      top: 35%;
      width: 18%;
      height: 30%;
      background-size: contain;
      background-repeat: no-repeat;
  }

  #interact-button{
      background-image: url("Buttons/AnimatedButton-PickUpPutDown01.gif");
      left: 30%;
      top:25%;
  }

  <div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>

Here's an example GIF we're using. Let me know if there's anything else that might help and thanks in advance!

Original Q&A

There are 1 best solutions below

**Daniel** · Answer 1 · 2020-05-04T15:27:52.080000

I tried showing the GIF on an old iPhone (Running iOS 10.3.3) in the AirConsole App, Chrome and Safari browsers (Using the AirConsole Simulator). They all seem to show the animated GIF as expected:

Here is the code I used in controller.html:

<html>
<head>
  <script src='https://www.airconsole.com/api/airconsole-1.7.0.js'></script>
  <script>
    let airconsole;

    /**
     * Sets up the communication to the screen.
     */
    function init() {
      airconsole = new AirConsole({'orientation': 'portrait'});
    }
  </script>
  <style type='text/css'>
    .main-button{
      position: absolute;
      top: 35%;
      width: 18%;
      height: 30%;
      background-size: contain;
      background-repeat: no-repeat;
    }

    #interact-button{
      background-image: url("Images/support/AnimatedButton-PickUpPutDown01.gif");
      left: 30%;
      top:25%;
    }
  </style>
</head>
<body onload='init()'>
  <div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
</body>
</html>

What version of iOS are you having the issue on? I suggest that you try the basic controller code I show to see if it changes anything.

How to do animated buttons on AirConsole controller?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANIMATED-GIF

Related Questions in AIRCONSOLE

Trending Questions

Popular # Hahtags

Popular Questions