Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Problem: I want to modify the original UI
#1
Hello.

I want to enjoy moodeaudio with a small tft module.
However, the original UI has too much information to make it difficult to see song names.
So I wanted to make some changes to the original UI, but I couldn't.
I want to hide the column painted orange in the attached image. Is it possible with a slight improvement?
Thank you for your help.

   
Reply
#2
@mimi3



There's nothing slight about the code changes required. Are you looking for advice on where to look so you can make changes or are you expecting someone else to do it for you?

Rather than modify existing code to drive my 3.5" HDMI display, I decided to embark on a side project. I chose to implement my own "local" display using the raw Linux framebuffer instead of the X11/Chrome apparatus. This project is still in its early days and I have nothing to post yet. 

Regards,
Kent
Reply
#3
(02-27-2020, 01:40 PM)TheOldPresbyope Wrote: @mimi3



There's nothing slight about the code changes required. Are you looking for advice on where to look so you can make changes or are you expecting someone else to do it for you?

Rather than modify existing code to drive my 3.5" HDMI display, I decided to embark on a side project. I chose to implement my own "local" display using the raw Linux framebuffer instead of the X11/Chrome apparatus. This project is still in its early days and I have nothing to post yet. 

Regards,
Kent

Yes. I'm looking for advice on where to look to make changes.

I use a 2.0x320x240, but with this size the default UI is too much information.
Reply
#4
@mimi3

So, moOde generates and serves HTML pages full of CSS and Javascript code with just a touch of raw HTML.

The local-display function is implemented via Chrome running over X11 and rendering the same HTML pages which are served to full browsers on remote devices. (This clever scheme was birthed by a user many releases ago, back in the days when all we had for communication was a single thread on the diyAudio forum.)

The obvious approach to getting what you want is to modify each generated HTML page so that it will render differently on a local (e.g., limited) and a remote (e.g., full) display.

There's no published moOde technical guide for this. 

At a minimum, you need to know CSS and Javascript to understand how the existing HTML pages are rendered in the browser.

Then, to modify the way the pages are rendered locally vs remotely, you'll need to trace back from the page contents to the constituent .js and .css files in moOde's codebase and make your changes in them (with luck, maybe just one or so .css files). Detecting whether the display is local vs remote will be a fun little sidebar exercise.

An alternative approach which springs to mind is to generate dual versions of each page, one for local (limited) and one for remote (full) displays, serve them via different IP ports, and modify the local-display configuration to read the limited version instead of the original. Now you need to know PHP too.

My personal calculation was that I couldn't do either in a finite amount of time because I'm barely literate in PHP and JS/CSS. That's why I chose a third possibility: use the information in the currentsong.txt file to populate my own display, rendering not via HTML but directly into the Linux framebuffer, using Python, a language in which I'm acceptably proficient.

YMMV

Regards,
Kent
Reply
#5
(02-27-2020, 03:37 PM)TheOldPresbyope Wrote: @mimi3

So, moOde generates and serves HTML pages full of CSS and Javascript code with just a touch of raw HTML.

The local-display function is implemented via Chrome running over X11 and rendering the same HTML pages which are served to full browsers on remote devices. (This clever scheme was birthed by a user many releases ago, back in the days when all we had for communication was a single thread on the diyAudio forum.)

The obvious approach to getting what you want is to modify each generated HTML page so that it will render differently on a local (e.g., limited) and a remote (e.g., full) display.

There's no published moOde technical guide for this. 

At a minimum, you need to know CSS and Javascript to understand how the existing HTML pages are rendered in the browser.

Then, to modify the way the pages are rendered locally vs remotely, you'll need to trace back from the page contents to the constituent .js and .css files in moOde's codebase and make your changes in them (with luck, maybe just one or so .css files). Detecting whether the display is local vs remote will be a fun little sidebar exercise.

An alternative approach which springs to mind is to generate dual versions of each page, one for local (limited) and one for remote (full) displays, serve them via different IP ports, and modify the local-display configuration to read the limited version instead of the original. Now you need to know PHP too.

My personal calculation was that I couldn't do either in a finite amount of time because I'm barely literate in PHP and JS/CSS. That's why I chose a third possibility: use the information in the currentsong.txt file to populate my own display, rendering not via HTML but directly into the Linux framebuffer, using Python, a language in which I'm acceptably proficient.

YMMV

Regards,
Kent

Thank you for explaining in detail.

Let's try the third way.
Reply
#6
(02-28-2020, 02:44 PM)duracell80 Wrote:
(02-27-2020, 12:44 PM)mimi3 Wrote: Hello.

I want to enjoy moodeaudio with a small tft module.
You might get some ideas from the OLED script I modified that leans on currentsong.txt and MPD.
https://github.com/duracell80/MoodeAudio-OLED
A separate UI would be needed in the /var/www actually a couple of brand new UI's would be helpful. Like /var/www/screen/240 etc.

Thanks for the hint.

I will refer to it.
Reply


Forum Jump: