Trying to enhance our PicoChess-WebServer display

[Dirk]

At the moment I am trying to make our Webserver display look better on mobile devices especially in portrait mode. Reason is that I often use my ChessnutEvo for learning and analyzing my picochess chess games (there are so great (android) apps for this)  and I also wanted to be able to play with PicoChess on my ChessnutEvo. 

Although we don't have an picochess interface for the Evo (unfortunately!) we can use the chestnut vision technology together with the "web only" eBoard mode of PicoChess although some functions are missing or uncomfortable to use this way without a real integration.

But the main disadvantage was the web display on the "long" portrait mode display of the Evo - it looked horrible and was almost not usable. 

So I tried my best together with my French AI friend Claude to make the portrait mode more responsive.

That’s how it looked before:

and that's how it looks with my changes...

Even on my iPhone it now looks really good (although it was ok before):

We still need a kind of a front end developer in order to really make the design responsive for all devices and resolutions (landscape only looks perfect for a 1024 x 600 resolution I think)...

Still need some final touches before I will release this...

Dirk

[Johan Sjöblom]

Wow. Nice work. Yes portrait mode would be really good for phone interfaces.

I have been thinking that one way to get a modern web frontend would be to find one based on the React framework. We could then "move"/"add" the picochess components onto that solution. So far I have only done a few web searches. Some solutions are quite old, and in the frontend world solutions tend to change quickly.  The best one with a short google search that I have found so far is this one:

https://github.com/Clariity/react-chessboard

It is used at https://chessopenings.co.uk/

BR, Johan

[Randy Reade]

Looks good, Dirk.

Johan, I believe the web server is based on an older version of Lichess chessground. Perhaps someone with the skill can update it in PicoChess. There are a couple of examples of React wrappers for it.

https://github.com/lichess-org/chessground?tab=readme-ov-file

Randy

--
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/9ac53787-f5bc-4988-b832-0cddbb2bf625n%40googlegroups.com.

[Dirk]

Ok, now we finally got an image for testing Johan's new V4 (thank you Randy and of course Johan for the incredible work!) maybe we can add my (and Claude's ;-) temporary responsive design enhancements for the portrait mode (especially if you want to play with your Evo).

Just replace the web folder in the picochess main directory with the web folder in my dropbox: 

https://www.dropbox.com/scl/fi/wqsdumf9j5kgf4rwu6lmt/web.zip?rlkey=pptdq8p07z2mukekl4xz7lomo&dl=0

I think I only have changed the files clock.html and custom.css (see attached files) - so you could try with the attached files if you know how and where to replace them ;-)

Dirk

[Johan Sjöblom]

Maybe its possible to make them both parallel ... I will test when I have time... For instance, one could get the vertical by giving another adress like /new or /pico or some other free page name... It _should_ be possible to have them both in paralell in the same solution. I will be back on this.

[Dirk]

Johan, I just updated the portrait mode part of the design the horizontal one (which was fine for most cases) is of course still part of it - so no need to have two separate solutions.

[Johan Sjöblom]

Ok I see, I can download the entire folder and make it a test branch first... If you think its OK to add to the github repository?

[Dirk Mollmann]

Yes, sure but you would have to adjust the headline with the correct version in the click html file or we can just get rid of the version number or if someone knows how to determine it dynamically from the official version entry - that’s fine as well 🤣

Am 09.05.2025 um 17:40 schrieb Johan Sjöblom <messi...@gmail.com>:

Ok I see, I can download the entire folder and make it a test branch first... If you think its OK to add to the github repository?

--
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/fe7c360b-9588-415c-9cba-3cc695f9e3a9n%40googlegroups.com.

[Johan Sjöblom]

No worries. It's now in a branch in github with 4.1.1. I will merge it to master branch next time I am at the computer.

Then when testers take a system update it should be part of the update.

To view this discussion visit https://groups.google.com/d/msgid/picochess/E6CC6AB1-DF77-40BC-8D83-CD82E90CA403%40googlemail.com.

[Johan Sjöblom]

