WebServer 4_1_8 Screen 1024x600 , 1280x800 y 1280x720

[Antonio]

Hola amigos Picochess.    He estado modificando las distintas resoluciones y haciendo cambios en los ficheros para que sea más sencillo de mantener.   Cada resolución tiene su archivo específico.   En 1024x600 he ampliado botones para que sea más visibles y mejor para pantallas tactiles.    En las demás resoluciones he solucionado algun fallo que tenía.   En todas las resoluciones he "escondido" los botones bajo el tablero si estás en local....

Necesito voluntarios para que reporten fallos, opiniones, necesidades, etc etc

Se agradece que indiquen en que equipo, pantalla, resolución se hacen las pruebas.

Se trata de borrar la carpeta Web de picochess y sustituir por la que comparto.    Gracias por las pruebas.

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

Hello Picochess friends. I've been modifying the different resolutions and making changes to the files to make it easier to maintain. Each resolution has its own specific file. In 1024x600, I've enlarged the buttons to make them more visible and better for touchscreens. In the other resolutions, I've fixed some bugs. In all resolutions, I've "hidden" the buttons under the board if you're playing locally.

I need volunteers to report bugs, opinions, needs, etc. Please specify the computer, screen, and resolution you're using for testing.
The task involves deleting the Picochess Web folder and replacing it with the one I'm sharing. Thanks for your testing.

https://drive.google.com/file/d/1Qhq7xZIpJGMJOUMTJrsUSp8_14VW-4eu/view?usp=sharing

[Aldo Bleeker]

Hi Antonio,

Nice job!

I'm using a RPi 5 with the official Touch Display 2, which is a 1280x720 display. I'm using the most recent vesion of PicoChess 4. I've downloaded your revised version of folder Web, deleted folder Web and replaced it with the one you've shared.

When I started PicoChess, the buttons briefly were visible on the edge of the screen, but they quickly disappeared. The display is looking good, but it seems the screen is too big for the display, there's now a scrollbar to the right and extra space at the bottom. Looking at 1280x800.css, I noticed that in xboardsection, board_panel, and scroll-portrait the numbers 790 and 800 occurred. I also noticed that the 1280x720 now has its own section which overrides some 1280x800 values. As an experiment I've added these values to this section, and replaced 790 with 715 and 800 with 720. From line 112 on it now looked like this:

@media (min-width: 1200px) and (max-width: 1300px)
       and (height: 720px)  {
    body {
        overflow-y: auto !important;
        max-height: 720px;
    }

    .scroll-portrait {
        height: 720px;
        max-height: 720px;
        overflow-y: hidden;
    }
   
    #xboardsection {
        max-width: 1270px;
        max-height: 715px;
    }

    #board_panel {
        height: 715px;
    }

When I restarted PicoChess, this seemed to have fixed the issue, the scrollbar and the extra space were gone! But because I'm no expert on CSS by any means, of course I don't know if this is the right way to solve the issue.

Aldo

[Antonio]

Thank you so much, Aldo Bleeker. I'm glad to hear that the resolution problems you had at the beginning have been resolved. One of the reasons I separated all the resolutions and made the code more structured is precisely so that everyone can modify their own resolution without affecting any other resolution. Besides, there were rules that were overriding each other and were very difficult to locate.
Your resolution is one of the ones that gives me the most trouble in emulation, which is why I never get it right the first time. That's why I appreciate your contribution doubly.
Dirk has already confirmed to me privately that the increased button size looks good at 1024x600 and is more ergonomic and usable. Is your button size functional at 1280x720? I'll update your configuration this afternoon so it's in the .zip file, and I'll talk to Johan about including it in the new branch. Thanks, and let's keep learning.

[Johan Sjöblom]

Here is the

PR: https://github.com/JohanSjoblom/picochess/pull/166

and branch name is 165-web-resolution

-- Johan

[Aldo Bleeker]

Hi Antonio,

Thanks! No problem, it would be nice if we can make the 1280x720 display look lovely.

At the moment the buttons are placed far too low actually.

To correct that I had to add this override to 1280x800.cs.

    #boardControlButtons {

    padding-top: 0px;
    }

It looks like this then.

The buttons are a bit too big, they don't fit in the available space.

I feel the buttons look better if they fit the space. To do that I used these overrides.

    #boardControlButtons {
    padding-top: 2px;
    }

    #downloadBtn,
    #uploadBtn {
    height: 36px !important;
    }

    #btn-mute {
    height: 36px !important;
    }

Then it looks like this.

I think the display for 1280x720 look better if all in all we use the following overrides in 1280x800.css from line 112.

@media (min-width: 1200px) and (max-width: 1300px)
       and (height: 720px)  {
    body {

        max-height: 720px;
    }

    .scroll-portrait {
        height: 720px;
        max-height: 720px;
    }
   

    #xboardsection {
        max-width: 1270px;
        max-height: 715px;
    }
    #board_panel {
        height: 715px;
    }

    #boardControlButtons {
    padding-top: 2px;
    }

    #downloadBtn,
    #uploadBtn {
    height: 36px !important;
    }

    #btn-mute {
    height: 36px !important;
    }

Aldo

[Antonio]

I changed it this afternoon; download the zip file again if you want, and that's it. We did it at the same time! Although it's not exactly the same as yours.

[Antonio]

Anyway, I'm going to change it to yours. I trust you more since you have the screen and see it as real than my emulator.

[Aldo Bleeker]

Don't do that! There's no need, your modifications look fine!

Aldo

[Aldo Bleeker]

Hi Antonio,

OK, I've looked very, very closely at the screen, and I have to admit it does look better if we make the buttons just that bit smaller... So if you can use my modifications, that would be lovely!

Aldo