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 4720 times) previous topic - next topic
0 Members and 2 Guests are viewing this topic.

Made with foo_uie_webview

Hi there!

This template for the foo_uie_webview component allows you to display on the map the geolocation of server radio station you are listening.
This is new version that was published earlier in the author's thread:https://hydrogenaud.io/index.php/topic,126042.msg1046148.html#msg1046148
To start using, unpack the template file into the directory where your template files for the foo_uie_webview component are located.
Then you will need to get a personal API key on the website https://ipgeolocation.io.
Next, the API key write to the template file geoIP_foo_uie_webview.html in the specified location and saved that.
To display the geolocation radio station server, click the “Geo” button.
Color preferences and other available designs are configured manually in geoIP_foo_uie_webview.html.
Unfortunately, for some reason, the IP address cannot be determined for some links. In this case, the message “IP address not found” is displayed.

Feedback, suggestions, file modifications are welcome  ;)

p/s
Thanks @pqyt for this great foo_uie_webview component.
I hope it will develop and improve in the future!

Re: Made with foo_uie_webview

Reply #1
This would be a great place to share templates!   ;)


Re: Made with foo_uie_webview

Reply #3
@mjm716
Thank you for a great template.
But the album art is not showing.

-----
Could you please create a data folder and give it a name?
Could you put Template.html etc. in it?
I can't organize the data folder.
I can do it myself, but please do it if possible.
I can specify data folder path and Template file path, thank you.

WebView 0.1.5.0-alpha4
foobar2000 v2.1.5 x64
SHURE SRH1840, SENNHEISER HD660S2, SENNHEISER HD620S, SENNHEISER HD 490 Pro Plus, beyerdynamic DT 1990 PRO, HiFiMAN Edition XS, Bowers & Wilkins P7, FiiO FT5, 水月雨 (MOONDROP) 空鳴 - VOID, Nakamichi Elite FIVE ANC, SONY WH1000XM5 (made a Upgrade/Balanced Cable by myself)

Re: Made with foo_uie_webview

Reply #4
The component cannot retrieve album art from the preferences like other components so you'd have to edit the title format pattern yourself...

Line 261:

Code: [Select]
document.getElementById("art").src = chrome.webview.hostObjects.sync.foo_uie_webview.GetFormattedText("[$directory_path(%path%)]/cover.jpg");

Embedded art cannot be displayed without a significant component update - and that would depend entirely on pqyt wanting to add such a feature.

Re: Made with foo_uie_webview

Reply #5
@marc2k3

Thank you, it was displayed when I changed it to "folder.jpg".

> Embedded art cannot be displayed without a significant component update.

Okay, I look forward to it.
SHURE SRH1840, SENNHEISER HD660S2, SENNHEISER HD620S, SENNHEISER HD 490 Pro Plus, beyerdynamic DT 1990 PRO, HiFiMAN Edition XS, Bowers & Wilkins P7, FiiO FT5, 水月雨 (MOONDROP) 空鳴 - VOID, Nakamichi Elite FIVE ANC, SONY WH1000XM5 (made a Upgrade/Balanced Cable by myself)


Re: Made with foo_uie_webview

Reply #7
>  and that would depend entirely on pqyt wanting to add such a feature.

Okay, I hope so.
SHURE SRH1840, SENNHEISER HD660S2, SENNHEISER HD620S, SENNHEISER HD 490 Pro Plus, beyerdynamic DT 1990 PRO, HiFiMAN Edition XS, Bowers & Wilkins P7, FiiO FT5, 水月雨 (MOONDROP) 空鳴 - VOID, Nakamichi Elite FIVE ANC, SONY WH1000XM5 (made a Upgrade/Balanced Cable by myself)

Re: Made with foo_uie_webview

Reply #8
Posted two templet files:
1. The new version of the viewer $meta(message) of the tracker modules for the OpenMPT Module Decoder. Allows you to display messages in the original layout.
Previously, the version using foo_textdisplay.dll (by foosion) was posted: https://hydrogenaud.io/index.php/topic,115308.msg1029141.html#msg1029141. Also attached two modules for testing.
2. Viewer of static and dynamic information for the OpenMPT decoder.

Feedback, suggestions, templet files modifications are welcome  :)

Re: Made with foo_uie_webview

Reply #9
Change log:
New: IP address can be added manually by writing to the <IP> tag in the link properties (using External Tags)
New: added the ability to display the radio station's Internet page from the <URL> tag. The address can be added manually (using External Tags)
other changes.
Thanks @pqyt!


Re: Made with foo_uie_webview

Reply #11
Added sandbox parameter to <iframe> element to prevent opening external windows etc.
Please do not use previous versions.

Re: Made with foo_uie_webview

Reply #12
This is a (hopefully temporary) workaround to display existing data from the buggy/crashing SMP/Biography panel.

It will display the review and biography data previously saved (in default location) by @Wilb Biography panel.

It only displays what already exists and DOES NOT retrieve any new data.

