Programming/d32018. 10. 12. 08:27

gallery가 이것저것 키워드 얻는 용도랑, 예제 찾기로 쓰면 좋음

[링크 : https://github.com/d3/d3/wiki]

[링크 : https://github.com/d3/d3/wiki/Gallery]


timeline 그래프

[링크 : https://github.com/commodityvectors/d3-timeline]


태그 클라우드(나중에 블로그에...)

[링크 : https://www.jasondavies.com/wordcloud/]


enter/exit

[링크 : https://bost.ocks.org/mike/join/]

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

d3 color  (0) 2018.10.16
d3 timeline  (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
Posted by 구차니

머.. 한줄요약하면 드래그 앤 크랍(drag & crop)

jsmpeg으로 영상을 보여주는 canvas에 드래그를 하면 복사해서 다른 캔버스로 넣어주는 코드


주의 :정비율 출력은 좀 더 찾아 봐야 함


//Mouseup
$(canvas).on('mouseup', function (e) {
mousedown = false;

// copy
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
var width = mousex - last_mousex;
var height = mousey - last_mousey;

// canvas resized calibration
var can_w = document.getElementById('video-canvas').width;
var can_h = document.getElementById('video-canvas').height;
var act_w = document.getElementById('video-canvas').scrollWidth;
var act_h = document.getElementById('video-canvas').scrollHeight;

var tact_w = document.getElementById('target_obj_cnv').width;
var tact_h = document.getElementById('target_obj_cnv').height;

var cnvs = document.getElementById('video-canvas');
var ctx = cnvs.getContext('2d');
var dataURL = cnvs.toDataURL('image/png');

var cnvs = document.getElementById('target_obj_cnv');
var ctxt = cnvs.getContext('2d');
var img = new Image();
img.src = dataURL;
img.onload = function () {
ctxt.drawImage(img,
last_mousex * can_w / act_w,
last_mousey * can_h / act_h,
width * can_w / act_w,
height * can_h / act_h,
0,
0,
tact_w,
tact_h);
}



---


void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage]


img로 받아온 걸 drawImage로 canvas에 그리기

var img = new Image();

  img.src = "image.jpg";

  img.onload = function() {

  context.drawImage(img, 0, 0);

  }; 

[링크 : https://stackoverflow.com/.../how-can-i-change-the-image-source-within-a-canvas-using-jquery]


img to canvas

canvas to canvas로 쓸만한 방법

원본 영상을 원하는 대로 잘라서 쓸 수 있다.

[링크 : https://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/]


getImage는 원하는 영역을 잘라낼수 있는 장점이 있다.

하지만 getImage는 영상 데이터를 RGB 배열로 받아서, toDataURL() 처럼 Img에 넣는 방법을 쓸 수 없다

어떠한 변환을 통해 Base64 인코딩 해서 넣을수 있다면 쓸 수는 있을 듯

[링크 : https://stackoverflow.com/questions/28538913/crop-an-image-displayed-in-a-canvas]

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

ajax를 동기로(?)  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
Posted by 구차니
Programming/node.js2018. 10. 11. 13:35

명확한 원인과 해결방법은 아직 못 찾음

mac과 centos에서 node.js를 통해 mysql 접속시 장시간 지난후

이런 에러가 발생을 하는데 mysql 쪽 세션 timeout 이 원인으로 추정됨


{"code":"PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR","fatal":false} 


[링크 : https://stackoverflow.com/.../node-js-mysql-protocol-enqueue-after-fatal-error]

[링크 : https://stackoverflow.com/...mac-and-have-an-error-occurred-when-deploying-on-centos]



+

일정 주기로 쓸모없는 쿼리문 보내도록 해주는 미봉책

[링크 : http://nashorn.tistory.com/entry/Nodejs-서버-운영시-발생하는-오류-대응]

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

node.js spawn 과 exec  (0) 2018.10.16
node tmp uuid  (0) 2018.10.12
node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
Posted by 구차니
embeded/FPGA - XILINX2018. 10. 11. 09:17

altera/intel FPGA는 어떻게 되려나?

로직 한계로 atom을 박을순 없을테고 승기를 완전히 잡아 버리는 한수가 될 거 같네


[링크 : http://e4ds.com/sub_view.asp?ch=17&t=1&idx=9612]

'embeded > FPGA - XILINX' 카테고리의 다른 글

zynq mio  (0) 2021.03.16
zynq runtime pl fpga update  (0) 2021.03.15
xilinx DONE  (0) 2018.05.04
vivado I/O Ports 연결 컨셉  (0) 2018.03.23
vivado device constraint  (0) 2018.03.20
Posted by 구차니

jquery를 이용한 애니메이션 설정


$(selector).animate({params},speed,callback); 

[링크 : https://www.w3schools.com/jquery/jquery_animate.asp]


마우스 오버시 줌 애니메이션(트랜지션 시간 설정)

[링크 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp]

Posted by 구차니

jquery로 css를 변경하는 방법

$("p").css("background-color"); 

[링크 : https://www.w3schools.com/jquery/jquery_css.asp]

[링크 : https://www.tutorialspoint.com/How-to-change-the-background-image-using-jQuery]


+

2018.10.11


$("#my_image").attr("src","second.jpg"); 

[링크 : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery]

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

캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
Posted by 구차니
Programming/d32018. 10. 11. 07:38

직접 그리는 법을 찾아 보려고 하니

drilldown이라는 키워드가 보인다. 머하는 녀석인진 아직 파악 못함


[링크 : https://pshivale.github.io/psd3/]

[링크 : https://github.com/pshivale/psd3/blob/gh-pages/psd3.js]


drilldown

[링크 : https://stackoverflow.com/questions/23153403/drilldown-multiple-levels-highchart]

[링크 : http://bl.ocks.org/alessioalex/6448911]

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

d3 timeline  (0) 2018.10.12
d3 관련 검색..  (0) 2018.10.12
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니
Programming/css2018. 10. 10. 19:16

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)


body

{

font-family: arial, helvetica, freesans, sans-serif;

font-size: 100%;

color: #333;

background-color: #ddd;

}


h1

{

font-size: 1.5em;

font-weight: normal;

margin: 0;

  text-align: center;

  padding-top: 1em;

}


#element2

{

width: 12em;

font-size: 2em;

text-align: center;

line-height: 5em;

margin: 3em auto;

border: 2px solid #666;

border-radius: 7px;


  position: relative;

overflow: hidden;

}


#element2:before

{

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat;

transform: rotate(45deg);


[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://stackoverflow.com/questions/24842026/rotate-background-image-of-div-90-degrees-using-jquery]

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

css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
Posted by 구차니

ffmpeg를 이용해서 여러개의 파일을 합치는 방법

RTSP를 통하거나 m3u8 파일을 통해서 원하는 시간에 대해서 합치는 법 찾아야 하는데.. ㅠㅠ


[링크 : https://trac.ffmpeg.org/wiki/Concatenate]

[링크 : https://stackoverflow.com/.../ffmpeg-mp4-from-http-live-streaming-m3u8-file/32537953]

[링크 : https://stackoverflow.com/.../using-ffmpeg-to-save-an-rtsp-stream-from-a-certain-point-in-time?rq=1]

[링크 : http://hlsbook.net/how-to-start-playing-a-video-at-a-specific-point-in-time/]

[링크 : https://stackoverflow.com/.../ffmpeg-hls-segmenting-start-time-miscalculated]


+

2019.01.04


rtsp 주소는 concat에서 인식을 못한다...

다운로드 후 합치는걸로 구현을 해야하려나?

'프로그램 사용 > ffmpeg & ffserver' 카테고리의 다른 글

ffmpeg / ffplay cli interactive interface  (0) 2018.11.30
ffmpeg concat  (0) 2018.11.05
ffmpeg huffyuv  (0) 2017.02.28
ffmpeg으로 컨테이너 변경하기  (0) 2016.12.01
ffmpeg 으로 파일 재생하기  (0) 2015.02.10
Posted by 구차니
개소리 왈왈/블로그2018. 10. 10. 16:52

정체성이 이제 불분명하던 '초대장' 시스템의 폐지

그리고 개인 블로그로서는 나쁘지 않는 상한선인 하루 30개 글 제한(기존 유저, 신규 유저 15)


#01. 새로운 스킨을 제공합니다.

#02. 홈 꾸미기를 위한 ‘커버’ 기능을 지원합니다.

#03. 이제 초대장 없이 누구나 가입할 수 있습니다.

#04. 1일 글 작성 수 제한이 생깁니다.

#05. IE 10 이하의 브라우저 지원을 중단합니다. 

[링크 : https://notice.tistory.com/2451]



그래도 기존의 초대목록이 사라지는건 좀 아쉽네.

(그래봤자 활동도 안하는 놈들 뿐이지만)

Posted by 구차니