Zegar cyfrowy z kropek w js

Po pierwsze, jak coś chcesz zmienić na canvas, to musisz odmalować cały płótno od początku. Nie możesz zmienić poszczególnych elementów. Trudność tego zadania polega w sposobie tworzenia tych liczb. Urządzenia, które wyświetlają liczby w ten sposób nazywają się Seven-segment display.

Każda liczba składa się z 7 możliwych segmentów (stąd nazwa):

W artukule na wikipedii, na samym dole znajdziesz tabelkę z konfiguracją. Dla każdej liczby jest napisane, które segmenty są podświetlone. W naszym kodzie można to zamodelować w ten sposób:

const segmentsConfiguration = [
  {a: true,	b: true,	c: true,	d: true,	e: true,	f: true,	g: false},
  {a: false,	b: true,	c: true,	d: false,	e: false,	f: false,	g: false},
  {a: true,	b: true,	c: false,	d: true,	e: true,	f: false,	g: true},
  {a: true,	b: true,	c: true,	d: true,	e: false,	f: false,	g: true},
  {a: false,	b: true,	c: true,	d: false,	e: false,	f: true,	g: true},
  {a: true,	b: false,	c: true,	d: true,	e: false,	f: true,	g: true},
  {a: true,	b: false,	c: true,	d: true,	e: true,	f: true,	g: true},
  {a: true,	b: true,	c: true,	d: false,	e: false,	f: false,	g: false},
  {a: true,	b: true,	c: true,	d: true,	e: true,	f: true,	g: true},
  {a: true,	b: true,	c: true,	d: true,	e: false,	f: true,	g: true},
];

Indeksy w tej tablicy odpowiadają poszczególnym liczbom. segmentsConfiguration[0], to 0, segmentsConfiguration[1] to konfiguracja dla liczby 1 itd. a: true oznacza, że musimy narysować "a" z pierwszego obrazka. g: false oznacza, że ten segment nie jest podświetlony, więc go nie rysujemy. W celu wypisania godziny pobierzemy dla niej konfigurację i wypiszemy używając ctx.moveTo() i ctx.lineTo.

Do wywołania tych metod potrzebujemy współrzędnych. moveTo przesuwa kursor (np. na pozycję 0; 0), a lineTo zaczyna malować (np. od 0;0 do 50; 0, czyli tworzy horyzontalną linię). Musimy więc stworzyć konfigurację, która będzie miała te informacje, jak namalować każdy segment. Dla każdego segmentu gdzie zacząć i gdzie skończyć rysować:

const segments = {
  a: {
    x1: 0, y1: 0,
    x2: segmentLength, y2: 0,
  },

  b: {
    x1: segmentLength, y1: 0,
    x2: segmentLength, y2: segmentLength,
  },

  c: {
    x1: segmentLength, y1: segmentLength,
    x2: segmentLength, y2: segmentLength * 2,
  },

  d: {
    x1: 0, y1: segmentLength * 2,
    x2: segmentLength, y2: segmentLength * 2,
  },

  e: {
    x1: 0, y1: segmentLength,
    x2: 0, y2: segmentLength * 2,
  },

  f: {
    x1: 0, y1: 0,
    x2: 0, y2: segmentLength,
  },

  g: {
    x1: 0, y1: segmentLength,
    x2: segmentLength, y2: segmentLength,
  },
};

Tutaj masz cały kod: http://jsfiddle.net/rgwe23db/2/. Na ten moment wyświetla na sztywno wpisaną godzinę, bez kropek oddzielających godziny i minuty, ale mam nadzieję, że po kilku próbach dostosujesz to do swoich potrzeb :) W zasadzie wystarczy to uruchomić w jakimś setInterval a tablicę const hourDigits = [0, 0, 1, 3]; tworzyć z bieżącej godziny i minuty. Powodzenia!

Co rozumiesz przez "zegar z kropek"?

Nie wiem, czy to spełni warunki zadania, bo może masz się wykazać właśnie ręcznym rysowaniem tych kropek od zera, ale najprostsze rozwiązanie to:

• dobrać czcionkę odpowiadającą twoim oczekiwaniom,
• wklepać zegar w canvas jako tekst,
• zeskanować piksele i przekopiować w powiększeniu (ew. z jakimiś dodatkowymi odstępami).

Jeszcze w czasach starego, dobrego Basica tak się bawiłam.

https://codepen.io/Loraxor/pen/orvdMy tu mam link do codepena. Mam tam takie guziki które jak na razie zapalają cyfry od 1-3 oraz 7. O takie kropki mi chodziło. Coś jak taki właśnie 7 segmentowy wyświetlacz. Tyle że segment to nie kreska a kropka.

