Home

Do zrobienia

• Komponent ChangeParameters

  • Optymalizacja -> 1 krok - pętla do danego efektu ma się wykonać tylko wtedy, gdy został on zmieniony. 2 krok -> jedna pętla na wszystkie efekty [KKM]
  • Zablokowanie przycisków do momentu, gdy nie ma wczytanego obrazka (inputów, sliderów). [PAT]
  • 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]
  • Dodanie blur z opacity do div-a z komponentem Parameters, gdy są zablokowane [PAT]
  • Dopasowanie rozmiaru Canvas do ekranu w Parameters [KKM]
  • Dodać this.props.setIsLoaded(false); do funkcji _handleImageChange(e) [PAT]

• przycisk 'Reset' nie uwzględnia kontrolki odwracania kolorów ('invert color'). Wczytywanie nowego obrazka też nie resetuje tej kontrolki

• gdy zmieni się jakiś slider, trzeba dać efekt ładowania - to jest do pomyślenia jak by miało to wyglądać i działać

• (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