# macOS Control Center - MCC **URL:** \ **Category:** Setup/Preset Sharing\ **Tags:** media-controls, version-0-7-1, keyboard, floating-web-view\ **Created:** [January 18, 2020, 4:06pm UTC](https://community.folivora.ai/t/macos-control-center-mcc/13058 "2020-01-18T16:06:20Z")\ **Posts on this page:** 1\ **Showing post:** 28

**Author:** ![Andreas\_Hegenberg](https://community.folivora.ai/user_avatar/community.folivora.ai/andreas_hegenberg/32/39221_2.png) [@Andreas\_Hegenberg](https://community.folivora.ai/u/Andreas_Hegenberg)\ **Post date:** [February 4, 2020, 12:38pm UTC](https://community.folivora.ai/t/macos-control-center-mcc/13058/28 "2020-02-04T12:38:05Z")

In this example I added a performant way to get the now playing information. It requires BTT 3.294 alpha to work correctly. The marquee is not yet updated correctly - I think the code for this should be changed a bit but I didn't want to modify your stuff too much. > **Show Full HTML** > > ```auto > > > xmlns="http://www.w3.org/1999/xhtml" > xml:lang="tr" > lang="tr" > class="BTTDraggable" > > > > http-equiv="content-type" > content="text/html/javascript; charset=utf-8" > /> > > > > > > align="center" > scroll="no" > style="overflow: hidden; margin-top: 40px;" > class="BTTDraggable" > > > > class="BTTDraggable" > align="center" > width="100%" > style="padding-left: 28px; padding-right: 28px; margin-top: 10px;" > > > > > > > >

>
> >

id="mediacontrols" > align="center" > style="padding-top:5px" > class="BTTDraggable" > > > class="bt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:26}" > > id="beardedspiceback" > src="presetfile://MCC/MCT_BCB.png" > width="56" > height="38" > draggable="false" > /> > > class="bt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:26}" > > id="back" > src="presetfile://MCC/MCT_B.png" > width="56" > height="38" > draggable="false" > /> > > class="bt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:23}" > > id="playpause" > src="presetfile://MCC/MCT_P.png" > width="56" > height="38" > draggable="false" > /> > > class="bt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:27}" > > > id="forward" > src="presetfile://MCC/MCT_F.png" > width="56" > height="38" > draggable="false" > /> > > class="bt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:27}" > > > id="beardedspiceforward" > src="presetfile://MCC/MCT_BCF.png" > width="56" > height="38" > draggable="false" > /> > >

> >

class="overflow BTTDraggable" > style="font-size:15px;font-weight: 500; color:#c1c1c1; margin-top:-7px" > > > id="mccnpa" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccnpr',closeFloatingHTMLMenu: 1})" > >MacOS > >

class="overflow BTTDraggable" > style="font-size:13px;font-weight:400; color:#9d9d9d;" > > > id="mccnpt" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccnpr',closeFloatingHTMLMenu: 1})" > >Control Center > >

> > align="center" > valign="center" > border="0" > cellspacing="0" > cellpadding="0" > width="100%" > > style="padding-left: 28px; padding-right: 34px; margin-top: 0px;" > > > > > > > >

> >

style="margin-bottom: 4px; margin-top: 7px;" > class="BTTDraggable" > > > > > src="presetfile://MCC/N_FLIGHT.png" > height="44" > width="44" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccfli'})" > /> > > > > src="presetfile://MCC/N_AIRDROP.png" > height="44" > width="44" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccairdrop',closeFloatingHTMLMenu: 1})" > /> > >

> > > src="presetfile://MCC/N_WIRELESS.png" > height="44" > width="44" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccwir'})" > /> > > > class="bgcir" > id="bgcirbt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:279}" > > > src="presetfile://MCC/N_BLUETOOTH.png" > height="44" > width="44" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccblu'})" > /> > > > > >

> >

> > > src="presetfile://MCC/BATTERY.png" > align="left" > width="56" > height="56" > draggable="false" > /> > > onmouseover="this.style.color='greenyellow';" > onmouseout="this.style.color='';" > > > Battery >
> > onmouseover="this.style.color='yellow';" > onmouseout="this.style.color='';" > > > Boost > > > > > class="bgsbox" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:266}" > > > src="presetfile://MCC/MIRROR.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccdisplay'})" > /> > > > > src="presetfile://MCC/MONITOR.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccmonitor'})" > /> > > > > src="presetfile://MCC/SCRECT.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccsc',closeFloatingHTMLMenu: 1})" > /> > > > > src="presetfile://MCC/SCRECORD.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccscrec',closeFloatingHTMLMenu: 1})" > /> > >

> >

