GUI and action trigger lost after canva resize

Hello everybody,

So moving slowly forward with recreating my existing card game with babylon js, moves are not yet convincing, but that’s another story : Chibre.ch

My question is about all those actions that will resize the canvas (switching to full screen, hitting f12 to debug some js, etc.): as soon as I do that, being on my mobile or on my laptop, then all the buttons and also the rollOver/click mesh action are “no more working”, or their “trigger areas” do not move / resize accordingly: any hint ?

Do I have to dig into @Wingnut’s post about Canva resize to find an answer ? :slight_smile:

Thanks!

So the GUI is automatically taken the UI resize in account if you call engine.resize when the canvas is resized. Here is an example:
https://www.babylonjs-playground.com/#Y3C0HQ#146

1 Like

Thx DK. What do you think is happening with his scene? Restore the screen, and you cannot click in “Number of Cards”.

He should not use .top and .left values? Or, perhaps those need to be percentages? Thoughts? (thx)

(Wingy forgets things too easily - sorry)

guys thanks for your rapid, friendly and accurate answers, this is really appreciated :slight_smile:

so, I just added:
window.addEventListener(“resize”, function () {
engine.resize();
});

Right after:
engine.runRenderLoop(function(){…}

and voilà, all works now: Chibre.ch

even on my mobile, portrait, landscape and fullscrren, yeepee :joy:

btw, regarding mobile, woud you have an idea why when I click on a card (after having loaded the deck), the screen is kind of turning blue for a little while ?

2 Likes

I just-now finished moving your gui to playground. hehe.

https://www.babylonjs-playground.com/#2H2LUT#1

Oh well, I’m glad you and DK nailed it.

Perhaps you could use the code in lines 98-102… if you haven’t built a observer for number of cards.

1 Like

onBlurObservable -> just learned a new thing :slight_smile:

I am now on reajusting the cards of the deck when one is played (some more maths … :P) but I’ll soon go back to GUI for at least one thing: a chat…

and maybe for a second thing, dunno yet how I will do it, but I have to find a nice, kind of imtuitive/logical way, to display “players combos statement”: long story made short, in that swiss card game called jass (or chibre in the french part of switzerland), on the first turn, each player might verbally claim a combo (as a suit of 3++ cards) and at the end of that turn, the best combos will be counted and shown…

So I was asking myself how to do that in 3d… maybe as a kind of comics buble displayed closed to each player, like it would come directly from them… but comics are 2d (as the GUI…), not sure 3d will still be nice / fit… any ideas welcome there

if you put your bubble on a plane, you can have face towards the camera (GUI can attach to plane/mesh) with an image and some text:

plane.lookAt(activeCamera.position);

wow. if we put 4 spaces in front, looks like we get code! i learned something useful today! :slight_smile:

Hi guys. I saw 3 “chat” playgrounds during a playground search for inputText, yesterday.

https://doc.babylonjs.com/playground/?code=InputText

Might be worth investigating.

InputText has quite a huge pile of observables. inputText docs It looks like a fun thing to experiment-with.

Possibly, your chat-panel will consist of two primary parts… the chatInput (inputText with possible allowance for up/down cursor back-buffer, and chatOutput (scrollView with word/line-wrapping).

There’s many BJS scenes that mix 3d canvas with HTML, often via side-bars/panels. I don’t believe such things… work with VR head-gear. If you don’t care about the VR folk, then a HTML chat-panel is an option for you… perhaps on the bottom of the screen.

An HTML chat-panel has quite a bit more power than a GUI chat-panel… primarily because-of CSS styling. For example, a user might input: I was dealt TERRIBLE cards this hand.

You could allow: I was dealt ::id=42:TERRIBLE:: cards this hand.

At the HTML output, the word TERRIBLE would use a CSS style named “42”. Perhaps it is a red-colored big-fonted style. Your double-colon feature could allow all sorts of inline CSS, and even little pictures, and possibly even sound effects… all embedded in a chat line. This makes for some VERY expressive chatting. Of course, ‘42’ could just as easily be named ‘bigred’. And a pop-open style-selector panel could easily be made… to help chatters determine WHICH styles are currently available to use, perhaps with a little demo-text next to each choice. (Helps remind chatters what style 42 looks-like, before embedding it in a chat line.)

I once built a system like this, and it worked fine, and was lots of fun. I even allowed users to publish there own stylesheets-of-favorite-chat-styles, and allowed a command to be sent to ALL other chatters… to tell THEIR browsers to include-in (link) the user’s personal stylesheet. ::link someStyleSheetUrl:: This allowed the RECEIVERS of the user’s personal chat styles… to understand id=42… and be able to look-up that style for THEIR chat output. (Everyone sees the very same id=42 style as the input person sees/created.)

In MY chat system, I even allowed HTML <object> and <audio> and <video> elements to be sent to all chatters and insertNode’d into their DOM trees (I called it “The Media Cannon”). IF all chatters had their mimestype set properly for THAT media-type, and IF the media was published in a public CORS-clear place, they ALL see it. In effect, play a movie or share an image… within a bordered div… within their chat output window. COOOOOL! White-boarding festival! (whiteboarding = mega-collaboration). Keep in mind that the movie/video might take longer to load for SOME users, so the movie/video might not be in-sync (at same time-code place) for all chatters.

I also used it to start/loop “crickets chirping” sound effect… if the chat windows sat idle for a long time. :slight_smile: Too fun! Don’t forget nametags… so other chatters know who “sent” something (especially important on media-containing divs). We need to know WHO keeps “spamming” the chat windows with pictures of naked chickens. :slight_smile:

Inline CSS styles in chat lines - different… powerful… expressive. Media Cannon - beyond expressive. I even had an option to… query the allowed mimestypes of ALL chat listeners, and tell me which listeners don’t have a media player for various filetypes. For example… ::query AVI:: would report back ALL chat listeners who could/couldn’t play AVI files… a pre-check before sending ::object mediaURL.avi:: …to ensure that the avi wouldn’t fail-to-play for SOME listeners. Heavy, huh?

folder of screen grabs


You should avoid temptation to use the HTML frameset element, as that went obsolete in HTML 5+. I don’t know what they replaced its functionality-with, but as you can see by our playground (esp with inspector activated)… “framing” is still available in SOME non-frameset way.

I saw a playground/scene recently… that had some kind of scene-graph viewer on the left side, and standard inspector on the right side. I need to find that again. It was beautiful. The playground’s inspector is powerful and beautiful, in general, but that’s another topic. :slight_smile:

Good luck, F. Go get 'em. Teach us / show us …stuff that you learn, ok? thx! Perhaps you should build your chat-panel in the playground so we can all help flesh and empower it. It would be a fun and reusable community project. InputText is not used very often, and ScrollView is quite new, so it would be good learning for all of us.

1 Like

Thanks for that rich return!

Remind me what I did for the chat of that card game Imgur: The magic of the Internet where users could personalize their style for the different type of info, but I clearly didn’t push that far than you :wink:

You know, my users mean of age is around… 60 :wink: so I should be careful :slight_smile:

But what I know will work is to design something I like to play as I am a card player myself (was taught by my grand-mother when I was 4), and I think the key success factors are:

  • simple and intuitive
  • beautiful and immersive

And I am impressed with bjs, yesterday I was looking at my scene in full screen mode on my mobile (s7) , and was so impressed, really no need anymore to develop platform specific, what we can do now in the browser is amazing!

So, I’ll publish more of my upcoming stuff, and will get your feedback and create related playgrounds with pleasure.

For the chat I would like something… classy and light, so maybe two different philosophies:

  1. Not integrated in the scene, but on top of the scene, somewhere, like in some fps, subtle white font in some dark area
  2. Completely integrated, ie a dedicated 3d object that would be logical to display a chat… I was even thinking that I could give a try to write on the dynamic texture of the scoreboard… not sure it would be classy / intuitive / logical enough, but crazy stuff enabled by bjs :wink:
1 Like

@Wingnut: I finally connected the chat with the other legacy clients and went so far for the subtle (maybe too subtle) way :wink:

4 Likes

Beautiful! Yum! Well done.