New BetterTouchTool UI Progress

Try replacing the triggers column (2nd from left) and having a back button at the top of the column?

A bit like tapping into a page in iOS (e.g. settings)



@Andreas_Hegenberg For some reason i've made some animated gesture 'stickers' if you want them.

I think a good way is to save these as image string assets (i dunno what they're called in dev) and programatically 'stick' them onto a trackpad/mouse image,

This works really well and imho makes the UI MUCH easier to understand. Combined with iOS style slide animations I like this a lot.
I think this pattern solves all the issues I was having with groups.

Thanks for the animations, adding some gesture visualizations is definitely on my TODO list.

1 Like

Great to hear that change is working!
One question though: Will it be hard to move triggers into the group with that change? especially dropping it into the right order..

Do you think the animations are clear and, well, good?

Tell me If you want to have those animations, I'll finish off the ones I haven't done (below) (might take some time) and export / send the after effects file for you:

  • Double Click
  • Resting Touch (for tiptaps)
  • Click-Swipe
  • Rotate

(did I miss any?)

Swipe gestures can be done by using the slide sticker and rotating it.

Yep, I'd like to integrate them! (However this might not be in the first "stable" version of the new UI - let's see. So no hurry!)

I usually note contributions like this in the about screen and link them to a website, so if you have some sort of portfolio website you'd like me to link let me know :slight_smile:

1 Like

Wow thanks!

I don't have one as of yet and it's on my mind to make one.. For now just link my profile page and maybe sometime in the future I'll link it up on there or message you to relink.

I'll find some time to make the extra stickers. Tell me if you have any feedback on the current ones, and if I missed any in my to-do list!

Will do, the one you posted look very nice. Question: which app are you using to create them? Can it maybe export SVG?

New alpha is out btw. (there will be one almost every day for the next two weeks I think :slight_smile:)
Today I added a collapsable app side-bar and sliding folder support, which opens on double-click. (And various fixes).

Oh man, while I was distracted with tax work this happened?!

Briefly tried it out, and I'm impressed. This is a huge step up. One major thing that feels like it's missing is multi-column view - the icon in the toolbar actually uses the multi-column view icon, but it only supports one column. I think it should be a true multi-column view so you can drag stuff in and out of groups easily. I'm not a fan of the needing an animation to go in and out of widget groups, and how do I drag items out of the group?

I'll wait till it's more finished to start pointing out more things. :slight_smile:

Cheers on the alpha release! :smile:

2 Likes

I think we all need get used to the iOS style animations on macOS. As soon as Marizpan is released in a few months tons of apps will have these :smiley: However I'll add various options to customize the UI and I'll add an option to disable these also I need to add gesture support to allow swiping the group view away again.

Dragging out will probably work like in Finder, I'll add that tomorrow (also I'm adding cut & paste like in Finder). You can even open multiple BTT windows if necessary :slight_smile: (which can be quite helpful)

The column view will be improved over time, it's now based on the latest UI technologies so I should be able to extend it easily, however I'm a bit limited by backwards compatibility with the old UI and datamodel. (Which I need to maintain for about a year because the new UI will require at least 10.13, maybe even 10.14).
Currently it's just a placeholder though - I'll add the basic functionality to the column view next week.

Btw. the columns icon is for the view with the 3-4 columns (apps | triggers | actions | configuration). The list icon is used for the old style column view.

1 Like

Question: how do I enable the new UI?
Either it's hidden somewhere or I'm completely blind... I'm using version 2.729 and I can't figure out how to toggle the new UI :sweat_smile:

EDIT: Don't worry, I found it (a button in the menu bar app!)

Thanks for the quiet feature!

For the stickers, I'm using after effects to make them. I don't think SVGs are a good idea as they might be hard on the system and.. well I've never heard of animated svgs.

Have a look at this?
ForceClick Sticker Sample.zip (10.1 KB)

It's a low-res, low-framerate test as to how to handle these things... I don't know if a HTML view is the best for this, maybe you could nativley code it somehow but it seems this technique is the best-practice go-to for many sites, and even macOS.


(ahhww I realised apple took of the little animations for checkboxes, radio buttons and the like... i'm sad about the loss of detail :slightly_frowning_face:... I can't unsee this now lol )

Nice, I'm impressed! Did some bug fixes and troubleshooting today in my preset, and the possibility to edit several items at once is pure gold!

What about a possibility to set different sizes (highs) for the lines?

Svg are just vector graphic descriptions, thus they can easily be rendered & animated & parametrizex & styled and are independent of the display density. :slight_smile:

I'm usually using this app to do this: https://www.paintcodeapp.com or using sketch & https://github.com/airbnb/lottie-ios/blob/master/README.md

I'll add support for different font styles per line soon

1 Like

Oh! thats interesting. I knew about vector graphics as I work with them a lot but I didn’t know they coupd be animated.

I was concerned at first though as I thought I had to remake them in another app, but what a pleasant surprise!

I searched for a solution which uses AfterEffects, and came across this article:

I read through it noting that he used a plugin called bodymovin, and found a link to download.

Well guess where that link ended up taking me

I’ll see what I can do!

1 Like

Lottie is awesome :wink: I think it was specifically created for After Effects vector animations.

Just rendered one and trying to get it to work in a simple html doc :wink:

This should work (expects the data.json in the same directory as the html file):

<html>
<head>
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
<script>

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})
</script>
</head>
<body>
<div id="lottie" style="height:200px; width:200px"><div>
</body>
</html>
1 Like

No luck :confused:

Could you have a look? I'm just doing this to check fi it's rendering correctly...

data.json (6.0 KB)

(you might need to change the backgoround color to black)

Ah the script source was wrong.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.4/lottie.min.js" type="text/javascript"></script>

</head>
<body>
<div id="lottie" style="height:200px; width:200px"><div>
	<script>

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})
</script>
</body>

</html>

However it only works when served from a web-server (I'm always using the http-server npm package for stuff like this https://www.npmjs.com/package/http-server)
Otherwise you'd need to put the JS file into the same directory as well