@otac님 단타를 위한 업비트 화면 위치 설정 스크립트 2탄..!!

in #kr6 years ago

안녕하세요 해피베리 보이입니다.

지난글 : @otac님 단타를 위한 업비트 화면 위치 설정 스크립트

지난 글에서 @nhj12311 님의 댓글을 보고 현재 체결되고 있는 체결량을 보는게 도움이 될거라는 생각이 들어서 한번 또 만들어 봤어요.

현재 실제로 체결되고 있는 매수/매도량 합계 표시와 비율표시입니다.

먼저 완성된 모습은 아래처럼 화면 상단에 떠다니게 만들었습니다.
image.png

근데 지금 글을 쓰는시점에 생각해보니... 왜... 제가 이걸 떠다니게 했는지 잘 모르겠군요.. ㅠㅠ
그냥 체결정보 상단이나, 호가창 상단에 넣었어도 됐을텐데 말이죠..
다음번에는 거기로 올려 놓도록 할게요~ ㅠㅠ


사용법 1. 스크립트를 개발자 console에서 바로 입력

개발자 콘솔은 지난 글에서 활성화 하는법을 알려드렸지요..
거기에 이 명령어를 넣으시면 바로 작동을 합니다.
아래스크립트를 복사 + 붙여넣기를 하시면 위의 최종 화면처럼 적용되도록 하였습니다.


// 체결창 호가창 옆으로 옮기는 스크립트 
// 매수/매도 화면을 아래로 내림
$('.mainB .ty01 .halfB .rightB').wrap('<article></article>'); 
// 체결창을 호가창 옆으로 옮기기 위한 디자인 작업
$('.mainB .ty01 .tabB').wrap('<div class="rightB"></div>');
// 체결창을 호가창 오른쪽으로 옮기는 명령어
$('.mainB .ty01 .rightB:eq(3)').insertAfter('.mainB .ty01 .halfB .leftB');
// 체결창 백그라운드를 흰색으로
$('.mainB .ty01 .halfB .rightB:eq(1)').css('background-color','#fff');
// 호가창 사이즈를 한눈에 볼 수 있도록 사이즈 수정
$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB').css('height', '900px');
$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB div').css('height', '900px');
// 체결창 사이즈를 호가창과 동일하게 사이즈 수정
$('.askpriceB .scrollB').css('height', '900px');
$('.askpriceB .scrollB div:eq(0)').css('height', '900px');
// 체결창에 칼럼들 사이즈 조절
$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB .ty01 td').css('width', '25%');
// 체결량을 보여주는 스크립트
var upSum = 0;
var downSum = 0;
var preDiv = document.getElementById('displaydiv');
if (preDiv != undefined) preDiv.remove();
if (intervalId != undefined) clearInterval(intervalId);
var updiv = document.createElement('div');
updiv.id = 'displaydiv';
updiv.style.width = '700px';
updiv.style.position = 'fixed';
updiv.style.top = '50px';
updiv.style.left = '0px';
updiv.style.zIndex = '999';
var upele = document.createElement('input');
upele.style.width = '100px';
upele.style.height = '30px';
upele.style.textAlign = 'right';
upele.id = 'upele';
var upbtn = document.createElement('button');
upbtn.textContent = 'Clear';
upbtn.style.width = '100px';
upbtn.style.height = '30px';
upbtn.id = 'upbtn';
upbtn.addEventListener('click', function () {
    if (this.id == 'upbtn') {
        upSum = 0;
        document.getElementById('upele').value = 0;
    } else {
        downSum = 0;
        document.getElementById('downele').value = 0;
    }
    this.blur();
});
var downele = upele.cloneNode(true);
downele.id = 'downele';
var downbtn = upbtn.cloneNode(true);
downbtn.id = 'downbtn';
downbtn.addEventListener('click', function () {
    if (this.id == 'upbtn') {
        upSum = 0;
        document.getElementById('upele').value = 0;
    } else {
        downSum = 0;
        document.getElementById('downele').value = 0;
    }
    this.blur();
});
var rateele = upele.cloneNode(true);
rateele.id = 'rateele';
updiv.appendChild(upele);
updiv.appendChild(upbtn);
updiv.appendChild(downele);
updiv.appendChild(downbtn);
updiv.appendChild(rateele);
document.body.appendChild(updiv);
var lastElement = '';
var intervalId = setInterval(function () {
    console.log('============start==============');
    let exist = false;
    let firstText = $('.mainB .halfB .rightB table tr:eq(1)').text();
    let upvol = 0;
    let downvol = 0;
    $('.mainB .halfB .rightB table tr').each(function (idx) {
        if (idx == 0) return;
        if (exist) return;
        let text = $(this).text();
        if (lastElement == '') {
            lastElement = text;
            exist = true;
            return;
        }
        if (lastElement == text) {
            exist = true;
            return;
        }
        let vol = parseFloat($(this).find('td:eq(2)').text().replace(/,/g, ''));
        if ($(this).attr('class') == 'up') {
            upvol += vol;
        } else {
            downvol += vol;
        }
        console.log($(this).attr('class') + ', volume:' + $(this).find('td:eq(2)').text());
    });
    lastElement = firstText;
    upSum += upvol;
    downSum += downvol;
    document.getElementById('upele').value = parseFloat(upSum).toFixed(5);
    document.getElementById('downele').value = parseFloat(downSum).toFixed(5);
    document.getElementById('rateele').value = upSum > 0 && downSum > 0 ? parseFloat(upSum / downSum).toFixed(3) : 0;
}, 1000);


