CastorGUI Help

[touslecoq]

Hi

Having some difficulty getting CastorGUI to work when my Babylon.js app is embedded in a Drupal (it works when all in a single html file).  

It fails with a 404 as cannot find the file mysite:8083/node/themesGUI/default.css.  Clearly that is because that location doesn't exist.  The /node/ notation is the Drupal URL for the current content, not the location of the CSS file.  The file is actually at mysite:8083/themes/mytheme/themesGUI/default.css.

I did some tracing in Chrome Dev Tools and found the following:

- I kick things off with

gui = createGUI();

- createGUI function looks like this:

var createGUI = function() {

  var css = "button{cursor:pointer;}";

  var guiSystem = new CASTORGUI.GUIManager(canvas, css, {
    themeRoot: "themes/uconstruct/", 
    themeGUI: "default", pixel: true
  });

  var form = new CASTORGUI.GUIWindow("form", {
    x: 0,
    y: 0,
    w: 300,
    h: 80,
    textTitle:"Scene Menu ",
    closeButton: false,
    heightTitle:"10px",
    overflow: "hidden",
    backgroundColor: "rgba(60, 60, 60, 0.6)",
    colorTitle: "rgba(90,90,90,0.3)",
    borderWindow: "0px"
  }, guiSystem);

  ...
};

When I trace with Chrome I can see the guiSystem object created and the line in CASTORGUI.GUIManager.prototype.addStyle() where it reads the themeRoot and theme variables that were passed and uses it to populate the href for the CSS file:

CASTORGUI.GUIManager.prototype.addStyle = function(css, theme)
{
  ...
  this.GUItheme = document.createElement('link');
  this.GUItheme.type = 'text/css';
  this.GUItheme.rel = 'stylesheet';
  this.GUItheme.media = 'screen';
  this.GUItheme.id = "themeGUI";
  this.GUItheme.href = this.themeRoot+"themesGUI/"+theme+".css";
  this.head.appendChild(this.GUItheme);
};

This results in the correct file path being constructed ... themes/mytheme/themesGUI/default.css ... all good so far.

Then the next statement in my createGUI() function is to create the form object (ie form = new CASTORGUI.GUIWindow) as you can see above, I pass the guiSystem object (which contains the correct themeRoot and theme values) as the third argument.  I can follow the trace and see that this is picked up as guimanager in the CASTORGUI.GUIWindow() function:

CASTORGUI.GUIWindow = function (id, options, guimanager) {
  CASTORGUI.GUIManager.call(this, guimanager.canvas, guimanager.canvasCss);
  this.id = id;
  this.html = document.body || document.getElementsByTagName('body')[0];
  ...
};

This is where it seemed to go a bit odd (to my eyes anyway). The first statement in this function is to call the GUIManager function.  It passes 3 arguments.  However the first argument (this) is undefined at this stage and the second 2 arguments are a reference to sub-elements of guimanager but they do not include the themeRoot or theme variables.  So then when GUIManager calls .addStyle() again, this time it doesn't have any value for themeRoot or theme (although it defaults theme variable to 'default' if it is empty).  As I trace through from that point onward, all references to themeRoot are "".  There is probably a good explanation for all of this, but this is the only thing I could find.

However I am not sure this explains the issue as even if this did work it doesn't fully explain what is happening.  It seems that somewhere (although I cannot find it) the current page base URL (mysite:8083/node/) then has the constructed theme path appended to it. 

With the issue above (ie the empty themeRoot value), this results in a 404 looking for:

• mysite:8083/node/themesGUI/default.css

However even if the correct themeRoot value was being pulled through, this would presumably appear as:

• mysite:8083/node/themes/mytheme/themesGUI/default.css  (ie with the erroneous 'node')

This would not work as the correct path (I think) is without the "node":

• mysite:8083/themes/mytheme/themesGUI/default.css

 

So a long-winded way of getting to 2 questions really :

• why does the themeRoot value not get passed through from GUIWindow > GUIManager > GUIManager.addStyle?  Is this supposed to work this way?
• How is mysite:8083/node being prepended to the themeRoot value when it should be mysite:8083/ (ie without the 'node/')?

Thanks

Rich

 

[inteja]

I work with Drupal daily.

Have you tried prepending themeRoot with forward slash i.e.:

themeRoot: "/themes/uconstruct/", 

This should ensure the path is relative to the Drupal web root rather than appended to the current URL.

[touslecoq]

Hey Inteja thanks for the tip - although, I wouldn't have admitted the Drupal thing as I may be bugging you for help now! :).

I think I did try that combination but will try again.

From what you said ... is it Drupal that is applying logic as to what prefix to use (ie site only or current URL?).  That is what puzzled me.  Although I could see where themeRoot was coming from (or not in the case of GUIWindow), I could not see where it was obtaining and applying the site name and any existing URL.

[inteja]

In this case I don't think it's a Drupal specific issue. In Drupal /node is just the default path for the home page content (usually a list of published teasers that have been promoted to front page) so I'm guessing your BJS app is embedded on your home page, therefore your css path is relative to /node unless you prefix it with forward slash, then it should be relative to the web root.

Anyway, I'm no expert, just a guess.

[Dad72]

inteja reasons. Alternatively, you can try using a url like http path.

THe path must point to the theme folder themesGUI: this directory themesGUI should exist, it can not be other name.

themeRoot: "http://www.site.com/",

Default themes are saving to a folder and inside you can create multiple theme

themeGUI: "default" // here it will use the default css file.

It's hard for me to see where you made a error.

 

[touslecoq]

Thanks both.  That is the thing - I am trying to force Castor to take the path I provide (/themes/mysite/) and append themesGUI/default.css to it.  it does this the first time round, but prefixes it with http://mysite:9999/node/ which is not the correct path.

Inteja - the canvas is embedded in a custom block that is only displayed when content type of model3d is selected.  The block is then overridden using a drupal twig which just loads the editor3d.js script and creates my scene.  At the moment the scene is all hard coded and not driven by drupal content - that is the next challenge.  However when the hardcoded scene (all from editor3d.js) it all works except for the Castor calls returning a 404.

Dad72 - is the first question I posed expected behaviour?  At the end of the first call to GUIManager.addStyle it has the correct themeRoot and theme values.  However after calling GUIWindow, which in turn calls GUIManager again, which again calls GUIManager.addStyle, the themeRoot and theme values are empty.

[Dad72]

11 hours ago, touslecoq said:

Dad72 - is the first question I posed expected behaviour?  At the end of the first call to GUIManager.addStyle it has the correct themeRoot and theme values.  However after calling GUIWindow, which in turn calls GUIManager again, which again calls GUIManager.addStyle, the themeRoot and theme values are empty.

I'll look at it and make a correction if necessary. I will come back to you.

[Dad72]

Ok, I find the bug. I've updated the deposit with the fix. it should now be good for you after your castorGUI.min.js updated file.

https://github.com/dad72/CastorGUI/tree/master/dist