9
$\begingroup$

I want to add interactivity to my web pages via the cloud, but don't want to use the buggy, expensive cloud-notebook-only paradigm. I'd much prefer to use static HTML and JS.

Can I load a cloud notebook into an otherwise static page?

Can I do for free because I am cheap?

$\endgroup$
9
$\begingroup$

Fun Example

I've made use of that here.

I stuck the notebook in an accordion with an opener-thumb so I could generally display the page with it closed:

accoridion-closed

But people reading the tutorial can click on the thumb to open a notebook in which to run the code:

accordion-open


Explanation

Yes! And it's easy!

The trick is to use the notebook that gets loaded here:

"https://sandbox.open.wolframcloud.com/app/view/newNotebook"

And once we have that it's incredibly simple to just make an iframe that wraps this. Add this to a notebook (with appropriate tweaks for positioning and sizing) and you'll have a little pane where your users can run your code.

<div style="width: 100% px; height: 400px; position: relative; overflow: hidden;">
    <iframe 
        src="https://sandbox.open.wolframcloud.com/app/view/newNotebook"
        style="position: absolute; left:-2px; top: -85px;"
        width="100%" height="485px "
        >
    </iframe>
</div>

I set up an example page that does this:

markdown=
Uncompress@
"1:eJxlU1FvmzAQ7sP+wP7BlWrSWiVAWLtVJKk0TZq0SZu2Zm8sDwaO2CvYCF8CWdX/vjOMsGpIBn/H+e777s7nqbnfvHxxdrYiRSXewRdBEitBKhPwUeV5ibAKhn8/w0W0KpV+gAbLtWfpWKKViOSBbLBYe5KotnEQtG3rt6YsGlFlpdnnfmaqoEEbuND8yawNWqkI/Uppn5E3xO4j3gG7a0JN8AiVaHZKxxDd1B08MZPBxXm7dXFxsRFVzRyFti020CqSoLRFgg8uM3w1hKkxD0AGCC2B0ePhK5LKng4KC7URmcQcisZUkEhscPt6lFRNZfEtiewBu0wKvcNemwgWb6MoXARvbqPw5vJqTAH964dEUDkKMAX0OXOT7SsnkPfMy+7rujwyE8BuVJM7qLgMjchIHRBqodGHTyygZhtLAasqVYqGT3KM5PNm6NZE+ZcteouvkYLLiQ4/AtZwsxxRymgRnmDG8N0J3eNOGf2tNJSMJp6RLnmf2qSDOYjtDNz+yPt0u4XVGrLZKRE8djOYR+EMovDpX/NxMm/Hap0nU7JtsjjZARjEMOpSQwN8Ve32TV9++f13W/i13g3e03uVqwP0I7P2WpWTjFlo+ArqbgkS1U5SDNdh6GBtrCJOHrvhFq7kSzAHbIrStJybK4l66Y2Tt1gpN90II3bLNtl0Byz3MDWdz+3S/18GUdfBQWEbaGzHEfWexRpIT6xEak25J2ZVYkHxPHKkydQxzG/5ciyfne61rj2n1fsrdO1dOz945jfJCQY9wz0MuGx3fwBkPkwq";

CloudExport[
 ExportString[
  MarkdownToXML@markdown /.
   XMLElement["body", b_, {a___, c_}] :>
    XMLElement["body", b,
     {
      XMLElement["div", {"class" -> "content"}, {a}],
      c
      }],
  "HTMLFragment"
  ],
 "HTML",
 "fiddle-test.html",
 Permissions -> "Public"
 ]

CloudObject["https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test.html"]

Simply go to that URL: https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test.html and you'll see there's a cloud notebook at the bottom you can put the code above into. And it runs! And it's free! How nice.

One thing to note is that the top-bar on a cloud notebook is ~85 px. So my set up chops it off by default.

To get a not-chopped version do this:

<div style="width: 100% px; height: 400px; position: relative; overflow: hidden;">
    <iframe 
        src="https://sandbox.open.wolframcloud.com/app/view/newNotebook"
        style="position: absolute; left:-2px; top: 0px;"
        width="100%" height="100%"
        >
    </iframe>
</div>

Or if you just want to see this in I deployed a version of this:

markdown2=
Uncompress@
"1:eJxlU1FvlEAQ7oPv/oUpjYltrsChp4Y7mhgTE0002vqG97DAcLsWdgk7d3A2/e/Oghw2kizsN8zOfN/M7Hlmbu+ePzs725CiCm/giyCJtSCVC/ioiqJC2ATjv5/hMtpUSt9Di1XiWTpWaCUieSBbLBNPEjU2DoKu6/zOVGUr6rwy+8LPTR20aAMXmj+5tUEnFaFfK+0z8sbYQ8QbYHdNqAkeoBbtTukYolXTwyMzGV2ct1sXFxd3om6Yo9C2wxY6RRKUtkjwwWWGr4YwM+YeyAChJTB6OnxFUtnTQWGhMSKXWEDZmhpSiS1uX06S6rksviWR32OfS6F3OGgTwfJNFIXL4NW7KFxdXk0pYHj9kAiqQAGmhCFnYfJ97QTynnnZfdNUR2YC2E9qCgcVl6EVOakDQiM0+vCJBTRsYylgVa0q0fJJjpF+vhu7NVP+ZcvB4muk4HKmw4+ABFbrCWWMluEJ5gzfntAt7pTR3ypD6WTiGenT95lNe7gGsV2A2x95n223sEkgX5wSwUO/gOsoXEAUPv5rPs7m7VSt83ROtk2XJzsAgxgmXWpsgK/q3b4dyi+//+5Kv9G70Xt+bwp1gGFkEq9TBcmYhYYvoOnXIFHtJMXwOgwdbIxVxMljN9zClXwN5oBtWZmOc3MlUa+9afKWG+WmG2HCbtk2n++A5R5mpve5Xfr/yyCaJjgo7AKN3TSi3pNYI+mZlcisqfbErCosKb6OHGkyTQyO/pOzg9LEc0q9vzITb5AJT/xmMcGoZryFARft5g/M5Eux";

CloudExport[
 ExportString[
  MarkdownToXML@markdown2 /.
   XMLElement["body", b_, {a___, c_}] :>
    XMLElement["body", b,
     {
      XMLElement["div", {"class" -> "content"}, {a}],
      c
      }],
  "HTMLFragment"
  ],
 "HTML",
 "fiddle-test2.html",
 Permissions -> "Public"
 ]

CloudObject["https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test2.html"]

So if you go here: https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test2.html you'll see the same as above, except with the top-bar on the notebook.

$\endgroup$
  • $\begingroup$ Like your posts! $\endgroup$ – Lou Jan 7 '18 at 21:12
  • $\begingroup$ I'm planning to create an enhanced form page located in WPC, probably with vue.js as it was on my tolearn list. I'm not yet sure I will use your site builder as it may not be needed but the question is, do you see any obstacles (for vuejs and in general)? $\endgroup$ – Kuba Jan 30 '18 at 6:55
  • $\begingroup$ @Kuba as long as all interactivity happens in the browser you'll be fine. One issue is that the WC can be slow to serve big resources some times. On the other hand, I've never had anything that was really unacceptably slow. The other thing to watch out for (but which I'm almost certain you already know) is to make sure you set your resource Permissions correct. There are a few tricks, like using CopyFile[file, CloudObject[ ..., Permissions -> ...]], non-expiring HTTPRedirects, etc. which can help, but in general not too many hidden corners I've hit. $\endgroup$ – b3m2a1 Jan 30 '18 at 7:01
  • $\begingroup$ @b3m2a1 ok, thanks :) will let you know if I learn anything useful. FormFunctions deployment with more control on conversion would be a nice feature for site builder, which I'm sure you can handle faster than me but maybe you don't have time :p and I have something to do anyway :) $\endgroup$ – Kuba Jan 30 '18 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.