파드레의 요모조모

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/newitem"
        android:layout_width="wrap_content"
        android:layout_height="120px"
        />
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/add"
            android:layout_width="8px"
            android:layout_weight="3"
            android:layout_height="wrap_content"
            android:text="add"
            android:onClick="mOnclick"
            />
        <Button
            android:id="@+id/change"
            android:layout_width="8px"
            android:layout_weight="3"
            android:layout_height="wrap_content"
            android:text="change"
            android:onClick="mOnclick"
        />
        <Button
            android:id="@+id/delete"
            android:layout_width="8px"
            android:layout_weight="3"
            android:layout_height="wrap_content"
            android:text="delete"
            android:onClick="mOnclick"
            />
    </LinearLayout>
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="500px"
        />
</LinearLayout>

package com.jproject.mysturdy;

import androidx.appcompat.app.AppCompatActivity;

import android.app.LauncherActivity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

import java.lang.reflect.Array;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    String[] arGeneral = {"김유신","이순신","강감찬","을지문덕"};
    ArrayList<String> Items = new ArrayList<String>();
    ArrayAdapter<String> Adapter;
    ListView list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Items.add("Frist");
        Items.add("Second");
        Items.add("Third");

        Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, Items);

        list = (ListView) findViewById(R.id.list);
        list.setAdapter(Adapter);
        list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
    }

    public void mOnclick(View v) {
        EditText ed = (EditText)findViewById(R.id.newitem);
        int pos;
        String text;
        switch(v.getId()){
            case R.id.add:
                text = ed.getText().toString();
                if (text.length() != 0){
                    Items.add(text);
                    ed.setText("");
                    Adapter.notifyDataSetChanged();
                }
                break;
                case R.id.change:
                    text = ed.getText().toString();
                    pos = list.getCheckedItemPosition();
                    if (text.length() != 0|pos != ListView.INVALID_POSITION){
                        Items.remove(pos);
                        Items.add(pos,text);
                        ed.setText("");
                        Adapter.notifyDataSetChanged();
                    }
                    break;

            case R.id.delete:

                pos = list.getCheckedItemPosition();
                if (pos != ListView.INVALID_POSITION){
                    Items.remove(pos);
                    list.clearChoices();
                    Adapter.notifyDataSetChanged();
                }
                break;
        }
    }
}

---------------------------------------- 

       MainActivity.java

 ----------------------------------------

package com.jproject.mysturdy;

import androidx.appcompat.app.AppCompatActivity;

import android.app.LauncherActivity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.lang.reflect.Array;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    String[] arGeneral = {"김유신","이순신","강감찬","을지문덕"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayAdapter<String> Adapter;
        Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, arGeneral);

        ListView list = (ListView) findViewById(R.id.mylist);
        list.setAdapter(Adapter);
        list.setOnItemClickListener(nItemClickListener);
    }

        AdapterView.OnItemClickListener nItemClickListener = new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String mes;
                mes = "Select  Item = " + arGeneral[position];
                Toast.makeText(getApplicationContext(), mes,Toast.LENGTH_SHORT).show();

            }
        };


}

------------------------------------- 

         activity.xml

-------------------------------------

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <EditText
        android:id="@+id/edit1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"


        />
    <ListView
        android:id="@+id/mylist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

어제 지인의 부탁으로 컴퓨터를 지인집에서 조립해주었습니다. (원래 컴퓨터가 업이 아닙니다.)

아주 오랜만에 컴퓨터를 조립해보았는데요.

지인의 자금 상황을 고려하여 저렴하게 조립해주고자 부품을 추천해주었습니다.

   CPU :  인텔 코어i3-10세대 10100 (코멧레이크S) 정품          --  125,300원

   MotherBoard : ASRock B460M PRO4                               --  115,600원

   Main Memory : 삼성전자 DDR4-2666                              --    32,800원

   SSD : 삼성전자 970 EVO M.2 NVMe (500GB)                     --  102,700원

   케이스 : 마이크로닉스 Frontier H300 (화이트)                    --    27,240원

   Power :  마이크로닉스 ZERO POWER 500W                      --     41,500원

