Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@taniacomputer

taniacomputer/menubartrigger example

Last active March 5, 2019 09:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taniacomputer/84fe7e3ee60921fff8399b2968f62701 to your computer and use it in GitHub Desktop.
Save taniacomputer/84fe7e3ee60921fff8399b2968f62701 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
menubartrigger example
#!/bin/bash
# MenuBarTrigger Example
function create_webviews() {
echo "
html,
body {
overflow: hidden;
width: 270px;
height: 100%;
padding-left: 10px;
display: block;
text-align: center;
color: #a1a1a1;
background: #eee;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 4px;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: 2px;
}
.inprogressImage {
width: 25px;
margin-right: 5px;
}
.title {
text-align: left;
font-size: 12px;
height: 20px;
display: flex;
padding: 2px;
align: center;
margin-right: auto;
margin-left: auto;
width: 240px;
}
.inprogressSmallImage {
width: 12px;
margin-right: 12px;
}
.inprogressLargeImage {
width: 90px;
}
.inprogress {
color: black;
}
.grid-container {
font-size: 10px;
text-align: left;
height: 40px;
display: flex;
padding: 2px;
align: center;
margin-right: auto;
margin-left: auto;
width: 250px;
}
.grid-container-border {
margin-top: 10px;
border: 1px solid #a1a1a1;
border-radius: 5px;
width: 245px;
margin-right: auto;
margin-left: auto;
float: center;
justify-content: center;
align-items: center;
position: fixed;
left: 12px;
bottom: 10px;
}
.grid-container-description {
font-size: 10px;
color: #636363;
text-align: left;
height: 30px;
display: block;
padding: 2px;
align: center;
margin-top:-2px;
margin-bottom:10px;
margin-right: auto;
margin-left: auto;
width: 240px;
}
.grid-item {
display: inline-block;
padding: 8px;
text-align: center;
height: 32px;
width: 32px;
}
.grid-item img {
height: 30px;
width: 30px;
}
#inProgressIcon {
opacity: 0.5;
height: 30px;
width: 30px;
}
#inProgress {
position: absolute;
width: 30px;
height: 30px;
margin: 0px;
}
#time {
color: #0066cc;
display: inline;
}
.grid-container-button {
font-size: 10px;
color: #636363;
text-align: left;
height: 30px;
display: block;
padding: 2px;
align: center;
margin-top:-2px;
margin-bottom:10px;
margin-right: auto;
margin-left: auto;
width: 240px;
}
.grid-container-button button {
background: #0066cc;
padding: 0px;
line-height: 25px;
height: 25px;
width: 100px;
color: #fff;
font-size: 18px;
font-weight: normal;
float: center;
margin-right: auto;
margin-left: 70px;
margin-top: 5px;
align: center;
border: none;
}" > /var/tmp/stylesheet.css
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft Outlook</div></div>
<div class=\"grid-container-description\">
Outlook is our recommended mail client.<br/><br/>
Estimated completion time: <div id=\"time\">X minute</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\">
<img id=\"inProgressIcon\" src=\"./images/outlook - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint - uninstalled.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/1.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Slack</div></div>
<div class=\"grid-container-description\">
Sign in to <b>workspace-name.slack.com</b>.<br/>
Estimated completion time: <div id=\"time\">X minute</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/slack - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint - uninstalled.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/2.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Google Chrome</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/chrome - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint - uninstalled.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/3.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft Word</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/word - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint - uninstalled.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/4.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft PowerPoint</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/powerpoint - uninstalled.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/5.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft Excel</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/excel - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/6.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft OneNote</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/onenote - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/7.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Microsoft OneDrive</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/onedrive.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/8.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Skype For Business</div></div>
<div class=\"grid-container-description\"><br/><br/>
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive.png\"></div>
<div class=\"grid-item\"><img id=\"inProgress\" src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/skype - uninstalled.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/9.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Installing: <div id=\"name\">Zoom</div></div>
<div class=\"grid-container-description\">
Estimated completion time: <div id=\"time\">X minutes</div>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype.png\"></div>
<div class=\"grid-item\"><img src=\"https://s3.amazonaws.com/taniacomputer/wheel.gif\"><img id=\"inProgressIcon\" src=\"./images/zoom - uninstalled.png\"></div>
</div>
</div>
</body>
</html>" > /var/tmp/10.html
echo "<!DOCTYPE html>
<html>
<head>
<link href=\"./stylesheet.css\" type=\"text/css\" rel=\"stylesheet\" />
</head>
<body>
<div class=\"title\">Reboot Required</div></div>
<div class=\"grid-container-button\">
Setup is nearly complete - save any open documents and click reboot.<br/>
<button onclick=\"rebootClicked()\"\">Reboot</button>
</div>
<div class=\"grid-container-border\">
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/outlook.png\"></div>
<div class=\"grid-item\"><img src=\"./images/slack.png\"></div>
<div class=\"grid-item\"><img src=\"./images/chrome.png\"></div>
<div class=\"grid-item\"><img src=\"./images/word.png\"></div>
<div class=\"grid-item\"><img src=\"./images/powerpoint.png\"></div>
</div>
<div class=\"grid-container\">
<div class=\"grid-item\"><img src=\"./images/excel.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onenote.png\"></div>
<div class=\"grid-item\"><img src=\"./images/onedrive.png\"></div>
<div class=\"grid-item\"><img src=\"./images/skype.png\"></div>
<div class=\"grid-item\"><img src=\"./images/zoom.png\"></div>
</div>
</div>
</body>
<script type=\"text/Javascript\">
function rebootClicked() {
window.location.href = 'http://quit';
}
</script>
</html>" > /var/tmp/11.html
}
create_webviews
/usr/local/MenuBarTrigger.app/Contents/MacOS/MenuBarTrigger --file /var/tmp/1.html "sleep 5" \
--file /var/tmp/2.html "sleep 5 --icon /var/tmp/images/apple2.png" \
--file /var/tmp/3.html "sleep 5 --icon /var/tmp/images/apple3.png" \
--file /var/tmp/4.html "sleep 5 --icon /var/tmp/images/apple4.png" \
--file /var/tmp/5.html "sleep 5 --icon /var/tmp/images/apple5.png" \
--file /var/tmp/6.html "sleep 5 --icon /var/tmp/images/apple6.png" \
--file /var/tmp/7.html "sleep 5 --icon /var/tmp/images/apple7.png" \
--file /var/tmp/8.html "sleep 5 --icon /var/tmp/images/apple8.png" \
--file /var/tmp/9.html "sleep 5 --icon /var/tmp/images/apple9.png" \
--file /var/tmp/10.html "sleep 5 --icon /var/tmp/images/apple10.png" \
--file /var/tmp/11.html "wait --icon /var/tmp/images/apple11.png" \
--width 270 --height 190 --icon /var/tmp/images/apple1.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment