• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html lang="en" style="width: 100%; height: 100%;">
3<head>
4    <meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Napi</title>
7</head>
8<style type="text/css">
9    body {
10        background-color: var(--vscode-editor-background, #000000);
11        margin:0 auto;
12        font-family: "Microsoft YaHei";
13        opacity: 0.9;
14    }
15    a {
16        text-decoration: none;
17    }
18
19    button.button {
20        font-family: "Microsoft YaHei";
21        font-size: 13px;
22        border-radius: 3px;
23        align-self: center;
24        outline: none;
25        width: 100px;
26        height:24px
27    }
28
29    input.text {
30        width: 250px;
31        vertical-align:middle;
32
33        background-color: var(--vscode-editor-background, #000000);
34        color: var(--vscode-editor-foreground, #ffffff);
35        border-radius: 6px;
36        border: 1px solid #555555;
37        opacity: 0.9;
38        height: 24px;
39    }
40    input.text:hover {
41        outline: none;
42        border-color: var(--vscode-focusBorder, #272727);
43    }
44    .tabs{
45        position: relative;
46        height: 800px;
47        min-height: 800px;
48        max-height: 800px;
49        clear: both;
50        margin: 25px 0;
51        overflow: hidden;
52    }
53    .tab{
54        float: left;
55        margin: 25px 0;
56    }
57    .tab label{
58        background: #eee;
59        padding: 10px 20px;
60        position: relative;
61        left: 1px;
62        border: 0px solid;
63        margin-left: -1px;
64        z-index: 2;
65        color: #333333;
66        background: white;
67    }
68
69    .content{
70        position: absolute;
71        top: 61px;
72        left: 0;
73        right: 0;
74        bottom: 0;
75        background: black;
76        padding: 20px 20px;
77        border: 0px solid #ccc;
78        max-height: 800px;
79        overflow: scroll;
80    }
81    [type=radio]:checked ~ label{
82        color: white;
83        background: #3288e9;
84        border: 0px solid #ccc;
85        z-index: 3;
86    }
87    [type=radio]:checked ~ label ~ .content{
88        z-index: 1;
89    }
90    .simtextarea{
91        width: 254px;
92        min-height: 24px;
93        max-height: 220px;
94        line-height: 24px;
95        word-wrap: break-word;
96        overflow-x: hidden;
97        overflow-y: auto;
98
99        background-color: var(--vscode-editor-background, #000000);
100        color: var(--vscode-editor-foreground, #ffffff);
101        border-radius: 6px;
102        border: 1px solid #555555;
103        opacity: 0.9;
104    }
105    .simtextarea:hover {
106        outline: none;
107        border-color: var(--vscode-focusBorder, #272727);
108    }
109    .simtextarea:focus {
110        outline: 1px solid orange;
111    }
112
113    .ul-select {
114        position: relative;
115    }
116
117    .ul-select ul {
118        position: absolute;
119        top: 28px;
120        left: 2px;
121        padding: 0;
122        z-index: 5;
123        width: 250px;
124        display: none;
125        list-style: none;
126        border: 1px solid #555555;
127        font-size: 0px;
128    }
129
130    .ul-select li a {
131        display: inline-block;
132        width: 100%;
133        height: 22px;
134        padding-top: 3px;
135        color: var(--vscode-menu-foreground, #ffffff);
136        text-indent: 5px;
137        background: var(--vscode-menu-background, #000000);
138        font-family: "Microsoft YaHei";
139        font-size: 13px;
140        text-decoration: none;
141    }
142
143    .ul-select li a:hover {
144        color: var(--vscode-menu-selectionForeground, #ffffff);
145        background: var(--vscode-menu-selectionBackground, #2979f1);
146    }
147</style>
148<script type="text/javascript">
149    var mode = 0;
150    var flag = 0;
151    let vscode = acquireVsCodeApi();
152
153    function sendGnParamMsg() {
154        var outputCodeDir = document.getElementById("outputCodeDirid").value;
155        var originCodeDir = document.getElementById("originCodeDirid").value;
156        var inputScriptDir = document.getElementById("inputScriptDirid").value;
157        var scriptType = document.getElementById("scriptTypeid").value;
158        var transplantDir = document.getElementById("transplantDirid").value;
159        var subsystemName = document.getElementById("test_subsystemid").value;
160        var componentName = document.getElementById("test_partid").value;
161        var compileOptions = document.getElementById("compileOptionsid").innerText.replaceAll("\n", "");
162        var extFileRadio = document.getElementById("extFileRadio");
163        var extFlagRadio = document.getElementById("extFlagRadio");
164        var extFileInput = document.getElementById("extFileInput");
165        var extFlagInput = document.getElementById("extFlagInput");
166        var buttonName = document.getElementById("okButton").textContent;
167
168        var result = {
169            msg: "gn",
170            outputCodeDir: outputCodeDir,
171            originCodeDir: originCodeDir,
172            inputScriptDir: inputScriptDir,
173            scriptType: scriptType,
174            transplantDir: transplantDir,
175            subsystemName: subsystemName,
176            componentName: componentName,
177            compileOptions: compileOptions,
178            extFile: extFileRadio.checked ? extFileInput.value : "",
179            extFlag: extFlagRadio.checked ? extFlagInput.value : "",
180            buttonName: buttonName,
181        }
182        vscode.postMessage(result);
183    }
184
185    function selectinputScriptDir() {
186        var result = {
187            msg: "selectinputScriptDir",
188            mode: 0,
189        }
190        vscode.postMessage(result);
191    }
192
193    function selectoutputCodePath(message) {
194        var result = {
195            msg: message,
196            mode: 1,
197        }
198        vscode.postMessage(result);
199    }
200
201    function selectoriginCodePath(message) {
202        var result = {
203            msg: message,
204            mode: 1,
205        }
206        vscode.postMessage(result);
207    }
208
209    function selecttransplantPath(message) {
210        var result = {
211            msg: message,
212            mode: 1,
213        }
214        vscode.postMessage(result);
215    }
216
217    function cancel() {
218        var result = {
219            msg: "cancel"
220        }
221        vscode.postMessage(result);
222    }
223
224    function getoutputCodeDirPath(filepath) {
225        let fileTempName = "out";
226        let pos = filepath.indexOf(fileTempName);
227        filepath = filepath.substr(pos);
228        return filepath;
229    }
230
231    function getinputScriptDirPath(filepath) {
232        let fileTempName = "third_party";
233        let pos = filepath.indexOf(fileTempName);
234        filepath = filepath.substr(pos);
235        return filepath;
236    }
237
238    function gettransplantDirPath(filepath) {
239        let pos = filepath.lastIndexOf('/');
240        filepath = filepath.substr(pos);
241        return filepath;
242    }
243
244    window.addEventListener('message', event => {
245            const message = event.data.msg;
246            const path = event.data.path;
247            if (message == "selectinputScriptDir") {
248                let filepath = getinputScriptDirPath(path);
249                document.getElementById("inputScriptDirid").value = filepath;
250                fillInputDir2(path);
251            } else if (message == "selectoutputCodeDir") {
252                let filepath = getoutputCodeDirPath(path);
253                document.getElementById("outputCodeDirid").value = filepath;
254                fillInputDir(path);
255            } else if (message == "selectoriginCodeDir") {
256                document.getElementById("originCodeDirid").value = path;
257            } else if (message == "selecttransplantDir") {
258                let filepath = gettransplantDirPath(path);
259                document.getElementById("transplantDirid").value = filepath;
260            } else if (message == "colorThemeChanged") {
261                reloadFileImgPic();
262            }
263            else {
264                console.log("param is error");
265            }
266    })
267
268    function fillInputDir(fileNames){
269        let getDir;
270        let fileName;
271        fileName = fileNames;
272        let fileTempName = "out";
273	    let pos = fileName.indexOf(fileTempName);
274        getDir = fileName.substring(0,pos-1);
275        document.getElementById("originCodeDirid").value = getDir;
276        document.getElementById("inputScriptDirid").value = getDir;
277    }
278
279    function fillInputDir2(fileNames){
280        let getDir;
281        let fileName;
282        fileName = fileNames;
283        let fileTempName = "third_party";
284        let pos = fileName.indexOf(fileTempName);
285        fileName = fileName.substr(pos);
286        getDir = fileName.substring(0,fileName.lastIndexOf('/'));
287        document.getElementById("transplantDirid").value = getDir;
288    }
289
290    function showElement(id){
291        document.getElementById(id).style.display = "";
292    }
293
294    function hideElement(id){
295        document.getElementById(id).style.display = "none";
296    }
297
298    function selectBlur(inputObj) {
299        var t = inputObj;
300        setTimeout(() => {t.nextSibling.nextSibling.style.display = 'none';},150);
301    }
302
303    function selectFocus(inputObj) {
304        inputObj.nextSibling.nextSibling.style.display = 'block';
305    }
306
307    function liClick(liObj) {
308        liObj.parentNode.previousSibling.previousSibling.value = liObj.innerText;
309    }
310
311    function isDarkColor(colorArr) {
312        let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114;
313        return grayLevel < 192;
314    }
315
316    function reloadFileImgPic() {
317        var bodyobj = document.getElementsByTagName("body")[0];
318        var extFileRadio11 = document.getElementById("extFileRadio");
319        var bgStyle = document.defaultView.getComputedStyle(bodyobj, null);
320        var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g);
321        var isDarkBackground = true;
322        if (bgColor) {
323            isDarkBackground = isDarkColor(bgColor);
324        }
325
326        var fileImgPng = isDarkBackground ? "file.png" : "file_black.png"
327        var currentFileImgPath = document.getElementById("outputCodeDirImg").src;
328        var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1);
329        fileImgPath += fileImgPng;
330        document.getElementById("outputCodeDirImg").src = fileImgPath;
331        document.getElementById("originCodeDirImg").src = fileImgPath;
332        document.getElementById("inputScriptDirImg").src = fileImgPath;
333        document.getElementById("transplantDirImg").src = fileImgPath;
334    }
335</script>
336<body>
337<div class="tabs">
338    <div class="tab">
339        <label for="tab1">Gn-Gen</label>
340        <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;">
341            <tr>
342                <td width="110px">工程输出路径*:</td>
343                <td width="340px">
344                    <input class="text" accept="text" id="outputCodeDirid" value="out\rk3568">
345                    <img id="outputCodeDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoutputCodePath('selectoutputCodeDir')">
346                </td>
347            </tr>
348            <tr>
349                <td>工程源码路径*:</td>
350                <td>
351                    <input class="text" type="text" id="originCodeDirid">
352                    <img id="originCodeDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoriginCodePath('selectoriginCodeDir')">
353                </td>
354            </tr>
355            <tr>
356                <td>输入脚本路径*:</td>
357                <td>
358                    <input class="text" type="text" id="inputScriptDirid" onchange="inputChange()" onporpertychange="inputChange() ">
359                    <img id="inputScriptDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectinputScriptDir()">
360                </td>
361            </tr>
362            <tr>
363                <td>输入脚本类型*:</td>
364                <td>
365                    <div class="ul-select"><span></span>
366                        <input class="text" type="text" id="scriptTypeid" value="cmake" readonly="readonly" onfocus="selectFocus(this);" onblur="selectBlur(this);" />
367                        <ul>
368                            <li onclick="liClick(this);"><a href="">make</a></li>
369                            <li onclick="liClick(this);"><a href="">cmake</a></li>
370                            <li onclick="liClick(this);"><a href="">scons</a></li>
371                        </ul>
372                    </div>
373                </td>
374            </tr>
375            <tr>
376                <td>GN生成路径*:</td>
377                <td>
378                    <input class="text" type="text" id="transplantDirid" value="third_party">
379                    <img id="transplantDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selecttransplantPath('selecttransplantDir')">
380                </td>
381            </tr>
382            <tr>
383                <td>子系统名称*:</td>
384                <td>
385                    <input class="text" type="text" id="test_subsystemid" value="test_subsystem">
386                </td>
387            </tr>
388            <tr>
389                <td>组件名称*:</td>
390                <td>
391                    <input class="text" type="text" id="test_partid" value="test_part">
392                </td>
393            </tr>
394            <tr>
395                <td>编译选项:</td>
396                <td>
397                    <div class="simtextarea" id="compileOptionsid" contenteditable="true"><br /></div>
398                </td>
399            </tr>
400            <tr>
401                <td>扩展文件类型:</td>
402                <td>
403                    <input type="radio" id="extFileRadio" name="extFileRadio" onClick="showElement('extFileTr')" style="margin-left: 8px;">是</input>
404                    <input type="radio" name="extFileRadio" onClick="hideElement('extFileTr')" checked>否</input>
405                    <a href="" target="_blank" title="添加编译脚本需要支持的特殊文件类型，&#10;多个类型之间用英文逗号分隔。&#10;例如：.cc, .hpp">
406                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
407                    </a>
408                </td>
409            </tr>
410            <tr id="extFileTr" style="display: none;">
411                <td style="padding-bottom: 15px;">扩展文件后缀:</td>
412                <td style="padding-bottom: 15px;">
413                    <input class="text" type="text" id="extFileInput" placeholder="文件后缀名，如：.cc, .hpp"/>
414                </td>
415            </tr>
416            <tr>
417                <td>扩展编译选项:</td>
418                <td>
419                    <input type="radio" id="extFlagRadio" name="extFlagRadio" onClick="showElement('extFlagTr')" style="margin-left: 8px;">是</input>
420                    <input type="radio" name="extFlagRadio" onClick="hideElement('extFlagTr')" checked>否</input>
421                    <a href="" target="_blank" title="添加编译脚本需要支持的特殊编译选项，&#10;多个选项之间用英文逗号分隔。&#10;例如：--target=, -march=">
422                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
423                    </a>
424                </td>
425            </tr>
426            <tr id="extFlagTr" style="display: none;">
427                <td style="padding-bottom: 15px;">扩展选项名称:</td>
428                <td style="padding-bottom: 15px;">
429                    <input class="text" type="text" id="extFlagInput" placeholder="编译选项，如：--target=, -march="/>
430                </td>
431            </tr>
432            <tr>
433                <td colspan="2">
434                    <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
435                    <button id="okButton" type="button" class="button" onclick="sendGnParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button>
436                    <a href="https://gitee.com/openharmony/napi_generator" target="_blank">
437                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
438                    </a>
439                </td>
440            </tr>
441        </table>
442    </div>
443</div>
444</body>
445</html>
446<script>
447    reloadFileImgPic();
448</script>