실제로는

   CPU : 인텔 코어i5-10세대 10400 (코멧레이크S) 정품

   SSD : 마이크론 Crucial P1 M.2 NVMe 대원CTS (500GB) 

                                                                           를 바꾸어서 구매했습니다.

CPU는 추천가격이 싸니까 지인이 사양을 올린 것이고  SSD는 추천을 바꾸었는데 처음 추천으로 그냥 구매했더라고요.

그래픽카드는 그냥 단순 작업만 할 것이라  CPU 내장그래픽으로 충분할 것으로 보여 사지말라고 했습니다. 

또, CPU cooler도 그냥 단순 작업만 할 것이고 overclocking이나 그래픽카드를 껴서 고사양 게임을 할 것이 아니기 때문에 정품의 기본 쿨러를 사용도록 추천했습니다.

굳이 비싼 돈을 들여서 용도에 맞지않게 비싼 것을 덕지덕지 달고 전기료를 축낼 이유가 없지요.

만일 기존 컴퓨터를 버릴 것이라고 생각했으면 케이스랑 파워도 안사고 그냥 쓸 수도 있었습니다.     

원래 티스토리에 이 이야기를 올릴 생각이 없었기 때문에 사진을 찍지못했는데 어제 컴퓨터를 조립하며 겪었던 황당한 마더보드 초기불량의 이야기를 공유하고 싶어서 글을 쓰기 때문에 사진이 없는 것을 양해해 주시기 바랍니다.

기존에는  ASUS나 GiGaByte 제품만 써보았고 그것만 조립해보았습니다. 가끔   foxcon 것을 손봐달라는 것은 있었지만요.  이번에 ASRock도 뭐 괜찬겠지하는 맘으로 구매추천을 했습니다.

일단 처음에 조립에 힘들었던 것은  ASRock 보드와 메뉴얼의 글씨가 너무 작아서 본체의 각종 케이블을 연결할때 힘들었다는 것입니다. 

다 정상적으로 조립을 하고 전원을 입력했는데 전원이 들어오지않는 것입니다. 케이스의 전원선이 2개여서 바꾸어가며 전원을 연결해봤는데도 전원이 들어오지않는 것입니다. 좀 더 시도해보니 어느 전원선을 끼면 마더보드 LED가 들어와 전원이 인가되었다는 것을 보이지만 CPU cooler가 전혀 반응을 하지않고 몇 초뒤에는 그냥 전원이 나가버리는 현상이 있었습니다. 

케이블을 다 빼보고 고민을 많이 했는데 시간은 흐르고 망신당할 것 같은 두려움이 밀려오고 이 상황을 어찌 해결해야할 지 몰라서 무지 고통스럽더군요.

그래서 인터넷으로 장애현상을 올리고 찾아봤습니다.

어디에도 이런 상황에 대한 설명이나 해결방법이 없더군요.

하지만 Youtube에서 조회해본 결과 www.youtube.com/watch?v=bfBmyITsH3k 동영상에 동일보드는 아니지만

ASRock 제품의 동일 현상에 대한 조치방법이 나오더군요.

    바로 이것이였습니다.  배터리 탈거 초기화...

ASRock 제품이 초기화가 안된 것을 그냥 내보내나봅니다.  배터리 잠시 뺐다가 다시 끼우니 아주 잘되더라고요.

힘들었던 조립 후기였기때문에 ASRock 제품을 사용하다 이와 같은 경우를 겪으면 무지 당혹할 것이기 때문에

인터넷에 이런 경우에 대한 사례를 찾아보는 분들에게 해결책을 알려주고자 저도 글을 올렸습니다.

아 그리고, 지인이 제게 한 말..

