Simple Window Manager - SWM

whoa thank you, when you post on blog how to do this, i fixed some things on code, i will release a final one

It's quite simple:

1.) Place the files in the folder that belongs to your preset. This folder can be accessed via the preset selection menu:

2.) In the path you specify to load the HTML, use the BTT_PRESET_PATH placeholder, which will point to the preset folder:

3.) In the HTML, you can reference files from the preset folder using presetfile:// like this:

4.) Now if you export your preset, it will automatically create a presetbundle file that includes all the content of the preset folder.

Also for a release build you should disable the "Do Not Cache" option to make it show up faster (during development this is useful):

In the latest build (3.255) you can also trigger actions like shown here: (a bit more readable than the other way)

HTML
<html>
  <head>
    <style>
      html {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
      }
      * {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
          "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      }

      div {
        position: absolute;
        background: #3d3d3d;
        border: 0.1em solid #5d5d5d;
        border-radius: 6px;
        width: auto;
        height: auto;
        text-align: left;
        box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.25);
      }

      div:after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 7px;
        background: #000000;
        z-index: -1;
      }

      table {
        width: 206;
        margin-left: 13px;
        margin-right: 8px;
      }

      st {
        display: block;
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: -1px;
        padding: 4px;
      }

      a {
        padding: 4px 4px;
        background: #3d3d3d;
        border-radius: 4px;
        line-height: 22px;
      }

      a:hover {
        background: #5d5d5d;
        cursor: default;
      }

      b {
        text-decoration: none;
        font-size: 12px;
        color: #ffffff;
        line-height: 22px;
        cursor: default;
      }

      img {
        width: 20px;
        height: 14px;
        vertical-align: middle;
      }

      hr {
        line-height: 1px;
        border: 0.06em solid #5d5d5d;
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 0px;
        margin-bottom: -1px;
      }

      container {
        display: flex;
        justify-content: space-between;
      }

      [data-title]:hover:after {
        opacity: 1;
        transition: all 0.1s ease 1s;
        visibility: visible;
        cursor: default;
      }

      [data-title]:after {
        content: attr(data-title);
        position: absolute;
        background: #3d3d3d;
        white-space: nowrap;
        height: 10px;
        left: 24px;
        top: 20px;
        padding: 0px 5px 10px 5px;
        border: 1px solid #5d5d5d;
        color: #ffffff;
        text-decoration: none;
        font-size: 12px;
        letter-spacing: 0.02em;
        -webkit-box-shadow: 0px 0px 4px #222;
        box-shadow: 0px 0px 4px #222;
        opacity: 0;
        z-index: 99999;
        visibility: hidden;
      }
      [data-title] {
        position: relative;
      }

      .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn;
        animation-duration: 0.2s;
      }

      @-webkit-keyframes zoomIn {
        from {
          opacity: 0.5;
          -webkit-transform: scale3d(0.3, 0.3, 0.3);
          transform: scale3d(0.3, 0.3, 0.3);
        }
        50% {
          opacity: 1;
        }
      }

      @keyframes zoomIn {
        from {
          opacity: 0;
          -webkit-transform: scale3d(0.3, 0.3, 0.3);
          transform: scale3d(0.3, 0.3, 0.3);
        }
        50% {
          opacity: 1;
        }
      }
    </style>

    <script>
      function BTTInitialize() {
        document.body.classList.add("zoomIn");
      }
      function BTTWillCloseWindow() {
        document.body.classList.remove("zoomIn");
      }
    </script>
  </head>

  <body class="zoomIn">
    <div>
      <table>
        <td align="left" valign="top">
          <b>Window...</b><br />

          <b>Halfs...</b><br />

          <b>Quarters...</b><br />

          <b>Thirds...</b><br />
        </td>

        <td>
          <!-- WINDOW -->
          <container>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-WM&closeFloatingHTMLMenu=1"
              data-title="Maximize"
            >
              <img src="presetfile://SWM/SWM_WM.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-WR&closeFloatingHTMLMenu=1"
              data-title="Restore"
            >
              <img src="presetfile://SWM/SWM_WR.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-WHO&closeFloatingHTMLMenu=1"
              data-title="Hide Others"
            >
              <img src="presetfile://SWM/SWM_WHO.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-WS&closeFloatingHTMLMenu=1"
              data-title="Switcher"
            >
              <img src="presetfile://SWM/SWM_WS.png"
            /></a>
          </container>
          <container>
            <!-- HALF -->
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-HL&closeFloatingHTMLMenu=1"
              data-title="Left"
            >
              <img src="presetfile://SWM/SWM_HL.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-HR&closeFloatingHTMLMenu=1"
              data-title="Right"
            >
              <img src="presetfile://SWM/SWM_HR.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-HT&closeFloatingHTMLMenu=1"
              data-title="Top"
            >
              <img src="presetfile://SWM/SWM_HT.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-HB&closeFloatingHTMLMenu=1"
              data-title="Bottom"
            >
              <img src="presetfile://SWM/SWM_HB.png"
            /></a>
          </container>
          <container>
            <!-- CORNER -->
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-CLT&closeFloatingHTMLMenu=1"
              data-title="Left-Top"
            >
              <img src="presetfile://SWM/SWM_CLT.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-CLB&closeFloatingHTMLMenu=1"
              data-title="Left-Bottom"
            >
              <img src="presetfile://SWM/SWM_CLB.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-CRT&closeFloatingHTMLMenu=1"
              data-title="Right-Top"
            >
              <img src="presetfile://SWM/SWM_CRT.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-CRB&closeFloatingHTMLMenu=1"
              data-title="Right-Bottom"
            >
              <img src="presetfile://SWM/SWM_CRB.png"
            /></a>
          </container>
          <container>
            <!-- THIRDS -->
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-TL&closeFloatingHTMLMenu=1"
              data-title="Left"
            >
              <img src="presetfile://SWM/SWM_TL.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-TLT&closeFloatingHTMLMenu=1"
              data-title="Left Two"
            >
              <img src="presetfile://SWM/SWM_TLT.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-TM&closeFloatingHTMLMenu=1"
              data-title="Middle"
            >
              <img src="presetfile://SWM/SWM_TM.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-TRT&closeFloatingHTMLMenu=1"
              data-title="Right Two"
            >
              <img src="presetfile://SWM/SWM_TRT.png"
            /></a>
            <a
              href="bttweb://trigger_named/?trigger_name=SWM-TR&closeFloatingHTMLMenu=1"
              data-title="Right"
            >
              <img src="presetfile://SWM/SWM_TR.png"
            /></a>
          </container>
        </td>
      </table>

      <hr />

      <st>
        <container>
          <a
            href="bttweb://trigger_named/?trigger_name=SWM-MC&closeFloatingHTMLMenu=1"
            data-title="Move to Center"
          >
            <img src="presetfile://SWM/SWM_MC.png"
          /></a>
          <a
            href="bttweb://trigger_named/?trigger_name=SWM-MLS&closeFloatingHTMLMenu=1"
            data-title="Move to Left Space"
          >
            <img src="presetfile://SWM/SWM_MLS.png"
          /></a>
          <a
            href="bttweb://trigger_named/?trigger_name=SWM-MRS&closeFloatingHTMLMenu=1"
            data-title="Move to Right Space"
          >
            <img src="presetfile://SWM/SWM_MRS.png"
          /></a>
          <a
            href="bttweb://trigger_named/?trigger_name=SWM-MNM&closeFloatingHTMLMenu=1"
            data-title="Move to Next Monitor"
          >
            <img src="presetfile://SWM/SWM_MNM.png"
          /></a>
          <a
            href="bttweb://trigger_named/?trigger_name=SWM-WSC&closeFloatingHTMLMenu=1"
            data-title="Screenshot"
          >
            <img src="presetfile://SWM/SWM_WSC.png"
          /></a>
        </container>
      </st>
    </div>
  </body>

