Merge branch 'johannes/fix-screenshot-colors' into 'master'

Grab screenshots via fbcat to fix colors

See merge request postmarketOS/buffybox!21

buffyboard/README.md

@@ -109,7 +109,15 @@ Buffyboard uses [squeekboard layouts] converted to C via [squeek2lvgl]. To regen
 $ ./regenerate-layouts.sh
 ```
 
-from the root of the repository.
+## Generating screenshots
+
+To generate screenshots in a variety of common sizes, install [fbcat], build buffyboard and then run
+
+```
+$ sudo ./regenerate-screenshots _build/buffyboard
+```
+
+where `_build/buffyboard` is the location of the buffyboard binary.
 
 # Acknowledgements
 
@@ -127,6 +135,7 @@ Buffyboard was inspired by [fbkeyboard].
 [LVGL]: https://lvgl.io
 [arrow-alt-circle-up]: https://fontawesome.com/v5.15/icons/arrow-alt-circle-up?style=solid
 [buffyboard.conf]: ./buffyboard.conf
+[fbcat]: https://github.com/jwilk/fbcat
 [fbkeyboard]: https://github.com/bakonyiferenc/fbkeyboard
 [inih]: https://github.com/benhoyt/inih
 [libinput]: https://gitlab.freedesktop.org/libinput/libinput

buffyboard/regenerate-screenshots.sh

@@ -2,19 +2,13 @@
 
 # Change this depending on what device you're generating the screenshots on
 fb_res=1920x1080
-fb_depth=8
-fb_format=rgba
 
 executable=$1
 outdir=screenshots
 config=buffyboard-screenshots.conf
 
-themes=(
+root=$(git rev-parse --show-toplevel)
-    breezy-light
+themes_c=$root/shared/themes.c
-    breezy-dark
-    pmos-light
-    pmos-dark
-)
 
 resolutions=(
     # Nokia N900
@@ -34,6 +28,11 @@ resolutions=(
     1920x1080
 )
 
+if ! which fbcat > /dev/null 2>&1; then
+    echo "Error: Could not find fbcat" 1>&2
+    exit 1
+fi
+
 if [[ ! -f $executable || ! -x $executable ]]; then
     echo "Error: Could not find executable at $executable" 1>&2
     exit 1
@@ -50,14 +49,8 @@ touchscreen=false
 EOF
 }
 
-# Hide cursor
-echo -e '\033[?25l'
-
 function clean_up() {
     rm -f $config
-
-    # Show cursor
-    echo -e '\033[?25h'
 }
 
 trap clean_up EXIT
@@ -67,7 +60,9 @@ mkdir "$outdir"
 
 readme="# Buffyboard themes"$'\n'
 
-for theme in ${themes[@]}; do
+clear # Blank the screen
+
+while read -r theme; do
     write_config $theme
 
     readme="$readme"$'\n'"## $theme"$'\n\n'
@@ -78,23 +73,24 @@ for theme in ${themes[@]}; do
 
         sleep 3 # Wait for UI to render
 
-        cat /dev/fb0 > "$outdir/$theme-$res"
+        fbcat /dev/fb0 > "$outdir/$theme-$res.ppm"
-        convert -size $fb_res \
+        kill -15 $pid
-            -depth $fb_depth \
+
+        convert \
+            -size $fb_res \
+            $outdir/$theme-$res.ppm \
             screenshot-background.png \
-            $fb_format:"$outdir/$theme-$res" \
             -crop $res+0+0 \
             -gravity NorthWest \
             -composite \
             "$outdir/$theme-$res.png"
 
-        rm "$outdir/$theme-$res"
+        rm "$outdir/$theme-$res.ppm"
-        kill -15 $pid
 
         readme="$readme<img src=\"$theme-$res.png\" alt=\"$res\" height=\"300\"/>"$'\n'
 
         sleep 1 # Delay to prevent terminal mode set / reset interference
     done
-done
+done < <(grep "name =" "$themes_c" | grep -o '".*"' | tr -d '"' | sort)
 
 echo -n "$readme" > "$outdir/README.md"

buffyboard/screenshots/README.md

@@ -1,17 +1,5 @@
 # Buffyboard themes
 
-## breezy-light
-
-<img src="breezy-light-480x800.png" alt="480x800" height="300"/>
-<img src="breezy-light-800x480.png" alt="800x480" height="300"/>
-<img src="breezy-light-540x960.png" alt="540x960" height="300"/>
-<img src="breezy-light-960x540.png" alt="960x540" height="300"/>
-<img src="breezy-light-768x1024.png" alt="768x1024" height="300"/>
-<img src="breezy-light-1024x768.png" alt="1024x768" height="300"/>
-<img src="breezy-light-1280x800.png" alt="1280x800" height="300"/>
-<img src="breezy-light-1440x720.png" alt="1440x720" height="300"/>
-<img src="breezy-light-1920x1080.png" alt="1920x1080" height="300"/>
-
 ## breezy-dark
 
 <img src="breezy-dark-480x800.png" alt="480x800" height="300"/>
@@ -24,17 +12,17 @@
 <img src="breezy-dark-1440x720.png" alt="1440x720" height="300"/>
 <img src="breezy-dark-1920x1080.png" alt="1920x1080" height="300"/>
 
-## pmos-light
+## breezy-light
 
-<img src="pmos-light-480x800.png" alt="480x800" height="300"/>
+<img src="breezy-light-480x800.png" alt="480x800" height="300"/>
-<img src="pmos-light-800x480.png" alt="800x480" height="300"/>
+<img src="breezy-light-800x480.png" alt="800x480" height="300"/>
-<img src="pmos-light-540x960.png" alt="540x960" height="300"/>
+<img src="breezy-light-540x960.png" alt="540x960" height="300"/>
-<img src="pmos-light-960x540.png" alt="960x540" height="300"/>
+<img src="breezy-light-960x540.png" alt="960x540" height="300"/>
-<img src="pmos-light-768x1024.png" alt="768x1024" height="300"/>
+<img src="breezy-light-768x1024.png" alt="768x1024" height="300"/>
-<img src="pmos-light-1024x768.png" alt="1024x768" height="300"/>
+<img src="breezy-light-1024x768.png" alt="1024x768" height="300"/>
-<img src="pmos-light-1280x800.png" alt="1280x800" height="300"/>
+<img src="breezy-light-1280x800.png" alt="1280x800" height="300"/>
-<img src="pmos-light-1440x720.png" alt="1440x720" height="300"/>
+<img src="breezy-light-1440x720.png" alt="1440x720" height="300"/>
-<img src="pmos-light-1920x1080.png" alt="1920x1080" height="300"/>
+<img src="breezy-light-1920x1080.png" alt="1920x1080" height="300"/>
 
 ## pmos-dark
 
@@ -47,3 +35,15 @@
 <img src="pmos-dark-1280x800.png" alt="1280x800" height="300"/>
 <img src="pmos-dark-1440x720.png" alt="1440x720" height="300"/>
 <img src="pmos-dark-1920x1080.png" alt="1920x1080" height="300"/>
+
+## pmos-light
+
+<img src="pmos-light-480x800.png" alt="480x800" height="300"/>
+<img src="pmos-light-800x480.png" alt="800x480" height="300"/>
+<img src="pmos-light-540x960.png" alt="540x960" height="300"/>
+<img src="pmos-light-960x540.png" alt="960x540" height="300"/>
+<img src="pmos-light-768x1024.png" alt="768x1024" height="300"/>
+<img src="pmos-light-1024x768.png" alt="1024x768" height="300"/>
+<img src="pmos-light-1280x800.png" alt="1280x800" height="300"/>
+<img src="pmos-light-1440x720.png" alt="1440x720" height="300"/>
+<img src="pmos-light-1920x1080.png" alt="1920x1080" height="300"/>

unl0kr/README.md

@@ -137,17 +137,15 @@ Unl0kr uses [squeekboard layouts] converted to C via [squeek2lvgl]. To regenerat
 $ ./regenerate-layouts.sh
 ```
 
