Blog post on https://folivora.ai from Sat, 14 April 2018 10:59:49 +0000
This is a companion discussion topic for the original entry at https://folivora.ai/blog/post/13000
this is a test. Lets see if it works.
i really like this floating menu and the potential it has for improving productivity. I use a Griffin PowerMate dial device to navigate around certain apps and can trigger the menu with it which is fun BUT i'd love to be able to also navigate through the options and then select one all with the Griffin. This would effectively mimic Microsoft's dial functionality (sans the screen placement of course)
To achieve this it would require a way to highlight each item in the floating menu not using the cursor or mouse and then select the item through keyboard commands which the dial can be mapped too. -So i imagine arrow keys would map nicely, each press moving clockwise or anti-clockwise around the items, then a second press on the griffin mapped to the same action that launches the floating menu to select an option (rather than making the menu disappear with the same keyboard command.
Would this be possible with this code (im not a coder myself so haven't divided into the code).
Yes, I'll extend the example soon to make it controllable via Keyboard keys, that should be easy.
1 Like
Thank you for highlighting the power of the Floating Menu! Absolutely loving this feature.
I used this radial menu as a starting basis, combining with the example index.html provided in this post. I also implemented the newest Font Awesome CSS to apply some more icons.
Here is the modified index.html for the Radial Menu, you'll need the supporting directories from the codepen above as well:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Radial / Circular Menu Concept</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css'>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
setTimeout(() => {
document.getElementById("menu-toggler").checked = true;
}, 0);
}
function BTTWillCloseWindow() {
// this function is called everytime you close the menu
document.getElementById("menu-toggler").checked = false;
}
</script>
</head>
<body>
<div class="radial-menu">
<label for='menu-toggler'></label> -->
<ul class="radial-menu__menu-list" >
<!-- First: Jira -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fa fa-bug"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Open Jira
</h6>
<p class="radial-menu__menu-content-description">
Open Jira
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action2&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<!-- Second: Firefox -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fab fa-firefox"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Firefox
</h6>
<p class="radial-menu__menu-content-description">
Open Firefox
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action5&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<!-- Play/Pause -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fas fa-pause"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Play/Pause
</h6>
<p class="radial-menu__menu-content-description">
Start playing or pause music.
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action3&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<!-- Signal Messaging -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fas fa-comments"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Signal Messaging
</h6>
<p class="radial-menu__menu-content-description">
Open Signal Messaging
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Signal&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="far fa-bell"></i>
</span>
</div>
<!-- Do not Distrub -->
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Do Not Disturb
</h6>
<p class="radial-menu__menu-content-description">
Toggle Do Not Disturb
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action4&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fas fa-eject"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Eject Drives
</h6>
<p class="radial-menu__menu-content-description">
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action7&closeFloatingHTMLMenu=1" class="radial-menu__menu-link" class="radial-menu__menu-link"></a>
</li>
<!-- Restart Typinator -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fab fa-mandalorian"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Restart Typinator
</h6>
<p class="radial-menu__menu-content-description">
Restart Typinator
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=RestartTypinator&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<!-- Lock Screen -->
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fab fa-phoenix-squadron"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Lock Screen
</h6>
<p class="radial-menu__menu-content-description">
Lock Screen
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action8&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" aria-hidden="true">
<i class="fas fa-keyboard"></i>
</span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Type Clipbaord
</h6>
<p class="radial-menu__menu-content-description">
Type Clipbaord
</p>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Action6&closeFloatingHTMLMenu=1" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="camera-slr" title="Snagit" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Snagit
</h6>
<p class="radial-menu__menu-content-description">
Take a Screenshot
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item" style="display: none;">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="paperclip" title="Attach File" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Attach File
</h6>
<p class="radial-menu__menu-content-description">
Attach a file
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item" style="display: none;">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="code" title="Code" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Code
</h6>
<p class="radial-menu__menu-content-description">
Add some HTML
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item" style="display: none;">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="eyedropper" title="Font Color" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Font Color
</h6>
<p class="radial-menu__menu-content-description">
Set font color
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item" style="display: none;">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="droplet" title="Highlight Color" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
Highlight Color
</h6>
<p class="radial-menu__menu-content-description">
Set font color
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
<li class="radial-menu__menu-item" style="display: none;">
<div class="radial-menu__menu-link-bg"></div>
<div class="radial-menu__menu-icon">
<span class="oi" data-glyph="ellipses" title="More" aria-hidden="true"></span>
</div>
<div class="radial-menu__menu-content">
<div class="radial-menu__menu-content-wrapper">
<h6 class="radial-menu__menu-content-title">
More
</h6>
<p class="radial-menu__menu-content-description">
Add more things
</p>
</div>
</div>
<a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>
</ul>
<div class="radial-menu__label" >
MENU
</div>
</div>
<p class="right-click-prompt__label">
Right click and drag
</p>
</div> -->
<script src="js/index.js"></script>
</body>
</html>This looks really nice! Would you maybe want to create a new post for this in the "Preset Share" section? I think many people would like to use this.
Thanks! Added it to that section here.
Didn't realize that the community had so many resources! Super excited to dive in and learn from others. Thank you for the wonderful BTT and this community!
1 Like
Wow!
Need to play around with this. My Magic Trackpad 2 will be arriving next week - and this looks like the perfect macro to set up for it!