Logo

dev-resources.site

for different kinds of informations.

Enhancing Cumulocity IoT Capabilities: Map-Based Widgets

Published at
8/24/2023
Categories
cumulocity
iot
widget
github
Author
techcomm_sag
Categories
4 categories in total
cumulocity
open
iot
open
widget
open
github
open
Author
12 person written this
techcomm_sag
open
Enhancing Cumulocity IoT Capabilities: Map-Based Widgets

In the world of IoT, geospatial data plays a crucial role in providing context to the data generated by devices. Whether it’s tracking the location of a fleet of vehicles or monitoring the status of remote assets, map-based widgets can provide an intuitive visual way to understand and interact with this data. In this article, we will explore three map-based widgets for Cumulocity IoT.

Layered Map Widget Plugin

Author: @Christian_Guether1

The Layered Map Widget Plugin is a Cumulocity module federation plugin that allows you to display a map with position markers for devices with c8y_Position fragments. This widget can be used in the Application Builder or Cockpit of the Cumulocity IoT platform.

GitHub logo SoftwareAG / cumulocity-layered-map-widget-plugin

Plugin containing the advanced map widget. Displays a map with position markers for selected devices. Support for configuration of additional layers and custom markers.

IoT Cumulocity Layered Map Widget plugin

Cumulocity module federation plugin containing the Layered Map widget. By installing this plugin to a cockpit application, the user can choose this widget from the catalog.

Displays a map with position markers for devices with c8y_Position fragments. The user can create multiple layers using different queries:

  • fragment and value layer, e.g. show all devices with type = c8y_MQTTDevice
  • inventory query layer, e.g. show all devices with critical alarm count greater 0 and having custom fragment xyz
  • alarm query layer, show all devices for that at least one alarm exists matching the alarm query you create
  • event query layer, show all devices for that at least one event exists matching the event query you create

The map widget is designed to scale well also with higher count of devices. Position updates and changes regarding the layers are polled using bulk requests Markers can be configured…

The Layered Map Widget Plugin supports the creation of multiple layers using different queries. These layers can be based on fragment and value layers, inventory query layers, alarm query layers, and event query layers. The widget is designed to scale well with a higher count of devices, with position updates and changes regarding the layers polled using bulk requests.

Markers can be configured to show different icons, and if alarms exist, different colors will be shown depending on the highest alarm severity. Alarm details can be found in the popover of the device, which is built to be easily extended or replaced in code.

Layer selection

Layer alarm

Route Tracker Plugin

Author: @Ravi_Shankar_Kumar

The Route Tracker Plugin is a Cumulocity module federation plugin that provides functionality for tracking routes and geofences. This widget can be used in the Application Builder or Cockpit of the Cumulocity IoT platform.

GitHub logo SoftwareAG / cumulocity-route-tracker-plugin

The Route Track widget help you to display route, geofence along with realtime device status and also one can enable the smart rule which gets trigged when smart rule violation happens.

Route Tracker Widget for Cumulocity

This Route Tracker widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit The Route Tracker widget help you to display route, geofence along with realtime device status and also one can enable the smart rule which gets trigged when smart rule violation happens.

Please choose Route Tracker release based on Cumulocity/Application builder version:

APPLICATION BUILDER    CUMULOCITY     ROUTE TRACKER WIDGET 
2.x.x >= 1016.x.x 1.x.x

Representation

RouteTrackermain

Prerequisite

Cumulocity c8ycli >=1016.x.x

Installation

Runtime Widget Deployment?

  • This widget support runtime deployment. Download Runtime Binary and install via Administrations --> Ecosystems --> Applications --> Packages.

QuickStart

This guide will teach you how to add widget in your existing or new dashboard.

  1. Open you application from App Switcher

  2. Add new dashboard or navigate to existing dashboard

  3. Click Add Widget

  4. Search for Route Tracker

  5. Select Target Assets or Devices

  6. Click Save

…

The Route Tracker Plugin allows users to display routes, geofences, and real-time device status. It also supports the creation of smart rules that can be triggered when a smart rule violation occurs.

Route Tracker

Smart Map Settings Widget Plugin

Author: @Darpankumar_Lalani

