Main Content

Channel Display Widgets

Display custom visualizations on the private and public channel views. Widgets provide configurable improvements to your channels without having to write code.

Field Value Gauge

The field value gauge shows the present value of a field on an analog display. The needle position indicates the present value on the range determined by the gauge settings. You can add color coded regions to differentiate the gauge positions. Widgets created in the private view of your channel are private. You can generate public widgets on the public view of your channel.

Create a Gauge

  1. Select Channels > My Channels, and select the private or public view of your channel. Widgets generated on the private view of the channel are private. Widgets generated on the public view are public.

  2. Click Add Widgets.

  3. Select the Gauge widget, and set the gauge options.

Gauge Options

  • Name: The name is displayed on the title bar for your gauge visualization.

  • Field: Select the field used to determine the gauge value. Only enabled fields show in this list. You can enable fields in the Channel Settings.

  • Min: Specify the minimum gauge value as an integer.

  • Max: Specify the maximum gauge value as an integer.

  • Display Value: Check this box to show the numeric field value on the gauge.

  • Units: Specify the units to be displayed as a label below the gauge.

  • Tick Interval: Specify the separation between tick marks on the gauge, as an integer value. To ensure readability, the maximum number of ticks is 32.

  • Update Interval: Specify an integer value in seconds for the gauge widget to read the field value and update the display.

  • Range: Add custom colors for ranges on your gauge. Enter the maximum and minimum values for the range, and choose the color. Use the “+” icon to add more colored ranges. Ranges can overlap, but the lower range overwrites the preceding ranges.

Share a Widget

You can share a widget created on the public view of your page.

  1. Make your channel public. Use the Sharing tab to share the channel with everyone. Then share the URL for your public view; it has the form shown here.

    https://thingspeak.com/channels/<your channel ID>

  2. Share the private view of your channel. Use the Sharing tab to share the channel with a specific user email. Choose Share channel view only with the following users

  3. Share the URL of a widget created on the public view of your channel.

    1. Select Channels > My Channels, and select the Public View of your channel.

    2. Click Add Widgets and adjust the widget options.

    3. Click the pop-out icon on the top of the widget frame.

    4. Your browser opens the widget in a new window. Copy the URL from the address bar. The URL has the form shown here. You can share the URL with anyone you want to see your public gauge.

      https://www.thingspeak.com/channels/<channelID>/widgets/<widgetID>

Numeric Display Widget

The numeric display widget shows the present value of a field on your channel view. You can display integer or decimal representation of your numeric values. Widgets generated in the private view of your channel are private.

Create a Numeric Display

  1. Select Channels > My Channels, and select the private or public view of your channel. Widgets generated on the private view of the channel are private. Widgets generated on the public view are public.

  2. Click Add Widgets.

  3. Select the Numeric Display widget, and then set the display options.

Numeric Display Options

  • Name: The name is displayed on the title bar for your numeric display widget.

  • Field: Select the channel field used to determine the numeric display value. Only enabled fields show in this list. You can enable fields in the Channel Settings.

  • Update Interval: Specify an integer value in seconds for the gauge widget to read the field value and update the display.

  • Units: Specify the units to be displayed as a label below the numeric display value.

  • Data Type: Select the format for your numeric display. If you choose Decimal, you can also choose to show from one to five decimal places.

Share a Numeric Display

You can share a widget created on the public view of your page.

  1. Make your channel public. Use the Sharing tab to share the channel with everyone. Then share the URL for your public view; it has the form shown here.

    https://thingspeak.com/channels/<your channel ID>

  2. Share the private view of your channel. Use the Sharing tab to share the channel with a specific user email. Choose Share channel view only with the following users

  3. Share the URL of a widget created on the public view of your channel.

    1. Select Channels > My Channels, and select the Public View of your channel.

    2. Click Add Widgets and adjust the widget options.

    3. Click the pop-out icon on the top of the widget frame.

    4. Your browser opens the widget in a new window. Copy the URL from the address bar. The URL has the form shown here. You can share the URL with anyone you want to see your public gauge.

      https://www.thingspeak.com/channels/<channelID>/widgets/<widgetID>

Lamp Indicator

The lamp indicator displays a binary representation of a field value on your channel view. This widget compares a field value to a set threshold to determine the state of the lamp. Widgets created in the private view of your channel are private. You can generate public widgets on the public view of your channel. The left image shows a lamp indicator in the on state. The right image shows the off state.

Create a Lamp Indicator

  1. Select Channels > My Channels, and select the private or public view of your channel. Widgets generated on the private view of the channel are private. Widgets generated on the public view are public.

  2. Click Add Widgets.

  3. Select the Lamp Indicator widget, and set the options.

Lamp Indicator Options

  • Name: The name is displayed on the title bar for your lamp indicator widget.

  • Condition: First select the field to use, then set the condition that causes a change in the state of your lamp widget. Finally, enter the value used to trigger the change in lamp state.

  • Update Interval: Specify an integer value in seconds for the lamp Indicator widget to read the field value and update the display. The minimum value is 15 seconds.

  • Color: Set the color of the lamp indicator.

Share a Lamp Indicator Widget

There are three ways to share a widget.

  1. Make your channel public. Use the Sharing tab to share the channel with everyone. Then share the URL for your public view; it has the form shown here.

    https://thingspeak.com/channels/<your channel ID>

  2. Share the private view of your channel. Use the Sharing tab to share the channel with a specific user email. Choose Share channel view only with the following users

  3. Share the URL of a widget created on the public view of your channel.

    1. Select Channels > My Channels, and select the Public View of your channel.

    2. Click Add Widgets and adjust the widget options.

    3. Click the pop-out icon on the top of the widget frame.

    4. Your browser opens the widget in a new window. Copy the URL from the address bar. The URL has the form shown here. You can share the URL with anyone you want to see your public lamp indicator widget.

      https://www.thingspeak.com/channels/<channelID>/widgets/<widgetID>

Image Display

The Image Display widget shows the latest image written to an image channel.

Create an Image Display

Note

You add an Image Display widget to a private view of a regular channel. In the widget you specify the image channel you want to view. For information on creating and writing to image channels, see Create an Image Channel.

  1. Select Channels > My Channels, and select the private view of your channel.

  2. Click Add Widgets.

  3. Select the Image Display widget, and configure its parameters.

Image Display Parameters

  • Name: The name is displayed on the title bar for your Image Display widget.

  • Image Channel: Select one of your available image channels.

  • Update Interval: Specify an integer value in seconds for the widget to update the display.

  • Rotate: Select a rotation value for the image, as a multiple of 90°.

Related Topics

See Also

Functions