├── README.md
├── fancybar.jsx
├── lib
    ├── Status
    │   ├── batteryLevels.js
    │   ├── index.jsx
    │   └── style.jsx
    ├── Workspaces
    │   ├── index.jsx
    │   └── style.jsx
    └── style.jsx
└── scripts
    ├── battery_charging_script
    ├── battery_percentage_script
    ├── compstatus
    ├── date_script
    ├── date_time_script
    ├── reminders.sh
    ├── screens
    ├── status.sh
    ├── time_script
    └── wifi_status_script


/README.md:
--------------------------------------------------------------------------------
 1 | # FancyBar
 2 | 
 3 | Personal [Übersicht](http://tracesof.net/uebersicht/) system information bars for use with [chunkwm]
 4 | 
 5 | *Screen Shots:*
 6 | ![img](https://user-images.githubusercontent.com/24897042/47940515-20933800-deeb-11e8-82dd-d3c7002cd718.png)
 7 | 
 8 | The original widget created by [Andy Pierz](https://github.com/apierz?tab=overview&from=2018-09-01&to=2018-09-30) can be found [here](https://github.com/apierz/nerdbar.widget).
 9 | 
10 | ### Ubersicht
11 | 
12 | ---
13 | 
14 | Übersicht creates a webview and places it on your desktop, just above the wallpaper but behind everyting else.
15 | This plugin is written in `.jsx` 
16 | 
17 | ## Installation
18 | 
19 | ```bash
20 | git clone https://github.com/blaadje/fancyBar.git $HOME/Library/Application\ Support/Übersicht/widgets/fancybar.widget
21 | ```
22 | 
23 | or to your current widget directory if you have changed it. The scripts may require installing some additional packages, such as Python, but all are available via homebrew.
24 | 
25 | The icons require the use of extra fonts:
26 | 
27 | - FontAwesome
28 | 
29 | That have to be installed system wide.
30 | 
31 | Enjoy :) don't hesitate to open issues if you have any trouble
32 | 
33 | ## Enhancement
34 | 
35 | This plugins is refreshing every second to make the datas up to date. That is taking a lots of battery usage and should be improved to update infos by chunkwm queries. Don't hesitate to fork if you have some ideas :)
36 | 


--------------------------------------------------------------------------------
/fancybar.jsx:
--------------------------------------------------------------------------------
 1 | import Workspaces from './lib/Workspaces/index.jsx'
 2 | import Status from './lib/Status/index.jsx'
 3 | 
 4 | export const refreshFrequency = 100
 5 | 
 6 | const backgroundStyle = {
 7 |   position: 'fixed',
 8 |   display: 'flex',
 9 |   background: 'rgba(35, 33, 70, 0.7)',
10 |   overflow: 'hidden',
11 |   width: '100%',
12 |   color: 'white',
13 |   top: '0px',
14 |   fontFamily: 'geneva',
15 |   fontSize: '.8rem',
16 |   right: '0px',
17 |   left: '0px',
18 |   height: '35px',
19 |   boxShadow: '-5px 5px 5px 0px rgba(0,0,0,0.3)',
20 | }
21 | 
22 | export const command = "sh fancybar.widget/scripts/screens && sh fancybar.widget/scripts/status.sh"
23 | 
24 | export const render = (props) => {
25 |   const output = props.output.split('\n')
26 | 
27 |   return (
28 |     <div style={backgroundStyle}>
29 |       <Workspaces output={output[0]} />
30 |       <Status output={output[1]} />
31 |     </div>
32 |   )
33 | }


--------------------------------------------------------------------------------
/lib/Status/batteryLevels.js:
--------------------------------------------------------------------------------
 1 | const batteryLevels = [
 2 |   {
 3 |     icon: '',
 4 |     levelMax: 15
 5 |   },
 6 |   {
 7 |     icon: '',
 8 |     levelMax: 50
 9 |   },
10 |   {
11 |     icon: '',
12 |     levelMax: 75
13 |   },
14 |   {
15 |     icon: '',
16 |     levelMax: 90
17 |   },
18 |   {
19 |     icon: '',
20 |     levelMax: 100
21 |   }
22 | ]
23 | 
24 | export default batteryLevels


--------------------------------------------------------------------------------
/lib/Status/index.jsx:
--------------------------------------------------------------------------------
 1 | import { 
 2 |   statusWrapper,
 3 |   statusItem,
 4 |   statusWifi,
 5 |   statusIsLoading,
 6 |   statusBattery,
 7 |   statusDateTime,
 8 |   batteryIcon,
 9 |   wifiIcon
10 | } from './style.jsx'
11 | 
12 | import batteryLevels from './batteryLevels.js'
13 | 
14 | const getbatteryStatus = ({ amount, state }) => {
15 |   amount  = parseInt(amount)
16 |   const isLoading = state === 'AC'
17 | 
18 |   const style = {
19 |     ...batteryIcon,
20 |     ...isLoading ? statusIsLoading : null 
21 |   }
22 | 
23 |   for (let i = 0; i <= batteryLevels.length - 1; i++) {
24 |     const item = batteryLevels[i]
25 | 
26 |     if (amount <= item.levelMax) {
27 |       return (
28 |         <div style={statusBattery}>
29 |           <span style={style}>{item.icon}</span>
30 |           <span>{amount}%</span>
31 |         </div>
32 |       )
33 |     }
34 |   }
35 | }
36 | 
37 | const getWifiStatus = ({ netStatus, netName }) => {
38 |   const netIcons = {
39 |     'Wi-Fi': '',
40 |     'USB 10/100/1000 LAN': '',
41 |     'Apple USB Ethernet Adapter': '',
42 |     none: ''
43 |   }
44 |   netName = netName === 'none' ? 'Not connected' : netName
45 | 
46 |   return (
47 |     <div style={statusWifi}>
48 |       <span style={wifiIcon} class='wifi'>{netIcons[netStatus]}</span>
49 |       <span class='white'>{netName}</span>
50 |     </div>
51 |   )
52 | }
53 | 
54 | const getDateTime = ({ time, date }) => {
55 |   return (
56 |     <div style={statusDateTime}>
57 |       <div>{time}</div>
58 |       <div>{date}</div>
59 |     </div>
60 |   )
61 | }
62 | 
63 | const render = (props) => {
64 |   const values = props.output.split('@')
65 | 
66 |   const dateTimeInfos = {
67 |     time: values[0].replace(/^\s+|\s+$/g, ''),
68 |     date: values[1]
69 |   }
70 |   const batteryInfos = {
71 |     amount: values[2],
72 |     state: values[3].split(' ')[1],
73 |   }
74 |   const wifiInfos = {
75 |     netStatus: values[4].split(' ')[1],
76 |     netName: values[5]
77 |   }
78 |   
79 | 
80 |   return (
81 |     <div style={statusWrapper}>
82 |       <div style={statusItem}>{getbatteryStatus(batteryInfos)}</div>
83 |       <div style={statusItem}>{getWifiStatus(wifiInfos)}</div>
84 |       <div style={statusItem}>{getDateTime(dateTimeInfos)}</div>
85 |     </div>
86 |   )
87 | }
88 | 
89 | export default render


--------------------------------------------------------------------------------
/lib/Status/style.jsx:
--------------------------------------------------------------------------------
 1 | import { icon, center } from '../style.jsx'
 2 | 
 3 | export const statusWrapper = {
 4 |   alignItems: 'stretch',
 5 |   alignContent: 'center',
 6 |   marginLeft: 'auto',
 7 |   justifyContent: 'space-around',
 8 |   display: 'flex',
 9 |   width: '23%'
10 | }
11 | 
12 | export const statusItem = {
13 |   display: 'flex',
14 |   padding: '0 .5rem',
15 |   justifyContent: 'center'
16 | }
17 | 
18 | export const statusBattery = {
19 |   ...center,
20 |   padding: '0 .5rem',
21 |   borderBottom: '1px solid #dda6bb'
22 | }
23 | 
24 | export const statusWifi = {
25 |   ...center,
26 |   padding: '0 .5rem',
27 |   borderBottom: '1px solid #cfe6e2'
28 | }
29 | 
30 | export const statusDateTime = {
31 |   ...center,
32 |   padding: '0 .5rem',
33 |   borderBottom: '1px solid #66b8cc',
34 |   flexDirection: 'column',
35 |   fontSize: '.6rem'
36 | }
37 | 
38 | export const batteryIcon = {
39 |   ...icon,
40 |   fontSize: '.8rem',
41 |   paddingRight: '.5rem'
42 | }
43 | 
44 | export const wifiIcon = {
45 |   ...icon,
46 |   fontSize: '10px',
47 |   lineHeight: '2',
48 |   paddingRight: '.5rem'
49 | }
50 | 
51 | export const statusIsLoading = {
52 |   color: '#16C020'
53 | }
54 | 


--------------------------------------------------------------------------------
/lib/Workspaces/index.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   worskpaceWrapper,
 3 |   workspaceCurrentIcon,
 4 |   workspaceIcon,
 5 |   workspaceDivider,
 6 |   workspaceInfos,
 7 |   workspaceWindowIcon,
 8 |   InfosAppName
 9 | } from './style.jsx'
10 | 
11 | const defaultIcon = ''
12 | const iconsList = ['', '', '', '']
13 | 
14 | const getWorkspaces = (workspaceAmount, active) => {
15 |   return [...Array(workspaceAmount)].map((item, index) => {
16 |     const currentIcon = iconsList[index] ? iconsList[index] : defaultIcon
17 |     const realIdx = index + 1
18 | 
19 |     if (realIdx === active) {
20 |       return <div style={workspaceCurrentIcon}>{currentIcon}</div>
21 |     }
22 |     return <div style={workspaceIcon}>{currentIcon}</div>
23 |   })
24 | }
25 | 
26 | const render = (props) => {
27 |   const values = props.output.split('@')
28 |   const mode = values[0].replace(/^\s+|\s+$/g, '')
29 |   const active = parseInt(values[2])
30 |   const total = parseInt(values[1])
31 |   const activeWindow = values[3] ? values[3].split(',') : '?'
32 |   const appName = activeWindow[0]
33 |     
34 |   return (
35 |     <div style={worskpaceWrapper}>
36 |       <div style={{ display: 'flex' }}>{getWorkspaces(total, active)}</div>
37 |       <div style={workspaceDivider} />
38 |       <div style={workspaceInfos}>
39 |         <div>{`[${mode}]`}</div>
40 |         <div style={workspaceWindowIcon}></div>
41 |         <div style={InfosAppName}>{appName}</div>
42 |       </div>
43 |     </div>
44 |   )
45 | }
46 | 
47 | export default render
48 | 
49 | // # $(".screen1").on 'click', => @run "osascript -e 'tell application \"System Events\" to key code 18 using control down'"
50 | // # $(".screen2").on 'click', => @run "osascript -e 'tell application \"System Events\" to key code 19 using control down'"
51 | // # $(".screen3").on 'click', => @run "osascript -e 'tell application \"System Events\" to key code 20 using control down'"
52 | // # $(".screen4").on 'click', => @run "osascript -e 'tell application \"System Events\" to key code 21 using control down'"
53 | 
54 | 


--------------------------------------------------------------------------------
/lib/Workspaces/style.jsx:
--------------------------------------------------------------------------------
 1 | import { icon } from '../style.jsx'
 2 | 
 3 | export const worskpaceWrapper = {
 4 |   width: '50%',
 5 |   alignItems: 'center',
 6 |   justifyContent: 'flex-start',
 7 |   display: 'flex'
 8 | }
 9 | 
10 | export const workspaceIcon = {
11 |   ...icon,
12 |   fontWeight: '300',
13 |   color: 'white',
14 |   padding: '1rem'
15 | }
16 | 
17 | export const workspaceCurrentIcon = {
18 |   ...workspaceIcon,
19 |   background: 'rgba(255, 255, 255, .1)'
20 | }
21 | 
22 | export const workspaceDivider = {
23 |   height: '80%',
24 |   background: 'white',
25 |   width: '1px',
26 |   margin: '0 1rem'
27 | }
28 | 
29 | export const workspaceInfos = {
30 |   display: 'flex',
31 |   alignItems: 'center',
32 |   color: 'white',
33 |   flexWrap: 'no-wrap'
34 | }
35 | 
36 | export const workspaceWindowIcon = {
37 |   ...icon,
38 |   margin: '0 1rem'
39 | }
40 | 
41 | export const InfosAppName = {
42 |   overflow: 'hidden',
43 |   width: '390px',
44 |   whiteSpace: 'nowrap',
45 |   textOverflow: 'ellipsis'
46 | }


--------------------------------------------------------------------------------
/lib/style.jsx:
--------------------------------------------------------------------------------
1 | export const icon = {
2 |   font: '10px FontAwesome5FreeSolid'
3 | }
4 | 
5 | export const center = {
6 |   display: 'flex',
7 |   justifyContent: 'center',
8 |   alignItems: 'center'
9 | }


--------------------------------------------------------------------------------
/scripts/battery_charging_script:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | pmset -g batt | grep "'.*'" | sed "s/'//g" | cut -c 18-19


--------------------------------------------------------------------------------
/scripts/battery_percentage_script:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | pmset -g batt | egrep '([0-9]+\%).*' -o --colour=auto | cut -f1 -d'%'


--------------------------------------------------------------------------------
/scripts/compstatus:
--------------------------------------------------------------------------------
1 | echo "$(sh ~/.kwm/scripts/time_script)@$(sh ~/.kwm/scripts/date_script)@$(sh ~/.kwm/scripts/battery_percentage_script)%@$(sh ~/.kwm/scripts/battery_charging_script)@$(sh ~/.kwm/scripts/wifi_status_script)"
2 | 


--------------------------------------------------------------------------------
/scripts/date_script:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | date +%d%b%y
4 | 


--------------------------------------------------------------------------------
/scripts/date_time_script:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | date +%d%b%y
4 | 


--------------------------------------------------------------------------------
/scripts/reminders.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | echo $(osascript -e "tell application \"Reminders\" to set reminderCount to count of (reminders in list \"Reminders\" whose completed is false)")
4 | 


--------------------------------------------------------------------------------
/scripts/screens:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | chunkc=/usr/local/bin/chunkc
 4 | 
 5 | active=$($chunkc tiling::query -d id)
 6 | total=$($chunkc tiling::query -D 1 | tail -c 1)
 7 | current=$($chunkc tiling::query --window name)
 8 | mode=$($chunkc tiling::query -d mode)
 9 | 
10 | echo "$mode@$total@$active@$current"


--------------------------------------------------------------------------------
/scripts/status.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/bash
 2 | 
 3 | WORKSPACE=fancybar.widget
 4 | 
 5 | echo $(sh $WORKSPACE/scripts/time_script)@ \
 6 |      $(sh $WORKSPACE/scripts/date_script)@ \
 7 |      $(sh $WORKSPACE/scripts/battery_percentage_script)%@ \
 8 |      $(sh $WORKSPACE/scripts/battery_charging_script)@ \
 9 |      $(sh $WORKSPACE/scripts/wifi_status_script)@ \
10 |      $(sh $WORKSPACE/scripts/reminders.sh) \
11 | 
12 | 


--------------------------------------------------------------------------------
/scripts/time_script:
--------------------------------------------------------------------------------
1 | #!/usr/bin/bash
2 | 
3 | date +%l:%M%p
4 | 
5 | # @$(date +%d%b%y)
6 | 


--------------------------------------------------------------------------------
/scripts/wifi_status_script:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/bash
 2 | 
 3 | services=$(networksetup -listnetworkserviceorder | grep 'Hardware Port')
 4 | 
 5 | while read line; do
 6 |     sname=$(echo $line | awk -F  "(, )|(: )|[)]" '{print $2}')
 7 |     sdev=$(echo $line | awk -F  "(, )|(: )|[)]" '{print $4}')
 8 |     # echo "Current service: $sname, $sdev, $currentservice"
 9 |     if [ -n "$sdev" ]; then
10 |         ifconfig $sdev 2>/dev/null | grep 'status: active' > /dev/null 2>&1
11 |         rc="$?"
12 |         if [ "$rc" -eq 0 ]; then
13 |             currentservice="$sname"
14 |             break
15 |         fi
16 |     fi
17 | done <<< "$(echo "$services")"
18 | 
19 | if [ -n "$currentservice" ] ; then
20 |     echo "$currentservice@$(networksetup -getairportnetwork en0 | cut -c 24-)@$(networksetup -getinfo "Apple USB Ethernet Adapter" | grep "IP address" | grep "\." | cut -c 13-)"
21 | else
22 |     >&1 echo "none@none@"
23 |     exit 1
24 | fi
25 | 


--------------------------------------------------------------------------------