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.
Ah that is probably not related to the performance improvements. I think there might be a dead lock somewhere due to how macOS executes Apple Script. I'll check how/if this can be fixed.
Is this only when executing it from the Web View or have there been other changes in the script?
Unfortunately I think there is no easy solution to this problem.
In v2.685 alpha I added a new trigger function "trigger_named_async_without_response" that can be accessed using apple script or using the webview. If possible always use that instead of "trigger_named". It will not be able to get the result of the apple script attached to a named trigger, but it should not hang when calling apple script inside of apple script.
1 Like
If I understand correctly, as of v2.685 it'll be better to always use trigger_named_async_whitout_response when we don't care about what is returned by particular trigger? I dont' understand the issue completely and I'm trying to get the bottom line of it 
Honestly, that's fine because I can always just get the value of the variable after the script runs, right? Gonna try this out now, step one is just making sure the buttons work at all lol.
EDIT: Okay, looks like it's working! I was able to successfully switch to GC's GC-BTT. The process was very slow, and I haven't gotten the progress bar working yet, but it finished running and refreshed the display of everything at the end. I'm curious if this behavior will prevent me from being able to display the progress bar? We'll find out...
EDIT2: Seems to only work some of the time. Try swapping escape key styles in this latest working copy @Andreas_Hegenberg: GoldenChaos-BTT.bttpresetcompressed.bttpresetcompressed (20.1 MB)
(On an unrelated note, can the bug that appends "bttpresetcompressed" twice be fixed? It's very annoying :P)
The first version of this is now out! I still haven't hooked up everything, but all the buttons should trigger their respective actions, making it technically usable!
If you wanna give it a shot, head over to the release thread and grab the latest experimental version.
1 Like
@Andreas_Hegenberg I'm working on making the switches in my HTML menu update to reflect the actual state of the setting. I need to do three things:
- Get the variables when the menu first loads and apply them as class names to the various buttons and switches.
- Update any class names of buttons that the user interacts with.
- Tie the class names to CSS styles for the button states.
This doesn't seem to be possible, though - I can't even figure out how to get the variables to populate as class names. And after I do that, I don't know how to make them update after a user clicks on an item. Think you could help me out by making a sample button that works the way I describe?
Here's my current HTML which you can modify if it's helpful. I've stripped out my code where I try to output the value of the variables since it wasn't doing anything.
<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 32px;
margin: 32px 0 12px 0;
color: rgba(180, 179, 178, 1);
}
h3:first-of-type {
margin-top: 0;
}
small {
font-size: 12px;
margin: -4px 32px;
padding: 0;
display: block;
color: rgba(180, 179, 178, 1);
}
a {
color: #1485FF;
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: #1485FF;
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;
}
section.tokenlist {
display: flex;
flex-wrap: wrap;
padding-bottom: 8px;
}
.button {
background: #1485FF;
display: block;
text-align: center;
border-radius: 4px;
margin: 32px 16px;
padding: 8px;
color: #fff;
text-decoration: none;
font-weight: 500;
}
.button:active,
.token.selected:active {
opacity: .8;
}
.token {
color: #1485FF;
border: 1px solid #1485FF;
color: #fff;
padding: 6px 8px;
margin: 0;
margin-right: 8px;
border-radius: 4px;
margin-bottom: 8px;
}
.token.selected {
display: inline-block;
background: #1485FF;
color: #fff;
}
.token:active,
.segmented-control a:active {
background: rgba(128, 125, 124, .2);
}
.token.selected:active {
background: #1485FF;
}
.segmented-control {
display: flex;
}
.segmented-control a {
width: 100%;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 15px;
margin: 0 0 1px -1px;
padding: 6px 8px;
border: 1px solid #1485FF;
}
.segmented-control a.selected {
background: #1485FF;
}
.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;
}
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>
function trigger_named_async_without_response(actionName) {
window.BTT.callHandler('trigger_named_async_without_response', {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(currentVariableValue);
}
)
}
window.addEventListener('bttReady', function (BTT) {
getStringVariable('escKeyStyle');
getStringVariable('calendarApp');
getStringVariable('showBackForward');
getStringVariable('showRefresh');
getStringVariable('showNewTab');
getStringVariable('showCollapseMenuBar');
getStringVariable('showSettings');
getStringVariable('showBrowserTabs');
getStringVariable('showEmojiPicker');
getStringVariable('showCurrentLanguage');
getStringVariable('showAppSwitcher');
getStringVariable('showCaffeinate');
getStringVariable('showConnectGamepad');
getStringVariable('showConnectAirPods');
getStringVariable('showBluetooth');
getStringVariable('showWifi');
getStringVariable('showMicrophoneMute');
getStringVariable('showVolumeMute');
getStringVariable('showVolumeDown');
getStringVariable('showVolumeUp');
getStringVariable('showBrightnessDown');
getStringVariable('showBrightnessUp');
getStringVariable('dateSize');
getStringVariable('timeFormat');
getStringVariable('showWeather');
getStringVariable('showSpotlight');
getStringVariable('showSiri');
getStringVariable('showNotificationCenter');
getStringVariable('showSafariBadge');
getStringVariable('showSafariPreviewBadge');
getStringVariable('showChromeBadge');
getStringVariable('showChromeCanaryBadge');
getStringVariable('showFirefoxBadge');
getStringVariable('showFaceTimeBadge');
getStringVariable('showiMessageBadge');
getStringVariable('showWhatsAppBadge');
getStringVariable('showTelegramBadge');
getStringVariable('showFranzBadge');
getStringVariable('showSkypeBadge');
getStringVariable('showSkypeBusinessBadge');
getStringVariable('showYakYakBadge');
getStringVariable('showChattyBadge');
getStringVariable('showCaprineBadge');
getStringVariable('showGoofyBadge');
getStringVariable('showAppleMailBadge');
getStringVariable('showOutlookBadge');
getStringVariable('showSparkBadge');
getStringVariable('showAirmailBadge');
getStringVariable('showPolymailBadge');
getStringVariable('showBoxyBadge');
getStringVariable('showMailplaneBadge');
getStringVariable('showPostboxBadge');
getStringVariable('showMailMateBadge');
getStringVariable('showSlackBadge');
getStringVariable('showDiscordBadge');
getStringVariable('showDiscordCanaryBadge');
getStringVariable('showTrelloBadge');
getStringVariable('showBodoBadge');
getStringVariable('showAbstractBadge');
getStringVariable('showTweetbotBadge');
getStringVariable('showTwitterBadge');
getStringVariable('showTwitchBadge');
getStringVariable('showFacebookBadge');
getStringVariable('showTumblrBadge');
}
, false);
</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, 'menu-bar')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/brightness.png" />
Menu Bar
</li>
<li class="tablink" onClick="openTab(event, 'dock-badges')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/notifications.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 class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Default Settings')">Default</a>
<a class="token" onClick="trigger_named_async_without_response('GC\'s GC-BTT')">GC'S GC-BTT</a><br />
</section>
<h3>Escape Key</h3>
<section>
<ul>
<li>
<a onClick="trigger_named_async_without_response('Toggle Escape Key Style')">
Use Normal Escape Key
<label class="form-switch"><input type="checkbox"><i></i></label>
</a>
</li>
</ul>
</section>
<small>When the normal Escape key is enabled, separate Fullscreen buttons will be added to the Home Strip and Control Menu.</small>
<h3>Home Strip Controls</h3>
<section class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Back/Forward Keys')">Back/Forward</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Refresh Key')">Refresh</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle New Tab Key')">New Tab</a>
</section>
<h3>Calendar App</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Fantastical')">Fantastical</a>
<a onClick="trigger_named_async_without_response('Use Apple Calendar')">Apple Calendar</a>
</div>
</section>
<small>Choose which app will open when you tap on a calendar item.</small>
<a class="button" onClick="trigger_named_async_without_response('Check All Settings')">Reapply All Settings</a>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h2>Menu Bar</h2>
</header>
<h3>Widgets</h3>
<section class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Collapse Menu Bar')">Collapse Menu Bar</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle GC-BTT Settings')">GC-BTT Settings</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Browser Tabs')">Browser Tabs</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Emoji Picker')">Emoji</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Current Language')">Language</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle App Switcher')">App Switcher</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Caffeinate')">Caffeinate</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Connect to Gamepad')">Gamepad</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Connect to Airpods')">AirPods</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Bluetooth Toggle')">Bluetooth</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Wi-Fi Toggle')">Wi-Fi</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Microphone Mute')">Microphone Mute</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Volume Mute')">Volume Mute</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Volume Down')">Volume Down</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Volume Up')">Volume Up</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Brightness Down')">Brightness Down</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Brightness Up')">Brightness Up</a>
</section>
<h3>Date Format</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Date/Time Format')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Use Large Date/Time Format')">Large</a>
<a onClick="trigger_named_async_without_response('Use Medium Date/Time Format')">Medium</a>
<a onClick="trigger_named_async_without_response('Use Small Date/Time Format')">Small</a>
</div>
</section>
<h3>Time Format</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use 12-Hour Time')">12-Hour</a>
<a onClick="trigger_named_async_without_response('Use 24-Hour Time')">24-Hour</a>
</div>
</section>
<h3>Weather</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Weather Widget')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Weather Widget')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Weather Widget')">Never</a>
</div>
</section>
<h3>Spotlight Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Spotlight Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Spotlight Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Spotlight Key')">Never</a>
</div>
</section>
<h3>Siri Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Siri Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Siri Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Siri Key')">Never</a>
</div>
</section>
<h3>Notification Center Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Notification Center Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Notification Center Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Notification Center Key')">Never</a>
</div>
</section>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h2>Dock Badges</h2>
</header>
<small>
<p>Dock Badges allow you to see notification badges from apps in your dock, including from Handoff devices.</p>
<p>Because Dock Badges use slightly more energy than other widgets in GC-BTT, only badges for Apple apps are enabled by default. To save energy, only enable badges for apps you keep in your dock.<br /><br /></p>
</small>
<section>
<ul>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari.png" />
<a onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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 onClick="trigger_named_async_without_response('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();
</script>
</body>
</html>
Here is a quick example, it uses the id's of the buttons as variable name and toggles between "active" and "notactive". Unfortunately there seems to be an issue in the current BTT version that casues this always to require two clicks. I'll upload v2.708 in a few minutes which should workaround that.
It first calls the getAllVariablesAndUpdateClass function, which loops through all the buttons and receives their current variable states and updates their class accordingly.
<html>
<style>
.active {
background: green;
}
.notactive {
background: red;
}
</style>
<script>
var variables = {};
function getAllVariablesAndUpdateClass() {
console.log('looping through buttons');
const buttons = document.querySelectorAll('button');
buttons.forEach(function(button, i) {
const variable = button.id;
window.BTT.callHandler(
'get_string_variable',
{ variableName: variable},
function callback(currentVariableValue) {
console.log(
'the variable',
variable,
'is set to: ',
currentVariableValue
);
variables[button.id] = currentVariableValue;
button.className = currentVariableValue;
}
);
});
}
function toggleVariable(variable) {
var button = document.getElementById(variable);
if(variables[variable] === 'active') {
button.className = 'notactive';
variables[variable] = 'notactive';
window.BTT.callHandler('set_string_variable', {variableName: variable, to: 'notactive'});
} else {
button.className = 'active';
variables[variable] = 'active';
window.BTT.callHandler('set_string_variable', {variableName: variable, to: 'active'});
}
}
window.addEventListener(
'bttReady',
function(BTT) {
getAllVariablesAndUpdateClass();
},
false
);
</script>
<body>
<button id="var1" onClick="toggleVariable(this.id)">toggle var1</button>
<button id="var2" onClick="toggleVariable(this.id)">toggle var2</button>
</body>
</html>
1 Like
Thank you thank you!! Working on this now, will report back with results 
v2.708 is now online
1 Like
Ah btw. you probably want to use the set_persistent_string_variable method instead of set_string_variable, otherwise it will not be available after restarting BTT.
1 Like
I kind of had something ish-working but then I broke it so I'm gonna take a break for today... 
the issue is I'm not using buttons, I'm using a mix of things, so it seems I need to write a whole bunch of different functions to cover all the different types of switches, and different functions for nonbinary switches etc.
The other thing I need to figure out how to do is call the variable's associated Refresh named trigger to actually update the Touch Bar after you click the button.
It seems like after I'm done the Toggle named triggers I wrote won't be necessary, unless someone has a reason I should keep them around (to make scripting easier, for example, since you can't tell the HTML menu to press buttons). But after this they'll be unused in the UI.
I am not a javascript wizard if you can't tell, haha, but I'll figure all this out.
I can have a look tomorrow if you post your current state!
Sure - I started off trying to make the dock badge switches work since they're the simplest binary options. There is a lot of work to be done here, it's pretty messy. Just warning you, haha. It should work with the latest experimental version.
<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 32px;
margin: 32px 0 12px 0;
color: rgba(180, 179, 178, 1);
}
h3:first-of-type {
margin-top: 0;
}
small {
font-size: 12px;
margin: -4px 32px;
padding: 0;
display: block;
color: rgba(180, 179, 178, 1);
}
a {
color: #1485FF;
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: #1485FF;
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;
}
section.tokenlist {
display: flex;
flex-wrap: wrap;
padding-bottom: 8px;
}
.button {
background: #1485FF;
display: block;
text-align: center;
border-radius: 4px;
margin: 32px 16px;
padding: 8px;
color: #fff;
text-decoration: none;
font-weight: 500;
}
.button:active,
.token.selected:active {
opacity: .8;
}
.token {
color: #1485FF;
border: 1px solid #1485FF;
color: #fff;
padding: 6px 8px;
margin: 0;
margin-right: 8px;
border-radius: 4px;
margin-bottom: 8px;
}
.token.selected {
display: inline-block;
background: #1485FF;
color: #fff;
}
.token:active,
.segmented-control a:active {
background: rgba(128, 125, 124, .2);
}
.token.selected:active {
background: #1485FF;
}
.segmented-control {
display: flex;
}
.segmented-control a {
width: 100%;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 15px;
margin: 0 0 1px -1px;
padding: 6px 8px;
border: 1px solid #1485FF;
}
.segmented-control a.selected {
background: #1485FF;
}
.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;
}
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: block;
line-height: 36px;
position: relative;
}
.form-switch i {
position: absolute;
display: inline-block;
width: 46px;
height: 26px;
background-color: rgba(118, 115, 114, 1);
border-radius: 23px;
transition: all 0.3s linear;
right: 4px;
top: 4px;
}
.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 !important;
}
.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>
var variables = {};
function trigger_named_async_without_response(actionName) {
window.BTT.callHandler('trigger_named_async_without_response', {trigger_name: actionName},
function callback(scriptResult) {
console.log('action result', scriptResult);
}
);
}
function getAllVariablesAndUpdateClass() {
console.log('looping through buttons');
const buttons = document.querySelectorAll('input');
buttons.forEach(function(button, i) {
const variable = button.id;
window.BTT.callHandler(
'get_string_variable',
{ variableName: variable},
function callback(currentVariableValue) {
console.log(
'the variable',
variable,
'is set to: ',
currentVariableValue
);
variables[button.id] = currentVariableValue;
button.className = currentVariableValue;
}
);
});
}
function toggleVariable(variable) {
var button = document.getElementById(variable);
if(variables[variable] === 'true') {
button.className = 'false';
variables[variable] = 'false';
window.BTT.callHandler('set_persistent_string_variable', {variableName: variable, to: 'false'});
} else {
button.className = 'true';
variables[variable] = 'true';
window.BTT.callHandler('set_persistent_string_variable', {variableName: variable, to: 'true'});
}
}
window.addEventListener(
'bttReady',
function(BTT) {
getAllVariablesAndUpdateClass();
},
false
);
</script>
</head>
<body>
<button id="var1" onClick="toggleVariable(this.id)">toggle var1</button>
<button id="var2" onClick="toggleVariable(this.id)">toggle var2</button>
<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, 'menu-bar')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/brightness.png" />
Menu Bar
</li>
<li class="tablink" onClick="openTab(event, 'dock-badges')">
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/watchos-icons/notifications.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 class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Default Settings')">Default</a>
<a class="token" onClick="trigger_named_async_without_response('GC\'s GC-BTT')">GC'S GC-BTT</a><br />
</section>
<h3>Escape Key</h3>
<section>
<ul>
<li>
<label class="form-switch">
Use Normal Escape Key
<input id="useNormalEscKey" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
</ul>
</section>
<small>When the normal Escape key is enabled, separate Fullscreen buttons will be added to the Home Strip and Control Menu.</small>
<h3>Home Strip Controls</h3>
<section class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Back/Forward Keys')">Back/Forward</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Refresh Key')">Refresh</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle New Tab Key')">New Tab</a>
</section>
<h3>Calendar App</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Fantastical')">Fantastical</a>
<a onClick="trigger_named_async_without_response('Use Apple Calendar')">Apple Calendar</a>
</div>
</section>
<small>Choose which app will open when you tap on a calendar item.</small>
<a class="button" onClick="trigger_named_async_without_response('Check All Settings')">Reapply All Settings</a>
</div>
<div id="menu-bar" class="tabcontent">
<header>
<h2>Menu Bar</h2>
</header>
<h3>Widgets</h3>
<section class="tokenlist">
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Collapse Menu Bar')">Collapse Menu Bar</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle GC-BTT Settings')">GC-BTT Settings</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Browser Tabs')">Browser Tabs</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Emoji Picker')">Emoji</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Current Language')">Language</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle App Switcher')">App Switcher</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Caffeinate')">Caffeinate</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Connect to Gamepad')">Gamepad</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Connect to Airpods')">AirPods</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Bluetooth Toggle')">Bluetooth</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Wi-Fi Toggle')">Wi-Fi</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Microphone Mute')">Microphone Mute</a>
<a class="token" onClick="trigger_named_async_without_response('Toggle Volume Mute')">Volume Mute</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Volume Down')">Volume Down</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Volume Up')">Volume Up</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Brightness Down')">Brightness Down</a>
<a class="token selected" onClick="trigger_named_async_without_response('Toggle Brightness Up')">Brightness Up</a>
</section>
<h3>Date Format</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Date/Time Format')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Use Large Date/Time Format')">Large</a>
<a onClick="trigger_named_async_without_response('Use Medium Date/Time Format')">Medium</a>
<a onClick="trigger_named_async_without_response('Use Small Date/Time Format')">Small</a>
</div>
</section>
<h3>Time Format</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use 12-Hour Time')">12-Hour</a>
<a onClick="trigger_named_async_without_response('Use 24-Hour Time')">24-Hour</a>
</div>
</section>
<h3>Weather</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Weather Widget')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Weather Widget')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Weather Widget')">Never</a>
</div>
</section>
<h3>Spotlight Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Spotlight Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Spotlight Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Spotlight Key')">Never</a>
</div>
</section>
<h3>Siri Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Siri Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Siri Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Siri Key')">Never</a>
</div>
</section>
<h3>Notification Center Key</h3>
<section>
<div class="segmented-control">
<a class="selected" onClick="trigger_named_async_without_response('Use Dynamic Notification Center Key')">Dynamic</a>
<a onClick="trigger_named_async_without_response('Always Show Notification Center Key')">Always</a>
<a onClick="trigger_named_async_without_response('Never Show Notification Center Key')">Never</a>
</div>
</section>
</div>
<div id="dock-badges" class="tabcontent">
<header>
<h2>Dock Badges</h2>
</header>
<small>
<p>Dock Badges allow you to see notification badges from apps in your dock, including from Handoff devices.</p>
<p>Because Dock Badges use slightly more energy than other widgets in GC-BTT, only badges for Apple apps are enabled by default. To save energy, only enable badges for apps you keep in your dock.<br /><br /></p>
</small>
<section>
<ul>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari.png" />
<label class="form-switch">
Safari
<input id="showSafariBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Safari Technology Preview.png" />
<label class="form-switch">
Safari Technology Preview
<input id="showSafariPreviewBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome.png" />
<label class="form-switch">
Google Chrome
<input id="showChromeBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Google Chrome Canary.png" />
<label class="form-switch">
Chrome Canary
<input id="showChromeCanaryBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Firefox.png" />
<label class="form-switch">
Firefox
<input id="showFirefoxBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/FaceTime.png" />
<label class="form-switch">
FaceTime
<input id="showFaceTimeBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Messages.png" />
<label class="form-switch">
iMessage
<input id="showiMessageBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/WhatsApp.png" />
<label class="form-switch">
WhatsApp
<input id="showWhatsAppBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Telegram.png" />
<label class="form-switch">
Telegram
<input id="showTelegramBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Franz.png" />
<label class="form-switch">
Franz
<input id="showFranzBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype.png" />
<label class="form-switch">
Skype
<input id="showSkypeBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Skype for Business.png" />
<label class="form-switch">
Skype for Business
<input id="showSkypeBusinessBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/YakYak.png" />
<label class="form-switch">
YakYak
<input id="showYakYakBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Chatty.png" />
<label class="form-switch">
Chatty
<input id="showChattyBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Caprine.png" />
<label class="form-switch">
Caprine
<input id="showCaprineBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Goofy.png" />
<label class="form-switch">
Goofy
<input id="showGoofyBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mail.png" />
<label class="form-switch">
Apple Mail
<input id="showAppleMailBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Microsoft Outlook.png" />
<label class="form-switch">
Outlook
<input id="showOutlookBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Spark.png" />
<label class="form-switch">
Spark
<input id="showSparkBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Airmail 3.png" />
<label class="form-switch">
Airmail
<input id="showAirmailBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Polymail.png" />
<label class="form-switch">
Polymail
<input id="showPolymailBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Boxy.png" />
<label class="form-switch">
Boxy
<input id="showBoxyBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Mailplane.png" />
<label class="form-switch">
Mailplane
<input id="showMailplaneBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Postbox.png" />
<label class="form-switch">
Postbox
<input id="showPostboxBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/MailMate.png" />
<label class="form-switch">
MailMate
<input id="showMailMateBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Slack.png" />
<label class="form-switch">
Slack
<input id="showSlackBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord.png" />
<label class="form-switch">
Discord Canary
<input id="showDiscordBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Discord Canary.png" />
<label class="form-switch">
Discord Canary
<input id="showDiscordCanaryBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Trello.png" />
<label class="form-switch">
Trello
<input id="showTrelloBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Bodo.png" />
<label class="form-switch">
Bodo
<input id="showBodoBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Abstract.png" />
<label class="form-switch">
Abstract
<input id="showAbstractBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Zeplin.png" />
<label class="form-switch">
Zeplin
<input id="showZeplinBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tweetbot.png" />
<label class="form-switch">
Tweetbot
<input id="showTweetbotBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitter.png" />
<label class="form-switch">
Twitter
<input id="showTwitterBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Twitch.png" />
<label class="form-switch">
Twitch
<input id="showTwitchBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Facebook.png" />
<label class="form-switch">
Facebook
<input id="showFacebookBadge" onClick="toggleVariable(this.id)" type="checkbox"><i></i>
</label>
</li>
<li>
<img src="https://raw.githubusercontent.com/GoldenChaos/GoldenChaos-BTT/master/app-icons/Tumblr.png" />
<label class="form-switch">
Tumblr
<input id="showTumblrBadge" onClick="toggleVariable(this.id)" 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();
</script>
</body>
</html>
FINALLY did it geeeez.
@Andreas_Hegenberg now that I actually get the buttons to update the variables, how can I chain that with the various button refresh scripts so that clicking on it also refreshes the key on the Touch Bar?
Nevermind I solved it! We're in business now babbyyyyyyyyy
All dock badge toggles + the escape key toggle now work and reflect their actual settings. This is pretty amazing to use.
Release imminent.
1 Like
More progress, will have another version out tomorrow 
That's a badge for News, yup! I'm adding badges for all Apple apps that support handoff.
In unrelated news, check out all these nice weather icons I found in the News assets.car file...
greatly considering updating my weather icons with these.
1 Like
Awesome! Sorry I couldn't look into it yet, but I'm now also back in business. All other freelance projects finished last week
2 Likes
All good! I totally understand how it goes. Welcome back 
btw, I bumped the thread in feature requests a while ago about calendar/reminders support, just wanna poke you about that while I've got you 
...