Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: Made with foo_uie_webview (Read 15799 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Made with foo_uie_webview

Reply #51
API Cover + Info Tracks v.2.1.1

API Cover + Radio Logo + Info Tracks v.2.1.1

For the module to work you must create a specific tag, exactly STREAM_NAME.

In foobar2000 select File then Preferences in Advanced under Filter write Properties dialog select Standard fields and enter:

Artist Name=ARTIST;Track Title=TITLE;Album Title=ALBUM;Date=DATE;Genre=GENRE;Composer=COMPOSER;Performer=PERFORMER;Album Artist=ALBUM ARTIST;Track Number=TRACKNUMBER;Total Tracks=TOTALTRACKS;Disc Number= DISCNUMBER;Total Discs=TOTALDISCS;Comment=COMMENT;Label=LABEL;Catalog=CATALOG;Country Artist=COUNTRY;Country Label=COUNTRY_LABEL;Country Station=COUNTRY_STATION;Group Name=GROUP_NAME;Format=FORMAT;Media=MEDIA;Stream Name= STREAM_NAME;URL=URL;

Once you have inserted the tags string, Apply and OK

I recommend making a copy of your settings.

In the Stream Name field you must enter the name of the Radio for example:

Free Radio

In the Logos folder you must have a corresponding png image therefore:

Free Radio.png

In this way the STREAM_NAME Tag displayed as Stream Name will take the corresponding image.

If you have done everything correctly the radio logo will appear in addition to the cover / album logo.

To tag the m3u file you must have the External Tags plugin installed
https://www.foobar2000.org/components/view/foo_external_tags

I recommend tagging in Tagging with edit external tag and not from Properties.

That's all.

API Cover + Info Tracks ver. 4.3.3

API Cover + Radio Logo + Info Tracks ver. 4.3.3.


Re: Made with foo_uie_webview

Reply #52
Country Flags in Next Version:



Country Label


Country Station


Carousel of images on the radios


Country Artitst / Country Label



Re: Made with foo_uie_webview

Reply #53
Is it possible to extract the album list +Art in web view ?
Iam so dumb in html ?

Re: Made with foo_uie_webview

Reply #54
- added the ability to select the priority for opening the radio station homepage (prefer the homepage address from the <URL> tag or from the Radio-Browser data)
- revised and optimized some functions
Download:

Re: Made with foo_uie_webview

Reply #55
Still something to fix....


Re: Made with foo_uie_webview

Reply #56
*Biography Remix*

This is meant to be a starting point for an alternate display, or Remix, of the data created by Wilb's Biography script.
https://hydrogenaud.io/index.php/topic,112914.0.html

It is not a replacement to Biography script, but a complement to it.
The only new functionality it offers is to display easily customizable bio and review (text) data in one panel, instead of two.

To use it, one must enable i/o for webview via a simple local server python command. thanks @MordredKLB !

The codes snippets are attached below and per this demo should be saved in your FB root directory (or moved to any other path you like but you will need to update the paths as indicated)
simple-cors-http-server.py
Code: [Select]
#!/usr/bin/env python3
from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)

To execute the code I prefer to use foo_run to launch a bat file, but it could also be done manually from a cmd prompt.

foo_run method>Add new service:
label: webview serve
path: cmd.exe /k "C:\Program Files '('x86')'\foobar2000\webview.bat"

^^^ Update your own foobar install path ^^^

webview.bat
Code: [Select]
@echo off
cd "C:\Program Files (x86)\foobar2000"
python simple-cors-http-server.py
pause

^^^ Update your own foobar install path ^^^

Chances are there is a way to "python simple-cors-http-server.py" from foo_run without the bat file, but I couldn't figure out how.  :(

Now you can rt-click any item in FB and launch your "Run service..." command and a cmd task should open.

With server running, you can now create a new Jsplitter panel with webview. Select the biography remix.html

You should see the same biography and review text that you have in your biography panels, similar to screenshot below.
If you do not:
1. Is the server running? you should have a cmd task running which displays:
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
2. Did you set up a custom save location in the biography component? you need to update 2 paths in the html file; look for:
// change these paths if you have custom biography data paths