</html>


Thanks Andreas for tips and detailed guide,

i updated first post with new presetbundle,

changes;

disabled image dragging and right clicking for more native look

changed font to -applesystem for compatibility

added "activate/bring to front window under cursor" trigger before right click on green window button for floating view, its working on deactive windows now

changed hover color to blue

"do not cache" option disabled

cleaned some lines

this is great! How do I get the native options on Catalina to not show up behind the floating web view?

im not sure how we bypass that menu. but you can select fn key in btt then use fn+right click on green button or simply use fn+w shortcut

Or use the yellow button instead :slight_smile:

Added 0.2 version of SWM to first post

Changelog

  • Added support for fullscreen applications
  • Corrected position of SWM window
  • Changed all triggers to predefined ones, your Bettertouchtool trigger list cleaner now.

Added 0.2.1 version of SWM to first post

Changelog

  • Better solution for fullscreen apps. its working great now
  • Switcher button will work as Mission Control when window is in fullscreen mode & Application Expose on normal windows

@Andreas_Hegenberg you may want to check code

Code

function BTTpredefinedaction (bttaction){
var predefinedhref = "bttweb://trigger_action/?json={%22BTTPredefinedActionType%22:replacethis}&closeFloatingHTMLMenu=1"
{window.location.href = predefinedhref.replace('replacethis',bttaction) };
}