-from the root of the repository.
-
 ## Generating screenshots
 
-To generate screenshots in a variety of common sizes, build unl0kr and then run
+To generate screenshots in a variety of common sizes, install [fbcat], build unl0kr and then run
 
 ```
 $ sudo ./regenerate-screenshots _build/unl0kr
 ```
 
-where `_build/unl0kr` is the location of the unl0kr binary. Note that you may have to adapt some of the settings inside the script depending on the device you're using to generate the screenshots.
+where `_build/unl0kr` is the location of the unl0kr binary.
 
 ## Screen recording
 
@@ -164,6 +162,7 @@ The [lv_port_linux_frame_buffer] project served as a starting point for the code
 [LVGL]: https://lvgl.io
 [adjust]: https://fontawesome.com/v5.15/icons/adjust?style=solid
 [arrow-alt-circle-up]: https://fontawesome.com/v5.15/icons/arrow-alt-circle-up?style=solid
+[fbcat]: https://github.com/jwilk/fbcat
 [inih]: https://github.com/benhoyt/inih
 [libinput]: https://gitlab.freedesktop.org/libinput/libinput
 [libudev]: https://github.com/systemd/systemd/tree/main/src/libudev

unl0kr/regenerate-screenshots.sh

@@ -2,19 +2,13 @@
 
 # Change this depending on what device you're generating the screenshots on
 fb_res=1920x1080
