UI Palette Suggestion

shirazigs · May 30, 2019, 2:28am

As long as we go forward using this amazing application we make more and more macros and palettes to make our tasks easier. As a UX Designer, I'd like to help to fix some UI designs, so users can enjoy more using this application.
This is the first pallet that I worked on and I'd like to work on other pallets. I changed the font style and the size of the font. I removed the KM icon form the top and shifted palette name to the left. Also, I added more gaps to the top and bottom of the window to make it more legible.

Please let me know what you think about this UI.

peternlewis · May 30, 2019, 3:30am

There are some good ideas in there. I will take a look at them, but not necessarily in the short term as I am trying to finish up the next version.

appleianer · May 30, 2019, 8:08am

There is a... "yes, I want to have" @shirazigs

peternlewis · June 4, 2019, 7:34am

I have de-bolded the palette text (except the title) and added a little more space.

shirazigs · June 5, 2019, 3:11am

Thanks, Peter! I can't wait to see and use the changes in my palettes.

I'd like to show you another idea that you might like.
At times we'd love to have big icons on our palettes with very small text like the text we have under OS folders and apps. With this new style, we can save more space on our screen while we have big icons.

Please let me know what you think about this.

peternlewis · June 5, 2019, 3:34am

Not any time soon I'm afraid.

appleianer · June 5, 2019, 6:50am

Fortunately Keyboard Maestro leaves us a lot of room @shirazigs. I like to design my palettes without text and create meaningful icons that refer to the app and the function contained in the macro (here screenshots with Yoink for Mac).

With a lot of help from @GrandmasterHH I am trying to create a CSS Circle.
The eye also works a little bit daily with

The view of the icons in the palettes I deliberately chose to be so small.

shirazigs · June 5, 2019, 9:19am

Nice. Good job man! I like the circle palette you created. How long does that take to make one?

appleianer · June 5, 2019, 9:47am

Thanks @shirazigs for your request.

I have no knowledge of CSS or HTML. Thanks to the help of @GrandmasterHH I was able to create the circle shown in the gif.

The circle is a template I downloaded from this website. So that I can execute macros in KM, I use the floating HTML action of BetterTouchTool. A more detailed description can be found in this blog entry.

As already mentioned, I don't know how to deviate from the template and how to use my own icons (like in the gif) instead of the prefabricated items in the buttons. You'd have to rewrite or re-create some things for that.
Maybe you can find someone in the forum who can do that.

If you are interested, I can send you the folder to the template with pleasure.

GrandmasterHH · June 5, 2019, 7:16pm

Own icons in the circle palette would be a dream. Is there a HTML/CSS Guru here?

mrpasini · June 5, 2019, 10:07pm

According to that blog entry above:

This example uses icons from Font Awesome. You can easily change the icons by renaming them in the HTML. You can find the appropriate names on the font-awesoem website.

So if you pop over to Font Awesome and see something you like, you should just be able to change the reference in the HTML from:

<i class="fa fa-clock"></i>

to what you saw that you liked:

<i class="fa fa-allergies"></i>

because the header seems to include access to all of those icons:

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+"  crossorigin="anonymous"></script>
<script>

You don't need to use the icons, though. You can use letters, for example:

<a href="#" class="menu-item lightblue">Pre</a>

which will put "Pre" in the lightblue circle. Presumably you could use the image tab (<img src="">) to use an image of your own in the circle.

Hope that helps.

GrandmasterHH · June 7, 2019, 11:14am

You are for me (and also for @appleianer) simply the greatest godfather of HTML/CSS. A thousand thanks for your commitment, we appreciate that very much.

appleianer · June 8, 2019, 7:48pm

I want to thank @BernSh for the idea to call macros with a radial menu,
At @GrandmasterHH for several hours of intensive work on the CSS HTML file and a special thank you goes to @shirazigs & @mrpasini, without whose help, the floating HTML action from BetterTouchTool would not work.

For the world's best togetherness in a forum I forgive

This is my dream team of (conflict) palette usage in Keyboard Maestro:

Thanks to BetterTouchTool, I don't use a shortcut to call it up, but only touch gestures

Julian_Steinmann · June 13, 2019, 7:22pm

@appleianer

Wow, that looks really cool.
Would be amazing if you could share your radial menu example that you created.

appleianer · June 13, 2019, 7:46pm

Direct message will be out in the next hour @Julian_Steinmann
Video instructions are also available.

lazlot · April 15, 2020, 10:31am

Could you please tell me where I can read instructions or obtain a sample presets file of your radial menu settings for BetterTouchTool?

appleianer · April 15, 2020, 10:49am

Hi @lazlot, I sent you a direct message.

lazlot · April 15, 2020, 10:52am

Thank you Appleianer. Sadly the link no longer works.

BernSh · April 15, 2021, 11:46am

Here’s taking it up another notch with a floating menu that follows the cursor and after a bit, closes, dims, and shadows the cursor to remain available for reactivation with a gesture. http://www.htmldrive.net/items/demo/806/Cursor-following-translucent-float-menu-jQuery-CSS3

Click on the dimmed menu button in the upper left quadrant to activate the demo.

UI Palette Suggestion

Options