touslecoq

Members
  • Content Count

    40
  • Joined

  • Last visited

About touslecoq

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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.
  2. 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.
  3. 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
  4. Fixed it. I hadn't forced the canvas element width and height to 100% in the drupal version. Added the following into a Drupal twig. It should probably go in a CSS file but concept proven. <style> #renderCanvas { width: 100%; height: 100%; }</style>
  5. Ah right just noticed something ... if I click in blank space in certain places then the boxes are clicked. So it looks like the co-ordinates are offset somehow when its embedded (ie I click in position coordinate 50,50 and the app thinks I've clicked at position 100,100 where the box is. Any thoughts why this might be happening?
  6. Hi all I'm struggling to debug an issue with my babylon.js app when embedded in a Drupal page. The click events are definitely registering (ie I can orbit that camera by click-dragging and have got it to write the co-ordinates scene.pointerX and scene.pointerY to the chrome console). However for some reason when I click on a mesh (I've a load of boxes in the scene) pickInfo is not returning a hit and therefore not allowing me to drag the boxes around. I have tried it just embedded in a standard non-drupal html page (with my babylon app in a separate .js file, and it works fine allowing me to click and move the meshes around. I've tried tracing it through in Chrome Developer tools with breakpoints and it is just failing to register a hit. Not sure where to go next ... has anyone seen this before? Thanks Rich
  7. Thanks - I think you are right - having just played with a basic version it in the playground it is exhibiting similar behaviour. The reason mine looks worse is because of the additional code it executes on the fly (ie checking for nearby meshes to snap to), it appears less smooth. I therefore think the behaviour I am seeking is not standard. As I drag components around in front of the camera I want them to remain in that same plane (ie remain same distance from the camera). I will create some functions to lock movement to the x,y and z axis for more precise movement. Thanks again Delta.
  8. Hey Dk. Thanks. I have tried that and actually I am wondering if there is some other issue contributing to the issue I am seeing. I think there are 2 symptoms: 1 - when camera (arc rotate) is rotated so that it approaches being co-linear with the ground plane (ie close to ground level), the getGroundPosition stops working as ground is no longer behind the mesh being dragged (ie the sky - no plane - is behind the dragged mesh). I tried doing it inside a cube and had some luck but results were a bit sporadic - possibly related to point 2. 2 - aside from point 1 I am still seeing the mesh randomly move closer or farther from the camera as I drag. I am still experimenting but its seems to do this when the ground mesh (or the cube inner wall see point 1) is at an angle to the camera (ie the camera is not directly above and facing the ground). If I am correct I assume this is because when at an angle the 'ground' plane is closer or farther from the camera depending on the screen x,y coordinates. Only when the camera faces the ground mesh perpendicularly does this not occur. Is this normal behaviour or does it sound like something wrong with my implementation? Would having the ground plane move with the camera so that it is always perpendicular to the camera and always at a set distance from the camera? I will try and replicate in a playground to illustrate but thoughts appreciated... Rich
  9. Hey all I've used the standard method for drag and dropping meshes in my app (ie the one with the getGroundPosition function.) it works fine. However I don't really like it - I don't want to have a ground plane in the scene as the user is building up building blocks and is able to rotate the camera all around the evolving structure and make changes. The ground plane gets in the way of this. So - has anyone come up with an alternative strategy for this? If I remove the ground mesh it does kind of work but is glitchy - the mesh being dragged suddenly starts moving toward or away from the camera randomnly as there is no ground mesh to use as an 'anchor'. I'll have a play but wondered if the brains behind this operation had any thoughts ... would having the scene inside some kind of giant 'universe' cube, where the sides of the cube form the background and the boundaries of the scene, work? I guess if the user ventured towards the edges of the cube they could still end up intersecting with it and seeing odd behaviour. Cheers Rich
  10. Yeehaa :). Thanks Wingy not sure how I missed that but that is exactly what it needed!
  11. Hi folks, @Nockawa As well as making use of the fine Castor.js extension for html based UI, I am wanting to add some webgl UI elements using Canvas2d, specifically mesh labels. I have pretty much got to grips with the basics. However one thing I cannot get to work is changing the visibility of elements at run time. For example allowing the user to toggle labels on and off. I have created a silly demo based on the "labels" playground demo. The red sphere has a label. Hitting the 'Z' and 'X' keys moves the label along the viewport x-axis and this works fine. The ''L' key toggles the .isVisible property of the label but has no effect. Note that this property does work at 'create' time. If you change line 5 to default to 'false' then the label will not be displayed. However then hitting 'L' key does not display it. The key events write to the console log so it looks as though the events are triggering. http://www.babylonjs-playground.com/#1RB7WB#20 Am I doing something wrong or is the isVisible not re-read once created? Thanks Richard
  12. Love this place!! Thanks both for your replies. @Dad72I haven't checked out your suggestions above yet, but the effect I was trying to achieve was a control group (ie. like a toolbar) with the title section at the bottom of the group rather than the top. The group would be positioned at the top of the screen with only the title element visible (ie the remainder with the buttons in the group would be off the top of the screen). Upon moving the mouse over the visible portion (ie the group title) would then trigger the whole group to move down into view, creating the effect of drop-down toolbar in order to maximise scene view when not pressing buttons. Mouseclick may be better than mouseover. I am sure there are far more elegant ways to achieve this but that was my initial thought.
  13. Also I removed the title border by setting the Text to " " and the heightTitle to "0px". Would be great to have more configuration over the positioning of title though. Great extension though!
  14. Fixed it - I was missing the "false" attribute at the end of the creation statement to inhibit it from being appended to document body.
  15. Hi (for Dad72 or anyone with Castor skills) I'm using Castor for simple UI elements for my app. My UI will have a window for scene/world buttons, a window for current mesh buttons and a window for status/MI. I am having difficulty adding buttons into a window: var form = new CASTORGUI.GUIWindow("form", { x: 0, y: 0, w: 300, h: 200, overflow: "hidden" }, guiSystem); var sceneButton_toggleAxis = new CASTORGUI.GUIButton("sceneButton_toggleAxis", { x:10, y: 10, w:40, h:40, borderRadiusButton:"20px", borderButton:"8px solid gray", value:" ", backgroundImage:"./assets/icon_axis.png" }, guiSystem, toggleSceneAxis); form.add(sceneButton_toggleAxis); form.setVisible(true) When I run this it appears correct. However if I move the window to a new position there is an instance of the button in the window AND a duplicate instance of the button left behind in its original position. Both buttons appear functional. How can I avoid this duplicate button being created? Second question - is it possible to remove the title border from the window object or reposition it (e.g. to the bottom of the window). Many thanks Richard