Simple idea to improve usability

[jsavage]

Hi, I have this working and am really pleased to have got this working so easily. So congratulations and thanks to Alexbain and any other contributors for getting this far. However, the current layout is not very usable where the number of commands exceeds about 10. If I understood how the interface has been built, I would have a go but I do not yet understand how it all works. The 'simple' improvement that I envisage is a change to display the same content in a grid format where the number of columns required is configurable. To keep things simple, the order could be left as the order that the buttons are defined in the lircd.conf file.

Any clues as to where to start would be helpful.

[paulgration]

Although I haven't contributed much to this yet, Alex and I were working on similar projects around the same time and I had always envisaged (in what I was working on), having some sort of UI base template/standard which people could use to create a replica of the real remote control so what you see on screen is laid out and appears just as the physical remote does but also have the ability to choose different layout views for when there is a large amount of screen real estate to make the most efficient use of the space (grid as you say, perhaps where you could customise the order of buttons based on the ones you use most) - just a couple of my own thoughts.

[jsavage]

OK - Note to self and others - After some research, the layout of the screen for lirc_web seems to be defined in constructs such as the following code within templates/index.swig.

I note from css in /css/app.less that btn-wide width is currently 100% . Wouldn't it be great if we could automatically create a grid of buttons in perhaps 3 columns in the same way?

An alternative approach I am investigating is using a photograph of the real remote and an image map. I have the image map / html page ready but need to work out how to modify the node webserver to serve the image.png located in the /static folder. At present, the image is not being served correctly. Chrome errors silently. Firefox states that the image contains errors - suspect this is something to do with content type but grateful for any ideas.

 <ul class="remotes-nav">
      {% for remote in remotes %}
        {% set remoteName = loop.key %}
        <li><a class="btn btn-wide btn-large btn-info" href="#{{ remoteName }}">{{ labelForRemote(remoteName) }}</a></li>
      {% endfor %}
</ul>