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

[Johan Sjöblom]

The new web client is now merged to picochess master.

[Francois Vannier]

Hi Antonio & all,

I am using chromium on the localhost with a screen that has the following resolutions : 1280x720, 1920x1080 & 2560x1440 (as per desktop 'preferences' screen options)

With the initial V4.1.8, the best screen I got was with 1280x720 resolution:

With the latest git pull, none is fitting including 1280x720:

So, is this possible to have the 1280x720 back, &/or a "cookbook" to tailor some files of the web folder to fit the supported resolutions ?

The desktop control center offers a very limited number of resolutions, as per above. Does someone know if this can be tweaked to support additional resolutions like 1280x800 ?

Thanks

Francois

--
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/272e61ab-4909-4ab7-8feb-fae16681a26bn%40googlegroups.com.

[Antonio]

Hola. En 1280x720 está ajustado todos los márgenes. No sé por qué no se ve bien. Asegúrate que sea esa la resolución que tienes y si no buscamos la solución, no te preocupes...

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/K0qpnJc-dKs/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/CADa9EqWwVnAc0tG1OWwDd2%2BwrRUKrtJ7CWmBOTBzan0-ttm5cg%40mail.gmail.com.

[Francois Vannier]

Hola,

Yes, 1280x720 is the resolution configured through the desktop screen preferences. It was OK with the initial V4.1.8.

Francois

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAHiOUFXbbhpUhP0zj0%2BQMHMcdagJTq0Hr-Oik0otN9DXhOZxVg%40mail.gmail.com.

[Antonio]

Podrías probar conectándote al webserver desde el ordenador con 1280x720???

To view this discussion visit https://groups.google.com/d/msgid/picochess/CADa9EqVho7WBoH%2Bnw7yaPQf8xYbF%2BPOHGjMyuPE%2B9%3DN5m14eSw%40mail.gmail.com.

[Francois Vannier]

The screen is clean from a remote PC using Edge and a desktop resolution of 1280x720:

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAHiOUFV3vswt%3Dx7kUxJ8u-_15f9eU9SfOHi30d-zz8hDdfQ39A%40mail.gmail.com.

[Antonio]

Por cómo se dibuja el escritorio en tu pantalla, diría que 720 no es. Puedes cambiar a 1024x600 ???

To view this discussion visit https://groups.google.com/d/msgid/picochess/CADa9EqUGqx4JpATVQQ9TiU43xSUGRddYqf%2BLBEZioBGtuTuR2A%40mail.gmail.com.

[Francois Vannier]

I don't understand. I am sure that my settings are correct.

1024x600 is not supported by any of my screens (local & remote).

And, again, 1024x768 was OK with the first V4.1.8. It's still OK if from a remote machine, but no longer on the local chromium/localhost.

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAHiOUFVBk4%2BkFnWhkyt3OhmZsAprTA2sNgg2H3vHZw8p_JRE%2BQ%40mail.gmail.com.

[gkalab]

DId you clear the browser cache on the pi?

[Francois Vannier]

Yes, cache cleared & same result.

To view this discussion visit https://groups.google.com/d/msgid/picochess/93ede18b-8700-4aa8-8125-dd58a6039c91n%40googlegroups.com.

[Antonio]

Me confirma un usuario que en pantalla 1280x720 se ve bien. 

To view this discussion visit https://groups.google.com/d/msgid/picochess/CADa9EqU%2ByW2sEwrdq-Z_pdyLoxLfocqDnU-tj8JFD2TEGndiHg%40mail.gmail.com.

[Francois Vannier]

Something has been broken between the original web from V4.1.8 and the current master for my configuration. Eventually, after trying to change the resolution from the command line, I ended up adding this line in the /etc/xdg/lxsession/rpd-x/autostart :

xrandr --output HDMI-1 --primary --scale-from 1280x756

just before

/home/pi/kiosk.sh

Strange I had to stretch a bit the vertical resolution from 720 to 756 to look better (not perfect, but ok):

Francois

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAHiOUFUycqk9YR6T7k7PFH6tK2GoOPdWL9F%2BfgmzB%2BO%3DXhp1UA%40mail.gmail.com.

[Antonio]

I'd like to know why it's not working on your screen...

I think it would be good to have a list of which screens work and which do, because not all PicoChess users are necessarily computer savvy..

[Aldo Bleeker]

I've checked the latest master branch on Debian Trixie with a 27" 2560x1440 display. I've tried the 4 16:9 resolutions I could select, 1280x720, 1600x900, 1920x108, and 2560x1440. All of them were displayed quite reasonably, and 1280x720 pretty good, because that's one of the reolutions PicoChess has been optimised for. The others perhaps weren't displayed perfectly (like alignment and spacing), but they were quite usable, none were cut off.

Aldo

[Antonio]

Para los valientes que tiene problemas con la resolución. Se agradece comentarios para seguir mejorando.

For the brave ones who have problems with resolution. Comments are appreciated to continue improving.

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

[Francois Vannier]

Local chromium and distant edge are now displaying nicely on my config using several different resolutions. Thanks Antonio !

The best looking resolution is 1280x720 though. At higher resolutions, some fonts are a bit too small.

Francois

--
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/42be49d8-37c4-4429-96ec-feb463ed9e19n%40googlegroups.com.

[Aldo Bleeker]

The earlier version had some issues, the BOOK tab had double scroll bars and the SCAN tab had an extra scroll bar. This version has solved these issues. Nice work!

There's another minor issue, the GAMES tab and the scroll bar are cut off.

That's why I'd suggest to change in line 177 value max-height of GameTable_Wrapper in file 1280x800.css from 44.4vh to 32.8vh. Like so.

175    #GameTable_wrapper {
176        min-height: 27.8vh !important;
177        max-height: 32.8vh;
178        overflow-y: auto;
179    }

After this change the display look like this.

Aldo

[Antonio]

Gracias!.             4.1.7 ???         Esos cambios están ya en 4.1.8 

[Aldo Bleeker]

That's what is says in clock.html.

Aldo

[Johan Sjöblom]

The latest web client code from Antonio is now here:

Pull Request: https://github.com/JohanSjoblom/picochess/pull/180

Branch: 179-web-client

And the clock.html has version 4.1.8 in this one.