Grid device view - status text changed to one line only?

[alexbk66]

At some stage I noticed that the the status text in now only one line? Why is that? Is there any setting in the SDK to enable multi-line text?

Before:

Now:

https://forums.homeseer.com/forum/developer-support/hs4-development-private/hs4-plugin-development/1509154-grid-device-view-status-text-changed-to-one-line-only

[alexbk66]

I found the CSS causing this, but how can I disable that?

[spudwebb]

No there isn't any setting in the SDK to enable status line wrapping in grid view (Note that in list view status line does wrap)

tracked as HS-1485

[alexbk66]

But why was it changed? It was working before.

[spudwebb]

I'm not sure but I think it was changed when version 4.2 was introduced. In this version you can have multiple features displayed as primary features in the same card, so probably needed more space in the card to accommodate for that. I will ask Rich if that can be changed back.

[alexbk66]

It has to be changed, it's quite useless now

[alexbk66]

You can't just make such changes after two years of HS4 release. It breaks existing plugins without any log warning or so. Do I have to redesign my plugins to add more devices with short single line status?

It was the whole idea of HS4 to create grid (tiles) user interface - but if just truncates the device status - it's just crap.

[jldubz]

@alexbk66, Your feedback and input is appreciated and has been taken into consideration as we continue to move the HS Platform forward.

This change was made as part of a larger set of changes to the HS Platform in v4.2 with the goal of optimizing and better structuring the user experience. In HS4 we introduced the grid view to the devices page - replacing the list view. Based on user feedback, we re-introduced the list view. We understand that both of these views have their purposes, and both are necessary.

The grid is designed to be:

• Compact
• Quick to use
• Beginner friendly

The list is designed to be:

• Spaced out
• Detailed
• Management friendly

To achieve this, the cards on the grid must adhere to a strict structure. If they don't then cards can overtake the screen, defeating the purpose of the grid view.

For example - all of the other cards on the same row as the card that I blew out the status of with lorem ipsum are stretched to match. This situation stops the user from being able to quickly use the devices on their grid. This is because these kinds of varying sizes on the grid disturb the eye-scanning pattern that humans will naturally fall into to locate info on the page, and it severely limits the number of devices that can be displayed on the screen at once. The current grid cards also have a maximum height to help avoid this.

Here is a good article that briefly talks about some of this stuff like Z vs F eye scanning patterns Visual Hierarchy: Organizing content to follow natural eye movement patterns We determined that users typically scan the grid in a Z pattern - looking for a particular kind of feature - and then they will scan the individual card in an F pattern - looking for specific info.

The design team spent some time talking through this situation, and we will be expanding the status text to 2 lines of text on the grid based on your feedback. It will not be expanded on the grid device card beyond this. We looked at the different scenarios a user might be in where they would need to see all of the text being displayed.

• The user has asked a speaker for the status by voice
  • This is an irrelevant scenario as there is no UI involved in this interaction
• The user has connected to their system to specifically seek out this device and its status
  • From the grid card the user can click the card to view a popup of the device as it would show in the list. This will display the entire text on screen.
  • From the list the entire text is already being displayed
  • Obtaining detailing information about a specific device is not exactly a "quick" action
• The user has a dashboard-like screen that displays this device and they are seeking info at a glance
  • The current implementation does not meet this need; however, HSTouch can be used to achieve the desired result until a better solution is provided.
  • The grid is not designed to perform as a dashboard. We are actively working on incorporating a custom dashboard mechanism into the HS Platform. This feature will allow you more control over the display of the different cards on screen.

Another way we can approach this is by designing a special weather device card, similar to how thermostats and media devices have a special card. We are open to input on the design of the weather card; so if you have a particular idea of how it would look to best display the info you need for your weather plugin I'd love to see a mock-up. (The media card was created based on a request from another plugin dev)

[alexbk66]

Hi Luke,

I understand the reasoning, no need to explain.

But one line for main status is not sufficient. Why showing me the "lorem ipsum" example?

As software developers you must come up with the solution - instead of reasons why you can't do it. Talking from my 33 years experience in SW engineering.

