macOS Control Center - MCC

In the dropdown to select a preset select the folder icon under data. Then open up MCC.html in some editor (I used Visual Studio Code) and scroll down to the code in the screenshot that yw4z shared. Then change clocktext2 to whatever you want. I changed it to:
var clocktext2=" "+tday[nday]+", "+tmonth[nmonth]+" "+ndate+" ";

Now the date looks like:

2 Likes

@Random_User

what you using for music player

can you share result of this applescript

tell application "BetterTouchTool"

set playingstatus to get_string_variable "BTTCurrentlyPlayingApp"

set songtitle to get_string_variable "BTTNowPlayingInfoTitle"

set artist to get_string_variable "BTTNowPlayingInfoArtist"

return playingstatus & " - " & songtitle & " - " & artist

end tell

i will add support

@yw4z

This is the result of running that:
"com.apple.Music - The Mountain - Of Mice & Men"

I'm just using the native music app in Catalina.

@Random_User

Im still on mojave :slight_smile: Is this working on apple music. Im planning to add a native raise player with apple script

tell application "Music"
activate
reveal current track
end tell

also you can fix that with changing this line in html

if (playingapp == "com.apple.iTunes" || playingapp == "com.spotify.client")
to this
if (playingapp == "com.apple.iTunes" || playingapp == "com.spotify.client" || playingapp == "com.apple.Music")

let me know if its working. i will add this for next release

1 Like

@yw4z

Editing the HTML fixed it :slightly_smiling_face:

how can I change it to a 12hr clock? I am a newbie to html.

1 Like

@gabester46

Get Clock AM PM
function GetClock(){
var d=new Date();
var nhour=(d.getHours() % 12),nmin=d.getMinutes();
var ampm = d.getHours() >= 12 ? 'PM' : 'AM';
if(nmin<=9) nmin="0"+nmin
if(nhour<=9) nhour="0"+nhour
var clocktext1=""+nhour+":"+nmin+"";
clock24.style.fontSize = "74px";
clock24.style.color = "#D3D3D3";
clock24.style.fontFamily = "-apple-system";
clock24.style.fontWeight = "200"
clock24.style.letterSpacing = "-0.03em";
clock24.style.textAlign = "center";
clock24.style.paddingRight = "8px";
document.getElementById('clock24').innerHTML=clocktext1;
var tday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var tmonth=["January","February","March","April","May","June","July","August","September","October","November","December"];
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate();
var clocktext2=" "+ndate+" "+tmonth[nmonth]+" "+tday[nday]+" "+ampm;
clockdate.style.fontSize = "16px";
clockdate.style.color = "#D3D3D3";
clockdate.style.fontFamily = "-apple-system";
clockdate.style.fontWeight = "400"
clockdate.style.textAlign = "center";
document.getElementById('clockdate').innerHTML=clocktext2;
}

didnt tested much but it should work, i will add settings page with that option on future

1 Like

@gabester46

I just added this under line 726 in MCC.html:

if(nhour>12) nhour=nhour-12;

It doesn't show AM or PM but it shows the correct hour for a 12hr clock. I think I'll try out yw4z's suggestion though.

@Andreas_Hegenberg

BTTNowPlayingInfoTitle still gets value from previous stopped player while im playing another player with artist value null. i did a much simpler code but showing wrong artist info. I can get correct results if artist value resets every change. I can support all apps that btt supports without adding every app name to code, also without BTTCurrentlyPlayingApp

I'll have a look! I think this is a bug that I need to fix.

Will this be added as native functionality in a future BTT update?

The control center? No. BTT just provides the tools to create stuff like this with the new webview implementation.

By the way: I have added more options for positioning (e.g. relative to the top right)

I saw that ones, they will be useful on other projects but still cant center top on different resolutions.

Also i have serious problems on scroll events. they freezing btt on current release

mh scroll events on the webview? or in general? (i haven’t seen any issues yet)

