Aesthetic-web-server

[Antonio]

Hi, you can now change the board color. PicoChess offers several options for you to choose your favorite. Below the board, there's a button called "Color." Clicking it displays the colors in a carousel. I've also corrected the spacing of the evaluation bar on the web board, so now, when you start and stop the evaluation bar, the board doesn't move up and down as it did before. The space allocated to the PGN file has been increased proportionally, as it was previously too small compared to the container below.
It has been tested and works well at resolutions of 1024x600 (7-inch touchscreens), 1280x800 (10-inch touchscreens), and 400x800 (3.5-inch screens in portrait mode).

Testing, ideas, chess-related needs, etc., are welcome.

We're still testing!

[Dirk]

Cool, the color customization is a really great additional feature, Antonio!

I just tested the web version of pico4 for the first time (just the current master branch) on my 7 inch (1024x600) display and

the chromium browser has a main scrollbar on the button because the whole page does not fit.

I guess I have to wait for you latest changes in the master branch....

I think the clock output could be a little bit bigger (because this is ithe main info for me: times and moves) - but it looks better at least in your second screen shot - so I think I have to wait as well for that in master ;-)

One thing regarding the evaluation bar when switching on the analysis; 

I think the "jumping display of the board" because of the insertion of the bar ion top does not look nice. Maybe it is better to just the sho  eval bar  all the time (but only showing the eval when analysis is active of course).. just a thought.

Thanks Antonio!

Dirk

[Antonio]

Yes, the board jumps issue is fixed in the branch I mentioned. The evaluation bar is simply there, even though it's not visible.
In the screenshots I took, you can see the resolution at the top, although it's emulated since I don't have a 7-inch screen to test it (mine broke).
I would appreciate it if you could try the branch and let me know if you see the scroll bar. Thank you very much for your comment. After Johan has tested it for a while and deems it appropriate, he will add it to the main branch.

https://github.com/JohanSjoblom/picochess/tree/Aesthetic-web-server

[Antonio]

https://youtu.be/o87cqD9-VcY

[Dirk]

Wow - really nice, Antonio!

Am 11.11.2025 um 15:29 schrieb Antonio <antonio.z...@gmail.com>:

https://youtu.be/o87cqD9-VcY

--
You received this message because you are subscribed to the Google Groups "PicoChess" group.
To unsubscribe from this group and stop receiving emails from it, send an email to picochess+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/picochess/0c464119-487c-4294-947a-d980b4482169n%40googlegroups.com.

[Johan Sjöblom]

fantástico

In addition to changing colours etc, if I understand correctly you can set the resolution on the top bar. This could solve a lot of problems with different touch screens for Pi.

Antonio; In order to rebase this branch so that we can merge it we need a little bit of coordination:

1. you first have to inform me that you have done all the changes, and then pause with the changes...

2. I will then rebase your branch on master branch which creates changes in your branch, that is why we need the pause

3. to get your local machine back to sync you need to in this step do:

    > git fetch origin
    > git reset --hard origin/Aesthetic-web-server

You can write here or e-mail me when you have done step 1. I will do step 2. And then you have to do step 3 on your machine.

After this we can merge

-- Johan

[Antonio]

No Johan, the resolution is in the browser's development area. As I said before, I don't yet have a screen for the Raspberry Pi, so I've had to emulate the resolutions I think will be most commonly used with the Pi, such as 1280x800 (10" screen), 1024x600 (7" screen) - be careful, there's also a 7" screen that's 800x400 and it's too small - and then there are the higher resolutions of normal PC screens.

I think I'm going to take a break, since my vacation is coming to an end and I've reached the goal I set for myself with the progress and features I wanted, so I'm going to try what you suggested. We're still moving forward! With your permission, I've taken the liberty of giving us a little publicity on YouTube... hehehe

[Aldo Bleeker]

There are the RPi 7" and 5" Touch Display 2 screens as well, these are 1280x720 screens.

I have the 7", and Johan's current master branch shows up well on it. I just noticed that when analytics is enabled, the bar at the top pushes the screen down, and the White/Black indicator gets almost, but not quite, pushed off the screen.

Aldo

[Johan Sjöblom]

I have now made a PR out of Antonios solution by rebasing it on top of master. Its the only open pull request here:
https://github.com/JohanSjoblom/picochess/pulls

