macOS Geektool displaying current track playing on a web radio?

[galgot]

Hi !
My first question here I’m listening to a online station called Fip, using cmus for that, on Mac osx 10.11.
I use Geektool too. Now I would like to have geektool display the current playing track/artist/album (or album cover) on my desktop.
There is an online player for that station , displays all track/artist/album and cover on a webpage. So I thought it would be possible to grab these infos and somehow make Geektool display it.
Here is the page:
https://www.fip.fr/player

I’ve checked for Geeklets that would do that, found some that would grab images or infos from websites regularly and display it using curl and sed commands.
But it seems this works only when the info and image can be found with the same name or something like that… On that fip radio player, the current song/cover e all are changed dynamically (?) and I can’t grab the infos I want from the Curled html page…
Even though the infos are there on the page when I inspect the elements in Safari.

that is what I’ve tried for the moment on the terminal,
for a start inspected the element displaying just the track title on the web player , i get :

<div class="title" data-xiti="" title="Tambourine Party">Tambourine Party</div>

this at line 177 display the title (tambourine Party).
So I used curl and sed like so to get the page and display that line :

curl -s https://www.fip.fr/player | sed -n -r '177p'

Problem is, it return only :

<div class="title" data-xiti=""></div>

the right line apparently, but not displaying the track title :/ that is where i’m stuck…

Tried also getting the album cover. inspecting the element, I can find the image url (and display it in geektool), but as the image is changed with each track, the path and image name are changed the same, and Geektool is stuck on just one image…

And most of all, I don’t have the coding knowledge to do this
Was wondering someone could tell me if it's possible and help me with that , or point me to an geeklet doing that.

 

[galgot]

So here is how I did it, wanted to share, in case some knowledgeable peoples here , could sure tell me what could be corrected/improved As I'm a complete noob in scripting and stuff...

After trying without success with some commands like curl and sed like I said in my previous post, I Learned that the track infos are in the metadatas of the streamed tracks. Found some scripts to grab the metadatas in Java and Python. Problem, it works with certain streams and not with some others…
And of course not with my favorite station :/
Due I’m sure to the fact that I don’t understand how to use the tools correctly ...But also to the fact that some radio stations use an alternating titration in the metadatas, so to prevent ripping of their stream with tools like "Streamripper" and others. It’s especially true here in France, as it’s imposed by law to protect the authors rights. And FipRadio being a French , and morerover public radio, they apply that.
Plus they prefer the listeners to go on their website to check the track title of course…

But then the info are there on the page. how to grab them ?

Checked for a command line tool that would make webpage screenshot. If I could have a command that makes screenshot of that webplayer page, then crop it with imagemagick, then I could have Geektool displaying that cropped image with just the track infos on my desktop.

Found Webkit2png. A python script. Just save it in your /usr/local/bin and make it executable, and it works perfectly.
Before I started reading the manual (webkit2png -help), I did used Imagemagick to crop the screenshot to display. it worked fine, until I found it was no use…
Webkit2png as a CSS selector option were you can tell it to grab a single element in the page !
So inspected the cover image and track info elements on the web player page and told webkit2png to get their names and grab only these. worked even simpler.

Now I had another aesthetical problem. The track info screenshot image had white text on a dark gray background, not my taste. How about having black text on a transparent png ? well imagemagick can do that.
Worked somehow. I had imagemagick convert the image in grayscale, pull the contrasts, invert, remove the now white background, finally saving it in png.
Problem , it displayed fine on some wallpapers (light colored ones), but not very well on the dark ones. no matter what settings I use in imagemagick to select the white background and remove it, it would still show a bit on dark wallpapers… :/

Thought maybe a OCR tool could do the trick. Found Tesseract.
Available both with macport and brew.

So I made a new folder in my user folder, called "fiptitle" . In there create a small script "fipTitle.sh" that :

• -tells webkit2png to grab the current track cover element image of the webplayer.
• -tells the same to grab the current track title/artist/album/label info element image of the webplayer.
• -tells imagemagick to make the title infos screenshot ready and easy for the OCR , that -> grayscale -> invert -> remove background.
• -tells tesseract to convert and save the resulting image into a text file.

