New UI/screen for KmotionCNC

[curtiskelowna]

Hoping to get some feedback on a custom screen I created for KmotionCNC. I started this as a way to see if I could make a dark mode/screen, as well as improve the overall look and clarity of the software. This was an earlier dark mode background that i was working with:

untitled.43.png (3.37 MiB) Viewed 15286 times

ui.49.png (1.03 MiB) Viewed 15286 times

I think it would be sweet to develop that concept further, the main roadblock I ran into was completing the dark mode look for things like checkboxes, radio button, scrollbars etc. I was able to create a custom lexer for dark mode coloring and recomplile the scintilla editor (and KmotionCNC). Also made changes to the source for the gviewer to better fit a dark look.

I made a big effort to be able to "skin" or assign images to checkboxes/radio buttons, mainly by attempting to convert them to buttons/autoradiobuttons etc but I was not successful. Mainly I was trying to create "chrome style" tabs instead of radio buttons for selecting which gcode file is selected in the editor. And toggle(image)button functionality for things like mm/inch selection. Im sure it is very possible, just still learning on my end Perhaps Tom could suggest a wise way to accomplish this. (finding it hard when the other code sections rely on radio/checkbox functionality, an issue with my skills for sure). creating new (dark) scrollbars for the editor is also far beyond my current ability. I also tried making KmotionCNC use windows dark mode in the manifest file but was unsuccessful.

regardless, I am fairly happy with the light grey version shown in the first pic, just wondering if I could get some community feedback on the general look and feel. The entire UI was created using a Solidworks 3D modelling process and then photo rendered with different materials/lighting etc. Icons were derived from these same renderings to give a realistic feel. Took some inspiration from DJ/music creation equipment

Definitely has been a fun, educating experience, working on updating to the latest kmotioncnc and posting something people can try out. As it stands, everything is working with 5.34, just not with a complete dark mode/screen. Some things will probably be broken with the latest Gviewer upgrades but who knows.

Any creative job openings at Dynomotion Tom?

attached is a dump of the icons i built for this project, as well as some other backgrounds I made along the way.

-Curtis

[TomKerekes]

Hi Curtis.

Hoping to get some feedback on a custom screen I created for KmotionCNC. I started this as a way to see if I could make a dark mode/screen, as well as improve the overall look and clarity of the software.

Very impressive. I like it.

the main roadblock I ran into was completing the dark mode look for things like checkboxes, radio button, scrollbars etc.

We may look into how difficult it would be to support.

I was able to create a custom lexer for dark mode coloring and recomplile the scintilla editor (and KmotionCNC). Also made changes to the source for the gviewer to better fit a dark look.

Please post your changes. Do you think it would be difficult to use the Screen Script Dlg Control's Background color?

I am fairly happy with the light grey version shown in the first pic

I like it. Much clearer than the default.

Any creative job openings at Dynomotion Tom?

Well... If you post all your changes we can offer a free board of your choice. Contact support with your address.

Thanks

[curtiskelowna]

Hi Tom, thanks for the kind words, I will definitely post an update with something you and others can try out ASAP.

I chose a resolution (I think), of 1080 tall by 1600 wide. Rationale was that most people have at least a 1920x1080 monitor. I need to update to closer to 1000 pixel tall since taskbar etc takes up some space on 1080 monitors. i could fill out the width, but i figure leave some space for another window beside. Let me know if you have a more ideal resolution in mind.

I will post 2 versions, a 3 axis and a 4 axis. I think I will switch back to the white editor since it fits the lighter theme and wont require any source code changes for users to try it out.

Also will make the gviewer slightly less tall (less rectangular) so its a little more general. My machine has a 24"X48" work area, thats why I had chose this shape. Users would need to mod the source to get the black background, unless you want to link that to the screen editor perhaps.

Beyond that, there would not be too many source code changes. Main ones I can remember were:

-DRO background colors

-viewer background (I also rotated the viewer to better match my machine, but most people would not)

-button highlight scheme (needed to adjust how the alpha was changed and remove the blue tinting, since it made certain images look blotchy on hover) (u can see if u take one of my icons and apply to a button with stock kmotioncnc)

I think the change was here:

// if hovering apply some effect
// Curtis - removed blue tint on hover for screen purpose
if (!DrawItDown && (Style != Undefined) && (Style != Label) && (Style != DualLabel) && (Style != DROLabel) && m_MouseOver)
{
for (int r = 0; r < bmpval.bmHeight; r++)
{
for (int c = 0; c < bmpval.bmWidth; c++)
{
int i = r * bmpval.bmWidthBytes + c * (bmpval.bmBitsPixel / 8);
int a = bits[i + 3];

bits = HoverEffect(bits);
bits[i + 1] = HoverEffect(bits[i + 1]);
bits[i + 2] = HoverEffect(bits[i + 2]);
}
}
}

-additionally, I changed some radio buttons and checkboxes to "button-like" (forgot to mention this before). Its a treated the same as a radio but with a button look. Things like mm/in or rel/abs i switched to that BUT those type of buttons are not able to be re-colored or use images or even change their font, at least not without source mods to link to the editor. would be awesome if there was a way to assign 2 images to a radio button or checkbox in the screen editor. not so easy with the 1-7 file selector radios because those also need to highlight or update their image when running

One big thing on my wishlist would be to improve the "multi screen" abilities of screens/editor. I like how you can create multiple screens and switch between them like the split editor examples. It is only unsavory because of the slight delay and redraw but otherwise works well. For example, the jog area could hold multiple pages, one for jog buttons, another for probe, diagnostic etc but I am hesitant to implement that if it needs to redraw the entire window each time. Any ideas? Im guessing this functionality would take a bit of work, but maybe there is just a simple way to have the switch feel faster/smoother

[curtiskelowna]

Hi Tom,

I am almost done the new layout, switched to a new resolution of approx 1000 *1200 so that the layout fits well on 1080 resolutions with room to spare on the screen for Kmotion Console, file explorer etc. Tried to take inspiration from real life CNC operator interfaces. I think I like the stacked editor and Sim, but they could easily go beside each other with a more "fullscreen" version (closer to 1920 wide)

This is what happens when engineering meets UI design

Let me know if you have any feedback, shouldn't take me long to update the icons and post the screen. (both 3 axis and 4 axis). Thinking of doing a couple color accent options, definitely need a Canada theme