• Embedding the widget in your page
• Browser and Device Compatibility
• See it working in this page!

Here is the HTML & JavaScript for the widget up and running. The widget will display a UI with images for CPU, Power and Connection status and also provide a thumbs up / thumbs down image that represents an experience prediction.
The widget will update itself every 5 second.

    <div id="cpci_div"></div>
    <script type="text/javascript" 
      src="http://software.intel.com/sites/whatif/webapis/intelwebapis.js"></script>
    <script type="text/javascript" 
      src="/sites/whatif/webapis/widget/cpc/IntelCPCIWidget.js"></script>
    <script type="text/javascript">
    (function() {
      //basic mode
      var theIntelCpciInst = new IntelCPCIWidget('cpci_div');
    })();
    </script>

This HTML & JavaScript changes how often the widget is updated

    <div id="cpci_div"></div>
    <script type="text/javascript" 
      src="http://software.intel.com/sites/whatif/webapis/intelwebapis.js"></script>
    <script type="text/javascript" 
      src="/sites/whatif/webapis/widget/cpc/IntelCPCIWidget.js"></script>
    <script type="text/javascript">
    (function() {
      //modified update interval - updates every 1 second instead of default 5
      var theIntelCpciInst = new IntelCPCIWidget('cpci_div',{'updateInt':1});
    })();
    </script>

This HTML & JavaScript passes in another user defined element ID (div) to receive debug messages. Handy when first incorporating the widget into a page.

    <div id="cpci_div"></div>
    <div id="cpci_debug_div"></div>
    <script type="text/javascript" 
      src="http://software.intel.com/sites/whatif/webapis/intelwebapis.js"></script>
    <script type="text/javascript" 
      src="/sites/whatif/webapis/widget/cpc/IntelCPCIWidget.js"></script>
    <script type="text/javascript">
    (function() {
      //pass a debug element id for debug messages
      var theIntelCpciInst = new IntelCPCIWidget('cpci_div',{'updateInt':1,'debugElId':'cpci_debug_div'});
    })();
    </script>

This HTML & JavaScript shows how to disable the widget UI and have updates sent to your JavaScript function so that you can implement your own completely custom UI. You should replace the code in the myUpdateCB function with your code.

    <div id="cpci_div"></div>
    <div id="cpci_debug_div"></div>
    <script type="text/javascript" 
      src="http://software.intel.com/sites/whatif/webapis/intelwebapis.js"></script>
    <script type="text/javascript" 
      src="/sites/whatif/webapis/widget/cpc/IntelCPCIWidget.js"></script>
    <script type="text/javascript">
    (function() {
      //disable the default widget UI and add a update callback for a custom ui
      var theIntelCpciInst = new IntelCPCIWidget('cpci_div',{'updateInt':1,
        'debugElId':'cpci_debug_div','uiEnable': false,'updateCB':myUpdateCB});
      
      function myUpdateCB(currInfo) {
        //do something with currInfo.cpu, currInfo.power, currInfo.connection
        var customUiEl = document.getElementById("cpci_div");
        customUiEl.innerHTML = "Custom UI:<br/>";
        var cpuLoad = Math.round((IntelWebAPIs.cpu.load * 100) * 100)/100;
        var connState = currInfo.connection.connected;
        var drawEl = document.createElement("pre");
        drawEl.innerHTML = "CPU Name: " + currInfo.cpu.name + "\r\n";
        drawEl.innerHTML += "CPU Load: " + cpuLoad + " %\r\n";
        drawEl.innerHTML += "Network Connected: " + connState + "\r\n";
        
        if(connState){
          var conninfo = currInfo.connection.getConnectionInfo();
          var connInfoHtml = "Connection Info:" + "\r\n";
          if(conninfo.lan.connected){
            connInfoHtml += "  lan.connected=" + 
              conninfo['lan']['connected'] + "\r\n";
            connInfoHtml += "  lan.signalStrength=" +
              conninfo['lan']['signalStrength'] + "\r\n";
            connInfoHtml += "  lan.linkSpeed=" +
              ((conninfo['lan']['linkSpeed']*100)/1000/1000) + " Mbps" + "\r\n";
          }
          if(conninfo.wifi.connected){
            connInfoHtml += "  wifi.connected=" +
              conninfo['wifi']['connected'] + "\r\n";
            connInfoHtml += "  wifi.signalStrength=" +
              conninfo['wifi']['signalStrength'] + "\r\n";
            connInfoHtml += "  wifi.linkSpeed=" +
              ((conninfo['wifi']['linkSpeed']*100)/1000/1000) + " Mbps" + "\r\n";
          }
          drawEl.innerHTML += connInfoHtml  + "\r\n";
        }
        
        if(currInfo.power.usingExternalPowerSource) {
          drawEl.innerHTML += "Device power: External / wall power" + "\r\n";; 
        }
        else {
          drawEl.innerHTML += "Device power: Battery" + "\r\n";
          drawEl.innerHTML += "Device battery level: " + currInfo.power.powerLevel + " %" + "\r\n";
          drawEl.innerHTML += "Device battery time : " + 
            Math.round((currInfo.power.timeRemaining / 60)) + " minutes" + "\r\n";
        }
        customUiEl.appendChild(drawEl);
      }
      
    })();
    </script>

The table below lists some compatability notes for browser and operating system combinations. This widget is currently beta quality.

If you are interested in seeing these APIs available on other device types and operating systems please let us know by leaving comments.