Closed craigsapp closed 3 years ago
(1) The image is 3MB in size...
Yeah, I know - I put it there only because I could not stand the previous one :)
(2) The viewable part of the image in the borders is a bit confusin
Despite of the fact whether we use same or other image I choose this one intentionally. It shows not only music notation, but text as well and looks nice. Of course we can find better one.
Yeah, I know - I put it there only because I could not stand the previous one :)
It is much improved :-)
There are some various possibilities in addition to just a single image:
(1) There can be multiple background images that can be chosen at random when the website is loaded.
(2) There could be date-specific images, such as for composer's birthdays or for holidays related to a particular piece.
(3) Clicking on the background image could take you to the digital score for that work and/or the webpage with the scanned score related to the background (which could also be integrated somehow on the work page once there is IIIF availability of the image).
(2) There could be date-specific images, such as for composer's birthdays or for holidays related to a particular piece.
That sounds good!
I used this oneliner to get dates of three movable feasts - Easter, Pentecost and Corpus Christi till the end of the millennium. The output is Humdrum format ;)
i=2021; echo -e "**easter\t**pentecost\t**corpuschristi"; while [[ $i < 3001 ]]; do e=`ncal -e $i | sed "s/\.03\./ mar /" | sed "s/\.04\./ apr /"` ; e=`date -I -d "$e"` ; s=`date -I -d "$e +49 days"` ; c=`date -I -d "$e +60 days"`; echo -e "$e\t$s\t$c"; i=$(($i+1)); done ; echo -e "*-\t*-\t*-"
it can also work as a script, of course:
#!/bin/bash
i=2021
echo -e "**easter\t**pentecost\t**corpuschristi"
while [[ $i < 3001 ]]; do
e=`ncal -e $i | sed "s/\.03\./ mar /" | sed "s/\.04\./ apr /"`
e=`date -I -d "$e"`
s=`date -I -d "$e +49 days"`
c=`date -I -d "$e +60 days"`
echo -e "$e\t$s\t$c"
i=$(($i+1))
done
echo -e "*-\t*-\t*-"
New background image:
https://github.com/craigsapp/website-polish-scores/blob/main/img/zielenski.png
is small enough to be fast to load (note that the website is currently loading from your computer, so there is no time delay for downloading a 3MB image, but when put online, the old 3MB image would be noticeably slower).
The new background image is a two-color image where dithering artifacts were removed using gimp's despeckle filter (first converting to full color since the despeckle filiter does not work on indexed color images). Then I converted back to indexed color and saved as PNG, then used ImageMagick convert
tool to convert to GIF and then back to PNG again to use a better compression algorithm in convert than is available in gimp. The resulting image is 250 KB, which is a good target size for background images.
An alternate method is to heavily compress with this command:
convert file.jpg -quality 50 file-compressed.jpg
which cut the original image from 3 MB to 250 KB:
https://github.com/craigsapp/website-polish-scores/blob/main/img/pope-martin.jpg
And of course, having a selection of images that are randomly selection and/or selected based on a specific date such as Easter will be interesting to add to the website.
The new background image needs fixing. There are two general problems:
(1) The image is 3MB in size. This is too large because it will slow down the loading of the page (it exceeds the size of the Verovio toolkit, for example). The previous background image was 200 KB, which is a good target side for a decorative background. This can be done either by heavily compressing the image in the JPG format, or reducing the colors in a PNG format (this is how I reduced the POPC1 background image from 800 KB to 200 KB for the initial POPC2 background image).
(2) The viewable part of the image in the borders is a bit confusing as to if it is actually music notation:
A more zoomed-out view of music might give more interesting details in the visible margins. Also, there could be some sort of transparency maybe in the top left/right corners to show some interesting but not too distracting details of the background image.