divoom-watchface-visual-editor_v2/index.html at main · DivoomDevelop/divoom-watchface-visual-editor_v2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Divoom 表盘 PC 预览与编辑器</title>
</head>
<body>
  <div id="file-protocol-banner" class="file-protocol-banner" hidden>
    <div class="file-protocol-banner__inner">
      <strong id="file-banner-title"></strong>
      <p id="file-banner-body"></p>
      <button id="btn-dismiss-file-banner" type="button"></button>
    </div>
  </div>
  <header class="topbar">
    <div class="title-wrap">
      <h1 id="app-title">Divoom 表盘 PC 预览与编辑器</h1>
      <p id="app-subtitle">加载表盘 JSON，在 PC 上预览并编辑后再下发设备。</p>
    </div>
    <div class="top-actions">
      <label class="lan-device-switch" for="select-lan-device">
        <span id="lbl-lan-device">设备</span>
        <select id="select-lan-device"></select>
      </label>
      <button id="btn-refresh-lan-devices" type="button" class="btn-ghost btn-lan-device-refresh"></button>
      <label class="lang-switch" for="select-lang">
        <span id="lbl-lang">语言</span>
        <select id="select-lang"></select>
      </label>
      <button id="btn-lan-create" type="button" class="btn-lan" disabled></button>
      <button id="btn-lan-apply" type="button" class="btn-lan" disabled></button>
    </div>
  </header>

  <main class="layout" id="main-layout">
    <aside class="panel left-panel">
      <section class="card sidebar-watch-scope">
        <div class="sidebar-watch-tablist" role="tablist" aria-label="Watchface lists">
          <button id="sidebar-tab-local" type="button" class="sidebar-watch-tab" role="tab" aria-selected="true" aria-controls="sidebar-panel-local"></button>
          <button id="sidebar-tab-template" type="button" class="sidebar-watch-tab" role="tab" aria-selected="false" aria-controls="sidebar-panel-template"></button>
        </div>

        <div id="sidebar-panel-local" class="sidebar-watch-panel" role="tabpanel">
          <div class="btn-row">
            <button id="btn-new-watchface" type="button"></button>
          </div>
          <div id="local-watch-hint" class="hint"></div>
          <ul id="local-watchface-list" class="template-list local-watchface-list"></ul>
        </div>

        <div id="sidebar-panel-template" class="sidebar-watch-panel" role="tabpanel" hidden>
          <div class="field-row">
            <label id="lbl-template-category" for="select-template-category">模板分类</label>
            <select id="select-template-category"></select>
          </div>
          <div class="btn-row sidebar-template-actions">
            <button id="btn-reload-templates" type="button">刷新模板列表</button>
            <button id="btn-apply-template" type="button" class="btn-primary"></button>
          </div>
          <div id="template-hint" class="hint"></div>
          <ul id="template-list" class="template-list template-list-with-thumb"></ul>
        </div>
      </section>

      <section class="card">
        <h2 id="sec-canvas-title">2) 画布</h2>
        <div class="field-row">
          <label id="lbl-input-zoom" for="input-zoom">缩放(%)</label>
          <input id="input-zoom" type="range" min="20" max="180" value="55" />
          <span id="txt-zoom">55%</span>
        </div>
      </section>

    </aside>

    <section class="panel center-panel">
      <div class="canvas-toolbar">
        <div><span id="lbl-current-clock">当前表盘：</span><span id="txt-clock-title">未加载</span></div>
        <div><span id="lbl-clock-id">ClockId:</span> <span id="txt-clock-id">-</span></div>
        <div><span id="lbl-item-count">元素数:</span> <span id="txt-item-count">0</span></div>
        <div id="browse-template-toolbar-hint" class="browse-template-toolbar-hint" hidden></div>
      </div>
      <div id="preview-stage" class="preview-stage">
        <canvas id="watchface-canvas" width="800" height="1280"></canvas>
      </div>
      <div class="legend">
        <span id="legend-image" class="legend-chip image">图片/网络元素占位</span>
        <span id="legend-text" class="legend-chip text">文本元素</span>
        <span id="legend-pointer" class="legend-chip pointer">指针元素</span>
      </div>
    </section>

    <aside class="panel right-panel" id="right-editor-panel">
      <section class="card">
        <h2 id="sec-background-title">表盘底图</h2>
        <div class="field-row">
          <label id="lbl-input-bg-file" for="input-bg-file">选择底图</label>
          <input id="input-bg-file" type="file" accept="image/*" />
        </div>
        <div class="field-row">
          <label id="lbl-bg-source-path" for="txt-bg-source-path">底图路径</label>
          <input id="txt-bg-source-path" type="text" readonly class="bg-source-path" autocomplete="off" spellcheck="false" />
        </div>
        <div class="btn-row">
          <button id="btn-clear-bg" type="button">清除底图</button>
          <button id="btn-fit-resolution" type="button">应用分辨率</button>
        </div>
      </section>

      <section class="card">
        <h2 id="sec-itemlist-title">3) 显示元素(ItemList)</h2>
        <div class="btn-row">
          <button id="btn-add-item" type="button">新增</button>
          <button id="btn-dup-item" type="button">复制</button>
          <button id="btn-del-item" type="button">删除</button>
          <button id="btn-item-up" type="button">上移</button>
          <button id="btn-item-down" type="button">下移</button>
        </div>
        <ul id="item-list" class="item-list"></ul>
      </section>

      <section class="card">
        <h2 id="sec-editor-title">4) 选中元素编辑</h2>
        <div id="item-editor" class="editor-grid"></div>
      </section>
    </aside>
  </main>

  <dialog id="local-save-named-dialog" class="lan-dialog">
    <div id="local-save-named-panel">
      <h3 id="local-save-named-title" class="lan-dialog-title"></h3>
      <p id="local-save-named-body" class="lan-dialog-body hint"></p>
      <label class="lan-dialog-field">
        <span id="local-save-named-label"></span>
        <input id="local-save-named-input" type="text" autocomplete="off" maxlength="64" />
      </label>
      <div class="lan-dialog-actions">
        <button type="button" id="local-save-named-later" class="btn-ghost"></button>
        <button type="button" id="local-save-named-discard" class="btn-ghost" hidden></button>
        <button type="button" id="local-save-named-cancel" class="btn-ghost" hidden></button>
        <button type="button" id="local-save-named-submit" class="btn-primary"></button>
      </div>
    </div>
  </dialog>

  <dialog id="lan-create-dialog" class="lan-dialog">
    <form id="lan-create-form">
      <h3 id="lan-create-title" class="lan-dialog-title"></h3>
      <label class="lan-dialog-field">
        <span id="lan-create-label-text"></span>
        <input id="lan-create-name" type="text" autocomplete="off" maxlength="64" />
      </label>
      <div class="lan-dialog-actions">
        <button type="button" id="lan-create-cancel" class="btn-ghost"></button>
        <button type="submit" id="lan-create-submit" class="btn-primary"></button>
      </div>
    </form>
  </dialog>

  <template id="tpl-editor-field">
    <label class="editor-field">
      <span class="k"></span>
      <input />
    </label>
  </template>

  <script type="module" src="/src/main.js"></script>
</body>
</html>