Introduction to the cutting-edge end-user (software) development, RIA and semantic technologies to offer a next-generation end-user centred web application mashup platform through FIWARE WireCloud.

1. Session 8 - Operational dashboards with WireCloud
Fernando López, Cloud & Platform Senior Expert
fernando.lopez@fiware.org
@flopezaguilar
FIWARE Foundation, e.V.

2. Learning Goals
1
● WireCloud basics
● Fine-tuning the dashboard appearance
● Advanced capabilities
● Displaying data
● Other WireCloud Features

3. 2
Wirecloud basics

4. What is Wirecloud
▪ WireCloud builds on cutting-edge end-user (software) development, RIA and
semantic technologies to offer a next-generation end-user centred web application
mashup platform.
▪ Allow end users without programming skills to easily create web applications and
dashboards/cockpits.
▪ Web application mashups integrate heterogeneous data, application logic, and UI
components (widgets) sourced from the Web to create new composite applications.
▪ Exploiting rapid development, DIY, and shareability.
▪ Serve a specific situational need, frequently with high potential reuse.
▪ Offered as 'off-the-shelf' functionality by solution providers
3

5. Concepts
▪ Widgets, operators and dashboards
▪ Wiring, input endpoints and output endpoints
▪ Properties
Usage
▪ Create a new dashboard
• and delete them, properties...
▪ Deploying widgets on the interface
▪ Edit mode
▪ Use of properties
▪ Instantiate operators and “wire them”
▪ Operators’ properties
Wirecloud concepts and usage
4

6. Instantiation of widgets on main window
5

7. Instantiation of operators on “wiring” tool
6
▪ Wiring of components
• Widgets (orange)
• Operators (green)

8. Configuration of properties
7

9. Change behaviour by wiring
8
Different wires modify
the functionality

10. 9
Fine-tuning the dashboard appearance

11. Edit mode
▪ Hides configuration buttons, tabs...
▪ Default view of tabs is “hidden”
▪ Hide/show widget titles
10

12. Edit mode
11

13. Floating widgets
12
▪ Extract widgets from regular
grid, display above others

14. Upcoming UX improvements
13
▪ Lateral-hidden
widgets

15. 14
Advanced capabilities

16. Components repository
▪ Simplify the components distribution
▪ Software released
• Server: docker image
• Client embedded in WireCloud (Release 7.7)
▪ Permanent URL is upcoming
15

17. Playing with Dashboards
▪ Shared Dashboards
▪ Including for public dashboards (allowing anonymous users)
▪ Embeddable Dashboards
▪ iFrame to be integrated wherever
▪ Share as mashup components
▪ Consume other’s mashups
▪ Inherit data-access rights from dashboard creator or current user
16

18. 17
Displaying data on WireCloud

19. Displaying data on WireCloud
▪ Maps
• Not only POIs
▪ Graphics
• Gauges
• Pie charts
• Scatter plots
• Column charts
18

20. Displaying data on WireCloud
▪ Other useful stuff
• Handle data series
• Statistic values
• Arithmetic operations
• Informative Panels
19

21. Maps
▪ Display any entity “with location”
▪ Display any FIWARE entity with location
▪ Display more than POIs
20

22. Graphics
▪ Multiple types of graphics
▪ Different libraries
• HighCharts (this demo)
• Google Charts
• eCharts
▪ Generic operators
• Data adaptation without coding
21

23. All together
22

24. History player’s wiring
23

25. 24
Other WireCloud Features

26. More WireCloud features
▪ Integration with other FIWARE GEs
• Context Broker through API and/or operators (NGSI-Source & NGSI Operator)
• Object Storage API
• Components for Orion, Kurento, CKAN, Cosmos, …
• Business API Ecosystem
• Acquire data-access rights
• Acquire WireCloud components
• Authentication using Keyrock
• ...
25

27. More WireCloud features
▪ Components versioning
▪ HTTP proxy
• Cross-origin HTTP requests
26

28. Context-Broker admin via WireCloud
27

29. Summary: Terms
28
● RIA, Rich Internet Application (RIA) or Rich Web Application is a web application that has the
characteristics of a desktop application.
● DIY, do it yourself ;)
● (Web) Widget, an applet intended to be used within web pages with substantially independence of
the content of the page in which it is inserted.
● UX, user experience (just in case…)
● iFrame, an inline frame is used to embed another document within a HTML document.

30. References
▪ FIWARE Catalogue
• https://www.fiware.org/developers/catalogue
▪ FIWARE Academy:
• https://fiware-academy.readthedocs.io/en/latest/processing/wirecloud
▪ Installation, administration & reference documentation is available on Read The Docs:
• https://wirecloud.readthedocs.io
▪ StackOverflow Support:
29

31. References
▪ StackOverflow Support:
• Ask your questions using the “fiware-wirecloud” and “fiware” tags
• Look for existing questions at http://stackoverflow.com/questions/tagged/fiware-wirecloud
▪ WireCloud github repository https://github.com/wirecloud
• Wirecloud
• General components
▪ FIWARE-based components
• https://github.com/wirecloud-fiware
30

32. Question & Answer
31
fiware-tech-help@lists.fiware.org

34. 3
3