♪
I. Prérequis▲
Android : Si vous débutez sur le développement Android, je vous conseille très fortement de lire tous les guides de démarrage sur le site des développeurs Android.
Wireless Display (ou WiDi) : Cette technologie de diffusion de flux audio et vidéo développée par Intel est une alternative aux technologies Miracast du consortium Wi-Fi Alliance, et AirPlay d'Apple. Cependant, la technologie WiDi permet aux appareils le supportant de communiquer avec les récepteurs Miracast. Finalement le WiDi se veut être une « super-surcouche » à Miracast. Afin d'en apprendre plus sur le WiDi, je vous conseille de lire cette présentation par Pierre S. : Tout savoir sur le WiDi.
Enfin, si vous voulez pousser encore plus loin vos connaissances sur le Wireless Display pour Android, vous pouvez consulter la vidéo de la conférence au Paris Android User Group sur la présentation du WiDi pour Android par Xavier Hallade (slides ici).
II. MiraSlide : Une application de Présentations▲
Code source du projet MiraSlide
Page Google Play de l'application
Le but de cette application est de répondre à un besoin simple : les conférenciers sont soit encombrés, soit esclaves du matériel prêté, soit les deux. Ici, le Wireless Display, associé à un appareil plus léger qu'un ordinateur et pouvant donc être utilisé en télécommande, nous permettrait de diffuser et commander les diapositives depuis son téléphone/tablette, en ayant en plus dans la main les informations supplémentaires que nous apporte un ordinateur (chronomètre, notes…).
Voici donc le but très simple de MiraSlide :
- Vous sélectionnez votre fichier de présentation, vous connectez votre appareil à un écran récepteur Wireless Display puis vous lancez la présentation.
- Sur l'écran récepteur, la première page de votre présentation s'affiche.
- L'écran de votre appareil vous propose alors un chronomètre, ainsi qu'une télécommande affichant la diapositive courante, les notes éventuelles, et des boutons précédent / suivant.
Maintenant que nous avons une idée plus précise de l'application que nous voulons développer, nous allons nous pencher sur les API.
III. Utiliser le WiDi dans Android▲
Pour ceux qui n'auraient pas bien lu les prérequis, le WiDi (et plus largement la notion d'écran externe) apparaît dans le framework d'Android avec l'API 17 (Android 4.2.2). Deux éléments essentiels sont alors créés :
- Le Display Managerva être l'interface permettant à l'application de connaître les écrans disponibles et d'interagir avec.
- Une Présentation est une vue similaire à un dialogue (dont elle est étendue), mais projetée sur un Display donné. Une des notions les plus importantes à comprendre du fait que la Présentation est une extension d'une Dialog est qu'elle est forcément attachée à une Activity. Ainsi, si cette dernière est mise en pause (si elle n'est plus visible à l'écran, en gros), alors la Présentation n'apparaîtra plus sur le Display associé (et le mode d'écran clone par défaut s'activera). Si vous retournez ensuite à votre Activity, la Présentation reviendra s'afficher sur le Display.
L'Implémentation est finalement très simple.
III-A. La récupération du Display▲
Elle peut se faire de deux façons. Ou bien en utilisant leMediaRouter introduit avec l'API 16 :
Sélectionnez
MediaRouter mediaRouter = (MediaRouter) context.getSystemService(Context.MEDIA_ROUTER_SERVICE);
MediaRouter.RouteInfo route = mediaRouter.getSelectedRoute();
 
