Programming/jquery2023. 7. 27. 19:04

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

jquery ajax delete가 없다?  (0) 2022.09.16
jquery-cookie 라이브러리  (0) 2022.09.05
jquery 우클릭 가로채기  (0) 2019.06.04
jquery ajax json flask  (0) 2019.01.07
jquery this 버튼 checked  (0) 2019.01.07
Posted by 구차니

어떻게 보면 당연한데 얘는 number가 아니라 text 다

그래서 <input type="text"> 로 해주어야 한다.

 

const a = 3540000;
console.log(a.toLocaleString('ko-KR'))  //"3,540,000"

[링크 : https://mong-blog.tistory.com/entry/input에-입력된-숫자에-콤마-찍기]

Posted by 구차니
Programming/web 관련2023. 7. 24. 12:33

canvas로 무언가를 그리는걸 구현했는데 1초에 한번 읽고

다시 붙여 넣고, 다시 1줄 붙여 넣고 이런식으로 1초 이내에 몇번의 작업을 하는 코드를 작성했더니

크롬에서 아래와 같은 notice 를 띄운다. 일단 최소한 경고는 아닌데..

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

 

링크를 찾아가서 보면 will read frequently를 true 로 설정해주면 최적화 된다고 하는데

The CanvasRenderingContext2D object also has a will read frequently boolean. When a CanvasRenderingContext2D object's will read frequently is true, the user agent may optimize the canvas for readback operations.
On most devices the user agent needs to decide whether to store the canvas's output bitmap on the GPU (this is also called "hardware accelerated"), or on the CPU (also called "software"). Most rendering operations are more performant for accelerated canvases, with the major exception being readback with getImageData(), toDataURL(), or toBlob(). CanvasRenderingContext2D objects with will read frequently equal to true tell the user agent that the webpage is likely to perform many readback operations and that it is advantageous to use a software canvas.

 

어디다가 저걸 넣어야 하나 해서 따라가보니 getContext("2d")로 끝낼게 아니라, 초기화 옵션으로 주면 되는 듯.

context = canvas.getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] [, willReadFrequently: false ]} ])Returns a CanvasRenderingContext2D object that is permanently bound to a particular canvas element.
If the alpha member is false, then the context is forced to always be opaque.
If the desynchronized member is true, then the context might be desynchronized.
The colorSpace member specifies the color space of the rendering context.
If the willReadFrequently member is true, then the context is marked for readback optimization.
context.canvas
MDN
Returns the canvas element.
attributes = context.getContextAttributes()Returns an object whose:

[링크 : https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d]

 

그래서 결과적으로 아래와 같이 getContext에 willReadFrequently 를 추가해주니 별다른 경고가 발생하지 않는다.

var canvas = document.getElementById(cvsID)
var ctx = canvas.getContext("2d");
var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);
var canvas = document.getElementById(cvsID)
var ctx = canvas.getContext("2d", {willReadFrequently : true} );
var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);

[링크 : https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true]

'Programming > web 관련' 카테고리의 다른 글

웹 브라우저 10080 포트 접근 차단 이유  (0) 2023.08.03
javascript 배열을파일로 저장하기  (0) 2023.08.02
webGPU  (0) 2023.05.18
chart.js log 스케일  (0) 2023.03.31
chatGPT님 가라사대 Server-Sent Events (SSE)  (0) 2023.03.15
Posted by 구차니

document 객체를 이용해서 element를 생성만 하고 추가하지 않으면 되는건가?

// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;

// Get the drawing context
var ctx = canvas.getContext('2d');

// Then you can do stuff, e.g.:
ctx.fillStyle = '#f00';
ctx.fillRect(20,10,80,50);

 

var offscreen = new OffscreenCanvas(256, 256);

[링크 : https://stackoverflow.com/questions/3892010/create-2d-context-without-canvas]

 

크롬에서 확인해보니 먼가 되는것 같긴 하다?

버전 114.0.5735.198(공식 빌드) (64비트)

var offscreen = new OffscreenCanvas(256, 256);
undefined
ctx = offscreen.getContext("2d")
OffscreenCanvasRenderingContext2D {canvas: OffscreenCanvas, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …}

 

+

OffscreenCanvas() 에는 toDataURL()이 없나보다.

 

+

getContext("2d").canvas 로 하면 굳이 복잡하게 하지 않아도 바로 imf로 떨어지는 듯.

var first = document.getElementById('first').getContext('2d');
var sec = document.getElementById('second').getContext('2d');

// draw on first canvas
first.fillStyle = '#07C';
first.fillRect(0, 0, first.canvas.width, first.canvas.height);

// draw image on second canvas
var img = new Image();
img.src = "http://lorempixel.com/300/300";
img.onload = function() {
   sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height);
   sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas
};

