Anyone good at css?

[joshcamas]

Hey guys!

 

For the past few months I've been programming my editor. A week ago I decided it was time to start a new interface.

Problem: I SUCK at css.

 

Here's what I managed to throw together:

http://steinhauer.x10.mx/interface/0/gui.html

 

So I'm starting this thread as basically me begging for advice. Hopefully it's not considered off topic... the editor is babylon.js, I swear! XD

So I guess here's question one:

 

-How would I make the sections (left, right, center) draggable? Basically to resize the sections?

 

Thank you!

 

 

Note: Please don't look at my css. It's embarrassing how bad it is.

 

Other Note: I just realized this is more of a js problem. But I assure ya'll that in the upcoming months I shall have countless css problems for ya

 

Final Note I swear: And if anyone has pointers/ideas that will make this horrid piece of junk look sexier or more professional, PLEASE TELL ME

[amorgan]

I would start with these links:

 

http://jqueryui.com/

 

http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

 

http://knockoutjs.com/index.html

 

And yes, this will definitely be a html/css AND javascript effort. Knockout is a good DOM manipulation library for keeping things a single webapp. Jquery is commonly used for what you initially asked, some would say you don't need it, but as a beginner, start there. As far as pure CSS, I've found it is a lot of Googling and trial and error. A lot of what you need will be doing stuff like specifying mins and maxs (min-height for example or max-width), or using !important on float (float: left !important; for example). Also stuff like overflow: hidden, overflow: auto for content, etc.

 

Looks good so far, keep up the good work!

 

Edit: Looking at your code, you are using jquery, so good start there.

[Dad72]

JQuery-UI is simple and allows you to do everything you need.

My CastorEngine editor such was entirely made with Jquery-ui and CSS3 and babylon recess

[Wingnut]

Josh, also keep in mind that you are a webGL god... so... what keeps you from building your own gui out of babylon shapes, and attaching it to the bottom of the camera view like a fancy dashboard on a hovercraft? 

 

You don't really want resizeable multiviews.  That's so XUL/XAML.    You want quick-change FULL views... done by changing and moving cameras.  You could have 4-5 different dashboards full of buttons and dials, all driven by actionManagers.  The different dashboards can float in space around the scene... user clicks one... it attaches to the camera, and the previous one floats off.  So cool.

 

The Samac WebGL UI Widget Library... v 1.0.  It'll make ya famous. 

[joshcamas]

@amorgan:

Thanks for the links!!

Here is an old version of my editor: http://steinhauer.x10.mx/editor/0.015/Editor/

It's all generated by js, but in a very messy way. Hence my recode!

NOTE: You have to press "project" and "create map" to get the thing started :/

 

@dad72:

Yeah my original editor used jqueryUI, but only for the range inputs. I'll look into more stuff!

Also after looking at your editor, I see that your program's look is VERY much what I want. <3 <3

 

And.... after looking deeper, I found out that my 5-hour tab-coding was a waste: http://jqueryui.com/tabs

lol! Ima use this instead!

 

@Wingnut:

I don't think programming a gui in a 3D environment would be a very good idea... HTML/CSS is designed for this stuff, I feel like!

Also I don't know why realizable multiviews is bad... photoshop, for example, has them. 

But Ima certainly have multiple dashboards just like you say So a combination would be great.

The Samac WebGL UI Widget Library.... lol! Maybe someday!

[Wingnut]

http://www.html5gamedevs.com/topic/10823-need-help-with-design-of-a-graphical-user-interface/#entry63627

 

There you were bad-mouthing html and praising canvas.  (I was pro-html in that thread.  weird.)  We need to make up our minds, eh? 

 

Josh, we're in 3D land now.  Leave that flat crap behind.    It's just button clicks and an occassional drag on a dial or slider (rare).  Action manager can do them both.  Can an html element do a 360 degree spin when clicked?  Not like a webGL button can.  Can a html button fly-in to the dashboard from various points in space?  Nooo.  Can html buttons have a FireProceduralTexture burning as its background color?  Nooo. 

 

