Blingbling

From awesome
Jump to: navigation, search

Blingbling:[edit]

Blingbling is a graphical widget library for Awesome Windows Manager. The goal of the Blingbling library is to provide more fancy, customisable and easy to setup graphical widgets, popups or signals for Awesome WM. Originally, I have written Blingbling for myself but I share it with the hope that it could interest someone. Testers, feedbacks and suggestions are welcome!

At this moment Blingbling has 2 versions.

  • the v1.0 works for awesome 3.4.10 and 3.4.11. (I only maintain it)
  • the v2.0 which works with awesome version 3.5.

Dependencies[edit]

  • Blingbling v2.0

The version 2 of blingbling uses lgi so if you have a working Awesome WM v3.5 it should work without any other dependencies.

  • Blingbling v1.0

Blingbling requires oocairo. The address of the website of the project is : http://oocairo.naquadah.org.

Check you package manager to see if you can install an already packaged version of oocairo for your system.

For example on Archlinux:

 yaourt -S lua-oocairo-git

To install oocairo on Ubuntu

 $ mkdir temp
 $ cd temp
 # apt-get -b source oocairo
 # dpkg -i liblua5.1-oocairo0_1.4-1.2_amd64.deb
 # dpkg -i liblua5.1-oocairo-dev_1.4-1.2_amd64.deb
 $ cd ..
 $ rm -r temp


If you don't find an already packaged version of oocairo, you can install it from the source:

 git clone git://git.naquadah.org/oocairo.git
 cd oocairo*

and see the readme file for installation instructions.

Installation[edit]

  • Blingbling v2.0

($XDG_CONFIG_HOME usually ~/.config)

 cd $XDG_CONFIG_HOME/awesome/
 git clone git://github.com/cedlemo/blingbling.git
  • Blingbling v1.0

Two possibilities:

 cd $XDG_CONFIG_HOME/awesome/
 wget https://github.com/cedlemo/blingbling/archive/v1.0.zip
 unzip v1.0.zip

or

 cd $XDG_CONFIG_HOME/awesome/
 git clone git://github.com/cedlemo/blingbling.git
 cd blingbling
 git checkout v1.0

Usage[edit]

(In progress)

Blingbling v2.0[edit]

see https://github.com/cedlemo/blingbling and my current configuration file and theme https://github.com/cedlemo/blingbling/tree/master/config_example

Blingbling v1.0[edit]

You can easily configure the widgets, see the README file for all informations.

Blingbling provides:[edit]

  • Value text box:
This is a text box that can get a value between 0 and 1 and display it as text (like classical textbox widget in awesome). The difference with this widget, is that user can display a colored background with rounded corner (or not) behind the text. Furthermore user can set different colors to display the value (not all the text). ( 30>value< 70 set text color as green, value > 70% set text color as red for example).
  • Classical graph(v1 and v2 line_graph):
looks like the graph widget of Awesome but with tranparency and text support and more method to customize it.
  • Tiled graph:
like classical graph but value are displayed with tiles
  • Progress graph:
looks like the progress bar of Awesome but with tranparency and text support and more method to customize it. Can increase/decrease horizontaly or verticaly.
  • Progress bar:
like progress graph but graph is displayed on a cylinder.
  • Volume graph:
widget that display a value using a triangle or for bars with tranparency and text support. Can autoupdate on the master or mpd volume.
  • Mpd widget:
widget dedicated to mpd. It's read the a fifo generated by mpd and display a graph based on the pcm output. It can displays informations on current song, mpd state and can be bind with mpc command(volume +/-, next song, toggle stop/play).
  • Net widget:
widget that can display information on the internet connection of a device (upload/download) with arrows and text. Popup with information like ip address, gateway ip address, external ip adress and external tor ip address can be bind to it.
  • Top popup:
