5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[okadash] Simple and Highly Customizable dashboard tool for Mac and Windows

Last updated at Posted at 2019-10-12

Introduction

What is okadash??

  • The ansrew is, A tool to combine multiple sites on one screen!
    • Aiming to be an easy-to-use & highly customizable tool as a core concept 💪

How useful is it?

As an example, here are some examples of how I actually use it during my work.
(👇 This is okadash's screenshot. It may be easier to see if you click on the image to enlarge it)


スクリーンショット 2019-09-28 18.00.47.png

Slack, Trello, Kibela, Google Calendar, weather and normal calendar are displayed in one screen.
Basically, this dashboard is always displayed in full screen on one display, while the IDE or browser is opened on another display.

The key of this dashboard is when something happens in the communication on Slack

  • You can draft in Trello almost to no time as a ToDo
  • You can immediately check the schedule of the day with the scheduler and instantly estimate the time budget for the task.

And Kibela is always open and used to write daily reports and work logs.


It is a tool that allows you to create a dashboard like above example.

In the following, I will explain the functions more specifically , focusing on what you can do with this tool, especially the high degree of customization !

Definition of terms

Before that, I will first define the terms specific to this tool.
[NOTE] All of them are current at the time of article submission and may change in the future.

term Definition
board The entire window displaying multiple sites
panel One screen showing each site
panel_term.png

👆 This is one board, and each part surrounded by a frame is a panel.
As shown in the image, the left large panel is defined as a Main panel, the upper right horizontal panel is defined as a Sub panel, and the multiple lower right panel groups are Option defined as panels.

[NOTE] Tested Environment

This tool works on both Mac and Windows , but has been confirmed to work only on Mac.
All the shortcut keys that appear below are assumed to be on the Mac.


The repository is below.

By the way, Why okadash?
Because it is a dashboard tool created by me, Okada, so okadash. Really easy to understand 🎉

How to get started

Let's actually use this !! Start the tool included in zip!
The following welcome page will be displayed when you first start up (Welcome to okadash!)

スクリーンショット 2019-10-12 19.20.32.png

First, enter the name of your usual Slack workspace and click Let's okadash!!
Then, you will see the board in the default state as shown below.

initialize_image.gif

You need to log in to Slack and Twitter, as you only need to log in for the first time.
The installation procedure is That's All! From here, let's customize to your own board! !
(Switching the channel with the small Slack in the Option panel by Command + K)

Board display functions

Let's start by explaining the basic functions related to board operation and display methods. You can do this on
the displayed board ! I will explain that.

1. Drag the width and height of each panel

  • The information on the changed panel size is retained even when the screen is updated or next time it is started.

resize.gif

2. Maximized display mode

  • Click the arrow icon at the top left of each panel to maximize that panel.
    • Use the Esc key to close the maximized panel.
    • Use this when you want to concentrate on one of the panels.

maximize.gif

3. Display page in each panel can be changed

  • Click the switch icon in the upper right part of each panel to change the page displayed in that panel.

page_switch.gif

4. Display position can be changed and closed only on the Option panel

  • Only the bottom right Option panel can be switched and closed with the button at the bottom of the panel.
    • Also you can close the panel by Command + W that has focus.

option_switch.gif

  • Although it is a little difficult to understand, they are buttons surrounded by a red frame.
buttons.png

5. Option panel can be added

  • You can close, so you can also open !
    • It is possible to open from the top menu Open, but it is easy to open with the shortcut key 👍
    • By the way, with Command + L Google will open. Useful when you want to do a quick search.
スクリーンショット 2019-09-28 15.15.45.png

6. Set the display items of the board

  • Open the board settings screen from the top menu Board -> Preferences.
    • Each page displayed on each panel has the following setting items.
Item Content
Name Display name used when switching menus and pages
URL URL of the page to display
Custom CSS Setting value for overriding CSS when displaying page
  • In the below image, I am using Custom CSS only the content part of Slack.
    You can extract and display only the necessary parts on a narrow panel, it is very convenient to use it well!
スクリーンショット 2019-09-28 17.33.08.png
  • If you press the button + at the bottom of the setting screen, you can add items.
  • After changing the setting Save Board Setting, press the blue button in the left column and then press the Close button to return to the board display screen.
    • In the example below, you can see that the number of Option panels has actually increased.

save_prefs.gif

Actual usage pattern of mine

Now, the explanation of okadash functions so far is over.
Here are some examples of how you actually use them like this!

1. Daily business use (repost)

This is reposted.

スクリーンショット 2019-09-28 18.00.47.png

Once again, the reason for this board is that when a task occurs in communication on Slack...

  • You can draft in Trello almost to no time as a ToDo
  • You can check the schedule of the day with the scheduler and instantly estimate the time budget to spend on tasks

2. Study on a theme

スクリーンショット 2019-09-27 20.24.59(2).png

This board was opened while reading a book called Production Ready Micro Services.
It's like using Nginx's explanation page while reading and applying Google Translate to words I don't know.
When you want to concentrate like this, Slack and Twitter are completely noisy, so create a board for the study.

3. Monitoring dashboard

monitoring_ss.png

I think that it is a rather royal way to use as a dashboard tool, but I create a board that gives a bird's-eye view of the tools used in my work and check them regularly.
Opening one by one is very troublesome, so it is very convenient to see it on one screen.

Finally

  • I'd be happy if you could use it and comment if you have any impressions, feature requests, or improvements !
    • Because it is still under development. . . I look forward to Pull Requests too !!!
    • The most recent development planned items are...
      • Word search corresponding in each panel ( Like Command + F search console)
      • Chrome extension support
  • And If you LOVE this tool...
    • https://github.com/konoyono/okadash
    • Since it is my dream to be able to install with brew cask, more than 50 Github stars are needed 😍
    • I really appreciate for your cooperation :bow:
      • At the time of posting this article (11/5/2020) Stars are 41 !!!
5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?