Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

High resolution icon #1987

Closed
wants to merge 4 commits into from
Closed

High resolution icon #1987

wants to merge 4 commits into from

Conversation

rom1v
Copy link
Collaborator

@rom1v rom1v commented Dec 22, 2020

There are two problems with the scrcpy icon:

  1. there is no scrcpy icon (it just uses a standard Android icon)
  2. it's low definition (48×48) (Use better resolution icon for app #1497)

This PR aims to fix the latter.

Why was the icon in 48×48?

For the initial release of scrcpy, to set an icon quickly (and in a funny way), I used an XPM: icon.xpm.
I explained here: https://blog.rom1v.com/2018/03/introducing-scrcpy/#set-a-window-icon

I use XFCE, and the icons are never shown at a higher resolution, so it was not a problem for me. However, when the icon is displayed at a bigger size, the quality is awful: #1497.

Icon format

To support a higher resolution icon, I had to use another format.

SDL expects a packed (non-planar) bitmap format, so I choose PNG (but other formats could be supported).

To avoid adding a new dependency, I implemented icon loading using FFmpeg (which is not the most straightforward way to just load an image!). For simplicity, I only implemented support for RGB-like input.

The icon is read from a file, either in /usr/share/icons/hicolor/512x512/apps/scrcpy.png or just icon.png for portable builds (i.e. Windows). Like SCRCPY_SERVER_PATH, an environment variable allows to customize the icon path: SCRCPY_ICON_PATH. The main purpose is to be able to execute ./run x to run a build without installing.

Debug mode

To easily distinguish debug builds, I used to change the icon color (because it was simple and funny):

#ifndef NDEBUG
// patch the XPM to change the icon color in debug mode
xpm[2] = ". c #CC00CC";
#endif

To keep things simple with a real image, I will just abandon this debug-specific change.

TODO

  • I'd like to add support for palette formats (AV_PIX_FMT_PAL8), in particular because it's the format produced by optipng if I optimize the current icon. (DONE)
  • I'd like a real scrcpy icon 😄

Before this change, release.sh built some native stuff, and
Makefile.CrossWindows built the Windows releases.

Instead, use a single release.make to build the whole release. It also
avoids to build the server one more time.
Finding a local file in the scrcpy directory may be useful for files
other than scrcpy-server in the future.
@rom1v rom1v force-pushed the noconsolevbs branch 2 times, most recently from 230afd8 to a467339 Compare December 22, 2020 17:58
@rom1v
Copy link
Collaborator Author

rom1v commented Dec 31, 2020

The downscaled 512×512 icon looks bad on Windows. But SDL does not expose a way to provide an icon set for each resolution 😕

@varlesh
Copy link

varlesh commented Oct 22, 2021

