Live Session View

Overview

(New, January 2025)

The mobile-friendly live session view can be used alongside a Miro session to provide extra features, including:

• card close-ups,
• shared highlighting of chosen card(s) (called "Spotlight"),
• a separate "hand" of cards for each user,
• dealing cards to users.

Practically, the Session Live View

• can sync to the current Miro board state (via the Miro Cardographer plugin),
• displays the cards in two different zones (shapes) of the current board (and frame) at the same time,
• allows users to select and move cards between those zones (assuming they are non-readonly).

For example, here there is one card in the "@P1" zone (which is typically P1's hand) and 4 cards in the "All Cards" zone, with "Equality, Diversity and Inclusion" currently selected, so it could be moved to the "@P1" to the "All Cards" zone:

(Note, the existing Deck/Session WebApp view allows you to look through all of the cards associated with a deck or session, plus filter and select at random, but this is NOT linked to the actual board state.)

Setting up a Live Session

Miro Setup

You need to create a Miro board and linked Cardographer Session, as per the wiki.

• The session mush have at least one Deck - the live view will ONLY show cards from the deck(s) associated with the session (if you have other cards on the Miro board they will not be visible in the Live view).
• The Miro board must have at least one frame (start with just one frame).
• The Frame should have a brightly coloured shape on it called "Spotlight".
• The frame should have other shapes on it to provide areas to hold cards, and the shape's text content should be its title.
• If you want players to have separate hands then some of these shapes should have title/content like "@Player1", "@Player2".

For example, a single frame with one main card area ("All Cards"), 2 hand areas ("@P1" and "@P2") and one "Spotlight" area:

Add all the cards you are going to use to the board, e.g. using the Miro Cardographer plugin, "Session" tab as per the wiki.

Save a snapshot of the board using the Miro Cardographer plugin.

Cardographer Setup

Open the session in the Cardographer website (e.g. from the open icon in the Miro plugin) and on the session "Details" tab ensure the "Live session support" is enabled, and click "Save". You should now need "Join" and "Join (readonly)" buttons:

Each button just opens a corresponding URL, i.e. a live view for this session, or a readonly live view. The URL includes a joining code. Anyone you send these URLs to will be able to join the Cardographer Live Session View, irrespective of whether they can join the corresponding Miro board.

Managing a Session

Once the Miro board and linked Cardographer session are set up (above), open the Miro board and within that open the Miro Cardographer Plugin, as per the docs. Initially the plugin should show 2 tab:

• "Session", to add cards and save snapshots (see docs), and
• "Live", which is initial Live Session View:

Enter your nickname and click "Join" to join the Cardographer Live view to the session.

Note, you can also do this outside of Miro, via the Session "Join" link when you are already logged into Cardographer, but this will NOT sync the Cardographer session with Miro.

Session Options

As the Cardographer Session owner, once you have joined the Live View session you will see 5 tabs (or 4 if you are not in Miro); select the "Setup" tab:

Currently the live app will only show the state in one Miro Frame at a time. If your Miro board has multiple frames then choose the frame you want to work with using the "Active Board" selector.

If your Miro board has shapes (zones) with "@NAME" in their content then these are assumed to identify roles, and appear in the list here. Use these selectors to assign users (identified by the Nickname they joined with) to roles.

Joining a Session

Other users can join the Live Session View in a regular web browser. Use the "Join" or "Join (readonly)" link provided by the session owner (see Cardographer Setup, above).

If the session exists and the joining code is correct then you will see a joining screen:

Enter a nickname (which will be identify you to other session users) a click "Join".

Hands, Cards and Spotlight

Normal users, after joining, will see 2 tabs:

• "Cards", which shows zones that are NOT other user's hands at the bottom, and the Spotlight zone at the top, and
• "Hand", which shows the user's hand (if they have been assigned one) at the bottom, and the Spotlight zone at the top.

If there are any cards in the Spotlight zone then this will take up most of the screen:

If there are NO cards in the Spotlight zone then the 3 buttons at the right of the "mid"-bar can switch between showing the card(s) in the bottom (default), top, or both zones. E.g. both:

To move a card, select it (click on the card image) and the up or down arrows in the centre should highlight. Click the arrow to move the card; a spinner will display while this is in progress.

Note that the extreme left and right sides of the card views are used to scroll the cards, so if you have trouble selecting a card try closer to the middle of the screen.

Session Sync

As long as there is a Live Session View active within the Miro session it should sync the Live View with the Miro board. This is indicated on all card view by the "Connected" icon on the left of the mid-bar (concentric rings) being dark. If there is NO connection to the Miro board then this will go gray, e.g.

You can continue to move cards when the session is disconnect but the Miro board will not reflect these changes. If you re-connect to the Miro board then the Live View will be updated to reflect the current state of the Miro board (i.e. those changes will NOT be kept).

All Cards and Dealing

If you are logged into Cardographer and own the session before opening the live view (which includes using it from within Miro) then you will also see an "All" tab once you have joined the session.

You can select any zone in the top and bottom of this view, including hands and Spotlight (step through zones using the left/right arrows by the zone name). So you can use this view to move cards between any zones.

You can also use this view to deal out cards:

• In the bottom section select the zone with the cards in;
• click the "S" (Shuffle) button on the mid-bar;
• now press "D" (Deal) to deal one cards from the bottom zone to a player's hand zone.
• keep pressing "D" to deal another card until all of the originally shuffled cards have been moved.

Saving Session State

If all users leave a Live Session then the state is forgotten. The next time a user joins that Live Session it's original state is loaded from the most recent session Snapshot saved from the Miro plugin.

So normally you should save a new Snapshot of the Session (from the plugin "Session" tab) at the end of the session.

Live Sessions Without Miro

If you start/join a Cardographer Live Session View without the Miro plugin running then it will just take the last saved session state, not the current state of the Miro board. The connection icon will be grey to remind you that this is not sync'd with Miro. You can select and move cards around. But when everyone leaves the session the state will be discarded; if you start the Live View again it will return to the last saved session state.