Default Widget Gist

options.js

return {
  "name": "Default Widget",
  "deviceMap": [
    { minimum: "1", maximum:"1" }
  ]
}

style.less

h4 { 
  color: rgba(0,0,0,0.3);
  font-size: 15px;
  margin: 10px 10px;
}

.deviceInfo {
  width: 90%;
  margin: 0 auto;
  font-size: 10px;
  
  tr {
    th, td {
      border-collapse: collapse;
      border: 1px solid rgba(0,0,0,0.1);
      padding: 3px;
    }
    th { 
      text-align: left !important;
      font-weight: bold;
      width: 80px;
    }
    
  }
  
}

view.html

<br><br>
<h4 class="title"></h4>
<table class="deviceInfo">
  <tr>
    <th>node</th>
    <td class="node"></td>
  </tr>
  <tr>
    <th>deviceId</th>
    <td class="deviceId"></td>
  </tr>
  <tr>
    <th>vendorId</th>
    <td class="vendorId"></td>
  </tr>
  <tr>
    <th>group</th>
    <td class="group"></td>
  </tr>
  <tr>
    <th>lastData</th>
    <td class="lastData"></td>
  </tr>  
</table>

widget.js

scope.onData = function(data) {
  element.find(".lastData").html(data.DA);
};

var firstDevice = _.find(scope.Widget.devices, function(device) { return true; });

element.find(".title").html(firstDevice.shortName);
element.find(".node").html(firstDevice.node);
element.find(".deviceId").html(firstDevice.did);
element.find(".vendorId").html(firstDevice.vid);
element.find(".group").html(firstDevice.gid);
element.find(".lastData").html(firstDevice.last_data.DA);

scope.Widget.settings.name = firstDevice.shortName;