From 7c072735ad3cf96c08ef39535a4f9c2c4b351e0e Mon Sep 17 00:00:00 2001 From: Marcus Date: Thu, 2 May 2024 15:54:10 +0200 Subject: [PATCH] add playground for testing stuff, add https://github.com/sathomas/material-gauge as gauge meter --- .gitignore | 2 + .../html/material-gauge-gh-pages/LICENSE.md | 7 + .../html/material-gauge-gh-pages/README.md | 69 +++++++ .../html/material-gauge-gh-pages/example.png | Bin 0 -> 17203 bytes .../html/material-gauge-gh-pages/index.html | 51 +++++ .../material-gauge.css | 192 ++++++++++++++++++ .../material-gauge-gh-pages/material-gauge.js | 67 ++++++ 7 files changed, 388 insertions(+) create mode 100644 playground/html/material-gauge-gh-pages/LICENSE.md create mode 100644 playground/html/material-gauge-gh-pages/README.md create mode 100644 playground/html/material-gauge-gh-pages/example.png create mode 100644 playground/html/material-gauge-gh-pages/index.html create mode 100644 playground/html/material-gauge-gh-pages/material-gauge.css create mode 100644 playground/html/material-gauge-gh-pages/material-gauge.js diff --git a/.gitignore b/.gitignore index 6724578..a5292fe 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ KiCad/CanGrow/CanGrow-backups +KiCad/CanGrow/CanGrow.kicad_sch-bak +KiCad/CanGrow/fp-info-cache diff --git a/playground/html/material-gauge-gh-pages/LICENSE.md b/playground/html/material-gauge-gh-pages/LICENSE.md new file mode 100644 index 0000000..0bed89b --- /dev/null +++ b/playground/html/material-gauge-gh-pages/LICENSE.md @@ -0,0 +1,7 @@ +Copyright (c) 2015 Stephen Thomas + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/playground/html/material-gauge-gh-pages/README.md b/playground/html/material-gauge-gh-pages/README.md new file mode 100644 index 0000000..6d4e0f2 --- /dev/null +++ b/playground/html/material-gauge-gh-pages/README.md @@ -0,0 +1,69 @@ +A simple [Material Design](https://www.google.com/design/spec/material-design/introduction.html) gauge control implemented in pure CSS/HTML. Includes a JavaScript implementation to change the gauge value dynamically. + +Origin: https://github.com/sathomas/material-gauge + +![](example.png) + +Check out the [live example](http://sathomas.me/material-gauge/). + +The basic markup for the gauge is as follows: + +``` +
+
+
+
+
+
+
+
+
+ No + + Yes +
+
+``` + +The gauge value is specified by `transform:` property on both the `.gauge__data` and `.gauge__needle` elements. The value for the rotation is +`0.5 × X - 0.5` turns, where `X` ranges from 0 (left-most position) to 1 (right-most position). For example, to set the gauge at "3/4 full", you can specify the `transform` as + +``` +.gauge__data { + -webkit-transform: rotate(-0.125turn); + -moz-transform: rotate(-0.125turn); + -ms-transform: rotate(-0.125turn); + -o-transform: rotate(-0.125turn); + transform: rotate(-0.125turn); +} +.gauge__needle { + -webkit-transform: rotate(-0.125turn); + -moz-transform: rotate(-0.125turn); + -ms-transform: rotate(-0.125turn); + -o-transform: rotate(-0.125turn); + transform: rotate(-0.125turn); +} +``` + +As the example indicates, you probably want to use vendor prefixes for maximum compatibility. + +If you wish, you can use the included JavaScript component to set and update the gauge value. The component API is quite simple. First, create a new object: + + var gauge = new Gauge(); + +You can optionally pass a DOM element (constructed as above) to the constructor: + + var gauge = new Gauge(document.getElementById("myGauge")); + +If you don't pass the DOM element as a constructor parameter, you can initialize it later using the `element()` method: + + gauge.element(document.getElementById("myGauge")); + +> Note that the component will not construct the DOM element itself. You must supply a pre-constructed element with the sub-elements indicated above. + +Once you have an initialized constructor, set the value (between 0 and 1) using the `value()` method: + + gauge.value(0.75); + +As a final enhancement, if you're going to update the gauge live on the page, you can add the `gauge--liveupdate` class to the parent element. This will enable a nice CSS-based animation for value updates. + diff --git a/playground/html/material-gauge-gh-pages/example.png b/playground/html/material-gauge-gh-pages/example.png new file mode 100644 index 0000000000000000000000000000000000000000..b2bcea61686c42b247acb73d8126f838735545a1 GIT binary patch literal 17203 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 literal 0 HcmV?d00001 diff --git a/playground/html/material-gauge-gh-pages/index.html b/playground/html/material-gauge-gh-pages/index.html new file mode 100644 index 0000000..079fd33 --- /dev/null +++ b/playground/html/material-gauge-gh-pages/index.html @@ -0,0 +1,51 @@ + + + + + + Material Design Gauge + + + + + + +
+
+
+
+
+
+
+
+
+ No + + Yes +
+
+ + + + diff --git a/playground/html/material-gauge-gh-pages/material-gauge.css b/playground/html/material-gauge-gh-pages/material-gauge.css new file mode 100644 index 0000000..46e27e5 --- /dev/null +++ b/playground/html/material-gauge-gh-pages/material-gauge.css @@ -0,0 +1,192 @@ +/* + * #### Gauge Component + * + * The standard markup for the component is: + * + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * No + * + * Yes + *
+ *
+ */ + +/* + * First define all of the relevant rules that aren't dependent + * on the size of the gauge. We want to collect the size-depenent + * rules in one place to make it easier to adjust the size. + */ + +.gauge { + position: relative; +} + +.gauge__container { + margin: 0; + padding: 0; + position: absolute; + left: 50%; + overflow: hidden; + text-align: center; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -o-transform: translateX(-50%); + transform: translateX(-50%); +} + +.gauge__background { + z-index: 0; + position: absolute; + background-color: #C5CAE9; + top: 0; + border-radius: 300px 300px 0 0; +} + +.gauge__data { + z-index: 1; + position: absolute; + background-color: #3F51B5; + margin-left: auto; + margin-right: auto; + border-radius: 300px 300px 0 0; + -webkit-transform-origin: center bottom; + -moz-transform-origin: center bottom; + -ms-transform-origin: center bottom; + -o-transform-origin: center bottom; + transform-origin: center bottom; +} + +.gauge__center { + z-index: 2; + position: absolute; + background-color: #1d211e; + margin-right: auto; + border-radius: 300px 300px 0 0; +} + +.gauge__marker { + z-index: 3; + background-color: #fff; + position: absolute; + width: 1px; +} + +.gauge__needle { + z-index: 4; + background-color: #E91E63; + height: 3px; + position: absolute; + -webkit-transform-origin: left center; + -moz-transform-origin: left center; + -ms-transform-origin: left center; + -o-transform-origin: left center; + transform-origin: left center; +} + +.gauge__labels { + display: table; + margin: 0 auto; + position: relative; +} + +.gauge__label--low { + display: table-cell; + text-align: center; +} + +.gauge__label--spacer { + display: table-cell; +} + +.gauge__label--high { + display: table-cell; + text-align: center; +} + +/* + * Now define the rules that depend on the size of + * the gauge. We start with sizing for a small mobile + * device. + */ + +.gauge { height: calc(120px + 3em); } +.gauge__container { width: 240px; height: 120px; } +.gauge__marker { height: 120px; left: 119.5px; } +.gauge__background { width: 240px; height: 120px; } +.gauge__center { width: 144px; height: 72px; top: 48px; margin-left: 48px; } +.gauge__data { width: 240px; height: 120px; } +.gauge__needle { left: 120px; top: 117px; width: 120px; } +.gauge__labels { top: 120px; width: 240px; } +.gauge__label--low { width: 48px; } +.gauge__label--spacer { width: 144px; } +.gauge__label--high { width: 48px; } + +/* + * Increase the gauge size slightly on larger viewports. + */ + + @media only screen and (min-width: 400px) { + .gauge { height: calc(150px + 3em); } + .gauge__container { width: 300px; height: 150px; } + .gauge__marker { height: 150px; left: 149.5px; } + .gauge__background { width: 300px; height: 150px; } + .gauge__center { width: 180px; height: 90px; top: 60px; margin-left: 60px; } + .gauge__data { width: 300px; height: 150px; } + .gauge__needle { left: 150px; top: 147px; width: 150px; } + .gauge__labels { top: 150px; width: 300px; } + .gauge__label--low { width: 60px; } + .gauge__label--spacer { width: 180px; } + .gauge__label--high { width: 60px; } +} + +/* + * As an option, the `gauge--liveupdate` class can be added + * to the main gauge element. When this class is present, + * we add a transition that animates any changes to the gauge + * value. Currently, the app does not use this option because + * all the inputs that can change gauge values are present + * on tab panels that are different from the gauge itself. + * Therefore, users won't be able to see any gauge changes + * when they make input changes. The code is available, though, + * should this change. + */ + +.gauge--liveupdate .gauge__data, +.gauge--liveupdate .gauge__needle { + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; +} + +/* + * For a given gauge value, x, ranging from 0.0 to 1.0, set + * the `transform: rotate()` property according to the + * following equation: `-0.5 + 0.5x turns` The default + * properties below represent an x value of 0. + */ + +.gauge__data { + -webkit-transform: rotate(-.50turn); + -moz-transform: rotate(-.50turn); + -ms-transform: rotate(-.50turn); + -o-transform: rotate(-.50turn); + transform: rotate(-.50turn); +} +.gauge__needle { + -webkit-transform: rotate(-.50turn); + -moz-transform: rotate(-.50turn); + -ms-transform: rotate(-.50turn); + -o-transform: rotate(-.50turn); + transform: rotate(-.50turn); +} diff --git a/playground/html/material-gauge-gh-pages/material-gauge.js b/playground/html/material-gauge-gh-pages/material-gauge.js new file mode 100644 index 0000000..17fa69d --- /dev/null +++ b/playground/html/material-gauge-gh-pages/material-gauge.js @@ -0,0 +1,67 @@ +// #### Gauge + +// The Gauge object encapsulates the behavior +// of simple gauge. Most of the implementation +// is in the CSS rules, but we do have a bit +// of JavaScript to set or read the gauge value + +function Gauge(el) { + + // ##### Private Properties and Attributes + + var element, // Containing element for the info component + data, // `.gauge__data` element + needle, // `.gauge__needle` element + value = 0.0, // Current gauge value from 0 to 1 + prop; // Style for transform + + // ##### Private Methods and Functions + + var setElement = function(el) { + // Keep a reference to the various elements and sub-elements + element = el; + data = element.querySelector(".gauge__data"); + needle = element.querySelector(".gauge__needle"); + }; + + var setValue = function(x) { + value = x; + var turns = -0.5 + (x * 0.5); + data.style[prop] = "rotate(" + turns + "turn)"; + needle.style[prop] = "rotate(" + turns + "turn)"; + }; + + // ##### Object to be Returned + + function exports() { }; + + // ##### Public API Methods + + exports.element = function(el) { + if (!arguments.length) { return element; } + setElement(el); + return this; + }; + + exports.value = function(x) { + if (!arguments.length) { return value; } + setValue(x); + return this; + }; + + // ##### Initialization + + var body = document.getElementsByTagName("body")[0]; + ["webkitTransform", "mozTransform", "msTransform", "oTransform", "transform"]. + forEach(function(p) { + if (typeof body.style[p] !== "undefined") { prop = p; } + } + ); + + if (arguments.length) { + setElement(el); + } + + return exports; + +};