Just get that first dashboard done (groups of mesh buttons), get the text on them (preferably dynamicTexture and not images, so it can be translated to other languages easily), get all their clicks firing events and running functions, and boom, you're almost done.    HTML is for girls. 

[Dad72]

Oh, I read there ?? HTML is for girls? I create a lot of website that are games written in PHP and SQL. HTML, XML is a must and is the basis of any support for creating web pages and even to run WebGL who needs the famous <canvas> tag. If you make a game, you need a window to showcase it and have to go through write html pages.

 

And I think that in an editor interface part is very important because it determines the usability of the end user.

 

So HTML for girls. And you want that JavaScript is hard for large, men, true men with tattoo on their big bike? Try programming C++ and then tell that JavaScript is for girls too. 

 

 

 

[joshcamas]

Back then I was wrong, wingnut.

 

html buttons can indeed fly around. (with the help of jquery or css of course!)

 

Especially for a program interface. A game? Meh, possibly. But a interface? Ehhhhhhh naw.

 

I was also talking about a separate 2D canvas layer, which is 200% better than using babylon for interface

 

My editor (and most programs alike) is going to be used for hours on end as a developer makes their game, and is built to help the developer as much as possible. Imagine having photoshop and having dashboards flying around... not very professional.

 

Also... my editor's interface will be built in js. The js will generate the html needed. This will allow for dynamic code.

 

There's a reason this forum isn't built in babylon.js, my friend.

[Wingnut]

hehe.  You guys are fun to debate-with, and you make good points, but shut-up.    (just kidding about the shut-up)

 

Hey, the only reason why the entire web and most "pro" GUI's were done in 2D, is because 3D was slow at getting its speeds up to tolerable levels.  If given a choice right now, between browsing the web in 3D and browsing it flat... I'd take 3D in a heartbeat.  And there's really no reason why the GUI for my spreadsheet software or word processor... can't be floating on a plane beside my camera view... in my beautiful snowcapped-mountain Babylon scene... with the auto-tour feature engaged.  Nothing like a tour of Mount McKinley happening while I work on my pro-software packages on dashboards that float alongside me.  VR environments are great places to do serious work.

 

Flying over farm fields full of Google search results in my F-18 Hornet (links modeled as little barns or hay bales)... click on things with my sidewinder missiles... drilling into treeviews that are REALLY trees...  drilling into data mountains (websites) that visually really get drilled...  it's the wave of the future.  A wad of 2D text on a flat panel, or mountains/buildings with text written on the side... what's the difference?  3D is just a NEW way of visualizing things.  We aren't accustomed to it... YET.

 

Either one of you guys' editors... I would LOVE to operate from the cockpit of my Bell Jetranger helicopter.  All the controls are on the cockpit dashboard.  If I need to hide a dashboard/panel while I draw something in the scene, no problems... .visibility=0.  With 3D gui, there is no problems with focus, either.  You're always on the canvas, whether you are using a brush or looking through a list of text-labeled 3D boxnodes.  Navving the folders on your own computer?  No problems.  Just use an OS viewer that displays all those old-school 2D widgets... as 3D widgets instead.   MVC.  It allows the option to replace the (V)iewer... with anything, anytime, and many viewers all at the same time = a-ok.  Just different visual representations of the same data.

 

Tired of that annoying spreadsheet?  ApplyImpulse it into the Grand Canyon, and then drop the Eiffel Tower on top of it!  That will teach it not to aggravate you!    Work, becomes fun.  YAY!  Don't let others determine what is professional and appropriate, and what isn't.  Break free from stale, old-fashioned assumptions, expectations, weighings and judgements that have been imposed upon you by others.  It's a new world.

 

Okay okay, I'll quit holding the hardline, now, but... gui via helicopter dashboards... is not that far away.  Think about this.  Will your babylon scene have a VR computer in it that you can browse 2D websites upon?  Why not, right?  Why not allow the reading of ANY text... while in a virtual reality environment?  Why not run Blender... on that VR computer in your scene?

 

We're on our way to 3D everything, guys.  (because 3D/VR is a SO much more enjoyable of an enviroment to work-in, than 2D)  It's just a mattter of time before we convert (represent) the entire web... to/in 3D.  GUI's in "pro" software... will follow.  CSS for 3D?  No problem.  Just add the padding-front/back and margin-front/back rules.    (ok, maybe it would be a LITTLE more complicated than that).

 

