Recommended Posts

Hi again, gang.  Over in another thread, I went on an adventure to convert the ColorPicker GUI control (by @adam) into an "Ipod Controller".  Not important.

During those experiments, I learned a bit about drawing 2D "rings" and putting "hash marks" (graduations) on it, like a round speedometer backface might use.

I am not yet ready to talk about placing the text numbers/nomenclature on a "gauge backface".  We'll save that nightmare... for later.

I once experimented-with "curving" GUI textblocks... by mapping the ADT onto spheres.  https://www.babylonjs-playground.com/#11JINV#36

I also tried using extruded mesh rings, but the GUI ADT (advanced dynamic texture) wouldn't "wrap" (map) onto the extruded mesh ring... like it did for the spheres in the above PG.  Extruded mesh seem to have rather "basic UVs", if any UVs exist at all.  Possibly... with nice UV's on the extrudedMesh ring... hmm.  We'll talk.  :)

Although the #36 gauges were somewhat easy to place text and graduation marks onto, they look strange because they are not flat.

Now back to the IPOD ring method.   https://www.babylonjs-playground.com/#91I2RE#66

There is a custom GUI control that draws a ring with 8 graduation/hash-marks.

Take notice of lines 128-142.  There is Wingnut's piss-poor inefficient hash-mark maker.

As you can see by the way this makes hash-marks... it is difficult to make variable-length lines.  I think the LONG-line hashes... are called "majors", and short-line hashes... "minors".

I think we can work-around the majors/minors drawing issue... by using two rings with no gap between.  The outer ring... all minors.  The inner ring... all line-extender hashes... to make SOME minors... into majors.  With me?  You bet.  The "extend-some-minors-so-they-become-majors"-ring... could be on the outside, or inside, depending upon how you want your gauge back-face to look.

I could use some help... with efficient, tight, hash-mark drawings... on these rings.  (Need help from others replacing lines 128-142 with OTHER stuff.)

I believe these gauges... could help teach rotations to new users.  This means we need one gauge backface-o-hashes for radians, and one for degrees.

Others, feel free to try speedometers, tachometers, ANY gauges.  Notice that SOMETIMES the numbers are on the outside of the hashes, sometimes on the inside.  Text placement (for each major hash) could be a real challenge... and I would love to see all experiments and hear all ideas.  Besides these round gauges being helpers for learning rotations, I have a personal-project need for "easy round meters".

So, c'mon gang... let's get them brain juices flowing and think-up some crazy ideas, including... bending a line of GUI text (ouch)... layed-onto a FLAT circle/ring (as opposed to the "bulging circles" of my #36 sphere-meters).  Bending GUI text is NOT going to be easy, if anyone decides to chase that.  Use safety gear!  :)  If it can be done at all, it will, likely, require some very precise/interesting UVs on the extrudedMesh "ring".... to map the ADT onto the mesh.

Hey, thanks for input/ideas, guys.  Have a fine weekend, everyone.

Share this post


Link to post
Share on other sites

Wow, overwhelming response, so far.  :)  Ok, I'll try one.

https://www.babylonjs-playground.com/#91I2RE#67

See line 130 (extended into 131).

I built a math formula!  HOLY CRAP!  :)  And my dog didn't even get scared.

How many radians between each of these white hash marks?   I have no idea.  heh

Radians seems almost easy.  But... placing a hash mark every 10 degrees... that will surely scare my dog.  :)

Help/ideas welcome... for more hash-mark-drawing formulas. 

Extra credit for anyone who can do full lines (majors) AND half-lines (minors) (likely impossible using a single ring).

Extra credit for anyone who can do rotary clock graduations (minutes/seconds hashes).

Btw, @Dad72 started all this... about 3 years ago... when he said something like "Hey, I need ideas for a compass".  The subject is still going:)

Share this post


Link to post
Share on other sites

Changed from using image to drawing on canvas to get the varying hash-marks https://www.babylonjs-playground.com/#91I2RE#68

Had a play with adjusting size and had to add a panel2.top to re-center https://www.babylonjs-playground.com/#91I2RE#69 . Hope it helps and have fun playing.

Share this post


Link to post
Share on other sites

Wow, that is just GORGEOUS, @JohnK!  Nice work! 

Majors, minors, and... umm... micros.  :)  Or maybe better... minors, majors, and mega's. 

Coooooooooooool.   Let's see... each 'mega' is 36 degrees, or .628 radians, right?  I think so.

