Table Announcements & Information Panels

Tutorials, how to make them, and tips

This guide is for those who have already seen Running an event. After you have looked here, at this chapter, we recommend that you look at these chapters:

Updated 5 June 2023

Introduction and Tutorials

A table announcement is a message or piece of content that appears on each table before the start of a session or at the end of a round. Table announcements are sometimes referred to as the tablecloth. In essence, they are a block in which HTML can be displayed in place of the normal tabletop. They are completely customizable.

Before the session starts, you can create an information panel. This is similar to a table announcement, but it is available to the players whenever they want to see it. At any time during the session, a player can click the ⓘ button, just above the scores.

Tutorial videos: Simple | Advanced

1. Terminology

Config File – A config file is a JSON file that is uploaded at the beginning of a session with settings for the session.

Visual Studio Community Edition - A text editor made for programming. When installed with the .NET package is the perfect tool for making config files.

Key - A key in a config file is the text on the left-hand side of the colon. When you upload a config file to RealBridge, it will identify the key and take the value (what's on the right-hand side), and put it in the right place. If RealBridge doesn't recognize a key, you will get an error, if the variable type on the value is incorrect, you will get an error. The punctuation (syntax) in a config file is also very precise. Visual studios will help to identify any potential typos, for example, brackets that have been opened and not closed, misplaced commas, etc.

2. Example of a Table Announcement File and Result

{
  "table_announcements": [
    {
      "round": 1,
      "html": "<p><img style='display: block; margin-left: auto; margin-right: auto;' src='https://realbridge.online/assets/img/icons/logo_club.svg' alt='' /></p><h1 style='text-align: center;'>Welcome to RealBridge</h1><p style='text-align: center;'>Here is a link to our <a href='https://realbridge.online/'>website</a></p>"
    }
  ]
}

Download example config file here (Right Click and Save As)

3. How to create your own table announcement

Before you get started these are our top tips for making table announcements:

The best program to create and modify all config files (which contain Table Announcements) is Visual Studio Community edition with the .NET package. See our how-to-install video here.
If you prefer something less heavyweight, try Notepad++ with the JsTool plugin (on Windows) or TextEdit (on a Mac).
We have made a how-to make a table announcement video, please watch this video here.
Upload all images you want to use to Bridgewebs/Pianola or any other website. They don't have to be on any page, just uploaded to the back end. You cannot upload to google drive or any other online drive, they must be on a website. They must be available as "https" URLs, not "http".

Great, now we are ready to start!

1. Download a template config file here by using Right Click and Save.

2. Open it up in Visual Studio ready for later

3. Go to HTML Online. You will be able to start building your table announcement on the left side while the HTML is automatically generated on the right.

4. When you have made your table announcement, you must:

a. Replace all double quotation marks with single quotation marks

b. Condense all text into one line. Note: the text will still wrap and look like it is on multiple lines, but the important thing is that the number of lines is one.

5. Copy all HTML into config file. Make sure to set the round number and that all punctuation (syntax) is correct.

6. Upload config file to RealBridge Session to see how it looks.

4. Editable Keys

Key	Data type	Notes
table_announcements	Array of JSON elements	Each element of the array is one table announcement.
round	Integer or "all"	Any number, like 1, 2, 3: at the end of that round "before last": before the last round starts "end": after the end of the last round “all”: any round that does not have its own table announcement Note that “before last” and "end" take priority over a numbered round; a numbered round takes priority over “all”.
html	String	String of HTML. If this contains double quotes, they must be escaped with a backslash. Cannot contain newlines (but can contain HTML line-breaks, paragraph tags, etc).

Example

You have specified announcements for 0, 1, 2, 5, 7, “all”, “before last”, and “end”. In Session settings you set the number of rounds to 6.

This is what the players see:

Before play	0
After Round 1	1
After Round 2	2
After Round 3	all
After Round 4	all
After Round 5	before last
After Round 6	End

The “before last” takes priority over round 5. The Round 5 and 7 notices are not used.

5. Multiple Announcements Examples

{
  "table_announcements": [
    {
      "round": 0,
      "html": "<h1>Welcome to today’s session</h1>"
    },
    {
      "round": 10,
      "html": "<h1>Thank you for playing!</h1><p>See you at the county Swiss pairs<p>"
    },
    {
      "round": "all",
      "html": "<h1>More rounds still to come!</h1>"
    }
  ]
}

Download BLANK config file here (Right-click and Save)

6. Useful links

HTML Online	HTML Online is an online rich editor which you can edit use to make your table announcement and then copy the HTML.
W3Schools	W3Schools provide extensive HTML documentation with useful editable examples.
JSONLint	Use this to validate the JSON in your config file (if your JSON editor doesn't do this for you).
Online Toolz HTML Validator	Use this to validate your HTML (if your HTML editor doesn't do this for you)
YouTube	A link to a tutorial on how to make a table announcement.

7. Hints

At the end of each round, RealBridge displays the Scores window. Tell the players to close the Scores window to see the table announcements.
To understand how to load the config file, see https://realbridge.online/main-director-guide.html#advanced_director

Information Panels

This is created before the start of the session, using a config file. The method is like the method for creating a table notice. Instead of specifying a round-number, specify the “round” as “info”. For example:

{
    "table_announcements":
    [
        {
             "round":"info", 
             "html":"<p>The director today is Anne.</p><p>The next session starts at 2pm.</p>"
        }
    ]
}

The information panel can be used in addition to table notices, for example:

{
    "table_announcements":
    [
        {
            "round":0, 
            "html":"<p>Welcome to our monthly teams event.</p>"
         },
        {
            "round":"info",
            "html":"<p>The director today is Anne.</p><p>The next session starts at 2pm.</p>"
        }
    ]
}

Examples of how the information panel can be used

For new learners, playing MiniBridge or Bridge, the information panel can contain basic reminders, like the set of possible contracts, how to count points, etc.
As part of a lesson, the teacher can create a summary of what the lesson was about, and the students can refer to it whilst playing the practice deals.
For multi-session events, the Information panel can show the start times of later sessions, rules about qualification, etc.
You can use it to show information about the event or future sessions.
You could put a puzzle or a short article there for people to look at when they are sitting out.

Difference between the information panel and a table notice

The information panel is shown on demand when a player clicks the Information button. It can be shown at any time.

A table notice is shown automatically. It is shown before the start of the session, or at the end of a round.