It's coming.  Will Samac be THAT future-looking?  ahem. 

[jerome]

+1

that's the reason why I personaly intend to recode some sysadmin or management obese boring softwares to dynamic animated light 3D tools

[jerome]

yep

 

imagine your file browser/explorer in 3D : home folder could a virtual house, pictures displayer could be 3D libraries, etc

your IDE in 3D : lateral panels could be in z-depth instead of usind so much space on your screen, there could be nice 3D transition between code editor, render display, log console at various level

etc etc

[joshcamas]

._. but imagine running a professional program that way.

Such programs need to be as lightweight as possible, less "fluffy" and more "solid", and fast to work with.

 

This of course is just my opinion, but yeah. xD

 

Running entire software on a 3D platform just for a fancy effect seems a bit overkill; maybe using some sort of css3 effect would work better?

[jerome]

arf, do you really think professional softwares are lightweight ???

I deploy everyday professional softs and platforms, you know. When a soft has a web browser for client with no other client-side dependency (jvm version, dll, etc) we already consider we have the best fortune ever :-) and we won't find lighter than this.

 

I agree it's very costly to develop a full 3D soft compared to a simple full html/css webapp. So 3D maybe should bring something more than only fancy effects in terms of ergonomy, readility, accessibility.

[Dad72]

I'm not sure the current users of the web is truly ready to use interfaces in 3D.

That is the question ... There are still many people who think the 3D browser-you need a plugin, or that it is not at point/good and full of other stuff that people do not know.

Therefore, to whom it is addressed? that the developer who will like this idea, but if no one likes the idea, it is useless.

For my part, I think it can be very confusing and even superfluous.

[joshcamas]

@jerome Sorry I meant as lightweight as possible, and adding 3D is kinda a clunky way of doing it imo

 

And I agree with you @dad72

[jerome]

arf, I think exactly the contrary ;-)

but it's only my opinion based on my old age and experience as I started playing with computers in 1981 (Jurassic era, I know).

 

I remember when :

 

- wysiwyg softs spawned : "users are used to control characters in their texts, they won't adopt this"

- first windowed systems spawned : "users are not ready to deal with many windows, too much information on the screen : productivity will decrease"

- copy/cut thru different softs : "they will be so confused : copying a text from the word processor to the spreadsheet software ! what for ???"

- mice : "they will have to get their hands off the keyboard to the mouse, then back to the keyboard : surely impossible in a work context !"

- graphic desktops for sysadmins : " you'll never get the power of terminal green command line in a graphic environment : just impossible."

- multimedia supports : "nice for fun and games, but what utility for all those sounds, animations, movies  at work ?"

...

long long list

 

Everything starts with a new concept, then an innovating implementation, then fancy fun things (sometimes useless, I agree) to show the full capacaties of this implementation

and then someone (a good hazardous attempt) creates the new tool which becomes monthes or years after de facto a new indispensable standard.

 

Currently movie films are 3D, video games are 3D, printers are 3D, medical imagery is 3D, architecture is 3D, ...

I'm no prophet but I guess desktop computer environments are to become 3D, the Web and browsers too (why would the W3C have work so much in HTML5 API on webgl, CSS3, etc ?)

Let's give a try !

 

Maybe I'm wrong but I agree with my Cretaceous colleague Wingnut :-)

 

Wealth comes from many different opinions, doesn't it ?

[Temechon]

 

 

Cretaceous colleague Wingnut :-)

 

Poor Wingy 

[Dad72]

Yes, I have known Windows 95 and earlier on something that almost time for another life for me.

 

I agree that the future going to 3D, but having too much advance, gives failure/echec, we must arrive at the right time. 3D started to go home users, but we do sum at the beginning, you have I think gradually bring 3D.

 

But I agree, it is the current future, when one sees the occulus, 3d glasses google, 3d printer, so the future going to 3D, but transform the web 100% in 3d I think you have to wait 10 years and again, will say to everyone to wear 3D glasses also to see the picture, table, form in relief, it is 5 minutes, but you get quickly tired.