**Make sure to update your own local file path-->
** return `file:///S:/Jukebox Hero/foobar2000/profile/yttm/review/${baseDir}/${artistInitial}/${artist} - ${album}.txt`;

**adjust heights in CSS .fileContent

Reviews:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


   <style>
        body {
            font-family: 'Oswald', sans-serif; color: #d5d2d2;
            margin: 5px;

        }
        .fileContent {
            border: 1px solid #d1d1d1;
            padding: 1px;
            background-color: #d1d1d1;
            width: 90%;
            height: 125px;
        }

    </style>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
</head>
<body>
  <span style="position:absolute; font-size: 6em; margin-top: -65px; margin-left: -15px; font-family: 'Oswald', sans-serif; color: rgb(12,180,171); font-weight:700; z-index:-1;">Reviews</span>
 <div style="display: flex; justify-content: space-between; position:relative;"><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">AllMusic <iframe id="file1Frame" class="fileContent"></iframe></span><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">LastFM<iframe id="file2Frame" class="fileContent"></iframe></span><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">Wikipedia<iframe id="file3Frame" class="fileContent"></iframe></span></div>

    <script>
        async function getFormattedText(format) {
            return chrome.webview.hostObjects.sync.foo_uie_webview.GetFormattedText(format);
        }

        function constructFilePath(baseDir, artist, album) {
            const artistInitial = artist.charAt(0).toUpperCase();
            return `file:///S:/Jukebox Hero/foobar2000/profile/yttm/review/${baseDir}/${artistInitial}/${artist} - ${album}.txt`;
        }

        async function loadFileContent() {
            try {
                const artist = await getFormattedText("[%artist%]");
                const album = await getFormattedText("[%album%]");

                // Construct file paths
                const file1Path = constructFilePath('allmusic', artist, album);
                const file2Path = constructFilePath('lastfm', artist, album);
                const file3Path = constructFilePath('wikipedia', artist, album);

                // Display file contents in iframes
                document.getElementById('file1Frame').src = file1Path;
                document.getElementById('file2Frame').src = file2Path;
                document.getElementById('file3Frame').src = file3Path;

            } catch (error) {
                console.error('Error retrieving formatted text:', error);
document.getElementById('file1Frame').contentDocument.body.textContent = 'Failed to load file content.';
                document.getElementById('file2Frame').contentDocument.body.textContent = 'Failed to load file content.';
document.getElementById('file3Frame').contentDocument.body.textContent = 'Failed to load file content.';
            }
        }


// Called when playback is being initialized.
function OnPlaybackStarting(command, paused)
{

    document.getElementById("Starting").textContent = command + " (" + (paused ? "Paused" : "Playing") + ")";
}

// Called when playback advances to a new track.
function OnPlaybackNewTrack()
{

    Refresh()
}

// Called when playback stops.
function OnPlaybackStop(reason)
{
    document.getElementById("StopReason").textContent = reason; // "User" / "EOF" / "Starting another" / "Shutting down"
}

// Called when the user seeks to a specific time.
function OnPlaybackSeek(time)
{
    document.getElementById("Time").textContent = time; // in seconds
}

// Called when playback pauses or resumes.
function OnPlaybackPause(paused)
{
    document.getElementById("Paused").textContent = paused; // true / false
}

// Called when the currently played file gets edited.
function OnPlaybackEdited()
{
    Refresh();
}

// Called when dynamic info (VBR bitrate etc...) changes.
function OnPlaybackDynamicInfo()
{
    Refresh();
}

// Called when the per-track dynamic info (stream track titles etc...) change. Happens less often than OnPlaybackDynamicInfo().
function OnPlaybackDynamicTrackInfo()
{
    Refresh();
}

// Called, every second, for time display.
function OnPlaybackTime(time)
{
    document.getElementById("Time").textContent = time; // in seconds

    document.getElementById("TrackTime").textContent = chrome.webview.hostObjects.sync.foo_uie_webview.GetFormattedText("[%playback_time%[/%length%]]");
}

// Called when the user changes the volume.
function OnVolumeChange(newValue)
{
    document.getElementById("Volume").textContent = newValue; // in dBFS
}

// Called when the focused playlist item changes.
function OnPlaylistFocusedItemChanged()
{
    Refresh();
}

// Refreshes the content of all elements.
function Refresh()
{

        // Load the file contents when the page loads
        loadFileContent();


}

    </script>
</body>
</html>

Biographies:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


   <style>
        body {
            font-family: 'Oswald', sans-serif; color: #d5d2d2;
            margin: 5px;
background-color: #333;
        }
        .fileContent {
            border: 1px solid #d1d1d1;
            padding: 1px;
            background-color: #d1d1d1;
            width: 90%;
            height: 250px;
        }
    </style>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