@rom1v Hi, i try draw icon for scrcpy in papirus style...
image
SVG Code:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1.1">
 <path style="opacity:0.2" d="m 16.846877,12 c -1.116351,0 -2.227419,0.912229 -2.015075,2 l 3.122973,16 -5.596557,11.109375 C 11.959876,41.871734 11.885244,42.336988 12.177176,43 c 0.278672,0.632897 0.998812,1 1.747448,1 H 24 34.075375 c 0.748637,0 1.468777,-0.367103 1.747448,-1 0.291932,-0.663012 0.217302,-1.128266 -0.181041,-1.890625 L 30.045225,30 33.168198,14 c 0.212344,-1.087771 -0.898724,-2 -2.015075,-2 H 24 Z"/>
 <path style="fill:#cccccc" d="m 16.846877,11 c -1.116351,0 -2.227419,0.912229 -2.015075,2 l 3.122973,16 -5.596557,11.109375 C 11.959876,40.871734 11.885244,41.336988 12.177176,42 c 0.278672,0.632897 0.998812,1 1.747448,1 H 24 34.075375 c 0.748637,0 1.468777,-0.367103 1.747448,-1 0.291932,-0.663012 0.217302,-1.128266 -0.181041,-1.890625 L 30.045225,29 33.168198,13 c 0.212344,-1.087771 -0.898724,-2 -2.015075,-2 H 24 Z"/>
 <rect style="opacity:0.2" width="40" height="32" x="4" y="6" rx="2" ry="2"/>
 <path style="fill:#e4e4e4" d="m 4,33 v 2 c 0,1.108 0.892,2 2,2 h 36 c 1.108,0 2,-0.892 2,-2 v -2 z"/>
 <path style="opacity:0.1" d="m 11.494141,15 a 1.5,1.5 0 0 0 -0.832032,0.255859 1.5,1.5 0 0 0 -0.40625,2.082032 l 3.13086,4.654297 C 10.404945,24.606192 8.4012371,28.299159 8.0019531,32.460938 7.9284599,34.000879 9.5546875,34 9.5546875,34 H 38.40625 c 0,0 1.672856,-3.38e-4 1.591797,-1.617188 -0.416529,-4.131451 -2.415618,-7.796833 -5.380859,-10.394531 l 3.126953,-4.65039 a 1.5,1.5 0 0 0 -0.40625,-2.082032 1.5,1.5 0 0 0 -1.125,-0.228515 1.5,1.5 0 0 0 -0.957032,0.634765 l -3.072265,4.566407 C 29.78649,18.814887 26.990024,18 24.001953,18 c -2.989385,0 -5.786177,0.815488 -8.183594,2.230469 l -3.074218,-4.56836 A 1.5,1.5 0 0 0 11.787109,15.027344 1.5,1.5 0 0 0 11.494141,15 Z"/>
 <path style="fill:#077063" d="M 6,5 C 4.892,5 4,5.892 4,7 V 33 H 44 V 7 C 44,5.892 43.108,5 42,5 Z"/>
 <path style="opacity:0.1;fill:#ffffff" d="M 6,5 C 4.892,5 4,5.892 4,7 V 8 C 4,6.892 4.892,6 6,6 h 36 c 1.108,0 2,0.892 2,2 V 7 C 44,5.892 43.108,5 42,5 Z"/>
 <path style="fill:none;stroke:#30dd81;stroke-width:3;stroke-linecap:round" d="M 15.1998,21.000026 11.5,15.5"/>
 <path style="fill:none;stroke:#30dd81;stroke-width:3;stroke-linecap:round" d="M 32.799764,21.000026 36.5,15.5"/>
 <path style="fill:#30dd81" d="m 24.002386,17.000034 c -8.355868,0 -15.2214979,6.346843 -15.9999669,14.460906 C 7.9289259,33.000882 9.5544999,33 9.5544999,33 H 38.406003 c 0,0 1.672201,-3.35e-4 1.591142,-1.617185 C 39.182807,23.305596 32.331836,17.000034 24.002386,17.000034 Z"/>
 <path style="opacity:0.2" d="m 16,25 a 1.9999959,1.9999959 0 0 0 -2,2 1.9999959,1.9999959 0 0 0 2,2 1.9999959,1.9999959 0 0 0 2,-2 1.9999959,1.9999959 0 0 0 -2,-2 z m 16,0 a 1.9999959,1.9999959 0 0 0 -2,2 1.9999959,1.9999959 0 0 0 2,2 1.9999959,1.9999959 0 0 0 2,-2 1.9999959,1.9999959 0 0 0 -2,-2 z"/>
 <path style="fill:#ffffff" d="M 15.999996,24.000008 A 1.9999959,1.9999959 0 0 1 17.999992,26.000004 1.9999959,1.9999959 0 0 1 15.999996,28 1.9999959,1.9999959 0 0 1 14,26.000004 1.9999959,1.9999959 0 0 1 15.999996,24.000008 Z"/>
 <path style="fill:#ffffff" d="M 31.999996,24.000008 A 1.9999959,1.9999959 0 0 1 33.999991,26.000004 1.9999959,1.9999959 0 0 1 31.999996,28 1.9999959,1.9999959 0 0 1 30,26.000004 1.9999959,1.9999959 0 0 1 31.999996,24.000008 Z"/>
 <path style="fill:#ffffff;opacity:0.2" d="M 11.494141 14 A 1.5 1.5 0 0 0 10.662109 14.255859 A 1.5 1.5 0 0 0 10.115234 16.001953 A 1.5 1.5 0 0 1 10.662109 15.255859 A 1.5 1.5 0 0 1 11.494141 15 A 1.5 1.5 0 0 1 11.787109 15.027344 A 1.5 1.5 0 0 1 12.744141 15.662109 L 15.818359 20.230469 C 18.215776 18.815488 21.012568 18 24.001953 18 C 26.990024 18 29.78649 18.814887 32.183594 20.228516 L 35.255859 15.662109 A 1.5 1.5 0 0 1 36.212891 15.027344 A 1.5 1.5 0 0 1 37.337891 15.255859 A 1.5 1.5 0 0 1 37.910156 16.001953 A 1.5 1.5 0 0 0 37.337891 14.255859 A 1.5 1.5 0 0 0 36.212891 14.027344 A 1.5 1.5 0 0 0 35.255859 14.662109 L 32.183594 19.228516 C 29.78649 17.814887 26.990024 17 24.001953 17 C 21.012568 17 18.215776 17.815488 15.818359 19.230469 L 12.744141 14.662109 A 1.5 1.5 0 0 0 11.787109 14.027344 A 1.5 1.5 0 0 0 11.494141 14 z M 35.033203 21.369141 L 34.617188 21.988281 C 37.477056 24.493668 39.433905 27.993356 39.943359 31.945312 C 39.986866 31.783283 40.008864 31.598575 39.998047 31.382812 C 39.601372 27.448291 37.768055 23.938648 35.033203 21.369141 z M 12.970703 21.373047 C 10.220358 23.959215 8.3822757 27.496796 8.0019531 31.460938 C 7.9920657 31.668114 8.0150508 31.844846 8.0585938 32 C 8.5570234 28.027243 10.515755 24.509049 13.386719 21.992188 L 12.970703 21.373047 z"/>
