Giter VIP home page Giter VIP logo

yet_another_pixel_draw's Introduction

yet_another_pixel_draw

A simple SPA pixel drawer with RESTful api, react as frontend and django as backend.

Requirements

  • Django
  • django rest framework
  • channels
  • numpy
  • pillow
  • node.js and npm(to build frontend)
  • Redis/docker redis

Installation

Install as a part of an other repo.

Running

  1. Run redis server on 127.0.0.1:6379(or change settings)
  2. Run with manage.py.

You can also try using docker container but you have to change settings.

API

Auth methods: session or token (remember that django rest framework by default uses header "Authentication: Token ..." not "...Bearer...")

  • PUT /upload_picture/ - a request with binnary picture.
  • GET /grid/ - return list of picture pixel grid shape info: [[4, 3], [2, 2] ...] means 0 layer is 4x3 grids, 1 layer is 2x2 grids ...
  • GET /grid/size/x/y/ - return array with rgb pixels of size-layer grid at coordinates x, y
  • PUT /change_color/ - Body {'x': ..., 'y': ..., 'color': ...} - change picture pixel at coordinates x, y to color
  • GET /history/?date=... - Get history of pixel changes that were created later than date - not really used in now.
  • WebSocket /ws/pixel_updater/ - WebSocket connection used for transfering pixel color changing to other users.

Examples

Data is loaded grid-by grid, only needed grids(that are shown) are visible.

It is possible to resize the field, only grids on seen layer are downloaded.

Sending pixtures via api, which sends new pixel info by websocket to all clients.

TODO

  • Refactor code(docstrings, small coding style and structure fixes).
  • API data verification.
  • Frontend improvements.

yet_another_pixel_draw's People

Contributors

framaz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.