HTML in S&Box

Hello.

I’d just like to receive information regarding how HTML will be used for creating and designing HUDs etc. In what situations will you be able to use HTML (& CSS) in S&Box?

1 Like

That’s all that we know now, and it’s XML not HTML

1 Like

I see, thanks.

1 Like

Looks like HTML being called with C# to me

2 Likes

Thats not html, that’s still panorama / XML. What garry meant about not using XML is that we will define the code you posted from C#. The XML part is removed since then.

4 Likes

I’m no expert and it may not be HTML but I think HTML/CSS experience will help for sure

2 Likes

i think s&box ll use something like CEF

1 Like

For those uninitiated, HTML is a derivative version of XML, which came first. If you know HTML, then you effectively know XML.
XML will be the schema/framework for UI content, but the design can still be done with a combination of CSS, JS & also C# method bindings.

2 Likes

No. JS is completely removed and Garry said he wants to get rid of the XML part as well

1 Like

The one thing I love in gmod with CEF is that you can design universal UI components that will look and function the same way on both your server and your website if you want.

I was working on a web-based inventory system for gmod, I developed and tested it using webpack, react, redux and all that fancy shit, testing it in my browser and deployed it into the game.

In theory I could easilly allow players to manage their inventory via a web browser outside gmod and it would look and function the same. Such compatibility gives you power to implement wonderful seamless web integration.

I am really afraid that we won’t be able to achieve this with Panorama and C# only sice those aren’t compatible with web browsers, but we’ll see.

1 Like

Garry’s experimenting with UI now, so expect some news or wiki updates on it soon/in the next devblog

1 Like

Where did he say that?
Removing JS completely defeats the purpose of using a web framework for the UI.

Same thing for XML; you can’t make a web UI without a scaffolding, so what would be in its place? A proprietary system like Derma? That makes zero sense.

1 Like

Why are using a Web framework for a Game UI? IMO that seems kind of dumb for a regular application it makes sense but I do not understand it. BTW Panorama IS proprietary.

1 Like

I don’t really agree with this. We’ve already got a base programming language used for everything else, adding an entire language just for the UI portion seems quite stupid. You don’t need to only use js for UI design, it’s used on the web everywhere since that is what browsers support executing.

One thing that is set regardless to the two option garry might take (panorama, or custom) is that we’ll likely be using css for styling, which is very powerful and can easily handle all the animations you’ll ever want to implement. It’s really easy to use, and has a simple and powerful design. (And is also most likely the main reason why people think desktop web applications are even a remotely good idea)

Garry seems to not want you to mess around with xml for something you can just handle in a class, so I suppose that might be their reason to avoid it.

In the end, we’ll still be having something similar to a framework skinned with css, with c# as the behaviour layer.

1 Like

image

image
image

S&box is not based on HTML and never was after moving to Source 2. The UE version was using vue.js. Regardless of if they use XML or JavaScript or not, you can not utilize the HTML ecosystem. Panorama is not and never was HTML.

Panorama uses CSS that is somewhat similar to the CSS you are used to from web development. I don’t know if there are limitations or differences. garry has implied that S&box will also keep the CSS part of panorama.

Here is some code from CS:GO showing how easy and powerful it is:

.chat-entry Label
{
    animation-name: chat-new-entry;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}
@keyframes 'chat-new-entry'
{
    0%
    {
        transform: translateX(-100%);
        brightness: 10;
    }

    80%
    {
        brightness: 10;
    }

    100%
    {
        brightness: 1;
        transform: translateX(0%);
    }
}
1 Like

I never said it was.

I was unaware this was no longer the case. Thanks for updating me.

So pretty much all UI will be designed with CSS, with C# providing the scaffolding/panel layout?

The wiki page is not showing that yet, so i guess it would be best to wait a while and see what Garry decides is the best route to take, instead of speculating.

1 Like