It is currently sort-of... base-10.  Metric.  So, for a clock, this would be... centi-minutes, deci-minutes, and milli-minutes?  heh.  FUN!

And then... let's see... metric radians?  :)  I better go do some web reading about units of measure.  :)

No tapered/width-changing hashes, either.  Very clean lines.  So NICE!  Thanks JK!! 

Share this post


Link to post
Share on other sites

Alright, I'm finally getting back to more experiments with these meter-faces and hash marks.

@JohnK made some REALLY nice hash mark-drawing functions in the #68 and #69 playgrounds, in lines 115 -155 area.

He gave us a "marks" variable... a simple 'number of marks to generate' value.  HOW COOL IS THAT?!

With these little super-adjustable functions, the sky is the limit!  We can do ANY graduations!  SO GOOD.  Here I am worrying about all these math formulas needed to calculate these spacing values... and JohnK just says... hey... make a universal hash mark drawing function, and then go crazy.  SO easy.

https://www.babylonjs-playground.com/#91I2RE#70

In that PG, I have deactivated two of the line-drawing funcs, and I am working-with the first one... lines 116-131.  In lines 118/119, I easily-added vars startLate and endEarly (used in lines 124/125).  As you can see, these two values allow hash marks (which are drawn from innerRadius, to outerRadius) to... "start late" and/or "end early".  SWEET! 

I have set marks = 12... the beginnings of a clock face.  Easy.  These are some FINE line-drawing funcs... thanks again JohnK!  Nice tools!

Is anyone besides me... thinking about animating?  Perhaps each hash mark (or variable-sized circle/square/triangle - anything is paint-able on that canvas) is also an RGB LED that can change colors in real-time, depending upon meter.value.  ie.  A circular LED bar-graph/VU meter.  Coooooool.

This custom GUI control is already prepared for value set/get (lines 29-44), with onValueChangedObservable in line 40.

Our line-drawing functions will need some tweaks, of course.  By doing this, though, we remove some "universal" and start to enter "double custom"... a "customized custom" GUI control.  :)

Plenty of fun experimenting ahead, huh? 

Later, if we can get "roundMeterFace" accepted as an "official GUI control"... we will need to think about WHAT will be automatic/default and _private, and what will be public/user-adjustable.  In our particleSystem, Deltakosh provided three easy "wedge-in points" for three custom functions.  Our GUI RoundMeterFace control... could do the same.  Custom DrawRing, custom DrawLines, etc.

Wingnut thinkin'... which usually means... RUN!  :D  Perhaps you guys/gals can help prevent "creeping featurism" - adding more and more "junk" to our meter-face-maker... until it becomes ridiculous and complicated. 

Deltakosh is almost ALWAYS thinking about... "How much will people USE it?"... when it comes-to creeping featurism (he gets many many feature requests).  SOME things... the frameworks does automatically.  SOME things, the framework provides easy wedge-in custom funcs.  SOME things... "Geez programmer... just code that yourself, cuz hardly ANYONE ELSE will ever use/need that feature."  :) 

When does the framework provide it by default?  When does it allow easy-add?  When does it say "code it yourself" (hack the framework code to make it do what you wish)? 

Hard thinkin'.  The GUI "roundMeterControl" is under that scrutiny... right now.  How often will THIS be used?  Worth adding to "core GUI" someday, which is an extension, meaning bloat is more allowed, there?  I dunno.

Share this post


Link to post
Share on other sites

Hi girls!  Well, I departed on YET ANOTHER adventure...

https://www.babylonjs-playground.com/#08KEYA#21

Geez, what a beast.  This is a primitive all-GUI object-inspector dialog/listView... or something near it.

It will eventually "fake" vertical scrolling... by shifting/pushing key-value "rows"... to/from its listPanel stackPanel.

None of it is wired-up, yet, but it's ready to BE wired.  I need a break.  If anyone would like to wire-up the scrolling, BE MY GUEST, PLEASE!  :)

I think I got a tumor.  :D

Quite a bit of "forcing" was needed to get rects, stacks, and texts... positioned in a tolerable way.  I hope to do more "force-relaxing"... let GUI system do much more natural positioning... soon.  Any help with that... is welcome, too.  Just Wingy, goofin' around, hoping to produce something useful, eventually.  :)

Data collecting for the rows... happens in lines 247-253.  I am currently inspecting the keys/values for the scene's light.  Any JS object should work, and possibly... JSON structures.

