diff --git a/Arduino/CanGrow/include/Webserver/File_favicon_ico.h b/Arduino/CanGrow/include/Webserver/File_favicon_ico.h new file mode 100644 index 0000000..121cf57 --- /dev/null +++ b/Arduino/CanGrow/include/Webserver/File_favicon_ico.h @@ -0,0 +1,37 @@ +unsigned char File_favicon_ico_gz[] = { + 0x1f, 0x8b, 0x08, 0x08, 0x11, 0x71, 0x19, 0x67, 0x00, 0x03, 0x43, 0x61, + 0x6e, 0x47, 0x72, 0x6f, 0x77, 0x5f, 0x66, 0x61, 0x76, 0x69, 0x63, 0x6f, + 0x2e, 0x69, 0x63, 0x6f, 0x00, 0xed, 0x94, 0x49, 0x4b, 0xc3, 0x40, 0x18, + 0x86, 0xdf, 0xd8, 0xc5, 0xaa, 0xe9, 0x12, 0xa7, 0xcd, 0xd2, 0x26, 0x99, + 0x7c, 0x89, 0x76, 0x45, 0xb4, 0x2a, 0xb6, 0xa2, 0x42, 0xb1, 0x52, 0x73, + 0x11, 0xd4, 0x83, 0xdb, 0xc1, 0x8b, 0x08, 0x75, 0xf9, 0xff, 0x67, 0xbf, + 0x49, 0x3c, 0x58, 0xa4, 0x17, 0xc1, 0x5b, 0x9e, 0xe4, 0x1d, 0xe6, 0xf9, + 0x86, 0x61, 0x32, 0x03, 0x19, 0x40, 0xe3, 0xa7, 0x56, 0x03, 0xb7, 0x25, + 0xcc, 0x0b, 0x80, 0x09, 0xa0, 0xcb, 0xe1, 0x12, 0x02, 0xa4, 0xf5, 0x65, + 0x44, 0xed, 0x08, 0x51, 0x27, 0xc2, 0x56, 0x2f, 0xc2, 0x76, 0x9f, 0x33, + 0x88, 0xd0, 0xde, 0x09, 0xd1, 0xd9, 0x0b, 0xd1, 0x1d, 0x86, 0xe8, 0x1d, + 0x86, 0xe8, 0x8f, 0x08, 0x83, 0x31, 0x61, 0x77, 0x12, 0x60, 0x38, 0x0d, + 0xb0, 0x3f, 0x93, 0x38, 0x88, 0x25, 0x8e, 0xae, 0x7c, 0x8c, 0xae, 0x7d, + 0x8c, 0x6f, 0x3c, 0x8e, 0x8f, 0xe3, 0x5b, 0x0f, 0x27, 0x77, 0x2e, 0x4e, + 0xef, 0x39, 0x0f, 0x2e, 0xce, 0x1e, 0x39, 0x4f, 0x2d, 0x4c, 0x9e, 0x9b, + 0x38, 0x7f, 0x71, 0x30, 0xe5, 0x5c, 0xbc, 0xda, 0x98, 0xcd, 0x2d, 0xcc, + 0xde, 0x2c, 0x5c, 0xbe, 0x5b, 0x88, 0x3f, 0x4c, 0xc4, 0x9f, 0xe6, 0xd2, + 0xef, 0xcb, 0xc8, 0xc8, 0xf8, 0x7f, 0x7e, 0xfc, 0x81, 0x45, 0x61, 0xe4, + 0x57, 0xac, 0xbc, 0x21, 0x8a, 0xa9, 0x6b, 0x82, 0xa4, 0x0c, 0x24, 0x09, + 0x2d, 0x55, 0x43, 0x78, 0xc4, 0x78, 0xc2, 0x50, 0x85, 0x9c, 0x4d, 0x92, + 0x12, 0x24, 0xd9, 0x1b, 0x7c, 0xe9, 0x08, 0x51, 0x72, 0x13, 0x5f, 0xaf, + 0x8a, 0x4d, 0x35, 0x61, 0xd5, 0x4b, 0xc7, 0xfd, 0xef, 0x5b, 0xa8, 0x4e, + 0x14, 0x24, 0xaf, 0x9f, 0xe8, 0x5a, 0x40, 0x75, 0x87, 0xc8, 0xe1, 0xb2, + 0xae, 0xbc, 0x2c, 0x85, 0xa6, 0x9c, 0x97, 0x2d, 0x2b, 0x6f, 0x15, 0x34, + 0x28, 0x87, 0x56, 0x6d, 0x2a, 0xcf, 0x71, 0x2a, 0xca, 0xd3, 0x6e, 0x0a, + 0x51, 0x65, 0x61, 0x3b, 0x44, 0x8b, 0xdb, 0x6b, 0x34, 0x16, 0x5d, 0xd7, + 0xff, 0x74, 0x4a, 0xbf, 0xf9, 0x02, 0x31, 0x98, 0x4b, 0x6b, 0x7e, 0x05, + 0x00, 0x00 +}; +unsigned int File_favicon_ico_gz_len = 326; + +void WebFile_favicon_ico(AsyncWebServerRequest *request) { + AsyncWebServerResponse *response = request->beginResponse_P(200, "image/x-icon", File_favicon_ico_gz, File_favicon_ico_gz_len); + response->addHeader("Content-Encoding", "gzip"); + request->send(response); +} diff --git a/playground/html/root/cangrow.css b/playground/html/root/cangrow.css new file mode 100644 index 0000000..8be9236 --- /dev/null +++ b/playground/html/root/cangrow.css @@ -0,0 +1,194 @@ +body { + color: #cae0d0; + background-color: #1d211e; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: center; +} + +.footer { + color: #343B35; + /*text-align: center;*/ +} + +.center { + /*width: 100; */ + margin: auto; +} + +.centered { + /*display: block;*/ + margin-left: auto; + margin-right: auto; +} + +td { + text-align: left; + vertical-align: middle; +} +/*h1, h2, h3, h4, h5 { + text-align: center; +}*/ + +h1 { + margin: 15px; +} + +h2 { + margin: 10px; +} + +h3 { + margin: 5px; +} + +a:link, a:visited { + color: #04AA6D; +} +a:hover { + color: #64AA6D; +} +a:active { + color: #04AA6D; +} +.infomsg , .warnmsg { + color: #fff; + border-radius: 3px; + padding: 4px; + /*width: fit-content; min-width: 200px; max-width: 420px;*/ + display: inline-block; + margin: auto; + margin-bottom: 5px; + font-weight: bold; + /*text-align: center;*/ + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); +} +.infomsg { + background: #04AA6D; +} +.warnmsg { + background: #aa4204; +} +.inputShort { + width: 42px; +} + +.helpbox { + font-size: 0.8em; +} +.nav { + background: #333; + /*width: 100; */ + margin: auto; + margin-bottom: 10px; + padding: 0; + position: relative; + border-radius: 3px; + display: inline-block; + text-align: left; +} + +.subnav { + /*text-align: center;*/ + margin: auto; + margin-bottom: 10px; + padding: 0; + position: relative; + border-radius: 3px; +} + +.subnavTitle { + font-size: 1em; + /*font-weight: bold;*/ + margin-top: -10px; + margin-bottom: 10px; + /*text-align: center;*/ +} +.nav li { + display: inline-block; + list-style: none; + border-radius: 3px; +} + +.subnav li { + background: #262B27; + list-style: none; + border-radius: 3px; + margin-bottom: 3px; + display: inline-block; +} + +.nav li:first-of-type { + background: #026b45; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.nav li a, .nav span, .subnav li a, .subnav span, .button, .button:link, input[type=button], input[type=submit], input[type=reset] { + color: #ddd; + display: block; + font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; + font-size:0.8em; + padding: 10px 20px; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); +} + +.subnav li a, .subnav span { + padding: 5px 10px; +} + +.nav li a:hover, .subnav li a:hover, .activeNav, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { + background: #04AA6D; + color: #fff; + border-radius: 3px; +} + +.nav li a:active, .subnav li a:active { + background: #026b45; + color: #cae0d0; +} + +.activeNav { + background: #444; +} + +.navTime { + background: #292929; +} + +.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] { + background: #026b45; + color: #fff; + border-radius: 3px; + padding: 6px 12px; + /*text-align: center;*/ + text-decoration: none; + display: inline-block; + border: none; +} + +.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { + background: #026b45; + color: #cae0d0; +} + +input[type=text], input[type=date], input[type=number], input[type=password], select { + background: #cae0d0; + color: #1d211e; + border: 1px solid #026b45; + border-radius: 3px; +} + + @media only screen and (min-width: 1820px) { + /*.center, .nav { + width: 60; min-width: 420px; + }*/ + .subnav li { + display: ''; + margin-bottom: 3px; + } +} + +/*@media only screen and (min-width: 640px) { + +}*/ diff --git a/playground/html/root/favicon.ico b/playground/html/root/favicon.ico new file mode 100644 index 0000000..98ee08c Binary files /dev/null and b/playground/html/root/favicon.ico differ diff --git a/playground/html/root/gauge.css b/playground/html/root/gauge.css deleted file mode 100644 index a24ea66..0000000 --- a/playground/html/root/gauge.css +++ /dev/null @@ -1,147 +0,0 @@ -.gauge { - position: relative; -} - -.gaugeWrapper { - overflow: hidden; - display: flex; - justify-content: center; -} - -.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: #cae0d0; - top: 0; - border-radius: 300px 300px 0 0; -} - -.gauge__data { - z-index: 1; - position: absolute; - background-color: #04AA6D; - 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; - font-weight: bold; -} - -.gauge__label--low { - display: table-cell; - text-align: center; -} - -.gauge__label--spacer { - display: table-cell; -} - -.gauge__label--high { - display: table-cell; - text-align: center; -} - - -.gauge { height: calc(60px + 3em); } -.gauge__container { width: 120px; height: 60px; } -.gauge__marker { height: 60px; left: 59.5px; } -.gauge__background { width: 120px; height: 60px; } -.gauge__center { width: 72px; height: 36px; top: 24px; margin-left: 24px; } -.gauge__data { width: 120px; height: 60px; } -.gauge__needle { left: 60px; top: 58px; width: 60px; } -.gauge__labels { top: 60px; width: 120px; } -.gauge__label--low { width: 24px; } -.gauge__label--spacer { width: 72px; text-align: center;} -.gauge__label--high { width: 24px; } - - @media only screen and (min-width: 720px) { - .gauge { height: calc(120px + 4.2em); } - .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; text-align: center;} - .gauge__label--high { width: 48px; } - .gaugeLabel { font-size: 1.3em; } - .gauge__labels { font-size: 2em; } - } - -.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; -} - - -.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/root/gauge.js b/playground/html/root/gauge.js deleted file mode 100644 index 5eb8fa8..0000000 --- a/playground/html/root/gauge.js +++ /dev/null @@ -1,61 +0,0 @@ - - -function Gauge(el) { - -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 - valueLabel; // `.gauge__label--spacer` element - -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'); - valueLabel = element.querySelector('.gauge__label--spacer'); - -}; - -var setValue = function(x, max, unit) { - percentage = x * 100 / max; - value = percentage / 100; - var turns = -0.5 + (value * 0.5); - data.style[prop] = 'rotate(' + turns + 'turn)'; - //needle.style[prop] = 'rotate(' + turns + 'turn)'; - valueLabel.textContent = x + unit; - -}; - -function exports() { }; - -exports.element = function(el) { - if (!arguments.length) { return element; } - setElement(el); - return this; -}; - -exports.value = function(x, max=100, unit='%') { - if (!arguments.length) { return value; } - setValue(x, max, unit); - return this; -}; - -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; - -}; - - - diff --git a/playground/html/root/index.html b/playground/html/root/index.html index f92a4c5..11b3cb5 100644 --- a/playground/html/root/index.html +++ b/playground/html/root/index.html @@ -1,161 +1,72 @@ - -CanGrow - Amnesia Haze - - - + CanGrow - CanGrow v0.2-dev + -

🔄 Firmware update

Version: 0.1
Build: 4ad16c9 -

You find the latest CanGrow Firmware Version on the projects release page

-
- Firmware .bin file:
- - -
- -