Please sign in to access this page
//public:canvas
This project will result in a website that offers ppl to draw together on a public canvas (like r/place).
Tech used:
- Angular with Tailwind css
- Django
- PostgreSQL
- Redis
Disclaimer: This my first Django project. I only know Python and how an API basically works , therefore my progress may seem a bit slow, but learning all these new concepts takes time.
I have often asked the AI for how to do things. I also used the AI to fix certain things, like a backend websocket bug where the data wasnt sent to the user but updated in the db, but I didnt let the AI code ALL the things for me.
Followers
kzlpndx
Check their projects out: GameCube, HsConnect (TBD), ne0pi, The game
Hannes Leonhartsberger
Check their projects out: Google Ai Eradicator, Psychisches Kriegsgerät, Photoshop Wakatime Plugin, Algorithm Explorer, Vexillum
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
Started to improve the canvas db (before i had a db entry for every pixel - now im putting 50x50 pixel into one tuple and saving the color data in a data column. For some reason I experience this problem currently. Still not sure how this happens.
The website is now hosted on my publicly available server. Took some time cause I had to change some thing in the compose files and in the db.
added thiccnes slider and colour picker (they dont do anything yet, but the values of those items are correctly transmitted accross components). Also changed the sizing of some components to make the site more responsive on 4k displays.
Created custom angular material theme but for some reason this weird glow doesnt go away.
Took a way easier approach by just adding an event listener to the window once is resized. The listener calls a function that calculates the right scale by checking the window height. Making the canvas tag responsive is hard because it has to has this fixed logical size of 1000x500, my current approach is set a multiplier for the curser calculation.
Tried some time making the canvas zoomable. Then decided to throw that idea away and go with a new approach. The canvas should have fixed breakpoints and adjusts its size using them. Firstly this approach sounds way easier. Only issue is that my canvas still has a logical size of 1000 x 500 pixel. I somehow have to figure that one still out. Idk what picture i should insert so i just show what currently happens when u zoom out.
Added websocket functionality. Now the frontend sends messages live to the backend, while the backend sends out updates to all users.
Canvas element added. API is now initially called to retrieve current Canvas state. Site also waits for API call to finish, before that a text is shown. Next step is to implement the websocket feature to also send the inputs to the db. I am also not currently able to draw lines, the drawn pixels are apart from each other.
looked for some fonts, icons and tried to import the downloaded font into tailwind. couldnt figure it out.
fucking hate browser caching. Tried solving an issue with nginx that was already fixed probably half an hour ago. switched to angular btw.
finished websocket support. Created svelte project and nginx config. Got it to forward me to the api trough nginx. Learned much about Svelte (first time use)
kind of started the websocket support. But I learned what WSGI and ASGI means. For the websocket support, I implemented a consumer on the server side and I installed the channels app for Django. I also finally found out what Redis does in this whole system and set a password for it.
Learned how to create Django Apps, how Models work and what they are. I also created some test apps and models, but I deleted them in the end. Then I created a model for the canvas table and the first API endpoint that returns the current canvas state.