I'm really not very good at making GUI dialogs... so... pardon my mess/noobidity.  :) I just wanted to see how far I could get... before a tumor formed on my noggin.  heh.

Anyone, feel free to "run-with" this, as wanted (advance it).  Wire-up its slider... try to have only 6 rows in the listPanel, no matter how many items in keypile.  Yep, yep, yep.

If you advance it, please share'n'show'n'tell your stuff, afterwards.  thx!  Party on!

Share this post


Link to post
Share on other sites

Like your style. Question: GUIMeter... just want to see what it is. Couldn't find an example, or get (the one in playground search) to work... and thought you would be the best to ask. 

FYI: Above, playgrounds need "stable" version "latest" is saying __extends not defined. Interesting...

 

Share this post


Link to post
Share on other sites

Hi aF!  Umm, nobody has completed the guiMeter, yet, nor determined what should be public/private, nor figged how much versatility it should have (how many adjustables... like making it a clock, speedometer, LED lights/circular bar-graph/VU meter, have a needle/not, have needle "pegs"... etc.) 

Did you want to run with it?  Please do.  :)  We're only as far as drawing hash lines in a circle, so far.  Sorry.

I never complete anything, do I?  I think, subconsciously, I love "undone".  :)  I much rather do messy proof-of-concept coding... then do clean'n'efficient production code.

https://www.babylonjs-playground.com/#91I2RE#69  Looks pretty good, thx to JohnK.  Remove the mouse pressing powers, add a needle... maybe some labels on the major lines... might be workable... but certainly not production-grade.  Nothing is being done with ButtonRing.value and its observing, yet.  That would be used to get/set the current meter "reading", someday.

*shrug*

Share this post


Link to post
Share on other sites

https://www.babylonjs-playground.com/#08KEYA#28

Scroller is working.  YAY!  PARTY!!   (more about it... in a previous post)

The dialog "squishes" with canvas onReSize.  I can't remember how to prevent that.

Disable adaptiveScaling or something?  hmm.  It squishes when I open my dev tools panel, too.  Help welcome on that.

SOME folks might need to do some control-mousewheel spins... until everything "squares-up".  I had to do that when I tested in IE.  That issue might disappear after I find the scaling/resize adjustment.

Share this post


Link to post
Share on other sites

Hi Arte... a darned good idea, but I can't get it to work on my FF 52 ESR or on my IE.  hmm.   canvas.addEventListener func is never triggering.  Strange.

I bet I'm doing something wrong.  I probably have my browser set to "don't let Wingy hurt himself" mode or something.  Ideas, anyone?

Update:  canvas.addEventListener("wheel", function (evt){etc}... works for me (tested in my old FF).  Not too bad!  Seems to stop scrolling...somewhat before bottom of list.  Still, coooooooool.

Share this post


Link to post
Share on other sites

It's all cool.  I like the mousewheel idea.  Does #30 work for you, @Arte?

Do you have a browser that dislikes "wheel" and instead only wants "mousewheel"?  (line 312)

I was lookin' at the Scene object, wondering WHY the term 'wheel'... is not found on that page.

No scene.onWheel or .onWheelObservable.  hmm.

But but but... remember when we did that mousewheel on a freeCamera?   http://playground.babylonjs.com/#6FHKHC#9

Lines 19-46... there's some serious mousewheel-wrangling happening, there.

I always get a nasty "DOM taste" in my mouth... when I see addEventListener.  Yet, Arte's code is 1/4 the size of that custom scene observer function.

Anyway, I'm not going to do a scene.onPrePointerObservable version of Arte's "holy roller" mousewheel addition.  But Arte might want to try it, for fun.  ;)

I wonder if this listview thing could/should be cleaned-up and stuffed-into core GUI, someday.  ListViews are the start of... you know... hell.  First of all, a GUI listview control... will need far more than a .value.  A listView is a "compound control"... and it can get crazy... like... the listPanel is an observer of slider, and dialogPanel observes "X" panel-closer... and lower-right-corner drag-resizer, etc.  I dunno if it's sane to use observers/notifications for the many GUI controls on a Dialog/ListView/TreeView/etc... to communicate with each other.

And you know SOMEBODY will want to cascade-stack 5 of them on-screen at the same time, and want to tap control-tab to select/focus/toFront.

I guess a guy should run some tests... put 5-10 custom GUI controls on-screen, and see if we can get them to communicate with each other... completely thru observers/notifies.  Teamwork test.  :) Perhaps that will tell us HOW PLAUSIBLE... GUI-based compound-controls... are.

