├── blur.widget.zip ├── screenshot.png ├── widget.json ├── README.md └── Blur.widget └── index.coffee /blur.widget.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atika/Ubersicht-Blur/HEAD/blur.widget.zip -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atika/Ubersicht-Blur/HEAD/screenshot.png -------------------------------------------------------------------------------- /widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blur", 3 | "description": "Create background blurred zones", 4 | "author": "Dominique Da Silva", 5 | "email": "dom@inspira.io" 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Übersicht | Blur Widget 2 | ================= 3 | :closed_book: [Übersicht Homepage](http://tracesof.net/uebersicht/) 4 |    :pushpin: [Übersicht Widgets](http://tracesof.net/uebersicht-widgets/) 5 |    :page_facing_up: [Widgets GitHub Repo](https://github.com/felixhageloh/uebersicht-widgets) 6 | 7 | Create background blurred zones with Übersicht on Mac OS X 8 | 9 | ![Blur Übersicht Widget](./screenshot.png) 10 | 11 | # Default Filters Values 12 | ``` 13 | filters = 14 | blur: 10 15 | brightness: 110 16 | saturate: 105 17 | contrast: 105 18 | ``` 19 | 20 | # Definition of each blurred bloc 21 | 22 | - **left**, **top**, **width** and **height** are required (in pixels). 23 | - Optionnaly you can set additionals styles and image blur, brightness, saturate or contrast. 24 | 25 | You can set to **"auto"** **left** or **width** and **top** or **height** 26 | 27 | **Exemples:** 28 | 29 | * left: "auto" and width: 200 (200 pixels width bloc positioned on the right 30 | * left: 200 and width: "auto" (A bloc starting at 200px from the left to the end of the screen) 31 | * top: "auto" and height: 300 (300 pixels height bloc positioned on bottom) 32 | 33 | ``` 34 | blocs = [ 35 | { 36 | "left": 330 37 | "top": 98 38 | "width": 780 39 | "height": 44 40 | "style": {"border-radius":5, "border": "solid 1px rgba(255,255,255,0.1)"} 41 | } 42 | { 43 | "left": 0 44 | "top": "auto" 45 | "width": "auto" 46 | "height": 190 47 | "blur": 8 48 | "style": {"border-top": "solid 1px rgba(255,255,255,0.1)"} 49 | } 50 | ] 51 | ``` 52 | 53 | -------------------------------------------------------------------------------- /Blur.widget/index.coffee: -------------------------------------------------------------------------------- 1 | # Blur Widget 2 | # Display blurred blocs on background 3 | # Dominique Da Silva 4 | # https://github.com/atika 5 | # Version 0.1 6 | 7 | # Default Filters Values (Required) 8 | # Blur (in pixels), brightness, saturation and contrast (in percentage) 9 | # You can also set specific values directly for each bloc 10 | filters = 11 | blur: 10 12 | brightness: 110 13 | saturate: 105 14 | contrast: 105 15 | 16 | # Definition of each blurred bloc : 17 | # left, top, width and height are required. 18 | # Optionally you can set additional styles and image blur, brightness, saturate or contrast. 19 | # 20 | # You can set to auto (left or width) or (top or height) 21 | # Examples: 22 | # left: "auto" and width: 200 (200 pixel width bloc positioned on the right) 23 | # left: 200 and width: "auto" (A bloc starting at 200px from the left to the end of the screen) 24 | # top: "auto" and height: 300 (300 pixel high bloc positioned on bottom) 25 | # 26 | # You can set to center (left or top) 27 | # Examples: 28 | # left: "center" and width: 400 (400 pixel width bloc horizontally centered on the screen) 29 | # top: "center" and height: 500 (500 pixel high bloc vertically centered on the screen) 30 | blocs = [ 31 | { 32 | "left": 330 33 | "top": 98 34 | "width": 780 35 | "height": 44 36 | "style": {"border-radius":5, "border": "solid 1px rgba(255,255,255,0.1)"} 37 | } 38 | { 39 | "left": 0 40 | "top": "auto" 41 | "width": "auto" 42 | "height": 190 43 | "blur": 8 44 | "style": {"border-top": "solid 1px rgba(255,255,255,0.1)"} 45 | } 46 | ] 47 | 48 | command: "" 49 | 50 | refreshFrequency: 3000000000000 51 | 52 | blocs: blocs 53 | filters: filters 54 | 55 | 56 | render: -> """ 57 | """ 58 | 59 | style: """ 60 | width: 100% 61 | height: 100% 62 | z-index: -100000 63 | overflow: hidden 64 | 65 | .bloc 66 | position:absolute 67 | overflow:hidden 68 | .flou 69 | -webkit-backdrop-filter: blur(#{filters.blur}px) brightness(#{filters.brightness}%) contrast(#{filters.contrast}%) saturate(#{filters.saturate}%) 70 | """ 71 | 72 | afterRender: (domEl)-> 73 | i = 0 74 | for bloc in @blocs 75 | blocname = "bloc#{i}" 76 | 77 | # Filters 78 | blur = if typeof(bloc.blur) == "number" then bloc.blur else @filters.blur 79 | brightness = if typeof(bloc.brightness) == "number" then bloc.brightness else @filters.brightness 80 | contrast = if typeof(bloc.contrast) == "number" then bloc.contrast else @filters.contrast 81 | saturate = if typeof(bloc.saturate) == "number" then bloc.saturate else @filters.saturate 82 | 83 | # Size and position 84 | if bloc.left == "auto" 85 | bloc.left = $(window).width() - bloc.width 86 | else if bloc.left == "center" 87 | bloc.left = ($(window).width() - bloc.width) / 2 88 | if bloc.top == "auto" 89 | bloc.top = $(window).height() - bloc.height 90 | else if bloc.top == "center" 91 | bloc.top = ($(window).height() - bloc.height) / 2 92 | if bloc.width == "auto" 93 | bloc.width = $(window).width() - bloc.left 94 | if bloc.height == "auto" 95 | bloc.width = $(window).height() - bloc.top 96 | 97 | $(domEl).append "
" 98 | $(".#{blocname}",domEl).css({"left":bloc.left,"top":bloc.top,"width":bloc.width,"height":bloc.height}) 99 | 100 | # Set custom style 101 | if typeof(bloc.style) == "object" 102 | $(".#{blocname}",domEl).css(bloc.style) 103 | 104 | # Apply custom filters 105 | $(".#{blocname}",domEl).css({"-webkit-backdrop-filter":"blur(#{blur}px) brightness(#{brightness}%) contrast(#{contrast}%) saturate(#{saturate}%)"}) 106 | i++ 107 | --------------------------------------------------------------------------------