From 2a9d4387ac34838b6586aa76a21c899fcabbafda Mon Sep 17 00:00:00 2001 From: n0ctu Date: Sat, 20 Jan 2024 18:23:27 +0100 Subject: [PATCH] Demo update (png download + form cleanup) --- README.md | 21 ++-- js/luxlogo.js | 14 +-- luxlogo.html | 324 +++++++++++++++++++++++++++++++------------------- 3 files changed, 219 insertions(+), 140 deletions(-) diff --git a/README.md b/README.md index d04a5a5..5571eaa 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ The library is written in pure javascript and does not require any external libr A demo site utilizing all parameters of the library can be found [here](https://luxeria.ch/luxlogo.js/luxlogo.html). -## Usage in other projects +## Usage in your project Include the luxlogo.js file in your HTML page: @@ -33,23 +33,24 @@ All `rel`-variables are relative to the `size`-variable. | Variable | Description | Default | | ------------------------ | ------------------------------------------ | ----------- | -| size | Size of the logo in pixels | 600 | +| size | Size of the logo in pixels | 512 | | color1 | Primary color of the logo | "#000000" | | rotation | Rotation angle in degrees | 0 | | numArrows | Number of arrows in the logo | 3 | | relBorderThickness | Relative border thickness | 0 | | relSpacing | Relative spacing between arrows | 8 | -| relInnerCircleDiameter | Relative diameter of the inner circle | 25 | -| relOuterCircleDiameter | Relative diameter of the outer circle | 85 | +| relInnerCircleDiameter | Relative diameter of the inner circle | 24 | +| relOuterCircleDiameter | Relative diameter of the outer circle | 84 | | relOuterCircleThickness | Relative thickness of the outer circle | 12 | -| relArrowTipWidth | Relative width of the arrow tip | 25 | +| relArrowTipWidth | Relative width of the arrow tip | 24 | | relArrowTipStart | Relative start of the arrow tip from center| 20 | | relArrowTipEnd | Relative end of the arrow tip from center | 50 | -| relArrowNotchOffset | Relative offset of the arrow notch | 3 | -| relArrowBaseWidth | Relative width of the arrow base | 13 | +| relArrowNotchOffset | Relative offset of the arrow notch | 6 | +| relArrowBaseWidth | Relative width of the arrow base | 12 | -## Todo +## To-Do -- [x] Fix sizing issues, display size, viewport and size of the serialized SVG file +- [x] Fix sizing issues, display size, viewport and size of the serialized SVG file (fixed by adding a viewBox) - [ ] Fix masking/grouping to allow for proper borders -- [ ] Add support for different colors for each part (gradient support maybe?) \ No newline at end of file +- [ ] Add support for different colors for each part (gradient support maybe?) +- [ ] **Let's find new defaults!** As in: How do you want our logo to look like on the website and in print? diff --git a/js/luxlogo.js b/js/luxlogo.js index 0073aa9..324b363 100644 --- a/js/luxlogo.js +++ b/js/luxlogo.js @@ -5,7 +5,7 @@ class LuxLogo { this.svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); this.svg.setAttribute("version", "1.1"); this.svg.setAttribute("preserveAspectRatio", "xMidYMid meet"); - this.size = 600; + this.size = 512; this.color1 = "#000000"; this.rotation = 0; this.center = this.size / 2; @@ -18,7 +18,7 @@ class LuxLogo { this.relArrowTipWidth = 25; this.relArrowTipStart = 20; this.relArrowTipEnd = 50; - this.relArrowNotchOffset = 5; + this.relArrowNotchOffset = 6; this.relArrowBaseWidth = 12; // Calculate absolute values from relative values @@ -92,10 +92,10 @@ class LuxLogo { // Logo specific functions createArrow() { const polygonPoints = [ - [this.center, this.arrowTipEnd], - [this.center + this.arrowTipWidth/2, this.arrowTipStart], + [this.center, this.arrowTipEnd], + [this.center + this.arrowTipWidth / 2, this.arrowTipStart], [this.center, this.arrowTipStart - this.arrowNotchOffset], - [this.center - this.arrowTipWidth/2, this.arrowTipStart] + [this.center - this.arrowTipWidth / 2, this.arrowTipStart] ]; const arrowPolygon = this.createPolygon(polygonPoints); const arrowBase = this.createRectangle(this.arrowBaseX, this.arrowBaseY, this.arrowBaseWidth, this.arrowBaseHeight); @@ -140,7 +140,7 @@ class LuxLogo { arrows.setAttribute("stroke", "black"); arrows.setAttribute("stroke-width", this.spacing); - const circle = this.createCircle(this.center, this.center, this.outerCircleDiameter - this.outerCircleThickness*2); + const circle = this.createCircle(this.center, this.center, this.outerCircleDiameter - this.outerCircleThickness * 2); circle.setAttribute("fill", "black"); return this.createMask(id, canvas, arrows, circle); @@ -176,5 +176,5 @@ class LuxLogo { return this.svg.outerHTML; } - + } \ No newline at end of file diff --git a/luxlogo.html b/luxlogo.html index a47d718..bbf38db 100644 --- a/luxlogo.html +++ b/luxlogo.html @@ -1,5 +1,6 @@ + @@ -9,15 +10,19 @@ LuxLogo.js - Luxeria Logo Generator - + +

luxlogo.js

-

A Javascript library to generate (per-) versions of the Luxeria logo with SVG.
This demo page provides a form for all the parameters. Feel free to play with them!

+

A Javascript library to generate (per-) versions of the Luxeria logo with SVG.
This demo page provides a form for all the + parameters. Feel free to play with them!

@@ -28,24 +33,173 @@

luxlogo.js

Preview

- +
- - + + +
+ +
+
+
+

Controls

+
+
+ +
+ + +
+ +
+ +
+ + px +
+
Please provide a valid size.
+
+
+ +
+ + % +
+
Please provide a valid spacing.
+
+
+ +
+ + # +
+
Please provide a valid number of arrows.
+
+
+ +
+ + ° +
+
Please provide a valid rotation.
+
+
+ +
+ + hex +
+
Please provide a valid color.
+
+
+ +
+ + % +
+
Please provide a valid border thickness.
+
+ +
+ + +
+ +
+ +
+ + % +
+
Please provide a valid inner circle diameter.
+
+
+ +
+ + % +
+
Please provide a valid outer circle diameter.
+
+
+ +
+ + % +
+
Please provide a valid outer ring thickness.
+
+ +
+ + +
+ +
+ +
+ + % +
+
Please provide a valid arrow tip width.
+
+
+ +
+ + % +
+
Please provide a valid arrow base width.
+
+
+ +
+ + % +
+
Please provide a valid arrow tip start position.
+
+
+ +
+ + % +
+
Please provide a valid arrow tip end position.
+
+
+ +
+ + % +
+
Please provide a valid arrow notch offset.
+
+ +
+ +
+ +
+

- Dimensions - [toggle] + Dimensions + [toggle]

-
-
-
-

Controls

-
-
- -
-
- - -
Please provide a valid rotation.
-
- -
- - -
Please provide a valid spacing.
-
- -
- - -
Please provide a valid number of arrows.
-
- -
- -
- - -
Please provide a valid inner circle diameter.
-
- -
- - -
Please provide a valid outer ring diameter.
-
- -
- - -
Please provide a valid outer ring thickness.
-
- -
- -
- - -
Please provide a valid arrow tip width.
-
- -
- - -
Please provide a valid arrow tip start position.
-
- -
- - -
Please provide a valid arrow tip end position.
-
- -
- - -
Please provide a valid arrow notch offset.
-
- -
- - -
Please provide a valid arrow base width.
-
- -
- -
- - -
Please provide a valid size.
-
- -
- - -
Please provide a valid color.
-
- -
- - -
Please provide a valid border thickness.
-
-
- -
-
-
-