I think I better abort any further "widget-adding" (like closer "X" and drag-the-corner resizer)... before I accidentally electrocute myself.  There's SO MUCH THINKIN' involved, huh?  (Wingnut's dog nods its head in agreement.)  :)

Share this post


Link to post
Share on other sites

#30 working as expected  (Chrome, IE, FF).

I done my homework on "onPointerObservable onPrePointerObservable", and... 

On IE and Chrome working, but FF fails (no evt.DELTA).

I have a feeling :huh: DELTAkosh has taken another part. :D. If(true) return else keep it

Share this post


Link to post
Share on other sites

Hi guys.  New subject.  I recently updated the hoverboard series of playgrounds...  #25 thru #29.

They needed change from hoverboard.setPivotMatrix(BABYLON.Matrix.Translation(0, -3, 0)); into hoverboard.setPivotMatrix(BABYLON.Matrix.Translation(0, -3, 0), false);

That new last parameter... has something to do with "re-position the mesh, or not".  All those hoverboard examples... needed that param set to false.

I wonder how many other broken pivotMatrix playgrounds there are.   Maybe... over 200 of them:o

I think certain "big dogs" are allowed to hack-around in the playgrounds database.

Perhaps this is one of those special occasions when... a little big dog PG DB search'n'replace... is warranted, eh?  I don't know what tools are available to database mungers these days... but maybe, something powerful needs to be done.  Thoughts?

Share this post


Link to post
Share on other sites

Uh oh, I might have made a mistake regarding the setPivotMatrix thing in those hoverboard PG's.

I didn't notice the Animation running on those created-by-many-people playgrounds.  (We were having a playground campfire party, passing around a scene where everyone did some adjusting on it.)

Anyway, here's another pivotPoint-rocking, low-animated hoverboard... https://playground.babylonjs.com/#36UHXZ#31

We (I) am watching/testing the last optional param of line 31... true, false, or left empty (no param).

I have a suspicion that Mr. Wingnut has gone on a wild goose chase (he was wrong about the 211 potentially-broken playgrounds). 

I think Mr. Wingnut should have noticed the now-removed BJS Animation that was running on the previous hover-board playgrounds.

I think that animation was doing something evil... to the hover board's altitude. 

You can compare the #9 and #26 playgrounds (line 46)... both used animation.  #9 PG... WAS fine, but in BJS 3.2, the hoverboard got too much altitude.

As soon as I added 'false' in line 46, the hoverboard RETURNED to a good Y-height again.  (#26 pg)

But I think the animation might have been fooling me.  Not the renderloop cosine "rocking" animation, but line 56 hoverAnimation... messing with Y.  I didn't pay attention that IT had been running the whole time (line 75).  erf.  Dummy me.

 

SORRY, guys.  I think I screwed-up, and opened my yap yet again... for no reason.  *sigh*.  Not sure, yet... still testing things.

Anyway, feel free to goof-around with the new, optional postMultiplyPivotMatrix parameter in line 31... see what it does.

(Wingy slaps himself up-side the head, for good measure.)

Share this post


Link to post
Share on other sites

Hi gang.

https://www.babylonjs-playground.com/#91I2RE#79

A little more work happening on the custom GUI meterControl.

Lines 116-174 ... 3 active "mark-drawing funcs".

New feature - lines 120/121... upper/lower angle limits.

As you can tell, we are drawing marks in the lower hemisphere only.  I had some "fencepost" problems... where it wouldn't draw the starting mark, and sometimes it wouldn't draw the ending mark. 

For the center-scale marks (fat yellow marks)... you can see that the LAST MARK... did not draw.  Oh no!  Now change line 140 to marks = 60.001;  (and click RUN button)

Hurray!  Last mark for middle scale... is now drawn!  Math is SO weird.  Why don't lines 118 and 158... need the .001 added?  Strange. 

I smell an epsilon!  Smell it?  *nod*  Epsilons have a certain "stink" to them , eh?  :)  (sniff sniff)

I also tried to put the marks... for our lower-hemisphere tri-scale "meter"... onto the upper hemisphere of the circle.  When I did that, upperAngleLimit and lowerAngleLimit got warts, and I got a brain tumor.  It was a math nightmare.  Fencepost error festival (off-by-one-mark)

SO, I recommend... rotating the entire control... if you need these marks only in the upper/left/right hemisphere of the circle.  Easier.  :)

