Skip to content

Navigation & Use of the UI

To start the user interface locally, run the following commands in the terminal:

npm install , npm run smui npm run dev you also need to install OpenVPN Connect and log in with your dfki gitlab account.

The application will then be accessible at: : http://localhost:5173/

Functions

The start view at http://localhost:5173/ displays an overview of all existing tours:

UI tour overview

  • Tour Overview – Shows all existing tours with title and description
  • Start Tour – Opens the detail view
  • Create Tour – Creates a new tour with a generated ID and an empty step list
  • Edit Tour → Add steps
  • Reorder Steps (via drag & drop)
  • Editable Titles & Descriptions – Can be changed directly in place
  • Editable Step Content – Each step’s content can be modified in a text field

Tour images are loaded dynamically from the path: (/images/${tour.id}.jpg)

Interactions

  • Click on a card → Edit the selected tour
  • Click on the “+” icon → Creates a new tour and immediately navigates to /edit_tour/<id>
  • Click on “+ Add Step” → Inserts a new step into the tour
  • Fields are directly editable
  • Drag & drop sorting is implemented using runic-reorder

UI-Components (SMUI)

  • Card, Media, IconButton, List, Accordion
  • Icons: play_arrow, pause, delete, add, drag_indicator
  • Layout: LayoutGrid and MainNav

Logic & State Management

The core logic of the UI is based on a global state, managed in the file server_state.svelt. Here, a reactive tour list is defined, containing all tours. This list serves as the source for rendering the start page (+page.svelt) and is automatically updated whenever content changes.

When the application loads, JSON files from the directory static/data/tours (e.g.,tour_school.json,tour_tourism.json) are read in. Each file contains a complete tour including ID, title, description, and steps.

When a tour is edited or created, updates are applied directly to the global state—meaning changes to the title, description, or steps are instantly reflected in the UI.

A tour ID is automatically generated when creating a new tour (timestamp-base) and used to navigate to the detail view (/edit_tour/<id>).

Tour steps are stored as a list of objects and can be reordered via drag & drop (runic-reorder) or dynamically extended. Changes remain in sync between the tour list and the displayed view.

Key Files

+page.svelte → Main overview page, located in routes/+page.svelte

routes/edit_tour/+page.svelte → Tour editing view, accessed by clicking on a tour in the overview

server_state.svelte → Global state file containing the tours list; tour data is loaded from JSON files in static/data/tours/

Note

This interface is not installed directly on the robot; it runs separately within the network. All changes to tours are stored dynamically in the global state (server_state).