From data to screen

Docs Documentation

From data to screen

How any collection — a program, a news feed, sponsors — reaches a screen, and how a visitor opens one record with a touch or a hand.

Wunderframe keeps three things apart: the data, the design, and where it plays. None of them knows what an agenda or a news feed is, so everything on this page works the same for a conference program, a news feed, a sponsor list or a lunch menu.

Three layers

  1. Data. A collection is a set of named fields; a record is one set of values. Records are typed by hand, imported from a CSV file, or kept up to date from a JSON or RSS source — they all look the same afterwards. A field’s kind (text, date, time, image, presenters, link to a record) only changes how it is edited; a presenters field or a link to a record also brings the linked fields along, such as {speaker_photo} or {sponsor_logo}.
  2. Design. A template is a scene with blanks such as {title} or {speaker_photo}. Design it freely — several moments, motion, pictures. It fills from any record that has those fields.
  3. Where it plays. A chapter of a story, or a block on a moment, decides which records go into which design.

Five ways a story uses records

  • Filled scene — a template with one record, always the same one.
  • Rolling records — a template with the next few records of a collection each loop: news, sponsors, speakers.
  • The session on now — a template with whichever item is on now in a room, with different moments before, during and after it. This is the card outside a room door: “Up next”, then the talk, then “Thank you”, all in your own design.
  • An agenda or list board — a block that shows many records at once (below).
  • A chosen record — a detail chapter that never plays by itself and opens when a visitor chooses a record (below).

The first three are chosen under What fills this chapter on a story’s chapter; see Four kinds of chapter.

Agenda and list boards

Add the Agenda / list block to a moment and choose a collection. It shows:

  • Now & next per room — for a lobby;
  • Upcoming — the next items in time order;
  • Agenda grid — times down, rooms across; an item whose room is all spans the row;
  • Records — a plain list with no times, sorted by any field: news from a feed, sponsors, a menu.

The first three follow the stage’s clock and change the moment an item starts or ends.

Design the rows

Under Row design, pick a style — List, Cards (a panel per row, larger pictures) or Compact (one line per row) — and say what each row shows. Title, Second line, Third line and Badge are texts with blanks, so one line can combine fields: {speaker} · {speaker_organization}. A blank without a value leaves nothing behind, not even the dot before it. Picture is any image field, or a speaker’s photo; make it round or square. Colors, font and size are the block’s own settings.

Room names

Rooms are best stored as short keys (A, B) with the name in another field (room_name). Set Group names from to that field and column B reads Auditorium with no typing. To call it something else on one board, type B = Main hall under Groups, in order — a label typed there wins.

Overview and detail

On a screen people can touch or point at, a board is an overview and every row can open a detail: the session with the speaker’s photo and bio, the whole news story, the sponsor’s page. The detail is a chapter you design like any other, and it works for every collection.

  1. Design the detail

    Make a scene with blanks from the collection — {title}, {speaker}, {description}, a picture filled from {speaker_photo}. Add a Button with the action Back so a visitor can return.

  2. Add it to the story as a detail

    Add the scene to the same story. On the chapter, under What fills this chapter, choose A chosen record and the collection. Its badge reads Detail for …; it never plays in the loop. One detail per collection per story.

  3. Let the rows open it

    On the board, turn on Rows open their detail. Rows light up on a screen only when the story has a detail for that collection — nothing glows that cannot open.

  4. Let visitors use the screen

    On the stage (Run → Stages, edit), turn on Visitors can use this screen and choose Touch, Hands or both. For hands, pick whether a hand chooses by pinching, by holding still, or either, and after how many seconds without a visitor the screen goes back to the story. A stage without it stays a screen to watch.

  5. Try it

    Open the stage’s player on a touch screen, or click with a mouse, and choose a row.

What a visitor does

  • Choose a row — tap it, or point at it with a hand and pinch, or hold still over it.
  • Swipe on the detail to go to the next or previous record, in the order the board showed them.
  • Back returns to the board; walking away returns the screen to its loop by itself.

Not everybody knows a screen answers a hand. A gesture guide shows them how — on its own, or laid over the screen until someone raises a hand.

The details travel to the screen with everything else, pictures included, so they open at once, also without a network.

Two examples

A conference program. Enter the program as a collection with linked speakers (Your program as data). In the lobby: an agenda grid in the Cards style, second line {speaker} · {speaker_organization}, picture speaker photo, groups named from room_name, rows opening a detail with the speaker’s photo, title and the talk’s description. Outside each room: a session on now chapter matching that room.

A news feed. Bring the feed in as a data source. A Records board sorted by date, newest first, with the picture and {title}; a detail showing the whole story. Between visitors, a rolling chapter plays the same records one by one.

With an AI agent

Your connected agent knows all of this. Ask, for example: “Make the lobby agenda cards with the speaker photos, and let a visitor open a session to see the speaker details.” It designs the board, builds the detail chapter with a Back button, and tells you how to try it.