The Smart Map Settings Widget Plugin is a micro frontend plugin that can be deployed in the Application Builder or Cockpit as a Cumulocity widget. This widget allows you to mark and create a “Geography” at a specified location.

GitHub logo SoftwareAG / cumulocity-smart-map-settings-widget-plugin

This is configuration widget for Smart Map Widget. Created by Global Presales.

Smart Map Settings Widget Plugin

This widget 'Smart map settings' is micro frontend plugin and can be deployed in App Builder and Cockpit as a Cumulocity widget. It allows you to mark and create a Geography on specified location. After the Geography is created, it allows to create floors, Geofences and device positioning. This widget is used as configuration for Smart Map widget

Please choose Smart Map Settings release based on Cumulocity/Application builder version:

APPLICATION BUILDER CUMULOCITY SMART MAP SETTINGS WIDGET
2.0.x >= 1016.x.x 1.x.x

Smartmap-Settings

What's new?

  • Smart Map Settings: Smart Map Settings widget based on Angular 14.
  • Location Search: Support for Location Search to find any location across globe.
  • Geofences & Smart Rule: Now User can configure geofences and Smart Rule for geofeces on Map.
  • GeoJSON and SVG Support: User can now also upload GeoJSON and SVG file for floor plan.
  • Device Positioning: Multiple devices can be positioned on…

After a Geography is created, it allows the creation of floors, geofences, and device positioning. This widget is used as a configuration tool for the Smart Map widget, providing a flexible and intuitive interface for setting up and managing geospatial data.

You can add a Geography by drawing its location and entering the details, edit the geography details and its location, and delete the geography. You can also add, edit, delete, and revert the floor plan of the geography after its addition. The floor plan image can be previewed, rotated, and positioned using a smart rotation point. Devices can be marked on the map at the floor level.

Smart Map Settings

Additional information

To support the community, we share our custom implementations across all product sets. We publish new widgets and plugins that you can freely incorporate into your IoT projects. These can be found on the Open-Source page of Software AG.

Each widget is provided as-is and without warranty or support. They do not constitute part of the Software AG product suite. Users are free to use, fork, and modify them, subject to the license agreement. While Software AG welcomes contributions, it cannot guarantee to include every contribution in the master project.

Relevant Articles

Read full topic

widget Article's
30 articles in total
Favicon
Forex Ticker Widget: Simplifying Forex Monitoring for Users
Favicon
Passing variables from the static page to the widget
Favicon
How to launch a React Native app from the Lock Screen on iPhone
Favicon
Free Currency HTML-Widgets
Favicon
Integrating Live Forex Quotes into Your Trading Platform Seamlessly
Favicon
Implement a Secure, Dynamic Domain Approval System for Embeddable Widgets in Ruby on Rails
Favicon
The Future of Professional Networking on LinkedIn: How Businesses Can Adapt and Stay Ahead
Favicon
Embed JS Widgets with Rails: A Step-by-Step Guide
Favicon
Create embeddable widgets in react for static pages
Favicon
FloatyNavBar: Elevate Your Flutter App's Navigation
Favicon
Web music player with html-css-javascript
Favicon
Free Currency HTML-Widgets
Favicon
Building an embeddable Widget
Favicon
Video, Live Chat & Help Center widget for the website
Favicon
100 Common Flutter widget list
Favicon
Back to basic : Flutter widget lifecycle
Favicon
FlutterFlow has introduced this fantastic new draggable widget!
Favicon
Bigcommerce Widget Migration
Favicon
Simple Digital Clock Widget
Favicon
Exploring Simple Widgets II: Autocomplete
Favicon
Improved Data Point Graph Widget for Cumulocity IoT
Favicon
Enhancing Cumulocity IoT Capabilities: Map-Based Widgets
Favicon
The Journey of a Widget: Understanding the Lifecycle in Flutter
Favicon
flutter row widget example
Favicon
Flutter Column Widget Example
Favicon
Common Widgets in Flutter
Favicon
Creating an iOS Currency Exchange Rate Widget: A Step-by-Step Guide
Favicon
Flutter Custom Widget
Favicon
How to embed appointment scheduling widget on your website?
Favicon
How to screenshot a widget in the flutter

Featured ones: