1 2 Previous Next 23 Replies Latest reply on Jul 29, 2017 5:24 AM by beverly

    Webviewer HTML calculation not working

    laudmusic

      Hello,

       

      Using FileMaker 16 Advanced.

       

      Having a real issue with getting this HTML to render and work properly. It works perfectly if I load it as a html file from a server, but when I copy the html code and add the \" to the quotes, it doesn't work. Am I missing something since it has javascript? I've been able to do this before with just amending the ".

       

      Any help would be wonderful.

       

      Here's a link to the link to load into a web viewer so you know the functionality:

       

      http://createyourfreesite.com/web/michael/player/

       

      Here's the code to paste into you web viewer.

       

      "data:text/html,"

      &

      "<!DOCTYPE html>

      <html>

      <head>

      <meta charset=\"UTF-8\">

      <title>Title of the document</title>

      <link href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\" rel=\"stylesheet\">

      <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css\" />

      <link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/style.css\" />

      <link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/ribbon.css\" />

      <link rel=\"screenshot\" itemprop=\"screenshot\" href=\"https://katspaugh.github.io/wavesurfer.js/example/screenshot.png\" />

      <!--<link rel=\"stylesheet\" href=\"https://wavesurfer-js.org/css/ribbon.css\" />

      <link rel=\"stylesheet\" href=\"https://wavesurfer-js.org/css/style.css\" />-->

      <link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/style.css\" />

      <!-- wavesurfer.js -->

      <script src=\"http://createyourfreesite.com/web/michael/player/js/wavesurfer.min.js\"></script>

      <script src=\"http://createyourfreesite.com/web/michael/player/js/plugin/wavesurfer.regions.min.js\"></script>

      <script src=\"http://createyourfreesite.com/web/michael/player/js/plugin/wavesurfer.timeline.min.js\"></script>

      <!-- App -->

      <!--<script src=\"js/app.js\"></script>-->

      </head>

      <body>

      <div id=\"waveform\"><span id=\"demo-message\">No Music loaded. Clcik on button to load music</span></div>

      <div id=\"waveform-timeline\"></div>

      <div style=\"text-align: center\">

          <button class=\"btn btn-primary\" onclick=\"wavesurfer.playPause()\"> <i class=\"glyphicon glyphicon-play\"></i> Play/Pause </button>

          <button class=\"btn btn-primary\" onclick=\"loadMusic('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 1 </button>

        <button class=\"btn btn-primary\" onclick=\"loadMusic('http://createyourfreesite.com/web/michael/player/music/media.wav')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 2 </button>

        <button class=\"btn btn-primary\" onclick=\"loadMusic('http://createyourfreesite.com/web/michael/player/music/demo.wav')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 3 </button>

        <button class=\"btn btn-primary\" onclick=\"loadMusic('http://192.168.25.254/Audio/NineDays/TheMaddingCrowd/AbsolutelyStoryOfAGirl_17775.mp3')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 4 </button>

      </div>

       

       

      <script language=\"javascript\" type=\"text/javascript\">

        var regionsData = {};

       

        // init wavesurfer

        var wavesurfer = WaveSurfer.create({

         container: '#waveform',

         waveColor: '#337ab7',

         progressColor: '#47cf73',

         autoCenter: false,

         minPxPerSec: 10,

        });

       

        // set initial volume level

        wavesurfer.setVolume(Number(slider.value) / 100);

       

       

       

       

        // event ready

        wavesurfer.on('ready', event => {

        wavesurfer.enableDragSelection({});

       

        var timeline = Object.create(WaveSurfer.Timeline);

       

        timeline.init({

        wavesurfer: wavesurfer,

        container: '#waveform-timeline'

        });

        });

       

       

       

        var updateRegionInStore = addRegionToStore;

       

       

       

        // add new region on timecursor position

        function loadMusic(music_file) {

        // load audio

        document.getElementById('demo-message').style.display = \"none\";

        wavesurfer.load(music_file);

       

       

        }

       

       

        function setTimeForRegion(region) {

        var div = document.createElement('div');

        div.innerHTML = region.element.getAttribute('title');

        var playRegion = region.element.appendChild(div);

       

        div.className = \"icon-region region-time\";

        }

       

        function updateTimeForRegion(region) {

        var time = region.element.getAttribute('title');

        region.element.querySelector('.region-time').innerHTML = time;

        }

       

       

        function handleCollisions() {

        var allKeys = Object.keys(regionsData);

        var collisionsArr = getCheckArr(allKeys);

       

        console.log(allKeys.length)

       

        allKeys.forEach(function(region) {

        regionsData[region].element.classList.remove('collision-region');

        });

       

        collisionsArr.forEach(function(region) {

        regionsData[region].element.classList.add('collision-region');

        });

       

        console.log(getCheckArr(allKeys))

        }

       

        function isCollide(my, other) {

        return !(

        ((my.start + my.end - my.start) < other.start) ||

        (my.start > (other.start + other.end - other.start))

        );

        }

       

        wavesurfer.on('region-update-end', event => {

        updateRegionInStore(event);

       

        console.log('regionsData', regionsData);

        });

       

        wavesurfer.on('region-updated', event => {

        handleCollisions();

        updateTimeForRegion(event);

        });

       

        function getCheckArr(allKeys) {

        var collisions = [];

        console.log(collisions)

        allKeys.forEach(function(key) {

        allKeys.forEach(function(otherKey) {

        if (key !== otherKey) {

        if (isCollide(regionsData[key], regionsData[otherKey])) {

        collisions.push(otherKey); 

        }

        }

        });

        });

       

        return collisions;

        }

       

        wavesurfer.on('region-in', event => {

        // console.log(event);

        });

       

        wavesurfer.on('region-created', event => {

        // console.log(event);

       

        setDeleteForRegion(event);

        setTimeForRegion(event);

        addRegionToStore(event);

        });

       

        wavesurfer.on('region-out', event => {

        // console.log(event);

        });

       

        wavesurfer.on('region-removed', event => {

        console.log(event);

        handleCollisions();

        });

       

       

      </script>

      </body>

      </html>

      "

        • 1. Re: Webviewer HTML calculation not working
          philmcgeehan

          I can't test it at the moment, but I've had issues in the past with the HTML <!--comment lines-->

          Try taking them out and see if that helps.

          • 2. Re: Webviewer HTML calculation not working
            user19752

            Line break in text literal means a space, so your code become one line. It makes comment using // troublous.

            "a

            b"

            means

            "a b"

            so

            "

            //wow

            a=b;

            "

            become

            " //wow a=b;"

            You need ¶ in each end of line, or something like

            List (

            "//wow";

            "a=b;"

            )

            2 of 2 people found this helpful
            • 3. Re: Webviewer HTML calculation not working
              Malcolm

              It's easiest to use block comments like this /* comment here */

               

              Malcolm

              2 of 2 people found this helpful
              • 4. Re: Webviewer HTML calculation not working
                philmcgeehan

                I get the following errors in Chrome's console log when I click the button load buttons:

                Uncaught ReferenceError: loadMusic is not defined

                    at HTMLButtonElement.onclick

                 

                and when I click the play button:

                Uncaught ReferenceError: wavesurfer is not defined

                    at HTMLButtonElement.onclick

                • 5. Re: Webviewer HTML calculation not working
                  skywillmott

                  Haven't tested with your HTML source code, but you might find it easier to use a field to store the HTML source code as then you don't need to worry about escaping quotes etc....

                  For example, if you have a field named 'HTMLSource' that has the code in it, then your Web Viewer would be set to display:

                   

                  "data:text/html," & myTable::HTMLSource

                   

                  See attached example.... and you don't need to have the HTMLSource field visible on the layout.

                  • 6. Re: Webviewer HTML calculation not working
                    beverly

                    Yes! A text Field stored as global, should this need to be called many places.

                     

                    Or this new in FileMaker Pro 16:

                    Insert Text

                    Setting to a variable via script.

                    Beverly

                     

                    Sent from miPhone

                    • 7. Re: Webviewer HTML calculation not working
                      skywillmott

                      I also sometimes like to use plain text objects placed 'off-screen' to the right of the layout and then use GetLayoutObjectAttribute to get the text object's 'content' and use that in the Web Viewer - saves on creating extra fields :-)

                       

                      Example screenshot follows...

                       

                      The nice thing about using fields or text objects to store the HTML source is that you can use your favourite code editor that does nice things like syntax colouring etc e.g. TextWrangler or BBEdit on Mac and then just copy and paste into the field or text object...

                       

                      Screen Shot 2017-07-26 at 11.57.06.png

                      • 8. Re: Webviewer HTML calculation not working
                        roryduffy

                        Hi,
                        I'm having a similar issue. I'm trying to implement a web viewer.

                         

                        I've selected "Custom Web Address"

                         

                        For the Web Address, I've just specified a standard text field.

                         

                        ${0051_5152_0052_5253_0053_5331_0031_3181_0081_8112_0012}::B0103 Details 07 Contact 07 Web 1

                         

                        √ Allow interaction with web viewer content

                        √ Display content in Find mode

                        √ Display progress bar

                        √ Display status messages

                        √ Automatically encode URL

                         

                        But no matter which record I scroll to, all I'm getting is a white box; the website doesn't load.

                         

                        I've tried on Filemaker Pro v14 and v15. This has never been an issue before.

                         

                        Thanks,

                        Rory

                        • 9. Re: Webviewer HTML calculation not working
                          skywillmott

                          Something doesn't look right there.... Your field called 'B0103 Details 07 Contact 07 Web 1' is in a table called '${0051_5152_0052_5253_0053_5331_0031_3181_0081_8112_0012}' ???

                           

                          Your table name has characters which are not a good idea to use in table names as they will make calculations behave weird, i.e. the ${ and } characters...

                           

                          Also, what is the actual content of the field? If it is just a simple web address such as 'http://www.filemaker.com' then that should work ok.... Or if you are trying to load local html code such as in the examples above, the calculation used to display the code begins with "data:text/html," before the actual HTML code.....

                          • 10. Re: Webviewer HTML calculation not working
                            roryduffy

                            Hi,

                             

                            Thanks for your reply.

                             

                            Yes, my field called 'B0103 Details 07 Contact 07 Web 1' is in a table called '${0051_5152_0052_5253_0053_5331_0031_3181_0081_8112_0012}'

                             

                            The content of the field is text, and it's a simple web address.

                             

                            However, I managed to solve this issue! :-) I simply put http:// at the beginning of that field in each record, and it seems to be working now. Previously, it just had www. So your suggestion of 'http://www.filemaker.com' helped - thanks!

                            Cheers

                            Rory

                            • 11. Re: Webviewer HTML calculation not working
                              skywillmott

                              Ah yes, I since realised that the $ { } characters have been added to your table name because it begins with a digit, i.e. the number '0'... FileMaker does this in calculations when 'illegal' characters are used in the table name, and having a table name begin with a numeric digit is one of those cases....

                               

                              Glad you got it working :-)

                              • 12. Re: Webviewer HTML calculation not working
                                beverly

                                Also a good method. I prefer the

                                Insert Text

                                as this shows in a print of the script, where the object-on-layout may be harder to find/debug. But still a cool tip!

                                Beverly

                                • 13. Re: Webviewer HTML calculation not working
                                  Magnus Fransson

                                  Hi laudmusic,

                                   

                                  Excuse me for borrowing your thread.

                                   

                                  skywillmott and beverly.

                                   

                                  Wouldn’t it be nice if there were a dedicated area to store fixed set pieces of “code snippets” and settings?

                                   

                                  They should be stored as “named value pairs” and be accessible “context independently” (like fields with global storage and double $ ($$) variables) and through your entire solution, with a function like: GetConstant (ExternalDataSource ; Name). FMPA would have a tool to edit them (add new, delete and change and more). Only a “Full access” account could edit them, but anyone could use them.

                                   

                                  If I get positive feedback I might post a suggestion/request.

                                   

                                  With best regards Magnus Fransson.

                                  • 14. Re: Webviewer HTML calculation not working
                                    beverly

                                    I believe the

                                    Insert Text

                                    does that for a $variable/$variable.

                                    But you are correct that we need "something" that can access these kinds of things from a 'repository' for usage in many places!

                                     

                                    Post an idea anyway and elicit feedback (to flesh it out) before voting.

                                    Beverly

                                    1 2 Previous Next