Brainstorming: Styles of ListInfoItems

[MichaelKohler]

@Shepless came up with a fancy styling for the ListInfoItem popup for the App:

As we do not render HTML on the Remote, we can not display that. Therefore we should define layouts that are common use cases and implement those accordingly. What are these common use cases you would like to see us covering? I can definitely see how a multi-row, table-like text content would benefit users. Are there other layouts?

/cc @nklerk @tmrobert8

[tmrobert8]

What I'd like to do is eventually create a russound widget on the remote - I've done this using openHAB's HabPanel which is all grid based. FYI - https://community.openhab.org/t/custom-widget-russound-controller/26296 is an example of this - it's built using angularjs (in fact, I could create it in a few hours in the EUI since it uses the same tech). Bonus points if you allow dynamic widgets (ie widgets created on the fly - russound has a whole section where it creates windows/lists dynamically based on user actions). If you want me to make a movie showing the capabilities, I can.

What I'd like to see is a way to define a layout similar to CSS Grid layouts - where the cell itself can also support an CSS Grid Layout (to embed layout's within layouts). That would pretty much cover about 99% of your use cases I'd bet - although it would be a bit hard to replicate within your XML structure

[nklerk]

What I could use with my kodi driver is

Multiline text obviously, buttons in parallel that either have a NEEO defined icon or load an image. Image option that either scales to the image or can be set to a specific scale. Think of fanart, posters, banners.

Also important is a way to set that these list items are not part of a list itself. The reason I say this is that I had a header and a list item for filtering in my kodi driver but these items where included in the pagination counting. So I have a list item for the filter a header and items 0-63 the pagination counts the two earlier items as wel an the next pagination is 66-129 opposed to 64-127

[nklerk]

Image bars that can act as a browse or action.

[carp3-noctem]

I would like to be able to implement a Popup which is capable of displaying an small image (like Favorite Icon) then beside it using a Line to display the Title of a show, thereunder a Bar (0-100%) that is capable of changing via Start and Endtime. So i'm able to display Informations like EPG directly to the Remote. Also there need to be buttons like Switch to channel, Start Recording of this show.
Mainly used in Enigma2 And also good addition for the Kodi Implementation.

The Link Provided to the Picture entry is not Plublic! @MichaelKohler

[carp3-noctem]

One question from my side is open:
why not implement a html Styletyp handler in the Code that is "translating" the currently available forms and styles into the xml. this would make it easier for the programmer to provide such styles to the enduser then and should be capable of the currently available styles used by html and this smallers the bad code issue when only accepting straight words for building such things.

[Shepless]

In this case, I just "injected" a basic html structure and reused CSS classes that the NEEO app already had (e.g. icons, lists, headers). I do agree, some form of "advanced" UI options would be fantastic. I see you guys request a viewstructure from the API to build the UI which contain widgets/buttons/sliders etc. Also, you're using angular 1.5 so it would be very, very nice (but probably not the direction you want to go in) if developers could create their own angular custom component(s).

[tmrobert8]

@Shepless
The EUI uses angularjs, the TR2 uses some type of XML structure (custom?). I highly doubt they do an automated conversion between the two because it would be very difficult (and since you have different bugs on EUI than on TR2 - makes sense they are keeping two different code bases).

Awhile back, I created a MIIM attack on the TR2 that allows me to modify the XML structure in transit and it worked great (basically used XSLT transformations on the XML to modify the placement of stuff, could also add/remove items as well). I'd really like the ability to do that from a plugin instead.

[pfiaux]

We've updated the next branch with some features that will be available in the next firmware release. One of them is a limited set of icon buttons, here's an example:
https://github.com/NEEOInc/neeo-sdk-examples/blob/next/lib/playerComponent/browserService.js#L75

I think the original goal of this issue was to gather some ideas about what components are needed (specifically on the lists). I think we're getting a bit sidetracked with the implementation details here. As a developer I understand that it's better if you can implement your own custom components than if you're limited to a set of available components. However that's a much larger undertaking than adding a few highly needed components first.

So perhaps another way to phrase the question, and bring it back to the needs, if you had access to build your own custom components (XML, angular or other technology driving it): what components would you implement first?

To summarize the suggestions so far we have:

• multi line text (as a list item? or via pop up listed below?)
• buttons with icons in a row (should be covered by the example above, without images)
  • A way to make these rows "sticky" or perhaps as header items (that stay at the top or show if you scroll up)
• image bar list item (list item which is a wide image, no or optional text)
• more advanced pop ups or dialog screen
  • ability to include images
  • text
  • multiple actions

[carp3-noctem]

Multi Line Text:
Definitely as list Item. As example imagine the following: you read out the series and display it as bold top entry on the second line you can then display the season or the topic of a single episode
For sticky items best would be to have a chance to have a top and a buttom

Also nice to have multiple "buttons" per list item (don't know if allready possible or not.)

[nklerk]

Besides it would be difficult to support custom UI elements it will eventually make a mess. Having standardized UI elements will be a better long term strategy in my honest opinion. Elements that allow us to resent a bunch of text and some different sized images would be of great help.

[tmrobert8]

We have to be careful with terminology here because the examples you gave have really combined three UI type aspects - layouts (button row), behaviors (popups) and controls (multiline, etc).

As to each one:
Layouts
You REALLY need a grid layout - something similar to CSS3 grid (not as complicated as that however) that would allow specifying columns/rows, sizing, spanning and cell padding (with grids being allowed embedded within a cell). As a plugin author, I want to be able to create a widget layed out the way I need it to.

Out of everything, this would be the number 1 issue on my list since you have this beautiful UI with an absolutely terrible interface because things are layed out so badly. I'd love to do it as an end user but I would rather do it as a plugin writer (or widget writer?). This is my biggest frustration right now with the remote in that I can't get things layed out the way I'd like them to.

My end goal would be to replicate the my russound app like I did with habpanel (https://community.openhab.org/t/custom-widget-russound-controller/26296) - that shows you the range of layout, behaviors and controls I'd like..

Behaviors

1. Absolutely need popups - I can't even begin to understate how many use cases this would cover.
2. Beyond popups, the ability to shift screens automatically in respond to some user or system action

Controls

1. Image buttons - this should be pretty easy to do since you already have an image control and a button
2. Drop down lists - I can kinda simulate them with directories today but would like them more official
3. Spinner - very similar to a slider (could even use the same range underlying the slider - but a spinner represenation).
4. More control over labels for each control (ie label visible or not) and an option to suppress the device name in the label (which I HATE!)

[tmrobert8]

Just another quick add - the ability to set font size/weight (and italic) would be great. Bonus points for font family but not really needed