async function windowmaximize(){
await runAppleScript({script: unmaximise});
BTTpredefinedaction (21);
};

this cleanup things so much

Yellow Button doesn't work. however if I wait until the OS X menu pops up and then activate SWM the OSX menu goes away and SWM works as designed.

I mean you would need to change SWM to trigger on the yellow button, can be done in the "Named & Other Triggers" section in BTT.

@jlc1978 change this value, something wrong if you changed already, i cant test atm im not on catalina

@Andreas_Hegenberg is that possible to bypass that menu or i will add an option with menubar icon

great preset, just installed it and already started to like it :slight_smile:

it does feel a little laggy though, compared to the same actions (e.g. resize window to right half) compared to the same action that I have coded into short keys before. Is this something that could be improved without too much hassle?

hi @weller , thanks for comment, there is a small delay because preset checking application is fullscreen window or not with an applescript when you trigger action , i guess this delay is acceptable. you can delete all "await runAppleScript({script: unmaximise});" lines from html file if you don't need fullscreen support :wink: i changed applescript a bit with this release, im not sure its a placebo effect but it looks like faster now. Let me know if you see some improvement

Added 0.2.2 version of SWM to first post

Changelog

  • Possible speedup on triggering actions

@Andreas_Hegenberg

this setting reason of lags when scrolling on floating windows, i changed to 0,2 before without any reason :slight_smile: i changed to 0,5 no lags now

yep, removing the unmaximise-lines does the trick :slight_smile: thanks!
I don't use fullscreen, so for me its fine. but maybe there is a way for applescript to tell if the window is fullscreen, and only unmaximise if that is the case?

hovering over the green button opens another menu - if you are not quick enough for the SWM, both menus will be displayed at the same time.

@weller actually that script does same thing but waiting answer from macos before triggering window actions. around 100-200 milliseconds. its ok for me for fullscreen support.

Added 0.2.3 version of SWM to first post
Changelog

  • Changed trigger button to yellow (minimise button) instead of green for Catalina users
  • Minor changes

installed 0.2.3. seems to me that sometimes it takes significantly longer than 100-200 ms. might be something else (external display?), but now it does indeed feel 'snappy'.

i tried different methods, this one is best so far. Im on external display too but didn't saw any extreme delays

Updated first post with 0.2.4 release

Changelog

  • Reduced RAM usage, half of previous release
  • Window actions faster now with fullscreen support
  • Cleanup on code

Updated first post with 0.3 release

Changelog

  • New - Aligning windows
  • New - Buttons for Split screen feature
  • New - Keyboard Shortcuts. Check first post for complete list
  • New - Resize windows with Keyboard Shortcuts
  • New - Fullscreen toggle with Keyboard Shortcuts
1 Like