Programming/JS/Jquery/Ajax2014. 10. 13. 10:55

[YDN-DB] Javascript database IndexedDB / WebSQL / WebStorage.

브라우져에 데이터를 저장하는 할 수 있는 


IndexedDB / WebSQL / WebStorage에 대해서 보다 쉽게 사용할 수 있는 자바스크립트 라이브러리


공식사이트 : http://dev.yathit.com/ydn-db

Github : https://github.com/yathit/ydn-db

LICENSE : Apache License ( https://github.com/yathit/ydn-db/blob/master/LICENSE )


사용방법은 심플한 편인 듯하다.


var db = new ydn.db.Storage('db-name');
db.put('store-name', {message: 'Hello world!'}, 'id1');
db.get('store-name', 'id1').always(function(record) {
  console.log(record);
});


그리고 공식사이트를 보면 다양한 쿼리 방법으로도 사용 가능 하고


RESTful API를 활용해서 동기화하는 방법도 가능 하다

(기본적으로 다양한 클라우드 서비스 지원하는 듯하고 자제적으로 API를 만들어서 사용해도 가능 할것으로 생각된다)


http://dev.yathit.com/ydn-db/doc/sync/build-in.html


Synchronizing with YDN-DB

YDN-DB have build in synchronization support for AWS S3 (Amazon simple storage service), ATOM syndicate format, OData, GData, GCS (Google cloud storage).



우선 내세우는 자세한 특정은 아래 정도인 듯한데  테스트를 해봐야 될 듯 하다.

- Multi-browser support

- Powerful query

- Database that Syncs

- Easy to debug

- High performance

- SQL support

- Custom build

- Full-text search


저작자표시 비영리 변경금지
Posted by 시니^^
Programming/HTML/CSS2014. 9. 27. 16:14

[HTML5] canvas 이용 화살표 있는 대각선 그리기

canvas 이용 머리쪽은 세모 아래쪽은 네모 대각선 그리기


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> canvas 이용 화살표 있는 대각선 그리기</title>
  5. </head>
  6. <body>
  7. <div style="width:402px;height:402px;border:1px solid;">
  8. <div style="position:absolute;"><canvas id="lineDiv1" height="400" width="400"></canvas></div>
  9. </div>
  10. <script type="text/javascript">
  11. function ArrowLine(id){
  12. this.headSize=10;
  13. this.endSize=6;
  14. this.canvas=document.getElementById(id);
  15. this.ctx=this.canvas.getContext("2d");
  16. this.ctx.lineWidth=1;
  17. this.ctx.strokeStyle='blue';
  18. this.ctx.fillStyle='blue';
  19. // var gradient=this.ctx.createLinearGradient(0,0,170,0);
  20. // gradient.addColorStop("0","red");
  21. // gradient.addColorStop("0.5","magenta");
  22. // gradient.addColorStop("1.0","blue");
  23. // this.ctx.strokeStyle=gradient;
  24. // this.ctx.fillStyle=gradient;
  25. };
  26. ArrowLine.prototype.draw=function(x1,y1,x2,y2){
  27. // draw the line
  28. this.ctx.beginPath();
  29. this.ctx.moveTo(x1,y1);
  30. this.ctx.lineTo(x2,y2);
  31. this.ctx.stroke();
  32. var radians = Math.atan((y2-y1)/(x2-x1));
  33. //Head
  34. headRadians = radians + ((x2>x1)?-90:90)*Math.PI/180;
  35. this.drawhead(this.ctx,x1,y1,headRadians);
  36. //End
  37. endRadians = radians + ((x2>x1)?90:-90)*Math.PI/180;
  38. this.drawEnd(this.ctx,x2,y2,endRadians);
  39. };
  40. ArrowLine.prototype.drawhead=function(ctx,x,y,radians){
  41. ctx.save();
  42. ctx.beginPath();
  43. ctx.translate(x,y);
  44. ctx.rotate(radians);
  45. ctx.moveTo(0,0);
  46. ctx.lineTo(5,this.headSize);
  47. ctx.lineTo(-5,this.headSize);
  48. ctx.closePath();
  49. ctx.restore();
  50. ctx.fill();
  51. };
  52. ArrowLine.prototype.drawEnd=function(ctx,x,y,radians){
  53. ctx.save();
  54. ctx.beginPath();
  55. ctx.translate(x,y);
  56. ctx.rotate(radians);
  57. ctx.moveTo(0,0);
  58. ctx.lineTo(-this.endSize,0);
  59. ctx.lineTo(this.endSize,0);
  60. ctx.lineTo(this.endSize,-this.endSize);
  61. ctx.lineTo(-this.endSize,-this.endSize);
  62. ctx.lineTo(-this.endSize,0);
  63. ctx.closePath();
  64. ctx.restore();
  65. ctx.fill();
  66. };
  68. var ArrowLine=new ArrowLine("lineDiv1");
  69. ArrowLine.draw(45,90,250,275);
  70. </script>
  71. </body>
  72. </html>


원본 참고 자료

http://stackoverflow.com/questions/16025326/html-5-canvas-complete-arrowhead

http://jsfiddle.net/m1erickson/Sg7EZ/


저작자표시 비영리 변경금지
Posted by 시니^^
Programming/HTML/CSS2014. 9. 26. 17:18

[HTML] 모바일 환경에서 풀스크린화면 처리

간단하게 프로트타입 웹앱 개발용


  1. <!-- 모바일용웹 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. <!-- 안드로이드 홈화면추가시 상단 주소창 제거 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <link rel="icon" href="/img/favicon.ico">
  6. <!-- ios홈화면추가시 상단 주소창 제거 -->
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link rel="apple-touch-icon" href="/img/favicon.ico">



설명 잘되어있는 곳 링크

http://www.html5rocks.com/ko/mobile/fullscreen/


저작자표시 비영리 변경금지
Posted by 시니^^

티스토리툴바