Home

Do zrobienia

• Poprawki po oddaniu

  • - Do dokumentacji dołączyć linki z opisem wzorów do jasnosci, kontrastu, itp, itp (do wszystkich 'zmieniaczy' w ChangeParameters)
  • - Jeżeli umożliwiamy wczytanie innych formatów niż jpg (np. png), to warto dorobić obsługę kanału alfa.
  • - Ale jeśli dorobimy obsługę alfa, to trzeba sprawdzić jak te wszystkie wzory działają (tzn by kolor nie rozlewał się na alfę)
  • - można zamienić funkcję truncate by zamiast pilnować zakresu [0, 255], wartość 256 zamieniała na 0, 257 na 1, itd

• 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]
  • Przycisk 'UNDO' przy końcu slidera - będzie on resetował stan (to samo co onDoubleClick)
  • W JS obliczamy rozmiary monitora i robimy tak, by canvas wypełniał go ładnie (tricky)

• 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