For those who REALLY like pain... go ahead... try to adjust upper/lower angleLimit values (and code)... to draw these marks in the meter's upper, left, or right hemispheres.  I dare you.  :D   You will experience "won't draw last mark" and "won't draw first mark" -HELL!  heh.  At least that's what happened to me, but my brain has been a bit soggy, lately. 

You math gods - maybe 20 minutes?  Who knows?  We got some radian-wranglers 'round here.  :)

If someone can create a FULLY versatile upper/lower angleLimit "system",  so we would never need to rotate the entire control... and without adding TOO many lines to each func... that would be wonderful.   Be prepared to try micro-radian tweaks to upper/lower angleLimit values.  Be prepared to cry a lot.  heh.

I suppose we should universalize the 3 functions... into a single one, called in three different ways, soon, too.  scalePainter(arg,arg,arg,arg,arg,etc) perhaps.  :)  (Ever see a movie called Down Periscope?  Too fun!  arg arg arg... pirate talk)

Share this post


Link to post
Share on other sites

"Jobs" sub-forum, eh?  yuh, yuh, yuh.  We finally got the "We Condone Capitalism/Hierarchies/Orders" banner... glued to the front of our pretty "commune"-ity.

*sigh*  Probably a sensitive subject... but... I don't know.  Something in my gut says that the "commune" just took a mortar shell that caved-in half the roof.

Is my gut unwarranted?  Am I denying "reality", even though "reality" shows that all other living things on the entire planet... don't use money or ownership or vertical "orders" and "ordering".

Is the "jobs" forum... really a "commercialization" forum/ad?   Am I even allowed to voice my opinion about this?

(Wingnut dons his hard-hat and pensively awaits the sure-to-come inbound bombs.)  :D

Share this post


Link to post
Share on other sites

I agree. We are on a free support forum. This Jobs forum can end up in conflictif an employer did not pay for what was done. Whoever jobs can simply disappear after getting what he wanted. There is no guarantee and it is not legal. At home in France there are ANPE (national agency for jobs) to find work and that employers offers)
Coming to a support forum and doing your buisness is not healthy, I think. But that's just my opinion.
I think there should not be a report to money in this forum because there is no guarantee, not even a regulation.
Some time ago, I heard, we are on a forum of mutual aid and an open-source project, oo not wait for someone to work for you. But with this forum it is not really the case anymore. We ask that we deal with it for us without indicating whether the person is paying or not. It is easy to create some kind of confusion and that people do not pay next.
Babylon also becomes an agency for no-legal employment ???

No criticism, just a finding.

Share this post


Link to post
Share on other sites

Oooh, good point, D72.  I hadn't thought about that aspect.  I was doing the tree-hugger approach, love-don't-invoice.  :)

I'm sure the "intent" of the Jobs sub-forum... was to help categorize the messages, keeping "opportunity" requests... away-from the other things.

It just has some FRR... far-reaching ramifications... possibly worth considering.  We're studying the phenomena, here, and not bashing anyone's heads/ideas.

Weighing stuff.  Pondering.  :)

Share this post


Link to post
Share on other sites

Well I see it on the other side: People from the community can be paid to work on Babylon.js and I find it really healthy for the community. We all need to work to live (well almost all :)) and being able to get paid for working on Babylon.js is not the worst

And it is not "doing your business" but "offering jobs" which is kind of different to me. 

Share this post


Link to post
Share on other sites

I speak of illegality and unsecured for those who will work for someone. That's what is not healthy.

After, yes, people need to earn money to live, but in legal ways is much better.

An employment offer is a company looking for employees. Here nothing says that these are companies that offer jobs with a contract that guarantees his salary.

Services Offered  would be a more appropriate and useful term. After the people discuss by MP for the reports to the money, but the goal is to ask for services, not to offer illegal jobs, without guarantee.

I would find it healthier if there was protection for those who are using it. There the advantage is only for those who employs. But for whoever is going to be employed, he has nothing that tells him that he will be paid because legally he can not do it and say he will do it. This is something I have already seen on forums.

In short, the service offered imply service and free, not to be a job. This term is more appropriate.

 

Share this post


Link to post
Share on other sites

I have seen forums close because of this illegal side and of the term employ "job" or the fact that the base of this forum uses the term "Service offered" and not Job. Yes social network, but must it remain legal no? there I see a non-legal side that can damage the forum.

it is my concern to have seen similar problems before.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   1 member