Can't you just use max-height css to limit each device line height to say 2-3 lines?

At least add css class to the fields so users can adjust it to their liking.

Thank you,

Alex

---

From: Jon-Luke West @.> Sent: Thursday, 2 December 2021 13:52 To: HomeSeer/Plugin-SDK @.> Cc: Alex Khassapov @.>; Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

@alexbk66https://github.com/alexbk66, Your feedback and input is appreciated and has been taken into consideration as we continue to move the HS Platform forward.

This change was made as part of a larger set of changes to the HS Platform in v4.2 with the goal of optimizing and better structuring the user experience. In HS4 we introduced the grid view to the devices page - replacing the list view. Based on user feedback, we re-introduced the list view. We understand that both of these views have their purposes, and both are necessary.

The grid is designed to be:

• Compact
• Quick to use
• Beginner friendly

The list is designed to be:

• Spaced out
• Detailed
• Management friendly

To achieve this, the cards on the grid must adhere to a strict structure. If they don't then cards can overtake the screen, defeating the purpose of the grid view.

For example - all of the other cards on the same row as the card that I blew out the status of with lorem ipsum are stretched to match. This situation stops the user from being able to quickly use the devices on their grid. This is because these kinds of varying sizes on the grid disturb the eye-scanning pattern that humans will naturally fall into to locate info on the page, and it severely limits the number of devices that can be displayed on the screen at once. The current grid cards also have a maximum height to help avoid this.

[psdk-gh-227-overflow_on_cards]https://user-images.githubusercontent.com/1074249/144344915-cf17ef35-121a-4512-a6c6-74718d6585e5.png

Here is a good article that briefly talks about some of this stuff like Z vs F eye scanning patterns Visual Hierarchy: Organizing content to follow natural eye movement patternshttps://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns We determined that users typically scan the grid in a Z pattern - looking for a particular kind of feature - and then they will scan the individual card in an F pattern - looking for specific info.

The design team spent some time talking through this situation, and we will be expanding the status text to 2 lines of text on the grid based on your feedback. It will not be expanded on the grid device card beyond this. We looked at the different scenarios a user might be in where they would need to see all of the text being displayed.

• The user has asked a speaker for the status by voice
  • This is an irrelevant scenario as there is no UI involved in this interaction
• The user has connected to their system to specifically seek out this device and its status
  • From the grid card the user can click the card to view a popup of the device as it would show in the list. This will display the entire text on screen.
  • From the list the entire text is already being displayed
  • Obtaining detailing information about a specific device is not exactly a "quick" action
• The user has a dashboard-like screen that displays this device and they are seeking info at a glance
  • The current implementation does not meet this need; however, HSTouch can be used to achieve the desired result until a better solution is provided.
  • The grid is not designed to perform as a dashboard. We are actively working on incorporating a custom dashboard mechanism into the HS Platform. This feature will allow you more control over the display of the different cards on screen.

Another way we can approach this is by designing a special weather device card, similar to how thermostats and media devices have a special card. We are open to input on the design of the weather card; so if you have a particular idea of how it would look to best display the info you need for your weather plugin I'd love to see a mock-up. (The media card was created based on a request from another plugin dev)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/HomeSeer/Plugin-SDK/issues/227#issuecomment-984244274, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AATKPQ7FXPKIP3GAMZMFZD3UO3NN3ANCNFSM5IN2G6ZA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[alexbk66]

Nothing wrong with 2-3 lines?

---

From: Alex Khassapov @.> Sent: Thursday, 2 December 2021 14:13 To: HomeSeer/Plugin-SDK @.>; HomeSeer/Plugin-SDK @.> Cc: Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

Hi Luke,

I understand the reasoning, no need to explain.

But one line for main status is not sufficient. Why showing me the "lorem ipsum" example?

As software developers you must come up with the solution - instead of reasons why you can't do it. Talking from my 33 years experience in SW engineering.

Can't you just use max-height css to limit each device line height to say 2-3 lines?

At least add css class to the fields so users can adjust it to their liking.

Thank you,

Alex

---

From: Jon-Luke West @.> Sent: Thursday, 2 December 2021 13:52 To: HomeSeer/Plugin-SDK @.> Cc: Alex Khassapov @.>; Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

@alexbk66https://github.com/alexbk66, Your feedback and input is appreciated and has been taken into consideration as we continue to move the HS Platform forward.

This change was made as part of a larger set of changes to the HS Platform in v4.2 with the goal of optimizing and better structuring the user experience. In HS4 we introduced the grid view to the devices page - replacing the list view. Based on user feedback, we re-introduced the list view. We understand that both of these views have their purposes, and both are necessary.

The grid is designed to be:

• Compact
• Quick to use
• Beginner friendly

The list is designed to be:

• Spaced out
• Detailed
• Management friendly

To achieve this, the cards on the grid must adhere to a strict structure. If they don't then cards can overtake the screen, defeating the purpose of the grid view.

For example - all of the other cards on the same row as the card that I blew out the status of with lorem ipsum are stretched to match. This situation stops the user from being able to quickly use the devices on their grid. This is because these kinds of varying sizes on the grid disturb the eye-scanning pattern that humans will naturally fall into to locate info on the page, and it severely limits the number of devices that can be displayed on the screen at once. The current grid cards also have a maximum height to help avoid this.

[psdk-gh-227-overflow_on_cards]https://user-images.githubusercontent.com/1074249/144344915-cf17ef35-121a-4512-a6c6-74718d6585e5.png

Here is a good article that briefly talks about some of this stuff like Z vs F eye scanning patterns Visual Hierarchy: Organizing content to follow natural eye movement patternshttps://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns We determined that users typically scan the grid in a Z pattern - looking for a particular kind of feature - and then they will scan the individual card in an F pattern - looking for specific info.

The design team spent some time talking through this situation, and we will be expanding the status text to 2 lines of text on the grid based on your feedback. It will not be expanded on the grid device card beyond this. We looked at the different scenarios a user might be in where they would need to see all of the text being displayed.

• The user has asked a speaker for the status by voice
  • This is an irrelevant scenario as there is no UI involved in this interaction
• The user has connected to their system to specifically seek out this device and its status
  • From the grid card the user can click the card to view a popup of the device as it would show in the list. This will display the entire text on screen.
  • From the list the entire text is already being displayed
  • Obtaining detailing information about a specific device is not exactly a "quick" action
• The user has a dashboard-like screen that displays this device and they are seeking info at a glance
  • The current implementation does not meet this need; however, HSTouch can be used to achieve the desired result until a better solution is provided.
  • The grid is not designed to perform as a dashboard. We are actively working on incorporating a custom dashboard mechanism into the HS Platform. This feature will allow you more control over the display of the different cards on screen.

Another way we can approach this is by designing a special weather device card, similar to how thermostats and media devices have a special card. We are open to input on the design of the weather card; so if you have a particular idea of how it would look to best display the info you need for your weather plugin I'd love to see a mock-up. (The media card was created based on a request from another plugin dev)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/HomeSeer/Plugin-SDK/issues/227#issuecomment-984244274, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AATKPQ7FXPKIP3GAMZMFZD3UO3NN3ANCNFSM5IN2G6ZA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[jldubz]

@alexbk66

The design team spent some time talking through this situation, and we will be expanding the status text to 2 lines of text on the grid based on your feedback. It will not be expanded on the grid device card beyond this.

[alexbk66]

Luke,

May I suggest to have different limits on the max-height (i.e. by assigning different css class) depending if there's any other devices or controls on the tile.

I.e. if there's only one device - then 3 lines should be fine?

Thank you,

Alex

---

From: Alex Khassapov @.> Sent: Thursday, 2 December 2021 14:20 To: HomeSeer/Plugin-SDK @.>; HomeSeer/Plugin-SDK @.> Cc: Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

Nothing wrong with 2-3 lines?

[cid:4ad82472-8d06-4118-b90d-ac15d9c394c6]

---

From: Alex Khassapov @.> Sent: Thursday, 2 December 2021 14:13 To: HomeSeer/Plugin-SDK @.>; HomeSeer/Plugin-SDK @.> Cc: Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