Try to use scroll events on floating view with trackpad. if you do a scroll up and down 4-5 times then try to move cursor to icons, hover effect will not show or you will see a beach ball :smiley: same with MCC

I was tried to disable window scrolling for swm but i found this

simply too many scrolling inputs freezing floating view. Im not sure its related but its even worse in my mcc settings pane. I added a changelog, user guide page to that so user has to do to much scroll. setting pane looks normal on safari. im still working on pane i will write again if i cant fix

I don't see any issues with your webviews and scroll events :-/ seems to work fine here.

By the way, you can center on the top with a trick: just add a too high y value here, BTT will automatically limit it to the screen frame:

Tested on 3.332 build 1529

Thanks Andreas for the tip, i will add a blank space to top with closeFloatingHTMLMenu it will work same as before

also can you check this simple code in floating view, i have to much lag with this

Example
<html>
<head>

<style>
        
html {
    background-color: clear;
    }
  
.tabcontainer{
    height: 400px;
    overflow: scroll;
    background: #1e1e1e;
    padding: 20px;
    width: 400px;
    }
    
h2 {
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 10px;
    color:#f5f5f5; 
    }
 

    </style>
</head>
<body align="center" >
    
<div class=tabcontainer>
    
<h2>Drag your favorite functions to right side. Dimmed items will not show in Control Center. Scroll down to see more predefined items</h2>
    
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor mollis lacus, et rhoncus nisi faucibus ut. Ut in hendrerit turpis. Aenean ut sem velit. Fusce id cursus tortor, nec convallis velit. Aliquam erat volutpat. Maecenas ultricies erat arcu, nec imperdiet lacus consequat sit amet. Aenean tristique enim nibh, non vehicula erat varius sagittis. Praesent dignissim consectetur auctor. Integer commodo tellus elit, et lacinia felis blandit sed. Aenean a velit lacinia, dictum dolor eu, blandit urna. Nunc ac aliquet neque.</h2>

<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor mollis lacus, et rhoncus nisi faucibus ut. Ut in hendrerit turpis. Aenean ut sem velit. Fusce id cursus tortor, nec convallis velit. Aliquam erat volutpat. Maecenas ultricies erat arcu, nec imperdiet lacus consequat sit amet. Aenean tristique enim nibh, non vehicula erat varius sagittis. Praesent dignissim consectetur auctor. Integer commodo tellus elit, et lacinia felis blandit sed. Aenean a velit lacinia, dictum dolor eu, blandit urna. Nunc ac aliquet neque.</h2>

<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>
    
<h2>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor, nibh quis luctus aliquet, est ipsum pharetra purus, vel ultrices augue sem vitae tortor. Ut venenatis vulputate ante a convallis. Duis gravida in dui sit amet blandit. Sed sit amet ipsum ipsum. Aenean viverra neque rhoncus eleifend lacinia. Maecenas quis molestie felis..</h2>

</div>  

    
</body>

</html>

i’m currently not at my computer but it’s quite possible that macos doesn’t like transparency when scrolling. Maybe check what happens if you set a solid background

I used clear background and solid on body, i have bigger problems if your btt not lagging :slight_smile:

Hey!

So after installing MCC, certain buttons like the Battery Boost controls pop up asking for an application on both my machine and everyone I have recommended this to so far. What other applications are needed for this to work properly?

Also, is there a chance we could get an icon list to know what actually does what?

I know that you said you don't want tooltips, but without them I honestly can't tell what certain icons are supposed to do. It would honestly increase the user experience if there was some sort of tooltip that popped up after hovering for a certain amount of time. Not adding this just because the iOS control center doesn't have tooltips doesn't really make a whole ton of sense since you're comparing a system with a mouse where tooltips are common to a system controlled via multitouch where tooltips aren't even really possible. The fact that you can't peel the skin off an apple very easily isn't a good enough reason to only eat oranges by biting straight into them.

Thanks!

1 Like