Home of the Squeezebox™ & Transporter® network music players.
Page 1 of 3 123 LastLast
Results 1 to 10 of 28
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    147

    Code Explanation Needed: Disable Submit Buttons on WebUI. How to?

    I try to do a scan that shall be triggered by a button on the webui.
    During the run the button shall be greyed out.
    The function should be the same as when scanning the music library.
    Therefore, I thought of using the respective code.
    But I do not get that to work.

    Can anybody explain me the JS part and how it checks for the running scan in the following file?
    https://github.com/Logitech/slimserv...ver/basic.html

    Thanks a lot in advance.

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

    Code Explanation Needed: Disable Submit Buttons onWebUI. How to?

    > I try to do a scan that shall be triggered by a button on the webui.
    > During the run the button shall be greyed out.
    > The function should be the same as when scanning the music library.


    And yet that scan would not be part of a regular LMS scan? I'd be
    interested to know what that is :-)

    > Can anybody explain me the JS part and how it checks for the running
    > scan in the following file?
    > https://github.com/Logitech/slimserv...ver/basic.html


    There's a JavaScript snippet at the top which would query the "rescan ?"
    status every 2000ms (the Ext.util.TaskRunner). If LMS was scanning, then
    all DOM objects with the class "disableOnScan" would be disabled.

    Check the ExtJS documentation for a better understanding about how this
    works:

    http://docs.sencha.com/extjs/3.4.0/#...til.TaskRunner

    --

    Michael

  3. #3
    Senior Member
    Join Date
    Jan 2011
    Posts
    147
    And yet that scan would not be part of a regular LMS scan? I'd be
    interested to know what that is :-)


    I am trying to discover my Philips Hue Bridge for registering it in a plugin that shall steer my lights by starting a "SqueezePlayer" that does not forward to a loudspeaker device but to lamps. Hope I get that done...


    There's a JavaScript snippet at the top which would query the "rescan ?"
    status every 2000ms (the Ext.util.TaskRunner). If LMS was scanning, then
    all DOM objects with the class "disableOnScan" would be disabled.


    I struggled a little bit on how to connect the JS to the scanner.
    As I understand the "rescan" and "_rescan" is kind of a trigger for disabling the buttons.
    Where are these referenced in the rest of the code or in the Settings.pm?
    It seems that JS is waiting for theses arguments/params or wants to set them.
    But where do they come from is not clear to me?

  4. #4
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    19,475

    Code Explanation Needed: Disable Submit Buttons onWebUI. How to?

    > I am trying to discover my Philips Hue Bridge for registering it in a
    > plugin that shall steer my lights by starting a "SqueezePlayer" that
    > does not forward to a loudspeaker device but to lamps. Hope I get that
    > done...


    Ok, nothing to do with music scanning.

    > There's a JavaScript snippet at the top which would query the "rescan ?"
    > status every 2000ms (the Ext.util.TaskRunner). If LMS was scanning, then
    > all DOM objects with the class "disableOnScan" would be disabled.
    >
    > I struggled a little bit on how to connect the JS to the scanner.
    > As I understand the "rescan" and "_rescan" is kind of a trigger for
    > disabling the buttons.
    > Where are these referenced in the rest of the code or in the
    > Settings.pm?


    They are not set or used in Settings.pm. "rescan" is just one of many
    commands supported by LMS (see the CLI documentation -
    http://htmlpreview.github.io/?https:...s/cli-api.html).
    It would tell the page whether a scan was going on or not. The page
    handler is not involved in this at all.

    If you wanted to follow a similar approach you might want to set up a
    CLI command specific to your plugin, or a separate web page handler
    returning some state information based on which you'd then
    enable/disable the button.

    --
    --

    Michael

  5. #5
    Senior Member
    Join Date
    Jan 2011
    Posts
    147
    Quote Originally Posted by mherger View Post
    They are not set or used in Settings.pm. "rescan" is just one of many
    commands supported by LMS (see the CLI documentation -
    http://htmlpreview.github.io/?https:...s/cli-api.html).
    It would tell the page whether a scan was going on or not. The page
    handler is not involved in this at all.
    Okay, I did not know that.

    Quote Originally Posted by mherger View Post
    If you wanted to follow a similar approach you might want to set up a
    CLI command specific to your plugin, or a separate web page handler
    returning some state information based on which you'd then
    enable/disable the button.
    Setting up a CLI command for my plugin seems to be overloaded...
    The web page handler seems reasonable...

    I already got the buttons disabled by the handler: When a discover is running, the buttons are greyed out.
    Only issue: When I trigger it, the button-status does not change from useable to unusable as it does in the LMS Scan View.
    I thought of an automatic reload via JS but that reload all frames and not just the Plugin section.
    Do you have any idea how I could solve that?

    Another question that rose while getting further with the connection of the system I discovered: There needs to be a little bit of a user interaction:
    -> Click a WebPage Button -> read message -> click button on the device.

    I thought of "Click WebPage Button" -> "Read Popup Message & Click a response there & Close Button" -> "Get Back to the Plugin Page" (similar to the info that the server needs to be restarted).

    Now I fear that there is no mechanism in LMS that I could use... In plan JS I think that would be something I could get working, but in LMS that is really weired...

    Do you have further hints for me to implement that easily?

  6. #6
    Senior Member
    Join Date
    Jan 2011
    Posts
    147
    I am stuck now...

    I can contact the devices, but I am not able to get paring correct due to the missing reload of the page...

    I tried a lot with the handler routine in the Settings.pm but I am not capable of get it managed to disable the buttons...

    What I got: When there is a discover running and I load the page in the web ui, the buttons are greyed out when there is a process running. When this is stopped, the buttons a accessible again. Only issue: They are not set to the un-accessable state automatically...

    I am a little bit frustrated due to be confused by all the different things (JS, Ajax, perl, etc.) used in these parts of code. I am no programming expert but also not un-experienced.

    Could you please be so kind and help me out on how to solve my issues?
    When I have one example on how to get that, I can adapt that...

    The code is here:
    https://github.com/chincheta0815/HueLightning

    In Settings.pm I got the "Plugins::HueLightning::Hue->discover();"-statement which does the discovery. It sets a variable to "1" if there is a discovery running. This variable is checked beforeRender. The button triggering that function shoudl be unaccessible until the discovery stopped. I even thought of waiting a time period until it is re-enable without waiting for a function respond...
    If the button it pushed many times, the discover process might be disturbed...

    The other function starts the pairing. Here a webpage/popup should appear with info on what to do. After clicking a button, a function shall be called for pairing and the success should be shown (+the popup shall disappear).

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

    Code Explanation Needed: Disable Submit Buttons onWebUI. How to?

    > Setting up a CLI command for my plugin seems to be overloaded...
    > The web page handler seems reasonable...
    >
    > I already got the buttons disabled by the handler: When a discover is
    > running, the buttons are greyed out.
    > Only issue: When I trigger it, the button-status does not change from
    > useable to unusable as it does in the LMS Scan View.
    > I thought of an automatic reload via JS but that reload all frames and
    > not just the Plugin section.


    How do you trigger the reload?

    As I suggested earlier I'd write another page handler or modify the
    existing one to check the discovery status. Call this from a JS snippet
    (very much like the one I'm using in the basic settings) and
    enalbe/disable the button using it's DOM properties (again: like I do in
    that other page).

    > Another question that rose while getting further with the connection of
    > the system I discovered: There needs to be a little bit of a user
    > interaction:
    > -> Click a WebPage Button -> read message -> click button on the
    > device.
    >
    > I thought of "Click WebPage Button" -> "Read Popup Message & Click a
    > response there & Close Button" -> "Get Back to the Plugin Page" (similar
    > to the info that the server needs to be restarted).


    You can register as many plugin specific web page handlers as you'd
    like. See eg.
    https://github.com/Logitech/slimserv...Plugin.pm#L311.

    > Now I fear that there is no mechanism in LMS that I could use... In plan
    > JS I think that would be something I could get working, but in LMS that
    > is really weired...


    TBH: I don't understand what you're trying to do. Are you saying you'd
    know how to do it in JS? Then please describe it that way. I might
    understand the JS :-).

    --

    Michael

  8. #8
    Senior Member
    Join Date
    Jan 2011
    Posts
    147
    I now got a command added to the CLI adding the following into Plugin.pm:

    sub initPlugin {
    ...
    Slim::Control::Request::addDispatch(['huelightning', 'discoverbridges', '?'],
    [0, 1, 0, \&getHueDiscoverStatus]);
    ...
    }

    sub getHueDiscoverStatus {
    my $request = shift;

    # $request gets a return of 0 or 1.
    $request->addResult( Plugins::HueLightning::Hue->discoverStatus() );
    $request->setStatusDone();
    }



    This adds the command "huelightning discoverbridges ?" to the cli.
    Strange thing: It answer as following:
    "huelightning discoverbridges 0%3A" or "huelightning discoverbridges 1%3A"

    Question: Why is there a "%3A"?

    Now in the basic.html for the Settings Page I added:
    [% extJsScripts = BLOCK %]
    <script TYPE="text/javascript">
    new Ext.util.TaskRunner().start({
    run: function(items) {
    SqueezeJS.Controller.request({
    params: [ '', [ "huelightning", "discoverbridges", "?" ] ],

    success: function(response) {
    response = Ext.util.JSON.decode(response.responseText);
    if (response && response.result) {
    items.each(function(item) {
    item.dom.disabled = response.result['_huelightning'] ? true : false;
    });
    }
    }
    })
    },
    args: [ Ext.select('.disableOnDiscover') ],
    interval: 2000
    });
    </script>
    [% END %]

    Nothing happens.
    How do I get this JS snippet to work with my CLI output?
    As far as I understand there is not problem with "params: [ '', [ "huelightning", "discoverbridges", "?" ] ]," the CLI should be called.
    I do not get a correct response. The log says:
    "Slim::Web::JSONRPC::requestMethod (443) request not dispatchable!"

    Is it a problem with the "%3A" issue or os the response line in the snippet erroneous?

  9. #9
    Senior Member
    Join Date
    Jan 2011
    Posts
    147
    By the way: "Happy new year!"

    ... and sorry for the poor layout. I couldn't get that edited properly.

    Some comments:

    I basically use the basic.html as you did as I think it fits best.
    1. Added a command to the CLI that shows a slightly stupid output (the %3A thing), that might influence the JS snippet. I do not know where that %3A comes from. All I did is written in my previous post.

    2. Call the command in the JS snippet (well I hope so) doing a "params: [ '', [ "huelightning", "discoverbridges", "?" ] ],"

    3. Try to catch the response. Here I think I did something wrong "item.dom.disabled = response.result['_huelightning'] ? true : false;" as I do not yet know how the response catching works...

    4. In the basic.html I did add a ".disableOnDiscover" into the class tag of the submit button (as you did for the rescan).

    The trick with beforeRender already works.
    Last edited by chincheta0815; 2017-01-01 at 08:13.

  10. #10
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    19,475

    Code Explanation Needed: Disable Submit Buttons onWebUI. How to?

    > $request->addResult(
    > Plugins::HueLightning::Hue->discoverStatus() );


    make this "Plugins::HueLightning::Hue->discoverStatus() ? 1 : 0" to
    explicitly return 0 or 1.

    > This adds the command "huelightning discoverbridges ?" to the cli.
    > Strange thing: It answer as following:
    > "huelightning discoverbridges 0%3A" or "huelightning discoverbridges
    > 1%3A"
    >
    > Question: Why is there a "%3A"?


    addResult is expecting two parameters: key and value. The %3A is the
    colon. '1' is used as the key, and there's no value returned, as you
    only addResult(1).

    Try:

    $request->addResult('_huelightning', Plugins::...);


    --

    Michael

Posting Permissions

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