Forum

where to place files online for a simple web app

26 January 2015 16:12
#1173
aidyburrows
Hi Guys!

Fantastic work so far, incredible what you're achieving here.

Sadly my achievements are somewhat so far sub-par!

I have managed to export a html file and test this locally, worked great really easy procedure. Put it on an external website, also worked a charm.

I then managed to follow the simple web app (with the 3 gems) and export my own example file as a .json file. This worked great again locally. It's a simple scene, just a cube, click on the cube it spins.

Putting it on an external website this time didn't work unfortunately. I think I have a path or name wrong somewhere.

In the main online folder i have 4 files…

b4w.full.min.js
blend4webTest.html
blend4webTest.js
blend4webTest.json

The iframe i'm using is this….
<iframe width="800" height="500" allowfullscreen src="/wp-content/tutorials/blend4webTest/blend4webTest.html"></iframe>


This is the js script…
"use strict";

b4w.register("blend4webTest_main", function(exports, require) {

var m_anim   = require("animation");
var m_app    = require("app");
var m_data   = require("data");
var m_main   = require("main");
var m_scenes = require("scenes");

var _previous_selected_obj = null;


exports.init = function() {
    m_app.init({
        canvas_container_id: "canvas3d", 
        callback: init_cb,
        physics_enabled: false,
        alpha: false
    });
}

function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_app.enable_controls(canvas_elem);
    canvas_elem.addEventListener("mousedown", main_canvas_click, false);

    window.onresize = on_resize;
    on_resize();
    load();
}

function load() {
    m_data.load("blend4webTest.json", load_cb);
}

function load_cb(data_id) {
    m_app.enable_camera_controls();
}

function on_resize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    m_main.resize(w, h);
};

function main_canvas_click(e) {
    if (e.preventDefault)
        e.preventDefault();

    var x = e.clientX;
    var y = e.clientY;

    var obj = m_scenes.pick_object(x, y);

    if (obj) {
        if (_previous_selected_obj) {
            m_anim.stop(_previous_selected_obj);
            m_anim.set_frame(_previous_selected_obj, 0);
        }
        _previous_selected_obj = obj;

        m_anim.apply_def(obj);
        m_anim.play(obj);
    }
}

});

b4w.require("blend4webTest_main").init();


This is the html…

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="b4w.full.min.js"></script>
    <script type="text/javascript" src="blend4webTest.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="canvas3d"></div>
</body>
</html>



i've tried changing these lines
<script type="text/javascript" src="b4w.full.min.js"></script>
<script type="text/javascript" src="blend4webTest.js"></script>

to have this path instead…
src="/wp-content/tutorials/blend4webTest/b4w.full.min.js"
src="/wp-content/tutorials/blend4webTest/blend4webTest.js"

but i'm just getting a black screen.

Seeing how it works locally I must be doing a really basic pathing mistake or something. Unless the wordpress site doesn't like the rest of the code or something? Not sure how to proceed at the moment. Thought you might be able to know in an instant!! :D

Thanks again for all your awesome work! :) Aidy.
26 January 2015 18:52
#1174
Yuri Kovelenov
Hi Aidy, and welcome to this forum!

What is printed in the browser console (opens with F12)?
The Founder | Twitter | Facebook | Linkedin
26 January 2015 20:07
#1177
aidyburrows

Ответ на сообщение пользователя Yuri Kovelenov
Hi Aidy, and welcome to this forum!

What is printed in the browser console (opens with F12)?

Brilliant! That was all the lead i needed to figure out what was going on!!! I didn't realize that additional help info would be there in the console! D'oh! :D

The error message read that there was .bin file, which makes perfect sense as I didn't realize that needed copying over.

Copied it over and it was as simple as that, now works!!! :D

Thanks so much for your help!

p.s. The ridiculously simple example I did is here that you'll see at the bottom (a shadeless cube! WOW!)….
http://annex2nothing.com/cyclescookbookreview/

I'd like to expand on this and do a little more for some upcoming cg masters tutorials. Is this an ok use for your technology? Is there anything i'm missing, this all seems so straightforward now!!! :D
26 January 2015 20:43
#1178
Yuri Kovelenov
Thanks so much for your help!
Nice to hear it worked for you!


p.s. The ridiculously simple example I did is here that you'll see at the bottom (a shadeless cube! WOW!)….
http://annex2nothing.com/cyclescookbookreview/

I'd like to expand on this and do a little more for some upcoming cg masters tutorials. Is this an ok use for your technology? Is there anything i'm missing, this all seems so straightforward now!!! :D

Great! Looking forward for these tutorials!

BTW, if you are looking for basic interactivity, such as click-and-play behavior, you might be interested in our simple visual programming tools called NLA Script. This way you don't need to write any code. See our helicopter demo and Brian's online shop models, for example.

We'll be happy to answer your any further questions.
The Founder | Twitter | Facebook | Linkedin
26 January 2015 22:13
#1181
aidyburrows
Awesome! Thanks again! :D

Aidy.
 
Please register or log in to leave a reply.