W3C home > Mailing lists > Public > public-secondscreen@w3.org > March 2015

Re: [presentation-api] Make the Example section more concise

From: Louay Bassbouss via GitHub <sysbot+gh@w3.org>
Date: Tue, 10 Mar 2015 22:53:32 +0000
To: public-secondscreen@w3.org
Message-ID: <issue_comment.created-78166144-1426028011-sysbot+gh@w3.org>
This is the first try for the Examples section. If you receive this as
 mail notification please open it in Github by clicking on the link at
 the end of the mail for better formatting.

# Examples

This section shows example codes that highlight the usage of main 
features of the Presentation API. In these examples, `controller.html`
 represents the controlling page that runs in the opener user agent 
and `presentation.html` the presenting page that runs in the 
presenting user agent. Both pages are served from `http://example.org`
 (`http://example.org/controller.html` and 
`http://example.org/presentation.html`). Please refer to the comments 
in the code examples for further details.

## Monitor availability of presentation displays example

```javascript
<!-- controller.html -->
<button id="castBtn" style="display: none;">  </button>
<script>
  // the cast button is visible if at least one presentation display 
is available
  var castBtn = document.getElementById("castBtn");
  // availablechange event is fired when the presentation display 
availability changes
  navigator.presentation.onavailablechange = function(evt){
    // show or hide cast button depending on display availability
    castBtn.style.display = evt.available? "inline" : "none";
  }
</script>
```
            
## Starting a new presentation session example

```javascript
<!-- controller.html -->
<script>
  // it is also possible to use relative URL "presentation.html"
  var presUrl = "http://example.com/presentation.html";
  // create random presId 
  var presId = Math.random().toFixed(6).substr(2);
  navigator.presentation.startSession(presUrl, 
presId).then(function(newSession){
    // a new session is started successfully
    setSession(newSession);
  },function(){
    // user cancels the selection dialog or an error is occurred
    setSession(null);
  });
</script>
```
         
## Joining a presentation session example

```javascript
<!-- controller.html -->
<script>
  // read presId from localStorage if exists 
  var presId = localStorage && localStorage["presId"] || null;
  // presId is mandatory for joinSession
  presId && navigator.presentation.joinSession(presUrl, 
presId).then(function(existingSession){
    // session with requested presUrl and presId is found and joined 
successfully
    setSession(existingSession);
  },function(){
    // no session found for presUrl and presId or an error is occurred
 
    setSession(null);
  });
</script>
```
            
## Monitor session's state and exchange data example

```javascript
<!-- controller.html -->
<script>
  var session;
  var setSession = function(theSession){
    // close old session if exists
    session && session.close();
        // remove old presId from localStorage if exists
        localStorage && delete localStorage["presId"];
    // set the new session
    session = theSession;
        if(session){
                // save presId in localStorage
                localStorage && localStorage["presId"] = session.id;
                // monitor session's state
                session.onstatechange = function(){
                  if(this == session && this.state == "disconnected")
                    setSession(null);
                };
                // register message handler
                session.onmessage = function(msg){
                  console.log("receive message",msg);
                };
                // send message to presentation page
                session.postMessage("say hello");       
        }
  };
</script>
```

```javascript         
<!-- presentation.html -->
<script>
  var session = navigator.presentation.session;
  session.onstatechange = function(){
    // session.state is either 'connected' or 'disconnected'
    console.log("session's state is now", session.state);
  };
  session.onmessage = function(msg){
    if(msg == "say hello")
        session.postMessage("hello");
  };
</script>
```

-- 
GitHub Notif of comment by louaybassbouss
See 
https://github.com/w3c/presentation-api/issues/42#issuecomment-78166144
Received on Tuesday, 10 March 2015 22:53:42 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 10 March 2015 22:53:42 UTC