> > > src="presetfile://MCC/BTT_TOGGLE.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccbtt'})" > /> > > > > src="presetfile://MCC/MACSFAN.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccmfan'})" > /> > > > > src="presetfile://MCC/SCROLL.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccsmooze'})" > /> > > > > src="presetfile://MCC/ASLEEP.png" > width="56" > height="56" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccasleep'})" > /> > > > class="bgsbox" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:197}" > > > src="presetfile://MCC/DARKM.png" > width="56" > height="56" > draggable="false" > /> > > > class="bgsbox" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:201}" > > > src="presetfile://MCC/NSHIFT.png" > width="56" > height="56" > draggable="false" > /> > >

> > > id="briimg" > src="presetfile://MCC/S_BRIGHTNESS.png" > width="56" > height="56" > draggable="false" > /> > > > id="brirange" > class="range vertical-slider" > type="range" > min="0" > max="100" > step="1" > value="" > oninput="brifuncval(this.value)" > onchange="brifuncval(this.value)" > /> > > > > id="volimg" > src="presetfile://MCC/S_VOLUME.png" > width="56" > height="56" > draggable="false" > /> > > > id="volrange" > class="range vertical-slider" > type="range" > min="0" > max="100" > step="1" > value="" > oninput="volfuncval(this.value)" > onchange="volfuncval(this.value)" > oncontextmenu="volrc(this.value)" > /> >

> >

> > > > src="presetfile://MCC/BT_COPY_TO.png" > width="56" > height="36" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mcccop',closeFloatingHTMLMenu: 1})" > /> > > > > > src="presetfile://MCC/BT_MOVE_TO.png" > width="56" > height="36" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccmove',closeFloatingHTMLMenu: 1})" > /> > > > > > src="presetfile://MCC/BT_ALIAS_TO.png" > width="56" > height="36" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccalias',closeFloatingHTMLMenu: 1})" > /> > > > > src="presetfile://MCC/BT_ALIAS_PRE.png" > width="56" > height="36" > draggable="false" > /> > > > > > src="presetfile://MCC/BT_TEXT.png" > width="56" > height="36" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mcctext',closeFloatingHTMLMenu: 1})" > /> > > > > > src="presetfile://MCC/BT_FONT.png" > width="56" > height="36" > draggable="false" > onClick="window.BTT.callHandler('trigger_named',{trigger_name: 'mccfont',closeFloatingHTMLMenu: 1})" > /> > > > > src="presetfile://MCC/BT_DOWN.png" > width="56" > height="36" > draggable="false" > /> > > > > > src="presetfile://MCC/BT_CALENDAR.png" > width="56" > height="36" > draggable="false" > /> > > > > > src="presetfile://MCC/BT_APPLE.png" > width="56" > height="36" > draggable="false" > onclick="bgarec.style.display='none'; bgarec2.style.display='block';" > /> > > > id="bgarec2" > align="center" > onclick="mouseleave ()" > class="scaleside" > > > > > class="bgarecbt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:14&closeFloatingHTMLMenu=1}" > > > src="presetfile://MCC/HV_SLEEP.png" > width="20" > height="20" > draggable="false" > /> > > > class="bgarecbt" > href="bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:14&closeFloatingHTMLMenu=1}" > > > src="presetfile://MCC/HV_LOGOFF.png" > width="20" > height="20" > draggable="false" > /> > > > class="bgarecbt" > href="bttweb://trigger_named/?trigger_name=mccrestart&closeFloatingHTMLMenu=1" > > > src="presetfile://MCC/HV_RESTART.png" > width="20" > height="20" > draggable="false" > /> > > > class="bgarecbt" > href="bttweb://trigger_named/?trigger_name=mccshutdown&closeFloatingHTMLMenu=1" > > > src="presetfile://MCC/HV_SHUTDOWN.png" > width="20" > height="20" > draggable="false" > /> > > > >

> >

class="clsbt BTTDraggable" > align="center" > valign="center" > style="margin-top: -10px; margin-bottom: 6px;opacity: 0.3" > > > > > src="presetfile://MCC/CLOSE_BT.png" > width="56" > height="16" > draggable="false" > /> > >

> > > > > > > > ``` You can see all available variables in the BTT settings, however not all of them are updated regularly: ![image](https://community.folivora.ai/uploads/default/original/2X/8/8cc44a4868a74a225cb462efcf95e66399b1fdbf.png) By the way, the best way to debug this is to open the Safari Dev Tools (you need to enable Safari developer mode, afterwards you can debug the MCC.html file as soon as it is being shown by BTT) ![image](https://community.folivora.ai/uploads/default/original/2X/4/474abb184ff0776231f0bfae1616e0556b03e93f.jpeg) I'm using the bttweb urls to retrieve the data, but it would also work with the callHandler. I also added the new BTTDraggable class to most elements, which makes the window draggable. --- _[View the full topic](https://community.folivora.ai/t/macos-control-center-mcc/13058)._