W sumie nie mam problemu z rysowaniem tych kropek-światełek-segmentów.... problem ma żeby np sobie z tego zrobić prosty licznik...eh...kończy się na tym że jedyne co mi się udało to w sumie nic....

Btw...pytanie ludzi co byli/są na studiach. Tylko u mnie tak jest że np w tym przypadku, prowadzący uczy/pokazuje jak w canvasie rysować kwadraty i trójkąty a później wymaga na kolosach takich rysunków?
Ja wiem jak działają studia, praca własna itp itd, ale niektórych rzeczy nie sposób znaleźć w internecie lub książkach.

prowadzący uczy/pokazuje jak w canvasie rysować kwadraty i trójkąty a później wymaga na kolosach takich rysunków

No ale na tym to polega - on pokazuje jak działają poszczególne elementy, a Ty masz to zrozumieć, a potem pomyśleć, jak z tych małych klocków stworzyć coś większego. To tak samo jak z aplikacją desktopową - w sumie to składa się głównie z prostych elementów - przycisków, list, ikonek i to nie one same decydują o tym, że aplikacja jest przydatna, ale sposób, w jaki są one oprogramowane, istotne jest miejsce, w którym programista je umieścił, a także to, jakie za jakie funkcje odpowiadają.
Wracając to Twojego pytania - skoro rozumiesz, jak działa rysowanie pojedynczego kwadracika, to zastanów się, jak można z kilku kwadratów zrobić coś bardziej skomplikowanego. Tak z grubsza to na tym właśnie polega programowanie - nie piszesz wszystkiego od zera, ale korzystasz z gotowych rozwiązań, składasz z klocków i kombinujesz sobie w miarę umiejętności ;)

Coś jak taki właśnie 7 segmentowy wyświetlacz. Tyle że segment to nie kreska a kropka.

No to przerób to, co Ci dałem na kropki i tyle. Logika ta sama, zmienia się w zasadzie tylko metoda rysująca, czyli tam gdzie masz moveTo i lineTo.

Wystarczy, że odpowiesz sobie na jedno zajebiście, ale to zajebiście, ważne pytanie: jak z prostokąta zrobić dwie kropki? Logika tego jakie segmenty trzeba namalować już jest zrobiona za Ciebie. Zmień tylko sposób malowania. Wszystkie dane już masz dostarczone do tej metody, czyli x1, x2 i y1 i y2.

Ja wiem jak działają studia, praca własna itp itd, ale niektórych rzeczy nie sposób znaleźć w internecie lub książkach.

O to właśnie chodzi. Programowanie, to nie historia, czy medycyna, że otworzysz sobie książkę i wszystko wyczytasz. On Wam pokazał jak używać narzędzi, a Wy metodą prób i błędów musicie coś zbudować.

Rozumiem, przepraszam trochę źle sformułowałem pytanie. Te kropki to w sumie te kwadraty które już mam. Potrafię 'zapalić' poszczególne lampki (kwadraciki).
Nie umiem zrobić tego ...hmm... Ogólnie chciałem to zrobić tak, porobić funkcje od każdej cyferki(to umiem). Później w np for wprowadzić licznik np do 60 (sekundy) i co licznik zmianiać wyświetlaną cyfre(funkcje)
jakby...nie umiem tego zrobić dynamicznie, bez odświeżania strony, próbowałem już na kilka sposobów w sumie... Nie umiem jakby zamknąć tego w pętli/funkcji żeby na tym canvasie 'wyświetlały' się kolejne klatki, jakby animacja

To tak w dużym uproszczeniu - skoro masz funkcje rysującą tabelkę, umiesz także namalować konkretną cyfrę, to wyświetlanie różnych wartości sprowadza się do wyświetlenia danej wartości, potem wyczyszczenia (czyli namalowania pustej tabeli), a na koniec wyświetlenie nowej liczby. I tak w kolko ;)

Próbowałem robić to w pętli for, ale nie działa. Wyczyścić tabele próbowałem zrobić tak że rysowałem ją na nowo bez cyfr, ale to bugowało inne funkcje i przestawało działać. W js są jakieś inne polecenie/funkcje/zmienne do takich rzeczy???
btw, dalej nie wiem jak odświeżać canvasa za akazdym razem ;/

Loraxor napisał(a):

W js są jakieś inne polecenie/funkcje/zmienne do takich rzeczy???

setInterval