[Scriptable] 코인 위젯 만들기 ( Binance & Upbit Bitcoin widget )-2

바이낸스와 업비트에서의 비트코인 가격을 동시에 보여주는 위젯 만들기.

 

이전 글 보기 :

https://clolee.tistory.com/45

 

# 위젯 생성

let widget = await createWidget(binanceInfo)
if (!config.runsInWidget) {
	await widget.presentMedium()
  }
else {
	Script.setWidget(widget)
	Script.complete()
}

위젯 크기는 중간 크기로 설정.

 

# createWidget 함수

async function createWidget(binanceInfo) {
	...
    
    return list
}

코인들의 리스트를 반환하여 위젯에 보여줌.

아래의 내용은 전부 createWidget 함수 안의 내용.

 

# 위젯 새로고침

list.refreshAfterDate = new Date(Date.now() + 1000 * 300);

위젯에 표시되는 데이터는 300초마다 업데이트

 

# 코인 리스트 

// coin list
const crypto = list.addStack();
crypto.layoutVertically();

바이낸스 BTC와 업비트 BTC를 리스트 형태로 표시.

 

1. binance BTC

 

## binance BTC 이름

let binanceBTC = crypto.addStack();
binanceBTC.layoutHorizontally();
{
    // coin name and symbol
    let binanceBTCnames = binanceBTC.addStack();
    binanceBTCnames.layoutVertically()
    //let cryptoName = binanceBTCnames.addText('Bitcoin')
    text(binanceBTCnames, binanceInfo.symbol, 13, "white")
    binanceBTCnames.addSpacer(3)
    //let cryptoSymbol = binanceBTCnames.addText(" " + binanceInfo.symbol)
    text(binanceBTCnames, 'Bitcoin', 10, "gray")
}

 

## binance BTC 차트 이미지

//binanceBTCchart
let binanceBTCchart = new LineChart(400, 80, binanceInfo.timePrice).configure((ctx, path) => {
    ctx.opaque = false;
    ctx.setStrokeColor(((binanceInfo.priceChange >= 0) ? 
    (binanceInfo.priceChange == 0) ? ENV.colors.normal : ENV.colors.green : ENV.colors.red));
    ctx.setLineWidth(2);
    path.forEach(p => {
        ctx.addPath(p);
        ctx.strokePath(p);
        ctx.setLineWidth(5.5);
    });

}).getImage();
let binanceBTCchartStack = binanceBTC.addStack()
let binanceBTCimg = binanceBTCchartStack.addImage(binanceBTCchart)
binanceBTCimg.applyFittingContentMode()

 

## binance BTC 가격과 가격 변동 퍼센트, 이에 따른 차트와 가격 색상 설정

{
    // coin price and priceChangePersent
    let binanceBTCprices = binanceBTC.addStack()
    binanceBTCprices.layoutVertically()
    text(binanceBTCprices, binanceNum.format(binanceInfo.lastPrice) + " USD", 12, 
    ((binanceInfo.priceChange >= 0) ? (binanceInfo.priceChange == 0) ? "normal" : "green" : "red"))
    binanceBTC.addSpacer(2)
    text(binanceBTCprices, binanceInfo.priceChangePersent + ' %', 10, 
    ((binanceInfo.priceChange >= 0) ? (binanceInfo.priceChange == 0) ? "normal" : "green" : "red")) 
}

 

 

2. upbit BTC

 

## upbit BTC 이름

let upbitBTC = crypto.addStack();
upbitBTC.layoutHorizontally();
{
    // coin name and symbol
    let upbitBTCnames = upbitBTC.addStack();
    upbitBTCnames.layoutVertically()
    text(upbitBTCnames, upbitInfo.symbol, 13, "white")
    upbitBTCnames.addSpacer(3)
    text(upbitBTCnames, 'Bitcoin', 10, "gray")
}

 

## upbit BTC 차트 이미지

// upbitBTCchart
let upbitBTCchart = new LineChart(400, 80, upbitInfo.timePrice).configure((ctx, path) => {
    ctx.opaque = false;
    ctx.setStrokeColor(((upbitInfo.priceChange >= 0) ? 
    (upbitInfo.priceChange == 0) ? ENV.colors.normal : ENV.colors.green : ENV.colors.red));
    ctx.setLineWidth(2);
    path.forEach(p => {
        ctx.addPath(p);
        ctx.strokePath(p);
        ctx.setLineWidth(5.5);
    });
}).getImage();
let upbitBTCchartStack = upbitBTC.addStack()
let upbitBTCimg = upbitBTCchartStack.addImage(upbitBTCchart)
upbitBTCimg.applyFittingContentMode()

 

## upbit BTC 가격과 가격 변동 퍼센트, 이에 따른 차트와 가격 색상 설정

{
    // coin price and priceChangePersent
    let upbitBTCprices = upbitBTC.addStack()
    upbitBTCprices.layoutVertically()
    text(upbitBTCprices, upbitNum.format(upbitInfo.lastPrice) + " KRW", 12, 
    ((upbitInfo.priceChange >= 0) ? (upbitInfo.priceChange == 0) ? "normal" : "green" : "red"))
    upbitBTC.addSpacer(2)
    text(upbitBTCprices, upbitInfo.priceChangePersent + ' %', 10, 
    ((upbitInfo.priceChange >= 0) ? (upbitInfo.priceChange == 0) ? "normal" : "green" : "red")) 
}

 

전체 코드 보기 =>

https://github.com/seowlee/Scriptable_BTC_Widget.git

 

 

참고 :

https://github.com/Martlgap/CryptoDepotWidget/blob/main/cryptowidget.js