Home > HTML5, IE > [PL] SVG na przykładzie oznaczeń oporników (resistor color decoder)

[PL] SVG na przykładzie oznaczeń oporników (resistor color decoder)

December 8, 2013 Leave a comment Go to comments

Resistor color codeOstatnio po zakupie arduino na nowo zainteresowałem się elektroniką. Pierwszą rzeczą jaka była mi potrzebna, to odszyfrowywanie kolorów na rezystorach (opornikach). Istnieje kilka stron, które na żywo pomagają rozszyfrować te oznaczenia, jednak wybieranie kolorów z listy rozwijanej i wyliczanie wartości poprzez kliknięcie, trochę mnie męczy. Postanowiłem więc utworzyć taki ‘programik’ samemu.

[EN] In this blog post, I’m describing how to write a resistor color decoder in SVG. You can download an offline version from git hub and run it in any browser (checked in Interned Explorer 11). Then just pick a color, and the value will be calculated automatically.

Jako rozwiązanie, od razu przyszedł mi do głowy SVG – jest uniwersalny, nie przypisany do systemu, dostępny wszędzie. Jakiś czas temu utworzyłem kurs poświęcony SVG na polskim MSDN i bazując na tym co tam napisałem, utworzyłem od podstaw – jeden plik SVG – Resistor color code, który można pobrać z git huba.

Poniżej przedstawię jedynie niektóre dodatkowe informacje, których nie przedstawiłem na kursie MSDNa. Jest to też swego rodzaju rozwinięcie. Od razu zaznaczam, że sporo kodu wewnątrz pliku powtarza się. Nie chciałem go bardziej zaciemniać.

Jak to działa?

Graficzka i skrypt tam zaimplementowany pozwala wyliczyć automatycznie wartość oporu poprzez wskazanie koloru na SVG. Algorytm, który tam jest zaimplementowany rozpoznaje 5-cio paskowe oznaczenia. Pierwsze trzy definiują wartość oporu (warto zaznaczyć, że trzeci pasek jest opcjonalny). Czwarty pasek definiuje mnożnik, natomiast ostatni tolerancję. Nie zachodzi potrzeba potwierdzania przyciskiem – wszystko jest wyliczane automatycznie. Na grafice opornika podana jest wartość oporu (już odpowiednio skalowana do kilo, mega lub giga) a po prawej stronie tolerancja.

Tak – wszystko, łącznie z opornikiem, było tworzone w notatniku (będąc bardziej precyzyjnym w notepad2 dla podświetlania składni) – zatem żaden Eclipse, NetBeans czy Visual Studio nie jest mi potrzebne. Jedynym potrzebnym narzędziem jest przeglądarka obsługująca SVG wraz z dodatkowym debugerem taka jak Internet Explorer 11 .

Challenge – wyśrodkowanie tekstu w SVG

Wartość oporu lub tolerancji, chcę wyśrodkować w odpowiednim miejscu. Aby to zrobić, warto podać punkt (środek) oraz wskazać w stylu wartość text-anchor na middle tak jak poniżej. W rezultacie tekst jest wyśrodkowany względem wskazanego punktu.

<text x="200" y="70" style="text-anchor: middle" />

Challenge – przepisanie stylu na inny element.

Klikając na kolor chciałem, aby pasek na rezystorze przybrał kliknięty kolor. Przepisanie wartości nie zadziała, należy użyć funkcji getComputedStyle.

var fillColor = getComputedStyle(document.getElementById('source'),null)
.getPropertyValue('fill');
document.getElementById('destination').style.fill = fillColor
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: