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) [KKM]
  • - dopisac do dokumentacji, dlaczego uzylismy reacta, reduxa, bootstrapa, js, canvasa, itrelelee [KKM]
  • - Jeżeli umożliwiamy wczytanie innych formatów niż jpg (np. png), to warto dorobić obsługę kanału alfa. - na początku canvas musi być wypełniany białym kolorem [PAT]
  • - Dopisac do dokumentacji, ze przetwarzanie dziala na jednym pikselu, wiec zadne niepotrzebne wartosci nie wejdą na piksele z kanałami alfa [PAT]
  • - można zamienić funkcję truncate by zamiast pilnować zakresu [0, 255], wartość 256 zamieniała na 0, 257 na 1, itd - zrobimy to w formie checkboxa. jesli zaznaczony - to truncate przewija z 256 na 0 (daje dalej). Zmieniamy na chwilke funkcje truncate, robimy screen (brzudki) do dokumentacji i piszemy w opisie (dokumentacji), ze takie cos jest ble i nie pasuje. [PAT]
  • - obsługa ładowania innych plików niż graficzne - wywalać komunikat z informacją o złym pliku [KKM]

• 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) [KKM]

• 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

---

---

---

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