Hi Luke,

I understand the reasoning, no need to explain.

But one line for main status is not sufficient. Why showing me the "lorem ipsum" example?

As software developers you must come up with the solution - instead of reasons why you can't do it. Talking from my 33 years experience in SW engineering.

Can't you just use max-height css to limit each device line height to say 2-3 lines?

At least add css class to the fields so users can adjust it to their liking.

Thank you,

Alex

---

From: Jon-Luke West @.> Sent: Thursday, 2 December 2021 13:52 To: HomeSeer/Plugin-SDK @.> Cc: Alex Khassapov @.>; Mention @.> Subject: Re: [HomeSeer/Plugin-SDK] Grid device view - status text changed to one line only? (Issue #227)

@alexbk66https://github.com/alexbk66, Your feedback and input is appreciated and has been taken into consideration as we continue to move the HS Platform forward.

This change was made as part of a larger set of changes to the HS Platform in v4.2 with the goal of optimizing and better structuring the user experience. In HS4 we introduced the grid view to the devices page - replacing the list view. Based on user feedback, we re-introduced the list view. We understand that both of these views have their purposes, and both are necessary.

The grid is designed to be:

• Compact
• Quick to use
• Beginner friendly

The list is designed to be:

• Spaced out
• Detailed
• Management friendly

To achieve this, the cards on the grid must adhere to a strict structure. If they don't then cards can overtake the screen, defeating the purpose of the grid view.

For example - all of the other cards on the same row as the card that I blew out the status of with lorem ipsum are stretched to match. This situation stops the user from being able to quickly use the devices on their grid. This is because these kinds of varying sizes on the grid disturb the eye-scanning pattern that humans will naturally fall into to locate info on the page, and it severely limits the number of devices that can be displayed on the screen at once. The current grid cards also have a maximum height to help avoid this.

[psdk-gh-227-overflow_on_cards]https://user-images.githubusercontent.com/1074249/144344915-cf17ef35-121a-4512-a6c6-74718d6585e5.png

Here is a good article that briefly talks about some of this stuff like Z vs F eye scanning patterns Visual Hierarchy: Organizing content to follow natural eye movement patternshttps://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns We determined that users typically scan the grid in a Z pattern - looking for a particular kind of feature - and then they will scan the individual card in an F pattern - looking for specific info.

The design team spent some time talking through this situation, and we will be expanding the status text to 2 lines of text on the grid based on your feedback. It will not be expanded on the grid device card beyond this. We looked at the different scenarios a user might be in where they would need to see all of the text being displayed.

• The user has asked a speaker for the status by voice
  • This is an irrelevant scenario as there is no UI involved in this interaction
• The user has connected to their system to specifically seek out this device and its status
  • From the grid card the user can click the card to view a popup of the device as it would show in the list. This will display the entire text on screen.
  • From the list the entire text is already being displayed
  • Obtaining detailing information about a specific device is not exactly a "quick" action
• The user has a dashboard-like screen that displays this device and they are seeking info at a glance
  • The current implementation does not meet this need; however, HSTouch can be used to achieve the desired result until a better solution is provided.
  • The grid is not designed to perform as a dashboard. We are actively working on incorporating a custom dashboard mechanism into the HS Platform. This feature will allow you more control over the display of the different cards on screen.

Another way we can approach this is by designing a special weather device card, similar to how thermostats and media devices have a special card. We are open to input on the design of the weather card; so if you have a particular idea of how it would look to best display the info you need for your weather plugin I'd love to see a mock-up. (The media card was created based on a request from another plugin dev)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/HomeSeer/Plugin-SDK/issues/227#issuecomment-984244274, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AATKPQ7FXPKIP3GAMZMFZD3UO3NN3ANCNFSM5IN2G6ZA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[jldubz]

@alexbk66,

Absolutely. That is a great suggestion. I'll add that as a consideration as we continue to define the spec for the grid cards.

[spudwebb]

Fixed in HS 4.2.8.0 status is now wrapped on 2 lines