(doesn't need oocairo) popup, displaying colorized top output, that can be bind to any widget. Number of line of top output can be dynamically increase/decrease with mouse wheel up /wheel down
  • Netstat popup:
(doesn't need oocairo) poup, displaying colorized netstat output, that can be bind to any widget.
  • System shutdown/Reboot button:
(doesn't need oocairo) button that display a dialog menu for rebooting or shuting down the system. You need to an have active console kit session.
  • Udisks-glue widget menu:
(doesn't need oocairo) with a custom .udisks-glue.conf and this widget, you can have a menu linked to an icon that display dynamically devices handled by udisks-glue. This menu allows you to mount, unmount, detach or eject devices. Each event generate a popup displaying the type of device, the mount point and the action that have generated the popup (mount, unmount or remove device)
  • Menu widget:
This widget is based on the original menu widget from awful. With this menu, width of menus or submenus is auto-adjusted. There is no fixed width.
  • Task warrior widget:
Task warrior widget is an basic interface for task warrior (http://taskwarrior.org/projects/show/taskwarrior). The goal is to provide a quick way to see active projects and tasks and to provide basic management of tasks or project (just set task done for the moment).
  • Table widget layout:
This layout, when used in a wibox, allow users to display widgets like in a table.
  • Calendar widget:
It's a wibox that display a calendar of the current month with widgets. By default, you have two buttons for displaying next and previous month. Furthermore, you can see events of a day (from task warrior and remind by default) in a menu when the mouse pass on a day. Users can easily add or remove functions that get events from external applications.

examples of value text box widgets:[edit]

Blingbling value text box example.png

 --First widget on the left (the configurations for the other widgets are the same)
 my_fs=blingbling.value_text_box.new()
 my_fs:set_height(18)
 my_fs:set_width(40)
 my_fs:set_v_margin(2)
 my_fs:set_filled(true)
 my_fs:set_filled_color("#00000099")
 my_fs:set_values_text_color({{"#88aa00ff",0}, --all value > 0 will be displaying using this color
                              {"#d4aa00ff", 0.75},
                              {"#d45500ff",0.77}})
--There is no maximum number of color that users can set, just put the lower values at first. 
 my_fs:set_default_text_color(beautiful.textbox_widget_as_label_font_color)
 my_fs:set_rounded_size(0.4)
 my_fs:set_background_color("#00000044")
 my_fs:set_label("usage: $percent %")
 vicious.register(my_fs, vicious.widgets.fs, "${/home used_p}", 120)

examples of classical graph, progress graph and netwidget:[edit]

Example 1.png

 require("blingbling")
 --
 cpulabel= widget({ type = "textbox" })
 cpulabel.text='CPU: '
 --
 mycairograph=blingbling.classical_graph.new()
 mycairograph:set_height(18)
 mycairograph:set_width(360)
 mycairograph:set_tiles_color("#00000022")
 mycairograph:set_show_text(true)
 mycairograph:set_label("Load: $percent %")
 --
 --bind top popup on the graph
 blingbling.popups.htop(mycairograph.widget,
       { title_color =beautiful.notify_font_color_1, 
          user_color= beautiful.notify_font_color_2, 
          root_color=beautiful.notify_font_color_3, 
          terminal = "urxvt"})
vicious.register(mycairograph, vicious.widgets.cpu,'$1',2)
 --
 memwidget=blingbling.classical_graph.new()
 memwidget:set_height(18)
 memwidget:set_width(200)
 memwidget:set_tiles_color("#00000022")
 memwidget:set_show_text(true)
 vicious.register(memwidget, vicious.widgets.mem, '$2', 2)
 --
 mycore1=blingbling.progress_graph.new()
 mycore1:set_height(18)
 mycore1:set_width(6)
 mycore1:set_filled(true)
 mycore1:set_h_margin(1)
 mycore1:set_filled_color("#00000033")
 vicious.register(mycore1, vicious.widgets.cpu, "$2")
 -- 
 mycore2=blingbling.progress_graph.new()
 --
 --
 mycore4=blingbling.progress_graph.new()
 --
 --
 memlabel= widget({ type = "textbox" })
 memlabel.text='MEM: '
 memwidget=blingbling.classical_graph.new()
 memwidget:set_height(18)
 memwidget:set_width(200)
 memwidget:set_tiles_color("#00000022")
 memwidget:set_show_text(true)
 vicious.register(memwidget, vicious.widgets.mem, '$2', 2)
 --
 netwidget = widget({ type = "textbox", name = "netwidget" })
 netwidget.text='NET:'
 --bind nestat popup on textbox 
 blingbling.popups.netstat(netwidget,{ title_color = beautiful.notify_font_color_1, established_color= beautiful.notify_font_color_3, listen_color=beautiful.notify_font_color_2})
--
 my_net=blingbling.net.new()
 my_net:set_height(18)
 --activate popup with ip informations on the net widget
 Blingbling Example 4.png
 my_net:set_ippopup()
 my_net:set_show_text(true)
 my_net:set_v_margin(3)
Blingbling rounded corner and popup example.png
 mycairograph=blingbling.classical_graph.new()
 mycairograph:set_height(18)
 mycairograph:set_width(360)
 mycairograph:set_show_text(true)
 mycairograph:set_label("Load: $percent %")
 mycairograph:set_rounded_size(0.4)
 mycairograph:set_filled(true)
 mycairograph:set_filled_color("#00000033")
 vicious.register(mycairograph, vicious.widgets.cpu,'$1',2)
 --bind a top popup on the graph 
 blingbling.popups.htop(mycairograph.widget,
                       { title_color =beautiful.notify_font_color_1, 
                         user_color= beautiful.notify_font_color_2, 
                         root_color=beautiful.notify_font_color_3, 
                         terminal = "urxvt"})
 --
 mycore1=blingbling.progress_graph.new()
 mycore1:set_height(18)
 mycore1:set_width(20)
 mycore1:set_filled(true)
 mycore1:set_h_margin(1)
 mycore1:set_filled_color("#00000033")
 mycore1:set_show_text(true)
 mycore1:set_label("$percent")
 mycore1:set_rounded_size(0.4)
 vicious.register(mycore1, vicious.widgets.cpu, "$2")
 --
 mycore2=blingbling.progress_graph.new()
 --same as mycore1
 mycore3=blingbling.progress_graph.new()
 --same as mycore1
 mycore4=blingbling.progress_graph.new()
 --same as mycore1

examples of tiled graph:[edit]

Blingbling Example 3.png

 mycairograph=blingbling.tiled_graph.new()
 mycairograph:set_height(18)
 mycairograph:set_width(360)
 mycairograph:set_tiles_color("#00000022")
 mycairograph:set_show_text(true)
 mycairograph:set_label("Load: $percent %")

examples of progress bar and progress graph:[edit]

Blingbling example 2.png

 my_fs=blingbling.progress_bar.new()
 my_fs:set_height(18)
 my_fs:set_width(40)
 my_fs:set_show_text(true)
 my_fs:set_horizontal(true)  
 --  
 my_fs_root=blingbling.progress_bar.new() 
 my_fs_root:set_height(18)
 my_fs_root:set_width(40)
 my_fs_root:set_v_margin(2)
 my_fs_root:set_show_text(true)
 my_fs_root:set_horizontal(true)
 --
 my_fs_data0=blingbling.progress_graph.new()
 my_fs_data0:set_height(18)
 my_fs_data0:set_width(40)
 my_fs_data0:set_show_text(true)
 my_fs_data0:set_horizontal(true)
 my_fs_data0:set_filled(true)
 --
 my_fs_data1=blingbling.progress_bar.new()
 my_fs_data1:set_height(18)
 my_fs_data1:set_width(40)
 my_fs_data1:set_show_text(true)
 my_fs_data1:set_horizontal(true)
 my_fs_data1:set_filled(true)

Blingbling progress bar.png

 my_fs=blingbling.progress_bar.new()
 my_fs:set_height(18)
 my_fs:set_width(40)
 my_fs:set_show_text(true)
 my_fs:set_horizontal(true)
 --
 my_fs_root=blingbling.progress_bar.new()
 my_fs_root:set_height(18)
 my_fs_root:set_width(40)
 my_fs_root:set_show_text(true)
 my_fs_root:set_horizontal(false)
 --
 my_fs_data0=blingbling.progress_bar.new()
 my_fs_data0:set_height(18)
 my_fs_data0:set_width(40)
 my_fs_data0:set_show_text(true)
 my_fs_data0:set_horizontal(false)
 -- 
 my_fs_data1=blingbling.progress_bar.new()
 my_fs_data1:set_height(18)
 my_fs_data1:set_width(40)
 my_fs_data1:set_show_text(true)
 my_fs_data1:set_horizontal(true)

examples of volume bar and mpd visualizer:[edit]

Blingbling Example 5.png

 mpdlabel= widget({ type = "textbox" })
 mpdlabel.text='MPD: '
 --
 my_mpd_volume=blingbling.volume.new()
 my_mpd_volume:set_height(18)
 my_mpd_volume:set_width(30)
 --bind the volume graph on mpd  
 my_mpd_volume:update_mpd()
 --use bar, default is a triangle
 my_mpd_volume:set_bar(true)
 --
 my_mpd=blingbling.mpd_visualizer.new()
 my_mpd:set_height(18)
 my_mpd:set_width(350)
 my_mpd:update()
 --display pcm graph with a line
 my_mpd:set_line(true)
 my_mpd:set_h_margin(4)
 --bind mpc commands on the widget
 my_mpd:set_mpc_commands()
 --Show the artist name and the current song
 my_mpd:set_show_text(true)
 my_mpd:set_label("$artist > $title")
 --
 my_volume=blingbling.volume.new()
 my_volume:set_height(18)
 my_volume:set_width(30)
 --bind the volume widget on the master channel
 my_volume:update_master()
 my_volume:set_master_control()
 my_volume:set_bar(true)

example of reboot button:[edit]

Blingbling system reboot.png

 reboot=blingbling.system.rebootmenu(beautiful.reboot, beautiful.dialog_ok,     beautiful.dialog_cancel)

example of udisks-glue menu:[edit]

Blingbling udisks-glue menu.png Blingbling udisks-glue menu mount command.png

Blingbling udisks-glue menu unmount command.png Blingbling udisks-glue menu cannot eject.png Blingbling udisks-glue menu can eject.png

 udisks_glue=blingbling.udisks_glue.new(beautiful.dialog_ok)
 udisks_glue:set_mount_icon(beautiful.dialog_ok)
 udisks_glue:set_umount_icon(beautiful.dialog_cancel)
 udisks_glue:set_detach_icon(beautiful.dialog_cancel)
 udisks_glue:set_Usb_icon(beautiful.usb_icon)
 udisks_glue:set_Cdrom_icon(beautiful.cdrom_icon)

The udisks-glue.conf used:

 filter disks {
            optical = false
            partition_table = false
            usage = filesystem
 }
 filter optical {
           optical = true
 }
 match disks {
          automount = true
          automount_options = sync
          post_mount_command = "echo \'udisks_glue:mount_device(\"%device_file\",\"%mount_point\",\"Usb\")\' | awesome-client"
          post_unmount_command = "echo \'udisks_glue:unmount_device(\"%device_file\",\"%mount_point\",\"Usb\")\' | awesome-client"
          post_removal_command = "echo \'udisks_glue:remove_device(\"%device_file\",\"%mount_point\",\"Usb\")\' | awesome-client"
 }
 match optical {
         automount = true
         automount_options = ro
         post_mount_command = "echo \'udisks_glue:mount_device(\"%device_file\",\"%mount_point\",\"Cdrom\")\' | awesome-client"
         post_unmount_command = "echo \'udisks_glue:unmount_device(\"%device_file\",\"%mount_point\",\"Cdrom\")\' | awesome-client"
         post_removal_command = "echo \'udisks_glue:remove_device(\"%device_file\",\"%mount_point\",\"Cdrom\")\' | awesome-client"
 }

example of task warrior widget (it uses blingbling version of the menu widget):[edit]

Blingbling task warrior menu.png

 task_warrior=blingbling.task_warrior.new(beautiful.tasks_icon)
 task_warrior:set_task_done_icon(beautiful.task_done_icon)
 task_warrior:set_task_icon(beautiful.task_icon)
 task_warrior:set_project_icon(beautiful.project_icon)

example of Table widget layout[edit]

This example is the blingbling calendar widget (when not finished). It uses the array layout:

Blingbling table layout.png

 calendarbox.widgets={
 {displayed_month_and_year, layout = blingbling.layout.array.line_center },
 {day_widgets[1], day_widgets[2], day_widgets[3], day_widgets[4],
 day_widgets[5], day_widgets[6], day_widgets[7], layout =blingbling.layout.array.line_center},
 {days_of_month[1],days_of_month[2], days_of_month[3], days_of_month[4],
 days_of_month[5],days_of_month[6],days_of_month[7],layout =blingbling.layout.array.line_center},
 {days_of_month[8],days_of_month[9], days_of_month[10], days_of_month[11],
 days_of_month[12],days_of_month[13],days_of_month[14],layout =blingbling.layout.array.line_center},
 {days_of_month[15],days_of_month[16], days_of_month[17], days_of_month[18],
 days_of_month[19],days_of_month[20],days_of_month[21],layout =blingbling.layout.array.line_center},
 {days_of_month[22],days_of_month[23], days_of_month[24], days_of_month[25],
 days_of_month[26],days_of_month[27],days_of_month[28],layout =blingbling.layout.array.line_center},
 {days_of_month[29],days_of_month[30], days_of_month[31], days_of_month[32],
 days_of_month[33],days_of_month[34],days_of_month[35],layout =blingbling.layout.array.line_center},
 layout = blingbling.layout.array.stack_lines
 }

example of Calendar widget[edit]

Blingbling calendar basic.png

 my_cal =blingbling.calendar.new({type = "imagebox", image = beautiful.calendar_icon})
 --you can set blingbling.calendar.new({type = "textbox", text = "calendar"}) if you prefer a textbox
 my_cal:set_cell_padding(4)
 my_cal:set_columns_lines_titles_text_color(beautiful.text_font_color_2)
 my_cal:set_title_text_color(beautiful.bg_focus)
 --with only this you have a calendar  with 2 buttons (next and previous month)

Blingbling calendar remind.png Blingbling calendar task.png

Menu appears when you pass your mouse on a day.Switch between events from remind and task warrior (and all events you had) is done with mouse wheel (up/down).

 my_cal =blingbling.calendar.new({type = "imagebox", image = beautiful.calendar_icon})
 my_cal:set_cell_padding(4)
 my_cal:set_columns_lines_titles_text_color(beautiful.text_font_color_2)
 my_cal:set_title_text_color(beautiful.bg_focus)
 my_cal:set_link_to_external_calendar(true)
 --This last line activate the functions that get events for a day from remind or task warrior (you can remove them and add your own)