Creating a SmartPanel - A step by step guide

The essential concepts are:

Widget: this is a layout component that shows information about a particular thing, e.g. the Weather, or a Train Station.

Layout: this is the particular choice and configuration of widgets that makes up your preferred combination on the display.

Display: this is the computer and screen you use to show off your SmartPanel. It will be assigned a unique web address to access the content.

Note to display your SmartPanel, whatever you are using, you will be visiting the web address assigned to that display, such as this one-widget simple cut-down smartpanel that only displays the weather for Cambridge:

https://smartcambridge.org/smartpanel/display/VFJI-5497/

Step 1: From the smartcambridge.org homepage, click "View" on the SmartPanels card:

This will take you to the SmartPanel general information page, note the limited menu options on the left of the page:

Step 2: Sign in

If you haven't already registered as a user you'll need to do that first via the 'Sign Up' option, otherwise go ahead and click the 'Sign In' left-menu option.

After you sign in the page left-menu will display the expected options to create and view smartpanels:

Step 3: click the New SmartPanel Layout left-menu option

OK here it startes to get more exciting, a default starting layout page will appear to which you can add widgets, configure widgets to the settings you want, and resize them and move them around.

We're going to create the simplest possible SmartPanel layout, consisting of a single widget, namely the Weather Widget.

Step 4: configure the widget

You will see the 'layout configuration' page has given you a single initial starting widget, in the top left-hand corner. You can drag this around or change its size in the usual way (click and drag the middle of the widget or the edges or corners).

However, for this simple example we will just 'configure' the widget by clicking on the 'Spanner' icon (I know, I should have inserted a graphic here but we're busy..)

The 'widget configuration' panel will open, the top drop-down of which allows you to select the type of widget you want, in this case we will choose Weather.

After choosing the weather location Cambridge you can click Save and return to the layout configuration page:

Step 5: Save the Layout

On the layout configuration page, in the top-left corner we have given the layout a name (Cambridge), the widget is showing it is configured as Cambridge Weather, so if we're happy we can now click Save to save this layout:

Step 6: Preview the Layout

After saving the layout, you will be taken to the page that lists all of your layouts, including this most recently created one you called "Cambridge", you can see it here after the green 'New Layout' card:

On your 'Cambridge' layout you can click 'View for a preview of the masterpiece you have created. with a bit of luck you'll see this:

Important note: At this point you are previewing how your panel will look. Even though the websight has generated a URL for this preview, it is not the URL you will be putting into your display. In a later step you will create a display and associate it with this layout, and the proper URL will be assigned then.

Step 7: Create a Display

Your layout preview from the step above opened in a new tab in your browser, so click back to the main website, and you will see a left-hand menu option New SmartPanel Display:

Clicking the New SmartPanel Display left-menu option will give you a simple page on which you can define your display screen:

You give the display a name (in this case Ian's Office) , then via the drop-down you assign a layout to it, in this case we're choosing the 'Cambridge layout we created a moment ago, and then you click on the map to record where your display will be located. This last step won't seem massively relevant now but we have an idea of allowing users to declare their displays public so anyone can browse a map and view displays that others have created. But we're not sure how best to do that yet.

When you click Save you'll be taken you your 'displays' page, and on the map you will see the display you have just created.

Step 8: Collect the URL for your display

This step is currently slightly clunkier that we'd like, but as of now you find the URL (i.e. web address) for your display on the map popup adjacent to the display of choice. I.e. in the map below where the popup says "Display Ian's Office, that is the link containing the required url, in this case it is:

https://smartcambridge.org/smartpanel/display/VFJI-5497/

Please note these layout configurations pages are designed to be more 'browser tolerant' than the SmartPanel display itself. The web components that make up the actual display are fairly complex, with real-time data arriving and all sorts of other data interface queries. So for the SmartPanel itself we have tried to ensure the SmartPanel will display using Chrome, Firefox, Apple Safari, Microsoft Edge and Microsoft IE11 but frankly it's a pain in the ass. If you have a free choice, I recommend Chrome, or (on Linux) chromium-browser. I have a general idea to put up a post 'how to configure a SmartPanel display' but haven't done that yet.

You can click that 'Ian's Office' link (or indeed the same link above), and you will see the SmartPanel you have created:

if you got this far, and had success, then Congratulations!!.