-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·155 lines (147 loc) · 7.42 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WLED Draw Something</title>
<link rel="stylesheet" href="./assets/css/style.css" inline>
<!-- HTML Meta Tags -->
<title>WLED Draw Something</title>
<meta name="description" content="A pixel art tool that allows you to draw something and see it live update in your WLED 2D Matrix">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://mvaneijgen.nl/wled-draw-something/">
<meta property="og:type" content="website">
<meta property="og:title" content="WLED Draw Something">
<meta property="og:description" content="A pixel art tool that allows you to draw something and see it live update in your WLED 2D Matrix">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary">
<meta property="twitter:domain" content="mvaneijgen.nl">
<meta property="twitter:url" content="https://mvaneijgen.nl/wled-draw-something/">
<meta name="twitter:title" content="WLED Draw Something">
<meta name="twitter:description" content="A pixel art tool that allows you to draw something and see it live update in your WLED 2D Matrix">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">
<link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#0094ff">
<meta name="msapplication-TileColor" content="#0094ff">
<meta name="theme-color" content="#0094ff">
</head>
<body>
<div id="app">
<!-- Sidebar -->
<aside>
<div class="inner">
<div class="title">
<h1>{{ title }}</h1>
<h3>Version {{version}}</h3>
<p v-if="demo" class="description">Demo mode is activated. For the best use of this tool install it in to your WLED controller, see <a href="https://github.com/mvaneijgen/wled-draw-something#use-the-tool">install guide on Github!</a></p>
</div>
<a class="btn btn-two back-to-wled" v-if="wledUrl" :href="wledUrl">⬅ Go back to WLED</a>
<!-- 🎛️ Controls -->
<div class="controls">
<div class="alloy-input-group">
<label for="color">Current Color</label>
<input type="color" id="color" name="head" v-model.lazy="color">
</div>
<div class="alloy-input-group">
<label for="pallete">Pallete history</label>
<svg class="colorPallete" :view-box.camel="viewBoxPallete">
<g v-for="(item, yIndex) in yPallete">
<rect v-for="(item, xIndex) in xPallete" :key="xIndex"
:x="size * xIndex" :y="size * yIndex" :width="size"
:height="size" stroke="#0c162d"
:fill="fillPallete[xIndex + xPallete * yIndex]"
@click="changeColor"
:data-number="xIndex + xPallete*yIndex" />
</g>
</svg>
</div>
<!-- <button @click="post">Send mannualy🚀</button> -->
<div class="alloy-input-group">
<button class @click="clear">Clear screen</button>
<button class="btn-alt"
@click="options = !options">Advanced settings {{options}}</button>
</div>
<!-- Advanced settings -->
<div class="alloy-input-group" v-if="options">
<label for="url">API url</label>
<p v-if="demo">You can't use the API on the demo page</p>
<input type="text" id="url" v-model="url" :disabled="demo ? '' : disabled">
</div>
<div class="alloy-input-flex" v-if="options">
<div class="alloy-input-group">
<label for="xAxis">Matrix W</label>
<input type="number" id="xAxis" v-model="x" pattern="[0-9]*" min="1" inputmode="numeric">
</div>
<div class="alloy-input-group" v-if="options">
<label for="yAxis">Matrix H</label>
<input type="number" id="yAxis" v-model="y" pattern="[0-9]*" min="1" inputmode="numeric">
</div>
</div>
<div class="alloy-input-group" v-if="options">
<label for="timer">Timer (nightlight)</label>
<p class="description">Set a nightlight timer to {{timer}} mintues. If zero no timer would be set</p>
<input type="number" id="timer" v-model="timer" pattern="[0-9]*" inputmode="numeric">
</div>
<div class="alloy-input-group" v-if="options">
<label for="copy">Save preset manually</label>
<pre id="copy" ref="copy">{{json}}</pre>
<p v-if="copiedFailed">Failed to copy text, try copying manually.</p>
<button @click="copy" ><span v-if="!copied">Copy preset</span><span v-if="copied">Copied!</span> </button>
</div>
<!-- <div class="alloy-input-group" v-if="options">
<label for>Things known about your matrix</label>
<ul class="description">
<li><strong>URL</strong> {{url}}</li>
<li><strong>Matrix width</strong> {{x}}</li>
<li><strong>Matrix height</strong> {{y}}</li>
<li><strong>Matrix led</strong> {{y * x}}</li>
<li><strong>Pixel art amount</strong> {{fill.length}}</li>
</ul>
</div> -->
<!-- Advanced settings -->
</div>
<!-- 🎛️ END Controls -->
<a href="https://studioalloy.nl" id="logo">
<img src="https://studioalloy.nl/_nuxt/img/a293d3c.svg">
<div>
<span>Powered by</span>
<span>Studio Alloy</span>
</div>
</a>
</div>
</aside>
<!-- END Sidebar -->
<!-- Notifications -->
<div class="container" v-if="loading">
<div class="notice" v-if="!options">
<h3>We're currently loading your settings. Make sure your matrix is setup correclty. <i>Fetching {{url}}</i></h3>
<p>If you keep seeing this make sure you update your API endpoint url eg <i>`http://[device_ip_address]/json`</i></p>
</div>
<div class="notice error" v-if="options">
<h3>We could not fetch your settings at <i>{{url}}</i></h3>
<p>You can change the url manually <input type="text" v-model="url"></p>
<p>Or just use the tool without the API connected</p>
<button class="btn-alt" @click="ignoreNotice">Just use the tool</button>
</div>
</div>
<!-- END Notifications -->
<div class="view" @mousedown="mouseDown" @mouseup="mouseUp"
@touchstart="mouseDown" @mouseup="touchend"
v-if="!loading">
<svg :view-box.camel="viewBox">
<g v-for="(item, yIndex) in y">
<rect v-for="(item, xIndex) in x" :x="size * xIndex"
:y="size * yIndex" :width="size" :height="size" stroke="#19233b"
:fill="fill[xIndex + x*yIndex]" @mousedown="setColor"
@mouseover="dragColor"
@contextmenu.prevent="rightClick"
:data-number="xIndex + x*yIndex" />
</g>
</svg>
</div>
</div>
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
<script src="./assets/js/script.js" inline></script>
</body>
</html>