제가 추천한 것이 아니였다면 정말 비싸게 컴퓨터를 조립할 뻔 했다라고 했습니다.

용산에서는 정말 비싼 쿨러와 비디오카드를 추천해주기 때문이지요.,

feliz-dia.000webhostapp.com/game1.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Gamedev Canvas Workshop</title>

    <style>

         * { padding: 0; margin: 0; }

         canvas { background: #eee; display: block; margin: 0 auto; }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>

        var canvas = document.getElementById("myCanvas");

        var ctx = canvas.getContext("2d");

        var ballRadius = 10;

        var x = canvas.width / 2;

        var y = canvas.height - 30;

        var dx = 2;

        var dy = -2;

        var paddleHeight = 10;

        var paddleWidth = 75;

        var paddleX = (canvas.width - paddleWidth) / 2;

        var rightPressed = false;

        var leftPressed = false;

        var brickRowCount = 3;

        var brickColumnCount = 5;

        var brickWidth = 75;

        var brickHeight = 20;

        var brickPadding = 10;

        var brickOffsetTop = 30;

        var brickOffsetLeft = 30;

        var lives = 3;

        var score = 0;

        var bricks = [];

        for (var c = 0; c < brickColumnCount; c++) {

            bricks[c] = [];

            for (var r = 0; r < brickRowCount; r++) {

                bricks[c][r] = { x: 0, y: 0, status: 1 };

            }

        }

        document.addEventListener("keydown", keyDownHandler, false);

        document.addEventListener("keyup", keyUpHandler, false);

        document.addEventListener("mousemove", mouseMoveHandler, false);

        function keyDownHandler(e) {

            if (e.key == "Right" || e.key == "ArrowRight") {

                rightPressed = true;

            }

            else if (e.key == "Left" || e.key == "ArrowLeft") {

                leftPressed = true;

            }

        }

        function keyUpHandler(e) {

            if (e.key == "Right" || e.key == "ArrowRight") {

                rightPressed = false;

            }

            else if (e.key == "Left" || e.key == "ArrowLeft") {

                leftPressed = false;

            }

        }

        function mouseMoveHandler(e) {

            var relativeX = e.clientX - canvas.offsetLeft;

            if(relativeX > 0 && relativeX < canvas.width) {

                paddleX = relativeX - paddleWidth/2;

            }

        }

        function drawLives() {

            ctx.font = "16px Arial";

            ctx.fillStyle = "#0095DD";

            ctx.fillText("Lives: "+lives, canvas.width-65, 20);

        }

        function collisionDetection() {

            for(var c=0; c<brickColumnCount; c++) {

                for(var r=0; r<brickRowCount; r++) {

                    var b = bricks[c][r];

                    if(b.status == 1) {

                        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {

                            dy = -dy;

                            b.status = 0;

                            score++;

                            if(score == brickRowCount*brickColumnCount) {

                                alert("YOU WIN, CONGRATS!");

                                document.location.reload();

                            }

                        }

                    }

                }

            }

        }

        function drawBall() {

            ctx.beginPath();

            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

            ctx.fillStyle = "#0095DD";

            ctx.fill();

            ctx.closePath();

        }

        function drawPaddle() {

            ctx.beginPath();

            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

            ctx.fillStyle = "#0095DD";

            ctx.fill();

            ctx.closePath();

        }

        function drawBricks() {

            for (var c = 0; c < brickColumnCount; c++) {

                for (var r = 0; r < brickRowCount; r++) {

                    if (bricks[c][r].status == 1) {

                        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;

                        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;

                        bricks[c][r].x = brickX;

                        bricks[c][r].y = brickY;

                        ctx.beginPath();

                        ctx.rect(brickX, brickY, brickWidth, brickHeight);

                        ctx.fillStyle = "#0095DD";

                        ctx.fill();

                        ctx.closePath();

                    }

                }

            }

        }

        function drawScore() {

            ctx.font = "16px Arial";

            ctx.fillStyle = "#0095DD";

            ctx.fillText("Score: "+score, 8, 20);

        }

        function draw() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawBricks();

            drawBall();

            drawPaddle();

            collisionDetection();

            drawScore();

            drawLives();

            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {

                dx = -dx;

            }

            if (y + dy < ballRadius) {

                dy = -dy;

            }

            else if (y + dy > canvas.height - ballRadius) {

                if (x > paddleX && x < paddleX + paddleWidth) {

                    if (y = y - paddleHeight) {

                        dy = -dy;

                    }

                }

                else {

                    lives--;

                    if(!lives) {

                        alert("GAME OVER");

                        document.location.reload();

                        clearInterval(interval); // Needed for Chrome to end game

                    }

                    else {

                        x = canvas.width/2;

                        y = canvas.height-30;

                        dx = 2;

                        dy = -2;

                        paddleX = (canvas.width-paddleWidth)/2;

                    }

                }

            }

            if (rightPressed && paddleX < canvas.width - paddleWidth) {

                paddleX += 7;

            }

            else if (leftPressed && paddleX > 0) {

                paddleX -= 7;

            }

                x += dx;

                y += dy;

        }

        var interval = setInterval(draw, 10);

    </script>

