[<img align="left" width="80" height="auto" src="https://m3.ypcloud.com/cms/jdi_cards_jbuilder_cms_a1ff1a11b5.png">](https://run.ypcloud.com/)

## Table of Contents
* [What is a jBoard](#What-is-a-jBoard)
* [jBuilder and Dock Builder](#jBuilder-and-Dock-Builder)
* [How to access Dock Builder](#How-to-access-Dock-Builder)
* [jBuilder UI](#jBuilder-UI)
* [Dock Builder UI](#Dock-Builder-UI)
* [Process of making a jBoard](#Process-of-making-a-jBoard)
* [Tutorial video](#Tutorial-video)
* [Example jBoards](#Example-jBoards)
* [page://](#App-Field)
* [Board Library List](#Board-Library-List)
* [Dock Library List](#Dock-Library-List)

#### URLs
* [jBoard](https://jboard.ypcloud.com/)
* [jBuilder](https://jbuilder.ypcloud.com/)

---
## What is a jBoard

**[jBoard](https://jboard.ypcloud.com/)**
A service that display contents can be create by jBuilder & display your digital dashboards and display boards from anywhere with jBoard

[<img align="left" width="80" height="auto" src="https://m3.ypcloud.com/cms/jdi_cards_jboard_cms_c9c2b06f80.png" />](https://jboard.ypcloud.com/)

With jBuilder you can create jBoards that can be used as digital display boards or digital dashboards.

A jBoard consists of a series of individual boards combined on a dock menu, each having their own dock page.

You can navigate between dock pages from the dock menu at the bottom of a jBoard.

In other words: jBoard = boards + docks

---
## Example of a Board created with jBuilder:


---
## Example of a jBoard after combined with Dock builder:


---
## jBuilder and Dock Builder
There are two main work areas involved in jBuilder. <br>
In the default jBuilder work area you create individual boards, then move on to the Dock Builder work area to combine a series of boards to create a complete jBoard.

* jbuilder is to make boards
* Dock buidler is to add docks and let the boards combine into a jBoard

---
## How to access Dock Builder:
From the default jBuilder work area, click on the <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> icon on the top left corner to go to Dock Builder. <br>
To leave Dock Builder and return to jBuilder, click the <img src="https://i.imgur.com/HopFYkU.png" width=35 height=30> icon.

---
## jBuilder UI
<img src="https://i.imgur.com/fuglHd7.png" width=760>

On the left <img src="https://i.imgur.com/66dK5wO.png" width=30 height=30>, the user can define the board by specifying the number of columns and rows, as well as enable/disable the header and footer of the board frame.
The board grid serves as the framework for the board’s layout and helps us manage the proportions between elements for responsive web design.

Next is <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> which leads to Dock Builder.

The icons at the right of the tool bar have the following functions:
* Save board <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>, icon will not be visible until you have begun editing your board/Dock
* Add new panel <img src="https://i.imgur.com/J4a1Laa.png" width=30 height=30>
* Refresh workspace to start a new board <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30>
* View board in json format <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30>
* Open board library list <img src="https://i.imgur.com/rNDVXuk.png" width=30 height=30>
* Logout from your account <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30>

---
## Dock Builder UI
<img src="https://i.imgur.com/ShWoIiB.png" width=760>

In the top left corner, the <img src="https://i.imgur.com/HopFYkU.png" width=35 height=30> icon on the tool bar leads back to the default jBuilder work area.

The icons at the right of the tool bar have the following functions:
* Save Dock <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>, icon will not be visible until you have begun editing your board/Dock
* Open Dock library list <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>
* Refresh workspace to start a new Dock <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30>
* View Dock in json format <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30>
* Logout from your account <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30>

Below the tool bar, at the top of the work area is the header. There is no header by default, but if you wish to add one, click <img src="https://i.imgur.com/6biIEa1.png" width=31 height=30> to edit.

---
## [Process of making a jBoard](https://hackmd.io/@ypcloud-inc/steps)

### Tutorial video
YPCloud YouTube Channel (CC available)

- jBuilder Guide - ***[Basics](https://www.youtube.com/watch?v=3uBVg3pzuUc)***

{%youtube 3uBVg3pzuUc %}

- jBuilder Guide - ***[page://tg](https://www.youtube.com/watch?v=TS01Xj8mMwQ)***

{%youtube TS01Xj8mMwQ %}

- jBuilder Beginner's Guide #1 - ***[making jBoard pages](https://www.youtube.com/watch?v=N1Rp2mCwv0c)***

{%youtube N1Rp2mCwv0c %}

- jBuilder Beginner's Guide #2 - ***[Dock Builder](https://www.youtube.com/watch?v=eQV3zaiLxyY&t=50s)***

{%youtube eQV3zaiLxyY %}

### jBoard Examples
- https://jboard.ypcloud.com/?q=shin.me
- https://jboard.ypcloud.com/?q=allen.me
- https://jboard.ypcloud.com/?q=weiting.me
- https://jboard.ypcloud.com/?q=eugene.me
- https://jboard.ypcloud.com/?q=chris.me
- https://jboard.ypcloud.com/?q=rita.me

---
## App Field
- [page://](https://hackmd.io/@ypcloud-inc/app-field)

---
## Board Library List
<img src="https://i.imgur.com/gD2OhRz.png" width=760 height=150>

- Public list and private list
- Delete
- Clone

## Dock Library List
<img src="https://i.imgur.com/H3vXPgP.png" width=760 height=200>

- Public list and private list
- Delete
- Clone
- Edit Qname & name

---
### [FAQ](https://hackmd.io/@ypcloud-inc/faq)

---
<img align="left" height="40" src="https://m3.ypcloud.com/cms/jdi_cards_clouder_cms_6eae937bb7.png"> [Clouder Book](https://hackmd.io/@ypcloud-inc/book)

###### tags: `Clouder`,`guide`
> [Hi Clouders](https://hackmd.io/@ypcloud-inc/clouder)
> [name=Eugene]