Continuing with posts on new features I've been adding in I just had another set of changes merged to be used in the event! (and they're active right now on the site! You can go in and check them out as well as the snapshot changes I talked about in my last post)

This set includes many new UI features as well as an overall UI overhaul. Previously the site was pretty much just using base HeroUI components that were slapped together quickly to get something functioning. Now everything is styled together and should match to each other well.

UI Visual Improvements!

The main part of the change is the change to make the ui look better. I went through and made all the components have a consistent style (with a white or black background depending on theme and an outline thats a bit different than the base color)

Better Color Picking!

You can now hit a physical button in the palette bar to color pick or you can hit c to enter color picking mode. Middle click will still work and pick the color you click but entering color picking mode using the button or c enters a brand new mode there you can preview the color youre about to pick and have special UI.

You cant see my cursor in the screenshot but in this I have it over the dark blue and you can see theres a little color preview that shows up saying the name of the color and the hex code.

If I then click it copies it as the current active color and has a little color picked text.

Symbols in the Palette Bar!

Theres a new setting that lets you show symbols in the palette bar that match up to the symbols in the symbols template style. This can help you know what matches up to what easier or if you just think it looks cool.

It will automatically be enabled when you swap the template to symbols mode (and the numbers will automatically be shown when you swap to numbers mode)

Color Tooltips!

When you hover over a color in the palette bar it will now give you the name of the color in a little tooltip to make discussion about the different colors easier since everyone can have consistent names for each of them.

Collapsible stats card!

You can now collapse the bottom left card that shows coordinates, pixels, and users online. Collapsing sets it to a mode where it only shows the pixels available to place if you want to save on some screen space.

Overlays Card!

Instead of needing to go into the settings to swap between overlays being on or not, theres a new overlays card that lets you toggle them on or off easily. To toggle them you can expand the card and then click on one of the overlays to enable it.

Hold to check pixel data

Instead of needing to shift click to open up whois data you can now instead just hold down on the pixel which will fill up a meter for a second and then once its full a question mark will appear. If you let go the whois panel will appear where you can check information on that pixel.

Moving Buttons when you open a Sidebar!

When you open a sidebar now (for example settings or info) the buttons will now move to the side with it so that you can still use them while the sidebar is open

I made it extremely smooth of a transition so enjoy playing around with that : )

Sticky Sidebar Headers

When you scroll in a sidebar the sidebar title and the close button now stay always at the top so that they are easily accessible.

Compact Palette!

You can now set the palette to be in a compact mode where colors go over two lines instead of 1. It automatically swaps to this by default when you open a sidebar and then back to normal when you close it but you can also set it so it doesnt swap to it or so that its always active.

Small Screen Handling

Instead of the mobile UI being extremely scuffed theres now handling to move the UI around so its usable! On smaller pc type screens and on mobile some buttons move into a "more" button according to how big the screen is so that it never collides with the ui on the left side

Palette bar manipulation based on the template!

Added the ability to show how many of each color you need remaining for the template you have set. e.g. with the below image the template needs 26 more black pixels and various other colors to be complete)

Allows you to set it so that the palette bar only shows colors in the palette that exist in the template and still need to be placed as well so make it easier to know which color to choose to fill it in.

Icon and Favicon

Added the official canvas icon to the top left and made it the favicon of the site instead of the site not having one! (more favicon updates coming soon to show things like pixel counts in it :) )

Various Other Changes!

Removed the black overlay that appeared when a sidebar was open so its easier to have a sidebar open and place on the canvas at the same time.

Added little text when you place a pixel

Added icons in various spots and to various buttons such as in the bottom left card

Prevented settings and whois from being open simultaneously because they are both right sidebars (opening one closes the other)

Various new settings added to do things like disable keybindings, etc.

Hope you enjoy the new features! More coming soon as I work through them and theres some large ones I'm looking forward to