UI Palette Suggestion

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.

2 Likes

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.

1 Like

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

1 Like

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

2 Likes

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

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.

Not any time soon I'm afraid.

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 :wink:

2019_06_05_Support_2

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

2 Likes

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

1 Like

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.

2 Likes

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

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.

3 Likes

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.

:pray: :star::star::star::star::star::star::star::star::pray:

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 :star::star::star::star:

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

2 Likes

@appleianer

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

1 Like

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

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

Hi @lazlot, I sent you a direct message.

Thank you Appleianer. Sadly the link no longer works.

1 Like

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.

1 Like