omz:forum

    • Register
    • Login
    • Search
    • Recent
    • Popular

    Welcome!

    This is the community forum for my apps Pythonista and Editorial.

    For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.


    Difference between "Show HTML" and "Webview" in Custom UI

    Editorial
    5
    10
    6280
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • manuguerra
      manuguerra last edited by

      Hello,
      I am writing a workflow which creates a Deck html5 presentation out of a markdown file.
      In my workflow, I generate the html with absolute links to the required css and js files and put it in a variable.
      If I look at the code created using "Show HTML", everything works as expected, the css and js files are loaded and the deck presentation is shown.
      If I do the same in a WebView from a Custom UI, it doesn't work, in the sense that the html visualised is plain html, without css or js files loaded.

      What's the difference between "Show HTML" and "Webview"? Any way to make my code working in a webview?

      Thanks
      Maurizio

      1 Reply Last reply Reply Quote 0
      • filippocld223
        filippocld223 last edited by

        The "Show HTML" action displays the HTML locally and so it works without an Internet connection
        The WebView displays webpages/html files located on the Web and so you must hava an Internet connection

        1 Reply Last reply Reply Quote 0
        • omz
          omz last edited by

          A WebView can also show local HTML, without an internet connection (the Preview panel is essentially a WebView). Could you show how exactly you're trying to load your HTML and what it looks like?

          1 Reply Last reply Reply Quote 0
          • manuguerra
            manuguerra last edited by

            The HTML, stored in the variable html5, is:

            <!DOCTYPE html>
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>
            test
            </title>
            <meta name="description" content="A jQuery library for modern HTML presentations">
            <meta name="author" content="Caleb Troughton">
            <meta name="viewport" content="width=1024, user-scalable=no">
            <!-- Core and extension CSS files -->
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.core.css">
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.status.css">
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.scale.css">
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.menu.css">
            	
            <!-- Style theme. More available in /themes/style/ or create your own. -->
            <!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/web-2.0.css"-->
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/swiss.css">
            	
            <!-- Transition theme. More available in /themes/transition/ or create your own. -->
            <!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/horizontal-slide.css"-->
            <!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/fade.css"-->
            
            <link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/md_hl.css">
            	
            <script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/modernizr.custom.js"></script>
            <script type="text/x-mathjax-config">
                MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']], processEscapes: true}});</script>
            <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
            
            </head>
            
            <body class="deck-container">
            
            <!-- Begin slides -->
            <section class="slide left"><div class="content"><h3>first slide</h3>
            
            <p>In this slide we use mathjax.
            $$\alpha$$</p>
            
            </div></section><section class="slide left"><div class="content"><h3>second slide</h3>
            
            <p>This is the second slide text.</p>
            
            </div></section>
            <!-- end slides -->
            <!-- deck.status snippet -->
            <p class="deck-status">
            	<span class="deck-status-current"></span>
            	/
            	<span class="deck-status-total"></span>
            </p>
            
            <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/jquery-1.7.2.min.js"><\/script>')</script>
            
            <!-- Deck Core and extensions -->
            <script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.core.js"></script>
            <script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.status.js"></script>
            <script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.scale.js"></script>
            <script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.menu.js"></script>
            
            <!-- Initialize the deck -->
            <script>
            $(function() {
            	$.deck('.slide');
            });
            </script>
            
            </body>
            </html>
            

            Putting the variable html5 in Show HTML the result is a nice deck presentation.
            In a custom UI, I have a webview named webview1. Using a "Set UI control value" tool, with View Name: webview1 and value html5, I get a different, "plain", html page. The css and js files are not loaded, I guess. BTW, the "Set UI control value" gets the right value of the variable html5 (I checked with a console output).

            Can you find my mistake?

            Maurizio

            1 Reply Last reply Reply Quote 0
            • omz
              omz last edited by

              You should probably prefix your stylesheet and script URLs with file://..., e.g. file:///private/var/[...]/deck.core.css.

              1 Reply Last reply Reply Quote 0
              • manuguerra
                manuguerra last edited by

                It works!
                Thank you so much for your support.

                Editorial 2.0, ehm, 1.1 is fantastic! So many possibilities!

                1 Reply Last reply Reply Quote 0
                • manuguerra
                  manuguerra last edited by

                  By the way, I am using absolute paths because relative paths do not work for me.
                  Is this right or am I doing something silly? Is there a particular syntax to make them working?
                  I have tried to chdir to the current directory, but they do not work anyway.

                  1 Reply Last reply Reply Quote 0
                  • MartinPacker
                    MartinPacker last edited by

                    For images I'm using ../resource/fred.png and it's working fine. I wonder why CSS wouldn't work the same way (if it doesn't).

                    1 Reply Last reply Reply Quote 0
                    • manuguerra
                      manuguerra last edited by

                      Relative paths to images work for me in the built-in preview, but not in a webview.
                      I have also tried to os.chdir to the directory where the md file is.
                      What should I do to make them working?

                      1 Reply Last reply Reply Quote 0
                      • walshmagger
                        walshmagger last edited by

                        When compared to HTML4, HTML5 aims to be more of an application development platform, which includes not only laying out text and images, but also playing video and audio, interactive 2d and 3d graphics, storing data in the application, dealing with online and offline access to data, and real-time networking protocols for exchanging data as it happens. Both of these are used to in web programming today, although thinking about the future, using HTML5 is suggested.

                        Walsh

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post
                        Powered by NodeBB Forums | Contributors