Home of the Squeezebox™ & Transporter® network music players.
Results 1 to 8 of 8
  1. #1
    Senior Member
    Join Date
    May 2008
    Location
    Canada
    Posts
    4,468

    JS/Perl TT noob question

    Hi - Sorry for the dumb question, but what's the correct way to get a JS script executed at a page load with TT? I have an html page for settings (e.g.) and I'd like a script to be run each time the page loads, but I can't get that to work with various onload= attempts I've made.
    LMS 7.7, 7.8 and 7.9 - 5xRadio, 3xBoom, 4xDuet, 1xTouch, 1 SB2. Sonos PLAY:3, PLAY:5, Marantz NR1603, JBL OnBeat, XBoxOne, XBMC, Foobar2000, ShairPortW, JRiver 21, 2xChromecast Audio, Chromecast v1 and v2, , Pi B3, B2, Pi B+, 2xPi A+, Odroid-C1, Odroid-C2, Cubie2, Yamaha WX-010, AppleTV 4, Airport Express, GGMM E5

  2. #2
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,172

    JS/Perl TT noob question

    > Hi - Sorry for the dumb question, but what's the correct way to get a JS
    > script executed at a page load with TT? I have an html page for settings
    > (e.g.) and I'd like a script to be run each time the page loads, but I
    > can't get that to work with various onload= attempts I've made.


    There's nothing Perl/TT specific in there. See eg. the Presets Editor
    template
    https://github.com/Logitech/slimserv...sets.html#L42:
    just add a <script> section in your template.

    --

    Michael

  3. #3
    Senior Member
    Join Date
    May 2008
    Location
    Canada
    Posts
    4,468
    Quote Originally Posted by mherger View Post
    > Hi - Sorry for the dumb question, but what's the correct way to get a JS
    > script executed at a page load with TT? I have an html page for settings
    > (e.g.) and I'd like a script to be run each time the page loads, but I
    > can't get that to work with various onload= attempts I've made.


    There's nothing Perl/TT specific in there. See eg. the Presets Editor
    template
    https://github.com/Logitech/slimserv...sets.html#L42:
    just add a <script> section in your template.

    --

    Michael
    Thanks Mickael - I really thought I tried that as well, but probably with a mistake or something which prevented the script to run then ...
    LMS 7.7, 7.8 and 7.9 - 5xRadio, 3xBoom, 4xDuet, 1xTouch, 1 SB2. Sonos PLAY:3, PLAY:5, Marantz NR1603, JBL OnBeat, XBoxOne, XBMC, Foobar2000, ShairPortW, JRiver 21, 2xChromecast Audio, Chromecast v1 and v2, , Pi B3, B2, Pi B+, 2xPi A+, Odroid-C1, Odroid-C2, Cubie2, Yamaha WX-010, AppleTV 4, Airport Express, GGMM E5

  4. #4
    Senior Member
    Join Date
    May 2008
    Location
    Canada
    Posts
    4,468
    A bit related, I was wondering how to pass complex objects to a JS. In the settings handler, items in $param are bound to TT variables. For example, $params{X}->{Y} can be accessed as [% X.Y %]. Now, is there a way to access this complex object X (let's say it's an array of hash) from a JS function? When I pass a simple variable (number, string ...) it is accessible (globals can also be accessed) by
    Code:
    var x = [% x %]
    But as soon as I try to access a complex object, nothing works and typeof fails.
    I don't understand the binding of Perl data to the TT, so I'm not sure what to do to make such objects accessible is a javascript. Shall I try to use https://metacpan.org/pod/Template::Plugin::JSON. Going through string and then JSON seems ugly to me and I would hope there is a better binding between JS and Perl/TT variables ... but what do I know (not much)
    LMS 7.7, 7.8 and 7.9 - 5xRadio, 3xBoom, 4xDuet, 1xTouch, 1 SB2. Sonos PLAY:3, PLAY:5, Marantz NR1603, JBL OnBeat, XBoxOne, XBMC, Foobar2000, ShairPortW, JRiver 21, 2xChromecast Audio, Chromecast v1 and v2, , Pi B3, B2, Pi B+, 2xPi A+, Odroid-C1, Odroid-C2, Cubie2, Yamaha WX-010, AppleTV 4, Airport Express, GGMM E5

  5. #5
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,172
    Quote Originally Posted by philippe_44 View Post
    I don't understand the binding of Perl data to the TT, so I'm not sure what to do to make such objects accessible is a javascript. Shall I try to use https://metacpan.org/pod/Template::Plugin::JSON. Going through string and then JSON seems ugly to me and I would hope there is a better binding between JS and Perl/TT variables ... but what do I know (not much)
    I wouldn't go as far as adding a new TT plugin for this simple use case. Just think about what TT does: it basically creates the "text" in your HTML file. Thus if you need some javascript reading like this from a given Perl hash:

    Code:
    <script>
       var hashValues = { a: "foo", b: "bar" };
    </script>
    You need to write a TT statement which does print the %hash this way. Now that's nothing else than JSON, isn't it. Thus you'd use Perl's to_json() function to store a JSONified string version of the hash, then simply print that generated string in your template. And that's basically what the plugin you suggested would do for you.
    Michael

    http://www.herger.net/slim-plugins - Spotty, MusicArtistInfo

  6. #6
    Senior Member
    Join Date
    May 2008
    Location
    Canada
    Posts
    4,468
    Quote Originally Posted by mherger View Post
    I wouldn't go as far as adding a new TT plugin for this simple use case. Just think about what TT does: it basically creates the "text" in your HTML file. Thus if you need some javascript reading like this from a given Perl hash:

    Code:
    <script>
       var hashValues = { a: "foo", b: "bar" };
    </script>
    You need to write a TT statement which does print the %hash this way. Now that's nothing else than JSON, isn't it. Thus you'd use Perl's to_json() function to store a JSONified string version of the hash, then simply print that generated string in your template. And that's basically what the plugin you suggested would do for you.
    That's clear, thank!

    I always have to bang my head against the wall to remember that TT is basically expanding/linearizing instructions into an HTML content and then the JS runs after all that. For example, in what I added in the Groups plugin recently, it took me a while to arrive to this
    Code:
    	<script type="text/javascript">
    		function outputChannelsDeviceChange(input) {
    			var id = input.options[input.selectedIndex].value;
    			var item;
    
    			[% FOREACH device IN devices %]
    				item = document.getElementById("outputChannels.[% device.id %]");
    				if (id == "[% device.id %]") {
    					item.style.display = 'inline';
    				} else {
    					item.style.display = 'none';
    				}	
    			[% END %]
    		}
    		</script>
    I know it's just 10 lines ... of code (and that's embarrasing) but I have to remind me that at the end, I'll have ONE javascript with N times the code inside the [% FOREACH %]. I'm just a simple C programmer who even started a looong time ago writing assembly code for DSP, where you had to count every byte and take care of the processor pipeline to make it work
    LMS 7.7, 7.8 and 7.9 - 5xRadio, 3xBoom, 4xDuet, 1xTouch, 1 SB2. Sonos PLAY:3, PLAY:5, Marantz NR1603, JBL OnBeat, XBoxOne, XBMC, Foobar2000, ShairPortW, JRiver 21, 2xChromecast Audio, Chromecast v1 and v2, , Pi B3, B2, Pi B+, 2xPi A+, Odroid-C1, Odroid-C2, Cubie2, Yamaha WX-010, AppleTV 4, Airport Express, GGMM E5

  7. #7
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,172

    JS/Perl TT noob question

    > I always have to bang my head against the wall to remember that TT is
    > basically expanding/linearizing instructions into an HTML content and
    > then the JS runs after all that. For example, in what I added in the
    > Groups plugin recently, it took me a while to arrive to this


    Yeah, that happened in the beginning to me, too...

    > Code:
    > --------------------
    >
    > <script type="text/javascript">
    > function outputChannelsDeviceChange(input) {
    > var id = input.options[input.selectedIndex].value;
    > var item;
    >
    > [% FOREACH device IN devices %]
    > item = document.getElementById("outputChannels.[% device.id %]");
    > if (id == "[% device.id %]") {
    > item.style.display = 'inline';
    > } else {
    > item.style.display = 'none';
    > }
    > [% END %]
    > }
    > </script>
    >
    > --------------------
    >
    > I know it's just 10 lines ... of code (and that's embarrasing) but I
    > have to remind me that at the end, I'll have ONE javascript with N times
    > the code inside the [% FOREACH %].


    And this, too. But now that you know how to transfer a list from Perl to
    JS you could process that list in JS at runtime? But then this really
    doesn't matter, as JS in browsers has become super fast, and
    transferring an overhead of a few hundred bytes or even kilobytes
    shouldn't hurt anymore... Yeah, I've become lazy. Long gone are the
    times where I tried to press a web page with all its HTML, JS, CSS and
    images below 50kB :-D

    --

    Michael

  8. #8
    Senior Member
    Join Date
    May 2008
    Location
    Canada
    Posts
    4,468
    Quote Originally Posted by mherger View Post
    >
    [color=blue]
    > Code:
    > --------------------
    >
    > <script type="text/javascript">
    > function outputChannelsDeviceChange(input) {
    > var id = input.options[input.selectedIndex].value;
    > var item;
    >
    > [% FOREACH device IN devices %]
    > item = document.getElementById("outputChannels.[% device.id %]");
    > if (id == "[% device.id %]") {
    > item.style.display = 'inline';
    > } else {
    > item.style.display = 'none';
    > }
    > [% END %]
    > }
    > </script>
    >
    > --------------------
    >
    And this, too. But now that you know how to transfer a list from Perl to
    JS you could process that list in JS at runtime? But then this really
    doesn't matter, as JS in browsers has become super fast, and
    transferring an overhead of a few hundred bytes or even kilobytes
    shouldn't hurt anymore... Yeah, I've become lazy. Long gone are the
    times where I tried to press a web page with all its HTML, JS, CSS and
    images below 50kB :-D

    --

    Michael
    I think I'll stay with the lazyness as well ... a bit too much in my plate currently
    LMS 7.7, 7.8 and 7.9 - 5xRadio, 3xBoom, 4xDuet, 1xTouch, 1 SB2. Sonos PLAY:3, PLAY:5, Marantz NR1603, JBL OnBeat, XBoxOne, XBMC, Foobar2000, ShairPortW, JRiver 21, 2xChromecast Audio, Chromecast v1 and v2, , Pi B3, B2, Pi B+, 2xPi A+, Odroid-C1, Odroid-C2, Cubie2, Yamaha WX-010, AppleTV 4, Airport Express, GGMM E5

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •