{"id":25607145,"url":"https://github.com/metodejjanota/jspaint","last_synced_at":"2026-05-17T10:36:58.867Z","repository":{"id":172032744,"uuid":"648746660","full_name":"metodejjanota/JSPaint","owner":"metodejjanota","description":"Tento projekt je zaměřen na pixelové malování na HTML5 canvas s širokým spektrem funkcí a možností. Vytvořili jsme interaktivní a zábavnou aplikaci, která umožňuje uživatelům malovat a vytvářet obrázky pomocí jednotlivých pixelů.","archived":false,"fork":false,"pushed_at":"2023-10-17T20:53:30.000Z","size":2955,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-29T14:30:49.930Z","etag":null,"topics":["backend","javascript","multiplayer","node","server-side","socket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metodejjanota.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-02T17:51:52.000Z","updated_at":"2025-01-16T08:26:53.000Z","dependencies_parsed_at":"2023-07-10T11:16:40.307Z","dependency_job_id":"1196f50a-6876-4f42-aa52-380d8455b1e0","html_url":"https://github.com/metodejjanota/JSPaint","commit_stats":null,"previous_names":["janx-xyz/jspaint","janota-metodej/jspaint","metodejjanota/jspaint"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/metodejjanota/JSPaint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metodejjanota%2FJSPaint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metodejjanota%2FJSPaint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metodejjanota%2FJSPaint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metodejjanota%2FJSPaint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metodejjanota","download_url":"https://codeload.github.com/metodejjanota/JSPaint/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metodejjanota%2FJSPaint/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33135105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","javascript","multiplayer","node","server-side","socket"],"created_at":"2025-02-21T19:18:20.376Z","updated_at":"2026-05-17T10:36:58.853Z","avatar_url":"https://github.com/metodejjanota.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSPaint\nHlavní rysy projektu zahrnují:\n\nMalování na canvas: Uživatelé mohou vybírat z různých nástrojů a barev a přímo na canvas tvořit své pixelové umění.\n\nFunkce a nástroje: Aplikace nabízí různé funkce, jako jsou malování volnou rukou, plnění barvou, změna velikosti štětce, rozmazání, překrytí vrstev a další. To umožňuje uživatelům uplatnit svou kreativitu a dosáhnout požadovaného efektu.\n\nMožnost multiplayeru: Kromě individuálního malování nabízíme také multiplayerový režim, ve kterém mohou uživatelé spolupracovat a malovat na stejném plátně s ostatními uživateli. To vytváří interaktivní a komunitní prostředí.\n\nUkládání a sdílení: Uživatelé mají možnost uložit své umělecké dílo a sdílet ho s ostatními prostřednictvím integrovaného sdílení na sociálních sítích.\n\nTento projekt je open-source a vítáme příspěvky a spolupráci od komunity. Připojte se k nám na Githubu a pomozte nám vylepšit tuto aplikaci a přidat nové funkce, aby byla ještě zajímavější a užitečnější pro uživatele.\n\n\n# Celá dokumentace zde: \n\n\nÚvod\nDůvod vytvoření projektu:\nTento projekt jsem si vybral pro klauzurní práce do předmětu JavaScript, který měl za úkol rozšířit ale také prověřit mé znalosti ohledně předmětu.\n\nDojmy z projektu:\nPráce na tomhle projektu mě bavila a naučila mě spoustu nových věcí jako například rozšířenější prací s localstorage nebo také s knihovnu Socket.io která slouží pro multiplayer.\n\nCíl projektu:\nCílem tohoto projektu bylo vytvořit online kreslící plátno, které bude také nabízet funkce jako je ukládání a načítání kreseb, možnost změny velikosti plátna a různé nástroje pro kreslení jako je guma, krok vpřed a vzad, kreslení pixelových čar a další.\n\nSocket.io\nSocket.IO je knihovna pro komunikaci v reálném čase mezi webovými prohlížeči a serverem která umožňuje vytváření \"socketů\" na straně klienta i serveru. \nSocket.io bylo využito na:\n1.\tZprávy neboli chat ve webové aplikace\n2.\tSdílení plátna\n\nKomentáře ve zdrojovém kódu\nKomentáře ve zdrojovém kódu budou usnadňovat možnou budoucí údržbu, rozšíření kódu či přizvání nového vývojáře do projektu.\n\nPopis funkcí, metod a proměnných\nProměnné\n\tKlientova část\n1.\tsocket: Představuje instanci socketu pro komunikaci se serverem.\n2.\tcanvas, ctx, canvasGRID, ctxGRID: Proměnné pro práci s plátnem a jeho kontextem.\n3.\tifMouseDown: Proměnná indikující, zda je tlačítko myši stisknuto.\n4.\tdrawingHistory: Pole uchovávající historii kreslených objektů.\n5.\tcurrentStep: Index aktuálního kroku v historii.\n6.\tsteps: Počítadlo kroků pro kreslení čar.\n7.\tscale: Měřítko kreslení.\n8.\tclientRoom: Identifikátor místnosti pro klienta.\n9.\tname: Jméno klienta.\n10.\tsaves: Pole pro ukládání objektů.\n11.\tzoomLevel: Proměnná která uchovává aktuální úroveň přiblížení plátna.\n12.\tzoomIncrement: Tato proměnná udává, o kolik se má změnit zoomLevel při každém přiblížení nebo oddálení. \n\n\tServerová část\n1.\texpress: Proměnná pro modul Express, který je použit pro vytvoření a konfiguraci webového serveru.\n2.\tapp: Instance Express aplikace, která představuje webový server.\n3.\thttp: Proměnná pro vytvoření HTTP serveru pomocí modulu \"http\" a využití instance Express aplikace.\n4.\tport: Číslo portu, na kterém bude server naslouchat.\n5.\tio: Instance Socket.IO, která je inicializována s využitím HTTP serveru a konfigurací pro povolení CORS (Cross-Origin Resource Sharing) pro komunikaci s klienty, kdyby kód tuhle část neobsahoval tak by se server vůbec nemohl napojit na klienty.\n6.\ttotalUsers: Proměnná pro sledování celkového počtu uživatelů online.\n7.\tsocket.id: Unikátní identifikátor připojeného socketu (klienta).\n8.\tsocket: Instance Socket.IO, která představuje spojení mezi serverem a klientem.\nFunkce\n\tKlientova část\n1.\tdraw(x, y, range, colorMult): Vykresluje pixely na základě zadaných souřadnic, rozsahu a barvy.\n\n2.\tloadSaves(x, y, range, color): Načítá objekty uložené v localStorage a vykresluje je na plátno.\n\n3.\tearser(): Nastavuje barvu inputu kreslící barvy na barvu pozadí, čímž simuluje efekt gumy.\n\n4.\tdownloadSave(): Stahuje data z localStorage ve formátu JSON jako soubor \"saves.json\".\n\n5.\tsaveAsik(): Spouští funkci downloadSave() pro uložení dat z localStorage.\n\n6.\tdisplay(event): Získává pozici kurzoru a volá funkci draw() pro vykreslení pixelu na dané pozici a vypočítává položení pixelu do rastru.\n\n7.\tredrawCanvas(): Překresluje plátno na základě historie kroků vykreslených pixelů.\n\n8.\taddKrok(x, y, width, height, color): Přidává krok do historie vykreslených pixelů pro funkce undo() a redo().\n\n9.\tundo(): Vrací se o jeden krok zpět v historii vykreslených pixelů a překresluje plátno.\n\n10.\tredo(): Přechází o jeden krok vpřed v historii vykreslených pixelů a překresluje plátno.\n\n11.\tmouseMove(): Sleduje stav myši a volá funkci display() a draw() pro vykreslení pixelů při pohybu myši.\n\n12.\tshowGrid(range): Vykresluje mřížku na druhé plátno (canvasGRID) na základě zadaného rozsahu.\n\n13.\tgetRandomColor(): Generuje náhodnou barvu v hex formátu.\n\n14.\tclearCanvas(): Vyčištění plátna (canvas) a smazání dat v localStorage.\n\n15.\tzoomInCanvas(): Tato funkce zvyšuje úroveň přiblížení (zoomLevel) o hodnotu zoomIncrement. Následně volá funkci applyZoom(), která upravuje velikost plátna na základě aktuální úrovně přiblížení.\n\n16.\tzoomOutCanvas(): Tato funkce snižuje úroveň přiblížení (zoomLevel) o hodnotu zoomIncrement. Před snížením se provádí kontrola, zda je aktuální úroveň přiblížení větší než hodnota zoomIncrement. Pokud ano, dojde ke snížení. V opačném případě se úroveň přiblížení nastaví na hodnotu 1. Následně volá funkci applyZoom(), která upravuje velikost plátna na základě aktuální úrovně přiblížení.\n\n17.\tzoomReset(): Tato funkce nastavuje úroveň přiblížení (zoomLevel) na hodnotu 1, čímž se vrátí k výchozímu stavu.\n\n18.\tapplyZoom(): Tato funkce upravuje velikost plátna na základě aktuální úrovně přiblížení (zoomLevel). Používá vlastnost style.transform plátna a nastavuje hodnotu scale(${zoomLevel}), což způsobí zvětšení nebo zmenšení plátna podle aktuální úrovně přiblížení.\n\n19.\tsetCanvasClear(): Vyčištění plátna v případě multiplayeru.\n\n20.\tdrawLines(x0, y0, x1, y1, color, range): Vykresluje čáru mezi zadanými body na základě algoritmu Bresenhamovy pixelové čáry.\n\n21.\tload(): Načítá data z localStorage a vykresluje je na plátno.\n\n22.\tchangeCanvasSize(): Mění velikost všech pláten (canvas, canvasGRID, canvasHOVER) na základě zadaných rozměrů.\n\n\tServerová část\n1.\thttp.listen(port, function..: Funkce pro spuštění serveru a naslouchání na zadaném portu. \n\n2.\tio.on(\"connection\", function (socket)..: Funkce pro zachycení události \"connection\" (připojení klienta) pomocí Socket.IO.\n\n3.\tsocket.on(\"draw\", function (obj)..: Funkce pro zachycení události \"draw\" (kreslení) od klienta. V této funkci jsou data o kreslení odeslána všem klientům ve stejné místnosti (room) pomocí metody socket.to(\"room\" + obj.clientRoom).emit(\"draw-mult\", obj).\n\n4.\tsocket.on(\"disconnect\", function (socket)..: Funkce pro zachycení události \"disconnect\" (odpojení klienta). V této funkci je logováno odpojení klienta a aktualizován počet celkových uživatelů online.\n\n5.\tsocket.on(\"createRoom\", function (room)..: Funkce pro zachycení události \"createRoom\" (vytvoření místnosti) od klienta. V této funkci je klient přidán do místnosti (room) pomocí metody socket.join(room) a odeslán klientovi aktualizovaný název místnosti pomocí socket.emit(\"updateRoom\", room).\n\n6.\tsocket.on(\"joinRoom\", function (roomCode)..: Funkce pro zachycení události \"joinRoom\" (připojení do místnosti) od klienta. V této funkci je klient přidán do existující místnosti (room) s kódem roomCode pomocí metody socket.join(roomCode) a odeslán klientovi aktualizovaný kód místnosti pomocí socket.emit(\"updateRoom\", roomCode).\n\n7.\tsocket.on(\"clearCanvas\", function (clientRoom)..: Funkce pro zachycení události \"clearCanvas\" (smazání plátna) od klienta. V této funkci je odeslán signál všem klientům ve stejné místnosti (room) pomocí socket.to(\"room\" + clientRoom).emit(\"setCanvasClear\"), aby smazali svá plátna.\n\n8.\tsocket.on(\"chatmessage\", function  (data)..: Funkce pro zachycení události \"chatmessage\" (chatová zpráva) od klienta. V této funkci je přijatá chatová zpráva odeslána všem klientům pomocí io.emit(\"chatmessage\", data).\nEvent Listenery\n1.\tPokud je stisknuta kombinace kláves Ctrl + Z, zavolá se funkce undo().\n2.\tPokud je stisknuta kombinace kláves Ctrl + Y, zavolá se funkce redo().\n3.\tPokud je stisknuta kombinace kláves Ctrl + C, zavolá se funkce clearCanvas().\n4.\tPokud je stisknuta kombinace kláves Ctrl + 1, zavolá se funkce zoomInCanvas().\n5.\tPokud je stisknuta kombinace kláves Ctrl + 2, zavolá se funkce zoomOutCanvas().\n6.\tPokud je stisknuta kombinace kláves Ctrl + 3, zavolá se funkce zoomReset().\n7.\tPokud je stisknut mezerník, zavolá se funkce getRandomColor().\n\nZávěr:\nVytvořil jsem webovou aplikaci, ve které jsem si během vývoje osvojil technologie jako HTML5, CSS3, a hlavně programovací jazyk JavaScript. Svůj výsledek na projektu bych zhodnotil kladně a jsem s výsledkem spokojený. Při práci s knihovnou Socket.io jsem měl lehké potíže i přestože ji znám a již několikrát jsem s ní pracoval. Můj napsaný kód bych řekl že vypadá poněkud jednoduše ale orientovat se v něm mi dělalo někdy potíže což mně naučilo, že do příště budu více využívat moduly a více si organizovat napsaný kód.\n\nDosažené výsledky:\n1.\tMožnost základního kreslení na plátno.\n2.\tMožnost změny barvy pozadí a vyčistění plátna.\n3.\tFunkce „Undo“ a „Redo“.\n4.\tUkládání a načítání dat.\n5.\tPosílání zpráv.\n6.\tMožnost multiplayeru/sdílení plátna.\n7.\tExportování do PNG.\n8.\tUkládání momentálního plátna do JSON a možnost ho načíst.\n\nMožnosti budoucího vývoje\nOptimalizace výkonu\nV současné době aplikace pracuje s jedním hlavním plátnem a ukládá všechny kroky do historie, což může ovlivnit výkon při práci s velkým množstvím kroků.\nRozšíření nástrojů\nV současném stavu aplikace jsou dostupné základní nástroje pro manipulaci s plátnem. V budoucnu by byla možnost přidat další nástroje, jako je například výběr objektů, úprava jejich vlastností nebo více druhů štětců.\nVylepšení uživatelského rozhraní / UI\nUživatelské rozhraní je momentálně velmi jednouché což bych chtěl v budoucnu napravit tak aby vše bylo více přehledné a intuitivní.\nRozšíření importu a exportu\nMomentálně je podporován import a export plátna pomocí JSON formátu. V budoucnu bych mohl přidat podporu dalších formátů jako je například PNG, JPEG nebo SVG.\n\nNávod ke spuštění a používání JSPaint\nNávod pro Připojení se do místnosti\n1.\tSpuštění Live Serveru\n2.\tOtevření terminálu/konzole\n3.\tDo terminálu napište: „npm run devStart“\n4.\tObnovení stránky\n\nNávod pro Připojení se do místnosti\n1.\tNajdeme sekci „Multiplayer“ pravém dolním rohu\n2.\tNajdeme zde svoji místnost a input\n3.\tDo inputu zadejte místnost, do které se chcete připojit\n\nKlávesové zkratky\no\tMezerník: Náhodná barva\no\tCTRL + Z: Krok dozadu\no\tCTRL + Y: Krok dopředu\no\tCTRL + C: Smazání plátna\no\tCTRL + 1: Přiblížení plátna\no\tCTRL + 2: Oddálení plátna\no\tCTRL + 3: Resetování přiblížení plátna\nOrientace v UI\no\tSlider\no\tBrush size: Velikost štětce\no\tInput\no\tColor input\n\tBrush color: Barva, která se vztahuje na vše, čím kreslíme\n\tBackground color: Barva pozadí\no\tText input\n\tRoom input: Zde zadáváme jméno místnosti, kam se připojujeme\n\tChat input: Zde píšeme zprávu, co chceme odeslat do chatu\no\tCheckbox\no\tGrid: Zapne se nám mřížka/rastr ve velikosti našeho štětce\no\tAlight: Normálně kreslíme na 10x10 pixelů, tohle nastavení nás zarovnává na velikost štětce\no\tLines:\n\tPrvní kliknutí – Klikneme tam kde chceme, aby čára začínala\n\tDruhé kliknutí – Klikneme tam kde chceme, aby čára končila\n•\tNa čáry se dá aplikovat Rainbow effect\no\tButtons\no\tClear canvas: Vyčistí canvas/plátno i local storage\no\tMore tools\n\tOtevření dalších nastavení a nástrojů\n\tObsahuje:\n\tgalerii filtrů\n\tExportování\n\tUkládání momentálního plátna\n\tDuhové kreslení\n\tNačítání obrázku\n\tZměna velikosti plátna\n\tPřidání textu\n\nSeznam použitých zdrojů:\nSocket.IO:\n•\tOficiální dokumentace: https://socket.io/docs/v4\nPixelové čáry\n•\tWikipedia o samotném algoritmu: https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm\n•\tYouTube video o generování pixelových čár v Minecraftu: https://www.youtube.com/watch?v=vfPGuUDuwmo\u0026ab_channel=mattbatwings\nOstatní:\n•\tW3Schools: https://www.w3schools.com/js/\n•\tJST: https://www.javascripttutorial.net/\n•\tGFG: https://www.geeksforgeeks.org/\n![Uploading image.png…]()\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetodejjanota%2Fjspaint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetodejjanota%2Fjspaint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetodejjanota%2Fjspaint/lists"}