feat: Add speed control variable (#81)

Author: BenjaminMichaelis

README.md

@@ -59,17 +59,18 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
 
 ## 🔧 Options
 
-|  Parameter  |                                 Details                                       |  Type   |               Example               |
-| :---------: | :----------------------------------------------------------------------:      | :-----: | :---------------------------------: |
-|   `lines`   |      Text to display with lines separated by `;` and `+` for spaces           | string  | `First+line;Second+line;Third+line` |
-|  `center`   |   `true` to center text or `false` for left aligned (default: `false`)        | boolean |          `true` or `false`          |
-|  `vCenter`  | `true` to center vertically or `false`(default) to align above the center     | boolean |          `true` or `false`          |
-|  `height`   |            Height of the output SVG in pixels (default: `50`)                 | integer |         Any positive number         |
-|   `width`   |            Width of the output SVG in pixels (default: `400`)                 | integer |         Any positive number         |
-|   `font`    |                    Font family (default: `monospace`)                         | string  |     Any font from Google Fonts      |
-|   `size`    |                   Font size in pixels (default: `20`)                         | integer |         Any positive number         |
-|   `color`   |                  Color of the text (default: `36BCF7`)                        | string  |  Hex code without # (eg. `00ff00`)  |
-| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`)      | boolean |          `true` or `false`          |
+|  Parameter  |                                 Details                                      |  Type   |               Example               |
+| :---------: | :--------------------------------------------------------------------------: | :-----: | :---------------------------------: |
+|   `lines`   |      Text to display with lines separated by `;` and `+` for spaces          | string  | `First+line;Second+line;Third+line` |
+|  `center`   |   `true` to center text or `false` for left aligned (default: `false`)       | boolean |          `true` or `false`          |
+|  `vCenter`  | `true` to center vertically or `false`(default) to align above the center    | boolean |          `true` or `false`          |
+|  `height`   |            Height of the output SVG in pixels (default: `50`)                | integer |         Any positive number         |
+|   `width`   |            Width of the output SVG in pixels (default: `400`)                | integer |         Any positive number         |
+|   `font`    |                    Font family (default: `monospace`)                        | string  |     Any font from Google Fonts      |
+|   `size`    |                   Font size in pixels (default: `20`)                        | integer |         Any positive number         |
+|   `color`   |                  Color of the text (default: `36BCF7`)                       | string  |  Hex code without # (eg. `00ff00`)  |
+| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`)     | boolean |          `true` or `false`          |
+|  `duration` | Duration of the printing of a single line in milliseconds (default: `5000`)  | integer |         Any positive number         |
 
 ## 📤 Deploying it on your own
 

src/demo/index.php

@@ -65,6 +65,9 @@ function gtag() { dataLayer.push(arguments); }
                 <label for="size">Font size</label>
                 <input class="param" type="number" id="size" name="size" placeholder="20" value="20">
 
+                <label for="duration">Print duration (ms per line)</label>
+                <input class="param" type="number" id="duration" name="duration" placeholder="5000" value="5000">
+
                 <label for="center">Horizontally Centered</label>
                 <select class="param" id="center" name="center" value="false">
                     <option>false</option>

src/demo/js/script.js

@@ -8,7 +8,8 @@ let preview = {
     vCenter: "false",
     multiline: "false",
     width: "400",
-    height: "50"
+    height: "50",
+    duration: "5000"
   },
   dummyText: [
     "The five boxing wizards jump quickly",

src/models/RendererModel.php

@@ -32,6 +32,9 @@ class RendererModel
     /** @var bool $multiline True = wrap to new lines, False = retype on same line */
     public $multiline;
 
+    /** @var int $duration print duration in milliseconds */
+    public $duration;
+
     /** @var string $fontCSS CSS required for displaying the selected font */
     public $fontCSS;
 
@@ -51,6 +54,7 @@ class RendererModel
         "width" => "400",
         "height" => "50",
         "multiline" => "false",
+        "duration" => "5000"
     );
 
     /**
@@ -73,6 +77,7 @@ public function __construct($template, $params, $database)
         $this->width = $this->checkNumber($params["width"] ?? $this->DEFAULTS["width"], "Width");
         $this->height = $this->checkNumber($params["height"] ?? $this->DEFAULTS["height"], "Height");
         $this->multiline = $this->checkBoolean($params["multiline"] ?? $this->DEFAULTS["multiline"]);
+        $this->duration = $this->checkNumber($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
         $this->fontCSS = $this->fetchFontCSS($this->font);
     }
 

src/templates/main.php

@@ -10,11 +10,11 @@
 <?php for ($i = 0; $i < count($lines); ++$i): ?>
     <path id='path<?php echo $i ?>'>
 <?php if (!$multiline): ?>
-        <animate id='d<?php echo $i ?>' attributeName='d' begin='<?php echo ($i == 0 ? "0s;" : "") . $previousId ?>.end' dur='5s'
+        <animate id='d<?php echo $i ?>' attributeName='d' begin='<?php echo ($i == 0 ? "0s;" : "") . $previousId ?>.end' dur='<?php echo $duration ?>ms'
             values='m0,<?php echo $height / 2 ?> h0 ; m0,<?php echo $height / 2 ?> h<?php echo $width ?> ; m0,<?php echo $height / 2 ?> h0' keyTimes='0;0.8;1' />
 <?php else: ?>
     <?php $lineHeight = $size + 5;?>
-    <animate id='d<?php echo $i ?>' attributeName='d' dur='<?php echo 5 * ($i + 1) ?>s' fill="freeze"
+    <animate id='d<?php echo $i ?>' attributeName='d' dur='<?php echo $duration * ($i + 1) ?>ms' fill="freeze"
             begin='0s;<?php echo "d" . (count($lines) - 1) ?>.end' keyTimes="0;<?php echo $i / ($i + 1); ?>;1"
             values='m0,<?php echo ($i + 1) * $lineHeight ?> h0 ; m0,<?php echo ($i + 1) * $lineHeight ?> h0 ; m0,<?php echo ($i + 1) * $lineHeight ?> h<?php echo $width ?>' />
 <?php endif;?>

src/views/RendererView.php

@@ -37,6 +37,7 @@ public function render()
             "height" => $this->model->height,
             "multiline" => $this->model->multiline,
             "fontCSS" => $this->model->fontCSS,
+            "duration" => $this->model->duration,
         ));
         // render SVG with output buffering
         ob_start();