Adding html5 standalone as a Wordpress Plugin

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Adding html5 standalone as a Wordpress Plugin

Post by Zood » Wed Mar 28, 2018 9:37 pm

Hey all!

Just trying out the HTML5 option to create a standalone.
My goal: Create a "Form" as a way of handling a new reservation, then send that form to a file in Dropbox.
I handled the whole form-making, dropbox-uploading etc.
I created the standalone, got four files (.mem / .html / .zip / .js but am a bit confused from this part on
How do I get my stack to show up on a specific part of my client's website?

Any help is greatly appreciated
Thanks in advance!

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Wed Apr 04, 2018 8:16 pm

HI
create a folder like imhere on the website. and copy all generated files in there.
then go to https://yourwebsite.com/imhere/thegeneratedname.html

then it will load the stack.
If you want it to load when you just go to the url https://yourwebsite.com/imhere then change thegeneratedname.html into index.html

Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by Zood » Thu Apr 05, 2018 12:34 pm

Hey Sphere,
Thanks for the answer!
Will try today if I can make it happen.

Is it also possible to link the .js file to display the stack on a certain part of another website?
Like add "<script src="https://yourwebsite.com/imhere/thegeneratedname.js"> </script>" into a codeblock?

Thanks in advance!
Zood

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Thu Apr 05, 2018 8:00 pm

Perhaps, i don't know exactly.
But i know that for Joomla and i guess probably for Wordpress also there are (free) modules in which you can run such things. So you could place that module anywhere.

But you'll have to try.

Good luck!

Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by Zood » Fri Apr 13, 2018 4:58 pm

Alright, try nr 2!
I have a friend with a website and uploaded 4 files:
the 3 files generated by the builder (.js / .mem / .zip)
and a fourth with

Code: Select all

<html>
<body>
   <canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
    <script type="text/javascript">
      var Module = { canvas: document.getElementById('canvas')  };
    </script>
   <script async type="text/javascript" src="standalone-community-9.0.0-dp-11.js"></script>
 </body>
</html>
as a code, naming it "Livecode"
I am using the community edition 9.00 dp 11 so that matches with the generated name of the .js file.
I uploaded all four files into the Public_Html-section under a new folder named "Calendar"
I then try to acces the fourth file using the following link:
http://myfriendsSite.com/Calendar/livecode

This is option 1 of what I might get:
Test.png
The other is the page which all visitors get redirected to when trying to visit a site that does not exist (the "This page does not exist" - page)

The stack I created for testing is just a simple red circle which becomes another color once pressed

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Sat Apr 14, 2018 10:38 am

what is the filename of the html file where you putted that script in?
If it is not index.html then it will not be executed from itself, so after your link you need to type whateverthenamis.html behind your link, or change the name of your html file to index.html

I used this for test, a partly stripped down of the original, you have to change the name of your .js file in this script yourself

Code: Select all

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>This is a great web-app!</title>
    <style>
      body {
        font-family: arial;
        margin: 0;
        padding: none;
      }

      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      div.emscripten { text-align: center; }      
      div.emscripten_border { border: 1px solid black; }
      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten { border: 0px none; }

      #emscripten_logo {
        display: inline-block;
        margin: 0;
      }

      .spinner {
        height: 30px;
        width: 30px;
        margin: 0;
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block;
        vertical-align: top;

        -webkit-animation: rotation .8s linear infinite;
        -moz-animation: rotation .8s linear infinite;
        -o-animation: rotation .8s linear infinite;
        animation: rotation 0.8s linear infinite;

        border-left: 5px solid rgb(235, 235, 235);
        border-right: 5px solid rgb(235, 235, 235);
        border-bottom: 5px solid rgb(235, 235, 235);
        border-top: 5px solid rgb(120, 120, 120);
        
        border-radius: 100%;
        background-color: rgb(189, 215, 46);
      }

      @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
      }
      @-moz-keyframes rotation {
        from {-moz-transform: rotate(0deg);}
        to {-moz-transform: rotate(360deg);}
      }
      @-o-keyframes rotation {
        from {-o-transform: rotate(0deg);}
        to {-o-transform: rotate(360deg);}
      }
      @keyframes rotation {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
      }

      #status {
        display: inline-block;
        vertical-align: top;
        margin-top: 30px;
        margin-left: 20px;
        font-weight: bold;
        color: rgb(120, 120, 120);
      }

      #progress {
        height: 20px;
        width: 30px;
      }

      #controls {
        display: inline-block;
        float: right;
        vertical-align: top;
        margin-top: 30px;
        margin-right: 20px;
      }

      #output {
        width: 100%;
        height: 200px;
        margin: 0 auto;
        margin-top: 10px;
        display: block;
        background-color: black;
        color: white;
        font-family: 'Lucida Console', Monaco, monospace;
        outline: none;
      }
    </style>
  </head>
  <body>
    

    <div class="spinner" id='spinner'></div>
    <div class="emscripten" id="status">Downloading...</div>

    <div class="emscripten">
      <progress value="0" max="100" id="progress" hidden=1></progress>
    </div>

    
    <div class="emscripten_border">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
    </div>
    <textarea id="output" rows="8"></textarea>

    <script type='text/javascript'>
      var statusElement = document.getElementById('status');
      var progressElement = document.getElementById('progress');
      var spinnerElement = document.getElementById('spinner');

      var Module = {
        preRun: [],
        postRun: [],
        print: (function() {
          var element = document.getElementById('output');
          if (element) element.value = ''; // clear browser cache
          return function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            // These replacements are necessary if you render to raw HTML
            //text = text.replace(/&/g, "&amp;");
            //text = text.replace(/</g, "&lt;");
            //text = text.replace(/>/g, "&gt;");
            //text = text.replace('\n', '<br>', 'g');
            console.log(text);
            if (element) {
              element.value += text + "\n";
              element.scrollTop = element.scrollHeight; // focus on bottom
            }
          };
        })(),
        printErr: function(text) {
          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
          if (0) { // XXX disabled for safety typeof dump == 'function') {
            dump(text + '\n'); // fast, straight to the real console
          } else {
            console.error(text);
          }
        },
        canvas: (function() {
          var canvas = document.getElementById('canvas');

          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

          return canvas;
        })(),
        setStatus: function(text) {
          if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
          if (text === Module.setStatus.text) return;
          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
          if (m) {
            text = m[1];
            progressElement.value = parseInt(m[2])*100;
            progressElement.max = parseInt(m[4])*100;
            progressElement.hidden = false;
            spinnerElement.hidden = false;
          } else {
            progressElement.value = null;
            progressElement.max = null;
            progressElement.hidden = true;
            if (!text) spinnerElement.style.display = 'none';
          }
          statusElement.innerHTML = text;
        },
        totalDependencies: 0,
        monitorRunDependencies: function(left) {
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };
      Module.setStatus('Downloading...');
      window.onerror = function(event) {
        // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
        Module.setStatus('Exception thrown, see JavaScript console');
        spinnerElement.style.display = 'none';
        Module.setStatus = function(text) {
          if (text) Module.printErr('[post-exception status] ' + text);
        };
      };
    </script>
    <script>

          (function() {
            var memoryInitializer = 'standalone-community-9.0.0-dp-9.html.mem';
            if (typeof Module['locateFile'] === 'function') {
              memoryInitializer = Module['locateFile'](memoryInitializer);
            } else if (Module['memoryInitializerPrefixURL']) {
              memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
            }
            var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
            xhr.open('GET', memoryInitializer, true);
            xhr.responseType = 'arraybuffer';
            xhr.send(null);
          })();

          var script = document.createElement('script');
          script.src = "PUT YOUR HTML5 LIVECODE FILENAME HERE.js";
          document.body.appendChild(script);