</body>

</html>

: Canvas, SVG, CSS, and direct DOM animation. 

There are four ways to draw things on the web: Canvas, SVG, CSS, and direct DOM animation. Canvas differ from the other three:

SVG: SVG는 그림을 그리는 vector API 이다. 각 그림은 한개의 object를 갖는다.  그 object에 event handler를 연결할 수 있고 줌을 할때 캔버스에서 부드럽게 픽셀로 변환되어질 수 있다. 

CSS: CSS은 사실은 styling DOM elements에 관한 것이다. 그래서 캔버스에 그릴 수 있는 DOM objects가 없고,

      DOM object를 꾸밀 수 있는CSS가 없다.

      css는 사각형 영역에만 영향을 미치고 경계와 배경 색깔을 설정할 수 있다.

DOM animation: The DOM, Document Object Model은 화면에 있는 모든 object를 정의한다.,

      DOM animation은 CSS나 JavaScript로 objects를 움직일 수 있고 캔버스로 움직이는 것보다

      부드럽게 움직일 수 있으나 구현은 웹 브라우저에 따라 다르다.

Canvas : 위의 다른 것 낮은 수준으로 그림에 더 많은 제어를 해야하나 적은 메모리를 사용한다.  즉 적은 메모리를 사용하는 만큼 많은 코드가 필요하다는 것이다.

브라우저 지원

핸드폰 지원

본 내용은   joshondesign.com/ 에서 게시된 내용을 정리한 내용입니다.    

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>

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

    var c = canvas.getContext('2d');

    c.fillStyle = "red";

    c.fillRect(100,100,400,300);

  </script>

</body>

</html>

SCREENSHOT Simple red rectangle

feliz-dia.000webhostapp.com/simple%20rectangle.html

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

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

    var c = canvas.getContext('2d');

    c.fillStyle = '#ccddff';

    c.beginPath();

    c.moveTo(50,20);

    c.lineTo(200,50);

    c.lineTo(150,80);

    c.closePath();

    c.fill();

    c.strokeStyle = 'rgb(0,128,0)';

    c.lineWidth = 5; c.stroke();

  </script>

</body>

</html>

feliz-dia.000webhostapp.com/simple%20triangle.html

simple path :

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

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

    var c = canvas.getContext('2d');

    
    c.fillStyle = 'red';
    c.beginPath();
    c.moveTo(10,30);
    c.bezierCurveTo(50,90,159,-30,200,30);
    c.lineTo(200,90);
    c.lineTo(10,90);
    c.closePath();
    c.fill();
    c.lineWidth = 4;
    c.strokeStyle = 'black';
    c.stroke();    
  </script>

</body>

</html>

feliz-dia.000webhostapp.com/simple%20path.html