사용법 2. 즐겨찾기로 등록해서 바로 적용

예전에 @asbear 님이 쓰셨던 방법이 갑자기 떠올라서 적용해 봤습니다.
즐겨찾기에서 스크립트를 작동하게 할 수 있더라고요..
그래서 해봤습니다.

크롬기준입니다..!!

  • 크롬 우측 상단에 점세개 메뉴 - 북마크 - 북마크 관리자 로 들어갑니다.
    image.png
  • 화면 바깥쪽 아무 맨땅에서 마우스 우클릭 - 새 북마크 추가 를 해줍니다.
    image.png
  • 북마크 이름에는 본인이 원하시는 값을 쓰시고 아래쪽 URL 에는 아래 스크립트를 입력합니다. 그리고 저장을 누릅니다.
 javascript:function upbit(){$('.mainB .ty01 .halfB .rightB').wrap('<article></article>'); $('.mainB .ty01 .tabB').wrap('<div class="rightB"></div>');$('.mainB .ty01 .rightB:eq(3)').insertAfter('.mainB .ty01 .halfB .leftB');$('.mainB .ty01 .halfB .rightB:eq(1)').css('background-color','#fff');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB').css('height', '900px');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB div').css('height', '900px');$('.askpriceB .scrollB').css('height', '900px');$('.askpriceB .scrollB div:eq(0)').css('height', '900px');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB .ty01 td').css('width', '25%');var upSum = 0;var downSum = 0;var preDiv = document.getElementById('displaydiv');if(preDiv != undefined) preDiv.remove();if(intervalId != undefined) clearInterval(intervalId);var updiv = document.createElement('div');updiv.id = 'displaydiv';updiv.style.width = '700px';updiv.style.position = 'fixed';updiv.style.top = '50px';updiv.style.left = '0px';updiv.style.zIndex = '999';var upele = document.createElement('input');upele.style.width = '100px';upele.style.height = '30px';upele.style.textAlign = 'right';upele.id = 'upele';var upbtn = document.createElement('button');upbtn.textContent = 'Clear';upbtn.style.width = '100px';upbtn.style.height = '30px';upbtn.id = 'upbtn';upbtn.addEventListener('click', function(){if(this.id == 'upbtn'){upSum = 0;document.getElementById('upele').value = 0;}else{downSum = 0;document.getElementById('downele').value = 0;}this.blur();});var downele = upele.cloneNode(true);downele.id = 'downele';var downbtn = upbtn.cloneNode(true);downbtn.id = 'downbtn';downbtn.addEventListener('click', function(){if(this.id == 'upbtn'){upSum = 0;document.getElementById('upele').value = 0;}else{downSum = 0;document.getElementById('downele').value = 0;}this.blur();});var rateele = upele.cloneNode(true);rateele.id = 'rateele';updiv.appendChild(upele);updiv.appendChild(upbtn);updiv.appendChild(downele);updiv.appendChild(downbtn);updiv.appendChild(rateele);document.body.appendChild(updiv);var lastElement = '';var intervalId = setInterval(function(){console.log('============start==============');let exist = false;let firstText = $('.mainB .halfB .rightB table tr:eq(1)').text();let upvol = 0;let downvol = 0;$('.mainB .halfB .rightB table tr').each(function(idx){if(idx == 0) return;if(exist) return;let text = $(this).text();if(lastElement == ''){lastElement = text;exist = true;return;}if(lastElement == text){exist = true;return;} let vol = parseFloat($(this).find('td:eq(2)').text().replace(/,/g, ''));if($(this).attr('class') == 'up'){upvol += vol;}else{downvol += vol;}console.log($(this).attr('class') + ', volume:' + $(this).find('td:eq(2)').text());});lastElement = firstText;upSum += upvol;downSum += downvol;document.getElementById('upele').value = parseFloat(upSum).toFixed(5);document.getElementById('downele').value = parseFloat(downSum).toFixed(5);document.getElementById('rateele').value = upSum > 0 && downSum > 0 ? parseFloat(upSum/downSum).toFixed(3) : 0;}, 1000);};upbit();