[링크 : https://stackoverflow.com/questions/44574228/copying-and-pasting-one-canvas-inside-another-canvass-corner]

Posted by 구차니

canvas에 먼가 그려져 있어야 테스트를 하니 일단 줄을 그리고

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Draw the Path
ctx.stroke();

[링크 : https://www.w3schools.com/jsref/canvas_lineto.asp]

 

여기서 나오는 waterfall display를 canvas로 간단하게 그려보려고 하니

[링크 : https://www.arc.id.au/Spectrogram.html]

 

간간히 아래와 같은 경고? 에러가 나지만 일단 무시하고 실행은 가능하니 나중에 찾아봐야 할 듯.

tt.html:27 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

[링크 : https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently]

 

getImageData를 이용하여 좌상단으로 부터 가장 아래 1줄 빼고 복사하고

putImageData를 이용하여 복사한 그림을 위에 1줄 비우고 붙여넣는다.

결과적으로 가장 왼쪽 위 1픽셀은 남은채 나머지는 아래로 흘러내리는 애니메이션 완성!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="sepctrograph" height=500 width=1800></canvas>
    <script>
        function init_canvas()
        {
            canvas = document.getElementById("sepctrograph")
            ctx = canvas.getContext("2d");

            // Start a new Path
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(300, 150);

            // Draw the Path
            ctx.stroke();
        }

        function flow_canvas()
        {
            console.log("ing");
            canvas = document.getElementById("sepctrograph")
            ctx = canvas.getContext("2d");
            imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);
            ctx.putImageData(imgObj, 0, 1); // next line draw
        }

        init_canvas();
        setInterval(flow_canvas, 1000);
        
    </script>
    </body>
</html>

 

 

+

새로 생성하지 않고 getImageData로 받은건 이상하게 편집이 안되는 느낌이라..

그냥 높이 1짜리로 새롭게 만들어서, 가장 위에 한줄 넣는게 무난한 듯.

const myImageData = ctx.createImageData(width, height);

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas]

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

숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
canvas 없는 getcontext  (0) 2023.07.12
javascript 정수는 정수가 아니다  (0) 2023.04.06
websocket binarytype  (0) 2023.04.04
자바스크립트 소수점 자르기  (0) 2023.03.13
Posted by 구차니
Programming/golang2023. 6. 27. 18:23

아래와 같이 staticweb을 띠우도록 하고 browse 기능을 켜면 되는데

e := echo.New()
e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
Root:   "html",
Browse: true,
}))

 

문제는 index.html이 있을 경우

index.html 와 같은 레벨에 있는 sub directory의 경우

들어가서 파일을 보면 경로가 이상하게 작동한다.

 

머 이런 개뼉다구 같은 버그가 -_-

 

+

2023.09.13

끝에 / 을 붙여주면 잘 된다.

예를 들어 html/test 라는 디렉토리가 있으면

localhost:5000/test 는 오작동하지만

localhost:5000/test/ 는 정상작동 한다.

directory면 trailing / 정도는 해주란 말이야... ㅠㅠ

 

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

golang asm  (0) 2023.08.24
golang goarch=arm64 와 디스어셈블러  (0) 2023.08.23
go ws server client example  (0) 2023.06.08
golang waitgroup  (0) 2023.05.24
golang echo server middleware  (0) 2023.05.24
Posted by 구차니
Programming/golang2023. 6. 8. 22:21

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

golang goarch=arm64 와 디스어셈블러  (0) 2023.08.23
golang echo 서버 이상한 버그 발견?  (0) 2023.06.27
golang waitgroup  (0) 2023.05.24
golang echo server middleware  (0) 2023.05.24
golang 동시성  (0) 2023.05.24
Posted by 구차니
Programming/rust2023. 5. 26. 23:31

use std::io; 없이 사용시

error[E0433]: failed to resolve: use of undeclared crate or module `io`
 --> main.rs:8:5
  |
8 |     io::stdin()
  |     ^^
  |     |
  |     use of undeclared crate or module `io`
  |     help: a builtin type with a similar name exists: `i8`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0433`.




변수 사용 없음 (경고)

warning: unused `Result` that must be used
  --> main.rs:10:5
   |
10 | /     io::stdin()
11 | |         .read_line(&mut guess);
   | |______________________________^
   |
   = note: this `Result` may be an `Err` variant, which should be handled
   = note: `#[warn(unused_must_use)]` on by default

warning: 1 warning emitted




read_line mut 없이

error[E0308]: mismatched types
  --> main.rs:11:20
   |
11 |         .read_line(&guess);
   |          --------- ^^^^^^ types differ in mutability
   |          |
   |          arguments to this method are incorrect
   |
   = note: expected mutable reference `&mut String`
                      found reference `&String`
