LevityDash v0.2.0b1 - UI/UX Update

[noblecloud]

TLDR:

The main focus of this release is improvement to the UI/UX. Several configuration options and a few new modules have been added to support a better overall look and feel. Performance has also been improved with faster loading and threaded graph rendering.

TLDR Change Log:

• New Modules
  • Mini-Graph
  • Stack
  • Titled Group
• Better text size handling
• Text styling support (experimental)
• Colors can now be specified with a hex string, a sequence of rgb/rgba values, or by web color name
• Icon/glyph support
• Metric and Imperial size support for MOST size options
• Shared/Cascading Attributes
• Borders
• Unit conversion
• Removed qasync dependency
• Significantly better multithreading due to removal of qasync
• Many under-the-hood improvements
• Popover details for graphs
• Significantly faster peak calculation (around 10x)
• history timeseries changes now published

---

Full Change Log:

Text

Text size is much more consistent and many style options have been added. Default font weights have been reduced.

---

Matching Groups

Each group is then split into smaller clusters based on item size and position. Whenever any of the items in a subgroup changes, the group checks if the new value will cause the size to change. If the change does result in a size change, a resize is triggered for all items in the group.

If more consistency is required, 'matchAll' can be set to true which forces all items in the group to be resized together rather than in clusters.

Example:

- type: text
  ...
  text: Hello World
  matchGroup:
    group: stack.text
    matchAll: true

There are two types of matching groups, relative and named.

Relative Groups:

Relative groups are defined with the format {group-type}.{subgroup}. Valid group options are, parent, local, global or by any item type's tag, (e.g. text, group, stack, etc). The sub-group can be any valid string. When an Item is provided with a tag relative group, the item looks through its parent hierarchy and joins the earliest match. If a match is not found, the item is added to the global group.

Named Groups:

Named groups are defined with the format {name}@{subgroup} and requires the item have an ancestor with the matching name set. Similarly to relative groups, the subgroup can be any valid string. Absolute groups, like relative groups, join the earliest, correctly named ancestor's group. If a match is not found, the item is added to the global group.

Group Descriptions:

Group Type	Description	Fallback
local.	The item's immediate group	self
parent.	The parent group of the local group	local
global.	The global group	global
{tag}.	The first group of the given tag	global
{name}@	The first item of the given name	global

---

Text Styling

Font family, font weight ¹ and color can now be configured for each Text item.

Text Scaling Options:

Text in labels can have three different options for how the text is scaled and the anchor point for the scale. The text is always scaled to fit the available space unless the text is in a matching group. This option changes how the height and anchor point are calculated.

fill Height is calculated from the text's bounding box; anchor point is the center of the text's bounding box or whichever edge/corner is the appropriate anchor point for the alignment. This option creates very inconsistent results and should not be used for text except in a few special cases. For icons/glyphs, this is the default option.

font Height is calculated using the font families ascent and descent attributes. The anchor is the fonts "strikeout" position. This provides the most consistent results, but since rarely does the text actually use the full height of the font, it can result in a lot of wasted space.

auto This is the default mode for text. Height is calculated by the height of the pipe, |, character or the height of the text's bounding box, whichever is largest. Like Font, the anchor point is the "strikeout" position. This option is a happy medium between Fill and Font since most font's basic characters are shorter than |.

---

Icon Libraries

Icon Library support has also been added. An icon can be set to any Text item under the icon property with the format 'icon-pack-prefix:icon-name'. For example, fa:fa-battery-full, wi:wi-day-sunny, and mdi:mdi-weather-sunny are all valid icon names.

Supported Icon Packs

Icon Pack	Prefix
FontAwesome	fa
Weather Icons	wi
MaterialDesignIcons	mdi

---

Metric/Imperial Sizing Support

Support has been added for metric and imperial sizes. Physical size support has not yet been implemented into every size config option, but most of the important should be covered. Please submit an issue if you find somewhere that does not behave as expected when providing a metric/imperial value.

Qt does not always get the pixel density/dpi correct. This will result in physical sizes being converted to pixels incorrectly. If you find that physical sizes are not correct, you can manually set the dpi option in the main config file's Display section.

---

Borders

Items can now be configured with borders. Configuration is limited to styling as a whole; individual edges can only be enabled or disabled. Support for individually styled edges will be added at a later date.

Currently, borders have the following adjustments

option	description
edges	which edges to include, default is all
weight	the weight of the border in pixels or physical units
color	the color of the border
size	how long the border should be either as a percentage or an absolute value; default is 100%
offset	the distance from the edge of the item to the edge of the border
opacity	the opacity of the border

---

Stacks

For easier consistency and faster dashboard creation, Stack grouping support has been added. Just as they sound, Stacks are a way to group items together in a vertical or horizontal stack. Items in a stack are automatically evenly sized unless otherwise specified. Before, everything had to be laid out by hand either in the dashboard config file, which made major changes tedious, or through the UI, which made major changes difficult to keep consistent.

Basic stack feature support:

• spacing
• padding
• dividers
• spacers
• individual/fixed/min/max item size
• drag and drop re-ordering

Stack Dividers:

The configuration options for stack dividers is very similar to the border options with the exception that offset and edges are not available. There is currently no support for styling and disabling individual dividers.

Stack Spacers:

Stack spacers are a way to add empty space to a stack. They can be configured with a fixed size or a percentage of the stack's size. Spacers are an extension of the base panel class, as such, they have all the same options as any other panel/module.

---

Shared/Cascading Attributes

This is a feature that I have been wanting to add for a while, but I was unsure how to implement it. I'm not fully content with the current implementation, but it is functional. Essentially, config options including any of their sub options within the shared: option are passed down to all the items sub-items. When a sub-item's state is being set or updated, the sub-item updates the incoming state dictionary with the relevant items from the shared state dictionary. This is useful when you want to apply a text size matching group to all the items in a group or stack, like in the example below.

- type: group
  name: indoor
  shared:
    title:
      height: 4mm
      matchingGroup:
        group: indoor@title
  items:
  - type: realtime.text
    key: indoor.temperature.temperature
    title:
      text: Dew Point
  - type: realtime.text
    key: indoor.temperature.dewpoint
    title:
      text: Apparent

---

This discussion was created from the release LevityDash v0.2.0b1 - UI/UX Update.

Footnotes

1. Qt does some weird things with font weight, so using the built-in QFont.setFontWeight does not work for certain fonts. A solution was eventually found that works, but it is not as simple as setting the weight and is largely untested. ↩