image.png

  • 거래창으로 가셔서 아까 등록한 즐겨찾기를 클릭하면 적용됩니다.
  • 참고로 1탄에서 만들었던 체결화면 위치만 변경하는 스크립트도 즐겨찾기로 하고 싶으신 분들은 아래 스크립트로 즐겨찾기를 등록하시면 됩니다.
javascript:function upbitlayout(){$('.mainB .ty01 .halfB .rightB').wrap('<article></article>');$('.mainB .ty01 .tabB').wrap('<div class="rightB"></div>');var $bottom = $('.mainB .ty01 .rightB:eq(3)');$bottom.insertAfter('.mainB .ty01 .halfB .leftB');$('.mainB .ty01 .halfB .rightB:eq(1)').css('background-color','#fff');$('.askpriceB .scrollB').css('height', '900px');$('.askpriceB .scrollB div:eq(0)').css('height', '900px');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB').css('height', '900px');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB div').css('height', '900px');$('.mainB .ty01 .halfB .rightB:eq(1) .scrollB .ty01 td').css('width', '25%');};upbitlayout();

기타사항

  • Clear 버튼은 각각 매수/매도량을 다시 0으로 설정합니다.(비율도 재조정 됩니다.)
  • 종목을 변경하시면 F5로 재조회 이후에 다시 즐겨찾기를 눌러 주셔야 정상 작동합니다.
  • 체결량 위치변경 디자인은 적용하지 않고, 그냥 체결량 합계만 보고 싶은 경우 스크립트가 조금 달라집니다. 아래 스크립트를 사용하시면 됩니다.
