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

## 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9a165b8c-100b-0ca8-3e1a-dbb0ed85e8d9.png)|
|:-:|

Slack, Trello, [Kibela](https://kibe.la), 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/4493541c-c10b-b7bd-cf73-e2eed99bac6d.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.

- https://github.com/konoyono/okadash
- [okadash-1.7.0-win.zip](https://github.com/konoyono/okadash/releases/download/1.7.0/okadash-1.7.0-win.zip)
- [okadash-1.7.0-mac.zip](https://github.com/konoyono/okadash/releases/download/1.7.0/okadash-1.7.0-mac.zip)

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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/c468c1da-c18b-739e-ecdc-bb677fd49f81.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/15275be4-817b-4127-e3c3-e7d3448fa7c2.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/f0ebe2ec-c884-fe77-6e53-948cc057c806.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9669c497-cd3e-ec1b-382a-a7120398847a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/6a5c2ddb-493a-b487-79e4-c2b159d3fdbd.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/c1498fa7-12e0-ee36-916f-cd03bd005c05.gif)

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

|![buttons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/c3f12109-dd31-52a2-7647-b298274b6963.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/825bcf1d-c4b1-c274-2633-22711b8c7297.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/cc01f53e-c8dd-6ca3-9673-5a93b51a80bf.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/d6ac83f9-cf13-a1ae-8a49-a5df69eff97e.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/9a165b8c-100b-0ca8-3e1a-dbb0ed85e8d9.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/3254853d-8dc8-ccac-41ea-6dd176de9a17.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310513/87971850-4da0-606a-cf2c-9f5dbba8d258.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 !!!
      - https://github.com/konoyono/okadash/issues
   - 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` !!!