-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (87 loc) · 7.97 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Figma to ESPHome converter</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.png">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<style>.github-fork-ribbon:before { background-color: #6d6d6d; }</style>
</head>
<body>
<a class="github-fork-ribbon" href="https://notisrac.github.io/FigmaToESPHome/" data-ribbon="Fork me on GitHub" title="Fork me on GitHub" target="_blank">Fork me on GitHub</a>
<div id="settings-form">
<h2 class="header">Figma to ESPHome converter</h2>
<h4>Generates YML and C++ code for an ESPHome display from a Figma document</h4>
<div>
<label for="figma_url">Figma Api URL<span class="info">URL of the Figma API</span></label></br>
<input type="text" id="figma_url" placeholder="Figma Files API URL" value="https://api.figma.com/v1/files"></input>
<label for="figma_api_token">Figma Api Token<span class="info">Token for the Figma Api: <a href="https://www.figma.com/developers/api#access-tokens" target="_blank">info</a></span></label></br>
<input type="text" id="figma_api_token" placeholder="Token for the Figma Files API" value=""></input>
<label for="figma_file_key">Figma file key<span class="info">The unique identifier of the Figma file</span></label></br>
<input type="text" id="figma_file_key" placeholder="Key of your Figma file" value=""></input>
<label for="page_name">Page name<span class="info">Name of the page, the design is on</span></label></br>
<input type="text" id="page_name" placeholder="Name of the page in the Figma file, e.g. 'Page 1'" value=""></input>
<label for="frame_name">Frame name<span class="info">The frame that contains the design</span></label></br>
<input type="text" id="frame_name" placeholder="Name of the frame that contains the UI design, e.g. 'Frane 1'" value=""></input>
<button id="generateBtn" type="submit">Generate</button>
</div>
<div id="errors" class="hidden">
<pre>
<code id="errorBlob" class="no-higlight"></code>
</pre>
</div>
</div>
<div id="results" class="hidden">
<span class="title">YML</span>
<span class="result_info">Copy these lines into your main ESPHome YML file, or save them in a new .yml file and include that in your main YML</span>
<pre>
<code id="ymlBlob" class="language-yml"></code>
<div class="copy_result">
<button type="button" title="Copy result" id="copy_to_clipboard_ymlBlob" class="copy_result_button" target-filed="ymlBlob">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5.00005C7.01165 5.00082 6.49359 5.01338 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202C5 6.51984 5 7.07989 5 8.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V8.2C19 7.07989 19 6.51984 18.782 6.09202C18.5903 5.71569 18.2843 5.40973 17.908 5.21799C17.5064 5.01338 16.9884 5.00082 16 5.00005M8 5.00005V7H16V5.00005M8 5.00005V4.70711C8 4.25435 8.17986 3.82014 8.5 3.5C8.82014 3.17986 9.25435 3 9.70711 3H14.2929C14.7456 3 15.1799 3.17986 15.5 3.5C15.8201 3.82014 16 4.25435 16 4.70711V5.00005M12 15H9M15 11H9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</pre>
<span class="title">C++ functions</span>
<span class="result_info">It is best to create a new .h file for these functions, then `#include "./thatfile.h"` in your main ESPHome display lambda code section</span>
<pre>
<code id="functionBlob" class="language-cpp"></code>
<div class="copy_result">
<button type="button" title="Copy result" id="copy_to_clipboard_functionBlob" class="copy_result_button" target-filed="functionBlob">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5.00005C7.01165 5.00082 6.49359 5.01338 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202C5 6.51984 5 7.07989 5 8.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V8.2C19 7.07989 19 6.51984 18.782 6.09202C18.5903 5.71569 18.2843 5.40973 17.908 5.21799C17.5064 5.01338 16.9884 5.00082 16 5.00005M8 5.00005V7H16V5.00005M8 5.00005V4.70711C8 4.25435 8.17986 3.82014 8.5 3.5C8.82014 3.17986 9.25435 3 9.70711 3H14.2929C14.7456 3 15.1799 3.17986 15.5 3.5C15.8201 3.82014 16 4.25435 16 4.70711V5.00005M12 15H9M15 11H9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</pre>
<span class="title">C++ code</span>
<span class="result_info">Copy these lines into your main ESPHome display lambda code section. Make sure to assign a value to all of the variables!</span>
<pre>
<code id="codeBlob" class="language-cpp"></code>
<div class="copy_result">
<button type="button" title="Copy result" id="copy_to_clipboard_codeBlob" class="copy_result_button" target-filed="codeBlob">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5.00005C7.01165 5.00082 6.49359 5.01338 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202C5 6.51984 5 7.07989 5 8.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V8.2C19 7.07989 19 6.51984 18.782 6.09202C18.5903 5.71569 18.2843 5.40973 17.908 5.21799C17.5064 5.01338 16.9884 5.00082 16 5.00005M8 5.00005V7H16V5.00005M8 5.00005V4.70711C8 4.25435 8.17986 3.82014 8.5 3.5C8.82014 3.17986 9.25435 3 9.70711 3H14.2929C14.7456 3 15.1799 3.17986 15.5 3.5C15.8201 3.82014 16 4.25435 16 4.70711V5.00005M12 15H9M15 11H9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</pre>
<span class="title">Files</span>
<span class="result_info">These are the image files used in the Figma design. Download all of them into the forlder specified in the YML section!</span>
<div class="download">
<ul id="download_items">
</ul>
</div>
</div>
<div id="footer">
<div id="copyright">
© 2024 - <a href="https://github.com/notisrac" target="_blank">noti</a> | <img src="./images/github-mark.svg"> <a href="https://github.com/notisrac/FigmaToESPHome" target="_blank">source</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script type="module" src="./scripts/main.js"></script>
</body>
</html>