note: method defined here
  --> /rustc/84c898d65adf2f39a5a98507f1fe0ce10a2b8dbc\library\std\src\io\stdio.rs:383:12

error: aborting due to previous error

For more information about this error, try `rustc --explain E0308`.





///
let guess = String::new();
    io::stdin().read_line(&mut guess);
///

error[E0596]: cannot borrow `guess` as mutable, as it is not declared as mutable
  --> main.rs:11:20
   |
11 |         .read_line(&mut guess);
   |                    ^^^^^^^^^^ cannot borrow as mutable
   |
help: consider changing this to be mutable
   |
8  |     let mut guess = String::new();
   |         +++

error: aborting due to previous error

For more information about this error, try `rustc --explain E0596`.







//
let guess = String::new();
    io::stdin().read_line(&guess);
//

error[E0308]: mismatched types
 --> main.rs:9:27
  |
9 |     io::stdin().read_line(&guess);
  |                 --------- ^^^^^^ types differ in mutability
  |                 |
  |                 arguments to this method are incorrect
  |
  = note: expected mutable reference `&mut String`
                     found reference `&String`
note: method defined here
 --> /rustc/84c898d65adf2f39a5a98507f1fe0ce10a2b8dbc\library\std\src\io\stdio.rs:383:12

error: aborting due to previous error

For more information about this error, try `rustc --explain E0308`.










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

rust mut  (0) 2023.05.25
rust visibility and privacy  (0) 2023.05.25
rust 소유권  (0) 2023.05.25
rust was  (0) 2023.05.20
c에서 rust 호출하기  (0) 2023.05.11
Posted by 구차니
Programming/rust2023. 5. 25. 19:53

변수에 값을 넣으면 c 처럼 값이 변경되지 않아

let을 이용 재귀적으로 다시 할당을 하거나 mut 키워드로 변경이 가능한 변수로 지정해야 한다.

fn main() {
    let x = 5;
    println!("The value of x is: {x}");
    x = 6;
    println!("The value of x is: {x}");
}

$ cargo run
   Compiling variables v0.1.0 (file:///projects/variables)
error[E0384]: cannot assign twice to immutable variable `x`
 --> src/main.rs:4:5
  |
2 |     let x = 5;
  |         -
  |         |
  |         first assignment to `x`
  |         help: consider making this binding mutable: `mut x`
3 |     println!("The value of x is: {x}");
4 |     x = 6;
  |     ^^^^^ cannot assign twice to immutable variable

For more information about this error, try `rustc --explain E0384`.
error: could not compile `variables` due to previous error

 

좀 더 아래 shadowing 에 있는 예제인데

let x = 5;

let x = x + 1; 을 이용해서 자기 자신에게 새로운 값을 소유하게 하는 것은 인정 되는 듯

fn main() {
    let x = 5;

    let x = x + 1;

    {
        let x = x * 2;
        println!("The value of x in the inner scope is: {x}");
    }

    println!("The value of x is: {x}");
}

 

아무튼 언어 설계상 정석은 mut 키워드를 쓰는 것으로 보인다.

fn main() {
    let mut x = 5;
    println!("The value of x is: {x}");
    x = 6;
    println!("The value of x is: {x}");
}

 

[링크 : https://doc.rust-lang.org/book/ch03-01-variables-and-mutability.html]

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

rust mut 외 몇가지 컴파일 에러들  (0) 2023.05.26
rust visibility and privacy  (0) 2023.05.25
rust 소유권  (0) 2023.05.25
rust was  (0) 2023.05.20
c에서 rust 호출하기  (0) 2023.05.11
Posted by 구차니
Programming/rust2023. 5. 25. 19:40

pub 이라는 키워드가 존재해서

Syntax
Visibility :
      pub
   | pub ( crate )
   | pub ( self )
   | pub ( super )
   | pub ( in SimplePath )

 

기본은 private 이고 public으로 할 녀석들만 pub로 해주면 된다.

그런데 rust는 객체지향 언어는 아니라니까 class가 존재하지 않는데

c언어 처럼 static 키워드로 내/외부용으로 구분하는 수준이 되려나?

구조체에서 개별 항목에 대해서 pub이 적용되는지 조금 더 찾아봐야 할 것 같다.

// Declare a private struct
struct Foo;

// Declare a public struct with a private field
pub struct Bar {
    field: i32,
}

// Declare a public enum with two public variants
pub enum State {
    PubliclyAccessibleState,
    PubliclyAccessibleState2,
}

[링크 : https://doc.rust-lang.org/reference/visibility-and-privacy.html]

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

rust mut 외 몇가지 컴파일 에러들  (0) 2023.05.26
rust mut  (0) 2023.05.25
rust 소유권  (0) 2023.05.25
rust was  (0) 2023.05.20
c에서 rust 호출하기  (0) 2023.05.11
Posted by 구차니