</svg>

It's can be modify with shadows or other effetcts:
image
SVG Code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1">
 <defs>
  <linearGradient id="linearGradient4453">
   <stop style="stop-color:#000000" offset="0"/>
   <stop style="stop-color:#000000;stop-opacity:0" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient2450">
   <stop style="stop-color:#000000" offset="0"/>
   <stop style="stop-color:#000000;stop-opacity:0" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient2452" x1="14.108" x2="35.078" y1="9.269" y2="33.509" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient2450"/>
  <linearGradient id="linearGradient4455" x1="20.57" x2="25.689" y1="22.436" y2="28.964" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient4453"/>
  <linearGradient id="linearGradient5210" x1="29.461" x2="38.232" y1="24.106" y2="30.576" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient4453"/>
  <filter id="filter5543" style="color-interpolation-filters:sRGB" width="1.086" height="1.108" x="-.04" y="-.05">
   <feGaussianBlur id="feGaussianBlur5545" stdDeviation=".72"/>
  </filter>
  <filter id="filter5547" style="color-interpolation-filters:sRGB" width="1.175" height="1.131" x="-.09" y="-.07">
   <feGaussianBlur id="feGaussianBlur5549" stdDeviation=".875"/>
  </filter>
 </defs>
 <path style="opacity:0.2;filter:url(#filter5547)" d="m 16.846877,12 c -1.116351,0 -2.227419,0.912229 -2.015075,2 l 3.122973,16 -5.596557,11.109375 C 11.959876,41.871734 11.885244,42.336988 12.177176,43 c 0.278672,0.632897 0.998812,1 1.747448,1 H 24 34.075375 c 0.748637,0 1.468777,-0.367103 1.747448,-1 0.291932,-0.663012 0.217302,-1.128266 -0.181041,-1.890625 L 30.045225,30 33.168198,14 c 0.212344,-1.087771 -0.898724,-2 -2.015075,-2 H 24 Z"/>
 <path style="fill:#cccccc" d="m 16.846877,11 c -1.116351,0 -2.227419,0.912229 -2.015075,2 l 3.122973,16 -5.596557,11.109375 C 11.959876,40.871734 11.885244,41.336988 12.177176,42 c 0.278672,0.632897 0.998812,1 1.747448,1 H 24 34.075375 c 0.748637,0 1.468777,-0.367103 1.747448,-1 0.291932,-0.663012 0.217302,-1.128266 -0.181041,-1.890625 L 30.045225,29 33.168198,13 c 0.212344,-1.087771 -0.898724,-2 -2.015075,-2 H 24 Z"/>
 <rect style="opacity:0.2;filter:url(#filter5543)" width="40" height="32" x="4" y="6" rx="2" ry="2"/>
 <path style="fill:#e4e4e4" d="m 4,33 v 2 c 0,1.108 0.892,2 2,2 h 36 c 1.108,0 2,-0.892 2,-2 v -2 z"/>
 <path style="fill:#077063" d="M 6,5 C 4.892,5 4,5.892 4,7 V 33 H 44 V 7 C 44,5.892 43.108,5 42,5 Z"/>
 <path style="opacity:0.1;fill:#ffffff" d="M 6 5 C 4.892 5 4 5.892 4 7 L 4 7.4003906 C 4 6.2923906 4.892 5.4003906 6 5.4003906 L 42 5.4003906 C 43.108 5.4003906 44 6.2923906 44 7.4003906 L 44 7 C 44 5.892 43.108 5 42 5 L 6 5 z"/>
 <path style="opacity:0.3;fill:url(#linearGradient2452)" d="M 12.585938 14.451172 L 14.246094 22.845703 L 16.255859 25.613281 L 12.166016 28.626953 L 8.3496094 32.490234 L 12.859375 37 L 13.923828 37 L 34.076172 37 L 42 37 C 42.1385 37 42.273867 36.985539 42.404297 36.958984 C 43.317305 36.773102 44 35.9695 44 35 L 44 33 L 44 20.900391 L 37.628906 14.529297 L 31.158203 22.291016 L 25.912109 22.630859 L 23.378906 20.367188 L 20.570312 22.435547 L 12.585938 14.451172 z"/>
 <path style="fill:none;stroke:#30dd81;stroke-width:3;stroke-linecap:round" d="M 15.1998,21.000026 11.5,15.5"/>
 <path style="fill:none;stroke:#30dd81;stroke-width:3;stroke-linecap:round" d="M 32.799764,21.000026 36.5,15.5"/>
 <path style="fill:#30dd81" d="m 24.002386,17.000034 c -8.355868,0 -15.2214979,6.346843 -15.9999669,14.460906 C 7.9289259,33.000882 9.5544999,33 9.5544999,33 H 38.406003 c 0,0 1.672201,-3.35e-4 1.591142,-1.617185 C 39.182807,23.305596 32.331836,17.000034 24.002386,17.000034 Z"/>
 <path style="opacity:0.2;fill:url(#linearGradient4455)" d="m 17.417969,24.601562 -1.283203,0.300782 -0.472657,0.140625 -0.380859,-0.369141 -0.398438,0.603516 -0.40625,0.121094 0.195313,0.197265 -0.419922,0.634766 0.335938,1.177734 L 30.179688,43 h 3.896484 c 0.484998,0 0.954343,-0.156901 1.302734,-0.4375 z"/>
 <path style="fill:#ffffff" d="M 15.999996,24.000008 A 1.9999959,1.9999959 0 0 1 17.999992,26.000004 1.9999959,1.9999959 0 0 1 15.999996,28 1.9999959,1.9999959 0 0 1 14,26.000004 1.9999959,1.9999959 0 0 1 15.999996,24.000008 Z"/>
 <path style="opacity:0.2;fill:url(#linearGradient5210)" d="m 33.419922,24.605469 -1.710938,0.126953 -1.25,1.53125 0.08789,1.105469 L 40.177734,37 H 42 c 1.05044,0 1.896289,-0.804597 1.982422,-1.832031 z"/>
 <path style="fill:#ffffff" d="M 31.999996,24.000008 A 1.9999959,1.9999959 0 0 1 33.999991,26.000004 1.9999959,1.9999959 0 0 1 31.999996,28 1.9999959,1.9999959 0 0 1 30,26.000004 1.9999959,1.9999959 0 0 1 31.999996,24.000008 Z"/>