To test it you need to checkout this brand

# 1. Go to repo
cd /opt/picochess
# 2. Fetch all remote branches
git fetch origin
# 3. Create a local branch that tracks the pull request branch
git checkout -b Aesthetic-web-server origin/Aesthetic-web-server

When you now launch picochess it will run this branch... To get back to master do a

git switch master

Antonio, please take a backup copy of ALL YOUR files before you do the following to get in sync with this pull request:

You have to do this to get back in sync:

git fetch origin
git switch Aesthetic-web-server
git reset --hard origin/Aesthetic-web-server

The pull request includes all your web files, but no python file changes. If you had intended to change some python file, please let me know. Best is to put the file here or e-mail me the python file you have changed if any.

After git reset --hard you will have all your web files as they were before, but your python files will go to master version...

As said: Take backup of your files before you do this.

[Johan Sjöblom]

I played half a test game and changing colours work well. Nice!

The web client has the same challenge as it always has had, when you resize by dragging in the corner it does not update, but after clicking F5 it updates to the new "resolution".

There are of course still resolutions that gives a bad result like in the attached picture... But I don't see a big risk in this update.

[Aldo Bleeker]

Antonio's branch does improve the layout of the screen, the White/Black indicator stays in place and is visible. It's placed a bit low on the screen though, it would be lovely if it could be placed just a bit higher.

Aldo

[Johan Sjöblom]

This new Aestethic-web-server is now merged into main branch... You will get it on your next update.

[Dirk]

Hi Antonio,

unfortunately I still see the scrollbar on the button of a real 1024x600 display resolution on a 7 inch screen (with newest master branch).

Even if I surpress the pure display of all chromium scrollbars via chromium call option it looks like there are a few pixel in the width too many cause even without scrollbars the whole screen could b e moved vis touch screen a little bit to teh left and right:

It would be nice the teh web server could save the current color the user has set up or at least if it would be possible top specify an option in picochess.ini which then could be uses as a call parameter for teh web server creation somehow (or if this is not possible I would like to modify the files manually to set up my initial favorite color)!?

Thanks

Dirk

[Antonio]

Okay, mate, I'll keep that in mind for next time. Yeah, I already had the idea of ​​saving the chosen color in mind. The scroll bar thing is going to make me buy a 7-inch screen after all... hahaha. Cheers, and thanks for letting me know.

[Antonio]

De todas formas se puede probar esto:

En el archivo    /opt/picochess/web/picoweb/static/css/responsive-board.css                              buscar  "52%" y cambiarlo a "50%".   Debería quedar asi:

.container-fluid > .row > .col:last-child {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

Espero que funcione.

--------------------------------------------------------------------------------------------------------------------------------------------------

Anyway, you can try this:
In the file /opt/picochess/web/picoweb/static/css/responsive-board.css, find "52%" and change it to "50%". It should look like this:

.container-fluid > .row > .col:last-child {
flex: 0 0 50% !important;
max-width: 50% !important;

}

I hope it works.

[Dirk]

Thanks for the quick feedback Antonio.

With 50% instead of 52% the scrollbar on the  button actually vanishes but the dispaly is still some pixel bigger than the actual screen cause I still can move the display via touch a little bit to the left or right.

And it looks like the whole display is out of center now (some pixels to the left) - but these are only minor things...

Thanks

Dirk

--
You received this message because you are subscribed to the Google Groups "PicoChess" group.
To unsubscribe from this group and stop receiving emails from it, send an email to picochess+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/picochess/207c459e-0ccf-4be7-a87e-027d72f8fff1n%40googlegroups.com.

[RandyR]

Hi Dirk,

I'm not seeing this issue on my 7-inch HDMI display (1024x600). The scrollbar almost seems like you are running in a window and not fullscreen (kiosk). I switched to the Aesthetic branch and no scrollbar as well.

Randy

[Dirk]

Nope, I am running chromium definitely in kiosk mode via the kiosk.sh autostart script:

#!/bin/bash

xset s noblank

xset s off

xset -dpms

unclutter -idle 0.5 -root &

# wait for picochess

while true; do

  systemctl is-active --quiet picochess

  if [ $? -eq 0 ]; then

    /usr/bin/chromium --force-device-scale-factor=1 \

      --enable-features=OverlayScrollbar \

      --password-store=basic \

      --display=:0 \

      --noerrdialogs \

      --disable-infobars \

      --kiosk http://127.0.0.1 &

    exit 0

  else

    sleep 5

  fi

done

I have not set any display resolution things in config.txt but I think that is not necessary as long as the OS detects correct the attached monitor screen (which it does I checked this and is says 1024:600).

I even added the --force-device-scale-factor=1 option without success -still the scrollbars on teh button and I can move teh whole dispalyoutput a few pixels to teh left or right.

Hmmm...

Dirk

[Wee MacGregor]

FYI, display on official 7" Raspberry pi display is slightly too big as it has a scroll bar at the bottom. Display also shimmers slightly, maybe it's the grey background.

Google chrome on Windows 11, is aweful, can't get it to resize correctly.

Please see attached images.

Many thanks,

Andrew

[Randy Reade]

Sorry, my mistake. My new 1024x600 display is actually running at 1024x768 according to xrandr. 1024x600 doesn't even show as an option.

[RandyR]

So, to get my display to run at 1024x600, I added the following line to the end of cmdline.txt in /boot/firmware:

video=HDMI-A-1:1024x600M@60D

Reboot. Then I was able to go into Desktop Preferences/Screens/HDMI-1/Resolution and select the now available 1024x600, then Apply and OK.

After rebooting the scroll bar at the bottom was visible.

[Randy Reade]

That's not just Windows or Chrome. If you can set the browser window to near a supported PicoChess web server resolution and hit refresh it should help.

[Antonio]

For the brave!!!

Modifications:
The chosen dashboard color is saved in the browser (if you change browsers, it will start with the natural wood color by default).
The scroll bar no longer appears in 1024x600 or 1280x800 resolutions.
Minor changes to window placement.

This is just a preview. There's still a lot of work to do, but I'll continue as soon as I can... We're moving forward with the project!!!

https://drive.google.com/file/d/1rbDTOwXbJp_jG4XcMQe3QCedE2iYbFNm/view?usp=sharing

[Dirk]

Thanks Antonio - will test tomorrow…

We are really happy that there is now someone who takes care of the web server … for sure!

Am 16.11.2025 um 22:17 schrieb Antonio <antonio.z...@gmail.com>:



--

You received this message because you are subscribed to the Google Groups "PicoChess" group.
To unsubscribe from this group and stop receiving emails from it, send an email to picochess+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/picochess/5fca833d-b9f8-4d6b-be40-7e4bdd32df07n%40googlegroups.com.

[Johan Sjöblom]

Yes, its fantastic that the frontend web client is being developed.

A small comment on responsive-board.css... There seems to be some error with parenthesis after row 414. There are too many closing parenthesis, one after 750px and one after max-height. That could cause this part not to be activated.

#GameTable th,
#GameTable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}in-height: 750px) and (max-height: 850px)) {
    /* Espacio superior estético */
    .container-fluid > .row {
        margin-top: 10px;
    }

Attached a proposed fixed css file... and created a branch and PR with this fixed file:

146-aesthetic-web-client-2

[gkalab]

Thank you for all the great updates!

I noticed in the responsive-board.css that some of the elements are duplicated (#GameTable, #GameTable_wrapper). 

More importantly, the height of the book table and the games table is still limited by sScrollY in the app.js file. Search for '168px' and replace it e.g. with '41vh'. This uses the full height in the 1024x600 layout. I'm not sure why I added it in the first place - maybe the sScrollY entry can even be removed from app.js?

Gerhard

[Johan Sjöblom]

Fixed according to Gerhads comments in commit 4dbc696. Antonio, you can have a look

app.js fixed to 41vh...

Since I posted the css file previously, heres the one without the duplicates.

[Johan Sjöblom]

That gave me 2 vertical scrollbars on 1024x768 on books and games....

Need to check...

[Antonio]

gracias, así aprendemos todos!

Thank you, that's how we all learn!

[Johan Sjöblom]

Commit acba040 drops the 41vh rows, so instead of replacing 168px with 41vh I have now dropped those 2 rows.

That fixed my double vertical scroll bar on books and games.... CSS is still the same but app.js now have no sScrollY': '41vh' or sScrollY': '168px' - The lines are simply removed.

[Antonio]

me voy a volver loco entre traducir, github y probar yo.... jajajaja

lo de la doble barra me pasaba ayer hasta que le puse un valor absoluto y se quito, por eso era el 168pixeles.

Voy a probarlo quitando esas dos líneas a ver como va... gracias 

I'm going crazy trying to translate, use GitHub, and test it myself... hahaha. The double slash thing was happening to me yesterday until I set it to an absolute value and it went away, that's why it was 168 pixels. I'm going to try removing those two lines and see how it goes... thanks

[Antonio]

The turn of the player under the board is shifted to the mobile position.

[gkalab]

Should the #GameTable entries be within the different @media entries? 

Regarding the scroll bars - maybe I don't see them because I disabled them in the chromium start script? 
I use these options:
 --enable-features=OverlayScrollbar --disable-infobars --hide-scrollbars

BTW, I also use unclutter to hide the mouse cursor.

Gerhard

[Johan Sjöblom]

Branch 146-aesthetic-web-client-2 updated with Antonios modifications... 

[Johan Sjöblom]

A quick test and it looks good on say 1024x768 and 1024x600... etc And also in other resolutions.

MInor thing in portrait mode: it seems the colour of the player is slightly hidden under the game bar... The PGN buttons seem ok, but not the colour of the player.

[Aldo Bleeker]

The Raspberry Pi Touch Display 2 is the latest official 7" and 5" display. I have the 7" version, and it has yet another resolution, 1280x720. That's just 80 pixels less than the 1280x800 displays, but this shifts the screen down just a bit. However, the earlier version really shifts down too much and cuts off the White indicator when the analysis bar is shown. This version by Antonio doesn't, so that's already a huge improvement. Would it be possible to create a modified copy of the 1280x800 display to account for the slightly smaller resolution?

I've tinkered with it to make the window a bit smaller, but this kind of css is way beyond my pay grade, I know the basics, but this is much more advanced.

Aldo

[Aldo Bleeker]

I've copied the 1280x800 part of responsive-board.css, lines 234-359, and I just changed some appearances of 'height' in the copied part.

(235: 1280x720)

237: (min-height: 650px) and (max-height: 740px)

241: max-height: 710px;

296: max-height: 720px;

300: height: 720px;
301: max-height: 720px;

To me this doesn't look bad at all, much better than I had suspected. Would these changes do the job, or should there be more, and other changes for this to work correctly?

Aldo

[Antonio]

I'm happy to see the positive reception this work is receiving. We take time away from our families to share it, even though we're not professionals, and it's often the only recognition we get. Yes, these changes should be enough; nothing else needs to change in how things work. We'll keep working. Best regards.

[Johan Sjöblom]

The latest update also looks good. Would it be difficult Antonio if we would add a mute/unmute button. At the moment the web client does not speak any moves. 

The voice in the web interface has been commented out in the file /web/picoweb/static/js/app.js in the function talk()
// window.speechSynthesis.speak(msg);

Would it be difficult to add a variable or something to mute/unmute. I think the default should be muted like it is now. If someone unmutes it would call the speak function for each move. It could perhaps be a little bit like the color button on/off... but can it be a small sound icon?

On some machines if you "unmute" = uncomment the speak line, sound will come both from picochess raspberry pi, and from the web client, even if they are on the same machine. So that could of course be another idea that we could mute when the web client is on the same machine, but if you open a phone web client next to your chess board you will still hear both sounds... So I think a mute/unmute button would be great to have.

See https://github.com/JohanSjoblom/picochess/issues/148

On Wed, 19 Nov 2025 at 08:40, Antonio <antonio.z...@gmail.com> wrote:

I'm happy to see the positive reception this work is receiving. We take time away from our families to share it, even though we're not professionals, and it's often the only recognition we get. Yes, these changes should be enough; nothing else needs to change in how things work. We'll keep working. Best regards.

--

You received this message because you are subscribed to the Google Groups "PicoChess" group.
To unsubscribe from this group and stop receiving emails from it, send an email to picochess+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAHiOUFWDawH6QXZR-D8068_1A8h-ntFye%2BEs1gdv3bRanLMMcw%40mail.gmail.com.

[Antonio]

We can try it, although I'd like to fine-tune the web server even more. But I'll leave it for now.

[Aldo Bleeker]

Great job, Antonio! I changed just a few values in that css, and the display looked good. But that was when I modified the current master code, and only adjusted responsive-board.css. When I used the new branch 146-aesthetic-web-client-2, and added my 1280x720 display to responsive-board.css, I noticed the button bar had been shifted down a bit too far. Is there a way to shift the bar up a bit?

By the way, there's now a space between the board and the button bar that only has ">" in it, I haven't seen that before, what does it for?

Aldo

[Antonio]

It was a typing error, a ">" slipped in, that's why that container went further down. It's already fixed on github. Thanks for letting me know

--
You received this message because you are subscribed to a topic in the Google Groups "PicoChess" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/picochess/dNniNHn2PYQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to picochess+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/picochess/035d9f6f-fcb4-4841-8b15-d42eb4a26da5n%40googlegroups.com.

[Aldo Bleeker]

Thought that may have been the case, but I didn't know how to find it, or fix it.

The modifications I've been trying unfortunately didn't fix all of the issues I had with the new code, the button bar and the White, GET PGN, and UPLOAD buttons still were too close. That's why I came up with another approach. What if your code for 1280x800 would be applied to a 1280x720 display? I noticed that this resolution wasn't handled by the code in responsive-board.css, because 1280x720 wasn't included. But by making just two changes, I could do just that.

237: (min-height: 750px) ->  (min-height: 700px)

361: (min-height: 750px) ->  (min-height: 700px)

The result of these changes is looking pretty good to me. You're code handles 1280x720 rather well!

Aldo

[Antonio]

I'm glad to hear your solution is working too. If you confirm that changing the margin of the @media tag works fine for you, I can adjust the margin and that will cover your screen.

I know CSS rules overlap, but I'll fix it little by little. Functionally, it's transparent to the user; we're talking about programming. When I have time, I plan to improve the rules.

We'll keep working!

[Aldo Bleeker]

It does seem the best for now, it looks like it cuts off the bottom part of the screen, but it does look pretty good.

Aldo

[Antonio]

Implementado 1280x800  ==  1280x720

--

You received this message because you are subscribed to a topic in the Google Groups "PicoChess" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/picochess/dNniNHn2PYQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to picochess+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/picochess/dc083022-223b-47fb-bbcd-154dbc8c9fb0n%40googlegroups.com.

[Aldo Bleeker]

Looking great!

Aldo

[Johan Sjöblom]

OK, let me know Antonio if you think we are ready to merge this into master branch for everyone to use :-)

[Antonio]

[Johan Sjöblom]

The mute button on the picture is not yet pushed and committed to the branch? When I run the current branch there is no mute button.

Let me know if you want me to do that.

On Saturday, 22 November 2025 at 20:18:35 UTC+2 Antonio wrote:

[Antonio]

Este es el definitivo, con lo que me has mandado máas mis modificaciones de resoluciones.   Es el que estoy probando y no he visto fallo 

https://drive.google.com/file/d/1OuKciDGf9unjBf52KphJSLYnO3OD-rA9/view?usp=sharing

--
You received this message because you are subscribed to a topic in the Google Groups "PicoChess" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/picochess/dNniNHn2PYQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to picochess+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/picochess/db33cbf2-fe85-4e74-b360-ba5ff62366bbn%40googlegroups.com.

[Johan Sjöblom]

I reverted the server side changes (server.py) and fixed one line in app.js, line 1875 was commented out but is needed:

                    updateDGTPosition(data);
We still need to read through the diff files to chech diff to master in the PR... But now I can add speech synthesis on my mobile phone (or any browser that supports sound). The mute toggle next to the PGN buttons work fine.

The branch is ready to be merged after some more testing and inspection of "what has changed" in the diff files...

[Johan Sjöblom]

The binary font files web/picoweb/static/fonts/fontawesome-webfont.* all seem to have been changed, but that is probably not the case.

They all have identical SHA-1... So I will drop them from the branch... If I can.

[Johan Sjöblom]

Yes, now the PR is quite clean. 6 files changed. Last call for testing. I will probably merge it to master tomorrow.

[Johan Sjöblom]

Added 2 commits reflecting Gerhards PR comments...