This is called Remix, as you can easily adjust the data display - follow the comments in the html file to adjust CSS and make your own remix.

I will support questions on installing this only.
I'm not here to field "how do I html" questions, ChatGPT should be competent enough and a helluva lot more patient than I am.



Re: Made with foo_uie_webview

Reply #57
I'm sharing my theme's webview panels by request.
They might be useful for others as a starting point to remix into something else, which I would love to see (and possibly steal back!)

The code is not completely optimized, but responsive enough to adapt to different sized panels.
I have added comments throughout at key customization points, but they are works in progress - one should have some CSS/HTML knowledge, or make friends with ChatGPT.

For optimal display, panels 01/02 display tags which are populated via foo_discogs (or foo_discogger) and Wilb's biography panel (all tags except for rating/statistics); refer to both for how-to.
discogs: https://hydrogenaud.io/index.php/topic,50523.0.html
biography panel: https://hydrogenaud.io/index.php/topic,112914.0.html
see basic_tags.png image below

Panel 03 requires no special tagging and only repurposes data from Wilb's Biography panel. Refer to my *Biography Remix* post further up this thread for specifics on displaying that data. The version here differs from that one for bkgd cover image display.

Webview01: now playing, is probably the most useful/transferrable of the 3 panels. It sloppily integrates the slideshow/rotating CD created by @Jacob91 -thanks!
When initially loaded, a settings dialog will appear for that element; adjust settings or click on album cover to dismiss.
Additionally, it features an easily adjustible CSS FX cycling animation on the background cover image.
It is scrollable and "below the fold", features a similar version of information found in panel 02

Webview02/03 background image positioning has been adjusted to provide the appearance of a seamless cover - this is layout specific and CSS settings need to be adjusted to achieve the same elsewhere; see CSS comments in HTML.

FYI, details on the rest of the theme are here: https://hydrogenaud.io/index.php/topic,58574.msg1053704.html#msg1053704

Re: Made with foo_uie_webview

Reply #58
I'm sharing my theme's webview panels by request.
They might be useful for others as a starting point to remix into something else, which I would love to see (and possibly steal back!)

The code is not completely optimized, but responsive enough to adapt to different sized panels.
I have added comments throughout at key customization points, but they are works in progress - one should have some CSS/HTML knowledge, or make friends with ChatGPT.

For optimal display, panels 01/02 display tags which are populated via foo_discogs (or foo_discogger) and Wilb's biography panel (all tags except for rating/statistics); refer to both for how-to.
discogs: https://hydrogenaud.io/index.php/topic,50523.0.html
biography panel: https://hydrogenaud.io/index.php/topic,112914.0.html
see basic_tags.png image below

Panel 03 requires no special tagging and only repurposes data from Wilb's Biography panel. Refer to my *Biography Remix* post further up this thread for specifics on displaying that data. The version here differs from that one for bkgd cover image display.

Webview01: now playing, is probably the most useful/transferrable of the 3 panels. It sloppily integrates the slideshow/rotating CD created by @Jacob91 -thanks!
When initially loaded, a settings dialog will appear for that element; adjust settings or click on album cover to dismiss.
Additionally, it features an easily adjustible CSS FX cycling animation on the background cover image.
It is scrollable and "below the fold", features a similar version of information found in panel 02

Webview02/03 background image positioning has been adjusted to provide the appearance of a seamless cover - this is layout specific and CSS settings need to be adjusted to achieve the same elsewhere; see CSS comments in HTML.

FYI, details on the rest of the theme are here: https://hydrogenaud.io/index.php/topic,58574.msg1053704.html#msg1053704
That's great. Thanks!
And in what folder should the ICONS in webview01 be placed?


 

Re: Made with foo_uie_webview

Reply #60
Now Playing Kaleidoscope

Based on album cover.
Interacts with mouse.

Likely to max out older systems, but I haven't had it crash (yet). Mem will reset on panel reload.



Re: Made with foo_uie_webview

Reply #61
Now Playing Kaleidoscope

Based on album cover.
Interacts with mouse.

Likely to max out older systems, but I haven't had it crash (yet). Mem will reset on panel reload.
pretty

Re: Made with foo_uie_webview

Reply #62
In progress.

Single management for Artwork, Thumbs & Radio Logos + extra images.

Single management also for the API cover module for Front and Logo images.


Re: Made with foo_uie_webview

Reply #63
Now Playing Kaleidoscope

Based on album cover.
Interacts with mouse.

Likely to max out older systems, but I haven't had it crash (yet). Mem will reset on panel reload.

It's been optimized and there should be no more memory issues.

Now also a stand-alone visualizer option.
CTRL scroll-button to zoom, and panel scroll bars to adjust placement.

Re: Made with foo_uie_webview

Reply #64
In progress.

Single management for Artwork, Thumbs & Radio Logos + extra images.

Single management also for the API cover module for Front and Logo images.



In progress...

+ Info Track
+ Timer Cycle
+ Blur Custom Image


Re: Made with foo_uie_webview

Reply #65
I was working on image loaders and created a little carousel demo to display album artwork, but could be used for artists or any folder with images.
It won't go further than this (unless webview i/o ever improves), but it might be a useful start for other experiments.

Images are pulled from $directory_path(%path%) which can be modified on line 122.

To use it, simple-image-server.py should be placed in the root path of the library,
and launched from an *elevated* cmd prompt: "python simple-image-server.py"

If images aren't loading, use webview panel>inspect and double-check the path in the console.


Re: Made with foo_uie_webview

Reply #66
@ApacheReal, @mjm716, excellent!

New version posted:
- design changes:
-- added "Options" button (checkbox settings are remembered. If the cache is cleared, the checkboxes are set to default)
-- option to display artists pictures (The checkbox is activated. Optional displaying pictures in a circle)
-- option to increase the radio station favicon
-- option to disable the display of the radio station's country flag (to reduce network requests, unfortunately, there is no simple, in my opinion, way for the plugin to form a file cache on the computer disk)
- other changes and improvements.
Download:

Re: Made with foo_uie_webview

Reply #67
today, I can say that I would use the ability to save files received from URL on the computer disk to form a file cache. To reduce network requests and increase reliability in case of problems with the network)
I think for that it would really be possible to limit access to one disk folder, for example, which the component is installed.
Thank you!

You might want to keep that content in the main thread and not combine with "made with", or it will be easily overlooked.
I'm doubtful he visits this forum much.

Re: Made with foo_uie_webview

Reply #68
today, I can say that I would use the ability to save files received from URL on the computer disk to form a file cache. To reduce network requests and increase reliability in case of problems with the network)
I think for that it would really be possible to limit access to one disk folder, for example, which the component is installed.
Thank you!

You might want to keep that content in the main thread and not combine with "made with", or it will be easily overlooked.
I'm doubtful he visits this forum much.
You are right, it will be better this way.


Re: Made with foo_uie_webview

Reply #70
Very beautiful 😍😍😍


Re: Made with foo_uie_webview

Reply #72
New version posted:
- artist photos and Wiki pages can now open automatically when playing local files;
- fixed a bug with favicon display in some cases;
- the "Options" drop-down menu now hides automatically;
- added the ability to assign a preferred window background color for each radio station. (If the background color is not assigned, the default background color set. To set default color click "Reload" before the track starts playing after selecting the color. The console will display a message about setting the default background color);
- other changes and improvements.
Download:

Re: Made with foo_uie_webview

Reply #73
I release this first version.

There is still a lot to do and optimize, anyone who would like to provide support to make improvements is welcome.

In the link you will find the images no_cover_api.jpg and no_cover.jpg which are the fallback images to be inserted in a folder called images.

images


Re: Made with foo_uie_webview

Reply #74
I release this first version.

There is still a lot to do and optimize, anyone who would like to provide support to make improvements is welcome.

In the link you will find the images no_cover_api.jpg and no_cover.jpg which are the fallback images to be inserted in a folder called images.

images


Fix color-box