GSoC Project Proposal: Dynamic UI generation based on IoT device descriptions

Dynamic UI Generation based on IoT Device Descriptions

Description

The Web of Things (WoT) aims to enhance interoperability and usability across diverse Internet of Things (IoT) platforms by leveraging standard web technologies. Central to this is the Thing Description (TD), a standardized metadata model that describes the capabilities and interfaces of IoT devices, enabling seamless integration and interaction.

Building upon the Eclipse Thingweb project, which provides open-source tools and libraries for WoT development, this project's aim is to have a fully device-driven dashboard and UI elements.

Practical goals

1. Client-Side UI Generation Based on Thing Descriptions:

   • Objective: Develop a client-side application that allows users to upload or discover one or multiple TDs, visualize their affordances (properties, actions, events), and customize a user interface (UI).
   • Features:
     • Drag-and-Drop Interface: Enable users to easily upload TDs and view their contents.
     • Dynamic Visualization: Display affordances and their current values in a user-friendly manner.
     • Customization: Allow users to select and organize affordances to create a personalized dashboard.
   • Inspiration: The functionality is inspired by platforms like ThingsBoard, Home Assistant, WebThings, which offer intuitive interfaces for managing smart devices.

2. Development of a UI Component Library for WoT Applications:

   • Objective: To fullfill the aforementioned objective students need to create a reusable library of UI components (e.g., styled with Tailwind CSS) that are aware of and can interact with WoT Things. These components will serve as building blocks for developers crafting WoT applications. Student should review possible usecases and define a reasonable list of components to be included in the library. As an example, student can look at the ecosystem provided by home assistant.
   • Components to Include:
     • Property Display and Controls: Widgets to monitor and modify device properties.
     • Action Triggers: Buttons or interfaces to invoke device actions.
     • Event Listeners: Elements to subscribe to and display events from devices.
   • Requirements:
     • Consistency: Ensure a uniform look and feel across WoT applications.
     • Efficiency: Accelerate development by providing pre-built, customizable components.
     • Interoperability: Guarantee that components can seamlessly interact with devices described by TDs.

Expected Outcomes

• A functional, client-side application for generating customizable UIs based on Thing Descriptions.
• A comprehensive, UI component library tailored for WoT applications.
• Documentation and tutorials to assist developers in integrating these tools into their projects.

Possible Mentors

• Ege Korkan
• Cristiano Aguzzi
• Daniel Peintner
• Jan Romann

Links to Eclipse Project

• Thingweb - EF
• Thingweb - website

Skills required/preferred

This project is ideal for front-end enthusiasts with an interest in IoT and web technologies. Familiarity with JavaScript/TypeScript, client-side development, and CSS frameworks like Tailwind will be beneficial. Good design skills are also appreciated (send a simple web portfolio or a web page you designed).

Project Size

350 hours (can be downscaled accordingly to objective 2)

Rating

Medium