​
var upSum = 0;
var downSum = 0;
var preDiv = document.getElementById('displaydiv');
if(preDiv != undefined) preDiv.remove();
if(intervalId != undefined) clearInterval(intervalId);
var updiv = document.createElement('div');
updiv.id = 'displaydiv';
updiv.style.width = '700px';
updiv.style.position = 'fixed';
updiv.style.top = '50px';
updiv.style.left = '0px';
updiv.style.zIndex = '999';
var upele = document.createElement('input');
upele.style.width = '100px';
upele.style.height = '30px';
upele.style.textAlign = 'right';
upele.id = 'upele';
var upbtn = document.createElement('button');
upbtn.textContent = 'Clear';
upbtn.style.width = '100px';
upbtn.style.height = '30px';
upbtn.id = 'upbtn';
upbtn.addEventListener('click', clearText);
var downele = upele.cloneNode(true); // true means clone all childNodes and all event handlers
downele.id = 'downele';
var downbtn = upbtn.cloneNode(true);
downbtn.id = 'downbtn';
downbtn.addEventListener('click', clearText);
var rateele = upele.cloneNode(true);
rateele.id = 'rateele';
updiv.appendChild(upele);
updiv.appendChild(upbtn);
updiv.appendChild(downele);
updiv.appendChild(downbtn);
updiv.appendChild(rateele);
document.body.appendChild(updiv);
var lastElement = '';
function clearText(){
if(this.id == 'upbtn'){
upSum = 0;
document.getElementById('upele').value = 0;
}else{
downSum = 0;
document.getElementById('downele').value = 0;
}
this.blur();
}
function sumVolume(){
console.log('============start==============')
let exist = false;
let firstText = $('.mainB .tabB:eq(2) .scrollB table tbody tr:eq(0)').text();
let upvol = 0;
let downvol = 0;
$('.mainB .tabB:eq(2) .scrollB table tbody tr').each(function(idx){
if(exist) return;
let text = $(this).text();
if(lastElement == ''){
lastElement = text;
exist = true;
return;
}
if(lastElement == text){
exist = true;
return;
}
let vol = parseFloat($(this).find('td:eq(2)').text().replace(/,/g, ''));
if($(this).attr('class') == 'up'){
upvol += vol;
}else{
downvol += vol;
}
console.log($(this).attr('class') + ', volume:' + $(this).find('td:eq(2)').text());
// console.log(lastElement + ":" + text);
});
lastElement = firstText;
upSum += upvol;
downSum += downvol;
document.getElementById('upele').value = parseFloat(upSum).toFixed(5);
document.getElementById('downele').value = parseFloat(downSum).toFixed(5);
document.getElementById('rateele').value = upSum > 0 && downSum > 0 ? parseFloat(upSum/downSum).toFixed(3) : 0;
}
var intervalId = setInterval(sumVolume, 1000);
  • 추가로 궁금하신 사항있으시면 댓글 달아주십시오.(시간이 허락한다면.. ㅎ)

역시 프로그래머는 자신이 만든 프로그램을 써주시는 분들이 응원해주실때 힘이 나는 것 같습니다.
1탄에서 만든 정도로도 많은 분들이 감사해 하셔서.. 저도 감사드립니다..!!
그런 상황에서 요청사항을 보니 또 바로 타자를 두들기게 되는군요. 무려 새벽3시 까지... ㅎㅎ
원래 프로그램이란게 기능을 하나만더 하나만더 하다보면 시간이 훌쩍지나가버리거든요.

아무튼 저로서도 재미로 만들어보기에 좋은 기회였던것 같네요.
아무쪼록 도움이 되시는 분들이 많길 바라며..... 모두들 성투하시기 바랍니다..!!

Sort:  

헉 만드신걸 이제서야 봤네요. 수고하셨습니다!!!

아니...이걸 다 만드신건가여....ㄷㄷㄷㄷ
역시 프로그래밍의 세계는 무궁무진한거같습니다 ㅋㅋㅋㅋ

공감합니다 ㅎㄷㄷ

진짜 엄청 노가다일텐데 고생 많으십니다!

프로그램의 프자도 모르는 제가 볼때 정말 멋지다고 생각이 드네요^^

저는 비록!!! 무슨 소리인지 알아들을 수 없으나 많은분들에게 도움이 될수 있기를 바랍니다 ㅠ

응원합니다!

감사합니다
시간될때 찬찬히 따라하며 사용해 보겠습니다 ^^

굿굿 베리굿굿굿구숙숛

혹시 바이낸스는 거래 안하시는지요?
바이낸스 스크립트도 한번 만들어 주시면 대박일텐데요..^^

또 분석과 코딩이 ㅠㅠ ㅎㅎ 제가 언젠가 바이낸스로 간다면.. 그때.. ㅋㅋ

단타를 위한 이상적인 프로그램이 되가고 있군요 ㅋㅋㅋ
멋집니다 크으

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.032
BTC 63754.85
ETH 3055.95
USDT 1.00
SBD 3.85