</svg>

rom1v added a commit that referenced this pull request Oct 22, 2021
Use the new icon designed by @varlesh:
<#1987 (comment)>

Attempt to use the SVG, and fallback to PNG.
@rom1v rom1v force-pushed the icon branch 2 times, most recently from 20e54a8 to 236cd4f Compare October 22, 2021 16:57
@rom1v
Copy link
Collaborator Author

rom1v commented Oct 22, 2021

@varlesh Wow, awesome, thank you very much 👍 The icon is clean 😉

I rebased/adapted this MR on current dev, and used the first icon (in SVG and fallback to PNG 256x256): icon.5.

On Windows:
windows_titlebar_icon

In XFCE Alt+tab list (in list mode):
xfce_alttab_list_icon

In XFCE systembar:
xfce_systembar_icon

In XFCE window titlebar with a light theme:
xfce_titlebar_arc

In XFCE window titlebar with a dark theme:
xfce_titlebar_arc_dark

rom1v added a commit that referenced this pull request Oct 23, 2021
Use the new icon designed by @varlesh:
<#1987 (comment)>

Load it from a PNG file (SDL only supports bitmap icons).
@rom1v
Copy link
Collaborator Author

rom1v commented Oct 23, 2021

(in SVG and fallback to PNG 256x256)

In fact, SDL only support bitmap images for window icon, so there is no need to load it from an SVG (which is not always available with FFmpeg). Instead, now, I only use a 256x256 PNG image: icon.6.

I also added the icon on the main page (on this branch): https://github.com/Genymobile/scrcpy/blob/icon.6/README.md

@varlesh
Copy link

varlesh commented Oct 23, 2021

ok, use as you want )

rom1v added a commit that referenced this pull request Oct 25, 2021
Use the new icon designed by @varlesh:
<#1987 (comment)>

Load it from a PNG file (SDL only supports bitmap icons).
@rom1v
Copy link
Collaborator Author

rom1v commented Oct 25, 2021

Merged into dev.

This icon will be the official scrcpy icon from the next release 🎉

Thank you very much!

@rom1v
Copy link
Collaborator Author

rom1v commented Nov 14, 2021

@varlesh Could you please set the logo on the scrcpy wikipedia page?

When uploading an image, wikipedia requires to check the box I am the author of this work. 😉

@varlesh
Copy link

varlesh commented Nov 15, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants