プラグイン向けWeb SDK

$ npm i cumulocity-tools -g

$ c8y --help

$ npm init

$ c8y install latest

{
  "availability": "PRIVATE",
  "contextPath": "myapplication",
  "key": "myapplication-appkey",
  "name": "myapplication",
  "resourcesUrl": "/",
  "type": "HOSTED",
  "imports": ["core/c8yBranding"]
}

$ c8y deploy:app myapplication
? Tenant piedpiper
? User admin
? Password ***********
? Base URL https://piedpier.cumulocity.com
GET application/applicationsByOwner/piedpier?pageSize=10000 200
POST application/applications/31337/binaries/ 201
PUT /application/applications/31337 200

{
  "name": "Examples",
  "comment": "Release with additional example plugins",
  "replaceImports": {
    "core/c8yBranding": "myapplication/myBranding"
  },
  "applications": [
    {
      "contextPath": "administration",
      "addImports": ["myapplication/weatherAdmin"]
    },
    {
      "contextPath": "devicemanagement",
      "addImports": [
        "myapplication/deviceEventsRealTime",
        "myapplication/deviceContact"
      ]
    },
    {
      "contextPath": "cockpit",
      "addImports": ["myapplication/weather", "myapplication/iconmap"]
    }
  ]
}

{
  "name": "Hello world plugin testing",
  "description": "Simple hello world plugin."
}

{
  "availability": "PRIVATE",
  "contextPath": "myapplication",
  "key": "myapplication-appkey",
  "name": "myapplication",
  "resourcesUrl": "/",
  "type": "HOSTED",
  "imports": ["core/c8yBranding", "myapplication/myplugin"]
}

(function() {
  "use strict";

  angular.module("myapp.hello", []);
})();

(function() {
  "use strict";

  angular.module("myapp.hello").config(configure);

  configure.$inject = ["c8yNavigatorProvider", "c8yViewsProvider"];

  function configure(c8yNavigatorProvider, c8yViewsProvider) {
    c8yNavigatorProvider.addNavigation({
      // adds a menu item to the navigator with ...
      name: "hello", // ... the name *"hello"*
      icon: "cube", // ... the cube icon (icons are provided by the great Font Awesome library and you can use any of their [icon names](http://fontawesome.io/icons/) without the *fa-* prefix here
      priority: 100000, // ... a priority of 100000, which means that all menu items with a priority lower than 100000 appear before this menu item and all with a priority higher than 100000 appear after this menu item
      path: "hello" // ... */hello* as path
    });

    c8yViewsProvider.when("/hello", {
      // when the path "/hello" is accessed ...
      templateUrl: ":::PLUGIN_PATH:::/views/hello.html", //  ... display our html file "hello.html" inside the "views" folder of our plugin (the plugin's folder is represented using the magic string ```:::PLUGIN_PATH:::```, which is replaced by the actual path during the build process)
      controller: "HelloController", // ... use "HelloController" as controller
      controllerAs: "vm"
    });
  }
})();

(function() {
  "use strict";

  angular.module("myapp.hello").controller("HelloController", HelloController);

  function HelloController() {
    var vm = this;

    vm.text = "hello, world";
  }
})();

{
  "name": "Hello world plugin testing",
  "description": "Simple hello world plugin.",
  "ngModules": ["myapp.hello"],
  "js": ["hello.module.js", "hello.config.js", "hello.controller.js"]
}

<div>{{vm.text}}</div>

$ c8y build:app [appContextPath] [outputFolder]

$ c8y build:plugin <pluginName> [outputFolder]

$ c8y deploy:app <appContextPath>

{
  "name": "Examples",
  "comment": "Release with additional example plugins",
  "applications": [
    {
      "contextPath": "administration",
      "addImports": ["myapplication/myplugin"]
    }
  ]
}

"allApplications": {
    "availability": "PRIVATE"
}

c8y deploy:target targets/target.json

{
  "name": "acme", // Unique name to identify the target
  "options": { // runtime options to customize each option
    "globalTitle": "Acme IoT", // Browser title
    "hide_powered": true, // Toggle the 'Powered by' on the bottom of navigator
    "supportUrl": false, // Customize the support URL. A falsy value will hide the link.
    "rightDrawer": false, // Toggle the right drawer on the app
    "login_extra_link": { // Creates an extra link on login screen
      "url": "https://acme/eula",
      "label": "EULA"
    },
    "company_name": "Acme, Inc", // Company name to be used when needed on the UI
    "guideHrefTemplate": "${docsBaseUrl}", // The template used for help links ${docsBaseUrl}${partialUrl} is the default value
    "docsBaseUrl": "https://acme/help/" // The value for docsBaseUrl variable that can be used in documentation link templates
  },
  /**
  * The replaceImports is a map of plugins that will be replaced in all the applications.
  * Keys represent the existing plugins and values are the plugins that should replace each of them.
  * This technique is very commonly used for branding
  */
  "replaceImports": {
    "core/c8yBranding": "core/acme-branding"
  },

  /**
  * Describe the applications to be built or served locally.
  * For each of the applications there are 3 properties that can be used to change the plugins that are included
  *  - replaceImports: A map of plugins to be replaced
  *  - addImports: A list of plugins to be added
  *  - removeImport: A list of plugins to be removed from the  application
  */
  "applications": [
    {
      "contextPath": "administration"
      "replaceImports": {},
      "addImports": [],
      "removeImports": []
    },
    {
      "contextPath": "devicemanagement"
    },
    {
      "contextPath": "cockpit"
    }
  ]
}

{
  "name": "Examples",
  "comment": "Release with new branding plugin",
  "replaceImports": {
    "core/c8yBranding": "myapplication/myBranding"
  }
}

{
  "name": "Icon Map",
  "description": "Shows devices on a map using an icon for the device type.",
}

(function () {
  'use strict';

  angular.module('myapp.iconmap', []);
}());

{
  (...)
  "imports": [
    (...)
    "myapplication/iconmap"
  ]
}

(function () {
  'use strict';

  angular
    .module('myapp.iconmap')
    .config(configure);

  configure.$inject = [
    'c8yComponentsProvider',
    'gettext'
  ];

  function configure(
    c8yComponentsProvider,
    gettext
  ) {
    c8yComponentsProvider.add({ // adds a menu item to the widget menu list with ...
      name: 'iconmap', // ... the identifier *"iconmap"* which has to be unique among the widgets in the application
      nameDisplay: gettext('Icon Map'), // ... the displayed name *"Icon Map"*
      description: gettext('Displays a map with icons for devices instead of markers'), // ... a description
      templateUrl: ':::PLUGIN_PATH:::/views/iconmap.main.html', // ... displaying *"iconmap.main.html"* when added to the dashboard
      options: { noDeviceTarget: true }
    });
  }
}());

(function () {
  'use strict';

  angular
    .module('myapp.iconmap')
    .controller('iconmapController', iconmapController);

  iconmapController.$inject = [
    '$scope',
    '$q',
    'c8yInventory',
    'c8yBinary'
  ];

  function iconmapController(
    $scope,
    $q,
    c8yInventory,
    c8yBinary
  ) {
    $scope.markers = [];

    var getDevicesAndBinaries = {
      devices: getDevicesWithLocation(),
      binaries: c8yBinary.list({})
    };
    $q.all(getDevicesAndBinaries).then(placeTypes);

    function getDevicesWithLocation() {
      var filters = {fragmentType: 'c8y_Position' };
      return c8yInventory.list(filters);
    }

    function placeTypes(devicesAndBinaries) {
      var devicesOfType = createTypeMap(devicesAndBinaries.devices);
      var iconOfType = createIconMap(devicesAndBinaries.binaries);
      angular.forEach(devicesOfType, _.curry(placeType)(iconOfType));
    }

    function placeType(iconOfType, devices, type) {
      var icon = iconOfType[type];
      if (icon) {
        var placeDevices = _.curry(place)(devices);
        c8yBinary.downloadAsDataUri(icon).then(placeDevices);
      } else {
        place(devices);
      }
    }

    function createTypeMap(devices) {
      var typeMap = {};
      angular.forEach(devices, _.curry(addDeviceToTypeMap)(typeMap));
      return typeMap;
    }

    function addDeviceToTypeMap(typeMap, device) {
      var hw = 'default';
      if (device.c8y_Hardware && device.c8y_Hardware.model) {
        hw = device.c8y_Hardware.model;
      }

      if (!typeMap[hw]) {
        typeMap[hw] = [];
      }

      typeMap[hw].push(device);
    }

    function createIconMap(binaries) {
      var iconMap = {};
      angular.forEach(binaries, _.curry(addIconToIconMap)(iconMap));
      return iconMap;
    }

    function addIconToIconMap(iconMap, icon) {
      if (c8yBinary.isImage(icon)) {
        var name = icon.name;
        name = name.substring(0, name.lastIndexOf('.'));
        iconMap[name] = icon;
      }
    }

    function place(devices, uri) {
      angular.forEach(devices, _.curry(placeDevice)(_, uri));
    }

    function placeDevice(device, uri) {
      var pos = device.c8y_Position;
      var marker = {
        lat: pos.lat,
        lng: pos.lng,
        message: '<a href="#/device/' + device.id + '">' + device.name + '</a>'
      };

      if (uri) {
        marker.icon = { iconUrl: uri };
      }

      $scope.markers.push(marker);
    }
  }
}());

{
	"name": "Icon Map",
	"description": "Shows devices on a map using an icon for the device type.",
  "ngModules": [
    "myapp.iconmap"
  ],
  "js": [
    "iconmap.module.js",
    "iconmap.config.js",
    "iconmap.controller.js"
  ]
}

<div ng-controller="iconmapController">
    <leaflet markers="markers" ></leaflet>
</div>

{
  (...)
  "imports": [
    (...)
    "myapplication/weatherService"
  ]
}

{
  "name": "Weather settings",
  "description": "Configure the API key for weather forecasts",
  "icon": "cloud",
  "category": "Administrator",
  "imports": [
    "myapplication/weatherService"
  ]
}

{
  (...)
	"imports": [
    (...)
    "myapplication/weatherAdmin"
  ]
}

(function () {
  'use strict';

  angular
  .module('myapp.weatherAdmin', [ 'myapp.weatherService' ])
  .config(configure);

  configure.$inject = [
    'c8yNavigatorProvider',
    'c8yViewsProvider',
    'gettext'
  ];

  function configure(c8yNavigatorProvider, c8yViewsProvider, gettext) {
    c8yNavigatorProvider.addNavigation({ // adds a menu item to the navigator with ...
      parent: gettext('Settings'), // ... the category *"Settings"*
      name: gettext('Weather'), // ... the name *"Weather"*
      path: 'weather', // ... */weather* as path
      icon: 'cloud' // ... the cloud icon (icons are provided by the great Font Awesome library and you can use any of their [icon names](http://fontawesome.io/icons/) without the *fa-* prefix here
    });

    c8yViewsProvider.when('/weather', { // when the path "/weather" is accessed ...
      templateUrl: ':::PLUGIN_PATH:::/views/weatherAdmin.html' //  ... display our html file "weatherAdmin.html" inside the "views" folder of our plugin (the plugin's folder is represented using the magic string ```:::PLUGIN_PATH:::```, which is replaced by the actual path during the build process)
    });
  }
}());

(function () {
  'use strict';

  angular
    .module('myapp.weatherAdmin')
    .controller('weatherAdminController', weatherAdminController);

  weatherAdminController.$inject = [
    '$scope',
    'c8yTitle',
    'weatherService',
    'gettext'
  ];

  function weatherAdminController($scope, c8yTitle, weatherService, gettext) {
    $scope.updateKey = updateKey;
    weatherService.load().then(function setOpt(key) {
      $scope.key = key;
    });

    c8yTitle.changeTitle({
      title: gettext('Weather provider settings')
    });

    function updateKey() {
      weatherService.save($scope.key);
    }
  }
}());

{
  "name": "Weather settings",
  "description": "Configure the API key for weather forecasts",
  "icon": "cloud",
  "category": "Administrator",
  "imports": [
    "myapplication/weatherService"
  ],
  "ngModules": [
    "myapp.weatherAdmin"
  ],
  "js": [
    "weatheradmin.config.js",
    "weatheradmin.controller.js"
  ]
}

<div ng-controller="weatherAdminController">
  <div class="col-lg-6 panel panel-clean">
    <p translate>Weather functionality is based on the <a href="https://darksky.net" target="_blank">Dark Sky</a> service. Usage of Dark Sky requires an API key that can be obtained by registering at <a href="https://darksky.net/dev/" target="_blank">https://darksky.net/dev/</a>. Paste the API key below.</p>
    <form class="form-horizontal" name="weatherAdminForm" novalidate>
      <div class="form-group">
        <label for="key" class="control-label" translate>API Key</label>
        <div ng-class="{'has-error': invalid('license')}">
          <input type="text" class="form-control" required name="key" id="key" ng-model="key" c8y-autocomplete="off">
        </div>
      </div>
      <div class="form-group ">
        <button type="submit" class="btn btn-primary" ng-click="updateKey()"
                ng-disabled="weatherAdminForm.$invalid||weatherAdminForm.$pristine" translate>
          Save
        </button>
      </div>
    </form>
  </div>
</div>

{
  "name": "Weather",
  "description": "Shows the current weather at the location of a device.",
  "category": "Widgets",
  "icon": "cloud",
  "imports": [
    "myapplication/weatherService"
  ]
}

{
  "imports": [
    (...)
    "myapplication/weather"
  ]
}

