Quick coding notes
Posts Pages Series Tags About
Quick coding notes

Contents

Gabinet dentystyczny - Legenda

Kamila Chyla
   510 words   3 minutes 

Ogłoszenie

Dziś moje urodziny ✨ 🎂 ! Nie ma lepszego prezentu niż chwila kodowania przy kawie… ☕

Zabawa nową biblioteką

Wypróbowuję ostatnio nową bibliotekę do rysowania - svg.js. W porównaniu do Raphaela jest ona dużo bardziej “poukładana”, API wydaje się bardziej przejrzyste, dokumentacja zaś jest dobrze napisana i czytelna.

Chcę użyć jej do renderowania diagramu zębowego. Kolejny raz zmieniłam koncepcję:

  • tym razem ścieżki SVG oznaczające stany całych zębów chcę przechowywać w bazie
  • w bazie będzie również kolor stanu
  • kliknięcie fragmenu/całego zęba spowoduje zmianę stanu
    • w przypadku fragmentu zmieni się kolor fragmentu
    • w przypadku całości zmieni się kolor wypełnienia i kształt ścieżki

Ekran

Obecnie ekran wizyty wygląda tak:

/posts/stomatolog-stany-legenda/legenda.png

Stany

Stany są pobierane z bazy danych. Tabela state wygląda teraz tak:

create table if not exists state (
  id integer primary key,
  name string not null,
  whole boolean not null default false,
  color string not null,
  svgpath string not null default "M0,0h100v100h-100Z"
);

Wypełniam ją kształtami wyklikanymi w PathEditorze:

/posts/stomatolog-stany-legenda/patheditor.png 

insert into state (id, name, whole, color) 
  values (0, "zdrowy", true, "#fff");
insert into state (id, name, whole, color) 
  values (1, "ubytki niepróchnicowe", false, "CadetBlue");
insert into state (id, name, whole, color) 
  values (2, "wypełnienie stałe", false, "Coral");
insert into state (id, name, whole, color) 
  values (3, "wypełnienie czasowe", false, "Peru");
insert into state (id, name, whole, color, svgpath) 
  values (4, "korona", true, "#abc", "M10 30 l 20 30 l 20 -30 l 20 30 l20 -30 v 60 h -80 Z
");
insert into state (id, name, whole, color, svgpath) 
  values (5, "przęsło  mostu", true, "#abc", "m 21 45 c 23 -19 42 -19 65 0 l 0 11 c -22 -16 -43 -16 -65 -1 z m -1 25 c 23 -19 42 -19 65 0 l 0 11 c -22 -16 -43 -16 -65 -1 z
");
insert into state (id, name, whole, color, svgpath) 
  values (6, "proteza", true, "#abc", "M 30 30 L 20 50 L 30 70 L 45 70 L 45 95 L 60 95 L 60 70 L 75 70 L 85 50 L 75 30 L 65 50 L 40 50 Z
");
insert into state (id, name, whole, color, svgpath) 
  values (7, "implant", true, "#abc", "M 45 0 h 10 v 45 h 45 v 10 h -45 v 45 h -10 v -45 h -45 v -10 h 45 Z
");
insert into state (id, name, whole, color, svgpath) 
  values (8, "brak zęba", true, "#abc", "M 10 45 h 80 v 10 h -80 Z
");
insert into state (id, name, whole, color, svgpath) 
  values (9, "do usunięcia", true, "#abc", "M 20 20 L 25 15 L 50 40 L 75 15 L 80 20 L 55 45 L 80 70 L 75 75 L 50 50 L 25 75 L 20 70 L 45 45 Z");
insert into state (id, name, whole, color) 
  values (10, "próchnica", false, "#235");

Wniosek

Trzeba powoli kończyć zabawę z wyświetlaniem i zabrać się za publikowanie zmian z GUI do serwera. Na to trochę brakuje zasobów, ale nie należy się zniechęcać. Nie od razu Kraków zbudowano, prawda? 😄

This text is part of the series gabinet...

All entries in this series:
Updated on 2021-09-11
 Programowanie, Javascript, Gabinet
Back | Home