Possible UI snazziness?

[Orphansmith]

I'm a graphic designer with minimal UX skills, and even worse HTML/CSS/JS skills (that leave my brain the moment I stop coding).

This is probably presumptuous, but I put together a mockup of an updated UI. Feel free to ignore if it goes against your planning, or if you want I can give you the source files to implement the assets yourself.

I do realize that the system is still being built up, and visuals are the last thing on your mind. I'm just kinda bored.

BEFORE

AFTER

LIGHT MODE (AFTER)

ADDITIONAL NOTES

[morgurth]

I like it. But, what kind of performance hit would this potentially have? I'm running Foundry VTT on a micro VM on Google Cloud for experiments and it is already telling me I should probably upgrade to the next higher tier VM.

[Orphansmith]

It depends on how it's setup, but the performance hit ideally would be low. All of the icons are SVGs, and instead of several JPGs you only need one raster image for the background that's reflected several times.

If you can run the Coriolis System in FVTT you shouldn't have problems here.

[NiceTSY]

I do like this design to be honest and I really hope Solar could include it, maybe as a secondary UI inside the system option. In the main time, if you want to send me the UI I will gladly test it on different systems to see its performance hit :)

[Orphansmith]

Sure, I'm at work so I threw everything together in a Drive folder quickly, https://drive.google.com/drive/folders/1mQkpV6s07pqGxwnKtTs99mUNsQ-vd-gA?usp=sharing

I can remove individual pieces like the skill icons if you don't have Photoshop later.

[NiceTSY]

Many thanks, ^^

But either I am a total moron or something is not right. I mean you only put the files for the presentation, that is not something I can use and test for performance ^^ I can try to redo a more or less UI looking like yours, but it will definitely not look like yours as I am not a UX designer and will probably never be one. Otherwise, you can safely send me publicly or privately the files so I can test them on different systems (Windows, Linux, and Mac, self-hosted and on VM or dedicated VPS). But I will totally understand you want to keep them until Solar contact you :)

[Orphansmith]

Ah, yeah I only mocked these up in PS, I didn't actually put them together.

If you want to stress-test it you don't need to re-create everything I did. Just create a basic Actor page in foundry and call the items in the resources folder. I've renamed them so they're easier to call. They're also super rough and still have the CC details, but that shouldn't matter since you're only stress testing it. The bg.jpg is also super un-optimized so you'll get a good idea of how things perform if nothing is done to make the elements behave nice for the web.

[NiceTSY]

Alright, will try them like this :) Will give you feedback in a few minutes

[mparker546]

Some customization/modularity would need to be built in, as the intent is to cover more of the CypherSystem than Numenera. I think SolarBear has mentioned in the past that they could use assistance with UI, HTML, CSS. I know I'm not any help in that area.

For example, The current implementation of The Strange adds a Tab. Modularity for other CypherSystem settings would need to be considered.

[Orphansmith]

I see. Well, the menubar isn't a graphic, it's simple text. So any amount of information can be added or removed.

An updated menubar for The Strange might look like this,

To get this effect, in the CSS you just define the menubar text to be height 32pt, and create a class for selected and unselected text (maybe even a hover effect). It's literally as simple as using the definitions that are already there.

As for other Cypher systems, I'm only familiar with the base system, Numenera, and Predation, but in general they don't have more than skills, abilities, cyphers, non-cypher gear, and perhaps a section for notes.

[SolarBear]

Hello @Orphansmith !

I just took a look at your mockup and, no, your offer is not presumptuous and pardon my French as it is my first language, but HOLY FUCKING SHITBALLS this would be amazing!

To be frank, "UI skinning" has been on my radar for quite some time but I'm a software engineer by trade: design (web or otherwise) is NOT my forte (surprised, huh?) so I've mostly stuck with low-level or desktop work and when I did do web jobs, I stuck to backends and the occasional Javascript shenanigans. I can barely CSS my way out of a wet paper bag, so the terrible UI you see there is pretty much the best I could manage without isolating myself at the top of a mountain for a few years. Mea maxima culpa.

So, yes, please do get in touch with me to discuss specifics as well as some help related to the current code base.

@morgurth raised a good point as to whether this could create performance problems: I doubt that would be the case but I've seen stranger things happen... In that case, we might need to offer this as an alternative sheet, a module or... well, we'll see.

[Orphansmith]

Cool, on vacation atm, but when I’m back at my desk next week I’ll reach out to you!

[NiceTSY]

So sorry for the time of this answer ^^" @Orphansmith I used your template you sent ahead to do a few tests (very scarce as I mostly made a workaround using your psd file and tweaked a few things to make it look and use as a character sheet), and that what I have for performance:

VM: Windows 10 - Virtual Box 6.1 | Host: old laptop running windows 10 - i5 3300 - 8 GB - no graphic card - HDD 5400 rpm VPS: Debian 10 - 2 vCores - 12 GB - no graphic card - SSD | Provider: OVH ; Model: VPS 2016 Cloud RAM 2 Self-hosted 1: Windows 10 - i7 4470 - NVidia GTX 1060 6 GB (stock) - SSD Self-hosted 2: iMac ME086 (2013) - CPU i7 3.1 GHz - 16 GB - GT 750M 1GB

100% corresponds to the normal use with the Numenera system, so no performance impact or boost

System / Host	VM	VPS	SH1	SH2
CPU usage	112%	102%	100%	105%
Ram usage	109%	97%*	101%	99%*

*Not sure how it can boost the performance there but apparently it does in my tests... ^^

So looking at it, apparently it will not impact that much the performance. @SolarBear I hope it will helps you switch to that UI rofl

[BiosElement]

Just tossing this out there as someone about to setup a FoundryVTT server and with no direct experience with it but having a background in moderate web-dev, assuming this styling is all client-side, there should be no performance hit whatsoever on the server once the files are transferred to clients. At that point the browsers will be caching everything and mostly just swapping variables back and forth, so you 'should' be perfectly fine performance wise unless there's something very unusual about how Foundry is setup.

Hope that is even remotely helpful and I'll be keeping an eye to see if I can be helpful with this effort. :)

[Orphansmith]

@NiceTSY Don't worry about it, just glad to see the numbers are about what I'd expect!

[NiceTSY]

@Orphansmith @BiosElement In fact, I even forgot to add the client-side of my work 🤣

The server was the VPS from before and the client the SH1.

100% corresponds to the normal use with the Numenera system, so no performance impact or boost

Connection:	System / Browser	Chrome	Firefox	Opera	Safari
CPU usage	115%	112%	123%	108%
Ram usage	142%	127%	113%	117%

After 30 sec:	System / Browser	Chrome	Firefox	Opera	Safari
CPU usage	101%	103%	105%	100%
Ram usage	103%	105%	107%	102%

So as @BiosElement said after the browser has cached everything the visual will definitely not impact the performance on the client-side either :)

[SolarBear]

That's good to know! Thank you for the benchmarking. This way, we can provide a much-needed layer of polish to the system while having little to no impact on our users. Onward!

[SolarBear]

Since @Orphansmith is currently working on this, I'll close the issue for now.