-fb_depth=8
-fb_format=rgba
 
 executable=$1
 outdir=screenshots
 config=unl0kr-screenshots.conf
 
-themes=(
+root=$(git rev-parse --show-toplevel)
-    breezy-light
+themes_c=$root/shared/themes.c
-    breezy-dark
-    pmos-light
-    pmos-dark
-)
 
 resolutions=(
     # Nokia N900
@@ -34,6 +28,11 @@ resolutions=(
     1920x1080
 )
 
+if ! which fbcat > /dev/null 2>&1; then
+    echo "Error: Could not find fbcat" 1>&2
+    exit 1
+fi
+
 if [[ ! -f $executable || ! -x $executable ]]; then
     echo "Error: Could not find executable at $executable" 1>&2
     exit 1
@@ -62,37 +61,44 @@ touchscreen=false
 EOF
 }
 
-function nuke_config() {
+function clean_up() {
     rm -f $config
 }
 
-trap "nuke_config" EXIT
+trap clean_up EXIT
 
 rm -rf "$outdir"
 mkdir "$outdir"
 
 readme="# Unl0kr themes"$'\n'
 
-for theme in ${themes[@]}; do
+clear # Blank the screen
+
+while read -r theme; do
     write_config $theme
 
     readme="$readme"$'\n'"## $theme"$'\n\n'
     
     for res in ${resolutions[@]}; do
-        CRYPTTAB_SOURCE=/dev/sda1 $executable -g $res -C $config &
+        $executable -g $res -C $config &
         pid=$!
 
         sleep 3 # Wait for UI to render
 
-        cat /dev/fb0 > "$outdir/$theme-$res"
+        fbcat /dev/fb0 > "$outdir/$theme-$res.ppm"
-        convert -size $fb_res -depth $fb_depth $fb_format:"$outdir/$theme-$res" -crop $res+0+0 "$outdir/$theme-$res.png"
-        rm "$outdir/$theme-$res"
         kill -15 $pid
 
+        convert \
+            -size $fb_res \
+            "$outdir/$theme-$res.ppm" \
+            -crop $res+0+0 \
+            "$outdir/$theme-$res.png"
+        rm "$outdir/$theme-$res.ppm"
+
         readme="$readme<img src=\"$theme-$res.png\" alt=\"$res\" height=\"300\"/>"$'\n'
 
         sleep 1 # Delay to prevent terminal mode set / reset interference
     done
-done
+done < <(grep "name =" "$themes_c" | grep -o '".*"' | tr -d '"' | sort)
 
 echo -n "$readme" > "$outdir/README.md"

unl0kr/screenshots/README.md

@@ -1,17 +1,5 @@
 # Unl0kr themes
 
-## breezy-light
-
-<img src="breezy-light-480x800.png" alt="480x800" height="300"/>
-<img src="breezy-light-800x480.png" alt="800x480" height="300"/>
-<img src="breezy-light-540x960.png" alt="540x960" height="300"/>
-<img src="breezy-light-960x540.png" alt="960x540" height="300"/>
-<img src="breezy-light-768x1024.png" alt="768x1024" height="300"/>
-<img src="breezy-light-1024x768.png" alt="1024x768" height="300"/>
-<img src="breezy-light-1280x800.png" alt="1280x800" height="300"/>
-<img src="breezy-light-1440x720.png" alt="1440x720" height="300"/>
-<img src="breezy-light-1920x1080.png" alt="1920x1080" height="300"/>
-
 ## breezy-dark
 
 <img src="breezy-dark-480x800.png" alt="480x800" height="300"/>
@@ -24,17 +12,17 @@
 <img src="breezy-dark-1440x720.png" alt="1440x720" height="300"/>
 <img src="breezy-dark-1920x1080.png" alt="1920x1080" height="300"/>
 
-## pmos-light
+## breezy-light
 
-<img src="pmos-light-480x800.png" alt="480x800" height="300"/>
+<img src="breezy-light-480x800.png" alt="480x800" height="300"/>
-<img src="pmos-light-800x480.png" alt="800x480" height="300"/>
+<img src="breezy-light-800x480.png" alt="800x480" height="300"/>
-<img src="pmos-light-540x960.png" alt="540x960" height="300"/>
+<img src="breezy-light-540x960.png" alt="540x960" height="300"/>
-<img src="pmos-light-960x540.png" alt="960x540" height="300"/>
+<img src="breezy-light-960x540.png" alt="960x540" height="300"/>
-<img src="pmos-light-768x1024.png" alt="768x1024" height="300"/>
+<img src="breezy-light-768x1024.png" alt="768x1024" height="300"/>
-<img src="pmos-light-1024x768.png" alt="1024x768" height="300"/>
+<img src="breezy-light-1024x768.png" alt="1024x768" height="300"/>
-<img src="pmos-light-1280x800.png" alt="1280x800" height="300"/>
+<img src="breezy-light-1280x800.png" alt="1280x800" height="300"/>
-<img src="pmos-light-1440x720.png" alt="1440x720" height="300"/>
+<img src="breezy-light-1440x720.png" alt="1440x720" height="300"/>
-<img src="pmos-light-1920x1080.png" alt="1920x1080" height="300"/>
+<img src="breezy-light-1920x1080.png" alt="1920x1080" height="300"/>
 
 ## pmos-dark
 
@@ -47,3 +35,15 @@
 <img src="pmos-dark-1280x800.png" alt="1280x800" height="300"/>
 <img src="pmos-dark-1440x720.png" alt="1440x720" height="300"/>
 <img src="pmos-dark-1920x1080.png" alt="1920x1080" height="300"/>
+
+## pmos-light
+
+<img src="pmos-light-480x800.png" alt="480x800" height="300"/>
+<img src="pmos-light-800x480.png" alt="800x480" height="300"/>
+<img src="pmos-light-540x960.png" alt="540x960" height="300"/>
+<img src="pmos-light-960x540.png" alt="960x540" height="300"/>
+<img src="pmos-light-768x1024.png" alt="768x1024" height="300"/>
+<img src="pmos-light-1024x768.png" alt="1024x768" height="300"/>
+<img src="pmos-light-1280x800.png" alt="1280x800" height="300"/>
+<img src="pmos-light-1440x720.png" alt="1440x720" height="300"/>
+<img src="pmos-light-1920x1080.png" alt="1920x1080" height="300"/>