</script>
  </body>
</html>
name it index.html and put it in your test folder on your webserver and try it out

Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by Zood » Mon Apr 23, 2018 2:41 pm

Hey Sphere,

Great code! thanks, helps a lot!
There is just 1 error: In the name at the bottom where you enter the name of the .js, a ' is needed in place of the double quotation mark (").

I changed the name of .js to my own (Standalone.community etc), the page loads with the title you set ("This is a great web-app!") but just keeps on loading.

The javascript console gives this error:
"Loading of the script with source "Standalone-community-9.0.0-dp-11.js" has failed Index.html:1"

It also gives the error: "Connection was lost" yet I am on a stable connection? Or is this a server-thing where the refresh rate is faster than the download time, resulting in a connection loss?
Any ideas on a workaround?
Thanks in advance!

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Mon Apr 23, 2018 5:55 pm

Well i just checked in the file i use and in the original file there is a double qoute around the blablabla.js file.
And it's working OK.
I just copied it to the code in the above post.

i did run it on Firefox, Chrome and Edge. What browser do you use?

Maybe you could generate the HTML again and copy the new files to your server, then call the whateeverthenameis.html in your browser. and see what it does. Then try some thing to remove, by eploring the webpage with the developer mode which are available in chrome and firefox. So you can see how it is build up and find parts which you would like to change. Keep track of what you change, because an easy fault could end up in malfunction of the webpage.

It takes a little while before starting.

Maybe a bit of reading helps to make your life easier: https://codex.wordpress.org/Using_Javascript

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Mon Apr 23, 2018 8:25 pm

You could also try to load the page in an iFrame Wrapper, does also work.

Create an Menu item as Iframe Wrapper and put the url to your blablabla.html

Works on Joomla, should also work on Wordpress

Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by Zood » Tue May 01, 2018 2:05 pm

Alright so I made a new stack, it puts "Hello world" into a label field if pressed, if the field is not empty then it will be emptied. Easy enough right?

I created the HTML5 standalone, uploaded the files to my server and opened the .html file -> No response
Firefox gives me an error saying it failed to load the .js file
Chrome gives me another error: Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

Tried the iFrame Wrapper, same story. The console gives same errors when trying to load the .html file
Also tried Windows, as I have LiveCode on Mac, but it gives same errors (tested on chrome & firefox)
Is it maybe a bug specific for Community 9-0-0 DP 9?

Thanks in advance!

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Tue May 01, 2018 2:17 pm

I don't think it's a bug related to dp9, but you could test LC9.00 stable.
And check if you have any differences.

Also it should not matter if you're on windows or mac. Even Firefox or Chrome should not matter.

Build for HTML5 with LC9 stable, put all files on your server (all in smae folder) and then open the generated html file directly in your browser https://yoursite.com/thisfolder/generatedfile.html
That should work
If that still does not work then there must be something else going on, i think not related to LC.

You could also install XAMMP or thelike on your computer and install locally.
Run the local server and go to http://127.0.0.1/yourlocalserverfolder/ ... dfile.html in your browser

Zood
Posts: 37
Joined: Mon Apr 24, 2017 7:17 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by Zood » Wed May 02, 2018 11:23 pm

Hey Sphere,

You were right, it is not a bug related to dp9 (stable LC has same issue)
Localhost with XAMMP surprisingly did work!
All versions, including a more demanding stack worked perfectly!
Is it possible that some settings (like request time-out?) are preventing a full download of the .js file and thus preventing a full load of the stack?

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Adding html5 standalone as a Wordpress Plugin

Post by sphere » Thu May 03, 2018 12:00 pm

Great to see!
At least you know LC is fine.

If you have access to files like php.ini then maybe you can check some things, but if not then you probably should request some help from your host where your website is running. Maybe they can do something.
and sometimes it's changing something in .access file.
But i would not know what, but your host should be able to help with that.

andrehoss
Posts: 2
Joined: Mon Jul 02, 2018 6:22 pm

Re: Adding html5 standalone as a Wordpress Plugin

Post by andrehoss » Tue Jul 03, 2018 6:34 pm

I like sphere's tutorial. Thanks

tim2RZ
Posts: 6
Joined: Tue Mar 10, 2020 12:27 am

Re: Adding html5 standalone as a Wordpress Plugin

Post by tim2RZ » Mon Jan 10, 2022 5:46 am

Zood, have you tried to do that without plugins at all? I know a lot of useful and helpful wordpress-related web resources, but one of the most helpful articles about wordpress I've seen - was a webpage where I could find advises of how to make a backup and create Wordpress theme with react in the shortest period of time. Their site is all about useful tips and tricks for WordPress users and regular programmers.

Post Reply

Return to “HTML5”