I merged the new web solution into master branch now. Those who install now, or who performs Power->System->Restart and upgrade Picochess should get this solution.

[RandyR]

Hi Dirk,

I'm using the updated web display in v4.1.1 on the EVO and I copied over the engine folder from my last image. I'm seeing random menu text on the display as if the menu button was pressed occasionally.

Are you seeing this as well? I don't suspect your code but maybe something with the no-eboard mode and the EVO?

Randy

[Dirk Mollmann]

Actually I have not used my web display changes with Johans 4.0 - just with 3.3 and with this version I have never seen what you have described.

Maybe Johan did some more changes to the web server, which are now missing when he just copied my complete folder into his 4 version!?

Send, he should try to just change the clock.html and custom.css files together with his web changes (if Johan indeed has changed the web folder for his 4 version.

Sorry I should have mentioned that…

Dirk 

Am 10.05.2025 um 22:32 schrieb RandyR <randy...@gmail.com>:

Hi 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/c9988c89-1d9f-4f21-88e0-69319c3582c5n%40googlegroups.com.

[Randy Reade]

I only changed the 2 files and edited clock.html for the version. I didn't want to try an update yet as I'm not sure if it would affect the new engine folder. I'll do some more testing tomorrow. The display looks good on the EVO.

Randy

To view this discussion visit https://groups.google.com/d/msgid/picochess/69E2B8BA-25CE-4D7C-A79D-D0A5BBF7D7E2%40googlemail.com.

[Johan Sjöblom]

I took the entire web folder from the dropbox and copied it to my repository. I onlychanged the version number. No other changes. Just the ‘4.1.1’ text.

I did notice that there was many other new files but I copied them all.

The no eboard looked ok on my Debian machine. Portrait mode is actually quite nice for testing.

To view this discussion visit https://groups.google.com/d/msgid/picochess/CAE5Wdutd4JNdFR3-Uib8X7c-eprTt-YpE2tDzDp48c_%3DJ0z-CQ%40mail.gmail.com.

[Dirk]

Johan, and you have not changed the web folder at all in your v4 before you have applied my portrait changes? These changes will be missing in my Web folgender because I applied my changes to the v3.3 version…

Dirk

Am 11.05.2025 um 07:43 schrieb Johan Sjöblom <messi...@gmail.com>:



To view this discussion visit https://groups.google.com/d/msgid/picochess/CAEk%2BOSRtxjgzSB21r6KN6zh%3DtK2PUusZXSCdi6JBx%2B2Zs_%3DjWg%40mail.gmail.com.

[Johan Sjöblom]

No I have not done any development on the web folder. I do remember commenting out the javascript move announcements in December, but that was just one line of code that I remember simply commenting out.

The calls from web to the server should also be exactly the same as I have not changed any URL names on the web server Tornado side.

To be really sure I need to check the git difference in my repository. I need to be back home at my computer to check.

I can also take a list of all the files that changed when I copied the entire web folder. There was some new css files perhaps etc. Basically I can just ask for the git difference in the latest commit. That should show a list of changed files for the web (compared to 3.3 or 4 as they should be similar)

To view this discussion visit https://groups.google.com/d/msgid/picochess/4DDDF498-AC81-4A49-B6E3-C9B15C1F3BC8%40googlemail.com.

[Johan Sjöblom]

This is the commit when I copied the new portrait web folder from Dropbox.

21 files have been changed?

https://github.com/JohanSjoblom/picochess/commit/24b9a79c7ac53c76b63f64fd68a2447c4b0ddf87

The commit name is Dirks new web solution

--
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/cec54185-3fb8-4195-8932-909ed6859959n%40googlegroups.com.

[Johan Sjöblom]

The only suspect change I can see is the

 app.js.

 All others are css files, and some new javascript Stockfish changes 

[RandyR]

Not seeing this issue today. I've played a few games against different engines and the display was as expected. I'll keep an eye on it and check the debug logs if it happens again.

Randy

[Dirk]

I don’t think it has been caused by the web server changes…

--
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/d9db74be-9fad-4575-a42c-89d5e6b9d497n%40googlegroups.com.