{
  "imports": [
    (...)
    "core/dashboard2",
    "core/dashboardUI"
  ]
}

{
  (...)
  "contentSecurityPolicy": "connect-src 'self' *.darksky.net"
  (...)
}

(function () {
  'use strict';

  angular
    .module('myapp.weather', [ 'myapp.weatherService' ])
    .config(configure);

  configure.$inject = [
    'c8yComponentsProvider',
    'gettext'
  ];

  function configure(c8yComponentsProvider, gettext) {
    c8yComponentsProvider.add({ // adds a menu item to the widget menu list with ...
      name: 'weather', // ... the identifier *"weather"* which has to be unique among the widgets in the application
      nameDisplay: gettext('Weather'), // ... the displayed name *"weather"*
      description: gettext('Shows the current weather at the location of a device'), // ... a description
      templateUrl: ':::PLUGIN_PATH:::/views/weather.main.html' // ... displaying *"weather.main.html"* when added to the dashboard
    });
  }
}());

(function () {
  'use strict';

  angular
  .module('myapp.weather')
  .controller('weatherController', weatherController);

  weatherController.$inject = [
    '$scope',
    '$q',
    'weatherService',
    'gettext',
    'c8yInventory'
  ];

  function weatherController($scope, $q, weatherService, gettext, c8yInventory) {
    $scope.$watch('child.config.device', function reInit(newVal, oldVal) {
      if (newVal && !angular.equals(newVal, oldVal)) {
        init();
      }
    }, true);
    init();

    function init() {
      getDevice().then(tryGetWeather).then(showWeather, printError);
    }

    function getDevice() {
      var deviceId = $scope.child.config.device.id;
      $scope.status = gettext('Retrieving device ...');
      return c8yInventory.detail(deviceId);
    }

    function tryGetWeather(res) {
      $scope.device = res.data;

      if (locationAvailable($scope.device)) {
        $scope.status = gettext('Retrieving weather ...');
        return getWeather($scope.device.c8y_Position);
      }

      $scope.status = gettext('Device has not reported a location, cannot retrieve weather.');
      return $q.reject();
    }

    function locationAvailable(device) {
      return device && device.c8y_Position && device.c8y_Position.lat && device.c8y_Position.lng;
    }

    function getWeather(coordinate) {
      return weatherService.weather.getCurrent(coordinate.lat, coordinate.lng);
    }

    function showWeather(weather) {
      $scope.weather = weather;
      $scope.windDirection = {
        'display': 'inline-block',
        '-ms-transform': rotate(weather),
        '-webkit-transform': rotate(weather),
        'transform': rotate(weather)
      };
      $scope.status = 'ready';
    }

    function printError() {
      $scope.status = gettext('Error retrieving weather information.');
    }

    function rotate(weather) {
      var direction = (weather.currently.windBearing + 180) % 360;
      return 'rotate(' + direction + 'deg)';
    }
  }
}());

{
  "name": "Weather",
  "description": "Shows the current weather at the location of a device.",
  "category": "Widgets",
  "icon": "cloud",
  "imports": [
    "myapplication/weatherService"
  ],
  "ngModules": [
    "myapplication.weather"
  ],
  "js": [
    "weather.config.js",
    "weather.controller.js"
  ]
}

<div ng-controller="weatherController" style="padding: 10px">
  <div ng-show="status != 'ready'" class="alert alert-info">{{ status }}</div>
  <div ng-show="status == 'ready'">
    <table class="table">
      <tbody>
        <tr>
          <td>{{ 'Weather' | translate }}</td>
          <td>
            <dark-sky-icon icon="{{ weather.currently.icon }}" uib-tooltip="{{weather.currently.summary | translate }}" tooltip-append-to-body="true"></dark-sky-icon>
          </td>
        </tr>
        <tr>
          <td>{{ 'Temperature' | translate }}</td>
          <td>{{weather.currently.temperature}} C</td>
        </tr>
        <tr>
          <td>{{ 'Pressure' | translate }}</td>
          <td>{{weather.currently.pressure}} hPa</td>
        </tr>
        <tr>
          <td>{{ 'Humidity' | translate }}</td>
          <td>{{weather.currently.humidity * 100}} %</td>
        </tr>
        <tr>
          <td>{{ 'Wind' | translate }}</td>
          <td>{{weather.currently.windSpeed}} {{ 'm/s' | translate }}
            <span class="direction" ng-style="windDirection" uib-tooltip="{{weather.currently.windBearing}} {{ 'deg' | translate }}">↑</span>
          </td>
        </tr>
      </tbody>
    </table>
    <a href="https://darksky.net/poweredby/" target="_blank">Powered by Dark Sky</a>
  </div>
</div>

{
  "name": "Device Details - Contact",
  "description": "Plugin adds a Contact tab to Device Details view"
}

(function() {
  "use strict";

  angular.module("myapp.deviceContact", []);
})();

(function() {
  "use strict";

  angular.module("myapp.deviceContact").config(configure);

  configure.$inject = ["c8yViewsProvider"];

  function configure(c8yViewsProvider) {
    c8yViewsProvider.when("/device/:deviceId", {
      // when the path "/device/:deviceId" is accessed ...
      name: "Contact", // ... show a tab with the name *"Contact"*
      icon: "envelope-o", // ... use the envelope-o icon (icons are provided by the great Font Awesome library and you can use any of their [icon names](http://fontawesome.io/icons/) without the *fa-* prefix here
      priority: 1000, // ... set the priority to 1000, which means that all tabs with a priority lower than 1000 appear before this tab and all with a priority higher than 1000 appear after this tab
      templateUrl: ":::PLUGIN_PATH:::/views/deviceContact.html", //  ... display our html file "deviceContact.html" inside the "views" folder of our plugin (the plugin's folder is represented using the magic string ```:::PLUGIN_PATH:::```, which is replaced by the actual path during the build process)
      controller: "deviceContactCtrl" // ... use "deviceContactCtrl" as controller
    });
  }
})();

(function() {
  "use strict";

  angular
    .module("myapp.deviceContact")
    .controller("deviceContactCtrl", DeviceContactController);

  function DeviceContactController() {}
})();

<div class="panel panel-clean">
  <div class="panel-body">
    Contact
  </div>
</div>

{
  "name": "Device Details - Contact",
  "description": "Plugin adds a Contact tab to Device Details view",
  "category": "Examples",
  "ngModules": ["myapp.deviceContact"],
  "js": [
    "deviceContact.module.js",
    "deviceContact.config.js",
    "deviceContact.controller.js"
  ]
}

{
  "c8y_Contact": {
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "123-456-789",
    "address": "Sample Street 11 A"
  }
}

(function() {
  "use strict";

  angular
    .module("myapp.deviceContact")
    .controller("deviceContactCtrl", DeviceContactController);

  DeviceContactController.$inject = ["$scope", "$routeParams", "c8yDevices"];

  function DeviceContactController($scope, $routeParams, c8yDevices) {
    function load() {
      c8yDevices.detail($routeParams.deviceId).then(function(res) {
        var device = res.data;
        $scope.device.id = device.id;
        $scope.device.c8y_Contact = device.c8y_Contact;
      });
    }

    $scope.device = {};

    load();
  }
})();

<div class="panel panel-clean">
  <div class="panel-body">
    <form name="contactForm">
      <div class="form-group">
        <label for="contact_name">Name</label>
        <input
          id="contact_name"
          type="text"
          class="form-control"
          ng-model="device.c8y_Contact.name"
        />
      </div>
      <div class="form-group">
        <label for="contact_email">E-mail address</label>
        <input
          id="contact_email"
          type="text"
          class="form-control"
          ng-model="device.c8y_Contact.email"
        />
      </div>
      <div class="form-group">
        <label for="contact_phone">Phone</label>
        <input
          id="contact_phone"
          type="text"
          class="form-control"
          ng-model="device.c8y_Contact.phone"
        />
      </div>
      <div class="form-group">
        <label for="contact_address">Address</label>
        <input
          id="contact_address"
          type="text"
          class="form-control"
          ng-model="device.c8y_Contact.address"
        />
      </div>
    </form>
  </div>
</div>

(function() {
  "use strict";

  angular
    .module("myapp.deviceContact")
    .controller("deviceContactCtrl", DeviceContactController);

  DeviceContactController.$inject = [
    "$scope",
    "$routeParams",
    "c8yDevices",
    "c8yAlert"
  ];

  function DeviceContactController($scope, $routeParams, c8yDevices, c8yAlert) {
    function load() {
      c8yDevices.detail($routeParams.deviceId).then(function(res) {
        var device = res.data;
        $scope.device.id = device.id;
        $scope.device.c8y_Contact = device.c8y_Contact;
      });
    }

    function save(device) {
      c8yDevices.save(device).then(onSave);
    }

    function onSave() {
      c8yAlert.success("Contact information successfully saved!");
    }

    $scope.save = save;
    $scope.device = {};

    load();
  }
})();

<div>
  <a
    href=""
    class="btn btn-primary"
    ng-click="save(device)"
    ng-disabled="contactForm.$invalid"
    >Save changes</a
  >
</div>