[Wingnut]

See, Jerome understands.    Thanks for the backing, J-man, and thanks for the excellent ribbons, too!  VERY cool!   NO, readers, I'm not kissing his butt because he agrees with me. 

 

Dad72... we're hoping that it won't take much "converting" to make the web be 3D.  It just takes a different graphical rendering (view) of the same webpages that currently exist.  We could get started right now ... by (un)simply making a webGL scene from the DOM tree of any HTML document.  Standardization probably won't happen very soon, and yay for that.

 

Some will make an island when they see a BODY element.  Some will make a pizza crust.  Some will make a skyskraper.  When a parsee sees a DIV element, some will make a island hut, some will make a piece of pepperoni, some will make a new floor to the skyskraper.  We would be adjusting the 'view' of the webpage, but we won't have to change the document at all.  No converting, just interpreting (maybe). 

 

And the best part?  We don't lose the 2D view of the web by allowing a 3D view.  Both systems work fine and can't hurt each other.  The different views are not competing with one another.  They are viewing options which augment each other.

 

Yuh yuh yuh, geriatric souls like Jerome and I... saw this excitement happen once before... in the VRML days.  We looked at the "VR" part and said "I have a dream!" and then the public let it die for 20 years.  (sniff)  Not enough computing power and bad PR and annoying plugins and unix/linux dragging butt on getting tolerable graphics AT ALL. 

 

As soon as we get the Babylon.js 2.0 boat pushed away from the dock, I hear rumor that the framework authors are going to start WebGL Markup Language 1.0!   Yet another XML.  After that, we can XSL transform html into WGLML on the fly, and start showing webpages as babylon scenes.  YAY!  (Someone yells "But WHY?" from the back of the room.)  heh

 

Ok, I'm talking out my butt... but... hmmm.    Fun debate.  There's good points and merits in all directions, and since showing webpages in 3D... doesn't stand in the way of 2D web... we can have it all.  It's not a 'this' OR 'that' thing.  We can have both, and many more ways to visualize.  We have standardized the markup of HTML.  We have fast parsers.  Now it's time to play with the myriad of ways to "interpret" that parsed data.  Wide open prairies and plains ahead, gang.

 

Speaking of webGL gui...  http://www.zephyrosanemos.com/windstorm/current/live-demo.html  - phew.  Somebody has devoted a few hours there, huh?  Party on!  Josh, you still alive?  Do you still remember what this thread is about?    I forgot.

[jerome]

and NO, readers, I'm not loving he kisses my butt because he agrees with me...

 

I always love to have my butt kissed, even if we disagree !

[joshcamas]

wow wingnut! That's a really cool link!

The linky seems to use tiles in the same way I'm doing it Yayyy I must be doing it right I hope

[Dad72]

My opinions are not for beings agree with you. but what I think. 3D is the future => ok, I do not need you to understand that. And 3D interface web => there is a sweet dream.

roach this forum with a good atmosphere. keep your enthusiasm for you. Do not think that everyone you licks ass because he agrees with you. You are not the center of world.

One can agree with some points, but not sure about other, it is not one histoir of you ass licking. 

[jerome]

hey Dad72,

those are only jokes ...

 

sometimes they don't look the right way thru writtings, sorry if it hurted you, that wasn't the intention

 

and ok, as you're asking, I change my point of view ...

from :

var camera = new BABYLON.ArcRotateCamera("Camera", 0 ,0, 30, new BABYLON.Vector3(jerome.x, jerome.y, jerome.z), scene);

 

to :

var camera = new BABYLON.ArcRotateCamera("Camera", 0 ,0, 30, BABYLON.Vector3.Zero(), scene);

 

:D

[Dad72]

A joke can crude (A parenthesis would not have been too), but either.

Oh and had not seen that phrase Wingnut just saying the same joke. 

Wingnut is someone who likes congratulated WORKED of others. He is a grateful. And the joke I'm going to say it's not for polished his shoes that I said that. but we like our friend Wingnut with lots of great histoir to write (he enjoys writing)

[jerome]

(sorry, my keyboard has got no parenthesis)