if (route != null) {
    Display presentationDisplay = route.getPresentationDisplay();
 
    if (presentationDisplay != null) {
 
        // Your code...
 
    }Ou bien en utilisant le Le Display Manager :
Sélectionnez
DisplayManager displayManager = (DisplayManager) mActivity.getSystemService(Context.DISPLAY_SERVICE);<br/><font color="#008200">// Selecting DISPLAY_CATEGORY_PRESENTATION prevents the DisplayManager from returning inapropriate Display,<br/><font color="#008200">// like the own device display.<br/>Display[] displays = displayManager.getDisplays(DisplayManager.DISPLAY_CATEGORY_PRESENTATION);<br/> <br/><b><font color="#006699">if</b> (displays.length == <font color="#009900">0) {<br/> <br/>    <font color="#008200">// If there is no external display connected, we launch the Display settings. We could launch<br/>    <font color="#008200">// the Wi-Fi display settings with ACTION_Wi-Fi_DISPLAY_SETTINGS but it is a hidden static value<br/>    <font color="#008200">// because there may be not such settings (if the device does not have Wireless display but<br/><font color="#53575e">    </font><font color="#008200">// have API >= 17).</font><br/><font color="#53575e">    </font>startActivity(<b><font color="#006699">new</font></b><font color="#53575e"> </font>Intent(Settings.ACTION_DISPLAY_SETTINGS));<br/><font color="#53575e"> </font><br/>} <b><font color="#006699">else</font></b><font color="#53575e"> </font>{<br/><font color="#53575e"> </font><br/><font color="#53575e">    </font><font color="#008200">// We should show a DialogBox to let the user select the display if there is more than one but</font><br/><font color="#53575e">    </font><font color="#008200">// for this example we only choose the first one</font><br/><font color="#53575e">    </font>Display display = displays[<font color="#009900">0</font>];<br/><font color="#53575e"> </font><br/>}</colonne>
</ligne>
</tableau>
</section>
<section id="III-B">
<title>La création et l'affichage de la Presentation</title>
<signet id="3.2"/>
<paragraph>Ici non plus, rien de très compliqué. La <b>Présentation</b> n'a besoin que de l'<b>Activity</b> parente et du <b>Display </b>où être affiché pour être créée. Ensuite, la méthode <i><b>show()</b></i> affiche la <b>Présentation </b>sur le <b>Display</b>. Comme une <b>Dialog</b>, la <b>Présentation </b>comprend une méthode <i><b>setContentView() </b></i>grâce à laquelle vous pourrez définir la vue à afficher : </paragraph>
<code langage="java"><![CDATA[private void showPresentation() {
    mPresentation = new MyPresentation(this, mDisplay);
    mPresentation.show();
}
 
06private class MyPresentation extends Presentation {
 
    /* constructors ... */
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View v = getLayoutInflater().inflate(R.layout.presentation, null);
        setContentView(v);
    }
}III-B. Ajout de listeners▲
Pour rendre votre système plus fiable, vous pouvez rajouter des listeners au DisplayManager afin d'être prévenu lorsque des Display sont ajoutés ou retirés. Cela est particulièrement pratique pour éviter à une Présentation de continuer à fonctionner alors que le Display qui lui est associé a été déconnecté :
Sélectionnez
mDisplayManager.registerDisplayListener(new DisplayListener() {
 
    @Override
    public void onDisplayRemoved(int displayId) {
        // Stop presentation ...
        // Show a message to the user to reconnect the display
 
    }
 
    @Override
    public void onDisplayChanged(int displayId) {
        // Something happend. You should check if everything is ok before continuing
 
    }
 
    @Override
    public void onDisplayAdded(int displayId) {
        // If you were waiting for a display, maybe you should use it !
 
    }, null);IV. Implémentation du code dans MiraSlide▲
Nous n'allons bien évidemment pas revenir sur tout le code de MiraSlide, ce serait long et inutile, car finalement le code concernant le Wireless Display est assez court face au reste du code. Nous allons donc nous focaliser sur les points suivants.
Cependant, je vais rapidement expliquer la structure générale du code qui se divise en quatre éléments principaux.
La MainActivity est l'unique Activity de l'application. Ainsi, si la Présentation est en cours et que l'on se déplace entre les différentes vues, la Présentation ne s'arrête pas.
- Le SelectionFragment est la première vue, qui va permettre à l'utilisateur de sélectionner le fichier (PDF) contenant les diapositives, ainsi que le Display sur lequel afficher la Présentation. Enfin, il permet de lancer ladite Présentation.
- Le ControllerFragment est la vue s'affichant lorsqu'on lance la Présentation . Elle comprend un chronomètre, la diapositive courante ainsi que des boutons précédent et suivant.
- Le PdfViewerPresentation est la vue Présentation gérant ce qui est affiché sur le Display . Il comprend le moteur permettant de récupérer et d'afficher les images des diapositives demandées par le ControllerFragment.
- Le ControllerFragment est la vue Présentation gérant ce qui est affiché sur le Display . Il comprend le moteur permettant de récupérer et d'afficher les images des slides demandés par le ControllerFragment .
IV-A. La récupération du Display▲
- À la création du SelectionFragment, on récupère le DisplayManager et on déclare les listeners.
- Chaque fois que le SelectionFragment est lancé ou relancé (dans le onResume ), on va vérifier l'état des Display s. S'il n'y en a aucun, on propose d'afficher les paramètres d'affichages. S'il y en a un seul, on le sélectionne automatiquement, et s'il y en a plus, on propose de sélectionner le Display voulu.
Voici le code associé :
Sélectionnez
public class SelectionFragment extends Fragment implements OnClickListener, DisplayListener {
 
   // ...
 
    // The display manager is the object to get information about the different displays
    private DisplayManager mDisplayManager;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        // ...
 
        // We get the display manager to get info about the display. We also register to any change
        // about the (dis)connection of the displays.
        mDisplayManager = (DisplayManager) mActivity.getSystemService(Context.DISPLAY_SERVICE);
        mDisplayManager.registerDisplayListener(this, null);
    }
    
    @Override
    public void onResume() {
        super.onResume();
 
        // On resume, we check the state of each buttons.
        checkLaunchable(getView());
    }
 
    // We check the selection of the pdf file and the display, and we update the color of the buttons and we update
    // if the "Launch Projection" button should be enabled
    // @param v : the global view of the fragment
    private void checkLaunchable(View v) {
        checkDisplay((TextView) v.findViewById(R.id.fragment_selection_button_selectwirelessdisplay));
 
        if (mActivity.getDislay() != null) {
            v.findViewById(R.id.fragment_selection_button_selectwirelessdisplay).setBackgroundResource(R.drawable.button_green);
        } else {
            v.findViewById(R.id.fragment_selection_button_selectwirelessdisplay).setBackgroundResource(R.drawable.button_red);
        }
 
        // ...
 
    }
 
    // We check the state of the external displays, update the text of the display button, and if there is only
    // one external display, we auto select it
    private void checkDisplay(TextView displayButton) {
        Display[] displays = mDisplayManager.getDisplays(DisplayManager.DISPLAY_CATEGORY_PRESENTATION);
 
        if (displays.length > 1 && mActivity.getDislay() == null) {
            displayButton.setText("Select a wireless display");
        } else if (displays.length == 1) {
            mActivity.setDisplay(displays[0]);
            displayButton.setText("Display selected " + displays[0].getName());
        } else {
            mActivity.setDisplay(null);
            displayButton.setText("Connect to a wireless display");
        }
    }
 
    // Methods called when a display is added or removed. We change the button state if we add or remove a
    // display, and we stop the presentation if there is a display removed.
 
    @Override
    public void onDisplayAdded(int displayId) {
        checkLaunchable(getView());
    }
 
    @Override
    public void onDisplayChanged(int displayId) {
    }
 
    @Override
    public void onDisplayRemoved(int displayId) {
        if (mActivity.getDislay() != null && displayId == mActivity.getDislay().getDisplayId()) {
            mActivity.stopPresentation();
            checkLaunchable(getView());
        }
    }
}IV-B. La sélection du Display▲
Comme décrit plus haut, le bouton de sélection du Display va évoluer en fonction des Display connectés à l'appareil :
- Si aucun Display n'est connecté, le bouton affiche Connect to a wireless display . Si l'utilisateur clique dessus, le code suivant est appelé. La fenêtre des paramètres d'affichage du téléphone est alors affichée. Si l'appareil est compatible Wireless Display, un bouton Screen mirroring , ou Wireless Display ou une traduction devrait apparaître (cf image ci-dessous). En cliquant dessus, la liste des appareils visibles compatibles Miracast apparaît. L'utilisateur n'a plus qu'à cliquer dessus pour s'y connecter.
Sélectionnez
if (displays.length == 0) {
    // If there is no external display connected, we launch the Display settings. We could launch the Wi-Fi display
    // settings with ACTION_Wi-Fi_DISPLAY_SETTINGS but it is a hidden static value because there may be not such settings
    // (if the device does not have Wireless display but have API >= 17).
    startActivity(new Intent(Settings.ACTION_DISPLAY_SETTINGS));
}
- Si un seul Display est connecté, ou si un Display a déjà été sélectionné, le bouton affiche Display selected NOM_DU_DISPLAY . Si l'utilisateur clique dessus, le même code que lors du cas où plusieurs Display s sont connectés est exécuté.
- Si plusieurs Display s sont connectés, le bouton affiche Select a wireless display . Si l'utilisateur clique dessus, le code suivant est appelé. Une Dialog box s'ouvre, listant la liste des Display s disponibles. Si l'utilisateur clique sur un des Display s, ce dernier est alors sélectionné et on se retrouve dans le cas précédent.
Sélectionnez
// If there is one or more external display, we show a dialog box with the list of the display.
// The user can select the display he wants, or close the dialog.
final ArrayAdapter arrayAdapter = new ArrayAdapter(mActivity, android.R.layout.select_dialog_singlechoice);
for (int i = 0; i < displays.length; i++) {
    arrayAdapter.add(displays[i].getName());
}
 
 AlertDialog.Builder builder = new AlertDialog.Builder(mActivity).setIcon(R.drawable.ic_launcher).setTitle("Select a display")
        .setNegativeButton("cancel", null).setAdapter(arrayAdapter, new DialogInterface.OnClickListener() { 
 
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // When the user choose a display through the dialog, we set it in the parent Activity and update
                // the state of the buttons.
                mActivity.setDisplay(displays[which]);
                checkLaunchable(getView());
            }
});
builder.show();IV-C. La création et l'affichage de la Présentation▲
Lorsque le Display est sélectionné, ainsi qu'un fichier PDF, le bouton Launch Projection est activé. Lorsque l'utilisateur clique dessus, la Présentation est créée et affichée. On bascule alors l'utilisateur sur la vue Controller . Voici le code exécuté :
Sélectionnez
// SelectionFragment.java
 
// ...
 
@Override
public void onClick(View v) {
    if (v.getId() == R.id.fragment_selection_button_launchprojection) {
        // On click on the "launch projection" button, we... launch the projection
        mActivity.launchPresentation();
 
}Sélectionnez
// MainActivity.java
 
// ...
 
// Set the presentation (created in the selection fragment). This method creates listeners to control the visibility of the controller fragment and if the
// mShowHideControllerActionBarButton should be enabled. Then it shows the presentation.
//
// @param presentation : the presentation to show
//
public void launchPresentation() {
    mPresentation = new PdfViewerPresentation(this, mDisplay, mPdfPath);
 
    mPresentation.setOnShowListener(new OnShowListener() {
 
        @Override
        public void onShow(DialogInterface dialog) {
 
            showHideController(true);
            enableShowHideControllerActionBarButton(true);
            mControllerFragment.notifyViewPager();
        }
    });
    mPresentation.setOnDismissListener(new OnDismissListener() {
 
        @Override
        public void onDismiss(DialogInterface dialog) {
            showHideController(false);
            enableShowHideControllerActionBarButton(false);
        }
    });
 
    mPresentation.show();
}L'initialisation de la Présentation est très simple, mais le code peut paraître un peu compliqué. Cela est dû à la préparation du PDF et de son affichage. Ce qu'il faut retenir est que l'initialisation se fait dans le constructeur, et que la création de la vue à afficher, et l'affichage de la première diapositive se fait dans le OnCreate(Bundle) , et est appliqué grâce à la méthode setContentView(View) . Voici le code très simplifié :
Sélectionnez
// PdfViewerPresentation.java
 
// ...
 
// Constructor. It creates the Presentation, then load the display info and the Pdf to show
public PdfViewerPresentation(Context context, Display display, String pdfFilePath) {
    super(context, display);
    mPdfFilePath = pdfFilePath;
 
    // ...
}
 
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
 
    createContentView();
 
    showPage();
}
 
// Create the imageView to show the pdf pages Bitmaps
private void createContentView() {
    mImageView = (ImageView) getLayoutInflater().inflate(R.layout.presentation_main, null);
    setContentView(mImageView);
}
 
// Show the current page on the Presentation view
private void showPage() {
    mImageView.setImageBitmap(getPage(mPage));
}
 
// return the Bitmap of the pdf specified page
public Bitmap getPage(int page) {
     
    // ...
}IV-D. Le contrôle de la Présentation▲
Une fois la Présentation lancée, l'utilisateur peut la contrôler grâce au ControllerFragment . Ce dernier comprend un ViewPager qui affiche les diapositives du PDF. Lorsque l'utilisateur change de diapositive (soit en faisant glisser, soit en appuyant sur les boutons Précédent et Suivant ), le ControllerFragment prévient l' Activity parente de la nouvelle diapositive sélectionnée, et l' Activity fait remonter l'information à la Presentation afin qu'elle se mette à jour. Voici le code correspondant :
Sélectionnez
// ControllerFragment.java
 
// ...
 
// We create the viewpager which shows the pages of the pdf file. If the user changes the slide, the listeners
// updates tell the parent Activity to change the image in the presentation.
//
// @param v : the fragment view
//
private void createViewPager(View v) {
    mSlidesPagerAdapter = new SlidesPagerAdapter(((FragmentActivity) getActivity()).getSupportFragmentManager());
    mSlidesViewPager = (ViewPager) v.findViewById(R.id.fragment_controller_pager);
    mSlidesViewPager.setAdapter(mSlidesPagerAdapter);
    mSlidesViewPager.setOnPageChangeListener(new SimpleOnPageChangeListener() {
 
        @Override
        public void onPageSelected(int page) {
            ((MainActivity) getActivity()).getPresentation().moveTo(page);
        }
    });
}
 
@Override
public void onClick(View v) {
if (v.getId() == R.id.fragment_controller_button_pageprev) {
    // On click on the prev button, we move the viewpager one slide back (which will move the presentation slide as well)
    mSlidesViewPager.setCurrentItem(mSlidesViewPager.getCurrentItem() - 1);
 
} else if (v.getId() == R.id.fragment_controller_button_pagenext) {
    // On click on the next button, we move the viewpager one slide next (which will move the presentation slide as well)
    mSlidesViewPager.setCurrentItem(mSlidesViewPager.getCurrentItem() + 1);
}Sélectionnez
// MainActivity.java
 
// ...
 
// return the Presentation if it has been created. A presentation needs a display and a pdf file
public PdfViewerPresentation getPresentation() {
    return mPresentation;
}Sélectionnez
// PdfViewerPresentation.java
 
// ...
 
// Move the presentation to the page 'page'
public void moveTo(int page) {
    if (page >= 0 && page < getPageCount()) {
        mPage = page;
        showPage();
    }
}
 
// Show the current page on the Presentation view
private void showPage() {
    mImageView.setImageBitmap(getPage(mPage));
}
 
// return the Bitmap of the pdf specified page
public Bitmap getPage(int page) {
     
    // ...
}V. Conclusion▲
Développer une application exploitant les écrans externes n'est vraiment pas compliqué sous Android. Le framework est simple et fonctionne bien. Cependant, l'application développée, malgré son potentiel, est très loin de repousser le WiDi dans ses retranchements, comme pourrait le faire une application de jeu 3D, ou de streaming vidéo. Enfin, il existe une partie de l'API sur le Wireless Display qui est actuellement cachée dans le code Android et non disponible dans le SDK. Cette API permet de contrôler soi-même la découverte et la connexion aux écrans externes. L'exploitation de cette API est donc dangereuse, car elle peut évoluer sans prévenir ou bien ne pas fonctionner comme espéré d'un appareil à un autre. Cependant, si cela est bien fait, l'exploitation de cette API peut simplifier grandement l'utilisation de l'application par l'utilisateur.
VI. Sources▲
présentation du WiDi pour Android par Xavier Hallade
le site de développement Android
VII. Remerciements▲
Merci à l'équipe Intel Blogger Meetup ainsi qu'à Antonin Fouques, Design & Development Engineer chez Genymotion.
Retrouvez-le tutoriel sur la Intel Developer Zone