I'll give you some tips on how to make it working and more maintainable later today 
And happy holidays to you too, all!
1 Like
More progress on the UI 
Latest HTML:
<html>
<head>
<style>
body {
color: #fff;
padding: 16px;
font-family: "SF Pro Text", Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0 0 2px 0;
background: transparent;
background: rgba(55, 55, 55, .7);
-webkit-backdrop-filter: blur(20px) saturate(200%);
display: flex;
-webkit-user-select: none;
overflow: hidden;
}
/* Sidebar Styles */
.sidebar {
border-bottom-left-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-right: none;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
.tablink {
margin: 0 0 -1px 0;
padding: 16px 12px 16px 24px;
width: 204px;
position: relative;
}
.tablink::after {
content: " ";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background: rgba(255,255,255,.15);
}
.tablink.active {
background: rgba(255,255,255,.2);
}
.tablink:last-of-type {
position: absolute;
bottom: 0;
}
.tablink:last-of-type::after {
display: none;
}
/* Content Area Styles */
.content {
background: rgba(70, 68, 67, 1);
border-bottom-right-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-left: 1px solid rgba(3, 3, 3, 1);
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
.tabcontent {
padding-top: 66px;
display: none;
position: relative;
}
.tabcontent .active {
display: block;
}
.tabcontent ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 16px;
}
.tabcontent ul li {
padding: 8px 8px 8px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.tabcontent ul li img {
height: 36px;
float: left;
margin-right: 12px;
}
.tabcontent ul li a {
line-height: 36px;
color: #fff;
text-decoration: none;
}
header {
position: fixed;
top: 1px;
left: 242px;
right: 1px;
background: rgba(70, 68, 67, .7);
-webkit-backdrop-filter: blur(20px);
}
header h1 {
font-family: "SF Pro Display", Helvetica, sans-serif;
font-weight: 600;
margin: 0;
padding: 16px 17px;
}
section {
background: rgba(75, 74, 73, 1);
border: 1px solid rgba(95, 94, 93, 1);
border-radius: 4px;
padding: 16px;
margin: 0 16px 16px 16px;
}
section h3 {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
}
section h3:first-of-type {
margin-top: 0;
}
section a:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
section a:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
section a {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 15px;
background: rgba(118, 115, 114, 1);
margin: 0 0 1px -3px;
padding: 6px 8px;
}
section a:active {
background: rgba(128, 125, 124, 1);
}
section p {
margin: 12px 0;
}
section p:first-of-type {
margin-top: 0;
}
section p:last-of-type {
margin-bottom: 0;
}
/* Single Page Style Overrides */
#about {
margin-top: -64px;
}
#about a {
background: none;
display: inline;
font-size: 13px;
color: rgba(16, 133, 255, 1);
}
/* Toggle Switch Styles */
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
float: right;
margin-top: 5px;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: rgba(118, 115, 114, 1);
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: rgba(118, 115, 114, 1);
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
transform: translate3d(16px, 2px, 0);
}
.form-switch input {
display: none;
}
.form-switch input:checked + i {
background-color: #4BD763;
}
.form-switch input:checked + i::before {
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
transform: translate3d(22px, 2px, 0);
}
</style>
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
}
// this function is called everytime you close the menu
function BTTWillCloseWindow() {
}
</script>
</head>
<body>
<div class="sidebar">
<ul>
<li class="tablink" onclick="openTab(event, 'general')">General</li>
<li class="tablink" onclick="openTab(event, 'home-strip')">Home Strip</li>
<li class="tablink" onclick="openTab(event, 'menu-bar')">Menu Bar</li>
<li id="default" class="tablink" onclick="openTab(event, 'dock-badges')">Dock Badges</li>
<li class="tablink" onclick="openTab(event, 'about')">About GoldenChaos-BTT</li>
</ul>
</div>
<div class="content">
<div class="content-inner">
<div id="general" class="tabcontent">
<header>
<h1>GoldenChaos-BTT Settings</h1>
</header>
<section>
<h3>Presets</h3>
<a href="btt://trigger_named/?trigger_name=Default Settings">Default</a>
<a href="btt://trigger_named/?trigger_name=GC's GC-BTT">GC'S GC-BTT</a><br />
</section>
<section>
<h3>Escape Key Style</h3>
<a href="btt://trigger_named/?trigger_name=Use Combo Esc Key" class="window.BTT.callback('escKeyStyle')">Combo</a>
<a href="btt://trigger_named/?trigger_name=Use Normal Esc Key">Normal</a>
</section>
<section>
<h3>Calendar App</h3>
<a href="btt://trigger_named/?trigger_name=Use Fantastical">Fantastical</a>
<a href="btt://trigger_named/?trigger_name=Use Apple Calendar">Apple Calendar</a>
</section>
<a href="btt://trigger_named/?trigger_name=Check All Settings" style="background:rgba(67, 126, 163, 1);display:block;text-align:center;border-radius:4px;margin: 0 16px;">Reapply All Settings</a>
</div>
<div id="home-strip" class="tabcontent">
<header>
<h1>Home Strip</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Back/Forward Keys">Back/Forward</a>
<a href="btt://trigger_named/?trigger_name=Toggle Refresh Key">Refresh</a>
<a href="btt://trigger_named/?trigger_name=Toggle New Tab Key">New Tab</a>
</section>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h1>Menu Bar</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Collapse Menu Bar">Collapse Menu Bar</a>
<a href="btt://trigger_named/?trigger_name=Toggle GC-BTT Settings">GC-BTT Settings</a>
<a href="btt://trigger_named/?trigger_name=Toggle Browser Tabs">Browser Tabs</a>
<a href="btt://trigger_named/?trigger_name=Toggle Emoji Picker">Emoji</a>
<a href="btt://trigger_named/?trigger_name=Toggle Current Language">Language</a>
<a href="btt://trigger_named/?trigger_name=Toggle App Switcher">App Switcher</a>
<a href="btt://trigger_named/?trigger_name=Toggle Caffeinate">Caffeinate</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Gamepad">Gamepad</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Airpods">AirPods</a>
<a href="btt://trigger_named/?trigger_name=Toggle Bluetooth Toggle">Bluetooth</a>
<a href="btt://trigger_named/?trigger_name=Toggle Wi-Fi Toggle">Wi-Fi</a>
<a href="btt://trigger_named/?trigger_name=Toggle Microphone Mute">Microphone Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Mute">Volume Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Down">Volume Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Up">Volume Up</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Down">Brightness Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Up">Brightness Up</a>
</section>
<section>
<h3>Date Format</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Date/Time Format">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Use Large Date/Time Format">Large</a>
<a href="btt://trigger_named/?trigger_name=Use Medium Date/Time Format">Medium</a>
<a href="btt://trigger_named/?trigger_name=Use Small Date/Time Format">Small</a>
</section>
<section>
<h3>Time Format</h3>
<a href="btt://trigger_named/?trigger_name=Use 12-Hour Time">12-Hour</a>
<a href="btt://trigger_named/?trigger_name=Use 24-Hour Time">24-Hour</a>
</section>
<section>
<h3>Weather</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Weather Widget">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Weather Widget">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Weather Widget">Never</a>
</section>
<section>
<h3>Spotlight Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Spotlight Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Spotlight Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Spotlight Key">Never</a>
</section>
<section>
<h3>Siri Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Siri Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Siri Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Siri Key">Never</a>
</section>
<section>
<h3>Notification Center Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Notification Center Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Notification Center Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Notification Center Key">Never</a>
</section>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h1>Dock Badges</h1>
</header>
<ul>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Badge">Safari</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari Technology Preview.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Preview Badge">Safari Preview</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Google Chrome Badge">Google Chrome</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chrome Canary Badge">Chrome Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Firefox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Firefox Badge">Firefox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/FaceTime.png" />
<a href="btt://trigger_named/?trigger_name=Toggle FaceTime Badge">FaceTime</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Messages.png" />
<a href="btt://trigger_named/?trigger_name=Toggle iMessage Badge">iMessage</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/WhatsApp.png" />
<a href="btt://trigger_named/?trigger_name=Toggle WhatsApp Badge">WhatsApp</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Telegram.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Telegram Badge">Telegram</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Franz.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Franz Badge">Franz</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Badge">Skype</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype for Business.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Business Badge">Skype Business</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/YakYak.png" />
<a href="btt://trigger_named/?trigger_name=Toggle YakYak Badge">YakYak</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Chatty.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chatty Badge">Chatty</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Caprine.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Caprine Badge">Caprine</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Goofy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Goofy Badge">Goofy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Apple Mail Badge">Apple Mail</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Microsoft Outlook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Outlook Badge">Outlook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Spark.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Spark Badge">Spark</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Airmail 3.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Airmail Badge">Airmail</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Polymail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Polymail Badge">Polymail</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Boxy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Boxy Badge">Boxy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mailplane.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Mailplane Badge">Mailplane</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Postbox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Postbox Badge">Postbox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/MailMate.png" />
<a href="btt://trigger_named/?trigger_name=Toggle MailMate Badge">MailMate</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Slack.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Slack Badge">Slack</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Badge">Discord</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Canary Badge">Discord Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Trello.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Trello Badge">Trello</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Bodo.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Bodo Badge">Bodo</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Abstract.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Abstract Badge">Abstract</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Zeplin.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Zeplin Badge">Zeplin</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tweetbot.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tweetbot Badge">Tweetbot</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitter.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitter Badge">Twitter</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitch.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitch Badge">Twitch</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Facebook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Facebook Badge">Facebook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tumblr.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tumblr Badge">Tumblr</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
</ul>
</div>
<div id="about" class="tabcontent">
<img style="width:100%;height:auto;margin-bottom:16px;z-index:2;position:relative;top:-2px;" src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/cool-photo.jpg" alt="" />
<section>
<p>Thanks for installing GoldenChaos-BTT! This is the result of many hours of work to make the Touch Bar something worth using. If you enjoy GoldenChaos-BTT, please spread the word! :)</p>
<p>Main release thread (subscribe for updates): <a href="https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281</a>
<p>Support and feedback thread: <a href="https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196</a>
<p>Want to buy me a coffee? You can donate here: <a href="https://paypal.me/GoldenChaos" target="_blank">https://paypal.me/GoldenChaos</a></p>
<p>Thinking of buying BetterTouchTool because of this preset?<br />
Use this link and I'll get 40% :) <a href="https://a.paddle.com/v2/click/30842/34667?link=1061" target="_blank">https://a.paddle.com/v2/click/30842/34667?link=1061</a></p>
<p>I make other cool things, too! Check them out: <a href="https://goldenchaos.net" target="_blank">https://goldenchaos.net</a></p>
<p>Cheers,<br />
Jason Rappaport aka GoldenChaos</p>
</section>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Select the General tab by default
document.getElementById("default").click();
// Get persistent variables from BetterTouchTool
window.BTT.callHandler('get_persistent_string_variable', {variableName: 'escKeyStyle'},
function callback(currentVariableValue) {
console.log(currentVariableValue);
}
)
</script>
</body>
</html>
daaaammn thats looking good
I look up to you! good luck with the code XD
1 Like
@GoldenChaos I've played around with your code a bit, but I can confirm @Andreas_Hegenberg that something is glitched in 2.674. I mean, the window.BTT gets initialized (it's available in console) but it's somehow impossible to determine when. (I didn't have that issue with my wrapper cause I'm making security null/falsy checks all the time and fallback silently) window.BTTInitialize does fire, but window.BTT isn't ready when it fires (also, it fires multiple times upon window clicks -> that's weird)
I'd suggest injecting window.BTT via Proxy object and dispatch a custom DOM event bttReady or something instead.
Code for GoldenChaos
<html>
<head>
<style>
.hidden {
display: none;
}
body {
color: #fff;
padding: 16px;
font-family: "SF Pro Text", Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0 0 2px 0;
background: transparent;
background: rgba(55, 55, 55, .7);
-webkit-backdrop-filter: blur(20px) saturate(200%);
display: flex;
-webkit-user-select: none;
overflow: hidden;
}
/* Sidebar Styles */
.sidebar {
border-bottom-left-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-right: none;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
.tablink {
margin: 0 0 -1px 0;
padding: 16px 12px 16px 24px;
width: 204px;
position: relative;
}
.tablink::after {
content: " ";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background: rgba(255,255,255,.15);
}
.tablink.active {
background: rgba(255,255,255,.2);
}
.tablink:last-of-type {
position: absolute;
bottom: 0;
}
.tablink:last-of-type::after {
display: none;
}
/* Content Area Styles */
.content {
background: rgba(70, 68, 67, 1);
border-bottom-right-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-left: 1px solid rgba(3, 3, 3, 1);
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
.tabcontent {
padding-top: 66px;
position: relative;
}
.tabcontent .active {
display: block;
}
.tabcontent ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 16px;
}
.tabcontent ul li {
padding: 8px 8px 8px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.tabcontent ul li img {
height: 36px;
float: left;
margin-right: 12px;
}
.tabcontent ul li a {
line-height: 36px;
color: #fff;
text-decoration: none;
}
header {
position: fixed;
top: 1px;
left: 242px;
right: 1px;
background: rgba(70, 68, 67, .7);
-webkit-backdrop-filter: blur(20px);
}
header h1 {
font-family: "SF Pro Display", Helvetica, sans-serif;
font-weight: 600;
margin: 0;
padding: 16px 17px;
}
section {
background: rgba(75, 74, 73, 1);
border: 1px solid rgba(95, 94, 93, 1);
border-radius: 4px;
padding: 16px;
margin: 0 16px 16px 16px;
}
section h3 {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
}
section h3:first-of-type {
margin-top: 0;
}
section a:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
section a:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
section a {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 15px;
background: rgba(118, 115, 114, 1);
margin: 0 0 1px -3px;
padding: 6px 8px;
}
section a:active {
background: rgba(128, 125, 124, 1);
}
section p {
margin: 12px 0;
}
section p:first-of-type {
margin-top: 0;
}
section p:last-of-type {
margin-bottom: 0;
}
/* Single Page Style Overrides */
#about {
margin-top: -64px;
}
#about a {
background: none;
display: inline;
font-size: 13px;
color: rgba(16, 133, 255, 1);
}
/* Toggle Switch Styles */
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
float: right;
margin-top: 5px;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: rgba(118, 115, 114, 1);
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: rgba(118, 115, 114, 1);
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
transform: translate3d(16px, 2px, 0);
}
.form-switch input {
display: none;
}
.form-switch input:checked + i {
background-color: #4BD763;
}
.form-switch input:checked + i::before {
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
transform: translate3d(22px, 2px, 0);
}
</style>
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
}
// this function is called everytime you close the menu
function BTTWillCloseWindow() {
}
</script>
</head>
<body>
<div class="sidebar">
<ul>
<li class="tablink" data-open="general">General</li>
<li class="tablink" data-open="home-strip">Home Strip</li>
<li class="tablink" data-open="menu-bar">Menu Bar</li>
<li id="default" class="tablink" data-open="dock-badges">Dock Badges</li>
<li class="tablink" data-open="about"">About GoldenChaos-BTT</li>
</ul>
</div>
<div class=" content">
<div class="content-inner">
<div id="general" class="tabcontent">
<header>
<h1>GoldenChaos-BTT Settings</h1>
</header>
<section>
<h3>Presets</h3>
<a href="btt://trigger_named/?trigger_name=Default Settings">Default</a>
<a href="btt://trigger_named/?trigger_name=GC's GC-BTT">GC'S GC-BTT</a><br />
</section>
<section>
<h3>Escape Key Style</h3>
<a href="btt://trigger_named/?trigger_name=Use Combo Esc Key" class="window.BTT.callback('escKeyStyle')">Combo</a>
<a href="btt://trigger_named/?trigger_name=Use Normal Esc Key">Normal</a>
</section>
<section>
<h3>Calendar App</h3>
<a href="btt://trigger_named/?trigger_name=Use Fantastical">Fantastical</a>
<a href="btt://trigger_named/?trigger_name=Use Apple Calendar">Apple Calendar</a>
</section>
<a href="btt://trigger_named/?trigger_name=Check All Settings" style="background:rgba(67, 126, 163, 1);display:block;text-align:center;border-radius:4px;margin: 0 16px;">Reapply
All Settings</a>
</div>
<div id="home-strip" class="tabcontent">
<header>
<h1>Home Strip</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Back/Forward Keys">Back/Forward</a>
<a href="btt://trigger_named/?trigger_name=Toggle Refresh Key">Refresh</a>
<a href="btt://trigger_named/?trigger_name=Toggle New Tab Key">New Tab</a>
</section>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h1>Menu Bar</h1>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Collapse Menu Bar">Collapse Menu Bar</a>
<a href="btt://trigger_named/?trigger_name=Toggle GC-BTT Settings">GC-BTT Settings</a>
<a href="btt://trigger_named/?trigger_name=Toggle Browser Tabs">Browser Tabs</a>
<a href="btt://trigger_named/?trigger_name=Toggle Emoji Picker">Emoji</a>
<a href="btt://trigger_named/?trigger_name=Toggle Current Language">Language</a>
<a href="btt://trigger_named/?trigger_name=Toggle App Switcher">App Switcher</a>
<a href="btt://trigger_named/?trigger_name=Toggle Caffeinate">Caffeinate</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Gamepad">Gamepad</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Airpods">AirPods</a>
<a href="btt://trigger_named/?trigger_name=Toggle Bluetooth Toggle">Bluetooth</a>
<a href="btt://trigger_named/?trigger_name=Toggle Wi-Fi Toggle">Wi-Fi</a>
<a href="btt://trigger_named/?trigger_name=Toggle Microphone Mute">Microphone Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Mute">Volume Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Down">Volume Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Up">Volume Up</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Down">Brightness Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Up">Brightness Up</a>
</section>
<section>
<h3>Date Format</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Date/Time Format">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Use Large Date/Time Format">Large</a>
<a href="btt://trigger_named/?trigger_name=Use Medium Date/Time Format">Medium</a>
<a href="btt://trigger_named/?trigger_name=Use Small Date/Time Format">Small</a>
</section>
<section>
<h3>Time Format</h3>
<a href="btt://trigger_named/?trigger_name=Use 12-Hour Time">12-Hour</a>
<a href="btt://trigger_named/?trigger_name=Use 24-Hour Time">24-Hour</a>
</section>
<section>
<h3>Weather</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Weather Widget">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Weather Widget">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Weather Widget">Never</a>
</section>
<section>
<h3>Spotlight Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Spotlight Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Spotlight Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Spotlight Key">Never</a>
</section>
<section>
<h3>Siri Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Siri Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Siri Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Siri Key">Never</a>
</section>
<section>
<h3>Notification Center Key</h3>
<a href="btt://trigger_named/?trigger_name=Use Dynamic Notification Center Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Notification Center Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Notification Center Key">Never</a>
</section>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h1>Dock Badges</h1>
</header>
<ul>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Badge">Safari</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari Technology Preview.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Preview Badge">Safari Preview</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Google Chrome Badge">Google Chrome</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chrome Canary Badge">Chrome Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Firefox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Firefox Badge">Firefox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/FaceTime.png" />
<a href="btt://trigger_named/?trigger_name=Toggle FaceTime Badge">FaceTime</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Messages.png" />
<a href="btt://trigger_named/?trigger_name=Toggle iMessage Badge">iMessage</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/WhatsApp.png" />
<a href="btt://trigger_named/?trigger_name=Toggle WhatsApp Badge">WhatsApp</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Telegram.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Telegram Badge">Telegram</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Franz.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Franz Badge">Franz</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Badge">Skype</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype for Business.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Business Badge">Skype Business</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/YakYak.png" />
<a href="btt://trigger_named/?trigger_name=Toggle YakYak Badge">YakYak</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Chatty.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chatty Badge">Chatty</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Caprine.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Caprine Badge">Caprine</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Goofy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Goofy Badge">Goofy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Apple Mail Badge">Apple Mail</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Microsoft Outlook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Outlook Badge">Outlook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Spark.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Spark Badge">Spark</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Airmail 3.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Airmail Badge">Airmail</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Polymail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Polymail Badge">Polymail</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Boxy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Boxy Badge">Boxy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mailplane.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Mailplane Badge">Mailplane</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Postbox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Postbox Badge">Postbox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/MailMate.png" />
<a href="btt://trigger_named/?trigger_name=Toggle MailMate Badge">MailMate</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Slack.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Slack Badge">Slack</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Badge">Discord</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Canary Badge">Discord Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Trello.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Trello Badge">Trello</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Bodo.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Bodo Badge">Bodo</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Abstract.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Abstract Badge">Abstract</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Zeplin.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Zeplin Badge">Zeplin</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tweetbot.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tweetbot Badge">Tweetbot</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitter.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitter Badge">Twitter</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitch.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitch Badge">Twitch</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Facebook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Facebook Badge">Facebook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tumblr.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tumblr Badge">Tumblr</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
</ul>
</div>
<div id="about" class="tabcontent">
<img style="width:100%;height:auto;margin-bottom:16px;z-index:2;position:relative;top:-2px;"
src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/cool-photo.jpg"
alt="" />
<section>
<p>Thanks for installing GoldenChaos-BTT! This is the result of many hours of work to make
the Touch Bar something worth using. If you enjoy GoldenChaos-BTT, please spread the
word! :)</p>
<p>Main release thread (subscribe for updates): <a href="https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281"
target="_blank">https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281</a>
<p>Support and feedback thread: <a href="https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196"
target="_blank">https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196</a>
<p>Want to buy me a coffee? You can donate here: <a href="https://paypal.me/GoldenChaos"
target="_blank">https://paypal.me/GoldenChaos</a></p>
<p>Thinking of buying BetterTouchTool because of this preset?<br />
Use this link and I'll get 40% :) <a href="https://a.paddle.com/v2/click/30842/34667?link=1061"
target="_blank">https://a.paddle.com/v2/click/30842/34667?link=1061</a></p>
<p>I make other cool things, too! Check them out: <a href="https://goldenchaos.net"
target="_blank">https://goldenchaos.net</a></p>
<p>Cheers,<br />
Jason Rappaport aka GoldenChaos</p>
</section>
</div>
</div>
</div>
<script>
const init = () => {
document.body.addEventListener('click', (ev) => {
if (ev.target.matches('[data-open]')) {
const tabname = ev.target.dataset.open;
hideAll();
ev.currentTarget.classList.add('active');
document.getElementById(tabname).classList.remove('hidden');
}
});
document.getElementById("default").click();
window.removeEventListener('load', init);
};
const hideAll = () => {
const tabcontentElements = [...document.querySelectorAll('.tabcontent')];
tabcontentElements.forEach(tabEl => {
tabEl.classList.add('hidden');
});
// Get all elements with class="tablinks" and remove the class "active"
const tablinkElements = [...document.querySelectorAll('.tablink')];
tablinkElements.forEach(tablinkEl => {
tablinkEl.classList.remove('active');
});
}
// Select the General tab by default
window.addEventListener('load', init);
window.BTTInitialize = () => {
window.BTT.callHandler('get_string_variable', {variableName: 'escKeyStyle'},
function callback(currentVariableValue) {
console.log(currentVariableValue || '??');
}
);
}
hideAll();
</script>
</body>
</html>
Also callHandler(get_persistent_string_variable does not seem to work 
1 Like
@Worie will have a look at your changes and merge them in in the morning, gonna head to sleep for now 
glad to know I'm not crazy though, haha.
Progress update on the UI as well! It's really starting to look nice.
Latest HTML:
<html>
<head>
<style>
body {
color: #fff;
padding: 16px;
font-family: "SF Pro Text", Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0 0 2px 0;
background: transparent;
background: rgba(55, 55, 55, .7);
-webkit-backdrop-filter: blur(48px) saturate(200%);
-webkit-transform: translate3d(0, 0, 0);
display: flex;
-webkit-user-select: none;
overflow: hidden;
}
h1 {
font-family: "SF Pro Display", Helvetica, sans-serif;
font-weight: 600;
margin: 0;
padding: 44px 16px 12px 16px;
font-size: 24px;
border-bottom: 1px solid rgba(255,255,255,.15);
}
h2 {
font-family: "SF Pro Display", Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: 600;
margin: 12px 0;
}
h3 {
font-family: "SF Pro Display", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
padding: 0 17px;
margin: 32px 0 12px 0;
color: rgba(180, 179, 178, 1);
}
h3:first-of-type {
margin-top: 0;
}
a {
color: rgba(20, 133, 255, 1);
text-decoration: none;
display: inline;
}
/* Sidebar Styles */
.sidebar {
border-bottom-left-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-right: none;
-webkit-transform: translate3d(0, 0, 0);
position: relative;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: calc(100% - 87px);
}
.tablink {
margin: 0 0 -1px 0;
padding: 8px 12px 8px 48px;
width: 204px;
position: relative;
line-height: 28px;
}
.tablink img {
height: 28px;
margin-right: 12px;
margin-left: -36px;
float: left;
}
.tablink::after {
content: " ";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background: rgba(255,255,255,.15);
}
.tablink.active {
background: rgba(22, 134, 255, 1);
background-blend-mode: screen;
}
.tablink.active::after {
display: none;
}
.tablink:last-of-type {
position: absolute;
bottom: 0;
border-bottom-left-radius: 5px;
}
.tablink:last-of-type::after {
top: 0;
bottom: auto;
}
/* Content Area Styles */
.content {
background: rgba(70, 68, 67, 1);
border-bottom-right-radius: 6px;
border: 1px solid rgba(119, 118, 116, .5);
border-left: 1px solid rgba(3, 3, 3, 1);
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.tabcontent {
padding-top: 66px;
display: none;
position: relative;
}
.tabcontent .active {
display: block;
}
.tabcontent ul {
list-style-type: none;
margin: -16px -16px -16px 0;
padding: 0;
-webkit-transform: translate3d(0, 0, 0);
}
.tabcontent ul li {
padding: 8px 8px 8px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.tabcontent ul li:last-of-type {
border: none;
}
.tabcontent ul li img {
height: 36px;
float: left;
margin-right: 12px;
}
.tabcontent ul li a {
line-height: 36px;
color: #fff;
text-decoration: none;
background: none;
}
header {
position: fixed;
z-index: 1;
top: 1px;
left: 266px;
right: 1px;
background: rgba(83, 81, 79, .8);
-webkit-backdrop-filter: blur(24px) saturate(400%) contrast(150%);
-webkit-transform: translate3d(0, 0, 0);
border-bottom: 1px solid rgba(255,255,255,.1);
}
section {
background: rgba(75, 74, 73, 1);
border: 1px solid rgba(95, 94, 93, 1);
border-radius: 4px;
padding: 16px;
margin: 0 16px 16px 16px;
}
.segmented-control {
display: flex;
margin: 0 16px;
}
.segmented-control a {
width: 100%;
color: rgba(22, 134, 255, 1);
text-align: center;
text-decoration: none;
font-size: 15px;
margin: 0 0 1px -1px;
padding: 6px 8px;
border: 1px solid rgba(22, 134, 255, 1);
}
.segmented-control a.selected {
color: #fff;
background: rgba(22, 134, 255, 1);
}
.segmented-control a:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.segmented-control a:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.segmented-control a:active {
background: rgba(128, 125, 124, .2);
}
section p {
margin: 12px 0;
}
section p:first-of-type {
margin-top: 0;
}
section p:last-of-type {
margin-bottom: 0;
}
/* Single Page Style Overrides */
#about {
margin-top: -64px;
}
#about a {
background: none;
display: inline;
font-size: 13px;
color: rgba(16, 133, 255, 1);
}
/* Toggle Switch Styles */
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
float: right;
margin-top: 5px;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: rgba(118, 115, 114, 1);
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: rgba(118, 115, 114, 1);
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
transform: translate3d(16px, 2px, 0);
}
.form-switch input {
display: none;
}
.form-switch input:checked + i {
background-color: #4BD763;
}
.form-switch input:checked + i::before {
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
transform: translate3d(22px, 2px, 0);
}
</style>
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
}
// this function is called everytime you close the menu
function BTTWillCloseWindow() {
}
</script>
</head>
<body>
<div class="sidebar">
<h1>GC-BTT Settings</h1>
<ul>
<li id="default" class="tablink" onclick="openTab(event, 'general')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/settings.png" />
General
</li>
<li class="tablink" onclick="openTab(event, 'home-strip')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/now-playing.png" />
Home Strip
</li>
<li class="tablink" onclick="openTab(event, 'menu-bar')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/clock.png" />
Menu Bar
</li>
<li class="tablink" onclick="openTab(event, 'dock-badges')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/calendar.png" />
Dock Badges
</li>
<li class="tablink" onclick="openTab(event, 'about')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/avatar-round.png" />
About GoldenChaos-BTT
</li>
</ul>
</div>
<div class="content">
<div class="content-inner">
<div id="general" class="tabcontent">
<header>
<h2>General</h2>
</header>
<h3>Presets</h3>
<section>
<a href="btt://trigger_named/?trigger_name=Default Settings">Default</a>
<a href="btt://trigger_named/?trigger_name=GC's GC-BTT">GC'S GC-BTT</a><br />
</section>
<h3>Escape Key Style</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Combo Esc Key" class="window.BTT.callback('escKeyStyle')">Combo</a>
<a href="btt://trigger_named/?trigger_name=Use Normal Esc Key">Normal</a>
</div>
<h3>Calendar App</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Fantastical">Fantastical</a>
<a href="btt://trigger_named/?trigger_name=Use Apple Calendar">Apple Calendar</a>
</div>
<a href="btt://trigger_named/?trigger_name=Check All Settings" style="background:rgba(16, 133, 255, 1);display:block;text-align:center;border-radius:4px;margin:32px 16px;padding:8px;color:#fff;text-decoration:none;font-weight:500;">Reapply All Settings</a>
</div>
<div id="home-strip" class="tabcontent">
<header>
<h2>Home Strip</h2>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Back/Forward Keys">Back/Forward</a>
<a href="btt://trigger_named/?trigger_name=Toggle Refresh Key">Refresh</a>
<a href="btt://trigger_named/?trigger_name=Toggle New Tab Key">New Tab</a>
</section>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h2>Menu Bar</h2>
</header>
<section>
<a href="btt://trigger_named/?trigger_name=Toggle Collapse Menu Bar">Collapse Menu Bar</a>
<a href="btt://trigger_named/?trigger_name=Toggle GC-BTT Settings">GC-BTT Settings</a>
<a href="btt://trigger_named/?trigger_name=Toggle Browser Tabs">Browser Tabs</a>
<a href="btt://trigger_named/?trigger_name=Toggle Emoji Picker">Emoji</a>
<a href="btt://trigger_named/?trigger_name=Toggle Current Language">Language</a>
<a href="btt://trigger_named/?trigger_name=Toggle App Switcher">App Switcher</a>
<a href="btt://trigger_named/?trigger_name=Toggle Caffeinate">Caffeinate</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Gamepad">Gamepad</a>
<a href="btt://trigger_named/?trigger_name=Toggle Connect to Airpods">AirPods</a>
<a href="btt://trigger_named/?trigger_name=Toggle Bluetooth Toggle">Bluetooth</a>
<a href="btt://trigger_named/?trigger_name=Toggle Wi-Fi Toggle">Wi-Fi</a>
<a href="btt://trigger_named/?trigger_name=Toggle Microphone Mute">Microphone Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Mute">Volume Mute</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Down">Volume Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Volume Up">Volume Up</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Down">Brightness Down</a>
<a href="btt://trigger_named/?trigger_name=Toggle Brightness Up">Brightness Up</a>
</section>
<h3>Date Format</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Dynamic Date/Time Format">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Use Large Date/Time Format">Large</a>
<a href="btt://trigger_named/?trigger_name=Use Medium Date/Time Format">Medium</a>
<a href="btt://trigger_named/?trigger_name=Use Small Date/Time Format">Small</a>
</div>
<h3>Time Format</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use 12-Hour Time">12-Hour</a>
<a href="btt://trigger_named/?trigger_name=Use 24-Hour Time">24-Hour</a>
</div>
<h3>Weather</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Dynamic Weather Widget">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Weather Widget">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Weather Widget">Never</a>
</div>
<h3>Spotlight Key</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Dynamic Spotlight Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Spotlight Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Spotlight Key">Never</a>
</div>
<h3>Siri Key</h3>
<div class="segmented-control">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Dynamic Siri Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Siri Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Siri Key">Never</a>
</div>
<h3>Notification Center Key</h3>
<div class="segmented-control" style="margin-bottom: 16px;">
<a class="selected" href="btt://trigger_named/?trigger_name=Use Dynamic Notification Center Key">Dynamic</a>
<a href="btt://trigger_named/?trigger_name=Always Show Notification Center Key">Always</a>
<a href="btt://trigger_named/?trigger_name=Never Show Notification Center Key">Never</a>
</div>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h2>Dock Badges</h2>
</header>
<section>
<ul>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Badge">Safari</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari Technology Preview.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Safari Preview Badge">Safari Technology Preview</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Google Chrome Badge">Google Chrome</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chrome Canary Badge">Google Chrome Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Firefox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Firefox Badge">Firefox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/FaceTime.png" />
<a href="btt://trigger_named/?trigger_name=Toggle FaceTime Badge">FaceTime</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Messages.png" />
<a href="btt://trigger_named/?trigger_name=Toggle iMessage Badge">iMessage</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/WhatsApp.png" />
<a href="btt://trigger_named/?trigger_name=Toggle WhatsApp Badge">WhatsApp</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Telegram.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Telegram Badge">Telegram</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Franz.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Franz Badge">Franz</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Badge">Skype</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype for Business.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Skype Business Badge">Skype for Business</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/YakYak.png" />
<a href="btt://trigger_named/?trigger_name=Toggle YakYak Badge">YakYak</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Chatty.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Chatty Badge">Chatty</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Caprine.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Caprine Badge">Caprine</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Goofy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Goofy Badge">Goofy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Apple Mail Badge">Apple Mail</a>
<label class="form-switch"><input type="checkbox" checked="checked"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Microsoft Outlook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Outlook Badge">Microsoft Outlook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Spark.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Spark Badge">Spark</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Airmail 3.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Airmail Badge">Airmail 3</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Polymail.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Polymail Badge">Polymail</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Boxy.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Boxy Badge">Boxy</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mailplane.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Mailplane Badge">Mailplane</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Postbox.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Postbox Badge">Postbox</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/MailMate.png" />
<a href="btt://trigger_named/?trigger_name=Toggle MailMate Badge">MailMate</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Slack.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Slack Badge">Slack</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Badge">Discord</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord Canary.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Discord Canary Badge">Discord Canary</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Trello.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Trello Badge">Trello</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Bodo.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Bodo Badge">Bodo</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Abstract.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Abstract Badge">Abstract</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Zeplin.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Zeplin Badge">Zeplin</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tweetbot.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tweetbot Badge">Tweetbot</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitter.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitter Badge">Twitter</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitch.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Twitch Badge">Twitch</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Facebook.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Facebook Badge">Facebook</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tumblr.png" />
<a href="btt://trigger_named/?trigger_name=Toggle Tumblr Badge">Tumblr</a>
<label class="form-switch"><input type="checkbox"><i></i></label>
</li>
</ul>
</section>
</div>
<div id="about" class="tabcontent">
<img style="width:100%;height:auto;margin-bottom:16px;z-index:2;position:relative;top:-2px;" src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/cool-photo.jpg" alt="" />
<section>
<p>Thanks for installing GoldenChaos-BTT! This is the result of many hours of work to make the Touch Bar something worth using. If you enjoy GoldenChaos-BTT, please spread the word! :)</p>
<p>Main release thread (subscribe for updates): <a href="https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-a-complete-touch-bar-ui-replacement-preset/1281</a>
<p>Support and feedback thread: <a href="https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196" target="_blank">https://community.folivora.ai/t/goldenchaos-btt-support-and-feedback-thread/5196</a>
<p>Want to buy me a coffee? You can donate here: <a href="https://paypal.me/GoldenChaos" target="_blank">https://paypal.me/GoldenChaos</a></p>
<p>Thinking of buying BetterTouchTool because of this preset?<br />
Use this link and I'll get 40% :) <a href="https://a.paddle.com/v2/click/30842/34667?link=1061" target="_blank">https://a.paddle.com/v2/click/30842/34667?link=1061</a></p>
<p>I make other cool things, too! Check them out: <a href="https://goldenchaos.net" target="_blank">https://goldenchaos.net</a></p>
<p>Cheers,<br />
Jason Rappaport aka GoldenChaos</p>
</section>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Select the General tab by default
document.getElementById("default").click();
// Get persistent variables from BetterTouchTool
window.BTT.callHandler('get_persistent_string_variable', {variableName: 'escKeyStyle'},
function callback(currentVariableValue) {
console.log(currentVariableValue);
}
)
</script>
</body>
</html>
1 Like
@Worie good idea, I have added a bttReady event (as the BTTInitialize() is indeed different and doesn't ensure the BTT object is available, also BTTInitialize() is always called when the window gets focus, which is important for various use cases.)
<html>
<head>
<script type="text/javascript">
window.addEventListener('bttReady', function (BTT) {
// here the BTT object is available and you can do whatever you want with it:
window.BTT.callHandler('trigger_named',
{
trigger_name: 'action2',
closeFloatingHTMLMenu: 1
})
}
, false);
</script>
</head>
<body>
</body>
</html>
Will be available with the next update later today.
You mentioned security concerns - but the thing is, if somebody can get somebody to have a Floating Web View in BTT, he can also get him to load whatever sequence of actions that could do anything anyways.
2 Likes
Awesome! Can't wait to test it out 
If somebody can get somebody to have a Floating Web View in BTT, he can also get him to load whatever sequence of actions that could do anything anyways
Yeah, exactly. I mean, visiting any thirdparty websites is potentially really dangerous, as anyone can even execute shell scripts on the clients machine (even without the knowledge of the host of the domain).
That's why in my wrapper created a silly blacklist, which prevented execution of some actions, but still - it only disables some custom methods, and endpoints/functions that lay underneath are still open. I wanted to suggest adding blacklist/whitelist to webview and/or webserver API, even the simplest-action id based, but on BTT end. With webserver we can set up a shared_key which helps anyhow, but atm there's no way to secure callHanlder 
I wouldn't want this awesome feature become some kind of a vunerability that'd make people think that "BTT is dangerous" (and I know people like to exploit weak points available to JS). Do you think blacklisting/whitelisting of actions is possible, for web-based tech?
callHandler can NOT be triggered via normal websites. It can only be triggered if it's loaded inside the floating webview that's integrated in BTT.
That's why - as far as I can see - there is no real difference to loading any custom preset.
Got the chance to try out your script, I'm guessing that errors with BTT are what're causing the whole thing to not work? Even the tabs stopped working, so for now I've reverted back to my revision so I can keep polishing the UI
I understand Andreas. But I'm talking about a case if BTT user opens a https://google.com in webview (he created such action) and google.com is "infected" with unwanted code (and that's surely possible), and user doesn't know that - that's what I consider dangerous, because it'll happen without any user interaction other than "trigger webview with google". Google ofc is just an example here, but I hope you understand what I mean. If I'd like to "surf the web" via BTT webview for whatever reason, I'd be a little bit afraid.
I know that the case I'm talking about is a niche, but I think it still exists. But maybe I still miss something and talking out of the blue
ah I see - I didn't think about the use case where a third party website is loaded into the webview.
I could just enforce the shared_secret for external urls. (and set a random string by default)
1 Like
@GoldenChaos hmm, when I tested yesterday the tabs were working (though I refactored them a bit, sorry for lack of comments but it was late), perhaps I posted some incorrect version here 
But still the issue with callHandler will be resolved by window.addEventListener('bttReady') as mentioned by Andreas here: Floating HTML Settings Menu , so I'm not sure if you need my changes at all (unless you just want it a little refactored)
1 Like
So that'd be 0 or 1 -> third party website can or cannot invoke actions? It's better than allowing anyone to do anything, surely!
I suggested blacklist because I didn't want "all or nothing" approach. But perhaps it is not worth an effort in fact. I assume blacklist would be tricky to implement and harder to maintain by users?
I could implement something like oauth in the future, where a website can authenticate against BTT.
1 Like
That'd be nice - if you ever had time for that and It'll be out in some version - let me know, I'd love to test it out! Still, securing via shared_secret will surely be enough
I just uploaded v2.675, it should now work correctly.
Here is an example:
<html>
<script>
function triggerNamedTrigger(actionName) {
window.BTT.callHandler('trigger_named', {trigger_name: actionName},
function callback(scriptResult) {
console.log('action result', scriptResult);
}
)
}
function setStringVariable(variable, value) {
window.BTT.callHandler('set_string_variable', {variableName: variable, to: value});
}
function getStringVariable(variable) {
window.BTT.callHandler('get_string_variable', {variableName: variable},
function callback(currentVariableValue) {
console.log('the variable is set to: ', currentVariableValue);
}
)
}
window.addEventListener('bttReady', function (BTT) {
// here the BTT object is available and you can do whatever you want with it:
setStringVariable('test', 'lalala');
getStringVariable('test');
}
, false);
</script>
<body>
<button onClick="triggerNamedTrigger('action1')">trigger action1 </button>
<button onClick="setStringVariable('var1', 'test124')">set variable</button>
<button onClick="getStringVariable('var1')">get variable</button>
</body>
</html>
1 Like
Will give this a shot and report back!
EDIT: Can confirm that it's working!! Now it's time to hook everything up. 
1 Like
@Andreas_Hegenberg running into an issue here: I've hooked up the floating HTML widget with JS triggers, but they don't seem to work when I run them. Even weirder, when I run the preset scripts manually (Default or GC's GC-BTT), the persistent variables update but the display doesn't change.
Earlier alpha builds with performance improvements to rendering were actually more performant, but now I'm encountering a lot of issues with the display of things not updating with triggers, and they are also very slow on first load. Seems possibly related.
Think it's a BTT issue, or am I doing something wrong here?
My current working copy of GC-BTT for troubleshooting purposes: GoldenChaos-BTT.bttpresetcompressed.bttpresetcompressed (19.2 MB)
do you have an easy example for something that doesn't update correctly?
Sure. The menu bar is a key thing to watch, because several items change when applying a preset.
GC's GC-BTT has Caffeinate and Connect AirPods enabled, which the Default preset does not. So, you should be able to see these two menu bar items appear after applying the preset if the "Check All Settings" script is running correctly.
If I click GC's GC-BTT in the settings web view, BTT crashes. If I run the script manually, nothing seems to happen. Eventually, upon BTT restart, it will have been partially applied.