Programming/node.js2018. 10. 10. 16:40

node.js 정적 파일 서비스

/static 아래에서는 /public으로 연결해서 자유롭게 파일을 직접 액세스 하도록 해주는 기능



app.use('/static', express.static('public')); 

[링크 : http://expressjs.com/en/starter/static-files.html]

[링크 : http://expressjs.com/ko/starter/static-files.html]

[링크 : http://infodbbase.tistory.com/40]

[링크 : https://opentutorials.org/course/2136/11857]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node tmp uuid  (0) 2018.10.12
node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러  (0) 2018.10.11
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
npm install이 윈도우에서 안될때  (2) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 10. 7. 20:35

html canvas 크기

화면상에 보이는 실제 크기

document.getElementById('video-canvas').scrollWidth

document.getElementById('video-canvas').scrollHeight


캔버스 자체의 실제 크기

document.getElementById('video-canvas').width

document.getElementById('video-canvas').height



jsmpeg을 통해서 동영상을 틀어 주면 동영상의 실제 크기는 width, height로 나오고

scrollWidth, scrollHeight는 canvas 태그에 의해서 설정된 width, height 값이 나오게 된다.


+

jquery에서 셀렉터로 하면 width를 못 받아온다. 왜그럴까..

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
json key 추가/삭제  (0) 2018.09.28
Posted by 구차니
Programming/node.js2018. 10. 5. 19:25

waveform 출력하는 자바스크립트 모듈

canvas를 이용해서 waveform을 그려주는 녀석인.. 듯?

아무튼 파형 확대/축소도 가능하고

이퀄라이저도 포함되는 녀석이라 한번 써볼만 할 듯


[링크 : https://wavesurfer-js.org]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러  (0) 2018.10.11
node.js 정적 파일 서비스  (0) 2018.10.10
xz로 압축된 node.js 설치하기  (0) 2018.10.02
npm install이 윈도우에서 안될때  (2) 2018.09.27
node.js 를 이용한 HTML 데이터 추출(크롤링)  (4) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 10. 4. 18:57

html5 canvas crop & save

본목적(?)은 canvas로 그려진 jsmpeg을 캡쳐 하는건데

canvas 가 2d 컨텍스트라면 아래의 toDataURL()을 통해서 간단하게

image/png MIME 타입으로 받을수 있다.


var dataURL = canvas.toDataURL('image/png'); 

[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]



다만 기본 값이 GL 가속이라 disableGL을 true로 해주면 canvas가 2d로 설정되기에 캡쳐가 가능한데

문제는.. gl이나 gl-experiment로 설정해도 못받아 오는건 매한가지란거...


disableGl: true

canvas.getContext('2d'); 

[링크 : https://github.com/phoboslab/jsmpeg]


+
2018.10.25


+
2018.11.13
클릭하면 다운로드 되는 예제
해당 링크를 trigger('click')으로 하면 자동으로 다운로드 된다.

<!DOCTYPE html>

<html>

<head>

<style>

.canvas__container {

  height: 100%;

  position: relative;

  width: 100%;

}

.canvas__canvas {

  height: 100%;

  position: relative;

  width: 100%;

  z-index: 1;

}

.canvas__mirror {

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%; 

}

</style>

</head>

<body>

<div class="canvas__container">

  <canvas id="cnvs" class="canvas__canvas"></canvas>

  <img src="" id="mirror" class="canvas__mirror" />

</div>

<a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a>


<script>

var cnvs = document.getElementById('cnvs'),

    ctx = cnvs.getContext('2d'),

    mirror = document.getElementById('mirror');


cnvs.width = mirror.width = window.innerWidth;

cnvs.height = mirror.height = window.innerHeight;


mirror.addEventListener('contextmenu', function (e) {

    var dataURL = canvas.toDataURL('image/png');

    mirror.src = dataURL;

});


var button = document.getElementById('btn-download');

button.addEventListener('click', function (e) {

var canvas = document.getElementById('cnvs');

    var dataURL = canvas.toDataURL('image/png');

    button.href = dataURL;

});



document.getElementById('btn-download').click();



</script>

</body>

</html> 

[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
json2xls 사용 주의  (0) 2018.10.02
json key 추가/삭제  (0) 2018.09.28
json merge  (0) 2018.09.28
Posted by 구차니
Programming/node.js2018. 10. 2. 23:04

xz로 압축된 node.js 설치하기

라즈베리 구버전을 써서 node.js가 0.10 버전대라

배포판 업그레이드 하거나 밀긴 귀찮아서

node.js arm 용으로 빌드된 걸 받아서 설치해보는데


rpi 2b니까 ARMv7용으로 받고

압축을 풀어서 bin과 lib를 /bin과 /lib로 복사해도 되고

[링크 : https://nodejs.org/ko/download/]


아래와 같이 -C / 이런 옵션을 주고 / 에다가 압축을 풀게 하는 것도 방법일 듯

tar Jxf --strip=1 -C /usr/local node-v4.4.0-linux-x64.tar.xz 

[링크 : https://stackoverflow.com/.../how-to-install-node-linux-binaries-tar-xz-file-in-ubuntu-14-04]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
npm install이 윈도우에서 안될때  (2) 2018.09.27
node.js 를 이용한 HTML 데이터 추출(크롤링)  (4) 2018.09.27
npm audit  (0) 2018.09.19
Posted by 구차니
Programming/d32018. 10. 2. 15:51

d3 font color / weight

의외로 쉽네? 싶기도 하고..


svg.append("text")
.style("font-weight", "bold")
.style("fill", "white")
.attr("x",-5)
.attr("y",5)

.text(conn); 


[링크 : https://stackoverflow.com/.../splitting-text-for-some-bold-and-some-not-on-functional-javascript-piece]

[링크 : https://stackoverflow.com/.../how-to-set-text-color-for-my-d3-chart-title]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 10. 2. 11:11

json2xls 사용 주의

버그인가...

데이터는 더 있는데 필드가 추가 안되는 문제가 있네..

(혹시나 해서 json도 저장해놔서 비교하는데 이런 문제가..)


[링크 : https://www.npmjs.com/package/json2xls]

[링크 : https://www.npmjs.com/package/json-to-excel]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
json key 추가/삭제  (0) 2018.09.28
json merge  (0) 2018.09.28
jquery 선택자  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 10. 1. 21:40

d3 tooltop

path.each() 가 현재 선택한 값을 d로 넘겨주고

그걸 이용해서 d.data에 path에서 연결된 dataset의 한개 항목을 넘겨준다.


[링크 : http://bl.ocks.org/arpitnarechania/577bd1d188d66dd7dffb69340dc2d9c9]

[링크 : https://stackoverflow.com/.../get-one-element-from-d3js-selection-by-index]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 9. 28. 15:27

json key 추가/삭제

동적 추가

var keyname = '';

var something = { };

something[keyname + 'postfix'] = 'value'; 

[링크 : https://blog.outsider.ne.kr/675]


삭제

var json = {NAME: "John", AGE: 30, SEX: "male"};

json.BIRTHDAY = '2001-03-01';

delete json.SEX; 

[링크 : https://gent.tistory.com/21]


+

2018.11.21

[링크 : https://stackoverflow.com/questions/19837916/creating-object-with-dynamic-keys]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
json merge  (0) 2018.09.28
jquery 선택자  (0) 2018.09.27
jquery n번째 요소 선택하기, select 선택하기  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 9. 28. 14:52

d3 를 이용하여 도넛 그래프 그리기

다른거 받아와서 쓰는데 이것저것 검색중..

function donut_instance(w, h, element_id) {
var dataset = [
{ name: 'IE', percent: 39.10 },
{ name: 'Chrome', percent: 32.51 },
{ name: 'Safari', percent: 13.68 },
{ name: 'Firefox', percent: 8.71 },
{ name: 'Others', percent: 6.01 }
];

var pie = d3.layout.pie()
.value(function (d) { return d.percent })
.sort(null)
.padAngle(.03);

//var w = 300, h = 300;

var outerRadius = (w * 0.60) / 2;
var innerRadius = (w * 0.30) / 2;;

var color = d3.scale.category20c();

var arc = d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);

var svg = d3.select(element_id)
.append("svg")
.attr({
width: w,
height: h,
class: 'shadow'
}).append('g')
.attr({
transform: 'translate(' + (w / 2) + ',' + (h / 2 + 2) + ')'
});

var path = svg.selectAll('path')
.data(pie(dataset))
.enter();

path.append('path')
.transition()
.duration(1000)
.attr({
d: arc,
fill: function (d, i) {
return color(d.data.name);
}
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d)
}
})
;

svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", "black")
.transition()
.duration(1000)
.attr("r", 25)
.attr("fill", "#3182bd");

svg.append("text")
.attr("x",-5)
.attr("y",5)
.text('5');
}


[링크 : https://blog.nacyot.com/articles/2015-02-02-d3-selection/]

[링크 : https://bl.ocks.org/rshaker/225c6df494811f46f6ea53eba63da817]

[링크 : https://www.tutorialspoint.com/d3js/d3js_transition.htm]

[링크 : https://www.tutorialspoint.com/d3js/d3js_animation.htm]

[링크 : http://bl.ocks.org/nadinesk/99393098950665c471e035ac517c2224]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 graph  (0) 2018.09.27
Posted by 구차니

티스토리툴바