Nikomu niepotrzebny skrypt

Jak człowieka najdzie to czasem coś sobie napisze. Tym razem to nikomu nie potrzebny skrypt *.js, który za zadanie ma … rysować kółka. Kolorowe kółka rozmieszczone co kawałek.

Po kliknięciu prawym przyciskiem myszy można zapisać wygenerowany obrazek. Miłej zabawy.

 

dżejson

Dżejson jak dżins i kot Dżinks (to tylko tym starszym coś jeszcze mówi ;)) a właściwie to JSON czy JavaScript Object Notation to format, który umożliwia wymianę danych pomiędzy różnymi systemami. Jest znacznie prostszy niż np. XML i podobnie do niego tekstowy. Jest „lżejszy” od XML co ma znaczenie przy przesyłaniu danych. Obsługiwany jest przez wiele systemów (chyba większość języków programowania).
Czytaj dalej dżejson

Wskaźniki od highcharts.

Zostałem wywołany do tablicy więc muszę odpowiedzieć. Jeden z czytelników zasugerował mi użycie biblioteki JavaScript o nazwie HighCharts https://www.highcharts.com. Jako, że zawsze lubiłem wykresiki to postanowiłem się z nią zapoznać. Na pierwszy ogień poszedł wskaźnik czyli „gauge”. By utworzyć sobie taki wskaźnik musimy mieć szkielet naszej strony gdzie wywołujemy odpowiednie skrypty wskaźnika oraz biblioteki jQuery.

Szkielet „czystej strony”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wykresy i wskaźniki</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/exporting.js"></script>
     <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>

<body>
    
</body>
</html>    

Czytaj dalej Wskaźniki od highcharts.

Slider – zadawanie przez przesuwanie

Gdy pojawi się potrzeba wprowadzania wartości liczbowej to możemy posłużyć się „sliderem” (suwakiem), który znany jest od dawna w wielu środowiskach programistycznych.

Wykorzystać można do tego celu tag <input>, który z parametrem range tworzy suwak:

<input type=range">

o wyglądzie takim jak zamieszczony poniżej (obrazek z Mozilla Firefox):

suwak1Do szału toto doprowadzić nie może no ale lepiej taki niż żaden :).

Suwak możemy dostosować do własnych potrzeb. Można podać zakres minimalny i maksymalny. Można podać „skok” z jakim zmieniać będzie się wartość powiązana z suwakiem. Można dodać domyślną wartość val, którą będzie przyjmować suwak po uruchomieniu strony. Jeśli pokusimy się o takie zmiany w kodzie strony umieścić musimy coś podobnego. Oczywiście min może być wartością ujemną a step np. dziesiątkami.

<input type="range" min="0" max="40" step="0.1" val="20">

Sam suwak to trochę mało by coś sensownego z tego wyszło. Poniżej „goły suwak” oraz dwa przykłady użycia suwaka z dodatkami.

Czytaj dalej Slider – zadawanie przez przesuwanie