Adding html5 standalone as a Wordpress Plugin

Bringing your stacks to the web

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

Post Reply
Zood
Posts: 30
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: 583
Joined: Sat Sep 27, 2014 10:32 am
Location: the Netherlands

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
Sony HitBit HB75P MSX-1, Amiga 500 v1.3, Amiga 600, Amiga 1200, Pentium 1 and onwards to all loose PC crap boards which already was in the Amiga for ages not mentioning the startup speed, which we now have again with SSD :D

Zood
Posts: 30
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: 583
Joined: Sat Sep 27, 2014 10:32 am
Location: the Netherlands

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!
Sony HitBit HB75P MSX-1, Amiga 500 v1.3, Amiga 600, Amiga 1200, Pentium 1 and onwards to all loose PC crap boards which already was in the Amiga for ages not mentioning the startup speed, which we now have again with SSD :D

Zood
Posts: 30
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: 583
Joined: Sat Sep 27, 2014 10:32 am
Location: the Netherlands

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
Sony HitBit HB75P MSX-1, Amiga 500 v1.3, Amiga 600, Amiga 1200, Pentium 1 and onwards to all loose PC crap boards which already was in the Amiga for ages not mentioning the startup speed, which we now have again with SSD :D

Post Reply

Return to “HTML5”