Home

Do zrobienia

• Komponent ChangeParameters

  • Odczytywanie koloru z piksela. Szukać tu: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas [PPM]
  • Przy małych obrazkach canvas ma być ładny [KKM]
  • Przycisk 'Save as *. jpg' [KKM]
  • Przycisk 'UNDO' przy końcu slidera - będzie on resetował stan (to samo co onDoubleClick)
  • Wypisywanie obrazka (np 5 Mpix). Jeśli zdjęcie jest większe niż 5,5 Mpixa, to wyświetlamy gdzieś czerwony napis 'bla bla bla, jest to za duze i moze skrypt wolno działać' (po engliszu) [KKM]
  • 3 checkboxy z podpisami r g b, wyświetlają warstwy rgb [PAT]
  • Dopasowanie rozmiaru Canvas do ekranu w Parameters [KKM] - jest to po części zrobione, zostawiłbym to jak jest teraz. Rozwiązanie tego w taki sposób, by wypełniał ekran w 100% jest trochę trickowe (trzeba by wyliczać rozmiar diva w react na podstawie rozmiarów ekranu), więc gra na razie nie jest warta świeczki.
  • gdy zmieni się jakiś slider, trzeba dać efekt ładowania - to jest do pomyślenia jak by miało to wyglądać i działać [KKM] - przez to, że obliczanie dzieje się w componentDidUpdate, nie można tego tak łatwo zrobić. Kod mam w stashu
  • (na koniec) Zrobić screeny oraz opisać moduł

• Komponent Filters

  • W widoku pełnego podglądu obrazka, po kliknięciu kliknięciu na przycisk, obrazek ma się wyświetlić 1:1. Powtórne kliknięcie na przycisk z powrotem wyświetla obrazek mieszczący się na ekranie
  • (na koniec) Zrobić screeny oraz opisać moduł

• Ogólnie, cały projekt

  • Opisać cały projekt (ogólny opis), opisać użyte technologie oraz opisać sposób instalacji

---

---

---

Przesuwajka: https://codepen.io/ElJefe/pen/XJdpEP

Font Awesome

Dodałem ikonki z font awesome. Instrukcja z korzystania: https://fontawesome.com/how-to-use/on-the-web/using-with/react

W skrócie: w komponencie, w którym chcemy uzywać ikonek importujemy takie rzeczy:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPencilAlt, faMinus, } from '@fortawesome/free-solid-svg-icons'

Następnie faPencilAlt oraz faMinus to ikonki, jakie chcemy użyć. Poniżej importów (ale przed deklaracją komponentu) dodajemy te ikonki do biblioteki:

library.add(faPencilAlt);
library.add(faMinus);

Teraz możemy użyć je w kodzie, w taki sposób: (metoda render)

<FontAwesomeIcon icon="pencil-alt"/>
<FontAwesomeIcon icon="minus"/>

Listę dostępnych ikonek można znaleźć tutaj: https://fontawesome.com/icons?d=gallery&m=free