warp view display

Display component

type = display

Displays alphanumeric value, a date or a duration

CSS vars

• Size
  • --warp-view-chart-width
  • --warp-view-chart-height
• Colors
  • --warp-view-font-color

Events

See common events

Data format

GTS, GTS array or complex data.

Specific complex data params

See common params

Specific options and globalParams

See common options

Name	Type	Default	Description
timeMode	string	'custom'	date, duration or custom, custom by default
bgColor	string		Background color
fontColor	string		Font color

Samples

Duration

<warpview-tile
          url="https://warp.senx.io/api/v0/exec"
          responsive="true"
          type="display">
{ 'data' NOW 5 s - 'globalParams' { 'timeMode' 'duration' } }
</warpview-tile>

Date

<warpview-tile
          url="https://warp.senx.io/api/v0/exec"
          responsive="true"
          type="display">
{ 'data' NOW 'globalParams' { 'timeMode' 'date' } }
</warpview-tile>

Custom

<warpview-tile
          url="https://warp.senx.io/api/v0/exec"
          responsive="true" unit="°C"
          type="display">
{ 'data' 42  'globalParams' { 'timeMode' 'custom' } }
</warpview-tile>

<warpview-tile
          url="https://warp.senx.io/api/v0/exec"
          responsive="true" unit="°C"
          type="display">
{
  'data' { 'text' 'SenX.io' }
  'globalParams' { 'bgColor' '#f57f17' 'fontColor' '#bc5100' }
}
</warpview-tile>

<warpview-tile
          url="https://warp.senx.io/api/v0/exec"
          responsive="true" unit="°C"
          type="display">
{
  'data' { 'text' 'SenX.io' 'url' 'https://senx.io' }
}
</warpview-tile>