taralino

.add

Der Befehl Slider.add(id) erwartet folgende (verpflichtende) Argumente:

Argument	Datentyp	Hinweis
id	Zeichenkette	-

Der Befehl dient dazu, einen neuen bzw. weiteren Schieberegler mit der Id id zu definieren. Bei einer Veränderung des Schiebereglers wird die Funktion

on_slider(id, value)

aufgerufen (sofern vorhanden). Dabei ist id die Id des jeweils veränderten Schiebereglers und value der aktuelle Wert.

Zudem können folgende Optionen verwendet werden:

Variable	Datentyp	Hinweis	Default-Wert
width	Zahl	ganzzahlig, mindestens 60	400
color	Farbe	-	blue
min	Zahl	-	0.0
max	Zahl	-	1.0
value	Zahl	-	0.0
integer	Boolean	-	false

Die Option width definiert die Breite des Schiebereglers und color die Farbe. Über min und max wird der minimale sowie der maximale Wert des Reglers festgelegt. Der (initiale) Wert des Schiebereglers kann mittels value angepasst werden. Schließlich definiert integer, ob ausschließlich ganzzahlig Werte zugelassen sein sollen.

Beispiel

Verändere den Schieberegler.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([-1,1], [-1,1], {width:100, background:"lightgrey"});

Slider.add("x");

function on_slider(id, value) {
  Canvas.clear();
  Canvas.text(0, 0, value);
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Verändere den Schieberegler.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([-1,1], [-1,1], {width:60, background:"lightgrey"});

Slider.add("x", {min:-6, max:6, value:3, width:240, color:"red", integer:true});

function on_slider(id, value) {
  Canvas.clear();
  Canvas.text(0, 0, value);
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Verändere die Schieberegler.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var x = 0.2;
var y = 0.5;

function draw() {
  Canvas.clear();
  Canvas.circle(x, y, 0.1, {fill:"blue"});
};

function setup() {
  Canvas.init([0,1], [0,1], {width:200, background:"lightgrey"});
  Slider.add("Sx", {value:x});
  Slider.add("Sy", {value:y});
  draw();
};

function on_slider(id, value) {
  if (id == "Sx") x = value;
  if (id == "Sy") y = value;
  draw();
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Verändere die Schieberegler, um eine Farbe im RGB-Farbraum zu definieren.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var r = 240;
var g = 20;
var b = 40;

function draw() {
  Canvas.clear();
  Canvas.circle(0, 0, 0.6, {fill:[r,g,b]});
};

function setup() {
  Canvas.init([-1,1], [-1,1], {width:100, background:"lightgrey"});
  Slider.add("red", {color:"red", min:0, max:255, value:r});
  Slider.add("green", {color:"green", min:0, max:255, value:g});
  Slider.add("blue", {color:"blue", min:0, max:255, value:b});
  draw();
};

function on_slider(id, value) {
  if (id == "red") r = value;
  if (id == "green") g = value;
  if (id == "blue") b = value;
  draw();
};

</script>
</body>
</html>

Vorschau Download Kopie speichern