</head>
<body>
 <span style="position:absolute; font-size: 6em; margin-top: -65px; margin-left: -15px; font-family: 'Oswald', sans-serif; color: rgb(12,180,171); font-weight:700; z-index:-1;">Biographies</span>
 <div style="display: flex; justify-content: space-between; position:relative;"><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">AllMusic <iframe id="file1Frame" class="fileContent"></iframe></span><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">LastFM<iframe id="file2Frame" class="fileContent"></iframe></span><span style="font-size: .9em; margin: 5px; text-align: left; font-family: 'Oswald', sans-serif; color: #d5d2d2; ">Wikipedia<iframe id="file3Frame" class="fileContent"></iframe></span></div>


    <script>


        async function getFormattedText(format) {
            return chrome.webview.hostObjects.sync.foo_uie_webview.GetFormattedText(format);
        }

        function constructFilePath(baseDir, artist, album) {
            const artistInitial = artist.charAt(0).toUpperCase();
            return `file:///S:/Jukebox Hero/foobar2000/profile/yttm/biography/${baseDir}/${artistInitial}/${artist}.txt`;
        }

        async function loadFileContent() {
            try {
                const artist = await getFormattedText("[%artist%]");
                const album = await getFormattedText("[%album%]");

                // Construct file paths
                const file1Path = constructFilePath('allmusic', artist);
                const file2Path = constructFilePath('lastfm', artist);
                const file3Path = constructFilePath('wikipedia', artist);

                // Display file contents in iframes
                document.getElementById('file1Frame').src = file1Path;
                document.getElementById('file2Frame').src = file2Path;
                document.getElementById('file3Frame').src = file3Path;

            } catch (error) {
                console.error('Error retrieving formatted text:', error);
document.getElementById('file1Frame').contentDocument.body.textContent = 'Failed to load file content.';
                document.getElementById('file2Frame').contentDocument.body.textContent = 'Failed to load file content.';
document.getElementById('file3Frame').contentDocument.body.textContent = 'Failed to load file content.';
            }
        }


// Called when playback is being initialized.
function OnPlaybackStarting(command, paused)
{

    document.getElementById("Starting").textContent = command + " (" + (paused ? "Paused" : "Playing") + ")";
}

// Called when playback advances to a new track.
function OnPlaybackNewTrack()
{

    Refresh()
}

// Called when playback stops.
function OnPlaybackStop(reason)
{
    document.getElementById("StopReason").textContent = reason; // "User" / "EOF" / "Starting another" / "Shutting down"
}

// Called when the user seeks to a specific time.
function OnPlaybackSeek(time)
{
    document.getElementById("Time").textContent = time; // in seconds
}

// Called when playback pauses or resumes.
function OnPlaybackPause(paused)
{
    document.getElementById("Paused").textContent = paused; // true / false
}

// Called when the currently played file gets edited.
function OnPlaybackEdited()
{
    Refresh();
}

// Called when dynamic info (VBR bitrate etc...) changes.
function OnPlaybackDynamicInfo()
{
    Refresh();
}

// Called when the per-track dynamic info (stream track titles etc...) change. Happens less often than OnPlaybackDynamicInfo().
function OnPlaybackDynamicTrackInfo()
{
    Refresh();
}

// Called, every second, for time display.
function OnPlaybackTime(time)
{
    document.getElementById("Time").textContent = time; // in seconds

    document.getElementById("TrackTime").textContent = chrome.webview.hostObjects.sync.foo_uie_webview.GetFormattedText("[%playback_time%[/%length%]]");
}

// Called when the user changes the volume.
function OnVolumeChange(newValue)
{
    document.getElementById("Volume").textContent = newValue; // in dBFS
}

// Called when the focused playlist item changes.
function OnPlaylistFocusedItemChanged()
{
    Refresh();
}

// Refreshes the content of all elements.
function Refresh()
{

        // Load the file contents when the page loads
        loadFileContent();
}

    </script>
</body>
</html>

Re: Made with foo_uie_webview

Reply #13
NEW: added Radio-Browser integration:
- displays the name, logo and homepage link of the currently playing radio station
- displays the country of the currently playing radio station
- the link to the radio station's homepage can be opened in the component window
- the country of the radio station's homepage can be opened on the world map
NEW: added the ability to open a Wikipedia page based on the contents of %artist% (the page is automatically updated when the artist name is changed)
NEW: added the ability to open a Last.fm page based on the contents of %artist% (does not automatically update)
NEW: added several selection options
NEW: added tooltips
- other improvements and changes.
- for use with WebView v.0.1.8.0.
Download:

Re: Made with foo_uie_webview

Reply #14
@Serget77

Excellent, thank you.












Re: Made with foo_uie_webview

Reply #15
@Serget77
Excellent, thank you.
@ApacheReal
Thank you for your feedback too!
Glad you liked the script.
That's great!

By the way, your fb2k layout looks functional and stylish.

 

Re: Made with foo_uie_webview

Reply #16
NEW: ability to add path to local file in "FAVICON" tag. (If favicon is not found in Radio-Browser your file will be displayed, External Tags is required)
NEW: added display of "Genre" tag
- fixed logic of opening home page (if there is no data in %URL% then tries to open home page with address from Radio-Browser)
- minor internal changes and design changes.
Download: