231일차 - 이미지를 숫자 형태로 만들어서 실시간으로 변경되는 페이지 개발 (3)

오늘은 페이지를 완성하는 날이다.

리액트랑 뷰를 빨리 해보고싶어서 허겁지겁 끝낸 기분이다.

텍스트 애니메이션은 Animated text fill을 사용하려고한다.

 

생각해둔 과정이 있다.

1. 이미지를 텍스트로 저장해둘 Model

2. id 값을 받으면 그에 해당하는 TEXT값을 돌려주는 API

3. Ajax를 통해 TEXT 값 가져와서 웹에 반영하기.

 

1. Model, View 생성

from django.db import models


# Create your models here.
class TextModel(models.Model):
    class Meta:
        verbose_name = "이미지 텍스트"
        verbose_name_plural = "이미지 텍스트 목록"

    text = models.TextField(null=False, blank=True, verbose_name="이미지 텍스트")
    created_at = models.DateTimeField(auto_now_add=True, null=False, blank=True, verbose_name="생성 날짜")
    updated_at = models.DateTimeField(auto_now=True, null=False, blank=True, verbose_name="수정 날짜")

def get_image_to_text(request):
    if request.method == "GET":
        try:
            get_id = request.GET.get("id")
        except KeyError:
            return JsonResponse(json_error("E0002"), status=status.HTTP_400_BAD_REQUEST)

        try:
            get_text = TextModel.objects.get(id=get_id).text
            content = {"text": get_text}
            return JsonResponse(json_success("S0004", content), status=status.HTTP_200_OK)
        except TextModel.DoesNotExist:
            return JsonResponse(json_error("E0010"), status=status.HTTP_400_BAD_REQUEST)
        except AttributeError:
            return JsonResponse(json_error("E0010"), status=status.HTTP_400_BAD_REQUEST)

    else:
        return JsonResponse(json_error("E0006"), status=status.HTTP_400_BAD_REQUEST)


class TextList(generics.ListCreateAPIView):
    queryset = TextModel.objects.all()
    serializer_class = TextSerializer
    ordering = ['id']
    filter_backends = [DjangoFilterBackend]
    filterset_fields = ['id']

 

2. 웹 구조 잡기

<section style="background-color: #000000; color: #ffffff;">
    <div class="show-image-text-top-container">
        <div class="show-image-text-top-title">

        </div>
        <div class="show-image-text-top-message">

        </div>
    </div>

    <div class="show-image-text-mid-container">
        <div class="show-image-text-mid-inner">
            <div class="show-image-text-mid-change-text">
                <p class="image-text-change-p">
                  <span class="image-text-change-span" id="image-text-change-span1">
                    Loading..
                  </span>
                </p>
            </div>
        </div>
    </div>

</section>

 

3. Ajax 통신을 통한 텍스트 변환

let image_id_count = 1;

$.ajax({
  type: "GET",
  url: "{% url 'showapp:get_image_to_text' %}",
  data: {"id": image_id_count},
  dataType: "json",
  beforeSend: function (xhr) {
  xhr.setRequestHeader("Content-type","application/json");
  xhr.setRequestHeader("PrivatKey","Kwonputer");
  },

  success: function(response){
  let temp_image_text = response.data.text;
  $('#image-text-change-span1').text(temp_image_text);
  console.log("이미지 텍스트 : ", temp_image_text);
  image_id_count++;
  },
  error: function(request, status, error){
  image_id_count = 1;
  },
});

setInterval(function()
{
  $.ajax({
  type: "GET",
  url: "{% url 'showapp:get_image_to_text' %}",
  data: {"id": image_id_count},
  dataType: "json",
  beforeSend: function (xhr) {
  xhr.setRequestHeader("Content-type","application/json");
  xhr.setRequestHeader("PrivatKey","Kwonputer");
  },

  success: function(response){
  let temp_image_text = response.data.text;
  $('#image-text-change-span1').text(temp_image_text);
  image_id_count++;
  },
  error: function(request, status, error){
  image_id_count = 1;
  },
  });
}, 5000);

 

4. 결과물

만들고 보니까.. 상상과는 다르게 좀 무섭다. 생각보다 더 어두침침하고.. 좀 그렇다.. ㅋㅋㅋㅋㅋㅋ

역시 상상과 현실은 다른법이지.

 

모바일도 지원하려고 시도했지만, 크롬에서 지정한 최소 폰트크기를 뚫을수가 없어서 모바일은 PC환경 그대로 보이게 설정했다. 지금까지 만든 페이지들을 좀 더 나은 방향으로 유지보수하는 것은 우선 하고싶은 개발을 먼저 해보고, 시간이 날때마다 천천히 해보려고한다.

 

- 웹페이지 주소

https://kwonputer.com/show/image_to_text/