From e771320e6acfda4f18e50376ef4abc101afb236c Mon Sep 17 00:00:00 2001 From: Lukas Bachschwell Date: Sun, 27 May 2018 11:47:53 +0200 Subject: [PATCH] #9 adjusting labels for wraping renaming datafiles going on for numbers --- examples/gui/data/css/style.css | 6 ++ examples/gui/data/css/style.min.css | 2 +- examples/gui/data/js/controls.js | 56 ++++++++++++++++++- examples/gui/gui.ino | 4 ++ keywords.txt | 2 + src/ESPUI.cpp | 16 +++--- src/ESPUI.h | 21 +++++-- src/dataControlsJS.h | 5 ++ src/{uploadDataIndex.h => dataIndexHTML.h} | 0 ...loadDataNormalize.h => dataNormalizeCSS.h} | 0 src/{uploadDataSlider.h => dataSliderJS.h} | 0 src/dataStyleCSS.h | 5 ++ src/{uploadDataZepto.h => dataZeptoJS.h} | 0 src/uploadDataControls.h | 5 -- src/uploadDataStyle.h | 5 -- 15 files changed, 100 insertions(+), 27 deletions(-) create mode 100644 src/dataControlsJS.h rename src/{uploadDataIndex.h => dataIndexHTML.h} (100%) rename src/{uploadDataNormalize.h => dataNormalizeCSS.h} (100%) rename src/{uploadDataSlider.h => dataSliderJS.h} (100%) create mode 100644 src/dataStyleCSS.h rename src/{uploadDataZepto.h => dataZeptoJS.h} (100%) delete mode 100644 src/uploadDataControls.h delete mode 100644 src/uploadDataStyle.h diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css index b3baf2a..25b6a9c 100644 --- a/examples/gui/data/css/style.css +++ b/examples/gui/data/css/style.css @@ -78,6 +78,12 @@ background-color: #999999; margin-bottom: 10px; } + + .label-wrap { + width: 90%; + white-space: pre-wrap; + word-wrap: break-word; + } .label.color-blue { background-color: #6f9ad1; diff --git a/examples/gui/data/css/style.min.css b/examples/gui/data/css/style.min.css index 3d37851..82b3f94 100644 --- a/examples/gui/data/css/style.min.css +++ b/examples/gui/data/css/style.min.css @@ -1 +1 @@ -.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{margin-top:2%;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:10px;min-width:150px;color:#fff}.card-slider{padding-bottom:10px}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-0.15em;background-color:#999;margin-bottom:10px}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:2%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1.0;font-weight:400;font-family:'Open Sans',sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.0rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,.1),hsla(0,0%,100%,.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.5),0 0 1px 1px hsla(0,0%,100%,.75),0 0 1px 2px hsla(0,0%,100%,.25),0 0 1px 3px hsla(0,0%,100%,.25),0 0 1px 4px hsla(0,0%,100%,.25),0 0 1px 6px hsla(0,0%,0%,.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,.5),0 0 1px hsla(0,0%,0%,.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,.15),hsla(0,0%,100%,.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.5),0 0 1px 1px hsla(0,0%,100%,.25),0 0 1px 2px hsla(0,0%,100%,.25),0 0 1px 3px hsla(0,0%,100%,.25),0 0 1px 4px hsla(0,0%,100%,.25),0 0 1px 6px hsla(0,0%,0%,.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block!important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-bottom:12px;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:'';height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:'';height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:'Roboto',sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:4px;background-color:#bebebe}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:-5.5px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default!important;background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none!important;transform:scale(1)!important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:-2px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:12px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b} \ No newline at end of file +.container{position:relative;width:79%;margin:20px;box-sizing:border-box}.column,.columns{width:100%;float:left}.card{margin-top:2%;border-radius:6px;box-shadow:0 4px 4px rgba(204,197,185,0.5);padding-left:20px;padding-right:20px;margin-bottom:10px;min-width:150px;color:#fff}.card-slider{padding-bottom:10px}.turquoise{background:#1abc9c;border-bottom:#16a085 3px solid}.emerald{background:#2ecc71;border-bottom:#27ae60 3px solid}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-0.15em;background-color:#999;margin-bottom:10px}.label-wrap{width:90%;white-space:pre-wrap;word-wrap:break-word}.label.color-blue{background-color:#6f9ad1}.label.color-red{background-color:#d37c7c}.label.color-green{background-color:#9bc268}.label.color-orange{background-color:#dea154}.label.color-yellow{background-color:#e9d641}.label.color-purple{background-color:#9f83d1}@media(min-width:400px){.container{width:84%}}@media(min-width:630px){.container{width:98%}.column,.columns{margin-right:2%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{margin:0;font-size:1.5em;line-height:1.0;font-weight:400;font-family:'Open Sans',sans-serif;color:#222;background-color:#ecf0f1}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:630px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.0rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}.tcenter{text-align:center}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.control{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,.1),hsla(0,0%,100%,.1));border-radius:50%;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.5),0 0 1px 1px hsla(0,0%,100%,.75),0 0 1px 2px hsla(0,0%,100%,.25),0 0 1px 3px hsla(0,0%,100%,.25),0 0 1px 4px hsla(0,0%,100%,.25),0 0 1px 6px hsla(0,0%,0%,.75);height:9em;margin:3em auto;position:relative;width:9em}.control ul{height:100%;padding:0;transform:rotate(45deg)}.control li{border-radius:100% 0 0 0;box-shadow:inset -1px -1px 1px hsla(0,0%,100%,.5),0 0 1px hsla(0,0%,0%,.75);display:inline-block;height:50%;overflow:hidden;width:50%}.control ul li:nth-child(2){transform:rotate(90deg)}.control ul li:nth-child(3){transform:rotate(-90deg)}.control ul li:nth-child(4){transform:rotate(180deg)}.control ul a{height:200%;position:relative;transform:rotate(-45deg);width:200%}.control a:hover,.control a:focus{background-color:hsla(0,0%,100%,.25)}.control a{border-radius:50%;color:#333;display:block;font:bold 1em/3 sans-serif;text-align:center;text-decoration:none;text-shadow:0 1px 1px hsla(0,0%,100%,.4);transition:.15s}.control .confirm{background-color:#ddd;background-image:linear-gradient(hsla(0,0%,0%,.15),hsla(0,0%,100%,.25));box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.5),0 0 1px 1px hsla(0,0%,100%,.25),0 0 1px 2px hsla(0,0%,100%,.25),0 0 1px 3px hsla(0,0%,100%,.25),0 0 1px 4px hsla(0,0%,100%,.25),0 0 1px 6px hsla(0,0%,0%,.85);left:50%;line-height:3;margin:-1.5em;position:absolute;top:50%;width:3em}.control .confirm:hover,.control .confirm:focus{background-color:#eee}.switch{display:inline-block!important;background-color:#bebebe;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;margin-bottom:12px;position:relative;width:60px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.switch.checked{background-color:#76d21d}.switch input[type="checkbox"]{display:none;cursor:pointer;height:10px;left:12px;position:absolute;top:8px;width:10px}.in{position:absolute;top:8px;left:12px;-webkit-transition:left .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .08s ease-in-out}.switch.checked div{left:38px}.switch .in:before{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(to bottom,#fff 0,#f0f0f0 100%);border:1px solid #fff;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);content:'';height:18px;position:absolute;top:-5px;left:-9px;width:26px}.switch .in:after{background:#f0f0f0;background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f0f0),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(to bottom,#f0f0f0 0,#fff 100%);border-radius:10px;content:'';height:12px;margin:-1px 0 0 -1px;position:absolute;width:12px}.rkmd-slider{display:block;position:relative;font-size:16px;font-family:'Roboto',sans-serif}.rkmd-slider input[type="range"]{overflow:hidden;position:absolute;width:1px;height:1px;opacity:0}.rkmd-slider input[type="range"]+.slider{display:block;position:relative;width:100%;height:4px;background-color:#bebebe}.rkmd-slider input[type="range"]+.slider .slider-fill{display:block;position:absolute;width:0;height:100%;user-select:none;z-index:1}.rkmd-slider input[type="range"]+.slider .slider-handle{cursor:pointer;position:absolute;top:-5.5px;left:0;width:15px;height:15px;margin-left:-8px;border-radius:50%;transition:all .2s ease;user-select:none;z-index:2}.rkmd-slider input[type="range"]:disabled+.slider{background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle{cursor:default!important;background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label{display:none;background-color:#b0b0b0!important}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active{top:-5.5px;width:15px;height:15px;margin-left:-8px}.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label{display:none;border-radius:50%;transform:none}.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active{box-shadow:none!important;transform:scale(1)!important}.rkmd-slider.slider-discrete .slider .slider-handle{position:relative;z-index:1}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label{position:absolute;top:-17.5px;left:-2px;width:30px;height:30px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;border-radius:50%;-webkit-transform:scale(0.5) rotate(-45deg);transform:scale(0.5) rotate(-45deg);-webkit-transition:all .2s ease;transition:all .2s ease}.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span{position:absolute;top:7px;left:0;width:100%;color:#fff;font-size:12px;text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rkmd-slider.slider-discrete .slider .slider-handle.is-active{top:0;margin-left:-2px;width:4px;height:4px}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label{top:-15px;left:-2px;border-radius:15px 15px 15px 0;-webkit-transform:rotate(-45deg) translate(23px,-25px);transform:rotate(-45deg) translate(23px,-25px)}.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span{opacity:1}.rkmd-slider.slider-discrete.slider-turquoise .slider-label{background-color:#16a085}.rkmd-slider.slider-discrete.slider-emerald .slider-label{background-color:#27ae60}.peterriver{background:#3498db;border-bottom:#2980b9 3px solid}.rkmd-slider.slider-discrete.slider-peterriver .slider-label{background-color:#2980b9}.wetasphalt{background:#34495e;border-bottom:#2c3e50 3px solid}.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label{background-color:#2c3e50}.sunflower{background:#f1c40f;border-bottom:#e6bb0f 3px solid}.rkmd-slider.slider-discrete.slider-sunflower .slider-label{background-color:#e6bb0f}.carrot{background:#e67e22;border-bottom:#d35400 3px solid}.rkmd-slider.slider-discrete.slider-carrot .slider-label{background-color:#d35400}.alizarin{background:#e74c3c;border-bottom:#c0392b 3px solid}.rkmd-slider.slider-discrete.slider-alizarin .slider-label{background-color:#c0392b} \ No newline at end of file diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index bd2296f..5b72533 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -1,14 +1,31 @@ const UI_TITEL = 0; + const UI_LABEL = 1; +const UPDATE_LABEL = 6; + const UI_BUTTON = 2; + const UI_SWITCHER = 3; +const UPDATE_SWITCHER = 7; + const UI_PAD = 4; const UI_CPAD = 5; -const UPDATE_LABEL = 6; -const UPDATE_SWITCHER = 7; + const UI_SLIDER = 8; const UPDATE_SLIDER = 9; + + +const UI_NUMBER = 10; +const UPDATE_NUMBER = 11; + +const UI_TEXT_INPUT = 12; +const UPDATE_TEXT_INPUT = 13; + +const UI_GRAPH = 14; +const CLEAR_GRAPH = 15; +const ADD_GRAPH_POINT = 16; + const FOR = 0; const BACK = 1; const LEFT = 2; @@ -97,7 +114,7 @@ function start() { $('#mainHeader').html(data.label); break; case UI_LABEL: - $('#row').append("
" + data.label + "
" + data.value + "
"); + $('#row').append("
" + data.label + "
" + data.value + "
"); break; case UI_BUTTON: $('#row').append("
" + data.label + "
"); @@ -234,6 +251,33 @@ function start() { case UPDATE_SLIDER: slider_move($('#sl' + data.id), data.value, '100', false); break; + + case UI_NUMBER: + $('#row').append( + "
" + + "
" + data.label + "
" + + "" + + "
" + ); + break; + + case UPDATE_NUMBER: + $('#num' + data.id).val(data.value); + break; + + case UI_TEXT_INPUT: + $('#row').append( + "
" + + "
" + data.label + "
" + + "" + + "
" + ); + break; + + case UPDATE_TEXT_INPUT: + $('#num' + data.id).val(data.value); + break; + default: console.error('Unknown type or event'); break; @@ -241,6 +285,12 @@ function start() { }; } +function numberchange(number) { + var val = $('#num' + data.id).val(); + websock.send("nchange:" + number + ":" + val); + console.log(val); +} + function buttonclick(number, isdown) { if (isdown) websock.send("bdown:" + number); diff --git a/examples/gui/gui.ino b/examples/gui/gui.ino index 49166b6..5146d06 100644 --- a/examples/gui/gui.ino +++ b/examples/gui/gui.ino @@ -144,6 +144,10 @@ void setup(void) { ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30"); ESPUI.slider("Slider two", &slider, COLOR_NONE, "100"); + /* + .begin loads and serves all files from PROGMEM directly. + If you want to serve the files from SPIFFS use .beginSPIFFS (.prepareFileSystem has to be run in an empty sketch before) + */ ESPUI.begin("ESPUI Control"); } diff --git a/keywords.txt b/keywords.txt index ccc018d..69e83af 100644 --- a/keywords.txt +++ b/keywords.txt @@ -20,8 +20,10 @@ pad KEYWORD2 slider KEYWORD2 begin KEYWORD2 +beginSPIFFS KEYWORD2 print KEYWORD2 updateSwitcher KEYWORD2 +updateSlider KEYWORD2 ####################################### # Instances (KEYWORD2) diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp index 8be4b7c..ac1a9e8 100644 --- a/src/ESPUI.cpp +++ b/src/ESPUI.cpp @@ -1,13 +1,13 @@ #include "ESPUI.h" -#include "uploadDataIndex.h" +#include "dataIndexHTML.h" -#include "uploadDataNormalize.h" -#include "uploadDataStyle.h" +#include "dataNormalizeCSS.h" +#include "dataStyleCSS.h" -#include "uploadDataControls.h" -#include "uploadDataSlider.h" -#include "uploadDataZepto.h" +#include "dataControlsJS.h" +#include "dataSliderJS.h" +#include "dataZeptoJS.h" #include #include @@ -586,7 +586,7 @@ void ESPUIClass::beginSPIFFS(const char *_title) { // Heap for general Servertest server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) { - request->send(200, "text/plain", String(ESP.getFreeHeap()+ " In SPIFFSmode")); + request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode"); }); server->onNotFound( @@ -655,7 +655,7 @@ void ESPUIClass::begin(const char *_title) { // Heap for general Servertest server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) { - request->send(200, "text/plain", String(ESP.getFreeHeap() + " In Memorymode")); + request->send(200, "text/plain", String(ESP.getFreeHeap())+ " In Memorymode"); }); server->onNotFound( diff --git a/src/ESPUI.h b/src/ESPUI.h index 2f247d2..17e08be 100644 --- a/src/ESPUI.h +++ b/src/ESPUI.h @@ -41,20 +41,31 @@ typedef struct Control { // Message Types (and control types) #define UI_TITEL 0 + #define UI_LABEL 1 +#define UPDATE_LABEL 6 + #define UI_BUTTON 2 + #define UI_SWITCHER 3 +#define UPDATE_SWITCHER 7 + #define UI_PAD 4 #define UI_CPAD 5 -#define UPDATE_LABEL 6 -#define UPDATE_SWITCHER 7 + + #define UI_SLIDER 8 #define UPDATE_SLIDER 9 + #define UI_NUMBER 10 #define UPDATE_NUMBER 11 -#define UI_GRAPH 12 -#define CLEAR_GRAPH 13 -#define ADD_GRAPH_POINT 14 + +#define UI_TEXT_INPUT 12 +#define UPDATE_TEXT_INPUT 13 + +#define UI_GRAPH 14 +#define CLEAR_GRAPH 15 +#define ADD_GRAPH_POINT 16 // Values diff --git a/src/dataControlsJS.h b/src/dataControlsJS.h new file mode 100644 index 0000000..80d5884 --- /dev/null +++ b/src/dataControlsJS.h @@ -0,0 +1,5 @@ +const char JS_CONTROLS[] PROGMEM = R"=====( +function colorClass(e){switch(e=Number(e)){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:default:return""}}function start(){websock=new WebSocket("ws://"+window.location.hostname+"/ws"),websock.onopen=function(e){console.log("websock open"),$("#conStatus").addClass("color-green"),$("#conStatus").text("Connected")},websock.onclose=function(e){console.log("websock close"),$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").text("Error / No Connection")},websock.onerror=function(e){console.log(e),$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").text("Error / No Connection")},websock.onmessage=function(e){console.log(e);var c=JSON.parse(e.data),o=(document.body,"");switch(c.type){case UI_TITEL:document.title=c.label,$("#mainHeader").html(c.label);break;case UI_LABEL:$("#row").append("
"+c.label+"
"+c.value+"
");break;case UI_BUTTON:$("#row").append("
"+c.label+"
"),$("#"+c.id).on({touchstart:function(e){e.preventDefault(),buttonclick(c.id,!0)}}),$("#"+c.id).on({touchend:function(e){e.preventDefault(),buttonclick(c.id,!1)}});break;case UI_SWITCHER:var s="