here is the script with the explanations :

#!/bin/bash

cd /Users/YOURUSERNAMEHERE/fiptitle
#Found out i’d better get into the folder where the script is, and call it from there, instead of putting the #script in /usr/local/bin.
#This to be sure the images are saved in this folder.

#get fip web player cover screenshot
/usr/local/bin/webkit2png --ignore-ssl-check --selector=div.cover -W 1000 -F -o cover https://www.fip.fr/player
#used the absolute path to webkit2png, will explain later why. --ignore-ssl-check say what it does, used it
#cause I had errors messages from webkit2png about ssl, even though it worked the same, don’t know if
#needed… --selector=div.cover is the option to save only the cover image element "div.cover" from the
#webpage. -F is option to create only the fullsize screenshot, by default webkit2png creates 3 images, a
#fullsize , a thumbnail, and a clipped thumbnail. we don’t need all that. -o cover tells to save the full-scale
#image with the "cover" name, will save it as "cover-full.png" in my "fiptitle" folder. at the end is the
#webplayer adress.

#get fip web player title infos screenshot
/usr/local/bin/webkit2png --ignore-ssl-check --selector=div.rows-container -F -o title https://www.fip.fr/player
#Same options, only there you grab the title infos image element, called "div.rows-container" on the page,
#and save it as "title-full.png"

#turn title image to greyscale
/opt/local/bin/convert title-full.png -colorspace Gray title-full.png
#Says what it does, using the imagemagick convert tool. also used the absolute path to the command here…

#invert title image colors
/opt/local/bin/convert title-full.png -negate title-full.png
#Same…

#turn title image background to alpha
/opt/local/bin/convert title-full.png -fuzz 30% -transparent white title-full.png
#-fuzz 30% is a bit like the magic wand tool in photoshop, then -transparent white removes the #background. tried other options, with different results, these works for me…

#convert title image to texte file
/usr/local/bin/tesseract title-full.png output
#Says what it does, tells tesseract "read" the resulting "title-full.png" and save it to an "output.txt" text file.

Then GeekTool,

- Create a Geeklet for displaying the cover image "cover-full.png" in my "fiptitle" folder on the desktop, easy.
- Create another one for displaying the title infos from the "output.txt" text file. Caveat: tesseract as created the text file with the empty lines present on the image, so to remove the empty lines you can use sed command like so :

sed '/^$/d' /Users/YOURUSERNAMEHERE/fiptitle/output.txt

use this command for your shell Geeklet, '/^$/d' option will tell sed to output the text without the empty lines.
- Create a Geeklet to run the main script "fipTitle.sh"… This is were I run into problems. Geektool just doesn’t want to run it , found out that I needed to put the absolute path to the commands in script for even Geektool to try to run it. But even then, it would output "Fetching https://www.fip.fr/player … something went wrong; could not connect to the server." :/
Ok then …Geektool just can’t run that kind of command. Something learned again…

How about telling Geektool to run a script or an app that runs the script , if it can’t run it itself ?… Tried tell Geektool to run an Applescript call my "fiptitle" script, no joy…
In the end what worked was doing an dedicated app for running the script using Platypus, and calling it with a shell Geeklet like so :

cd /Applications
open FipTitle.app

Platypus is a super handy tool for creating apps out of bash scripts, applescripts, python… and other. You can make menu bar apps, droplets , or app with no interface that just runs a script . very cool.
Anyways, I created my small app just calling the main script, with no interface. And saved it as "FipTitle.app" in the Applications folder.

Then set the Geeklet to call it , I set it to refresh not too often, as i’d prefer to refresh Geektool manually when ever i want to know what’s playing, rather than overload my poor MacBook Pro with futilities And display a small thumb up or down whenever the thing worked, cause it looks cool.


Here is how it looks, with the iTerm window on the right running cmus streaming FipRadio.

 

[okieiam]

Long story shot, are you new to web?
curl = "Server side HTML code"
Inspect Element = "Client's side HTML code"
So use a web engine like this one https://github.com/jonnnnyw/php-phantomjs

 

[galgot]

Yes, Thanks you, are you new to courtesy ?
Will sure try that, thks again