Guide V1.0 Beta
Resources: Online Design Tool: https://www.bitdsk.org/u_ui_design
First, you can refer to the image below to learn how to customize the UI.
Create a background image (bg.bin).
The background image must be a 320px * 240px BMP file.
You can generate the bg.bin file using the Online Design Tool at https://www.bitdsk.org/u_ui_design. Please ensure the format is correct.
Let’s get started with our JSON design.
Simple Design Overview:
We need a bg.bin file and a snippet of JSON code to modify the UI.
If you only want to change the background, you will need to generate and upload the bg.bin file, then enter the following in the UI JSON field:
{"screen_main": {"bg_img": "@bg_storage"}}Once entered, simply save and restart.
Full Design Overview:
The entire UI is divided into four main interfaces: cont_main, cont_weather, cont_price, and cont_price2.
Each interface contains various elements, and you can customize their color, font, background, position, and more.
The table below lists all available elements:
| panel | id | Info |
|---|---|---|
| cont_main | label_text_online_time | Waiting for additional instructions |
| cont_main | label_text_manage | |
| cont_main | label_temp | |
| cont_main | label_version | |
| cont_main | label_win_num | |
| cont_main | img_logo | |
| cont_main | label_text_difficulty | |
| cont_main | label_acc_rej | |
| cont_main | label_best_share | |
| cont_main | label_online_time | |
| cont_main | label_pool_url | |
| cont_main | label_manage_ip | |
| cont_main | label_pool_difficulty | |
| cont_main | label_text_best_share | |
| cont_main | label_main_hashrate | |
| cont_main | label_text_acc_rej | |
| panel | id | info |
|---|---|---|
| cont_weather | line_0du | Waiting for additional instructions |
| cont_weather | line_90du | |
| cont_weather | label_weather_icon | |
| cont_weather | label_hashrate2 | |
| cont_weather | label_text_logo2 | |
| cont_weather | label_city | |
| cont_weather | label_ymd | |
| cont_weather | label_text_hash2 | |
| cont_weather | label_week | |
| cont_weather | label_text_temperature | |
| cont_weather | label_temperature | |
| cont_weather | label_weather_str | |
| cont_weather | label_time2 |
| panel | id | info |
|---|---|---|
| cont_price | label_text_binance3 | Waiting for additional instructions |
| cont_price | label_price_top | |
| cont_price | label_text_hash3 | |
| cont_price | label_p6 | |
| cont_price | label_p5 | |
| cont_price | label_p4 | |
| cont_price | label_p3 | |
| cont_price | label_p2 | |
| cont_price | label_p1 | |
| cont_price | label_hash3 | |
| cont_price | chart_price | |
| cont_price | img_logo3 | |
| cont_price | label_coine_name3 |
| panel | id | info |
|---|---|---|
| cont_price2 | label_text_binanceprice | Waiting for additional instructions |
| cont_price2 | label_text_hash4 | |
| cont_price2 | label_hash4 | |
| cont_price2 | label_price5 | |
| cont_price2 | label_price4 | |
| cont_price2 | label_price3 | |
| cont_price2 | label_price2 | |
| cont_price2 | label_price1 | |
| cont_price2 | label_price5_name | |
| cont_price2 | label_price4_name | |
| cont_price2 | label_price3_name | |
| cont_price2 | label_price2_name | |
| cont_price2 | label_price1_name | |
| cont_price2 | label_text_logo4 |
Available fonts
| dig10,dig11,dig14,dig15,dig16,dig20,dig40,dig65,dig80 | Waiting for additional instructions |
| sans8,sans9,sans10,sans12,sans14,sans16,sans20 | |
| disp12,disp16,disp18 | |
| lite15 | |
| serif11 |
Basic JSON format：
{
"screen_main": {
"bg_img": "@bg_storage"
},
"label_pool_url": {
"x": 97,
"y": 219,
"w": 117,
"h": 19,
"text": "pool.example.com",
"font": "dig15",
"color": "0xFFFFFF",
"text_align": "right",
"label": "scroll",
"line_spacing": 0,
"letter_spacing": 2,
"bg_color": "0x002244",
"bg_opacity": "60%",
"hidden": false
},
"img_logo": {
"x": 3,
"y": 3,
"w": 42,
"h": 42,
"rotation": 15,
"hidden": false
},
"cont_main": {
"add_label": [
{
"x": 12,
"y": 8,
"w": 120,
"h": 20,
"text": "textA",
"font": "sans14",
"color": "0xFFFFFF",
"align": "left",
"label": "clip",
"line_spacing": 0,
"letter_spacing": 1
},
{
"x": 12,
"y": 32,
"w": 160,
"h": 20,
"text": "textB",
"font": "sans12",
"color": "0x00FF88",
"align": "center"
}
]
}
}
The following section, which is the beginning of the JSON, is used to trigger the use of the background image .bin file. If it is not included, the background image will not be loaded, and only the stylesheet will be applied.
"screen_main": {
"bg_img": "@bg_storage"
},Tip: We recommend compressing the UI JSON file when uploading it.
