-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (190 loc) · 8.91 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TW STOCK</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<label for="fname">input five stock:</label><br>
<input type="text" id="stock1"><br>
<input type="text" id="stock2"><br>
<input type="text" id="stock3"><br>
<input type="text" id="stock4"><br>
<input type="text" id="stock5"><br>
<button id="save" onclick="saveJson()">save</button>
<canvas id="canvas" width="100" height="100" style="display: none"></canvas>
<script>
const { nativeImage, ipcRenderer } = require('electron');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// const img = new Image();
var twseStockPrices = require('twse-stock-prices');
const Store = require('./store.js');
// First instantiate the class
const store = new Store({
// We'll call our data file 'user-preferences'
configName: 'user-stocks',
defaults: {
// 800x600 is the default size of our window
stocks: ["t00", "3029", "1305", "8437", "1256", "8462"]
}
});
let stocks = store.get('stocks');
let stockTW = {
price: '',
color: '',
}//加權指數
let i = 0;
let arrStock = ['stock1', 'stock2', 'stock3', 'stock4', 'stock5']
let arrStockPopover = ['stock1Popover', 'stock2Popover', 'stock3Popover', 'stock4Popover', 'stock5Popover']
// 把過去的紀錄寫進去
for (let j = 0; j < 5; j++) {
document.getElementById(arrStock[j]).value = stocks[j + 1];
}
let stockinfo;
function saveJson() {
let tmpArr = ["t00"]//預設加權指數
for (var k = 0; k < 5; k++) {
tmpArr.push(document.getElementById(arrStock[k]).value)
}
stocks = tmpArr
updateStock(stocks)
ipcRenderer.send('saveJson', tmpArr);
}
updateStock(stocks)
//5秒鐘更新一次
setInterval(function () { updateStock(stocks) }, 5000);
function stockColor(yesterdayStock, price) {
if (parseFloat(price) > parseFloat(yesterdayStock)) {
return '#FF0000'
} else if (parseFloat(price) < parseFloat(yesterdayStock)) {
return '#00DB00'
} else {
return 'white'
}
}
function stockPercent(stock) {
var num = (parseFloat(stock.price) - parseFloat(stock.y)) / parseFloat(stock.y) * 100
num = num.toFixed(2);
// console.log(num)
return num
}
let gifCount = 0, maxGifCount = 0;
setInterval(function () {
const img = new Image();
//確認跑哪個圖片
console.log(stockTW.color)
if (stockTW.color == '#FF0000') {
img.src = `./gif/good/good-${gifCount}.png`
maxGifCount = 9
} else if (stockTW.color != '') {
console.log('bad')
img.src = `./gif/bad/bad-${gifCount}.png`
maxGifCount = 7
}
img.onload = () => {
canvas.width = 245;
canvas.height = 100;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(img, 0, 0, img.width, img.height, 160, 0, 100, 100);
ctx.font = "36px Roboto";
ctx.fillStyle = 'white';
ctx.fillText("加權指數", 0, 40);
ctx.font = "600 48px Roboto";
ctx.fillStyle = stockTW.color
ctx.fillText(stockTW.price, 8, 90);
const data = canvas.toDataURL('image/png', 1);
const image = nativeImage.createFromDataURL(data).toPNG();
ipcRenderer.send('stockTW', image);
}
if (gifCount < maxGifCount) { gifCount++ }
else { gifCount = 0 }
}, 100);
function createStockImg(stockObject, stockElement) {
const img = new Image();
img.src = './img/empty.png'
img.onload = () => {
canvas.width = 140;
canvas.height = 50;
ctx.imageSmoothingQuality = 'high';
ctx.font = "18px Roboto";
ctx.fillStyle = 'white';
ctx.fillText(stockObject.c + stockObject.n, 0, 20);
ctx.font = "400 20px Roboto";
ctx.fillStyle = stockColor(stockObject.y, stockObject.price);
ctx.fillText(stockObject.price + ' (' + stockPercent(stockObject) + '%)', 0, 44);
const data = canvas.toDataURL('image/png', 1);
const image = nativeImage.createFromDataURL(data).toPNG();
ipcRenderer.send(stockElement, image);
}
}
function createStockPopoverImg(stockObject, stockElement) {
const img = new Image();
img.src = './img/empty.png'
img.onload = () => {
canvas.width = 400;
canvas.height = 50;
ctx.imageSmoothingQuality = 'high';
ctx.font = "18px Roboto";
ctx.fillStyle = 'white';
ctx.fillText('昨收', 0, 20);
ctx.fillText('開盤', 80, 20);
ctx.fillText('最高', 160, 20);
ctx.fillText('最低', 240, 20);
ctx.fillText('成交量', 320, 20);
ctx.font = "400 20px Roboto";
if (stockElement == 'stockTWPopover') {
ctx.fillText(parseInt(stockObject.y.toString()), 0, 45);
ctx.fillText(parseInt(stockObject.v.toString()), 320, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.o);
ctx.fillText(parseInt(stockObject.o.toString()), 80, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.h);
ctx.fillText(parseInt(stockObject.h.toString()), 160, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.l);
ctx.fillText(parseInt(stockObject.l.toString()), 240, 45);
} else {
ctx.fillText(stockObject.y.toString().substring(0, stockObject.y.toString().length - 2), 0, 45);
ctx.fillText(stockObject.v.toString().substring(0, stockObject.o.toString().length - 2), 320, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.o);
ctx.fillText(stockObject.o.toString().substring(0, stockObject.o.toString().length - 2), 80, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.h);
ctx.fillText(stockObject.h.toString().substring(0, stockObject.h.toString().length - 2), 160, 45);
ctx.fillStyle = stockColor(stockObject.y, stockObject.l);
ctx.fillText(stockObject.l.toString().substring(0, stockObject.l.toString().length - 2), 240, 45);
}
const data = canvas.toDataURL('image/png', 1);
const image = nativeImage.createFromDataURL(data).toPNG();
ipcRenderer.send(stockElement, image);
}
}
function updateStock(stocks) {
twseStockPrices.getCurrentPrice(stocks, function (err, result) {
let stockObjects = result.msgArray
let i = 0
stockObjects.forEach(function (stockObject) {
if (i == 0) {//加權指數
stockTW.price = parseInt(stockObject.z).toString()
stockTW.color = stockColor(stockObject.y, stockObject.z)
createStockPopoverImg(stockObject, 'stockTWPopover')
} else {
// ['股票代號','公司簡稱','當盤成交價','當盤成交量','累積成交量','開盤價','最高價','最低價','昨收價']
// ['c','n','z','tv','v','o','h','l','y']
// '股票代號','公司簡稱','當盤成交價' (漲跌用紅綠表示)
if (stockObject.z !== '-') {
stockObject.price = stockObject.z.toString()
} else {
stockObject.price = stockObject.b.substring(0, stockObject.b.indexOf('_'));
}
stockObject.price = stockObject.price.substring(0, stockObject.price.length - 2);
createStockImg(stockObject, arrStock[i - 1])
createStockPopoverImg(stockObject, arrStockPopover[i - 1])
}
i++
})
});
}
</script>
</body>
</html>