diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..28bb8df --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +# MacOSX Finder ***** +.DS_Store + +# Webstorm ********** +.idea + +# Grunt dep ********* +node_modules +package-lock.json \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..933b3a3 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,165 @@ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ +// minify js + uglify: { + options: { + //sourceMap: true, + compress: true, + comments: false + }, + main_thread: { + files: { + 'build/temp/gui.min.js': [ + // THESE MUST BE IN CORRECT ORDER.... ADD NEW FILES HERE + 'src/gui_easy_settings.js', + 'src/gui_easy_settings_config_table.js', + 'src/gui_easy_default_settings.js', + 'src/gui_easy_helper.js', + 'src/gui_easy_curly.js', + 'src/gui_easy_curly_unit.js', + 'src/gui_easy_curly_page.js', + 'src/gui_easy_curly_icons.js', + 'src/gui_easy_curly_forms.js', + 'src/gui_easy_scrubber.js', + 'src/gui_easy_popper.js', + 'src/gui_easy_popper_rules.js', + 'src/gui_easy_pitcher.js', + 'src/gui_easy_butler.js', + 'src/gui_easy_tender.js', + 'src/gui_easy_ini.js' + ], + 'build/temp/forms.min.js': [ + 'src/forms/gui_easy_forms.js', + 'src/forms/gui_easy_forms_p*.js', + 'src/forms/gui_easy_forms_c*.js', + 'src/forms/gui_easy_forms_n*.js' + ], + 'build/temp/dash.min.js': [ + 'src/dash/gui_easy_dash.js', + 'src/dash/gui_easy_dash_d*.js' + ] + } + } + }, +// minify css + cssmin: { + options: { + mergeIntoShorthands: false, + roundingPrecision: -1 + }, + target: { + files: {'build/temp/gui.min.css': ['src/gui_easy.css']} + } + }, +// make one file of them all + processhtml: { + main: { + files: {'build/temp/index.min.html': ['index.html']} + } + }, +// clean the release folder + clean: { + temp: { + src: ['build/temp'] + }, + version: { + src: ['build/<%= version %>'] + } + }, +// zip source to temp folder + gzip the gui html single file + compress: { + source: { + options: { + archive: 'build/temp/src-<%= version %>.zip' + }, + files: [ + { + flatten: false, + src: ['src/*','src/forms/*','src/dash/*', 'index.html','Gruntfile.js','package.json'], + dest: '/', + filter: 'isFile' + } + ] + }, + main: { + options: { + mode: 'gzip', + level: 9 //default is 1, max is 9 + }, + files: [{ + expand: true, + src: ['build/temp/index.min.html'], + dest: '.', + ext: '.htm.gz' + }] + }, + mini: { + options: { + mode: 'gzip', + level: 9 + }, + files: [{ + expand: false, + src: ['src/index-minimal.html'], + dest: 'build/temp/mini/index.htm.gz' + }] + } + }, +// rename the temp folder + rename: { + temp: { + files: [ + { + src: ['build/temp'], + dest: 'build/<%= version %>' + } + ] + } + } +}); + + // Load the plugin(s) + grunt.loadNpmTasks('grunt-contrib-uglify-es'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-rename'); + grunt.loadNpmTasks('grunt-contrib-compress'); + grunt.loadNpmTasks('grunt-processhtml'); + + // build gui easy task + grunt.registerTask('buildGuiEasy', 'Will build the project', + function () { + let settings = grunt.file.read('src/gui_easy_settings.js'); + settings = settings.match(/--GRUNT-START--([\s\S]*?)\/\/--GRUNT-END--/)[1]; + let guiEasy = "{" + settings + "}"; + guiEasy = guiEasy.replace(/'/g,"\""); + guiEasy = JSON.parse(guiEasy); + let version; + if (guiEasy.development === true && guiEasy.releaseCandidate > 0) { + version = guiEasy.major + '.' + guiEasy.minor + '.rc' + guiEasy.releaseCandidate + '.' + guiEasy.minimal; + } else if (guiEasy.development === true) { + version = guiEasy.major + '.' + guiEasy.minor + '.nightly.' + guiEasy.minimal; + } else { + version = guiEasy.major + '.' + guiEasy.minor + '.' + guiEasy.minimal; + } + grunt.log.ok(version); + // add version as a property for the grunt ini loop + grunt.config("version", version); + grunt.task.run( + 'clean', + 'uglify', + 'cssmin', + 'processhtml', + 'compress', + 'rename' + ) + }); + + // the 'default' task can be run just by typing "grunt" on the command line + grunt.registerTask('default', [ + 'buildGuiEasy' + ]); + +}; \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..a24e763 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1 @@ +(c) Copyright 2019 Grovkillen AB, all rights reserved. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f85346c --- /dev/null +++ b/README.md @@ -0,0 +1,364 @@ +# GUI Easy + +This is the front end of the [ESP Easy](https://github.com/letscontrolit/ESPEasy) firmware. +As of version 2.1.0 of the firmware GUI Easy is the frontend that you will download in order +to get a graphical user interface, by default the units are only accessed using a JSON based +API. We are completely independent code wise which makes it ideal to use even if no +internet is available, all you need to have is within the gzipped file. + +## Getting Started + +If you want to manually download and install the front end you should head over to the +[build](/build) directory and find a release you want to use. The builds marked with +**nightly** and **rcN** are not to be used in production, only as tests. Inside the +[build](/build)/**version** folder you will find the following files: + +* gui.min.css +* gui.min.js +* index.htm.gz ← **This is what you're looking for** +* index.min.html +* src-````.zip +* mini/index.htm.gz + +Of these five files the actual GUI Easy "engine" is compiled into the **index.htm.gz** file. +The minified css, js, and html files are the backbone of this gz:ed file. The src-````.zip +is the source code of the project as it was at the time of compile. In the directory **mini** +you will find the minimal interface used as default fallback GUI. + +### Compile Yourself + +If you plan on contributing to the project you need to be able to compile stuff yourself in +order to bug test as close as release conditions as possible. What you need to do: + +1. Install [Node.js](https://nodejs.org/en/download/), this will include [npm](https://www.npmjs.com/get-npm) which is what we use +to compile the project. +2. Install [Grunt.js](https://gruntjs.com/) (use the command line once ``npm`` is installed) +3. Install Grunt dependencies ([package.json](/package.json), run ``npm install``) + +Install Grunt using your command line interface, and thanks to npm it's this easy: + +``` +npm install -g grunt-cli +``` + +The compile is then done using your command line once again, make sure you're in the same +directory as the **Gruntfile.js** (this is the root of the project). Run the compile script +using this command: + +``` +grunt +``` + +The script will output something like this: + +``` +Running "buildGuiEasy" task +>> 0.0.nightly.1 + +Running "clean:temp" (clean) task +>> 1 path cleaned. + +Running "clean:version" (clean) task +>> 0 paths cleaned. + +Running "uglify:main_thread" (uglify) task +>> 1 file created 227.5 kB → 136.67 kB + +Running "cssmin:target" (cssmin) task +>> 1 file created. 100.84 kB → 86.81 kB + +Running "processhtml:main" (processhtml) task + +Running "compress:source" (compress) task +>> Compressed 1 file + +Running "compress:main" (compress) task +>> Compressed 1 file + +Running "compress:mini" (compress) task +>> Compressed 1 file + +Running "rename:temp" (rename) task +Renaming Directory build/temp -> build/0.0.nightly.1 + +Done. +``` + +Congrats, you just compiled your build from source! + +### Source Code Ideology + +As you will find out the source code is composed by several individual JavaScript files. +You need to understand that source code and release build code are two vastly different +types of code. The source code base needs to be easy to overlook and "full of comments", +whereas the release build should be as small as possible. This is why we use Grunt to +compile the source into build code. + +We use a SPA (single page application) approach for our GUI. The idea of a SPA is that +the browser will never need to jump to new pages, they are all loaded from the root of +the web server. The data from the unit, which is constantly updating, is the only thing +that is needed to be fetch - not the html elements. This way we save a lot of computing +operations of the tiny micro processor which the web server is run by. + +#### Targeted Web Browsers + +We cannot allow us to have backwards compatibility with old web technology (as in IE11 +and earlier), newer browsers are always up to date which makes it easier to create a stable +GUI. + +#### index.html + +The **index.html** is the skeleton of the entire project. We will put all our dynamic +html elements into this skeleton, thus creating the complete interface. Lets break the +file down, leaving out the generic html syntax and only focusing on what makes this +project a bit different compared to other projects. + +``` + + + + + + +... + + + +``` + +The comments ```` and ```` ending with +```` are very important for the compile script. These lines tell +the script that the files in-between the opening and closing comments should be +made into one, minified, file and copied to the temp folder. If new ``.js`` files are +created they need to be added to the ``Gruntfile.js`` file as well! + +After the head we have the body, this is where we put all the visible elements. To +make the build up of the interface as easy as possible we have created a simple markdown +syntax based on opening and closing curly brackets `{{..}}`. There's three major ``div`` +elements which you should be aware of: + +##### view-got-box-shadows [class] + +This ``div`` is only used to give the page a shadow in the top and bottom of the view, +the idea is to get a feeling that the page scrolls beneath the border. + +##### modal-container [id] + +This ``div`` is used to throw modal messages, menus, and the boot screen. Since we want +something to be displayed on the screen until the entire page is ready to be displayed +we need to put static html here. This is where the loading animation comes in. + +###### fallback-loading-animation [id] + +If the boot sequence isn't successful we still want to see something on the screen. +So we put five dots that pulses, this would be the equivalent of Windows' ``blue screen +of death`` or Amiga's ``guru meditation``. In other words, not good. But still a necessity. + +###### modal-loading-screen [id] & boot sequence + +Here we put the boot sequence information, the boot (and post boot) are made up of the +following hocus pocus: + +* Helper +* Curly +* Scrubber +* Popper +* Pitcher +* Butler +* Tender +* Snitch + +These guys are what's making the SPA run smoothly. They can be divided into four groups: + +* All around (Helper) +* Builders (Curly, Scrubber, Popper, Pitcher) +* Sprinters (Butler, Snitch) +* Runner (Tender) + +We like to think of this bunch as the [Snap, Crackle and Pop](https://en.wikipedia.org/wiki/Snap,_Crackle_and_Pop) +mascots of the cereal Rice Krispies. Fun, hardworking, dudes that makes our day a bit +brighter by their simple existence. + +The _all around_ ``Helper`` is used by all the other guys, it doesn't initiate anything +on its own. It only acts on other's request. + +_Builders_ are the ones working during the boot. ``Curly`` turn all the ``{{..}}`` into static +html code, some curlies got curlies inside them, so Curly will run as many times as needed +to get all the code converted. ``Scrubber`` got a pretty easy job, it makes some of the +static html code ready for the next guy in line by adding classes and tweaking some elements +etc. ``Popper``, on the other hand, is constantly aware by creating events and functions +that will create html on-the-fly when these events are fired. Right after that ``Pitcher`` +enters the scene and start fetching data from the unit, this guy's only a one time +sprinter and will create the data object and populate the html page with initial values. + +_Sprinters_ will get and push data from and to the internet. ``Butler`` get (crude) +location of the client's IP address together with language etc. ``Snitch`` is the guy telling our server +that a new unit has been installed, together with the closest city name, only used for our +internal statistics. We respect the individuals integrity and only use this to know the +fragmentation of the installations. This way we get a better understanding if we need to have full +backwards compatibility etc. etc. + +Finally we have the _runner_, currently only one is existing, ``Tender``. The idea is that +these will continuously get data to and from the unit(s). + +###### {{NAVBAR}} [curly] + +The top navbar which contains the tabs. We have two "right" navbar elements, one for full +view and one for mobile view. The "right" navbar will be on the second row if the screen +isn't big enough to have the "left" and "right" side-by-side. + +###### {{WAVE}} [curly] + +The wave is one of our elements we can use to notify our users about stuff, it's mainly used +to display single words together with a color. As an example, if the user click "save" the wave +element will cover the entire view with the text "save" in the "middle" and the color will +be set to "success" (green), more on colors later. The message will only last for a second or +so and then go away. + +##### page-container [id] + +Inside this container we have multiple sub-containers with the class _container_, these +containers corresponds to a tab with the exact same name. This will make the Popper display +the correct container if a tab is clicked. + +##### {{NOTIFIER-TOP}} [curly] + +The top notifier is used to notify the user about states and errors. It can display short +sentences together with a color. The user can click to close this notifier and you can +also have it automatically close by setting a countdown timer. + +##### {{MENU-ACTION}} [curly] + +Sticky action button in lower right corner. It floats over all elements but never goes out of +view. This menu will only host shortcuts to modal menus and settings save, cancel etc. + +##### {{DRAWER-THEME}} [curly] **Patreon feature!** + +A drawer is a menu that resides at the bottom and is accessed by clicking on the tab. The +theme drawer hosts all the settings related to the look and feel of the interface. + +##### footer [class] + +This is where we have the information that always is displayed. The logo together with sponsors +are placed here. + +#### CSS Variables + +``` +--scale-size: 16; +--row-size: 20; +--overflow-tab-text-size: 24; +--max-width-page-size: 1400px; +--state-of-navbar-toggle: fixed; +--button-radius-size: 1; +--main-bg-color: 52,146,226; +--main-inverted-color: 47,66,82; +--main-sunny-color: 255,209,0; +--main-info-color: 255,143,18; +--main-warning-color: 239,72,61; +--main-success-color: 0,174,65; +--main-font-color: 255,255,255; +--default-font-family: "Segoe UI",Calibri,Arial; +``` + +### dataset [syntax] + +By setting different datasets for click etc. the Popper will automatically create events +for these elements. Please refer to the source code on all different ways of doing this. + +### TODO: [syntax] + +By commenting using the `TODO:` syntax it's easier to find where to start digging. + +### Editor + +Any text editor will do but officially we use [WebStorm](https://www.jetbrains.com/webstorm/) by JetBrains. + +## Version Schema + +We use the following version schema (and is set in the [gui_easy_settings.js](/src/gui_easy_settings.js) file): + +``X.Y.Z`` + +X = major version number: a big jump in features or refactoring of code. This is always +set manually when an official new release is deployed. + +Y = minor version number: any new features or updates will render at least a minor bump. +This is always set manually when an official new release is deployed. + +Z = minimal version number: any change in source code will be followed by a bump in +the minimal version number. This is always set automatically each night by our robot. +Official releases will always reset this number back to zero and at only very rare +occasions (critical bug fix etc.) be part of a official release version. + +Apart from these three levels we also have the ``nightly`` and ``rc`` tags. These +are set if the release is made by the robot. The tag is injected into the version name +between the ``Y`` and ``Z``. + +The full version name exemplified: + +``0.0.nighlty.1`` + +``1.2.rc1.112`` + +``2.3.0`` + +When the Gruntfile.js file is executed it will look into the source and parse the version +data. This is made possible by the opening ``//--GRUNT-START--`` and closing ``//--GRUNT-END--`` +tags. Please observe that the ``,`` after the closing tag need to be on the line below +the tag for the script to function correctly. + +## CSS Framework + +The entire CSS framework can be used for any other web site or project but currently we haven't +created a demo site with code examples. This might change in the future if other uses of +this framework is gaining interest. The same goes for JavaScript components which are currently +very ESP Easy specific. + +## Queen Bee & Drones + +By default a unit that have the ``index.htm.gz`` file on-board will act as the "Queen Bee". +The Queen is hosting the web interface and all other units that is stored in the Queen's node +list will be referred to as "Drones", units that will only be reached using API. A Queen +and the following Drones form a "Swarm" of units. This means that by simply browsing to +a Queen you can jump to all the Drones in that Swarm without the need of loading the html +code more than once. This makes surfing the Swarm a breeze, for you and the units. + +## Dash + +We use something we call ``dash``'s to create small widgets which can be either populated +with data or used for human interaction (buttons, sliders etc.). They can use ``curly`` or +``html`` syntax and reside in a square element on the custom dashboard. + +## Forms + +The ``controllers``, ``plugins``, and ``notification`` setup pages are defined by their +corresponding page. These can, similar to dash's, use either html or curly syntax. + +## Sponsorship + +We are happy for any means of funding you may want to send our way. Please use one of these +channels: + +* [Ko-Fi](https://ko-fi.com/GrovkillenTDer): one time (public) +* [PayPal](https://www.paypal.me/espeasy): one time (anonymous) +* [Patreon](https://www.patreon.com/GrovkillenTDer): reoccurring (monthly, extra features, public) + +## Authors + +* **Jimmy "Grovkillen" Westberg** - *Initial work* - +[Github](https://github.com/Grovkillen), +[Dribbble](https://grovkillen.dribbble.com) + +Full list of [contributors](https://github.com/letscontrolit/GUIEasy/contributors) +who participated in this project. + +## License + +Please refer to [LICENSE.md](LICENSE.md) file for details. + +## Acknowledgments + +* All icons are sponsored by [ICONS8](https://icons8.com/) +* Location lookup using [ipapi.co](https://ipapi.co/) +* Inspiration for the terminal look of the Drones come from ``Terminal.css`` found [here](https://terminalcss.xyz/) \ No newline at end of file diff --git a/build/0.0.nightly.1/dash.min.js b/build/0.0.nightly.1/dash.min.js new file mode 100644 index 0000000..08ab23d --- /dev/null +++ b/build/0.0.nightly.1/dash.min.js @@ -0,0 +1 @@ +guiEasy.dash=function(s){return guiEasy.dash["D"+("000"+s).slice(-3)]},guiEasy.dash.D001="\nAdd HTML or CURLY here...\n"; \ No newline at end of file diff --git a/build/0.0.nightly.1/forms.min.js b/build/0.0.nightly.1/forms.min.js new file mode 100644 index 0000000..e79e7e1 --- /dev/null +++ b/build/0.0.nightly.1/forms.min.js @@ -0,0 +1 @@ +guiEasy.forms=function(r,s){return guiEasy.forms[r](s)},guiEasy.forms.regEx=function(r){guiEasy.syntax.curlyLC++;const s=/(?:{{)([^}]{1,256})(?:}})/g;let n,a=[];for(;n=s.exec(r);)a.push([n[1],n[0]]);for(let r=0;rdiv:not(.area-title){display:none}div.area>div.area-title{margin-bottom:.2px;border-bottom:none}div.area:not(.hide-contents)>div.area-title{margin-bottom:3px;border-bottom:2px solid rgba(var(--main-inverted-color),.15)}div.area>div.column{padding:0 3px}div.column{flex:1}div.row{display:none}div.row:not(:empty){display:flex;flex-flow:row wrap;justify-content:flex-start;margin-bottom:3px}div.row:last-child{margin-bottom:8px}div.row>span{margin:4px 3px 5px 4px}button#modal-title-button-close::after{content:''}button.countdown#modal-title-button-close::after{height:calc(1.15 * var(--default-height-size,21pt));position:absolute;top:50%;right:50%;border-top:solid calc(.1 * var(--default-height-size,20)) red;animation-name:countdown;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear}div.top-notifier{background-color:var(--main-info-color-rgba,#ff0);cursor:pointer;padding-top:4px;padding-bottom:calc(.5 * var(--default-height-size,21pt));box-shadow:0 10px 10px -10px rgba(var(--main-inverted-color),.5);z-index:899;position:absolute;top:0;left:0;width:100%}div.top-notifier::before{background:inherit;top:0;left:0;width:100%;content:"";height:calc(.15 * var(--default-height-size,21pt));position:fixed}div#countdown-bar div.top-notifier{padding-top:0}div.top-notifier::after{position:absolute;right:8px;content:'\00d7'}div.top-notifier.no-click::after{content:''}div.top-notifier:hover::after{color:#000}div.top-notifier:empty{display:none}div.top-notifier>div#countdown-bar{background:var(--main-font-color-rgba,#fff);height:4px;width:0;transition:all 1s linear}div.bottom-drawer{transition:height .1s ease-in-out}div.bottom-drawer{color:var(--main-bg-color-rgba);z-index:799;position:fixed;width:100%;max-width:var(--max-width-page-size,1200px);bottom:0;filter:drop-shadow(0 -6px 6px rgba(var(--main-inverted-color), .15)) drop-shadow(0 -6px 12px rgba(var(--main-inverted-color), .75))}div.bottom-drawer.is-inactive{height:calc(1.42 * var(--default-height-size,20));filter:none;pointer-events:none}div.bottom-drawer.is-inactive>div.bottom-tab{pointer-events:all}div.bottom-drawer.is-full-size{height:calc(1.42 * var(--default-height-size,20) + 90vh)}div.bottom-drawer.is-half-size{height:calc(1.42 * var(--default-height-size,20) + 50vh)}div.bottom-drawer.is-quarter-size{height:calc(1.42 * var(--default-height-size,20) + 25vh)}div.bottom-drawer.is-small-size{height:calc(1.42 * var(--default-height-size,20) + 10vh)}div.bottom-drawer::before{content:'\a0';position:absolute;pointer-events:none;top:0;left:0;z-index:929;margin-top:calc(1.42 * var(--default-height-size,20));width:calc(99.5% - .3 * var(--default-height-size,20)/ var(--button-radius-size,2));box-shadow:inset 0 30px 25px -20px rgba(var(--main-inverted-color),1)}div.bottom-tab{display:flex;background-color:var(--main-inverted-color-rgba);padding:2px 8px 6px;width:auto;position:absolute;top:4px;cursor:pointer;border-top-left-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2));border-top-right-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.bottom-tab>svg{height:calc(1.2 * var(--default-height-size,20))}div.bottom-tab path{fill:var(--main-bg-color-rgba,#00f)}div.bottom-tab::after{content:'\a0\25bc'}div.bottom-drawer.is-inactive>div.bottom-tab::after{content:'\a0\25b2'}div.bottom-container::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px 5px rgba(var(--main-font-color),.25);background:0 0;border-top:solid calc(.55 * var(--default-height-size,20)/ var(--button-radius-size,2)) transparent;border-bottom:solid calc(.55 * var(--default-height-size,20)/ var(--button-radius-size,2)) transparent}div.bottom-container{scrollbar-color:rgba(var(--main-font-color),.25) transparent;scrollbar-width:thin;margin-top:calc(1.45 * var(--default-height-size,20));background-color:var(--main-inverted-color-rgba);position:relative;height:100%;overflow-y:scroll;overflow-x:hidden;padding-top:calc(.5 * var(--default-height-size,20));padding-left:2px;padding-right:2px;border-top-right-radius:calc(.55 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.bottom-container::after{content:'\a0';position:absolute;width:100%;height:calc(3 * var(--default-height-size,20))}div.bottom-container>div.area{margin-left:6px;margin-right:6px;padding:calc(.45 * var(--default-height-size,20) + 1px);border:2px solid rgba(var(--main-bg-color),.5);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.bottom-container>div.area>div.area-title{margin:calc(-.55 * var(--default-height-size,20) + 1px);width:calc(100% + .95 * var(--default-height-size,20)/ var(--button-radius-size,2) + 1px);border-radius:calc(.92 * var(--default-height-size,20)/ var(--button-radius-size,2));background:rgba(var(--main-bg-color),.4)}div.bottom-container>div.area>div.area-title:not(.hide-contents){margin-bottom:calc(.45 * var(--default-height-size,20) + 1px);border-radius:calc(.92 * var(--default-height-size,20)/ var(--button-radius-size,2)) calc(.92 * var(--default-height-size,20)/ var(--button-radius-size,2)) 0 0;border-bottom:2px solid rgba(var(--main-bg-color),.15)}div.footer{position:relative;float:left;clear:both;left:50%;transform:translateX(-50%);margin-top:calc(1 * var(--default-height-size,20) + 10px);margin-bottom:calc(1 * var(--default-height-size,20) + 10px)}div.menu~div.footer{margin-top:calc(-2.5 * var(--default-height-size,20) + 13px)}div.alt-popup{z-index:999;position:absolute;width:calc(.7 * var(--default-height-size,20));top:0;right:3px;color:var(--main-inverted-color-rgba);background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));font-size:calc(.6 * var(--default-font-size,19pt))}.got-tooltip{cursor:help;text-decoration:none;position:relative}.got-tooltip::after{content:'\2a';margin-left:3px;position:relative;font-weight:400;font-size:calc(.7 * var(--default-font-size,19pt))}label.got-tooltip::after{margin-left:-1px;margin-top:8px}.hidden-tooltip.got-tooltip::after{content:''}div.tooltip{pointer-events:none;font-weight:400;text-indent:0;border:2px solid rgba(var(--main-bg-color),.5);border-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2));padding:5px 5px 5px 5px;z-index:100;color:var(--main-font-color-rgba,#fff);background:rgba(var(--main-inverted-color),.9);top:calc(1.35 * var(--default-height-size,20));position:absolute;text-decoration:none;transform:translateX(-50%);left:50%;opacity:0;white-space:nowrap}label>div.got-tooltip{width:0}label>div.got-tooltip>div.tooltip{left:calc(7 * var(--default-height-size,20));position:absolute}div.tooltip::after{content:" ";position:absolute;top:-14px;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:transparent transparent rgba(var(--main-bg-color),.5) transparent}.got-tooltip:hover{color:rgba(var(--main-font-color),.5)}.got-tooltip:hover>div.tooltip{pointer-events:all;transition:opacity .1s linear;opacity:1}@media (hover:none){#icon-button-list .tooltip,button.file-action{opacity:1}}body{background-color:var(--main-bg-color-rgba,#00f);color:var(--main-font-color-rgba,#fff);font-family:var(--default-font-family, '"Segoe UI", Calibri, Arial');font-size:calc(1 * var(--default-font-size,19pt));text-align:center;max-width:var(--max-width-page-size,none);min-width:var(--min-width-page-size,420px);margin:auto}a:-webkit-any-link{text-decoration:none;color:var(--main-font-color-rgba,#fff)}a:visited{color:var(--main-font-color-rgba,#fff)}span{margin:calc(.1 * var(--default-height-size,20));position:relative;top:calc(.05 * var(--default-height-size,20) * 1px)}img{border-style:none}div.modal-table,div[id=node-list]>table{width:100%}table,td,th{border-collapse:collapse;border-spacing:1px;border:2px solid rgba(var(--main-inverted-color),.5);width:-moz-available}th{background:rgba(var(--main-inverted-color),.4)}th.header{font-size:calc(.75 * var(--default-font-size,19pt))}td.value-row.device{word-wrap:break-word}div.controller-row.flex,div.device-row.flex,div.notification-row.flex,div.value-row.flex{display:flex;justify-content:space-between}div.controller-row.title,div.device-row.title{color:rgba(var(--main-font-color),.5)}div.controller-row.is-hidden+hr,div.controller-row.title:empty,div.controller-row:empty~hr,div.device-row.is-hidden+hr,div.device-row.title:empty,div.device-row:empty~hr,div.notification-row.is-hidden+hr,div.notification-row.title:empty,div.notification-row:empty~hr,div.value-digits:empty,div.value-name:empty,div.value-row.is-hidden+hr,div.value-row:empty~hr{display:none}div.value-name.classic{margin:4px}div.value-digits.classic{margin:2px;padding-left:2px;padding-right:2px;border-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2));border:2px solid rgba(var(--main-inverted-color),.2);background-color:var(--main-success-color-rgba,green)}div.value-row.not-enabled>div.value-digits.classic{color:rgba(var(--main-font-color),.5);background-color:var(--main-inverted-color-rgba,grey)}div.controller-row.title::after,div.device-row.title::after,div.notification-row.title::after,div.value-name::after{content:":";color:rgba(var(--main-font-color),.5)}div.controller-row.title:empty::after,div.device-row.title:empty::after,div.notification-row.title:empty::after,div.value-name:empty::after{content:""}tr:nth-child(odd){background:rgba(var(--main-inverted-color),.2)}div.modal-table th{background:rgba(var(--main-font-color),.4)}div.modal-table table,div.modal-table td,div.modal-table th{border:2px solid rgba(var(--main-font-color),.5)}div.modal-table tr:nth-child(odd){background:rgba(var(--main-font-color),.25)}div.modal-table tr:nth-child(even){background:rgba(var(--main-font-color),.15)}div.message hr{background:rgba(var(--main-font-color),.5)}hr{width:100%;height:2px;background:rgba(var(--main-inverted-color),.5);border:none}div.bottom-container hr{background:rgba(var(--main-bg-color),.5)}div.value-row>hr,td>hr{width:calc(100% + 2px);margin:0 0 0 -1px}nav{z-index:100;width:calc(100% - 8px);max-width:calc(var(--max-width-page-size,none) - 8px);overflow:hidden;padding:14px 4px 4px;background-color:var(--main-bg-color-rgba,#00f);top:0;position:var(--state-of-navbar-toggle,fixed);box-shadow:0 10px 10px -10px rgba(var(--main-inverted-color),.5);border-bottom:2px solid rgba(var(--main-inverted-color),.5)}ul.nav{display:flex;padding:0;margin:auto;list-style:none}ul.nav-small-screen{list-style:none;position:absolute;top:calc(.4 * var(--default-height-size,20) + 20px);padding-inline-start:4px}li.nav{position:relative}li.nav-middle-area{z-index:5;margin-top:4px;margin-left:auto;margin-right:auto}div.nav{transition:all .3s;cursor:pointer;padding:2px 5px calc(1.4 * var(--default-height-size,20) + 20px);background:var(--main-bg-color-rgba,#00f);overflow:hidden;margin-right:3px;margin-left:3px;border:2px solid rgba(var(--main-inverted-color),.5);border-radius:calc(.5 * var(--default-height-size,20)/ var(--button-radius-size,2)) calc(.5 * var(--default-height-size,20)/ var(--button-radius-size,2)) calc(0 * var(--default-height-size,20)/ var(--button-radius-size,2)) calc(0 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.nav-group{display:flex}div.nav-selected{box-shadow:inset 0 calc(1.4 * var(--default-height-size,20) + 20px) calc(1.4 * var(--default-height-size,20) + 20px) rgba(var(--main-inverted-color),.75)}div.nav{display:flex}div.nav.icon>div.tab-text,div.nav.text>div.tab-icon{display:none}div.nav.text>div.tab-text{display:block}div.bottom-tab>svg,div.nav.icon>div.tab-icon{display:block}div.bottom-tab>svg,div.nav.text>div.tab-icon{margin-right:4px}div.tab-icon>svg{width:calc(1 * var(--default-height-size,20));transform:translateY(calc(.1 * var(--default-height-size,20)))}progress{width:100%;height:calc(1.5 * var(--default-height-size,20));background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));padding:calc(.2 * var(--default-height-size,20)) calc(.2 * var(--default-height-size,20)) calc(.2 * var(--default-height-size,20))}progress[value]::-webkit-progress-value{background-color:var(--main-success-color-rgba);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}progress[value]::-webkit-progress-bar{background-color:rgba(var(--main-bg-color),.5);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}progress.is-small{height:calc(.8 * var(--default-height-size,20) + 2px)}progress[value].main-info::-webkit-progress-value{background-color:var(--main-info-color-rgba)}progress[value].main-warning::-webkit-progress-value{background-color:var(--main-warning-color-rgba)}progress[value].main-sunny::-webkit-progress-value{background-color:var(--main-sunny-color-rgba)}progress[value].main-inverted::-webkit-progress-value{background-color:var(--main-inverted-color-rgba)}button,input,input[type=range],label,progress,select,textarea{font-family:var(--default-font-family, '"Segoe UI",Calibri,Arial');border:2px solid var(--main-bg-color-rgba,#00f);cursor:pointer;display:flex}button{background:var(--main-bg-color-rgba,#00f);color:var(--main-font-color-rgba,#fff);font-size:calc(1.1 * var(--default-font-size,19pt));display:inline-block;padding:0 calc(.3 * var(--default-height-size,20)) calc(.1 * var(--default-height-size,20));border:2px solid rgba(var(--main-font-color),.75);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.row>button{margin-right:4px;margin-bottom:4px}div.menu{position:sticky;bottom:8px;padding:30px;float:right;z-index:19999;overflow:visible;display:flex;flex-flow:column-reverse;height:calc(2 * var(--default-height-size,20) + 3px)}button>svg{transform:translateY(4px)}button.menu-action>svg.action>path{fill:rgba(var(--main-font-color),.5)}button.menu-action.open>svg.action>path{fill:rgba(var(--main-font-color),.9)}div.icon-button{display:flex;flex-flow:column-reverse}button.dash-button,button.icon-button,div.icon-button>button{content:'';margin-top:8px;position:relative;height:calc(2.5 * var(--default-height-size,20) + 3px);width:calc(2.5 * var(--default-height-size,20) + 3px);border:2px solid rgba(var(--main-inverted-color),.2);border-radius:calc(2.5 * var(--default-height-size,20)/ var(--button-radius-size,2));box-shadow:0 3px 6px rgba(var(--main-inverted-color),.25),0 3px 6px rgba(var(--main-inverted-color),.35);z-index:750;transition:all 250ms}button.dash-button{z-index:50}div.icon-button.closed>button:not(.icon-button){transform:rotateY(90deg);overflow:hidden;opacity:0}button.icon-button.is-inactive:hover{background:rgba(var(--main-inverted-color),.5)}button.menu-action:not(.is-inactive){margin-top:calc(1px * (25 - 10 / var(--button-radius-size,1)));transform:rotate(45deg)}div.closed{pointer-events:none}.icon-button>button.got-tooltip{overflow:visible;cursor:pointer}.icon-button div.tooltip>div.text{float:right;border:2px solid var(--main-inverted-color-rgba);background-color:var(--main-inverted-color-rgba);padding:4px 6px 6px;border-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2))}.icon-button button.got-tooltip::after{display:none}.icon-button button.got-tooltip>div.tooltip{transform:translateY(-60%) translateX(-135%);width:calc(5 * var(--default-height-size,20) + 3px);border:none;background:0 0}.icon-button button.got-tooltip>div.tooltip::after{right:-6px;left:unset;top:37%;border-color:transparent transparent transparent var(--main-inverted-color-rgba)}button.got-badge::after{transform:translateX(calc(.4 * var(--default-height-size,20))) translateY(calc(-.7 * var(--default-height-size,20)));content:attr(data-badge-value);position:absolute;z-index:751;background:var(--main-inverted-color-rgba,grey);color:rgba(var(--main-font-color),.7);border-radius:calc(.95 * var(--default-height-size,20)/ var(--button-radius-size,2));min-width:calc(.5 * var(--default-height-size,20) + 3px);padding:0 3px 2px;font-size:calc(.7 * var(--default-font-size,19pt));transition:all 250ms ease-in}button.menu-action:not(.is-inactive)::after{margin-top:calc(1px * (-27 - 10 / var(--button-radius-size,1)));margin-left:calc(1px * (27 - 10 / var(--button-radius-size,1)));transform:rotate(-45deg)}button.got-badge[data-badge-value=""]:after{display:none}button.badge-color-sunny.got-badge:after{background:var(--main-sunny-color-rgba,#ff0)}button.badge-color-info.got-badge:after{background:var(--main-info-color-rgba,orange)}button.badge-color-warning.got-badge:after{background:var(--main-warning-color-rgba,red)}button.badge-color-success.got-badge:after{background:var(--main-success-color-rgba,green)}button.badge-color-font.got-badge:after{background:var(--main-font-color-rgba,#fff);color:rgba(var(--main-inverted-color),.7)}div.group-container{margin-top:calc(1 * var(--default-height-size,20) + 3px)}div.group-container>hr{margin-top:3px;margin-bottom:3px}div.box-container{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap}div.dash-box{display:block;margin:6px}div.dash-text{margin-top:3px}button.help-link{content:'';position:relative;font-size:calc(1.2 * var(--default-font-size,19pt));font-weight:700;height:calc(1 * var(--default-height-size,20) + 3px);width:calc(1 * var(--default-height-size,20) + 3px);background:var(--main-info-color-rgba,orange);color:rgba(var(--main-inverted-color),.7);border:2px solid rgba(var(--main-inverted-color),.2)}button.help-link::before{content:'?';position:absolute;top:50%;right:50%;transform:translateX(50%) translateY(-53%)}button.main-bg{background:var(--main-bg-color-rgba,#00f);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}button.main-font{background:var(--main-font-color-rgba,#fff);color:var(--main-bg-color-rgba,#00f);border:2px solid rgba(var(--main-inverted-color),.2)}button.main-inverted{background:rgba(var(--main-inverted-color),.3);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}div.bottom-container button.main-inverted,div.modal button.main-inverted{border-color:rgba(var(--main-bg-color),.2)}button.main-warning{background:var(--main-warning-color-rgba,red);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}button.main-info{background:var(--main-info-color-rgba,orange);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}button.main-success{background:var(--main-success-color-rgba,green);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}button.main-sunny{background:var(--main-sunny-color-rgba,#ff0);color:var(--main-font-color-rgba,#fff);border:2px solid rgba(var(--main-inverted-color),.2)}button.is-inactive{background:rgba(var(--main-inverted-color),.1);color:rgba(var(--main-font-color),.2);border:2px solid rgba(var(--main-inverted-color),.1)}button.is-auto-size{margin:auto}button.icon-button.pending-save:hover,button.pending-save{color:red;background:rgba(var(--main-success-color),.95)}td>button:last-child{margin:2px 2px 1px 2px}td>button:first-child{margin:1px 2px 2px 2px}.modal-table button.file-action{height:calc(1.45 * var(--default-height-size,20) + 3px);width:calc(1.45 * var(--default-height-size,20) + 3px);margin-left:calc(-1.45 * var(--default-height-size,20) + 3px)}div.area-title>button{border-color:rgba(var(--main-inverted-color),.25);color:var(--main-font-color-rgba,#fff);position:absolute;height:calc(1.45 * var(--default-height-size,20) + 3px);width:calc(1.45 * var(--default-height-size,20) + 3px);font-size:calc(.9 * var(--default-font-size,19pt));right:0;top:0}div.area-title>button.left{left:0}div.area-title>button>svg{transform:translateY(3px)}div.modal{position:fixed;z-index:9999;left:0;top:0;width:calc(100% + 1px);height:100%;overflow:auto;background-color:rgba(0,0,0,.8)}div.modal.is-black{background-color:rgba(0,0,0,1);color:rgba(0,0,0,1)}div.modal.is-black>div.spinner-box{display:flex;height:95%;width:99%}div.modal.is-black>div.message,div.modal.is-black~div.page-contents{display:none}div.modal>div.message{position:absolute;top:35%;left:50%;transform:translate(-50%,-35%);min-width:400px;max-height:80vh;border-radius:calc(.25 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.modal div.area,div.modal div.area-title{border-radius:inherit}div.row[id^=modal-]{max-height:60vh;overflow-scrolling:auto;overflow-x:hidden}div.row[id^=modal-]:after,div.row[id^=modal-]:before{content:".";display:block;height:0;overflow:hidden}div.row[id^=modal-]:after{clear:both}div.spinner-box:not(.is-hidden)~div.loading-screen{display:none}div.modal>div.loading-screen{color:var(--main-font-color-rgba,#fff);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw}div.loading-log{color:var(--main-font-color-rgba,#fff);min-height:40vh;margin-top:10px;font-size:calc(.75 * var(--default-font-size,19pt))}div.loading-log>.loading-is-done{animation:fadeGone 3s ease-in forwards}div.row[id*=modal-buttons]{justify-content:space-evenly;margin:unset}div.row[id*=modal-buttons]>button{margin-top:3px}div.message input.range{width:100%}div.message>div.area{background:rgba(var(--main-inverted-color),.5)}div.message>div.area.main-sunny{background:var(--main-sunny-color-rgba,#ff0)}div.message>div.area.main-success{background:var(--main-success-color-rgba,green)}div.message>div.area.main-info{background:var(--main-info-color-rgba,orange)}div.message>div.area.main-warning{background:var(--main-warning-color-rgba,red)}div.wave-background{pointer-events:none;z-index:10000;top:0;left:0;width:100%;height:100%;position:fixed;opacity:.9;transition:all .2s ease-in-out}div.wave-background.is-inactive{opacity:0}div.wave-text{font-size:calc(2 * var(--default-font-size,19pt));position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}div.wave-text>svg{height:calc(4 * var(--default-height-size,20))}div.weblog{width:calc(100% - 14px);min-height:70vh;max-height:70vh;text-align:left;font-size:calc(.8 * var(--default-font-size,19pt));overflow-y:scroll;display:block;margin:2px 4px 4px;padding:1px;border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2));border:2px solid rgba(var(--main-inverted-color),.35);background:rgba(0,0 ,0 ,.55)}div.weblog::-webkit-scrollbar,textarea::-webkit-scrollbar{width:12px}div.weblog::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{max-height:5%;border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2));background:rgba(var(--main-bg-color),.5)}div.tag{display:inline-block;padding:0 6px 2px 6px;font-size:calc(.6 * var(--default-font-size,19pt));border:2px solid var(--main-bg-color-rgba,#00f);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));background:var(--main-inverted-color-rgba);color:var(--main-bg-color-rgba,#00f)}div.tag.with-close{cursor:pointer;padding-right:5px;background:var(--main-font-color-rgba,#fff);color:var(--main-bg-color-rgba,#00f)}div.tag.with-close::after{content:"\a0\00d7";font-weight:bolder}div.tag.with-close:hover::after{color:rgba(var(--main-inverted-color),.9)}progress,textarea{cursor:auto}input:checked+label{background:var(--main-inverted-color-rgba)}div.modal input[type=checkbox]:checked+label:hover{background:rgba(var(--main-font-color),.1)}div.modal input[type=checkbox]+label:hover{background:rgba(var(--main-font-color),.9)}div.modal input[type=checkbox]:checked+label:active,div.modal input[type=checkbox]:checked+label:focus,div.modal input[type=checkbox]:checked+label:hover{border-color:rgba(var(--main-bg-color),.5)}div.modal input[type=checkbox]+label:active,div.modal input[type=checkbox]+label:focus{border-color:var(--main-bg-color-rgba)}input[type=checkbox],input[type=color],input[type=file],input[type=radio]{display:none;background:0 0}input[type=range]{-webkit-appearance:none;margin:.025em;width:calc(6.4 * var(--default-height-size,20));height:calc(1 * var(--default-height-size,20));background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));padding:calc(.2 * var(--default-height-size,20)) calc(.2 * var(--default-height-size,20)) calc(.2 * var(--default-height-size,20))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;padding:calc(.5 * var(--default-height-size,20));border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));background:var(--main-bg-color-rgba,#00f);box-shadow:-1px 0 0 2px var(--main-font-color-rgba),-2px 0 0 2px var(--main-font-color-rgba),-3px 0 0 0 var(--main-inverted-color-rgba),-4px 0 0 0 var(--main-inverted-color-rgba),-5px 0 0 0 var(--main-inverted-color-rgba),-6px 0 0 0 var(--main-inverted-color-rgba),-7px 0 0 0 var(--main-inverted-color-rgba),-8px 0 0 0 var(--main-inverted-color-rgba),-9px 0 0 0 var(--main-inverted-color-rgba),-10px 0 0 0 var(--main-inverted-color-rgba),-11px 0 0 0 var(--main-inverted-color-rgba),-12px 0 0 0 var(--main-inverted-color-rgba),-13px 0 0 0 var(--main-inverted-color-rgba),-14px 0 0 0 var(--main-inverted-color-rgba),-15px 0 0 0 var(--main-inverted-color-rgba),-16px 0 0 0 var(--main-inverted-color-rgba),-17px 0 0 0 var(--main-inverted-color-rgba),-18px 0 0 0 var(--main-inverted-color-rgba),-19px 0 0 0 var(--main-inverted-color-rgba),-20px 0 0 0 var(--main-inverted-color-rgba),-21px 0 0 0 var(--main-inverted-color-rgba),-22px 0 0 0 var(--main-inverted-color-rgba),-23px 0 0 0 var(--main-inverted-color-rgba),-24px 0 0 0 var(--main-inverted-color-rgba),-25px 0 0 0 var(--main-inverted-color-rgba),-26px 0 0 0 var(--main-inverted-color-rgba),-27px 0 0 0 var(--main-inverted-color-rgba),-28px 0 0 0 var(--main-inverted-color-rgba),-29px 0 0 0 var(--main-inverted-color-rgba),-30px 0 0 0 var(--main-inverted-color-rgba),-31px 0 0 0 var(--main-inverted-color-rgba),-32px 0 0 0 var(--main-inverted-color-rgba),-33px 0 0 0 var(--main-inverted-color-rgba),-34px 0 0 0 var(--main-inverted-color-rgba),-35px 0 0 0 var(--main-inverted-color-rgba),-36px 0 0 0 var(--main-inverted-color-rgba),-37px 0 0 0 var(--main-inverted-color-rgba),-38px 0 0 0 var(--main-inverted-color-rgba),-39px 0 0 0 var(--main-inverted-color-rgba),-40px 0 0 0 var(--main-inverted-color-rgba),-41px 0 0 0 var(--main-inverted-color-rgba),-42px 0 0 0 var(--main-inverted-color-rgba),-43px 0 0 0 var(--main-inverted-color-rgba),-44px 0 0 0 var(--main-inverted-color-rgba),-45px 0 0 0 var(--main-inverted-color-rgba),-46px 0 0 0 var(--main-inverted-color-rgba),-47px 0 0 0 var(--main-inverted-color-rgba),-48px 0 0 0 var(--main-inverted-color-rgba),-49px 0 0 0 var(--main-inverted-color-rgba),-50px 0 0 0 var(--main-inverted-color-rgba),-51px 0 0 0 var(--main-inverted-color-rgba),-52px 0 0 0 var(--main-inverted-color-rgba),-53px 0 0 0 var(--main-inverted-color-rgba),-54px 0 0 0 var(--main-inverted-color-rgba),-55px 0 0 0 var(--main-inverted-color-rgba),-56px 0 0 0 var(--main-inverted-color-rgba),-57px 0 0 0 var(--main-inverted-color-rgba),-58px 0 0 0 var(--main-inverted-color-rgba),-59px 0 0 0 var(--main-inverted-color-rgba),-60px 0 0 0 var(--main-inverted-color-rgba),-61px 0 0 0 var(--main-inverted-color-rgba),-62px 0 0 0 var(--main-inverted-color-rgba),-63px 0 0 0 var(--main-inverted-color-rgba),-64px 0 0 0 var(--main-inverted-color-rgba),-65px 0 0 0 var(--main-inverted-color-rgba),-66px 0 0 0 var(--main-inverted-color-rgba),-67px 0 0 0 var(--main-inverted-color-rgba),-68px 0 0 0 var(--main-inverted-color-rgba),-69px 0 0 0 var(--main-inverted-color-rgba),-70px 0 0 0 var(--main-inverted-color-rgba),-71px 0 0 0 var(--main-inverted-color-rgba),-72px 0 0 0 var(--main-inverted-color-rgba),-73px 0 0 0 var(--main-inverted-color-rgba),-74px 0 0 0 var(--main-inverted-color-rgba),-75px 0 0 0 var(--main-inverted-color-rgba),-76px 0 0 0 var(--main-inverted-color-rgba),-77px 0 0 0 var(--main-inverted-color-rgba),-78px 0 0 0 var(--main-inverted-color-rgba),-79px 0 0 0 var(--main-inverted-color-rgba),-80px 0 0 0 var(--main-inverted-color-rgba),-81px 0 0 0 var(--main-inverted-color-rgba),-82px 0 0 0 var(--main-inverted-color-rgba),-83px 0 0 0 var(--main-inverted-color-rgba),-84px 0 0 0 var(--main-inverted-color-rgba),-85px 0 0 0 var(--main-inverted-color-rgba),-86px 0 0 0 var(--main-inverted-color-rgba),-87px 0 0 0 var(--main-inverted-color-rgba),-88px 0 0 0 var(--main-inverted-color-rgba),-89px 0 0 0 var(--main-inverted-color-rgba),-90px 0 0 0 var(--main-inverted-color-rgba),-91px 0 0 0 var(--main-inverted-color-rgba),-92px 0 0 0 var(--main-inverted-color-rgba),-93px 0 0 0 var(--main-inverted-color-rgba),-94px 0 0 0 var(--main-inverted-color-rgba),-95px 0 0 0 var(--main-inverted-color-rgba),-96px 0 0 0 var(--main-inverted-color-rgba),-97px 0 0 0 var(--main-inverted-color-rgba),-98px 0 0 0 var(--main-inverted-color-rgba),-99px 0 0 0 var(--main-inverted-color-rgba),-100px 0 0 0 var(--main-inverted-color-rgba),-101px 0 0 0 var(--main-inverted-color-rgba),-102px 0 0 0 var(--main-inverted-color-rgba),-103px 0 0 0 var(--main-inverted-color-rgba),-104px 0 0 0 var(--main-inverted-color-rgba),-105px 0 0 0 var(--main-inverted-color-rgba),-106px 0 0 0 var(--main-inverted-color-rgba),-107px 0 0 0 var(--main-inverted-color-rgba),-108px 0 0 0 var(--main-inverted-color-rgba),-109px 0 0 0 var(--main-inverted-color-rgba),-110px 0 0 0 var(--main-inverted-color-rgba),-111px 0 0 0 var(--main-inverted-color-rgba),-112px 0 0 0 var(--main-inverted-color-rgba),-113px 0 0 0 var(--main-inverted-color-rgba),-114px 0 0 0 var(--main-inverted-color-rgba),-115px 0 0 0 var(--main-inverted-color-rgba),-116px 0 0 0 var(--main-inverted-color-rgba),-117px 0 0 0 var(--main-inverted-color-rgba),-118px 0 0 0 var(--main-inverted-color-rgba),-119px 0 0 0 var(--main-inverted-color-rgba),-120px 0 0 0 var(--main-inverted-color-rgba),-121px 0 0 0 var(--main-inverted-color-rgba),-122px 0 0 0 var(--main-inverted-color-rgba),-123px 0 0 0 var(--main-inverted-color-rgba),-124px 0 0 0 var(--main-inverted-color-rgba),-125px 0 0 0 var(--main-inverted-color-rgba),-126px 0 0 0 var(--main-inverted-color-rgba),-127px 0 0 0 var(--main-inverted-color-rgba),-128px 0 0 0 var(--main-inverted-color-rgba),-129px 0 0 0 var(--main-inverted-color-rgba),-130px 0 0 0 var(--main-inverted-color-rgba),-131px 0 0 0 var(--main-inverted-color-rgba),-132px 0 0 0 var(--main-inverted-color-rgba),-133px 0 0 0 var(--main-inverted-color-rgba),-134px 0 0 0 var(--main-inverted-color-rgba),-135px 0 0 0 var(--main-inverted-color-rgba),-136px 0 0 0 var(--main-inverted-color-rgba),-137px 0 0 0 var(--main-inverted-color-rgba),-138px 0 0 0 var(--main-inverted-color-rgba),-139px 0 0 0 var(--main-inverted-color-rgba),-140px 0 0 0 var(--main-inverted-color-rgba),-141px 0 0 0 var(--main-inverted-color-rgba),-142px 0 0 0 var(--main-inverted-color-rgba),-143px 0 0 0 var(--main-inverted-color-rgba),-144px 0 0 0 var(--main-inverted-color-rgba),-145px 0 0 0 var(--main-inverted-color-rgba),-146px 0 0 0 var(--main-inverted-color-rgba),-147px 0 0 0 var(--main-inverted-color-rgba),-148px 0 0 0 var(--main-inverted-color-rgba),-149px 0 0 0 var(--main-inverted-color-rgba),-150px 0 0 0 var(--main-inverted-color-rgba),-151px 0 0 0 var(--main-inverted-color-rgba),-152px 0 0 0 var(--main-inverted-color-rgba),-153px 0 0 0 var(--main-inverted-color-rgba),-154px 0 0 0 var(--main-inverted-color-rgba),-155px 0 0 0 var(--main-inverted-color-rgba),-156px 0 0 0 var(--main-inverted-color-rgba),-157px 0 0 0 var(--main-inverted-color-rgba),-158px 0 0 0 var(--main-inverted-color-rgba),-159px 0 0 0 var(--main-inverted-color-rgba),-160px 0 0 0 var(--main-inverted-color-rgba),-161px 0 0 0 var(--main-inverted-color-rgba),-162px 0 0 0 var(--main-inverted-color-rgba),-163px 0 0 0 var(--main-inverted-color-rgba),-164px 0 0 0 var(--main-inverted-color-rgba),-165px 0 0 0 var(--main-inverted-color-rgba),-166px 0 0 0 var(--main-inverted-color-rgba),-167px 0 0 0 var(--main-inverted-color-rgba),-168px 0 0 0 var(--main-inverted-color-rgba),-169px 0 0 0 var(--main-inverted-color-rgba),-170px 0 0 0 var(--main-inverted-color-rgba),-171px 0 0 0 var(--main-inverted-color-rgba),-172px 0 0 0 var(--main-inverted-color-rgba),-173px 0 0 0 var(--main-inverted-color-rgba),-174px 0 0 0 var(--main-inverted-color-rgba),-175px 0 0 0 var(--main-inverted-color-rgba),-176px 0 0 0 var(--main-inverted-color-rgba),-177px 0 0 0 var(--main-inverted-color-rgba),-178px 0 0 0 var(--main-inverted-color-rgba),-179px 0 0 0 var(--main-inverted-color-rgba),-180px 0 0 0 var(--main-inverted-color-rgba),-181px 0 0 0 var(--main-inverted-color-rgba),-182px 0 0 0 var(--main-inverted-color-rgba),-183px 0 0 0 var(--main-inverted-color-rgba),-184px 0 0 0 var(--main-inverted-color-rgba),-185px 0 0 0 var(--main-inverted-color-rgba),-186px 0 0 0 var(--main-inverted-color-rgba),-187px 0 0 0 var(--main-inverted-color-rgba),-188px 0 0 0 var(--main-inverted-color-rgba),-189px 0 0 0 var(--main-inverted-color-rgba),-190px 0 0 0 var(--main-inverted-color-rgba),-191px 0 0 0 var(--main-inverted-color-rgba),-192px 0 0 0 var(--main-inverted-color-rgba),-193px 0 0 0 var(--main-inverted-color-rgba),-194px 0 0 0 var(--main-inverted-color-rgba),-195px 0 0 0 var(--main-inverted-color-rgba),-196px 0 0 0 var(--main-inverted-color-rgba),-197px 0 0 0 var(--main-inverted-color-rgba),-198px 0 0 0 var(--main-inverted-color-rgba),-199px 0 0 0 var(--main-inverted-color-rgba),-200px 0 0 0 var(--main-inverted-color-rgba),-201px 0 0 0 var(--main-inverted-color-rgba),-202px 0 0 0 var(--main-inverted-color-rgba),-203px 0 0 0 var(--main-inverted-color-rgba),-204px 0 0 0 var(--main-inverted-color-rgba),-205px 0 0 0 var(--main-inverted-color-rgba),-206px 0 0 0 var(--main-inverted-color-rgba),-207px 0 0 0 var(--main-inverted-color-rgba),-208px 0 0 0 var(--main-inverted-color-rgba),-209px 0 0 0 var(--main-inverted-color-rgba),-210px 0 0 0 var(--main-inverted-color-rgba),-211px 0 0 0 var(--main-inverted-color-rgba),-212px 0 0 0 var(--main-inverted-color-rgba),-213px 0 0 0 var(--main-inverted-color-rgba),-214px 0 0 0 var(--main-inverted-color-rgba),-215px 0 0 0 var(--main-inverted-color-rgba),-216px 0 0 0 var(--main-inverted-color-rgba),-217px 0 0 0 var(--main-inverted-color-rgba),-218px 0 0 0 var(--main-inverted-color-rgba),-219px 0 0 0 var(--main-inverted-color-rgba),-220px 0 0 0 var(--main-inverted-color-rgba),-221px 0 0 0 var(--main-inverted-color-rgba),-222px 0 0 0 var(--main-inverted-color-rgba),-223px 0 0 0 var(--main-inverted-color-rgba),-224px 0 0 0 var(--main-inverted-color-rgba),-225px 0 0 0 var(--main-inverted-color-rgba),-226px 0 0 0 var(--main-inverted-color-rgba),-227px 0 0 0 var(--main-inverted-color-rgba),-228px 0 0 0 var(--main-inverted-color-rgba),-229px 0 0 0 var(--main-inverted-color-rgba),-230px 0 0 0 var(--main-inverted-color-rgba),-231px 0 0 0 var(--main-inverted-color-rgba),-232px 0 0 0 var(--main-inverted-color-rgba),-233px 0 0 0 var(--main-inverted-color-rgba),-234px 0 0 0 var(--main-inverted-color-rgba),-235px 0 0 0 var(--main-inverted-color-rgba),-236px 0 0 0 var(--main-inverted-color-rgba),-237px 0 0 0 var(--main-inverted-color-rgba),-238px 0 0 0 var(--main-inverted-color-rgba),-239px 0 0 0 var(--main-inverted-color-rgba),-240px 0 0 0 var(--main-inverted-color-rgba),-241px 0 0 0 var(--main-inverted-color-rgba),-242px 0 0 0 var(--main-inverted-color-rgba),-243px 0 0 0 var(--main-inverted-color-rgba),-244px 0 0 0 var(--main-inverted-color-rgba),-245px 0 0 0 var(--main-inverted-color-rgba),-246px 0 0 0 var(--main-inverted-color-rgba),-247px 0 0 0 var(--main-inverted-color-rgba),-248px 0 0 0 var(--main-inverted-color-rgba),-249px 0 0 0 var(--main-inverted-color-rgba),-250px 0 0 0 var(--main-inverted-color-rgba),-251px 0 0 0 var(--main-inverted-color-rgba),-252px 0 0 0 var(--main-inverted-color-rgba),-253px 0 0 0 var(--main-inverted-color-rgba),-254px 0 0 0 var(--main-inverted-color-rgba),-255px 0 0 0 var(--main-inverted-color-rgba),-256px 0 0 0 var(--main-inverted-color-rgba),-257px 0 0 0 var(--main-inverted-color-rgba),-258px 0 0 0 var(--main-inverted-color-rgba),-259px 0 0 0 var(--main-inverted-color-rgba),-260px 0 0 0 var(--main-inverted-color-rgba),-261px 0 0 0 var(--main-inverted-color-rgba),-262px 0 0 0 var(--main-inverted-color-rgba),-263px 0 0 0 var(--main-inverted-color-rgba),-264px 0 0 0 var(--main-inverted-color-rgba),-265px 0 0 0 var(--main-inverted-color-rgba),-266px 0 0 0 var(--main-inverted-color-rgba),-267px 0 0 0 var(--main-inverted-color-rgba),-268px 0 0 0 var(--main-inverted-color-rgba),-269px 0 0 0 var(--main-inverted-color-rgba),-270px 0 0 0 var(--main-inverted-color-rgba),-271px 0 0 0 var(--main-inverted-color-rgba),-272px 0 0 0 var(--main-inverted-color-rgba),-273px 0 0 0 var(--main-inverted-color-rgba),-274px 0 0 0 var(--main-inverted-color-rgba),-275px 0 0 0 var(--main-inverted-color-rgba),-276px 0 0 0 var(--main-inverted-color-rgba),-277px 0 0 0 var(--main-inverted-color-rgba),-278px 0 0 0 var(--main-inverted-color-rgba),-279px 0 0 0 var(--main-inverted-color-rgba),-280px 0 0 0 var(--main-inverted-color-rgba),-281px 0 0 0 var(--main-inverted-color-rgba),-282px 0 0 0 var(--main-inverted-color-rgba),-283px 0 0 0 var(--main-inverted-color-rgba),-284px 0 0 0 var(--main-inverted-color-rgba),-285px 0 0 0 var(--main-inverted-color-rgba),-286px 0 0 0 var(--main-inverted-color-rgba),-287px 0 0 0 var(--main-inverted-color-rgba),-288px 0 0 0 var(--main-inverted-color-rgba),-289px 0 0 0 var(--main-inverted-color-rgba),-290px 0 0 0 var(--main-inverted-color-rgba),-291px 0 0 0 var(--main-inverted-color-rgba),-292px 0 0 0 var(--main-inverted-color-rgba),-293px 0 0 0 var(--main-inverted-color-rgba),-294px 0 0 0 var(--main-inverted-color-rgba),-295px 0 0 0 var(--main-inverted-color-rgba),-296px 0 0 0 var(--main-inverted-color-rgba),-297px 0 0 0 var(--main-inverted-color-rgba),-298px 0 0 0 var(--main-inverted-color-rgba),-299px 0 0 0 var(--main-inverted-color-rgba),-300px 0 0 0 var(--main-inverted-color-rgba),-301px 0 0 0 var(--main-inverted-color-rgba),-302px 0 0 0 var(--main-inverted-color-rgba),-303px 0 0 0 var(--main-inverted-color-rgba),-304px 0 0 0 var(--main-inverted-color-rgba),-305px 0 0 0 var(--main-inverted-color-rgba),-306px 0 0 0 var(--main-inverted-color-rgba),-307px 0 0 0 var(--main-inverted-color-rgba),-308px 0 0 0 var(--main-inverted-color-rgba),-309px 0 0 0 var(--main-inverted-color-rgba),-310px 0 0 0 var(--main-inverted-color-rgba),-311px 0 0 0 var(--main-inverted-color-rgba),-312px 0 0 0 var(--main-inverted-color-rgba),-313px 0 0 0 var(--main-inverted-color-rgba),-314px 0 0 0 var(--main-inverted-color-rgba),-315px 0 0 0 var(--main-inverted-color-rgba),-316px 0 0 0 var(--main-inverted-color-rgba),-317px 0 0 0 var(--main-inverted-color-rgba),-318px 0 0 0 var(--main-inverted-color-rgba),-319px 0 0 0 var(--main-inverted-color-rgba),-320px 0 0 0 var(--main-inverted-color-rgba),-321px 0 0 0 var(--main-inverted-color-rgba),-322px 0 0 0 var(--main-inverted-color-rgba),-323px 0 0 0 var(--main-inverted-color-rgba),-324px 0 0 0 var(--main-inverted-color-rgba),-325px 0 0 0 var(--main-inverted-color-rgba),-326px 0 0 0 var(--main-inverted-color-rgba),-327px 0 0 0 var(--main-inverted-color-rgba),-328px 0 0 0 var(--main-inverted-color-rgba),-329px 0 0 0 var(--main-inverted-color-rgba),-330px 0 0 0 var(--main-inverted-color-rgba),-331px 0 0 0 var(--main-inverted-color-rgba),-332px 0 0 0 var(--main-inverted-color-rgba),-333px 0 0 0 var(--main-inverted-color-rgba),-334px 0 0 0 var(--main-inverted-color-rgba),-335px 0 0 0 var(--main-inverted-color-rgba),-336px 0 0 0 var(--main-inverted-color-rgba),-337px 0 0 0 var(--main-inverted-color-rgba),-338px 0 0 0 var(--main-inverted-color-rgba),-339px 0 0 0 var(--main-inverted-color-rgba),-340px 0 0 0 var(--main-inverted-color-rgba),-341px 0 0 0 var(--main-inverted-color-rgba),-342px 0 0 0 var(--main-inverted-color-rgba),-343px 0 0 0 var(--main-inverted-color-rgba),-344px 0 0 0 var(--main-inverted-color-rgba),-345px 0 0 0 var(--main-inverted-color-rgba),-346px 0 0 0 var(--main-inverted-color-rgba),-347px 0 0 0 var(--main-inverted-color-rgba),-348px 0 0 0 var(--main-inverted-color-rgba),-349px 0 0 0 var(--main-inverted-color-rgba),-350px 0 0 0 var(--main-inverted-color-rgba),-351px 0 0 0 var(--main-inverted-color-rgba),-352px 0 0 0 var(--main-inverted-color-rgba),-353px 0 0 0 var(--main-inverted-color-rgba),-354px 0 0 0 var(--main-inverted-color-rgba),-355px 0 0 0 var(--main-inverted-color-rgba),-356px 0 0 0 var(--main-inverted-color-rgba),-357px 0 0 0 var(--main-inverted-color-rgba),-358px 0 0 0 var(--main-inverted-color-rgba),-359px 0 0 0 var(--main-inverted-color-rgba),-360px 0 0 0 var(--main-inverted-color-rgba),-361px 0 0 0 var(--main-inverted-color-rgba),-362px 0 0 0 var(--main-inverted-color-rgba),-363px 0 0 0 var(--main-inverted-color-rgba),-364px 0 0 0 var(--main-inverted-color-rgba),-365px 0 0 0 var(--main-inverted-color-rgba),-366px 0 0 0 var(--main-inverted-color-rgba),-367px 0 0 0 var(--main-inverted-color-rgba),-368px 0 0 0 var(--main-inverted-color-rgba),-369px 0 0 0 var(--main-inverted-color-rgba),-370px 0 0 0 var(--main-inverted-color-rgba),-371px 0 0 0 var(--main-inverted-color-rgba),-372px 0 0 0 var(--main-inverted-color-rgba),-373px 0 0 0 var(--main-inverted-color-rgba),-374px 0 0 0 var(--main-inverted-color-rgba),-375px 0 0 0 var(--main-inverted-color-rgba),-376px 0 0 0 var(--main-inverted-color-rgba),-377px 0 0 0 var(--main-inverted-color-rgba),-378px 0 0 0 var(--main-inverted-color-rgba),-379px 0 0 0 var(--main-inverted-color-rgba),-380px 0 0 0 var(--main-inverted-color-rgba),-381px 0 0 0 var(--main-inverted-color-rgba),-382px 0 0 0 var(--main-inverted-color-rgba),-383px 0 0 0 var(--main-inverted-color-rgba),-384px 0 0 0 var(--main-inverted-color-rgba),-385px 0 0 0 var(--main-inverted-color-rgba),-386px 0 0 0 var(--main-inverted-color-rgba),-387px 0 0 0 var(--main-inverted-color-rgba),-388px 0 0 0 var(--main-inverted-color-rgba),-389px 0 0 0 var(--main-inverted-color-rgba),-390px 0 0 0 var(--main-inverted-color-rgba),-391px 0 0 0 var(--main-inverted-color-rgba),-392px 0 0 0 var(--main-inverted-color-rgba),-393px 0 0 0 var(--main-inverted-color-rgba),-394px 0 0 0 var(--main-inverted-color-rgba),-395px 0 0 0 var(--main-inverted-color-rgba),-396px 0 0 0 var(--main-inverted-color-rgba),-397px 0 0 0 var(--main-inverted-color-rgba),-398px 0 0 0 var(--main-inverted-color-rgba),-399px 0 0 0 var(--main-inverted-color-rgba),-400px 0 0 0 var(--main-inverted-color-rgba),-401px 0 0 0 var(--main-inverted-color-rgba),-402px 0 0 0 var(--main-inverted-color-rgba),-403px 0 0 0 var(--main-inverted-color-rgba),-404px 0 0 0 var(--main-inverted-color-rgba),-405px 0 0 0 var(--main-inverted-color-rgba),-406px 0 0 0 var(--main-inverted-color-rgba),-407px 0 0 0 var(--main-inverted-color-rgba),-408px 0 0 0 var(--main-inverted-color-rgba),-409px 0 0 0 var(--main-inverted-color-rgba),-410px 0 0 0 var(--main-inverted-color-rgba),-411px 0 0 0 var(--main-inverted-color-rgba),-412px 0 0 0 var(--main-inverted-color-rgba),-413px 0 0 0 var(--main-inverted-color-rgba),-414px 0 0 0 var(--main-inverted-color-rgba),-415px 0 0 0 var(--main-inverted-color-rgba),-416px 0 0 0 var(--main-inverted-color-rgba),-417px 0 0 0 var(--main-inverted-color-rgba),-418px 0 0 0 var(--main-inverted-color-rgba),-419px 0 0 0 var(--main-inverted-color-rgba),-420px 0 0 0 var(--main-inverted-color-rgba),-421px 0 0 0 var(--main-inverted-color-rgba),-422px 0 0 0 var(--main-inverted-color-rgba),-423px 0 0 0 var(--main-inverted-color-rgba),-424px 0 0 0 var(--main-inverted-color-rgba),-425px 0 0 0 var(--main-inverted-color-rgba),-426px 0 0 0 var(--main-inverted-color-rgba),-427px 0 0 0 var(--main-inverted-color-rgba),-428px 0 0 0 var(--main-inverted-color-rgba),-429px 0 0 0 var(--main-inverted-color-rgba),-430px 0 0 0 var(--main-inverted-color-rgba),-431px 0 0 0 var(--main-inverted-color-rgba),-432px 0 0 0 var(--main-inverted-color-rgba),-433px 0 0 0 var(--main-inverted-color-rgba),-434px 0 0 0 var(--main-inverted-color-rgba),-435px 0 0 0 var(--main-inverted-color-rgba),-436px 0 0 0 var(--main-inverted-color-rgba),-437px 0 0 0 var(--main-inverted-color-rgba),-438px 0 0 0 var(--main-inverted-color-rgba),-439px 0 0 0 var(--main-inverted-color-rgba),-440px 0 0 0 var(--main-inverted-color-rgba),-441px 0 0 0 var(--main-inverted-color-rgba),-442px 0 0 0 var(--main-inverted-color-rgba),-443px 0 0 0 var(--main-inverted-color-rgba),-444px 0 0 0 var(--main-inverted-color-rgba),-445px 0 0 0 var(--main-inverted-color-rgba),-446px 0 0 0 var(--main-inverted-color-rgba),-447px 0 0 0 var(--main-inverted-color-rgba),-448px 0 0 0 var(--main-inverted-color-rgba),-449px 0 0 0 var(--main-inverted-color-rgba),-450px 0 0 0 var(--main-inverted-color-rgba),-451px 0 0 0 var(--main-inverted-color-rgba),-452px 0 0 0 var(--main-inverted-color-rgba),-453px 0 0 0 var(--main-inverted-color-rgba),-454px 0 0 0 var(--main-inverted-color-rgba),-455px 0 0 0 var(--main-inverted-color-rgba),-456px 0 0 0 var(--main-inverted-color-rgba),-457px 0 0 0 var(--main-inverted-color-rgba),-458px 0 0 0 var(--main-inverted-color-rgba),-459px 0 0 0 var(--main-inverted-color-rgba),-460px 0 0 0 var(--main-inverted-color-rgba),-461px 0 0 0 var(--main-inverted-color-rgba),-462px 0 0 0 var(--main-inverted-color-rgba),-463px 0 0 0 var(--main-inverted-color-rgba),-464px 0 0 0 var(--main-inverted-color-rgba),-465px 0 0 0 var(--main-inverted-color-rgba),-466px 0 0 0 var(--main-inverted-color-rgba),-467px 0 0 0 var(--main-inverted-color-rgba),-468px 0 0 0 var(--main-inverted-color-rgba),-469px 0 0 0 var(--main-inverted-color-rgba),-470px 0 0 0 var(--main-inverted-color-rgba),-471px 0 0 0 var(--main-inverted-color-rgba),-472px 0 0 0 var(--main-inverted-color-rgba),-473px 0 0 0 var(--main-inverted-color-rgba),-474px 0 0 0 var(--main-inverted-color-rgba),-475px 0 0 0 var(--main-inverted-color-rgba),-476px 0 0 0 var(--main-inverted-color-rgba),-477px 0 0 0 var(--main-inverted-color-rgba),-478px 0 0 0 var(--main-inverted-color-rgba),-479px 0 0 0 var(--main-inverted-color-rgba),-480px 0 0 0 var(--main-inverted-color-rgba),-481px 0 0 0 var(--main-inverted-color-rgba),-482px 0 0 0 var(--main-inverted-color-rgba),-483px 0 0 0 var(--main-inverted-color-rgba),-484px 0 0 0 var(--main-inverted-color-rgba),-485px 0 0 0 var(--main-inverted-color-rgba),-486px 0 0 0 var(--main-inverted-color-rgba),-487px 0 0 0 var(--main-inverted-color-rgba),-488px 0 0 0 var(--main-inverted-color-rgba),-489px 0 0 0 var(--main-inverted-color-rgba),-490px 0 0 0 var(--main-inverted-color-rgba),-491px 0 0 0 var(--main-inverted-color-rgba),-492px 0 0 0 var(--main-inverted-color-rgba),-493px 0 0 0 var(--main-inverted-color-rgba),-494px 0 0 0 var(--main-inverted-color-rgba),-495px 0 0 0 var(--main-inverted-color-rgba),-496px 0 0 0 var(--main-inverted-color-rgba),-497px 0 0 0 var(--main-inverted-color-rgba),-498px 0 0 0 var(--main-inverted-color-rgba),-499px 0 0 0 var(--main-inverted-color-rgba),-500px 0 0 0 var(--main-inverted-color-rgba),-501px 0 0 0 var(--main-inverted-color-rgba),-502px 0 0 0 var(--main-inverted-color-rgba),-503px 0 0 0 var(--main-inverted-color-rgba),-504px 0 0 0 var(--main-inverted-color-rgba),-505px 0 0 0 var(--main-inverted-color-rgba),-506px 0 0 0 var(--main-inverted-color-rgba),-507px 0 0 0 var(--main-inverted-color-rgba),-508px 0 0 0 var(--main-inverted-color-rgba),-509px 0 0 0 var(--main-inverted-color-rgba),-510px 0 0 0 var(--main-inverted-color-rgba),-511px 0 0 0 var(--main-inverted-color-rgba),-512px 0 0 0 var(--main-inverted-color-rgba),-513px 0 0 0 var(--main-inverted-color-rgba),-514px 0 0 0 var(--main-inverted-color-rgba),-515px 0 0 0 var(--main-inverted-color-rgba),-516px 0 0 0 var(--main-inverted-color-rgba),-517px 0 0 0 var(--main-inverted-color-rgba),-518px 0 0 0 var(--main-inverted-color-rgba),-519px 0 0 0 var(--main-inverted-color-rgba),-520px 0 0 0 var(--main-inverted-color-rgba),-521px 0 0 0 var(--main-inverted-color-rgba),-522px 0 0 0 var(--main-inverted-color-rgba),-523px 0 0 0 var(--main-inverted-color-rgba),-524px 0 0 0 var(--main-inverted-color-rgba),-525px 0 0 0 var(--main-inverted-color-rgba),-526px 0 0 0 var(--main-inverted-color-rgba),-527px 0 0 0 var(--main-inverted-color-rgba),-528px 0 0 0 var(--main-inverted-color-rgba),-529px 0 0 0 var(--main-inverted-color-rgba),-530px 0 0 0 var(--main-inverted-color-rgba),-531px 0 0 0 var(--main-inverted-color-rgba),-532px 0 0 0 var(--main-inverted-color-rgba),-533px 0 0 0 var(--main-inverted-color-rgba),-534px 0 0 0 var(--main-inverted-color-rgba),-535px 0 0 0 var(--main-inverted-color-rgba),-536px 0 0 0 var(--main-inverted-color-rgba),-537px 0 0 0 var(--main-inverted-color-rgba),-538px 0 0 0 var(--main-inverted-color-rgba),-539px 0 0 0 var(--main-inverted-color-rgba),-540px 0 0 0 var(--main-inverted-color-rgba),-541px 0 0 0 var(--main-inverted-color-rgba),-542px 0 0 0 var(--main-inverted-color-rgba),-543px 0 0 0 var(--main-inverted-color-rgba),-544px 0 0 0 var(--main-inverted-color-rgba),-545px 0 0 0 var(--main-inverted-color-rgba),-546px 0 0 0 var(--main-inverted-color-rgba),-547px 0 0 0 var(--main-inverted-color-rgba),-548px 0 0 0 var(--main-inverted-color-rgba),-549px 0 0 0 var(--main-inverted-color-rgba),-550px 0 0 0 var(--main-inverted-color-rgba),-551px 0 0 0 var(--main-inverted-color-rgba),-552px 0 0 0 var(--main-inverted-color-rgba),-553px 0 0 0 var(--main-inverted-color-rgba),-554px 0 0 0 var(--main-inverted-color-rgba),-555px 0 0 0 var(--main-inverted-color-rgba),-556px 0 0 0 var(--main-inverted-color-rgba),-557px 0 0 0 var(--main-inverted-color-rgba),-558px 0 0 0 var(--main-inverted-color-rgba),-559px 0 0 0 var(--main-inverted-color-rgba),-560px 0 0 0 var(--main-inverted-color-rgba),-561px 0 0 0 var(--main-inverted-color-rgba),-562px 0 0 0 var(--main-inverted-color-rgba),-563px 0 0 0 var(--main-inverted-color-rgba),-564px 0 0 0 var(--main-inverted-color-rgba),-565px 0 0 0 var(--main-inverted-color-rgba),-566px 0 0 0 var(--main-inverted-color-rgba),-567px 0 0 0 var(--main-inverted-color-rgba),-568px 0 0 0 var(--main-inverted-color-rgba),-569px 0 0 0 var(--main-inverted-color-rgba),-570px 0 0 0 var(--main-inverted-color-rgba),-571px 0 0 0 var(--main-inverted-color-rgba),-572px 0 0 0 var(--main-inverted-color-rgba),-573px 0 0 0 var(--main-inverted-color-rgba),-574px 0 0 0 var(--main-inverted-color-rgba),-575px 0 0 0 var(--main-inverted-color-rgba),-576px 0 0 0 var(--main-inverted-color-rgba),-577px 0 0 0 var(--main-inverted-color-rgba),-578px 0 0 0 var(--main-inverted-color-rgba),-579px 0 0 0 var(--main-inverted-color-rgba),-580px 0 0 0 var(--main-inverted-color-rgba),-581px 0 0 0 var(--main-inverted-color-rgba),-582px 0 0 0 var(--main-inverted-color-rgba),-583px 0 0 0 var(--main-inverted-color-rgba),-584px 0 0 0 var(--main-inverted-color-rgba),-585px 0 0 0 var(--main-inverted-color-rgba),-586px 0 0 0 var(--main-inverted-color-rgba),-587px 0 0 0 var(--main-inverted-color-rgba),-588px 0 0 0 var(--main-inverted-color-rgba),-589px 0 0 0 var(--main-inverted-color-rgba),-590px 0 0 0 var(--main-inverted-color-rgba),-591px 0 0 0 var(--main-inverted-color-rgba),-592px 0 0 0 var(--main-inverted-color-rgba),-593px 0 0 0 var(--main-inverted-color-rgba),-594px 0 0 0 var(--main-inverted-color-rgba),-595px 0 0 0 var(--main-inverted-color-rgba),-596px 0 0 0 var(--main-inverted-color-rgba),-597px 0 0 0 var(--main-inverted-color-rgba),-598px 0 0 0 var(--main-inverted-color-rgba),-599px 0 0 0 var(--main-inverted-color-rgba),-600px 0 0 0 var(--main-inverted-color-rgba),-601px 0 0 0 var(--main-inverted-color-rgba),-602px 0 0 0 var(--main-inverted-color-rgba),-603px 0 0 0 var(--main-inverted-color-rgba),-604px 0 0 0 var(--main-inverted-color-rgba),-605px 0 0 0 var(--main-inverted-color-rgba),-606px 0 0 0 var(--main-inverted-color-rgba),-607px 0 0 0 var(--main-inverted-color-rgba),-608px 0 0 0 var(--main-inverted-color-rgba),-609px 0 0 0 var(--main-inverted-color-rgba),-610px 0 0 0 var(--main-inverted-color-rgba),-611px 0 0 0 var(--main-inverted-color-rgba),-612px 0 0 0 var(--main-inverted-color-rgba),-613px 0 0 0 var(--main-inverted-color-rgba),-614px 0 0 0 var(--main-inverted-color-rgba),-615px 0 0 0 var(--main-inverted-color-rgba),-616px 0 0 0 var(--main-inverted-color-rgba),-617px 0 0 0 var(--main-inverted-color-rgba),-618px 0 0 0 var(--main-inverted-color-rgba),-619px 0 0 0 var(--main-inverted-color-rgba),-620px 0 0 0 var(--main-inverted-color-rgba),-621px 0 0 0 var(--main-inverted-color-rgba),-622px 0 0 0 var(--main-inverted-color-rgba),-623px 0 0 0 var(--main-inverted-color-rgba),-624px 0 0 0 var(--main-inverted-color-rgba),-625px 0 0 0 var(--main-inverted-color-rgba),-626px 0 0 0 var(--main-inverted-color-rgba),-627px 0 0 0 var(--main-inverted-color-rgba),-628px 0 0 0 var(--main-inverted-color-rgba),-629px 0 0 0 var(--main-inverted-color-rgba),-630px 0 0 0 var(--main-inverted-color-rgba),-631px 0 0 0 var(--main-inverted-color-rgba),-632px 0 0 0 var(--main-inverted-color-rgba),-633px 0 0 0 var(--main-inverted-color-rgba),-634px 0 0 0 var(--main-inverted-color-rgba),-635px 0 0 0 var(--main-inverted-color-rgba),-636px 0 0 0 var(--main-inverted-color-rgba),-637px 0 0 0 var(--main-inverted-color-rgba),-638px 0 0 0 var(--main-inverted-color-rgba),-639px 0 0 0 var(--main-inverted-color-rgba),-640px 0 0 0 var(--main-inverted-color-rgba),-641px 0 0 0 var(--main-inverted-color-rgba),-642px 0 0 0 var(--main-inverted-color-rgba),-643px 0 0 0 var(--main-inverted-color-rgba),-644px 0 0 0 var(--main-inverted-color-rgba),-645px 0 0 0 var(--main-inverted-color-rgba),-646px 0 0 0 var(--main-inverted-color-rgba),-647px 0 0 0 var(--main-inverted-color-rgba),-648px 0 0 0 var(--main-inverted-color-rgba),-649px 0 0 0 var(--main-inverted-color-rgba),-650px 0 0 0 var(--main-inverted-color-rgba),-651px 0 0 0 var(--main-inverted-color-rgba),-652px 0 0 0 var(--main-inverted-color-rgba),-653px 0 0 0 var(--main-inverted-color-rgba),-654px 0 0 0 var(--main-inverted-color-rgba),-655px 0 0 0 var(--main-inverted-color-rgba),-656px 0 0 0 var(--main-inverted-color-rgba),-657px 0 0 0 var(--main-inverted-color-rgba),-658px 0 0 0 var(--main-inverted-color-rgba),-659px 0 0 0 var(--main-inverted-color-rgba),-660px 0 0 0 var(--main-inverted-color-rgba),-661px 0 0 0 var(--main-inverted-color-rgba),-662px 0 0 0 var(--main-inverted-color-rgba),-663px 0 0 0 var(--main-inverted-color-rgba),-664px 0 0 0 var(--main-inverted-color-rgba),-665px 0 0 0 var(--main-inverted-color-rgba),-666px 0 0 0 var(--main-inverted-color-rgba),-667px 0 0 0 var(--main-inverted-color-rgba),-668px 0 0 0 var(--main-inverted-color-rgba),-669px 0 0 0 var(--main-inverted-color-rgba),-670px 0 0 0 var(--main-inverted-color-rgba),-671px 0 0 0 var(--main-inverted-color-rgba),-672px 0 0 0 var(--main-inverted-color-rgba),-673px 0 0 0 var(--main-inverted-color-rgba),-674px 0 0 0 var(--main-inverted-color-rgba),-675px 0 0 0 var(--main-inverted-color-rgba),-676px 0 0 0 var(--main-inverted-color-rgba),-677px 0 0 0 var(--main-inverted-color-rgba),-678px 0 0 0 var(--main-inverted-color-rgba),-679px 0 0 0 var(--main-inverted-color-rgba),-680px 0 0 0 var(--main-inverted-color-rgba),-681px 0 0 0 var(--main-inverted-color-rgba),-682px 0 0 0 var(--main-inverted-color-rgba),-683px 0 0 0 var(--main-inverted-color-rgba),-684px 0 0 0 var(--main-inverted-color-rgba),-685px 0 0 0 var(--main-inverted-color-rgba),-686px 0 0 0 var(--main-inverted-color-rgba),-687px 0 0 0 var(--main-inverted-color-rgba),-688px 0 0 0 var(--main-inverted-color-rgba),-689px 0 0 0 var(--main-inverted-color-rgba),-690px 0 0 0 var(--main-inverted-color-rgba),-691px 0 0 0 var(--main-inverted-color-rgba),-692px 0 0 0 var(--main-inverted-color-rgba),-693px 0 0 0 var(--main-inverted-color-rgba),-694px 0 0 0 var(--main-inverted-color-rgba),-695px 0 0 0 var(--main-inverted-color-rgba),-696px 0 0 0 var(--main-inverted-color-rgba),-697px 0 0 0 var(--main-inverted-color-rgba),-698px 0 0 0 var(--main-inverted-color-rgba),-699px 0 0 0 var(--main-inverted-color-rgba),-700px 0 0 0 var(--main-inverted-color-rgba),-701px 0 0 0 var(--main-inverted-color-rgba),-702px 0 0 0 var(--main-inverted-color-rgba),-703px 0 0 0 var(--main-inverted-color-rgba),-704px 0 0 0 var(--main-inverted-color-rgba),-705px 0 0 0 var(--main-inverted-color-rgba),-706px 0 0 0 var(--main-inverted-color-rgba),-707px 0 0 0 var(--main-inverted-color-rgba),-708px 0 0 0 var(--main-inverted-color-rgba),-709px 0 0 0 var(--main-inverted-color-rgba),-710px 0 0 0 var(--main-inverted-color-rgba),-711px 0 0 0 var(--main-inverted-color-rgba),-712px 0 0 0 var(--main-inverted-color-rgba),-713px 0 0 0 var(--main-inverted-color-rgba),-714px 0 0 0 var(--main-inverted-color-rgba),-715px 0 0 0 var(--main-inverted-color-rgba),-716px 0 0 0 var(--main-inverted-color-rgba),-717px 0 0 0 var(--main-inverted-color-rgba),-718px 0 0 0 var(--main-inverted-color-rgba),-719px 0 0 0 var(--main-inverted-color-rgba),-720px 0 0 0 var(--main-inverted-color-rgba),-721px 0 0 0 var(--main-inverted-color-rgba),-722px 0 0 0 var(--main-inverted-color-rgba),-723px 0 0 0 var(--main-inverted-color-rgba),-724px 0 0 0 var(--main-inverted-color-rgba),-725px 0 0 0 var(--main-inverted-color-rgba),-726px 0 0 0 var(--main-inverted-color-rgba),-727px 0 0 0 var(--main-inverted-color-rgba),-728px 0 0 0 var(--main-inverted-color-rgba),-729px 0 0 0 var(--main-inverted-color-rgba),-730px 0 0 0 var(--main-inverted-color-rgba),-731px 0 0 0 var(--main-inverted-color-rgba),-732px 0 0 0 var(--main-inverted-color-rgba),-733px 0 0 0 var(--main-inverted-color-rgba),-734px 0 0 0 var(--main-inverted-color-rgba),-735px 0 0 0 var(--main-inverted-color-rgba),-736px 0 0 0 var(--main-inverted-color-rgba),-737px 0 0 0 var(--main-inverted-color-rgba),-738px 0 0 0 var(--main-inverted-color-rgba),-739px 0 0 0 var(--main-inverted-color-rgba),-740px 0 0 0 var(--main-inverted-color-rgba),-741px 0 0 0 var(--main-inverted-color-rgba),-742px 0 0 0 var(--main-inverted-color-rgba),-743px 0 0 0 var(--main-inverted-color-rgba),-744px 0 0 0 var(--main-inverted-color-rgba),-745px 0 0 0 var(--main-inverted-color-rgba),-746px 0 0 0 var(--main-inverted-color-rgba),-747px 0 0 0 var(--main-inverted-color-rgba),-748px 0 0 0 var(--main-inverted-color-rgba),-749px 0 0 0 var(--main-inverted-color-rgba),-750px 0 0 0 var(--main-inverted-color-rgba),-751px 0 0 0 var(--main-inverted-color-rgba),-752px 0 0 0 var(--main-inverted-color-rgba),-753px 0 0 0 var(--main-inverted-color-rgba),-754px 0 0 0 var(--main-inverted-color-rgba),-755px 0 0 0 var(--main-inverted-color-rgba),-756px 0 0 0 var(--main-inverted-color-rgba),-757px 0 0 0 var(--main-inverted-color-rgba),-758px 0 0 0 var(--main-inverted-color-rgba),-759px 0 0 0 var(--main-inverted-color-rgba),-760px 0 0 0 var(--main-inverted-color-rgba),-761px 0 0 0 var(--main-inverted-color-rgba),-762px 0 0 0 var(--main-inverted-color-rgba),-763px 0 0 0 var(--main-inverted-color-rgba),-764px 0 0 0 var(--main-inverted-color-rgba),-765px 0 0 0 var(--main-inverted-color-rgba),-766px 0 0 0 var(--main-inverted-color-rgba),-767px 0 0 0 var(--main-inverted-color-rgba),-768px 0 0 0 var(--main-inverted-color-rgba),-769px 0 0 0 var(--main-inverted-color-rgba),-770px 0 0 0 var(--main-inverted-color-rgba),-771px 0 0 0 var(--main-inverted-color-rgba),-772px 0 0 0 var(--main-inverted-color-rgba),-773px 0 0 0 var(--main-inverted-color-rgba),-774px 0 0 0 var(--main-inverted-color-rgba),-775px 0 0 0 var(--main-inverted-color-rgba),-776px 0 0 0 var(--main-inverted-color-rgba),-777px 0 0 0 var(--main-inverted-color-rgba),-778px 0 0 0 var(--main-inverted-color-rgba),-779px 0 0 0 var(--main-inverted-color-rgba),-780px 0 0 0 var(--main-inverted-color-rgba),-781px 0 0 0 var(--main-inverted-color-rgba),-782px 0 0 0 var(--main-inverted-color-rgba),-783px 0 0 0 var(--main-inverted-color-rgba),-784px 0 0 0 var(--main-inverted-color-rgba),-785px 0 0 0 var(--main-inverted-color-rgba),-786px 0 0 0 var(--main-inverted-color-rgba),-787px 0 0 0 var(--main-inverted-color-rgba),-788px 0 0 0 var(--main-inverted-color-rgba),-789px 0 0 0 var(--main-inverted-color-rgba),-790px 0 0 0 var(--main-inverted-color-rgba),-791px 0 0 0 var(--main-inverted-color-rgba),-792px 0 0 0 var(--main-inverted-color-rgba),-793px 0 0 0 var(--main-inverted-color-rgba),-794px 0 0 0 var(--main-inverted-color-rgba),-795px 0 0 0 var(--main-inverted-color-rgba),-796px 0 0 0 var(--main-inverted-color-rgba),-797px 0 0 0 var(--main-inverted-color-rgba),-798px 0 0 0 var(--main-inverted-color-rgba),-799px 0 0 0 var(--main-inverted-color-rgba),-800px 0 0 0 var(--main-inverted-color-rgba),-801px 0 0 0 var(--main-inverted-color-rgba),-802px 0 0 0 var(--main-inverted-color-rgba),-803px 0 0 0 var(--main-inverted-color-rgba),-804px 0 0 0 var(--main-inverted-color-rgba),-805px 0 0 0 var(--main-inverted-color-rgba),-806px 0 0 0 var(--main-inverted-color-rgba),-807px 0 0 0 var(--main-inverted-color-rgba),-808px 0 0 0 var(--main-inverted-color-rgba),-809px 0 0 0 var(--main-inverted-color-rgba),-810px 0 0 0 var(--main-inverted-color-rgba),-811px 0 0 0 var(--main-inverted-color-rgba),-812px 0 0 0 var(--main-inverted-color-rgba),-813px 0 0 0 var(--main-inverted-color-rgba),-814px 0 0 0 var(--main-inverted-color-rgba),-815px 0 0 0 var(--main-inverted-color-rgba),-816px 0 0 0 var(--main-inverted-color-rgba),-817px 0 0 0 var(--main-inverted-color-rgba),-818px 0 0 0 var(--main-inverted-color-rgba),-819px 0 0 0 var(--main-inverted-color-rgba),-820px 0 0 0 var(--main-inverted-color-rgba),-821px 0 0 0 var(--main-inverted-color-rgba),-822px 0 0 0 var(--main-inverted-color-rgba),-823px 0 0 0 var(--main-inverted-color-rgba),-824px 0 0 0 var(--main-inverted-color-rgba),-825px 0 0 0 var(--main-inverted-color-rgba),-826px 0 0 0 var(--main-inverted-color-rgba),-827px 0 0 0 var(--main-inverted-color-rgba),-828px 0 0 0 var(--main-inverted-color-rgba),-829px 0 0 0 var(--main-inverted-color-rgba),-830px 0 0 0 var(--main-inverted-color-rgba),-831px 0 0 0 var(--main-inverted-color-rgba),-832px 0 0 0 var(--main-inverted-color-rgba),-833px 0 0 0 var(--main-inverted-color-rgba),-834px 0 0 0 var(--main-inverted-color-rgba),-835px 0 0 0 var(--main-inverted-color-rgba),-836px 0 0 0 var(--main-inverted-color-rgba),-837px 0 0 0 var(--main-inverted-color-rgba),-838px 0 0 0 var(--main-inverted-color-rgba),-839px 0 0 0 var(--main-inverted-color-rgba),-840px 0 0 0 var(--main-inverted-color-rgba),-841px 0 0 0 var(--main-inverted-color-rgba),-842px 0 0 0 var(--main-inverted-color-rgba),-843px 0 0 0 var(--main-inverted-color-rgba),-844px 0 0 0 var(--main-inverted-color-rgba),-845px 0 0 0 var(--main-inverted-color-rgba),-846px 0 0 0 var(--main-inverted-color-rgba),-847px 0 0 0 var(--main-inverted-color-rgba),-848px 0 0 0 var(--main-inverted-color-rgba),-849px 0 0 0 var(--main-inverted-color-rgba),-850px 0 0 0 var(--main-inverted-color-rgba)}input[type=range]::-webkit-slider-thumb:active{background:rgba(var(--main-bg-color),.7)}input[type=range]::-webkit-slider-runnable-track{overflow:hidden;display:flex;background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}textarea{width:calc(100% - 8px);min-width:calc(100% - 8px);min-height:calc(8 * var(--default-height-size,20));resize:none;font-size:calc(.9 * var(--default-font-size,19pt));background:var(--main-font-color-rgba,#fff);color:var(--main-bg-color-rgba,#00f);border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2))}textarea.huge-textarea{min-height:calc(25 * var(--default-height-size,20));max-height:calc(75 * var(--default-height-size,20))}textarea.big-textarea{min-height:calc(10 * var(--default-height-size,20));max-height:calc(30 * var(--default-height-size,20))}textarea.normal-textarea{min-height:calc(5 * var(--default-height-size,20));max-height:calc(15 * var(--default-height-size,20))}textarea#modal-input-textarea{overflow-wrap:unset;resize:none;white-space:nowrap}div.editor{z-index:0;margin-left:2px;margin-right:2px;height:calc(25 * var(--default-height-size,20));font-size:calc(.9 * var(--default-font-size,19pt));font-family:"Lucida Console",Monaco,monospace;position:relative;background:rgba(var(--main-inverted-color),.9);border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.editor>textarea{z-index:10;position:absolute;height:100%;width:100%;box-sizing:border-box;background:0 0;color:transparent;overflow-wrap:unset;resize:none;white-space:nowrap}div.editor-container{overflow:hidden;position:relative;height:100%;width:100%;box-sizing:border-box}div.editor-container>div{position:absolute;overflow:inherit;height:100%;width:100%;padding:4px;box-sizing:border-box;display:flex;flex-direction:column;border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.editor-input{z-index:2}div.editor-syntax{z-index:6}div.editor-selection{z-index:8}div.editor-caret::after{content:"|";color:red}div.syntax-element{color:var(--main-font-color-rgba,#fff);display:flex;height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)));min-height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)));max-height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)))}div.syntax-is-arithmetic,div.syntax-is-number,div.syntax-is-parentheses{color:var(--main-success-color-rgba,green)}div.syntax-is-command{color:var(--main-warning-color-rgba,red)}div.syntax-is-event,div.syntax-is-variable{color:var(--main-info-color-rgba,orange)}div.syntax-is-logic{color:rgba(var(--main-font-color),.7)}div.syntax-is-block{color:rgba(var(--main-success-color),.7)}div.syntax-is-comment{color:rgba(var(--main-font-color),.35)}div.syntax-is-statement{color:rgba(var(--main-sunny-color),.7)}div.syntax-is-comma{color:rgba(var(--main-font-color),.5)}div.syntax-row{display:flex;flex-direction:row;height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)));min-height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)));max-height:calc(1.06555555555555 * var(--default-font-size,19pt) + .75pt + 3 * (10 / var(--scale-size)))}div.syntax-row:nth-child(even){background:rgba(0,0,0,.1)}select{width:100%;margin-bottom:calc(-1 * var(--default-height-size,20));color:var(--main-bg-color-rgba,#00f);background-color:var(--main-font-color-rgba,#fff);height:calc(1.6 * var(--default-height-size,20));font-size:calc(1 * var(--default-font-size,19pt));text-indent:calc(.3 * var(--default-height-size,20) + 4px);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));-webkit-appearance:none}label{margin-right:4px}label.range{border:none}label.select{position:relative;pointer-events:none;top:calc(-.175 * var(--default-height-size,20) - 2px);left:calc(100% - 1.4 * var(--default-height-size,20));border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));border:2px solid var(--main-font-color-rgba,#fff);background:var(--main-bg-color-rgba,#00f)}label.select{position:relative;pointer-events:none;top:calc(-.26 * var(--default-height-size,20) - 2px);left:calc(100% - 1.37 * var(--default-height-size,20) - 1px);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));border:2px solid var(--main-font-color-rgba,#fff);background:var(--main-bg-color-rgba,#00f);width:calc(1 * var(--default-height-size,20) - 2px);height:calc(1 * var(--default-height-size,20) - 2px)}div.radio{margin-top:2px;border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));background:var(--main-font-color-rgba,#fff);border:2px solid var(--main-bg-color-rgba,#00f)}label.radio{margin:calc(.2 * var(--default-height-size,20));font-size:calc(1 * var(--default-font-size,19pt));align-items:center;text-indent:calc(1 * var(--default-height-size,20) + 10px);color:var(--main-font-color-rgba,#fff);border-radius:calc(.8 * var(--default-height-size,20)/ var(--button-radius-size,2));width:calc(.8 * var(--default-height-size,20));height:calc(.8 * var(--default-height-size,20))}input:checked+label.radio{background:var(--main-bg-color-rgba,#00f)}label.radio:active,select:hover~label.select{background:rgba(var(--main-bg-color),.5)}label.file{display:block;text-align:center;background:var(--main-inverted-color-rgba);border-radius:calc(var(--default-height-size,20)/ var(--button-radius-size,2));font-size:calc(.8 * var(--default-font-size,19pt));color:rgba(var(--main-bg-color),.8);padding:calc(.4 * var(--default-height-size,20)) calc(.5 * var(--default-height-size,20)) calc(.5 * var(--default-height-size,20));word-break:break-all}label.modal-upload{width:100%;margin:unset;color:rgba(var(--main-font-color),.8);border-color:rgba(var(--main-font-color),.8);border-radius:calc(var(--default-height-size,20)/ var(--button-radius-size,2)/ 3)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number],input[type=password],input[type=search],input[type=text]{cursor:text;width:100%;font-size:calc(1.1 * var(--default-font-size,19pt));text-align:center;color:var(--main-bg-color-rgba,#00f);-moz-appearance:textfield;position:relative;height:calc(1.35 * var(--default-height-size,20));background:var(--main-font-color-rgba,#fff);border-radius:calc(.2 * var(--default-height-size,20)/ var(--button-radius-size,2))}input[type=number]{width:calc(3 * var(--default-height-size,20))}input[type=search]{padding-left:4px;text-align:left;font-size:calc(.9 * var(--default-font-size,19pt))}input[type=password],input[type=text]{padding-left:4px;text-align:left;width:100%}input[type=search]::placeholder{color:rgba(var(--main-bg-color),.6)}input[type=search]::-webkit-search-cancel-button{display:none}label.search-icon{color:var(--main-bg-color-rgba);position:relative;top:calc(-.1 * var(--default-height-size,20) - 6px);left:calc(100% - 1.05 * var(--default-height-size,20) - 4px);margin-top:calc(-1.025 * var(--default-height-size,20) + 6px);margin-left:3px;width:calc(.6 * var(--default-height-size,20));height:calc(.6 * var(--default-height-size,20));border:solid calc(.1 * var(--default-height-size,20) + 1px) var(--main-bg-color-rgba);border-radius:calc(var(--default-height-size,20)/ var(--button-radius-size,2));-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}label.search-icon::before{content:'';position:absolute;top:calc(.65 * var(--default-height-size,20));left:calc(.23 * var(--default-height-size,20));height:calc(.3 * var(--default-height-size,20));width:calc(.1 * var(--default-height-size,20) + 1px);background-color:var(--main-bg-color-rgba)}label.number{text-indent:5px;border:none;margin-top:3px}label.color{text-indent:calc(3 * var(--default-height-size,20) + 8px);white-space:nowrap;position:relative;width:calc(3 * var(--default-height-size,20));height:calc(1.2 * var(--default-height-size,20));background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}label.color::after{content:'';position:absolute;top:calc(.2 * var(--default-height-size,20));left:calc(.2 * var(--default-height-size,20));width:calc(100% - calc(.4 * var(--default-height-size,20)));height:calc(.8 * var(--default-height-size,20));border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}div.text-main-bg{color:var(--main-bg-color-rgba,#00f)}div.text-main-font{color:var(--main-font-color-rgba,#fff)}div.text-main-inverted{color:var(--main-inverted-color-rgba)}div.text-main-warning{color:var(--main-warning-color-rgba,red)}div.text-main-info{color:var(--main-info-color-rgba,orange)}div.text-main-success{color:var(--main-success-color-rgba,green)}div.text-main-sunny{color:var(--main-sunny-color-rgba,#ff0)}div.text-main-bg-inverted{color:rgba(var(--main-bg-color),.25)}div.main-bg,label.main-bg,label.main-bg::after{background:var(--main-bg-color-rgba,#00f)}div.main-font,label.main-font,label.main-font::after{background:var(--main-font-color-rgba,#fff)}div.main-inverted,label.main-inverted::after,label.main-inveted{background:var(--main-inverted-color-rgba)}div.main-warning,label.main-warning,label.main-warning::after{background:var(--main-warning-color-rgba,red)}div.main-info,label.main-info,label.main-info::after{background:var(--main-info-color-rgba,orange)}div.main-success,label.main-success,label.main-success::after{background:var(--main-success-color-rgba,green)}div.main-sunny,label.main-sunny,label.main-sunny::after{background:var(--main-sunny-color-rgba,#ff0)}div.main-bg-inverted,label.main-bg-inverted,label.main-bg-inverted::after{background:rgba(var(--main-bg-color),.25)}div.entry>div{display:inline}div.entry>div.timestamp{color:rgba(var(--main-font-color),.5)}div.entry>div.main-info{color:var(--main-info-color-rgba);background:0 0}div.entry>div.main-sunny{color:var(--main-sunny-color-rgba);background:0 0}div.entry>div.main-warning{color:var(--main-warning-color-rgba);background:0 0}div.entry>div.main-success{color:var(--main-success-color-rgba);background:0 0}label.checkbox{position:relative;white-space:nowrap;text-indent:calc(3 * var(--default-height-size,20) + 8px);font-size:calc(1 * var(--default-font-size,19pt));width:calc(3 * var(--default-height-size,20));height:calc(1.2 * var(--default-height-size,20));background:var(--main-font-color-rgba,#fff);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2))}label.checkbox::after{content:'';position:absolute;top:calc(.2 * var(--default-height-size,20));left:calc(.2 * var(--default-height-size,20));width:calc(.8 * var(--default-height-size,20));height:calc(.8 * var(--default-height-size,20));background:var(--main-bg-color-rgba,#00f);border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));transition:.3s}input:checked+label.checkbox::after{left:calc(100% - calc(.2 * var(--default-height-size,20)));transform:translateX(-100%)}label.checkbox:active::after{width:calc(2 * var(--default-height-size,20))}#modal-input-upload-storage-free{margin-bottom:5px;margin-left:auto;height:calc(.42 * var(--default-height-size,20));color:var(--main-inverted-color-rgba);background-color:var(--main-font-color-rgba)}#modal-input-upload-storage-occupied{position:absolute;height:calc(.42 * var(--default-height-size,20));color:var(--main-font-color-rgba);background-color:rgba(var(--main-success-color),.75)}div.nav:hover,div.radio:hover,div.tag.with-close:hover,input[type=number]:hover,input[type=password]:hover,input[type=range]:hover,input[type=search]:hover,input[type=text]:hover,label.checkbox:hover,label.color:hover,label.radio:hover,label:hover.select,select:hover,select:hover~label.select,textarea:not(.editor):active,textarea:not(.editor):hover{border:2px solid var(--main-inverted-color-rgba)}div.nav:disabled,div.radio:disabled,div.tag.with-close:disabled,input[type=number]:disabled,input[type=password]:disabled,input[type=range]:disabled,input[type=search]:disabled,input[type=text]:disabled,label.checkbox:disabled,label.color:disabled,label.radio:disabled,label:disabled.select,select:disabled,select:disabled~label.select,textarea:not(.editor):disabled{color:rgba(var(--main-font-color),.5);background-color:rgba(var(--main-inverted-color),.5);border:2px solid rgba(var(--main-inverted-color),.5);cursor:not-allowed}div.tag.with-close:focus,input[type=number]:focus,input[type=password]:focus,input[type=range]:focus,input[type=search]:focus,input[type=text]:focus,label.checkbox:focus,label.color:focus,label.radio:focus,select:focus,select:focus~label.select,textarea:not(.editor):focus{border:2px solid var(--main-inverted-color-rgba)}div.row[id*=modal-buttons]>button:active,div.row[id*=modal-buttons]>button:focus,div.row[id*=modal-buttons]>button:hover{box-shadow:0 0 3px 3px var(--main-bg-color-rgba)}div.bottom-container button.main-inverted:hover,div.modal button.main-inverted:hover{border-color:rgba(var(--main-bg-color),.9)}div.bottom-container button.main-inverted:active,div.bottom-container button.main-inverted:focus,div.modal button.main-inverted:active,div.modal button.main-inverted:focus{border-color:rgba(var(--main-bg-color),.5);background:rgba(var(--main-bg-color),.3)}button:focus,button:hover,div.icon-button>button:focus,div.icon-button>button:hover{box-shadow:0 0 3px 3px var(--main-inverted-color-rgba);border-color:rgba(var(--main-inverted-color),.75)}button:focus.main-inverted,button:hover.main-inverted,label.file:focus,label.file:hover{box-shadow:0 0 3px 3px var(--main-inverted-color-rgba);border-color:rgba(var(--main-font-color),.5)}div.area-title>button:focus,div.area-title>button:hover{border-color:var(--main-inverted-color-rgba);box-shadow:inset 0 0 3px 3px var(--main-inverted-color-rgba)}.tag.with-close:active,button:active,div.area-title>button:active,input:active,label:not(.number):active,select:active,textarea:active{box-shadow:none!important}div.tag:focus.with-close>span,div.tag:hover.with-close>span{color:var(--main-inverted-color-rgba)}div.bottom-drawer.is-inactive>.bottom-tab:focus::after,div.bottom-drawer.is-inactive>.bottom-tab:hover::after,div.bottom-tab:focus::after,div.bottom-tab:hover::after{color:rgba(var(--main-font-color),.75)}div.bottom-container .tag.with-close:focus,div.bottom-container .tag.with-close:hover,div.bottom-container button:focus,div.bottom-container button:hover,div.bottom-container input:focus,div.bottom-container input:hover,div.bottom-container label:not(.number):focus,div.bottom-container label:not(.number):hover,div.bottom-container select:focus,div.bottom-container select:hover,div.bottom-container textarea:focus,div.bottom-container textarea:hover{box-shadow:0 0 3px 3px var(--main-bg-color-rgba)}label.modal-upload:focus,label.modal-upload:hover{color:rgba(var(--main-font-color),.9);border-color:rgba(var(--main-font-color),.3)}button.file-action{float:right;opacity:0}button.file-action>svg{transform:translateY(1px)}td:hover>button.file-action{opacity:1}div.modal-table tr.is-inactive,tr.is-inactive button{text-decoration:line-through}tr.is-inactive:hover button.file-action{opacity:0}div.spinner-box{width:100%;display:flex;justify-content:center;align-items:center;background-color:transparent;margin:4px}div.spinner-container{width:calc(8 * var(--default-height-size,20));display:flex;justify-content:space-between;align-items:center}div.spinner-object{opacity:.25;width:calc(.5 * var(--default-height-size,20));height:calc(.5 * var(--default-height-size,20));border-radius:calc(1 * var(--default-height-size,20)/ var(--button-radius-size,2));background-color:var(--main-font-color-rgba,#fff)}div.spinner-object-1{animation:pulse 2s ease 0s infinite alternate}div.spinner-object-2{animation:pulse 2s ease .5s infinite alternate}div.spinner-object-3{animation:pulse 2s ease 1s infinite alternate}div.spinner-object-4{animation:pulse 2s ease 1.5s infinite alternate}div.spinner-object-5{animation:pulse 2s ease 2s infinite alternate}svg.gauge>text{fill:var(--main-font-color-rgba,#fff)}svg.gauge>text.value{font-size:calc(2.3 * var(--default-font-size,19pt))}svg.gauge>text.text{font-size:calc(1.5 * var(--default-font-size,19pt))}svg.gauge{margin:3px;height:calc(5 * var(--default-height-size,20))}svg.gauge>circle{stroke:rgba(var(--main-font-color),.75);fill:rgba(var(--main-inverted-color),.75);stroke-width:calc(.55 * var(--default-font-size,19pt) + 8px);transform-origin:-1 calc(5/2 * var(--default-height-size,20));transform:rotate(270deg)}svg.gauge>circle.value{stroke-dasharray:574.5;stroke-dashoffset:574.5;transition:all .5s ease-out}svg.gauge.main-success>circle{stroke:rgba(var(--main-success-color),1)}svg.gauge.main-info>circle{stroke:rgba(var(--main-info-color),1)}svg.gauge.main-warning>circle{stroke:rgba(var(--main-warning-color),1)}input.main-bg{background:var(--main-bg-color-rgba,#00f)}input.main-success{background:var(--main-success-color-rgba,green)}input.main-warning{background:var(--main-warning-color-rgba,red)}input.main-info{background:var(--main-info-color-rgba,#ff0)}input.main-inverted{background:var(--main-inverted-color-rgba)}input.main-font{background:var(--main-font-color-rgba,#fff)}div.tab-icon,div.tab-text,svg{pointer-events:none}path.line-path{stroke-width:9.96280003;stroke-linecap:round}path.main-bg.line-path,svg.main-bg>path{stroke:var(--main-bg-color-rgba,#00f)}path.main-font.line-path,svg.main-font>path{stroke:var(--main-font-color-rgba,#fff)}path.main-inverted.line-path,svg.main-inverted>path{stroke:var(--main-inverted-color-rgba)}path.main-warning.line-path,svg.main-warning>path{stroke:var(--main-warning-color-rgba,red)}path.main-info.line-path,svg.main-info>path{stroke:var(--main-info-color-rgba,orange)}path.main-sunny.line-path,svg.main-sunny>path{stroke:var(--main-sunny-color-rgba,#ff0)}path.main-success.line-path,svg.main-success>path{stroke:var(--main-success-color-rgba,green)}path.fill-main-bg{fill:var(--main-bg-color-rgba,#00f)}path.fill-main-font{fill:var(--main-font-color-rgba,#fff)}path.fill-main-inverted{fill:var(--main-inverted-color-rgba)}path.fill-main-warning{fill:var(--main-warning-color-rgba,red)}path.fill-main-info{fill:var(--main-info-color-rgba,orange)}path.fill-main-sunny{fill:var(--main-sunny-color-rgba,#ff0)}path.fill-main-success{fill:var(--main-success-color-rgba,green)}svg.inline-icon{display:inline-block;width:calc(1 * var(--default-height-size,20))}svg.inline-icon.wifi{fill:rgba(var(--main-font-color),.5)}svg.level-1>rect[name=level-1],svg.level-2>rect[name=level-1],svg.level-2>rect[name=level-2],svg.level-3>rect[name=level-1],svg.level-3>rect[name=level-2],svg.level-3>rect[name=level-3],svg.level-4>rect[name=level-1],svg.level-4>rect[name=level-2],svg.level-4>rect[name=level-3],svg.level-4>rect[name=level-4],svg.level-5>rect[name=level-1],svg.level-5>rect[name=level-2],svg.level-5>rect[name=level-3],svg.level-5>rect[name=level-4],svg.level-5>rect[name=level-5],svg[signal=level-1]>rect[name=level-1],svg[signal=level-2]>rect[name=level-1],svg[signal=level-2]>rect[name=level-2],svg[signal=level-3]>rect[name=level-1],svg[signal=level-3]>rect[name=level-2],svg[signal=level-3]>rect[name=level-3],svg[signal=level-4]>rect[name=level-1],svg[signal=level-4]>rect[name=level-2],svg[signal=level-4]>rect[name=level-3],svg[signal=level-4]>rect[name=level-4],svg[signal=level-5]>rect[name=level-1],svg[signal=level-5]>rect[name=level-2],svg[signal=level-5]>rect[name=level-3],svg[signal=level-5]>rect[name=level-4],svg[signal=level-5]>rect[name=level-5]{fill:var(--main-font-color-rgba,#fff)}div[data-json-path],tspan[data-json-path]{display:contents}body.got-wallpaper>div.view-got-box-shadows{box-shadow:inset 0 15px 10px -10px rgba(var(--main-bg-color),.25),inset 0 -15px 10px -10px rgba(var(--main-bg-color),.25)}body.got-wallpaper div.nav{background-color:rgba(var(--main-bg-color),.8)}body.got-wallpaper div.area-title>button{background-color:rgba(var(--main-bg-color),.05)}body.got-wallpaper div.modal div.area-title>button{background-color:rgba(var(--main-bg-color),.75)}body.got-wallpaper div.is-inactive>div.bottom-tab{opacity:.4}body.got-wallpaper::after{content:"";opacity:.75;top:0;left:0;bottom:0;right:0;min-width:100vw;min-height:100vh;overflow:hidden;position:fixed;z-index:-1}div.got-wallpaper::after{content:"";opacity:.75;min-width:100vw;min-height:100vh;overflow:hidden;position:absolute;top:0;left:0}.logo-big{width:calc(5 * var(--default-height-size,20))}.logo-normal{width:calc(3 * var(--default-height-size,20))}.logo-little{width:calc(1.5 * var(--default-height-size,20))}.logo-tiny{width:calc(.75 * var(--default-height-size,20))}.logo-animation{--animation-duration:1500ms}.logo-animation>svg>path{animation:logoAnimation ease-out;animation-duration:calc(var(--animation-duration)/ 5)}.logo-animation>svg>path[name=logo-line0]{animation-delay:0s}.logo-animation>svg>path[name=logo-line1]{animation-delay:calc(1 * var(--animation-duration)/ 5)}.logo-animation>svg>path[name=logo-line2]{animation-delay:calc(2 * var(--animation-duration)/ 5)}.logo-animation>svg>path[name=logo-line3]{animation-delay:calc(3 * var(--animation-duration)/ 5)}.logo-animation>svg>path[name=logo-dot]{animation-delay:calc(4 * var(--animation-duration)/ 5)}.text-big{font-size:calc(1.5 * var(--default-font-size,19pt));font-weight:700;margin:20px 0 10px 0}.text-little,.tooltip{font-size:calc(.75 * var(--default-font-size,19pt))}.text-tiny{font-size:calc(.5 * var(--default-font-size,19pt))}.text-mini{font-size:calc(.35 * var(--default-font-size,19pt))}.is-monotext{font-family:"Lucida Console",Monaco,monospace}.is-dashed{border-style:dashed}.is-center{text-align:center;margin:auto}.is-left{text-align:left;left:0}.is-right{text-align:right;right:0}.is-hidden,div.is-hidden,div.silentStartup{display:none!important}.got-margin{margin:20px 0 20px 0}@media (min-width:1000px){#nav-right-small-screen{display:none}#nav-right-big-screen{display:flex}nav{height:calc(1.5 * var(--default-height-size,20))}div.page-contents{margin-top:calc(2.2 * var(--default-height-size,20) + 20px)}div.area{flex-direction:row}}@media (max-width:999px){#nav-right-small-screen{display:flex}#nav-right-big-screen{display:none}#nav-unit-name{margin-top:calc(1 * var(--default-height-size,20))}nav{height:calc(2.4 * var(--default-height-size,20) + 20px)}div.page-contents{margin-top:calc(3.8 * var(--default-height-size,20) + 20px)}div.area{flex-direction:column}}@media (min-width:550px){.nav-middle-area{display:flex}}@media (max-width:549px){.nav-middle-area{display:none}div.icon>.tab-text{max-width:calc(2.25px * var(--overflow-tab-text-size,24));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@keyframes pulse{from{opacity:.25;transform:scale(1)}to{opacity:1;transform:scale(1.25)}}@keyframes fadeGone{0%{opacity:1;height:inherit}50%{opacity:1;height:inherit}99%{opacity:0;height:inherit}100%{opacity:0;height:0}}@keyframes countdown{from{border-color:rgba(var(--main-font-color),.75);width:2px;transform:translateX(50%) translateY(-50%) rotate(0)}to{border-color:rgba(var(--main-font-color),1);width:4px;transform:translateX(50%) translateY(-50%) rotate(360deg)}}@keyframes logoAnimation{0%{opacity:1}100%{opacity:0}} \ No newline at end of file diff --git a/build/0.0.nightly.1/gui.min.js b/build/0.0.nightly.1/gui.min.js new file mode 100644 index 0000000..7bf6087 --- /dev/null +++ b/build/0.0.nightly.1/gui.min.js @@ -0,0 +1 @@ +const guiEasy={logLevel:0,name:"GUI Easy",version:{major:0,minor:0,minimal:1,development:!0,releaseCandidate:0,full:function(){let e=guiEasy.version;return!0===e.development&&e.releaseCandidate>0?e.major+"."+e.minor+".rc"+e.releaseCandidate+"."+e.minimal:!0===e.development?e.major+"."+e.minor+".nightly."+e.minimal:e.major+"."+e.minor+"."+e.minimal}},geekName:function(){return guiEasy.name.replace(" ","-").toLowerCase()},geekNameFull:function(){return guiEasy.geekName()+"-"+guiEasy.version.full()},current:{},fetchSettings:{maxToKeep:5,minToKeep:1,intervalGUIupdater:1e3,intervalTimeKeeper:700,maxToKeepMs:function(){return 6e4/guiEasy.intervalGUIupdater}},nodes:[],startup:[{id:"curly",logText:"HTML build up"},{id:"scrubber",logText:"HTML scrubbing"},{id:"popper",logText:"Adding event handlers"},{id:"pitcher",logText:"Getting data from unit plus setting up user preferences"}],silentStartup:[{id:"butler",logText:"Fetching stuff from internet"},{id:"tender",logText:"The relay runner is being triggered"}],endpoints:{defaultTTL:function(){return 6e4},get:[{endpoint:"json",ttl_fallback:2e3},{endpoint:"buildinfo",ttl_fallback:99999999},{endpoint:"logjson"},{endpoint:"sysinfo_json"},{endpoint:"node_list_json"},{endpoint:"filelist_json"},{endpoint:"i2cscanner_json"},{endpoint:"pinstates_json"},{endpoint:"timingstats_json",ttl_fallback:999999},{endpoint:"wifiscanner_json"}],post:[{endpoint:"factoryreset_json"},{endpoint:"upload_json"}]},fetchingWait:"Fetching not yet completed, please wait...",maxTasks:function(e="ESP82XX"){return"ESP82XX"===e?12:"ESP32"===e?48:void 0},maxValuesPerTask:function(e="ESP82XX"){return"ESP82XX"===e?4:"ESP32"===e?8:void 0},maxNotification:function(e="ESP82XX"){return"ESP82XX"===e?3:"ESP32"===e?3:void 0},maxController:function(e="ESP82XX"){return"ESP82XX"===e?3:"ESP32"===e?3:void 0},maxPluginConfigVar:function(e="ESP82XX"){return"ESP82XX"===e?8:"ESP32"===e?8:void 0},maxPluginConfigFloatVar:function(e="ESP82XX"){return"ESP82XX"===e?4:"ESP32"===e?4:void 0},maxPluginConfigLongVar:function(e="ESP82XX"){return"ESP82XX"===e?4:"ESP32"===e?4:void 0},maxPluginExtraConfigVar:function(e="ESP82XX"){return"ESP82XX"===e?16:"ESP32"===e?16:void 0},maxFormulaLength:function(e="ESP82XX"){return"ESP82XX"===e?40:"ESP32"===e?40:void 0},timelist:{week:[{text:"Last",value:0,disabled:!1,note:""},{text:"1st",value:1,disabled:!1,note:""},{text:"2nd",value:2,disabled:!1,note:""},{text:"3rd",value:3,disabled:!1,note:""},{text:"4th",value:4,disabled:!1,note:""}],day:[{text:"Monday",value:1,disabled:!1,note:""},{text:"Tuesday",value:2,disabled:!1,note:""},{text:"Wednesday",value:3,disabled:!1,note:""},{text:"Thursday",value:4,disabled:!1,note:""},{text:"Friday",value:5,disabled:!1,note:""},{text:"Saturday",value:6,disabled:!1,note:""},{text:"Sunday",value:7,disabled:!1,note:""}],month:[{text:"January",value:1,disabled:!1,note:""},{text:"February",value:2,disabled:!1,note:""},{text:"Mars",value:3,disabled:!1,note:""},{text:"April",value:4,disabled:!1,note:""},{text:"May",value:5,disabled:!1,note:""},{text:"June",value:6,disabled:!1,note:""},{text:"July",value:7,disabled:!1,note:""},{text:"August",value:8,disabled:!1,note:""},{text:"September",value:9,disabled:!1,note:""},{text:"October",value:10,disabled:!1,note:""},{text:"November",value:11,disabled:!1,note:""},{text:"December",value:12,disabled:!1,note:""}]},gpiolist:function(e="ESP82XX"){return"ESP82XX"===e?[{text:"- None -",value:-1,disabled:!1,note:""},{text:"GPIO 0 (D3)",value:0,disabled:!1,note:"⚠"},{text:"GPIO 1 (D10)",value:1,disabled:!0,note:"Tx0"},{text:"GPIO 2 (D4)",value:2,disabled:!1,note:"⚠"},{text:"GPIO 3 (D9)",value:3,disabled:!0,note:"Rx0"},{text:"GPIO 4 (D2)",value:4,disabled:!1,note:""},{text:"GPIO 5 (D1)",value:5,disabled:!1,note:""},{text:"GPIO 9 (D11)",value:9,disabled:!1,note:"⚠"},{text:"GPIO 10 (D10)",value:10,disabled:!1,note:"⚠"},{text:"GPIO 12 (D12)",value:12,disabled:!1,note:""},{text:"GPIO 13 (D13)",value:13,disabled:!1,note:""},{text:"GPIO 14 (D14)",value:14,disabled:!1,note:""},{text:"GPIO 15 (D15)",value:15,disabled:!1,note:"⚠"},{text:"GPIO 16 (D16)",value:16,disabled:!1,note:""}]:"ESP32"===e?null:void 0},tabs:{left:["main","config","hardware","devices"],right:["controllers","notification","tools","rules"]},guiStats:{pageSize:0,bootTime:0,eventCalls:0,eventCallsTotal:0},syntax:{curlyLC:0,curly:["fetching","input","table","goto","button","version","devicetable","controllertable","notificationtable","setup","notifier","drawer","navbar","unit","unitname","modal","menu","wave","page","logo","icon"]},configDat:{}};guiEasy.configDat.configDatParseConfig=[{prop:"status.PID",type:"int32"},{prop:"status.version",type:"int32"},{prop:"status.build",type:"int16"},{prop:"config.IP.ip",type:"bytes",length:4},{prop:"config.IP.gw",type:"bytes",length:4},{prop:"config.IP.subnet",type:"bytes",length:4},{prop:"config.IP.dns",type:"bytes",length:4},{prop:"config.experimental.ip_octet",type:"byte"},{prop:"config.general.unitnr",type:"byte"},{prop:"config.general.unitname",type:"string",length:26},{prop:"config.ntp.host",type:"string",length:64},{prop:"config.sleep.sleeptime",type:"int32"},{prop:"hardware.i2c.sda",type:"byte"},{prop:"hardware.i2c.scl",type:"byte"},{prop:"hardware.led.gpio",type:"byte"},{prop:"Pin_sd_cs",type:"byte"},{prop:"hardware.gpio",type:"bytes",length:17},{prop:"config.log.syslog_ip",type:"bytes",length:4},{prop:"config.espnetwork.port",type:"int32"},{prop:"config.log.syslog_level",type:"byte"},{prop:"config.log.serial_level",type:"byte"},{prop:"config.log.web_level",type:"byte"},{prop:"config.log.sd_level",type:"byte"},{prop:"config.serial.baudrate",type:"int32"},{prop:"config.mqtt.interval",type:"int32"},{prop:"config.sleep.awaketime",type:"byte"},{prop:"CustomCSS",type:"byte"},{prop:"config.dst.enabled",type:"byte"},{prop:"config.experimental.WDI2CAddress",type:"byte"},{prop:"config.rules.enabled",type:"byte"},{prop:"config.serial.enabled",type:"byte"},{prop:"config.ssdp.enabled",type:"byte"},{prop:"config.ntp.enabled",type:"byte"},{prop:"config.experimental.WireClockStretchLimit",type:"int32"},{prop:"GlobalSync",type:"byte"},{prop:"config.experimental.ConnectionFailuresThreshold",type:"int32"},{prop:"TimeZone",type:"int16",signed:!0},{prop:"config.mqtt.retain_flag",type:"byte"},{prop:"hardware.spi.enabled",type:"byte"},[...Array(guiEasy.maxController())].map((e,t)=>({prop:`controllers[${t}].protocol`,type:"byte"})),[...Array(guiEasy.maxNotification())].map((e,t)=>({prop:`notifications[${t}].type`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].device`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].OLD_TaskDeviceID`,type:"int32"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].gpio1`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].gpio2`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].gpio3`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].gpio4`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].pin1pullup`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].configs`,type:"ints",length:guiEasy.maxPluginConfigVar()})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].pin1inversed`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].configs_float`,type:"floats",length:guiEasy.maxPluginConfigFloatVar()})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].configs_long`,type:"longs",length:guiEasy.maxPluginConfigLongVar()})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].OLD_senddata`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].global_sync`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].data_feed`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].interval`,type:"int32"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].enabled`,type:"byte"})),[...Array(guiEasy.maxController())].map((e,t)=>({prop:`controllers[${t}].enabled`,type:"byte"})),[...Array(guiEasy.maxNotification())].map((e,t)=>({prop:`notifications[${t}].enabled`,type:"byte"})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].TaskDeviceID`,type:"longs",length:guiEasy.maxController()})),[...Array(guiEasy.maxTasks())].map((e,t)=>({prop:`tasks[${t}].TaskDeviceSendData`,type:"bytes",length:guiEasy.maxController()})),{prop:"hardware.led.inverse",type:"byte"},{prop:"config.sleep.sleeponfailiure",type:"byte"},{prop:"UseValueLogger",type:"byte"},{prop:"ArduinoOTAEnable",type:"byte"},{prop:"config.dst.start",type:"int16"},{prop:"config.dst.end",type:"int16"},{prop:"UseRTOSMultitasking",type:"byte"},{prop:"hardware.reset.pin",type:"byte"},{prop:"config.log.syslog_facility",type:"byte"},{prop:"StructSize",type:"int32"},{prop:"config.mqtt.useunitname",type:"byte"},{prop:"config.location.lat",type:"float"},{prop:"config.location.long",type:"float"},{prop:"config._emptyBit",type:"bit"},{prop:"config.general.appendunitno",type:"bit"},{prop:"config.mqtt.changeclientidrecon",type:"bit"},{prop:"config.rules.oldengine",type:"bit"},{prop:"config.wifi.forcebgmode",type:"bit"},{prop:"config.wifi.restartconnlost",type:"bit"},{prop:"config.power.ecomode",type:"bit"},{prop:"config.wifi.nosleep",type:"bit"},{prop:"config.rules.tolerantargs",type:"bit"},{prop:"config.rules.SendToHTTPack",type:"bit"},{prop:"config.wifi.gratuitousARP",type:"bit"},{prop:"config._bits2",type:"byte"},{prop:"config._bits3",type:"byte"},{prop:"ResetFactoryDefaultPreference",type:"int32"}].flat(),guiEasy.configDat.taskSettings=[{prop:"index",type:"byte"},{prop:"name",type:"string",length:guiEasy.maxFormulaLength()+1},[...Array(guiEasy.maxValuesPerTask())].map((e,t)=>({prop:`values[${t}].formula`,type:"string",length:guiEasy.maxFormulaLength()+1})),[...Array(guiEasy.maxValuesPerTask())].map((e,t)=>({prop:`values[${t}].name`,type:"string",length:guiEasy.maxFormulaLength()+1})),{prop:"value_names",type:"string",length:guiEasy.maxFormulaLength()+1},{prop:"plugin_config_long",type:"longs",length:guiEasy.maxPluginExtraConfigVar()},{prop:"decimals",type:"bytes",length:guiEasy.maxValuesPerTask()},{prop:"plugin_config",type:"ints",length:guiEasy.maxPluginExtraConfigVar()}].flat(),guiEasy.configDat.controllerSettings=[{prop:"dns",type:"byte"},{prop:"IP",type:"bytes",length:4},{prop:"port",type:"int32"},{prop:"hostname",type:"string",length:65},{prop:"publish",type:"string",length:129},{prop:"subscribe",type:"string",length:129},{prop:"MQTT_lwt_topic",type:"string",length:129},{prop:"lwt_message_connect",type:"string",length:129},{prop:"lwt_message_disconnect",type:"string",length:129},{prop:"minimal_time_between",type:"int32"},{prop:"max_queue_depth",type:"int32"},{prop:"max_retry",type:"int32"},{prop:"delete_oldest",type:"byte"},{prop:"client_timeout",type:"int32"},{prop:"must_check_reply",type:"byte"}],guiEasy.configDat.notificationSettings=[{prop:"server",type:"string",length:65},{prop:"port",type:"int16"},{prop:"domain",type:"string",length:65},{prop:"sender",type:"string",length:65},{prop:"receiver",type:"string",length:65},{prop:"subject",type:"string",length:129},{prop:"body",type:"string",length:513},{prop:"pin1",type:"byte"},{prop:"pin2",type:"byte"},{prop:"user",type:"string",length:49},{prop:"pass",type:"string",length:33}],guiEasy.configDat.securitySettings=[{prop:"WifiSSID",type:"string",length:32},{prop:"WifiKey",type:"string",length:64},{prop:"WifiSSID2",type:"string",length:32},{prop:"WifiKey2",type:"string",length:64},{prop:"WifiAPKey",type:"string",length:64},[...Array(guiEasy.maxController())].map((e,t)=>({prop:`controllers[${t}].user`,type:"string",length:26})),[...Array(guiEasy.maxController())].map((e,t)=>({prop:`controllers[${t}].password`,type:"string",length:64})),{prop:"password",type:"string",length:26},{prop:"AllowedIPrangeLow",type:"bytes",length:4},{prop:"AllowedIPrangeHigh",type:"bytes",length:4},{prop:"IPblockLevel",type:"byte"},{prop:"ProgmemMd5",type:"bytes",length:16},{prop:"md5",type:"bytes",length:16}].flat();const set=(e,t,n)=>{let a=t.replace(/\[/g,".").replace(/]/g,"").split(".");if(a.length>1)for(let t=0;t>this.bitbytepos++&1;this.bitbyte=n?this.bitbyte|1<0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),n&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(n));let a={type:"clipboard",str:e};guiEasy.popper.tryCallEvent(a)},swapKey2Value:function(e){let t={};for(let n in e)t[e[n]]=n;return t},rgb2hex:function(e){e=e.split(",");let t="#";for(let n=0;n")),e},capitalWord:function(e){let t=["ok","gpio","led","ssid","spi","wpa","ap","ip","esp","dns","id","i2c","sda","scl","ntp","dst","gui","json","mqtt","p2p","rssi","bssid","dhcp","cpu","ram","sta","gw","l/r","http","udp"],n=e.toLowerCase().split(" ");for(let e=0;ee.json()).then(l=>{e[t].live[n]=l,e[t].live[n].timestamp=Date.now(),void 0!==l.TTL||(e[t].live[n].TTL=a),"logjson"===n&&void 0!==l.Log.TTL&&(e[t].live[n].TTL=l.Log.TTL),e[t].live[n].TTL_fallback=a;let i=Date.now()+e[t].live[n].TTL;e[t].scheduler.push([i,n]),e[t].scheduler.sort(),e[t].stats.lastRun=Date.now(),e[t].stats[n].run=Date.now()-s,e[t].stats[n].timestamp=Date.now(),e[t].stats.error=0}).catch(a=>{console.error("Error fetching ("+n+"): ",a),e[t].stats.error++;let l=Date.now()+e[t].stats[n].TTL_fallback;e[t].scheduler.push([l,n]),e[t].scheduler.sort(),e[t].stats.lastRun=Date.now(),e[t].stats[n].run=Date.now()-s,e[t].stats[n].timestamp=Date.now(),guiEasy.fetchCount.error++}),guiEasy.fetchCount.current++,guiEasy.fetchCount.current===guiEasy.fetchCount.max&&(guiEasy.current.live=t)},fetchConfigDat:function(e,t,n=!0){let a=Date.now(),s=["config.dat","notification.dat","security.dat"],l="http://"+e[t].ip+"/"+s[0]+"?callback="+a,i="http://"+e[t].ip+"/"+s[1]+"?callback="+a,o="http://"+e[t].ip+"/"+s[2]+"?callback="+a;fetch(l).then(e=>e.arrayBuffer()).then(async s=>{let l=helpEasy.parseConfigDat,r=guiEasy.configDat;const d=l(s,r.configDatParseConfig);[...Array(guiEasy.maxTasks())].map((e,t)=>{e=helpEasy.parseConfigDat,d.tasks[t].settings=e(s,r.taskSettings,4096+2048*t),d.tasks[t].extra=e(s,r.taskSettings,5120+2048*t)}),[...Array(guiEasy.maxController())].map((e,t)=>{e=helpEasy.parseConfigDat,d.controllers[t].settings=e(s,r.controllerSettings,27648+2048*t),d.controllers[t].extra=e(s,r.controllerSettings,28672+2048*t)});const u=await fetch(i).then(e=>e.arrayBuffer());[...Array(guiEasy.maxNotification())].map((e,t)=>{e=helpEasy.parseConfigDat,d.notifications[t].settings=e(u,r.notificationSettings,1024*t)});const p=await fetch(o).then(e=>e.arrayBuffer());d.security=[...Array(1)].map((e,t)=>(0,helpEasy.parseConfigDat)(p,r.securitySettings,1024*t)),e[t].settings=Object.assign({},d),e[t].settings.timestamp=a,!0===n&&(e[t].settingsBrowser=Object.assign({},d),e[t].settingsBrowser.timestamp=a),guiEasy.current.config=t,e[t].stats.lastRun=Date.now(),void 0===e[t].stats.configDat&&(e[t].stats.configDat={}),e[t].stats.configDat.run=Date.now()-a,e[t].stats.configDat.timestamp=a})},parseConfigDat:function(e,t,n){const a=new DataParser(e);n&&(a.offset=n);const s={};return t.map(e=>{const t=e.length?e.length:e.signed;set(s,e.prop,a[e.type](t,e.signed))}),s},getCurrentIndex:function(e=""){let t=document.querySelectorAll("[data-current-index]")[0];return"online"===e?"true"===t.dataset.currentOnline:parseInt(t.dataset.currentIndex)},setCurrentIndex:function(e){let t=document.querySelectorAll("[data-current-index]")[0];t.dataset.currentIndex=e,t.dataset.currentOnline="true"},setCurrentOnline:function(e){let t=document.querySelectorAll("[data-current-index]")[0];t.dataset.currentOnline="online"===e?"true":"false"},scheduleFetch:function(e,t,n){if(void 0===e[t].stats&&(e[t].stats={error:0}),void 0===n){let n=guiEasy.endpoints.get;guiEasy.fetchCount={max:0,current:0,error:0},e[t].live={},e[t].history={},e[t].scheduler=[];for(let a=0;aguiEasy.endpoints.defaultTTL()){e[t].stats[s]={TTL_fallback:guiEasy.endpoints.defaultTTL(),run:-1,timestamp:Date.now()};let n=Date.now()+a*guiEasy.fetchSettings.intervalTimeKeeper+2e3;e[t].scheduler.push([n,s]),e[t].scheduler.sort()}else{e[t].stats[s]={TTL_fallback:n[a].ttl_fallback,run:-1,timestamp:Date.now()},e[t].scheduler.push([0,s]),e[t].scheduler.sort();let l=guiEasy.fetchCount.max*guiEasy.fetchSettings.intervalTimeKeeper;setTimeout(function(){helpEasy.getDataFromNode(e,t,s,n[a].ttl_fallback)},l),guiEasy.fetchCount.max++}}}else{let a=guiEasy.fetchSettings,s=e[t].stats[n].TTL_fallback;helpEasy.getDataFromNode(e,t,n,s);let l=Object.assign({},e[t].live[n]);l.fetched=Date.now(),void 0===e[t].history[n]&&(e[t].history[n]=[]),e[t].history[n].push(l),e[t].history[n].length>a.maxToKeep*a.maxToKeepMs-1&&e[t].history[n].shift()}},getGuiInFields:function(){void 0===guiEasy.jsonPathsIN&&(guiEasy.jsonPathsIN=[]);let e=guiEasy.jsonPathsIN,t=document.querySelectorAll("[data-json-path]");for(let n=0;n"+a+"";for(let e=0;e"+s[e]+"":n+=s[e],e!==s.length-1?n+="
":n+="";for(let e=0;e":n+="";for(let e=0;e",n+=helpEasy.rssiToSVG(i[e]),e!==i.length-1?n+="
"+i[e]+" dBm
":n+="
"+i[e]+" dBm
";a="",s=[],l=[],i=[]}n+="\n \n
"+e.length+" separate APs found
\n
Fetched: "+helpEasy.epochToHHMMSS(e.timestamp)+"
\n
Scheduled: "+helpEasy.epochToHHMMSS(e.timestamp+e.TTL)+"
\n \n ",set(guiEasy.nodes[t],"modal.table.wifi",n)},filelist:function(e,t){let n=["notification.dat","config.dat","security.dat"],a=guiEasy.nodes[helpEasy.getCurrentIndex()].deleteFile;guiEasy.nodes[helpEasy.getCurrentIndex()].deleteFile=null;let s='\n
\n \n \n \n \n \n ',l=e.sort(helpEasy.sortObjectArray("fileName"));for(let e=0;e\n \n \n \n "}s+="
File NameSize
"+l[e].fileName+"",-1===n.indexOf(l[e].fileName)&&(s+=' \n \n '+guiEasy.curly.icon(["trash"])+"\n \n "),s+="\n \n "+Math.floor(l[e].size/1024*10)/10+"kB\n
",set(guiEasy.nodes[t],"modal.table.files",s)},timingstatsList:function(e,t){let n=[],a=["plugin","controller","misc"];for(let t=0;t\n \n \n \n \n \n \n ';for(let e=s.length-1;e>-1;e--){let t="";s[e].subLevels>1&&(t="
"+s[e].subKey),l+='\n \n \n \n \n \n "}l+="\n
TypeTimerProcess
\n '+s[e].type+("000"+s[e].id).slice(-3)+'\n \n '+s[e].sortValue+'\n
\n avg: '+s[e].avg+"
\n min: "+s[e].min+"
\n max: "+s[e].max+"
\n count: "+s[e].count+"
\n per sec: "+s[e]["call-per-sec"]+"\n
\n 		\n "+s[e].name+t+"\n
\n
Fetched: "+helpEasy.epochToHHMMSS(e.timestamp)+"
\n
Scheduled: "+helpEasy.epochToHHMMSS(e.timestamp+e.TTL)+"
\n \n ",set(guiEasy.nodes[t],"modal.table.timingstats_json",l)},twoLevelJsonToList:function(e,t){let n=guiEasy.nodes[t].live[e],a="
",s=Object.keys(n);for(let e=0;e"+helpEasy.capitalWord(helpEasy.cleanupWord(s[e]))+"
",a+="";for(let l=0;l"}a+="
"+helpEasy.capitalWord(i)+""+o+"
"}}return a+="\n
Fetched: "+helpEasy.epochToHHMMSS(n.timestamp)+"
\n
Scheduled: "+helpEasy.epochToHHMMSS(n.timestamp+n.TTL)+"
\n \n ",set(guiEasy.nodes[t],"modal.table."+e,a),a},guiUpdater:function(){let e=Date.now(),t=helpEasy.getCurrentIndex(),n=guiEasy.nodes[t];void 0===guiEasy.jsonPathsIN&&(guiEasy.jsonPathsIN=[]);let a=guiEasy.jsonPathsIN;for(let e=0;e";set(guiEasy.nodes[t],"modal.table.wifi",e)}if(void 0!==n.live.filelist_json)helpEasy.filelist(n.live.filelist_json,t);else{let e="
"+guiEasy.fetchingWait+"
";set(guiEasy.nodes[t],"modal.table.files",e)}if(void 0!==n.live.sysinfo_json)helpEasy.twoLevelJsonToList("sysinfo_json",t);else{let e="
"+guiEasy.fetchingWait+"
";set(guiEasy.nodes[t],"modal.table.sysinfo_json",e)}if(void 0!==n.live.timingstats_json)helpEasy.timingstatsList(n.live.timingstats_json,t);else{let e="
"+guiEasy.fetchingWait+"
";set(guiEasy.nodes[t],"modal.table.timingstats_json",e)}i=document.querySelectorAll("[data-modal-table]");for(let e=0;eArray(r).fill("")),u=[...Array(o)].fill("");for(let e=0;e0&&document.getElementById(a+"hr").classList.remove("is-hidden"),document.getElementById(a+"name").innerText!==d[e][n].name&&(document.getElementById(a+"name").innerText=d[e][n].name),document.getElementById(a+"value").innerText!==d[e][n].value&&(document.getElementById(a+"value").innerText=d[e][n].value)}}guiEasy.current.gui=t,void 0===guiEasy.nodes[t].stats.gui&&(guiEasy.nodes[t].stats.gui={}),guiEasy.nodes[t].stats.gui.run=Date.now()-e,guiEasy.nodes[t].stats.gui.timestamp=e},clearTaskValues:function(e,t=null){let n,a,s=guiEasy.maxValuesPerTask(),l=[],i=[];if(null!==t){for(let o=1;o<=s;o++)(n=document.querySelectorAll("[id='task-"+(e+1)+"-value-"+(t+o)+"-name']")).length>0&&l.push([].slice.call(n)),(n=document.querySelectorAll("[id='task-"+(e+1)+"-value-"+(t+o)+"-value']")).length>0&&l.push([].slice.call(n)),null!==(a=document.getElementById("task-"+(e+1)+"-value-"+(t+o)+"-hr"))&&i.push(a);l.length>0&&l.map(e=>e.map(e=>e.innerHTML="")),i.length>0&&i.map(e=>e.classList.add("is-hidden"))}else(n=document.querySelectorAll("[data-clear-task='"+(e+1)+"']")).length>0&&(l=[].slice.call(n)),l.length>0&&l.map(e=>e.innerHTML=""),(a=document.querySelectorAll("[data-clear-hr='"+(e+1)+"']")).length>0&&(i=[].slice.call(a)),i.length>0&&i.map(e=>e.classList.add("is-hidden")),(a=document.querySelectorAll("[data-hide-row='"+(e+1)+"']")).length>0&&(i=[].slice.call(a)),i.length>0&&i.map(e=>e.classList.add("is-hidden"))},uploadBinaryAsFile:function(e,t,n){let a,s,l,i=document.getElementById("label-"+n),o=i.innerText;if("generic"===e&&(a=35,l="/upload",s=guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage.spiffs_free),"firmware"===e&&(helpEasy.schedulerDelay(guiEasy.nodes,helpEasy.getCurrentIndex(),6e4),a=25,l="/update",s=guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage.sketch_free),(s*=1e3)100&&(e=100),i.innerText=t.name+" ("+e+"%)"},n),u=new FormData;u.append("file",t),u.append("name",e),u.append("enctype","multipart/form-data");let p="http://"+guiEasy.nodes[helpEasy.getCurrentIndex()].ip+l;fetch(p,{method:"POST",body:u}).then(e=>e.text()).then(n=>{if(clearInterval(d),i.innerText=t.name+" (100%)",helpEasy.addToLogDOM(n,3),setTimeout(function(){helpEasy.blinkElement(i.id,"success")},500),"generic"===e&&setTimeout(function(){helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler,"sysinfo_json"),helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler,"filelist_json"),i.innerText=o,helpEasy.updateIndicator()},900),"firmware"===e){helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler,"sysinfo_json");let e=30,t=setInterval(function(){i.innerText="Will reboot in "+e,--e<1&&(clearInterval(t),location.reload())},1e3)}})}},updateIndicator:async function(){setTimeout(function(){let e=guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage,t=Math.floor(parseInt(e.spiffs_free)/parseInt(e.spiffs_size)*100),n=document.getElementById("modal-input-upload-storage-free"),a=document.getElementById("modal-input-upload-storage-occupied");n.style.width=t+"%",n.innerText=parseInt(e.spiffs_free)+"kB",a.style.width=100-t+"%",a.innerText=(parseInt(e.spiffs_size)-parseInt(e.spiffs_free)).toString()+"kB"},5e3)},parseHTMLstring:function(e,t,n){let a=document.createElement("html");a.innerHTML=e;let s="";return"tag"===t&&(s=a.getElementsByTagName(n)[0].innerHTML.toString()),"name"===t&&(s=a.getElementsByName(n)[0].innerHTML.toString()),"class"===t&&(s=a.getElementsByClassName(n)[0].innerHTML.toString()),"id"===t&&(s=a.getElementById(n).innerHTML.toString()),"query"===t&&(s=a.querySelectorAll(n)[0].innerHTML.toString()),a.remove(),s},guiUpdaterSettings:function(e){let t=guiEasy.nodes[helpEasy.getCurrentIndex()],n=defaultSettings,a=helpEasy.getGuiInFields();e=void 0===e?"settings":"settingsBrowser";for(let s=0;s"+helpEasy.capitalWord(e[l[i].checked+"Text"])+e.tooltip+""}}}}},gaugeLevel:function(e,t){let n,a,s=e.parentNode,l=helpEasy.getjsonPathData(e.dataset.jsonPathGauge.split("--"),t),i=parseInt(e.dataset.max),o=parseInt(e.dataset.min),r="";i>o?((a=(l-o)/(i-o))>.6&&(r="main-info"),a>.8&&(r="main-warning"),a<.05&&(r="main-success")):((a=(l-i)/(o-i))<.4&&(r="main-info"),a<1-.8&&(r="main-warning"),a>.95&&(r="main-success")),(n=574.5*(1-a))>574.5&&(n=574.5),n<0&&(n=0),s.classList.remove("main-info","main-warning"),""!==r&&s.classList.add(r),e.style="stroke-dashoffset:"+n+";"},rssiToBars:function(e){return e>=-55?"level-5":e>=-66?"level-4":e>=-77?"level-3":e>=-88?"level-2":"level-1"},rssiToSVG:function(e){let t=helpEasy.rssiToBars(e);return guiEasy.curly.icon(["wifi",t])},getjsonPathData:function(e,t){return 1===e.length?t[e[0]]:2===e.length?t[e[0]][e[1]]:3===e.length?t[e[0]][e[1]][e[2]]:4===e.length?t[e[0]][e[1]][e[2]][e[3]]:5===e.length?t[e[0]][e[1]][e[2]][e[3]][e[4]]:6===e.length?t[e[0]][e[1]][e[2]][e[3]][e[4]][e[5]]:7===e.length?t[e[0]][e[1]][e[2]][e[3]][e[4]][e[5]][e[6]]:8===e.length?t[e[0]][e[1]][e[2]][e[3]][e[4]][e[5]][e[6]][e[7]]:void 0},sortObjectArray:e=>(t,n)=>t[e]===n[e]?0:t[e]=t&&console.log(e)},numberOfFound:function(e,t){return((e||"").match(t)||[]).length},findInArray:function(e,t){return t.indexOf(e)>-1},listOfProcesses:function(e,t,n,a){let s=document.getElementById("modal-loading-log"),l=document.getElementById("modal-loading-progress");document.getElementById("fallback-loading-animation").classList.add("is-hidden"),s.innerHTML+="
"+t+"
",l.max=guiEasy[a].length,void 0===guiEasy.guiStats[a]&&(guiEasy.guiStats[a]={}),guiEasy.guiStats[a][e]="running"},processDone:function(e,t){let n=document.getElementById("modal-loading-progress"),a=document.getElementById("log-entry-"+e),s=Date.now()-a.dataset.timestart;if(guiEasy.guiStats.bootTime+=s,a.innerHTML+=" ("+s+"ms)",a.classList.add("loading-is-done"),"startup"===t){if(n.max===n.value){let e=document.getElementById("modal-container");document.getElementById("modal-loading-screen").classList.add("is-hidden"),e.classList.add("is-hidden"),e.classList.remove("is-black"),helpEasy.addToLogDOM("total boot time: "+guiEasy.guiStats.bootTime+"ms",1)}n.value++}guiEasy.guiStats[t][e]="done"},internet:function(){let e=!1;return!0===window.navigator.onLine&&(e=!0),e},welcomePhrase:function(){let e=(new Date).getHours();return e>17?"Good evening!":e>11?"Good afternoon!":e>5?"Good morning!":"Hi!"},urlParams:function(){let e={};return window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(t,n,a){e[n.toLowerCase()]=a.toLowerCase()}),e},locationByIP:async function(){let e="https://ipapi.co/json?at="+Date.now()+"&gui="+guiEasy.geekNameFull(),t=await fetch(e);return await t.json()},blinkElement:function(e,t){let n=document.getElementById(e);n.classList.add("main-"+t),setTimeout(function(){n.classList.remove("main-"+t)},250)},dashGroupContainerOpen:function(e=""){return""===e?"
":"
"+helpEasy.capitalWord(e)+"
"},dashBoxContainerOpen:function(){return"
"},dashContainerClose:function(){return"
"},addToolsButton:function(e){let t="",n=e.type,a="";return void 0!==e.color&&(a=" main-"+e.color),"command"===n&&(t+="\n
\n \n
'+helpEasy.capitalWord(e.text)+"
\n
\n "),"info"===n&&(t+="\n
\n \n
'+helpEasy.capitalWord(e.text)+"
\n
\n "),"scanner"===n&&(t+="\n
\n \n
'+helpEasy.capitalWord(e.text)+"
\n
\n "),"system"===n&&(t+="\n
\n \n
'+helpEasy.capitalWord(e.text)+"
\n
\n "),t},addInput:function(e){let t=e.type,n="";void 0!==e.disabled&&!0===e.disabled&&(n="disabled");let a=e.title.split(" ").join("-"),s="generic-input-",l="";!0===e.toSettings&&(s="settings-input-",l+='data-settings="'+e.settingsId+'"'),void 0!==e.settingsIP&&(l+='data-settings-ip="'+e.settingsIP+'"'),void 0!==e.settingsRegEx&&(l+='data-settings-regex="'+e.settingsRegEx+'"'),void 0!==e.valueIfBlank&&(l+='data-value-if-blank="'+e.valueIfBlank+'"'),void 0!==e.allowedBlank&&(l+='data-allowed-blank="'+e.allowedBlank+'"'),void 0!==e.optionListOffset&&(l+='data-option-list-offset="'+e.optionListOffset+'"'),void 0!==e.list2value&&(l+='data-list2value="'+e.list2value+'"'),a=s+a;let i="",o="";void 0!==e.tooltip&&(i="
"+e.tooltip+"
",o="got-tooltip");let r="
";if("string"===t&&(r+=""+helpEasy.capitalWord(e.title)+i+"",r+="\n \n '),"password"===t&&(r+=""+helpEasy.capitalWord(e.title)+i+"",r+="\n \n '),"dropdown"===t){r+=""+helpEasy.capitalWord(e.title)+i+"",r+=' \n \n ";let t=e.optionList;for(let n=0;n"+s+i+"":r+=""}r+='\n \n '}if("toggle"===t&&(r+='\n \n \n "),"number"===t){let t="";""!==e.placeholder&&(t=" ["+e.placeholder+"]"),r+='\n \n \n "}return r+="
"},addLine:function(){return"
"},openArea:function(e){let t=e.replace(" ","-")+"-area";return defaultSettings.areasMinimized?'\n
\n
'+helpEasy.capitalWord(e)+'
\n ':'\n
\n
'+helpEasy.capitalWord(e)+'
\n '},closeArea:function(){return"
"},openColumn:function(e){return void 0===e?"
":"data"===e.split("-")[0]?"
":"
"},closeColumn:function(){return"
"},checkIfIP:function(e){return/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(e)},screenshot:function(e){if(helpEasy.internet()){let e="screenshot-script",t={type:"wave",text:guiEasy.curly.icon(["screenshot"]),color:"inverted"},n=guiEasy.current.backgroundColor;void 0===n&&(n="#3492e2");let a=guiEasy.current.invertedColor;void 0===a&&(a="#2F4252");let s=helpEasy.capitalWord(guiEasy.current.tab.id.split("-")[0]),l=guiEasy.current.modal;void 0===l?l=guiEasy.current.tab:(n=a,s=s+"-"+document.getElementById("modal-title-text").innerText.replace(/ /g,"_")),s=guiEasy.nodes[helpEasy.getCurrentIndex()].live.json.System["Unit Name"]+"-"+s,guiEasy.popper.tryCallEvent(t);let i=document.createElement("script");i.id=e,i.onload=function(){html2canvas(l,{backgroundColor:n}).then(function(e){helpEasy.binaryDataToFile(e,"image/png",s+".png")})},i.src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.5/html2canvas.min.js",document.head.appendChild(i)}else{let e={type:"wave",text:"No internet!",color:"warning"};guiEasy.popper.tryCallEvent(e)}},binaryDataToFile:function(e,t,n){let a="temp-binary-blob-element",s=document.getElementById(a);null!==s&&s.remove();let l=document.createElement("a");l.id=a,document.body.appendChild(l),l.style.display="none",l.href=e.toDataURL(t),l.download=n,l.click()},favicon:function(e){let t=document.createElement("canvas");t.width=113,t.height=113;let n=t.getContext("2d");n.lineWidth=8,n.fillStyle=e.inverted,n.beginPath(),n.moveTo(0,15),n.lineTo(0,98),n.arc(15,98,15,Math.PI,.5*Math.PI,!0),n.lineTo(15,113),n.lineTo(98,113),n.arc(98,98,15,Math.PI,1.5*Math.PI,!0),n.lineTo(113,98),n.lineTo(113,15),n.arc(98,15,15,0,1.5*Math.PI,!0),n.lineTo(98,0),n.lineTo(15,0),n.arc(15,15,15,0,.5*Math.PI,!0),n.lineTo(0,15),n.closePath(),n.fill(),n.fillStyle=e.font,n.beginPath(),n.arc(90,90,10,0,2*Math.PI),n.closePath(),n.fill(),n.lineCap="round",n.strokeStyle=e.warning,n.beginPath(),n.moveTo(42,99),n.lineTo(99,42),n.closePath(),n.stroke(),n.strokeStyle=e.info,n.beginPath(),n.moveTo(14,99),n.lineTo(99,14),n.closePath(),n.stroke(),n.strokeStyle=e.sunny,n.beginPath(),n.moveTo(14,70),n.lineTo(70,14),n.closePath(),n.stroke(),n.strokeStyle=e.success,n.beginPath(),n.moveTo(14,42),n.lineTo(42,14),n.closePath(),n.stroke();let a=document.getElementById("favicon");null!==a&&a.remove(),(a=document.createElement("link")).id="favicon",a.type="image/x-icon",a.rel="shortcut icon",a.href=t.toDataURL("image/x-icon"),document.head.appendChild(a)}};function initiate(){for(let e=0;e0)return guiEasy.curly(e,t)}helpEasy.processDone(e,t),helpEasy.addToLogDOM(e+" loop count: "+guiEasy.syntax.curlyLC,1)},guiEasy.curly.compileArgs=function(e){let t=[],n=[];t.push(e[0].toLowerCase()),t.push(e.length-1);for(let t=1;t"+guiEasy.geekNameFull()+"
"},guiEasy.curly.unitname=function(){return"
"},guiEasy.curly.modal=function(e){let t=e[0],n="",a="";return"message"!==t?guiEasy.curly[t]:'\n \n "},guiEasy.curly.wave=function(){return'\n
\n
\n
\n '},guiEasy.curly.input=function(e){let t=e[0],n="";return"string"!==t&&"all"!==t||(n+=""),"textarea"!==t&&"all"!==t||(n+="\n
\n
\n
",t+="",n=e.right;let a="";for(let e=0;e",t+="
",t+=""},guiEasy.curly.navbar.tab=function(e){return'\n
  • \n
    \n
    {{ICON-'+e.toUpperCase()+'}}
    \n
    '+helpEasy.capitalWord(e)+"
    \n "},guiEasy.curly.drawer=function(e){let t="";if("theme"===e[0]){let e=defaultSettings.css.variables,n=Math.round((e.length+1)/3+1);t='\n
    \n
    \n
    \n {{ICON-THEME}}\n Theme\n
    \n
    \n
    \n ';let a=0;t+='
    ';for(let s=0;s
    ',a=1),t+=guiEasy.curly.drawer.theme(e[s]);t+='\n
    \n
    \n \n \n \n \n
    \n
    \n ',t+="
    "}return t},guiEasy.curly.drawer.theme=function(e){let t=e[0].split("-");t=t[t.length-1];let n=e[0],a=e[1],s=e[2],l="";if("color"===t){l='\n \n \n "}if("toggle"===t){let e=defaultSettings.css.toggle[n][a],t=s.split("|"),i=t[0];!0!==e&&(i=t[1]),l='\n \n \n "}if("size"===t){let e=defaultSettings.css.size,t=e[n].max;l='\n \n \n "}if("family"===t&&(l="\n "+s+""+guiEasy.curly.drawer.theme.family(n,a)+'\n
    \n "; + } + } +}; + +guiEasy.curly.unitname = function(){ + return "
    "; +}; + +guiEasy.curly.modal = function (arg) { + let type = arg[0]; + let info = ""; + let tables = ""; + let setup = ""; + let inputs = ""; + let buttons = ""; + if (type === "message") { + inputs = "{{INPUT-ALL}}"; + buttons = "{{BUTTON-ALL}}"; + } else { + return guiEasy.curly[type]; + } + return ` + + `; +}; + +guiEasy.curly.wave = function () { + return ` +
    +
    +
    + `; +}; + +guiEasy.curly.input = function (arg) { + let type = arg[0]; + let html = ""; + if (type === "string" || type === "all") { + html += ""; + } + if (type === "textarea" || type === "all") { + html += ` + + `; + } + if (type === "upload" || type === "all") { + html += ` +
    +
    + + + `; + } + return html; +}; + +guiEasy.curly.button = function (arg) { + let type = arg[0]; + let html = ""; + if (type === "ok" || type === "all") { + html += ""; + } + if (type === "cancel" || type === "all") { + html += ""; + } + if (type === "rescan" || type === "all") { + html += ""; + } + if (type === "custom" || type === "all") { + html += ""; + } + return html; +}; + +guiEasy.curly.goto = function (arg) { + let type = arg[0]; + let name = arg[1]; + if (type === "tab") { + return ""; + } +}; + +guiEasy.curly.menu = function (arg) { + let type = arg[0]; + if (type === "action") { + let listItems = [ + {"name": "save", "color": "success", "what": "settings-save"}, + {"name": "cancel", "color": "sunny", "what": "settings-cancel"}, + {"name": "swarm", "color": "inverted", "what": "menu-nodelist"}, + {"name": "ghost", "color": "bg", "what": "ghost-page"}, + {"name": "screenshot", "color": "bg-inverted", "what": "screenshot-page"} + ]; + let html = ""; + for (let i = 0; i < listItems.length; i++) { + html += ` + + `; + } + return ` +
    +
    + +
    + +
    + `; + } +}; + +guiEasy.curly.notifier = function (arg) { + let type = arg[0]; + if (type === "top") { + return ` +
    + `; + } +}; + +guiEasy.curly.notificationtable = function () { + let maxControllers = 3; + let table = ` + + + + + + + `; + for (let t=0; t + + + + + `; + } + table += "
    ControllerServiceInfo
    + + + + ` + + guiEasy.curly.notificationtable.infoCell("host", t) + + `
    ` + + guiEasy.curly.notificationtable.infoCell("port", t) + + + guiEasy.curly.notificationtable.infoCell("enabled", t) + + `
    +
    "; + return table; +}; + +guiEasy.curly.notificationtable.infoCell = function (name, t) { + return ` + + `; +}; + +guiEasy.curly.controllertable = function () { + let maxControllers = 3; + let table = ` + + + + + + + `; + for (let t=0; t + + + + + `; + } + table += "
    ControllerProtocolInfo
    + + + + ` + + guiEasy.curly.controllertable.infoCell("host", t) + + `
    ` + + guiEasy.curly.controllertable.infoCell("port", t) + + + guiEasy.curly.controllertable.infoCell("enabled", t) + + `
    +
    "; + return table; +}; + +guiEasy.curly.controllertable.infoCell = function (name, t) { + return ` + + `; +}; + +guiEasy.curly.devicetable = function () { + //TODO: make a choice if ESP82XX or ESP32, blank = ESP82XX + let x = guiEasy.maxTasks(); + let y = guiEasy.maxValuesPerTask(); + let table = ` + + + + + + + `; + for (let t=0; t + + + "; + } + table += "
    TaskDeviceValue
    + + ` + + guiEasy.curly.devicetable.deviceCell("plugin", t) + + `` + + guiEasy.curly.devicetable.deviceCell("port", t) + + `` + + guiEasy.curly.devicetable.deviceCell("controller", t) + + `` + + guiEasy.curly.devicetable.deviceCell("gpio", t) + + ` +
    +
    + `; + for (let v=0; v
    "; + return table; +}; + +guiEasy.curly.devicetable.deviceCell = function (name, t) { + return ` + + `; +}; + +guiEasy.curly.navbar = function () { + const tabs = guiEasy.tabs; + const middle = "{{UNITNAME}}"; + let html = ` +
    • "; + //Area in between the tab groups... + html += ""; + x = tabs.right; + let rightHtml = ""; + for (let i=0; i < x.length; i++) { + rightHtml += guiEasy.curly.navbar.tab(x[i]); + } + rightHtml += ""; + html += ""; + html += "
    "; + html += ""; + return html; +}; + +guiEasy.curly.navbar.tab = function (name) { + return ` +
  • +
    +
    {{ICON-` + name.toUpperCase() + `}}
    +
    ` + helpEasy.capitalWord(name) + `
    + `; +}; + +guiEasy.curly.drawer = function (arg) { + let type = arg[0]; + let html = ""; + if (type === "theme") { + let x = defaultSettings.css.variables; + let columnRowsMax = Math.round((x.length + 1) / 3 + 1); + // data-open="is-full-size", "is-quarter-size", "is-half-size", "is-small-size" ... no size setting will make it auto height. + html = ` +
    +
    +
    + {{ICON-THEME}} + Theme +
    +
    +
    + `; + let rowCount = 0; + html += '
    '; + for (let i = 0; i < x.length; i++) { + rowCount++; + if (rowCount === columnRowsMax) { + html += '
    '; + rowCount = 1; + } + html += guiEasy.curly.drawer.theme(x[i]); + } + html += ` +
    +
    + + + + +
    +
    + `; + html += "
    "; + } + return html; +}; + +guiEasy.curly.drawer.theme = function (cssVar) { + let type = cssVar[0].split("-"); + type = type[(type.length - 1)]; + let variable = cssVar[0]; + let value = cssVar[1]; + let text = cssVar[2]; + let rowStart = '
    '; + let rowMiddle = ""; + if (type === "color") { + let color = variable.replace("-color", ""); + rowMiddle = ` + + + `; + } + if (type === "toggle") { + let defaultValue = defaultSettings.css.toggle[variable][value]; + let toggleText = text.split("|"); + let defaultText = toggleText[0]; + if (defaultValue !== true) { + defaultText = toggleText[1]; + } + rowMiddle = ` + + + `; + } + if (type === "size") { + let x = defaultSettings.css.size; + let max = x[variable].max; + let min = x[variable].min; + let step = x[variable].step; + let placeholder = x[variable].placeholder; + rowMiddle = ` + + + `; + } + if (type === "family") { + rowMiddle = ` + ` + text + `` + + guiEasy.curly.drawer.theme.family(variable, value) + + ` +
    + "; +}; + +guiEasy.curly.drawer.theme.family = function (variable, defaultValue) { + let x = defaultSettings.css.family[variable]; + let startHTML = '"; +}; \ No newline at end of file diff --git a/src/gui_easy_curly_forms.js b/src/gui_easy_curly_forms.js new file mode 100644 index 0000000..ce0c732 --- /dev/null +++ b/src/gui_easy_curly_forms.js @@ -0,0 +1,58 @@ +//THESE CURLY's ARE A BIT DIFFERENT SINCE THEY ARE CONVERTED @ RUN-TIME + +guiEasy.curly.forms = function (x) { + return guiEasy.curly.forms[x.type](x); +}; + +guiEasy.curly.forms.toggle = function (x) { + let html = ""; + let text = x.args[2].split("|"); + html += ` + + + `; + return html; +}; + +guiEasy.curly.forms.number = function (x) { + let html = ""; + let extra = ""; + if (x.args[4] !== undefined && x.args[4] !== '"') { + extra += ' min="' + x.args[4] + '"'; + } + if (x.args[5] !== undefined && x.args[5] !== '"') { + extra += ' max="' + x.args[5] + '"'; + } + if (x.args[6] !== undefined && x.args[6] !== '"') { + extra += ' step="' + x.args[6] + '"'; + } + html += ` + + + `; + return html; +}; \ No newline at end of file diff --git a/src/gui_easy_curly_icons.js b/src/gui_easy_curly_icons.js new file mode 100644 index 0000000..f20cbf9 --- /dev/null +++ b/src/gui_easy_curly_icons.js @@ -0,0 +1,279 @@ +// ONLY PATH'S OF SVGs ARE USED +guiEasy.curly.logo = function(arg) { + let xml = " xmlns='http://www.w3.org/2000/svg'"; + let size = arg[0]; + if (size === undefined) { + size = 'normal'; + } + return ` + + + + + + + + + `; +}; + +guiEasy.curly.icon = function(arg) { + let icon = arg[0]; + let xml = " xmlns='http://www.w3.org/2000/svg'"; + let color = "class='fill-main-font'"; + let viewbox = " viewBox='0 0 24 24'"; + if (icon === "wifi") { + let name; + if (arg[1] === "self") { + name = "name='unit-wifi-rssi-icon'"; + } else { + name = "signal='" + arg[1] + "'"; + } + return ` + + + + + + + + `; + } + //BELOW, ICONS (SVG PATH's) ON COURTESY OF https://www.ICONS8.com + if (icon === "action") { + return ` + + + + `; + } + if (icon === "theme") { + return ` + + + + `; + } + if (icon === "save") { + return ` + + + + `; + } + if (icon === "cancel") { + return ` + + + + `; + } + if (icon === "ghost") { + return ` + + + + `; + } + if (icon === "queen") { + return ` + + + + `; + } + if (icon === "drone") { + return ` + + + + `; + } + if (icon === "swarm") { + return ` + + + + `; + } + if (icon === "main") { + return ` + + /> + + `; + } + if (icon === "config") { + return ` + + + + `; + } + if (icon === "controllers") { + return ` + + + + `; + } + if (icon === "hardware") { + return ` + + + + `; + } + if (icon === "tools") { + return ` + + + + `; + } + if (icon === "notification") { + return ` + + + + `; + } + if (icon === "rules") { + return ` + + + + `; + } + if (icon === "devices") { + return ` + + + + `; + } + if (icon === "minimize") { + return ` + + + + `; + } + if (icon === "maximize") { + return ` + + + + `; + } + if (icon === "reboot") { + return ` + + + + `; + } + if (icon === "wificonnect") { + return ` + + + + `; + } + if (icon === "wifidisconnect") { + return ` + + + + `; + } + if (icon === "close") { + return ` + + + + `; + } + if (icon === "trash") { + return ` + + + + `; + } + if (icon === "copy") { + return ` + + + + `; + } + if (icon === "screenshot") { + return ` + + + + `; + } + if (icon === "location") { + return ` + + + + `; + } + //If no icon found, leave blank + return ""; +}; diff --git a/src/gui_easy_curly_page.js b/src/gui_easy_curly_page.js new file mode 100644 index 0000000..678cbb7 --- /dev/null +++ b/src/gui_easy_curly_page.js @@ -0,0 +1,743 @@ +// HERE WE PUT ALL OUR "PAGE" FUNCTIONS +guiEasy.curly.page = function (arg) { + let type = arg[0]; + if ( + type === "main" || + type === "config" || + type === "hardware" || + type === "devices" || + type === "controllers" || + type === "notification" || + type === "tools" || + type === "rules" + ) { + return guiEasy.curly.page[type]; + } +}; + +guiEasy.curly.page.main = function () { + return ` + {{UNIT-SHORTINFO}} + {{UNIT-WELCOMETEXT}} + {{UNIT-GAUGES}} +
    + {{NODELIST}} + `; +}; + +guiEasy.curly.page.devices = function () { + return ` + {{DEVICETABLE}} + `; +}; + +guiEasy.curly.page.controllers = function () { + return ` + {{CONTROLLERTABLE}} + `; +}; + +guiEasy.curly.page.notification = function () { + return ` + {{NOTIFICATIONTABLE}} + `; +}; + +guiEasy.curly.page.tools = function () { + let html = ""; + html += helpEasy.dashGroupContainerOpen("commands"); + html += helpEasy.dashBoxContainerOpen(); + html += helpEasy.addToolsButton( + { + "type": "command", + "buttonAction": "command-reboot", + "icon": "reboot", + "text": "reboot the esp", + "color": "bg", + "waveText": "unit rebooted" + } + ); + html += helpEasy.addToolsButton( + { + "type": "command", + "buttonAction": "command-wificonnect", + "icon": "wificonnect", + "text": "connect to
    preset wifi", + "color": "success", + "waveText": "wifi connected" + } + ); + html += helpEasy.addToolsButton( + { + "type": "command", + "buttonAction": "command-wifidisconnect", + "icon": "wifidisconnect", + "text": "disconnect from
    current wifi", + "color": "warning", + "waveText": "wifi disconnected" + } + ); + html += helpEasy.dashContainerClose(); + html += helpEasy.dashContainerClose(); + + html += helpEasy.dashGroupContainerOpen("info pages"); + html += helpEasy.dashBoxContainerOpen(); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "system info", + "buttonAction": "modal-info-system", + "text": "show system
    info page" + } + ); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "web log", + "buttonAction": "modal-info-log", + "text": "show web log" + } + ); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "json endpoint", + "buttonAction": "modal-info-json", + "text": "open the
    json endpoint" + } + ); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "timing stats", + "buttonAction": "modal-info-timing", + "text": "show timing
    statistics" + } + ); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "pin state buffer", + "buttonAction": "modal-info-pinstate", + "text": "show pin
    state buffer" + } + ); + html += helpEasy.addToolsButton( + { + "type": "info", + "button": "system variables", + "buttonAction": "modal-info-sysvars", + "text": "show all system
    variables and
    conversions" + } + ); + html += helpEasy.dashContainerClose(); + html += helpEasy.dashContainerClose(); + + html += helpEasy.dashGroupContainerOpen("scanners"); + html += helpEasy.dashBoxContainerOpen(); + html += helpEasy.addToolsButton( + { + "type": "scanner", + "buttonAction": "modal-wifi-scanner", + "button": "wifi", + "text": "scan for wifi
    networks" + } + ); + html += helpEasy.addToolsButton( + { + "type": "scanner", + "buttonAction": "modal-i2c-scanner", + "button": "i2c", + "text": "scan for
    i2c devices" + } + ); + html += helpEasy.dashContainerClose(); + html += helpEasy.dashContainerClose(); + + html += helpEasy.dashGroupContainerOpen("system"); + html += helpEasy.dashBoxContainerOpen(); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "time", + "buttonAction": "modal-settings-time", + "text": "time
    settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "location", + "buttonAction": "modal-settings-location", + "text": "location
    settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "user interface", + "buttonAction": "modal-settings-gui", + "text": "manage
    gui settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "buttonAction": "modal-files-table", + "button": "files", + "text": "manage
    files" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "buttonAction": "modal-firmware-update", + "button": "update", + "text": "update
    firmware" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "buttonAction": "modal-firmware-reset", + "button": "reset", + "text": "factory reset
    firmware" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "patreon goodies", + "buttonAction": "modal-patreon", + "text": "unlock
    paid features" + } + ); + html += helpEasy.dashContainerClose(); + html += helpEasy.dashContainerClose(); + + html += helpEasy.dashGroupContainerOpen("advanced"); + html += helpEasy.dashBoxContainerOpen(); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "rules", + "buttonAction": "modal-settings-rules", + "text": "rules
    setup" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "p2p", + "buttonAction": "modal-settings-p2p", + "text": "easy communication
    settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "mqtt", + "buttonAction": "modal-settings-mqtt", + "text": "generic mqtt
    settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "log and serial", + "buttonAction": "modal-settings-log", + "text": "log and serial
    settings" + } + ); + html += helpEasy.addToolsButton( + { + "type": "system", + "button": "experimental", + "buttonAction": "modal-experimental", + "text": "highly experimental
    features" + } + ); + html += helpEasy.dashContainerClose(); + html += helpEasy.dashContainerClose(); + return html; +}; + +guiEasy.curly.page.rules = function () { + return ` +
    + +
    +
    ‌
    +
    ‌
    +
    ‌
    +
    +
    + `; +}; + +guiEasy.curly.page.config = function () { + let html = ""; + html += helpEasy.openArea("unit"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "unit name", + "settingsId": "config--general--unitname", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "", + "allowedBlank": false, + "default": "ESP_Easy" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "append number", + "settingsId": "config--general--appendunitno", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "Hostname: name_number", + "falseText": "Hostname: name", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "unit number", + "settingsId": "config--general--unitnr", + "placeholder": "", + "tooltip": "0 and 255 are not valid
    if you want to use p2p.", + "default": 0, + "max": 255, + "min": 0, + "step": 1 + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "password", + "toSettings": true, + "alt": "settings-change", + "title": "admin password", + "settingsId": "security--0--password", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "blank = no password", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + + html += helpEasy.openArea("wifi"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "ssid", + "settingsId": "security--0--WifiSSID", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "", + "default": "" + } + ); + html += helpEasy.addInput( + { + "type": "password", + "toSettings": true, + "alt": "settings-change", + "title": "wpa key", + "settingsId": "security--0--WifiKey", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "ssid fallback", + "settingsId": "security--0--WifiSSID2", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "", + "default": "" + } + ); + html += helpEasy.addInput( + { + "type": "password", + "toSettings": true, + "alt": "settings-change", + "title": "wpa key fallback", + "settingsId": "security--0--WifiKey2", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": "", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "password", + "toSettings": true, + "alt": "settings-change", + "title": "ap mode wpa key", + "settingsId": "security--0--WifiAPKey", + "settingsMaxLength": 99999, + "settingsRegEx": "", + "placeholder": 'blank = "configesp"', + "default": "", + "valueIfBlank": "configesp" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + + html += helpEasy.openArea("ip settings"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "esp ip", + "settingsId": "config--IP--ip", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "blank = DHCP", + "valueIfBlank": "0.0.0.0", + "default": "" + } + ); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "gateway", + "settingsId": "config--IP--gw", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "blank = DHCP", + "valueIfBlank": "0.0.0.0", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "subnet mask", + "settingsId": "config--IP--subnet", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "blank = DHCP", + "valueIfBlank": "0.0.0.0", + "default": "" + } + ); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "dns", + "settingsId": "config--IP--dns", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "blank = DHCP", + "valueIfBlank": "0.0.0.0", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + //blank + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + + html += helpEasy.openArea("client ip filtering"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "client ip block level", + "settingsId": "security--0--IPblockLevel", + "placeholder": "", + "default": 1, + "optionList":[ + {"text": "Allow All", "value": "0"}, + {"text": "Allow Local Subnet", "value": "1"}, + {"text": "Allow IP range", "value": "2"} + ], + "optionListOffset": 0 + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "access ip lower range", + "settingsId": "security--0--AllowedIPrangeLow", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "access ip upper range", + "settingsId": "security--0--AllowedIPrangeHigh", + "settingsMaxLength": (3 + 1 + 3 + 1 + 3 + 1 + 3), + "settingsIP": true, + "placeholder": "", + "default": "" + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + + html += helpEasy.openArea("sleep mode"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "awake time", + "settingsId": "config--sleep--awaketime", + "placeholder": "s", + "tooltip": "0 = sleep disabled,
    else time awake from sleep.", + "default": 0, + "max": 12113, + "min": 0, + "step": 1 + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "sleep time", + "settingsId": "config--sleep--sleeptime", + "placeholder": "s", + "tooltip": "Max 12113 seconds
    (little over 200 minutes).", + "default": 3600, + "max": 12113, + "min": 10, + "step": 1 + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "sleep on connection failure", + "settingsId": "config--sleep--sleeponfailiure", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "Go to sleep on connection failed", + "falseText": "Stay awake until connected", + "default":false + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + return html; +}; + +guiEasy.curly.page.hardware = function () { + let html = ""; + html += helpEasy.openArea("generic pin setup"); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "gpio wifi status led", + "settingsId": "hardware--led--gpio", + "placeholder": "", + "default": 0, + "optionList": guiEasy.gpiolist(), + "optionListOffset": -1 + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "inverse led", + "settingsId": "hardware--led--inverse", + "settingsTrue": 1, + "settingsFalse": 0, + "tooltip": "Use 'GPIO 2 (D4)' with 'Inverse'
    checked for on board LED", + "trueText": "led is inverse", + "falseText": "led is normal", + "default": true + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "gpio reset button", + "settingsId": "hardware--reset--pin", + "placeholder": "", + "default": 0, + "optionList": guiEasy.gpiolist(), + "optionListOffset": -1 + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "gpio i2c sda", + "settingsId": "hardware--i2c--sda", + "placeholder": "", + "default": 5, + "optionList": guiEasy.gpiolist(), + "optionListOffset": -1 + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "gpio i2c scl", + "settingsId": "hardware--i2c--scl", + "placeholder": "", + "default": 6, + "optionList": guiEasy.gpiolist(), + "optionListOffset": -1 + } + ); + html += helpEasy.addLine(); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "initiate spi", + "settingsId": "hardware--spi--enabled", + "settingsTrue": 1, + "settingsFalse": 0, + "tooltip":'CLK=GPIO 14 (D5)
    MISO=GPIO 12 (D6)
    MOSI=GPIO-13 (D7)
    Chip Select (CS) config
    must be done in the plugin!', + "trueText": "spi will be initiated on boot", + "falseText": "spi is inactivated", + "default": false + } + ); + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + + html += helpEasy.openArea("gpio boot states"); + html += helpEasy.openColumn(); + let list = guiEasy.gpiolist(); + let k = 0; + for (let i = 1; i < list.length; i++) { + let name = list[i].text; + let note = list[i].note; + let disabled = list[i].disabled; + let gpio = list[i].value; + html += helpEasy.addInput( + { + "type": "dropdown", + "toSettings": true, + "alt": "settings-change", + "title": "pin mode " + name + " " + note + ": ", + "settingsId": "hardware--gpio--" + gpio, + "placeholder": "", + "default": 0, + "optionList":[ + {"text": "Default", "value":0}, + {"text": "Output Low", "value":1}, + {"text": "Output High", "value":2}, + {"text": "Input", "value":3} + ], + "optionListOffset": 0, + "disabled": disabled + } + ); + k++; + if (k > (list.length / 3)) { + html += helpEasy.closeColumn(); + html += helpEasy.openColumn(); + k = 0; + } + } + html += helpEasy.closeColumn(); + html += helpEasy.closeArea(); + return html; +}; \ No newline at end of file diff --git a/src/gui_easy_curly_unit.js b/src/gui_easy_curly_unit.js new file mode 100644 index 0000000..59a7e26 --- /dev/null +++ b/src/gui_easy_curly_unit.js @@ -0,0 +1,69 @@ +// HERE WE PUT ALL OUR "UNIT" FUNCTIONS +guiEasy.curly.unit = function(arg) { + let x = guiEasy.curly.unit; + let type = arg[0]; + if ( + type === "gauges" || + type === "shortinfo" || + type === "welcometext" + ) { + return x[type]; + } + return ""; +}; + +guiEasy.curly.unit.gauges = function() { + let x = guiEasy.curly.unit.gauges; + let html = "
    "; + html += x.create("LOAD", "Load", 100, 0); + html += x.create("MEM", "Free RAM", 0, 40000); + html += x.create("LOOPS", "Load LC", 0, 10000); + html += "
    "; + return html; +}; + +guiEasy.curly.unit.gauges.create = function (text, id, max, min) { + return ` + + + + + + + + ` + text + ` + + + `; +}; + +guiEasy.curly.unit.shortinfo = function () { + return ` +
    +
    +
    +
    +
    + Uptime:
    minutes +
    + {{ICON-WIFI-SELF}} +
    (
    dBm) +
    +
    +
    + `; +}; + +guiEasy.curly.unit.welcometext = function () { + return ` +
    +
    +
    ` + helpEasy.welcomePhrase() + `
    +
    + I see that this is you first visit, please configure your unit... +
    + {{GOTO-TAB-CONFIG}} +
    +
    + `; +}; \ No newline at end of file diff --git a/src/gui_easy_default_settings.js b/src/gui_easy_default_settings.js new file mode 100644 index 0000000..347a9e8 --- /dev/null +++ b/src/gui_easy_default_settings.js @@ -0,0 +1,67 @@ +//INSPIRATION FOR THE LANDING PAGE: https://codepen.io/diegopardo/pen/dGlfC + +//THIS IS THE DEFAULT SETTINGS, THEY WILL BE OVERRIDE BY CUSTOM +const defaultSettings = { + 'preventDefaults': { + "escape": 1, //used to close modals etc. + "ctrl+space": 1, //open swarm + "ctrl+enter": 1, //screenshot + "ctrl+keys": 1, //save settings to unit + "ctrl+keyz": 1, //revert changes (which are not yet saved) + "alt+digit": 1, //jump to tab + "alt+arrows": 1 //jump to next tab + }, + 'areasMinimized': 0, + 'helpLinks': 1, + 'internetLostShow': 1, + 'clipboardSyntax': { + "list": ["Default","GitHub","phpBB"], + "selection": 0 + }, + 'css': { + 'variables': [ + ['main-bg-color', '52,146,226', "Background"], + ['main-inverted-color', '47,66,82', "Contrast"], + ['main-font-color', '255,255,255', "Font"], + ['main-info-color', '255,143,18', "Info"], + ['main-sunny-color', '255,209,0', "Sunny"], + ['main-warning-color', '239,72,61', "Warning"], + ['main-success-color', '0,174,65', "Success"], + ['button-radius-size', 1, "Button Radius"], //1...100 + ['max-width-page-size', 1400, "Max Page Width (px)"], //400...10 000 + ['scale-size', 16, "Scale Value"], //1...100 + ['row-size', 20, "Row Height"], //1...100 + ['overflow-tab-text-size', 24, "Tab Text Overflow Value"], //1...100 + ['state-of-navbar-toggle', "fixed", "Navbar Always Show|Navbar Scroll Away"], + ['default-font-family', "'Segoe UI', Calibri, Arial", "Font Family"], + ['custom-wallpaper-url', "", "Link To Wallpaper Image"] + ], + 'size': { + "button-radius-size": {"min": 1, "max": 100, "step": 1, "placeholder": ""}, + "max-width-page-size": {"min": 400, "max": 10000, "step": 100, "placeholder": "px"}, + "scale-size": {"min": 1, "max": 100, "step": 1, "placeholder": ""}, + "row-size": {"min": 1, "max": 100, "step": 1, "placeholder": ""}, + "overflow-tab-text-size": {"min": 1, "max": 100, "step": 1, "placeholder": ""} + }, + 'toggle': { + "state-of-navbar-toggle": { + "fixed": true, + "absolute": false + } + }, + 'family': { + "default-font-family": [ + {"value": "'Segoe UI', Calibri, Arial|ESP_EASY_CUSTOM_FONT", "text": "Custom Google Font"}, + {"value": "Arial, Helvetica, sans-serif", "text": "Arial"}, + {"value": "'Comic Sans MS', cursive, sans-serif", "text": "Comic Sans"}, + {"value": "Impact, Charcoal, sans-serif", "text": "Impact"}, + {"value": "'Segoe UI', Calibri, Arial", "text": "Segoe UI"}, + {"value": "'Times New Roman', Times, serif", "text": "Times New Roman"}, + {"value": "Verdana, Geneva, sans-serif", "text": "Verdana"} + ] + }, + 'url': { + "custom-wallpaper-url": {"placeholder": "png, jpg, gif, blank = none"} + } + } +}; \ No newline at end of file diff --git a/src/gui_easy_helper.js b/src/gui_easy_helper.js new file mode 100644 index 0000000..4955551 --- /dev/null +++ b/src/gui_easy_helper.js @@ -0,0 +1,1556 @@ +// HERE WE PUT ALL OUR "THIS&THAT" FUNCTIONS +const helpEasy = { + 'copyToClipboard': function (str) { + const el = document.createElement('textarea'); + el.value = str; + el.setAttribute('readonly', ''); + el.style.position = 'absolute'; + el.style.left = '-9999px'; + document.body.appendChild(el); + const selected = + document.getSelection().rangeCount > 0 + ? document.getSelection().getRangeAt(0) + : false; + el.select(); + document.execCommand('copy'); + document.body.removeChild(el); + if (selected) { + document.getSelection().removeAllRanges(); + document.getSelection().addRange(selected); + } + let eventDetails = { + "type": "clipboard", + "str": str + }; + guiEasy.popper.tryCallEvent(eventDetails); + }, + 'swapKey2Value': function swap(json){ + let ret = {}; + for(let key in json){ + ret[json[key]] = key; + } + return ret; + }, + 'rgb2hex' : function (rgb) { + rgb = rgb.split(","); + let hex = "#"; + for (let i=0; i < rgb.length; i++) { + hex += ( "0" + parseInt(rgb[i]).toString(16) ).substr(-2,2); + } + return hex; + }, + 'hex2rgb' : function (hex) { + return hex.match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) }).join(","); + }, + 'cleanupWord' : function (word, commas = false) { + word = word.replace(/_/g, " "); + if (commas === true) { + word = word.replace(/,/g, "
    "); + } + return word; + }, + 'capitalWord': function (str) { + let allCaps = ["ok","gpio","led","ssid","spi","wpa","ap","ip","esp","dns","id","i2c","sda","scl","ntp","dst","gui","json","mqtt","p2p","rssi","bssid","dhcp","cpu","ram","sta","gw","l/r","http","udp"]; + let words = str.toLowerCase().split(" "); + for (let i = 0; i < words.length; i++) { + //if the string is found in the allCaps or is starting and ending with parentheses it will be all caps. + if (helpEasy.findInArray(words[i], allCaps) === true || (words[i].charAt(0) === "(" && words[i].charAt(words[i].length-1) === ")")) { + words[i] = words[i].toUpperCase(); + } else { + words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1); + } + } + return words.join(" "); + }, + 'epochToHHMMSS': function(epoch = Date.now()) { + let time = new Date(epoch); + let timeHH = ("0" + time.getHours()).substr(-2,2); + let timeMM = ("0" + time.getMinutes()).substr(-2,2); + let timeSS = ("0" + time.getSeconds()).substr(-2,2); + return timeHH + ":" + timeMM + ":" + timeSS; + }, + 'pingIP': async function (ipArray, isUpFunction, isDownFunction) { + //TODO: try to catch these intentional errors so we don't see them in the console. + for (let i =0; i < ipArray.length; i++) { + let ip = ipArray[i].ip; + let startPing = Date.now(); + let ws = await new WebSocket("ws://" + ip); + ws.onerror = function(){ + ws.close(); + ws = null; + isUpFunction(ipArray, i, (Date.now() - startPing)); + }; + setTimeout(function() { + if(ws != null) { + + ws.close(); + + ws = null; + isDownFunction(ipArray, i); + } + },2000); + } + }, + 'handlePingResults': function (array, index, ping = null) { + array[index].ping = {}; + //This is just a pointer, not a real ping. We divide the results in 3 to get a "close to real" value + if (ping === null) { + array[index].ping.result = -1; + } else { + array[index].ping.result = Math.round(ping / 3); + } + + array[index].ping.timestamp = Date.now(); + }, + 'bumpScheduler': function (array, index, endpoint) { + let nextRun = Date.now() + 10; + let x = array[index]["scheduler"]; + for (let i = 0; i < x.length; i++) { + if (x[i][1] === endpoint) { + x.splice(i, 1); + x.push([nextRun, endpoint]); + x.sort(); + } + } + }, + 'schedulerBump': function (array, endpoint) { + let index = 0; + for (let i = 0; i < array.length; i++) { + if (array[i][1] === endpoint) { + index = i; + } + } + array[index][0] = Date.now(); + array.sort(); + }, + 'schedulerDelay': function (array, index, delay) { + for (let i = 0; i < array[index]["scheduler"].length; i++) { + array[index]["scheduler"][i][0] += delay; + } + array[index].stats.error = 0; + }, + 'getDataFromNode': function (array, index, endpoint, ttl_fallback) { + array[index]["scheduler"].shift(); + let timeStart = Date.now(); + let path = "http://" + array[index].ip + "/" + endpoint + "?callback=" + timeStart; + fetch(path) + .then(res => res.json()) + .then((dataFromFile) => { + array[index]["live"][endpoint] = dataFromFile; + array[index]["live"][endpoint].timestamp = Date.now(); + if (dataFromFile.TTL !== undefined) { + //array[index]["live"][endpoint].TTL = dataFromFile.TTL; + } else { + array[index]["live"][endpoint].TTL = ttl_fallback; + } + //TODO: fix the TTL level on the logjson endpoint + if (endpoint === "logjson" && dataFromFile.Log.TTL !== undefined) { + array[index]["live"][endpoint].TTL = dataFromFile.Log.TTL; + } + //TODO: The if abouve is not needed if we move the TTL for the log to its correct place. + array[index]["live"][endpoint].TTL_fallback = ttl_fallback; + let nextRun = Date.now() + array[index]["live"][endpoint].TTL; + array[index]["scheduler"].push([nextRun, endpoint]); + array[index]["scheduler"].sort(); + array[index].stats["lastRun"] = Date.now(); + array[index].stats[endpoint].run = Date.now() - timeStart; + array[index].stats[endpoint].timestamp = Date.now(); + array[index].stats.error = 0; + } + ) + .catch(error => { + console.error('Error fetching (' + endpoint + '): ', error); + array[index].stats.error++; + let nextRun = Date.now() + array[index].stats[endpoint].TTL_fallback; + array[index]["scheduler"].push([nextRun, endpoint]); + array[index]["scheduler"].sort(); + array[index].stats["lastRun"] = Date.now(); + array[index].stats[endpoint].run = Date.now() - timeStart; + array[index].stats[endpoint].timestamp = Date.now(); + guiEasy.fetchCount.error++; + }); + guiEasy.fetchCount.current++; + if (guiEasy.fetchCount.current === guiEasy.fetchCount.max) { + guiEasy.current.live = index; + } + }, + 'fetchConfigDat': function (array, index, updateBrowserSettings = true) { + let timeStart = Date.now(); + //part of ppisljar's code + let datFile = ["config.dat", "notification.dat", "security.dat"]; + let path_config = "http://" + array[index].ip + "/" + datFile[0] + "?callback=" + timeStart; + let path_notice = "http://" + array[index].ip + "/" + datFile[1] + "?callback=" + timeStart; + let path_security = "http://" + array[index].ip + "/" + datFile[2] + "?callback=" + timeStart; + //TODO: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS + fetch(path_config) + .then(res => res.arrayBuffer()) + .then(async (res) => { + let x = helpEasy.parseConfigDat; + let z = guiEasy.configDat; + const settings = x(res, z.configDatParseConfig); + + [...Array(guiEasy.maxTasks())].map((x, i) => { + x = helpEasy.parseConfigDat; + settings.tasks[i].settings = x(res, z.taskSettings, 1024*4 + 1024 * 2 * i); + settings.tasks[i].extra = x(res, z.taskSettings, 1024*5 + 1024 * 2 * i); + }); + + [...Array(guiEasy.maxController())].map((x, i) => { + x = helpEasy.parseConfigDat; + settings.controllers[i].settings = x(res, z.controllerSettings, 1024*27 + 1024 * 2 * i); + settings.controllers[i].extra = x(res, z.controllerSettings, 1024*28 + 1024 * 2 * i); + }); + + const notificationResponse = await fetch(path_notice).then(res => res.arrayBuffer()); + [...Array(guiEasy.maxNotification())].map((x, i) => { + x = helpEasy.parseConfigDat; + settings.notifications[i].settings = x(notificationResponse, z.notificationSettings, 1024 * i); + }); + + //Only one setup of security is allowed for now (array length = 1)... + const securityResponse = await fetch(path_security).then(res => res.arrayBuffer()); + settings.security = [...Array(1)].map((x, i) => { + x = helpEasy.parseConfigDat; + return x(securityResponse, z.securitySettings, 1024 * i); + }); + + array[index].settings = Object.assign({},settings); + array[index].settings.timestamp = timeStart; + + if (updateBrowserSettings === true) { + array[index].settingsBrowser = Object.assign({},settings); + array[index].settingsBrowser.timestamp = timeStart; + } + + guiEasy.current.config = index; + array[index].stats["lastRun"] = Date.now(); + if (array[index].stats["configDat"] === undefined) { + array[index].stats["configDat"] = {}; + } + array[index].stats["configDat"].run = Date.now() - timeStart; + array[index].stats["configDat"].timestamp = timeStart; + }) + }, + 'parseConfigDat': function (data, config, start) { + //part of ppisljar's code + const p = new DataParser(data); + if (start) p.offset = start; + const result = {}; + config.map(value => { + const prop = value.length ? value.length : value.signed; + set(result, value.prop, p[value.type](prop, value.signed)); + }); + return result; + }, + 'getCurrentIndex': function (type = "") { + let indexObject = document.querySelectorAll("[data-current-index]")[0]; + if (type === "online") { + return indexObject.dataset.currentOnline === "true"; + } + return parseInt(indexObject.dataset.currentIndex); + }, + 'setCurrentIndex': function (index) { + let indexObject = document.querySelectorAll("[data-current-index]")[0]; + indexObject.dataset.currentIndex = index; + indexObject.dataset.currentOnline = "true"; + }, + 'setCurrentOnline': function (state) { + let indexObject = document.querySelectorAll("[data-current-index]")[0]; + if (state === "online") { + indexObject.dataset.currentOnline = "true"; + } else { + indexObject.dataset.currentOnline = "false"; + } + }, + 'scheduleFetch': function (array, index, endpoint) { + if (array[index].stats === undefined) { + array[index].stats = {"error": 0}; + } + if (endpoint === undefined) { + //first run + let endpoints = guiEasy.endpoints.get; + guiEasy.fetchCount = {"max": 0, "current": 0, "error": 0}; + array[index]["live"] = {}; + array[index]["history"] = {}; + array[index]["scheduler"] = []; + for (let i=0; i < endpoints.length; i++) { + let endpoint = endpoints[i].endpoint; + if (endpoints[i].ttl_fallback === undefined || endpoints[i].ttl_fallback > guiEasy.endpoints.defaultTTL()) { + //These endpoints can be fetched once the gui has loaded... to speed up build-up + array[index].stats[endpoint] = { + "TTL_fallback": guiEasy.endpoints.defaultTTL(), + "run": -1, + "timestamp": Date.now() + }; + let nextRun = Date.now() + i * guiEasy.fetchSettings.intervalTimeKeeper + 2000; + array[index]["scheduler"].push([nextRun, endpoint]); + array[index]["scheduler"].sort(); + } else { + array[index].stats[endpoint] = { + "TTL_fallback": endpoints[i].ttl_fallback, + "run": -1, + "timestamp": Date.now() + }; + array[index]["scheduler"].push([0, endpoint]); + array[index]["scheduler"].sort(); + let delayExecution = guiEasy.fetchCount.max * guiEasy.fetchSettings.intervalTimeKeeper; + setTimeout(function (){ + helpEasy.getDataFromNode(array, index , endpoint, endpoints[i].ttl_fallback); + }, delayExecution); + guiEasy.fetchCount.max++; + } + } + } else { + //relay runner + let x = guiEasy.fetchSettings; + let TTL_fallback = array[index].stats[endpoint].TTL_fallback; + helpEasy.getDataFromNode(array, index , endpoint, TTL_fallback); + // take a snapshot (plus timestamp it) of the endpointData array and store it + let temp = Object.assign({}, array[index]["live"][endpoint]); + temp.fetched = Date.now(); + if (array[index]["history"][endpoint] === undefined) { + array[index]["history"][endpoint] = []; + } + array[index]["history"][endpoint].push(temp); + if ( array[index]["history"][endpoint].length > ( x.maxToKeep * x.maxToKeepMs - 1 )) { + array[index]["history"][endpoint].shift(); + } + } + }, + 'getGuiInFields': function () { + if (guiEasy.jsonPathsIN === undefined) { + guiEasy.jsonPathsIN = []; + } + let z = guiEasy.jsonPathsIN; + let x = document.querySelectorAll("[data-json-path]"); + for (let i = 0; i < x.length; i++) { + let y = x[i].dataset.jsonPath; + if (helpEasy.findInArray(y,z) === false) { + z.push(y); + } + } + if (guiEasy.jsonPathsSettings === undefined) { + guiEasy.jsonPathsSettings = []; + } + z = guiEasy.jsonPathsSettings; + x = document.querySelectorAll("[data-settings]"); + for (let i = 0; i < x.length; i++) { + let y = x[i].dataset.settings; + if (helpEasy.findInArray(y,z) === false) { + z.push(y); + } + } + return z; + }, + 'wifilist': function (wifiArray, index) { + let html = ` +
    + + + + + + + + `; + let sameSSID = ""; + let sameBSSID = []; + let sameChannel = []; + let sameRSSI = []; + let sorted = wifiArray.sort(helpEasy.sortObjectArray("SSID")); + for (let i = 0; i < sorted.length; i++) { + sameSSID = sorted[i].SSID; + sameBSSID.push(sorted[i].BSSID); + sameChannel.push(sorted[i].Channel); + sameRSSI.push(sorted[i].RSSI); + if (i < (sorted.length - 1) && sorted[i].SSID === sorted[(i + 1)].SSID) { + // + } else { + html += ""; + } + } + sameSSID = ""; + sameBSSID = []; + sameChannel = []; + sameRSSI = []; + } + } + html += ` +
    SSIDBSSIDChSignal
    " + sameSSID + ""; + for (let i = 0; i < sameBSSID.length; i++) { + if (sameBSSID[i] === guiEasy.nodes[helpEasy.getCurrentIndex()].live.json.WiFi.BSSID) { + html += "
    " + sameBSSID[i] + "
    "; + } else { + html += sameBSSID[i]; + } + if (i !== (sameBSSID.length - 1)) { + html += "
    "; + } else { + html += "    		"; + } + } + for (let i = 0; i < sameChannel.length; i++) { + html += sameChannel[i]; + if (i !== (sameChannel.length - 1)) { + html += "
    "; + } else { + html += "    		"; + } + } + for (let i = 0; i < sameRSSI.length; i++) { + html += "
    "; + html += helpEasy.rssiToSVG(sameRSSI[i]); + if (i !== (sameRSSI.length - 1)) { + html += "
    " + sameRSSI[i] + " dBm
    "; + } else { + html += "
    " + sameRSSI[i] + " dBm
    +
    ` + wifiArray.length + ` separate APs found
    +
    Fetched: ` + helpEasy.epochToHHMMSS(wifiArray.timestamp) + `
    +
    Scheduled: ` + helpEasy.epochToHHMMSS(wifiArray.timestamp + wifiArray.TTL) + `
    +
    + `; + set(guiEasy.nodes[index], "modal.table.wifi", html); + }, + 'filelist': function (filelistArray, index) { + let noDeleteFile = ["notification.dat","config.dat","security.dat"]; + let deletingFile = guiEasy.nodes[helpEasy.getCurrentIndex()].deleteFile; + guiEasy.nodes[helpEasy.getCurrentIndex()].deleteFile = null; + let html = ` +
    + + + + + + `; + let sorted = filelistArray.sort(helpEasy.sortObjectArray("fileName")); + for (let i = 0; i < sorted.length; i++) { + let rowInactive = ""; + if (deletingFile === sorted[i].fileName) { + rowInactive = "class='is-inactive'"; + } + html += ` + + + + + `; + } + html += "
    File NameSize
    `; + if (noDeleteFile.indexOf(sorted[i].fileName) === -1) { + html += ` + + `; + } + html += ` + + ` + (Math.floor(sorted[i].size / 1024 *10) / 10) + `kB +
    "; + set(guiEasy.nodes[index], "modal.table.files", html); + }, + 'timingstatsList': function (timingArray, index) { + let unsorted = []; + let endpoints = ["plugin", "controller", "misc"]; + for (let k = 0; k < endpoints.length; k++) { + let x = timingArray[endpoints[k]]; + for (let i = 0; i < x.length; i++) { + let func = x[i]["function"][0]; + let keys = Object.keys(func); + for (let j = 0; j < keys.length; j++) { + unsorted.push( + { + "sortValue": parseFloat(func[keys[j]].avg), + "name": x[i].name, + "subKey": keys[j], + "subLevels": keys.length, + "type": endpoints[k].slice(0,1).toUpperCase(), + "id": x[i].id, + "avg": func[keys[j]].avg, + "count": func[keys[j]].count, + "call-per-sec": func[keys[j]]["call-per-sec"], + "min": func[keys[j]].min, + "max": func[keys[j]].max, + "unit": func[keys[j]].unit + } + ); + } + } + } + let sorted = unsorted.sort(helpEasy.sortObjectArray("sortValue")); + let html = ` +
    + + + + + + + `; + for (let i = (sorted.length - 1); i > -1; i--) { + let extraRow = ""; + if (sorted[i].subLevels > 1) { + extraRow = "
    " + sorted[i].subKey; + } + html += ` + + + + + + `; + } + html += ` +
    TypeTimerProcess
    + ` + sorted[i].type + ("000" + sorted[i].id).slice(-3) + ` + + ` + sorted[i].sortValue + ` +
    + avg: ` + sorted[i].avg + `
    + min: ` + sorted[i].min + `
    + max: ` + sorted[i].max + `
    + count: ` + sorted[i].count + `
    + per sec: ` + sorted[i]["call-per-sec"] + ` +
    +     		+ ` + sorted[i].name + extraRow + ` +
    +
    Fetched: ` + helpEasy.epochToHHMMSS(timingArray.timestamp) + `
    +
    Scheduled: ` + helpEasy.epochToHHMMSS(timingArray.timestamp + timingArray.TTL) + `
    +
    + `; + set(guiEasy.nodes[index], "modal.table.timingstats_json", html); + }, + 'twoLevelJsonToList': function (endpoint, index) { + let x = guiEasy.nodes[index].live[endpoint]; + let html = "
    "; + let keysLevel1 = Object.keys(x); + for (let i = 0; i < keysLevel1.length; i++) { + let keysLevel2 = Object.keys(x[keysLevel1[i]]); + if (keysLevel2.length < 1) { + continue; + } + html += "
    " + helpEasy.capitalWord(helpEasy.cleanupWord(keysLevel1[i])) + "
    "; + html += ""; + for (let j = 0; j < keysLevel2.length; j++) { + let valueName = helpEasy.cleanupWord(keysLevel2[j]); + let value = helpEasy.cleanupWord(x[keysLevel1[i]][keysLevel2[j]], true); + if (value === "ThisIsTheDummyPlaceHolderForTheBinaryFilename64ByteLongFilenames") { + value = "..."; + } + html += ""; + } + html += "
    " + helpEasy.capitalWord(valueName) + "" + value + "
    "; + } + html += ` +
    Fetched: ` + helpEasy.epochToHHMMSS(x.timestamp) + `
    +
    Scheduled: ` + helpEasy.epochToHHMMSS(x.timestamp + x.TTL) + `
    +
    + `; + set(guiEasy.nodes[index], "modal.table." + endpoint , html); + return html; + }, + 'guiUpdater': function () { + let timeStart = Date.now(); + let index = helpEasy.getCurrentIndex(); + let x = guiEasy.nodes[index]; + if (guiEasy.jsonPathsIN === undefined) { + guiEasy.jsonPathsIN = []; + } + let y = guiEasy.jsonPathsIN; + for (let i = 0; i < y.length; i++) { + let z = document.querySelectorAll("[data-json-path='" + y[i] + "']"); + for (let k = 0; k < z.length; k++) { + let path = y[i].split("--"); + for (let u = 0; u < path.length; u++) { + if (z[k].innerHTML !== helpEasy.getjsonPathData(path, x)) { + z[k].innerHTML = helpEasy.getjsonPathData(path, x); + } + } + } + } + //update tab text + //TODO: make it possible to have live data feed on tab + let path = ("live--json--System--Unit Name").split("--"); + document.title = helpEasy.getjsonPathData(path, x); + //update wifi icon(s) + path = ("live--json--WiFi--RSSI").split("--"); + let bars = helpEasy.rssiToBars(helpEasy.getjsonPathData(path, x)); + let z = document.querySelectorAll("[name=unit-wifi-rssi-icon]"); + for (let i = 0; i < z.length; i++) { + z[i].classList.remove("level-1","level-2","level-3","level-4","level-5"); + z[i].classList.add(bars); + } + //update system gauges + z = document.querySelectorAll("[data-json-path-gauge]"); + for (let i = 0; i < z.length; i++) { + helpEasy.gaugeLevel(z[i], x); + } + //update wifi modal path //TODO: consolidate these since they are essentially equal + if (x.live.wifiscanner_json !== undefined) { + helpEasy.wifilist(x.live.wifiscanner_json, index); + } else { + let pendingText = "
    " + guiEasy.fetchingWait + "
    "; + set(guiEasy.nodes[index], "modal.table.wifi", pendingText); + } + //update files modal path + if (x.live.filelist_json !== undefined) { + helpEasy.filelist(x.live.filelist_json, index); + } else { + let pendingText = "
    " + guiEasy.fetchingWait + "
    "; + set(guiEasy.nodes[index], "modal.table.files", pendingText); + } + //update sysinfo modal path + if (x.live.sysinfo_json !== undefined) { + helpEasy.twoLevelJsonToList("sysinfo_json", index); + } else { + let pendingText = "
    " + guiEasy.fetchingWait + "
    "; + set(guiEasy.nodes[index], "modal.table.sysinfo_json", pendingText); + } + //update timingstats modal path + if (x.live.timingstats_json !== undefined) { + helpEasy.timingstatsList(x.live.timingstats_json, index); + } else { + let pendingText = "
    " + guiEasy.fetchingWait + "
    "; + set(guiEasy.nodes[index], "modal.table.timingstats_json", pendingText); + } + //update tables + z = document.querySelectorAll("[data-modal-table]"); + for (let i = 0; i < z.length; i++) { + let type = z[i].dataset.modalTable; + let data = guiEasy.nodes[index].modal.table[type]; + let newInnerHTML = helpEasy.parseHTMLstring(data, "query", '[data-modal-table="' + type + '"]'); + if (z[i].innerHTML !== newInnerHTML) { + z[i].innerHTML = newInnerHTML + } + } + //task values update, and we need to clean up the non-live once if there's any + let t = guiEasy.maxTasks(); + let v = guiEasy.maxValuesPerTask(); + x = guiEasy.nodes[index].live.json.Sensors; + let valueMatrix = [...Array(t)].map(x=>Array(v).fill("")); + let taskMatrix = [...Array(t)].fill(""); + for (let i = 0; i < x.length; i++) { + let values = x[i].TaskValues; + let controllers = x[i].DataAcquisition; + let taskNumber = x[i].TaskNumber; + let taskName = x[i].TaskName; + let taskEnabled = x[i].TaskEnabled; + let plugin = x[i].Type; + let pluginNumber = "P" + ("000" + x[i].TaskDeviceNumber).slice(-3); + taskMatrix[(taskNumber - 1)] = { + "plugin": plugin, + "port": "", + "controller": "", + "gpio": "", + "enabled": taskEnabled, + "name": taskName + }; + for (let j = 0; j < values.length; j++) { + let valueName = values[j].Name; + let value = values[j].Value; + let valueNumber = values[j].ValueNumber; + let valueDecimals = values[j].NrDecimals; + valueMatrix[(taskNumber - 1)][(valueNumber - 1)] = { + "name": valueName, + "value": value.toFixed(valueDecimals) + } + } + } + for (let i = 0; i < t; i++) { + if (taskMatrix[i].name === undefined) { + helpEasy.clearTaskValues(i); + continue; + } + let pathT = "task-" + (i + 1) + "-"; + let keys = ["plugin", "port", "controller", "gpio"]; + for (let k = 0; k < keys.length; k++) { + let keyPath = keys[k]; + if (taskMatrix[i][keyPath] !== "") { + if (document.getElementById(pathT + keyPath).innerText !== taskMatrix[i][keyPath]) { + document.getElementById(pathT + keyPath).innerText = taskMatrix[i][keyPath]; + } + document.getElementById(pathT + keyPath + "-row").classList.remove("is-hidden"); + } + } + //the name is on the values column + if (document.getElementById(pathT + "name").innerText !== taskMatrix[i].name) { + document.getElementById(pathT + "name").innerText = taskMatrix[i].name; + } + for (let j = 0; j < v; j++) { + if (valueMatrix[i][j] === "" || valueMatrix[i][j].name === "") { + helpEasy.clearTaskValues(i, j); + continue; + } + let pathV = pathT + "value-" + (j + 1) + "-"; + document.getElementById(pathV + "row").classList.remove("is-hidden"); + if (taskMatrix[i].enabled === "true") { + document.getElementById(pathV + "row").classList.remove("not-enabled"); + } else { + document.getElementById(pathV + "row").classList.add("not-enabled"); + } + if (j > 0) { + document.getElementById(pathV + "hr").classList.remove("is-hidden"); + } + if (document.getElementById(pathV + "name").innerText !== valueMatrix[i][j].name) { + document.getElementById(pathV + "name").innerText = valueMatrix[i][j].name; + } + if (document.getElementById(pathV + "value").innerText !== valueMatrix[i][j].value) { + document.getElementById(pathV + "value").innerText = valueMatrix[i][j].value; + } + } + } + //populate the stats + guiEasy.current.gui = index; + if (guiEasy.nodes[index].stats["gui"] === undefined) { + guiEasy.nodes[index].stats["gui"] = {}; + } + guiEasy.nodes[index].stats["gui"].run = Date.now() - timeStart; + guiEasy.nodes[index].stats["gui"].timestamp = timeStart; + }, + 'clearTaskValues': function (taskNumber, valueNumber = null) { + let v = guiEasy.maxValuesPerTask(); + let s; + let x = []; + let h; + let y = []; + //set the innerText/HTML to "" + if (valueNumber !== null) { + for (let i = 1; i <= v; i++) { + s = document.querySelectorAll("[id='task-" + (taskNumber+1) + "-value-" + (valueNumber+i) + "-name']"); + if (s.length > 0) { + x.push([].slice.call(s)); + } + s = document.querySelectorAll("[id='task-" + (taskNumber+1) + "-value-" + (valueNumber+i) + "-value']"); + if (s.length > 0) { + x.push([].slice.call(s)); + } + h = document.getElementById("task-" + (taskNumber+1) + "-value-" + (valueNumber+i) + "-hr"); + if (h !== null) { + y.push(h); + } + } + if (x.length > 0) { + x.map(e => e.map( + z => z.innerHTML = "" + )); + } + if (y.length > 0) { + y.map(e => e.classList.add("is-hidden")); + } + } else { + s = document.querySelectorAll("[data-clear-task='" + (taskNumber + 1) + "']"); + if (s.length > 0) { + x = [].slice.call(s); + } + if (x.length > 0) { + x.map(e => e.innerHTML = ""); + } + h = document.querySelectorAll("[data-clear-hr='" + (taskNumber + 1) + "']"); + if (h.length > 0) { + y = [].slice.call(h); + } + if (y.length > 0) { + y.map(e => e.classList.add("is-hidden")); + } + h = document.querySelectorAll("[data-hide-row='" + (taskNumber + 1) + "']"); + if (h.length > 0) { + y = [].slice.call(h); + } + if (y.length > 0) { + y.map(e => e.classList.add("is-hidden")); + } + } + }, + 'uploadBinaryAsFile': function (what, file, elementID) { + let uploadSpeed; //This is a bogus value just to get the upload percentage until fetch have this natively! + let maxSize; + let endpoint; + let label = document.getElementById("label-" + elementID); + let labelText = label.innerText; + if (what === "generic") { + uploadSpeed = 35; //this is an average speed for generic files + endpoint = "/upload"; + maxSize = guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage.spiffs_free; + } + if (what === "firmware") { + helpEasy.schedulerDelay(guiEasy.nodes, helpEasy.getCurrentIndex(), 60 * 1000); + uploadSpeed = 25; //since the firmware is also written and not only uploaded the speed is a bit lower compared to the generic upload... + endpoint = "/update"; + maxSize = guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage.sketch_free; + } + maxSize = maxSize * 1000; + if (maxSize < file.size) { + label.innerText = helpEasy.capitalWord("file size too big!"); + helpEasy.blinkElement(label.id, "warning"); + setTimeout(function () { + helpEasy.blinkElement(label.id, "warning"); + }, 500); + setTimeout(function () { + label.innerText = labelText; + }, 750); + } else { + label.innerText = file.name; + let timeout = 100; + let fullUpload = file.size / uploadSpeed / timeout; + let i = 0; + let timer = setInterval(function () { + i++; + let percentage = Math.floor(i / fullUpload * 100); + if (percentage > 100) { + percentage = 100; + } + label.innerText = file.name + " (" + percentage + "%)"; + }, timeout); + let formData = new FormData(); + formData.append("file", file); + formData.append("name", what); + formData.append("enctype", "multipart/form-data"); + let url = "http://" + guiEasy.nodes[helpEasy.getCurrentIndex()].ip + endpoint; + fetch(url, { + method : "POST", + body: formData + }).then( + response => response.text() + ).then( + html => { + clearInterval(timer); + label.innerText = file.name + " (100%)"; + helpEasy.addToLogDOM(html, 3); + setTimeout(function () { + helpEasy.blinkElement(label.id, "success"); + }, 500); + if (what === "generic") { + setTimeout(function () { + helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler, "sysinfo_json"); + helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler, "filelist_json"); + label.innerText = labelText; + helpEasy.updateIndicator(); + }, 900); + } + if (what === "firmware") { + helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler, "sysinfo_json"); + let count = 30; + let countdown = setInterval(function () { + label.innerText = "Will reboot in " + count; + count--; + if (count < 1) { + clearInterval(countdown); + location.reload(); + } + }, 1000); + } + } + ); + } + }, + 'updateIndicator': async function () { + setTimeout(function () { + let storage = guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage; + let availablePercentage = Math.floor(parseInt(storage.spiffs_free) / parseInt(storage.spiffs_size) * 100); + let free = document.getElementById("modal-input-upload-storage-free"); + let occupied = document.getElementById("modal-input-upload-storage-occupied"); + free.style.width = availablePercentage + "%"; + free.innerText = parseInt(storage.spiffs_free) + "kB"; + occupied.style.width = (100 - availablePercentage) + "%"; + occupied.innerText = (parseInt(storage.spiffs_size) - parseInt(storage.spiffs_free)).toString() + "kB"; + }, 5000); + }, + 'parseHTMLstring': function (string, parse, query) { + //Will only return first object's inner html + let temp = document.createElement( 'html' ); + temp.innerHTML = string; + let results = ""; + if (parse === "tag") { + results = temp.getElementsByTagName(query)[0].innerHTML.toString(); + } + if (parse === "name") { + results = temp.getElementsByName(query)[0].innerHTML.toString(); + } + if (parse === "class") { + results = temp.getElementsByClassName(query)[0].innerHTML.toString(); + } + if (parse === "id") { + results = temp.getElementById(query).innerHTML.toString(); + } + if (parse === "query") { + results = temp.querySelectorAll(query)[0].innerHTML.toString(); + } + temp.remove(); + return results; + }, + 'guiUpdaterSettings': function (type) { + let x = guiEasy.nodes[helpEasy.getCurrentIndex()]; + let u = defaultSettings; + let y = helpEasy.getGuiInFields(); + if (type === undefined) { + type = "settings"; + } else { + type = "settingsBrowser"; + } + for (let i = 0; i < y.length; i++) { + let z = document.querySelectorAll("[data-settings='" + y[i] + "']"); + for (let k = 0; k < z.length; k++) { + let m = x; + let path = (type + "--" + y[i]).split("--"); + if (y[i].split("--")[0] === "defaultSettings") { + path = y[i].split("--").slice(1); + m = u; + } + for (let u = 0; u < path.length; u++) { + let d = z[k].dataset; + //populate by type of setting + if (d.type === "string") { + z[k].value = helpEasy.getjsonPathData(path, m); + if (d.settingsIp === "true") { + z[k].value = helpEasy.getjsonPathData(path, m).join("."); + } + if (d.valueIfBlank === z[k].value) { + z[k].value = ""; + } + } + if (d.type === "dropdown") { + if (d.list2value === "true") { + let optionList = []; + for (let i = 0; i < z[k].options.length; i++) { + optionList.push(parseInt(z[k].options[i].value)); + } + z[k].options.selectedIndex = optionList.indexOf(helpEasy.getjsonPathData(path, m)); + } else { + if (helpEasy.getjsonPathData(path, m) === 255) { + z[k].options.selectedIndex = 0; + } else { + z[k].options.selectedIndex = helpEasy.getjsonPathData(path, m) - parseInt(z[k].dataset.optionListOffset); + } + } + } + if (d.type === "password") { + z[k].value = helpEasy.getjsonPathData(path, m); + if (d.valueIfBlank === z[k].value) { + z[k].value = ""; + } + } + if (d.type === "number") { + z[k].value = helpEasy.getjsonPathData(path, m); + } + if (d.type === "toggle") { + z[k].checked = d["change-" + helpEasy.getjsonPathData(path, m)] === "true"; + let label = document.getElementById("label-" + d.id); + if (d.gotTooltip === "") { + label.innerText = helpEasy.capitalWord(d[z[k].checked + "Text"]); + } else { + label.innerHTML = "
    " + helpEasy.capitalWord(d[z[k].checked + "Text"]) + d.tooltip + "
    "; + } + } + } + } + } + }, + 'gaugeLevel': function (gauge, jsonData) { + let parent = gauge.parentNode; + let currentValue = helpEasy.getjsonPathData(gauge.dataset.jsonPathGauge.split("--"), jsonData); + let max = parseInt(gauge.dataset.max); + let min = parseInt(gauge.dataset.min); + let minPosition = 574.5; + let maxPosition = 0; + let currentPosition; + let warningLevel = 0.8; //TODO: move these to settings! + let infoLevel = 0.6; + let successLevel = 0.05; + let gaugeColor = ""; + let test; + if (max > min) { + //normal type + test = (currentValue - min)/(max - min); + if (test > infoLevel) { + gaugeColor = "main-info"; + } + if (test > warningLevel) { + gaugeColor = "main-warning"; + } + if (test < successLevel) { + gaugeColor = "main-success"; + } + } else { + //reversed type + test = (currentValue - max)/(min - max); + if (test < (1 - infoLevel)) { + gaugeColor = "main-info"; + } + if (test < (1 - warningLevel)) { + gaugeColor = "main-warning"; + } + if (test > (1 - successLevel)) { + gaugeColor = "main-success"; + } + } + currentPosition = (1-test)*minPosition; + if (currentPosition > minPosition) { + currentPosition = minPosition; + } + if (currentPosition < maxPosition) { + currentPosition = maxPosition; + } + parent.classList.remove("main-info","main-warning"); + if (gaugeColor !== "") { + parent.classList.add(gaugeColor); + } + gauge.style = "stroke-dashoffset:" + currentPosition + ";"; + }, + 'rssiToBars': function (rssi) { + if (rssi >= -55) { + return "level-5"; + } + if (rssi >= -66) { + return "level-4"; + } + if (rssi >= -77) { + return "level-3"; + } + if (rssi >= -88) { + return "level-2"; + } + return "level-1"; + }, + 'rssiToSVG': function (rssi) { + let level = helpEasy.rssiToBars(rssi); + return guiEasy.curly.icon(["wifi", level]); + }, + 'getjsonPathData': function (path, json) { + //TODO: this can probably be made more elegant? + if (path.length === 1) { + return json[path[0]]; + } + if (path.length === 2) { + return json[path[0]][path[1]]; + } + if (path.length === 3) { + return json[path[0]][path[1]][path[2]]; + } + if (path.length === 4) { + return json[path[0]][path[1]][path[2]][path[3]]; + } + if (path.length === 5) { + return json[path[0]][path[1]][path[2]][path[3]][path[4]]; + } + if (path.length === 6) { + return json[path[0]][path[1]][path[2]][path[3]][path[4]][path[5]]; + } + if (path.length === 7) { + return json[path[0]][path[1]][path[2]][path[3]][path[4]][path[5]][path[6]]; + } + if (path.length === 8) { + return json[path[0]][path[1]][path[2]][path[3]][path[4]][path[5]][path[6]][path[7]]; + } + }, + 'sortObjectArray': (propName) => + (a, b) => a[propName] === b[propName] ? 0 : a[propName] < b[propName] ? -1 : 1 + , + 'addToLogDOM': function (str, level) { + if (str === "pageSize") { + str = document.documentElement.innerHTML.toString().split("").length; + let currentSize = guiEasy.guiStats.pageSize; + if (currentSize === 0) { + guiEasy.guiStats["startSize"] = str; + } + guiEasy.guiStats.pageSize += str; + str = "total page size: " + Math.round(str/1024) + "kB"; + } + if (guiEasy.logLevel >= level) { + console.log(str); + } + }, + 'numberOfFound': function (str, pattern) { + return ((str || '').match(pattern) || []).length; + }, + 'findInArray': function (needle, haystack) { + let found = haystack.indexOf(needle); + return found > -1; + }, + 'listOfProcesses': function (processID, processText, timestamp, type) { + let logElement = document.getElementById("modal-loading-log"); + let progressElement = document.getElementById("modal-loading-progress"); + let spinnerElement = document.getElementById("fallback-loading-animation"); + spinnerElement.classList.add("is-hidden"); + logElement.innerHTML += "
    " + processText + "
    "; + progressElement.max = guiEasy[type].length; + if (guiEasy.guiStats[type] === undefined) { + guiEasy.guiStats[type] = {}; + } + guiEasy.guiStats[type][processID] = "running"; + }, + 'processDone': function (processID, type) { + let progressElement = document.getElementById("modal-loading-progress"); + let logRow = document.getElementById("log-entry-" + processID); + let runtime = Date.now() - logRow.dataset.timestart; + guiEasy.guiStats.bootTime += runtime; + logRow.innerHTML += " (" + runtime + "ms)"; + logRow.classList.add("loading-is-done"); + if (type === "startup") { + if (progressElement.max === progressElement.value) { + //lets close the loading page + let modalBackground = document.getElementById("modal-container"); + let loadingPage = document.getElementById("modal-loading-screen"); + loadingPage.classList.add("is-hidden"); + modalBackground.classList.add("is-hidden"); + modalBackground.classList.remove("is-black"); + helpEasy.addToLogDOM("total boot time: " + guiEasy.guiStats.bootTime + "ms", 1); + } + progressElement.value++; + } + guiEasy.guiStats[type][processID] = "done"; + }, + 'internet': function () { + let internet = false; + if (window.navigator.onLine === true) { + internet = true; + } + return internet; + }, + 'welcomePhrase': function () { + let now = new Date; + let hour = now.getHours(); + if (hour > 17) { + return "Good evening!" + } + if (hour > 11) { + return "Good afternoon!" + } + if (hour > 5) { + return "Good morning!" + } + return "Hi!" + }, + 'urlParams': function () { + let params = {}; + window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { + params[key.toLowerCase()] = value.toLowerCase(); + }); + return params; + }, + 'locationByIP': async function () { + let timestamp = Date.now(); + let path = "https://ipapi.co/json" + "?at=" + timestamp + "&gui=" + guiEasy.geekNameFull(); + let response = await fetch(path); + return await response.json(); + }, + 'blinkElement': function (id, color) { + let fontName = document.getElementById(id); + fontName.classList.add("main-" + color); + setTimeout(function (){ + fontName.classList.remove("main-" + color); + }, 250) + }, + 'dashGroupContainerOpen': function (title = "") { + if (title === "") { + return "
    "; + } else { + return "
    " + helpEasy.capitalWord(title) + "
    "; + } + }, + 'dashBoxContainerOpen': function () { + return "
    "; + }, + 'dashContainerClose': function () { + return "
    "; + }, + 'addToolsButton': function (args) { + let html = ""; + let type = args.type; + let color = ""; + if (args.color !== undefined) { + color = " main-" + args.color; + } + if (type === "command") { + html += ` +
    + +
    ` + helpEasy.capitalWord(args.text) + `
    +
    + `; + } + if (type === "info") { + html += ` +
    + +
    ` + helpEasy.capitalWord(args.text) + `
    +
    + `; + } + if (type === "scanner") { + html += ` +
    + +
    ` + helpEasy.capitalWord(args.text) + `
    +
    + `; + } + if (type === "system") { + html += ` +
    + +
    ` + helpEasy.capitalWord(args.text) + `
    +
    + `; + } + return html; + }, + 'addInput': function (args) { + let type = args.type; + let disabled = ""; + if (args.disabled !== undefined && args.disabled === true) { + disabled = "disabled"; + } + let id = args.title.split(" ").join("-"); + let settingsIdPrefix = "generic-input-"; + let datasetBlob = ""; + if (args.toSettings === true) { + settingsIdPrefix = "settings-input-"; + datasetBlob += 'data-settings="' + args.settingsId + '"'; + } + if (args.settingsIP !== undefined) { + datasetBlob += 'data-settings-ip="' + args.settingsIP + '"'; + } + if (args.settingsRegEx !== undefined) { + datasetBlob += 'data-settings-regex="' + args.settingsRegEx + '"'; + } + if (args.valueIfBlank !== undefined) { + datasetBlob += 'data-value-if-blank="' + args.valueIfBlank + '"'; + } + if (args.allowedBlank !== undefined) { + datasetBlob += 'data-allowed-blank="' + args.allowedBlank + '"'; + } + if (args.optionListOffset !== undefined) { + datasetBlob += 'data-option-list-offset="' + args.optionListOffset + '"'; + } + if (args.list2value !== undefined) { + datasetBlob += 'data-list2value="' + args.list2value + '"'; + } + id = settingsIdPrefix + id; + let tooltip = ""; + let gotTooltip = ""; + if (args.tooltip !== undefined) { + tooltip = "
    " + args.tooltip + "
    "; + gotTooltip = "got-tooltip"; + } + let html = "
    "; + if (type === "string") { + html += "" + helpEasy.capitalWord(args.title) + tooltip + ""; + html += ` + + `; + } + if (type === "password") { + html += "" + helpEasy.capitalWord(args.title) + tooltip + ""; + html += ` + + `; + } + if (type === "dropdown") { + html += "" + helpEasy.capitalWord(args.title) + tooltip + ""; + html += ` + + + `; + } + if (type === "toggle") { + html += ` + + + `; + } + if (type === "number") { + let placeholderText = ""; + if (args.placeholder !== "") { + placeholderText = " [" + args.placeholder + "]"; + } + html += ` + + + `; + } + html += "
    "; + return html; + }, + 'addLine': function () { + return "
    "; + }, + 'openArea': function (title) { + let id = title.replace(" ", "-") + "-area"; + if (defaultSettings.areasMinimized) { + return ` +
    +
    ` + helpEasy.capitalWord(title) + + `` + + `
    + `; + } else { + return ` +
    +
    ` + helpEasy.capitalWord(title) + + `` + + `
    + `; + } + }, + 'closeArea': function () { + return "
    " + }, + 'openColumn': function (id) { + if (id === undefined) { + return "
    "; + } else { + if (id.split("-")[0] === "data") { + return "
    "; + } else { + return "
    "; + } + } + }, + 'closeColumn': function () { + return "
    " + }, + 'checkIfIP': function (ipaddress) { + return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress); + }, + 'screenshot': function (args) { + let html2canvasVersion = "v1.0.0-rc.5"; + if (helpEasy.internet()) { + let id = "screenshot-script"; + /* THIS CHECK WAS A BAD IDEA... NO NEED TO REMOVE AN ALREADY LOADED LIB... + let check = document.getElementById(id); + if (check !== null) { + check.remove(); + } + */ + //flash the screen + let eventDetails = { + "type": "wave", + "text": guiEasy.curly.icon(["screenshot"]), + "color": "inverted" + }; + let background = guiEasy.current.backgroundColor; + if (background === undefined) { + background = "#3492e2"; + } + let inverted = guiEasy.current.invertedColor; + if (inverted === undefined) { + inverted = "#2F4252"; + } + let fileName = helpEasy.capitalWord((guiEasy.current.tab.id).split("-")[0]); + let element = guiEasy.current.modal; + if (element === undefined) { + element = guiEasy.current.tab; + } else { + background = inverted; + fileName = fileName + "-" + document.getElementById("modal-title-text").innerText.replace(/ /g,"_"); + } + fileName = guiEasy.nodes[helpEasy.getCurrentIndex()].live.json.System["Unit Name"] + "-" + fileName; + guiEasy.popper.tryCallEvent(eventDetails); + let script = document.createElement('script'); + script.id = id; + script.onload = function () { + html2canvas(element, { + backgroundColor: background + }).then(function(canvas) {helpEasy.binaryDataToFile(canvas, "image/png", fileName + ".png")}); + }; + script.src = "https://github.com/niklasvh/html2canvas/releases/download/" + html2canvasVersion + "/html2canvas.min.js"; + document.head.appendChild(script); + //TODO: there's left over elements or something when running the sceen shots multiple times on different objects. Tabs will stop being rendered after a modal has been shot... + } else { + //flash the screen, since no internet we cannot use the external lib.. + let eventDetails = { + "type": "wave", + "text": "No internet!", + "color": "warning" + }; + guiEasy.popper.tryCallEvent(eventDetails); + } + }, + 'binaryDataToFile': function (data, type, fileName) { + let id = "temp-binary-blob-element"; + let check = document.getElementById(id); + if (check !== null) { + check.remove(); + } + let a = document.createElement('a'); + a.id = id; + document.body.appendChild(a); + a.style.display = "none"; + a.href = data.toDataURL(type); + a.download = fileName; + a.click(); + }, + //These colors are just for backup, they should be set by the theme + 'favicon': function (color) { + let canvas = document.createElement('canvas'); + let iconSide = 113; + let iconRadius = 15; + canvas.width = iconSide; + canvas.height = iconSide; + let ctx = canvas.getContext('2d'); + ctx.lineWidth = 8; + //The background badge (with rounded corners) + ctx.fillStyle = color.inverted; + ctx.beginPath(); + ctx.moveTo(0,iconRadius); + ctx.lineTo(0,iconSide-iconRadius); + ctx.arc(iconRadius,iconSide-iconRadius, iconRadius, Math.PI, 0.5 * Math.PI, true); + ctx.lineTo(iconRadius,iconSide); + ctx.lineTo(iconSide-iconRadius,iconSide); + ctx.arc(iconSide-iconRadius,iconSide-iconRadius, iconRadius, Math.PI, 1.5 * Math.PI, true); + ctx.lineTo(iconSide,iconSide-iconRadius); + ctx.lineTo(iconSide,iconRadius); + ctx.arc(iconSide-iconRadius,iconRadius, iconRadius, 0, 1.5 * Math.PI, true); + ctx.lineTo(iconSide-iconRadius,0); + ctx.lineTo(iconRadius,0); + ctx.arc(iconRadius,iconRadius, iconRadius, 0, 0.5 * Math.PI, true); + ctx.lineTo(0,iconRadius); + ctx.closePath(); + ctx.fill(); + //The dot + ctx.fillStyle = color.font; + ctx.beginPath(); + ctx.arc(90, 90, 10, 0, 2 * Math.PI); + ctx.closePath(); + ctx.fill(); + //The warning line + ctx.lineCap = "round"; + ctx.strokeStyle = color.warning; + ctx.beginPath(); + ctx.moveTo(42,99); + ctx.lineTo(99,42); + ctx.closePath(); + ctx.stroke(); + //The info line + ctx.strokeStyle = color.info; + ctx.beginPath(); + ctx.moveTo(14,99); + ctx.lineTo(99,14); + ctx.closePath(); + ctx.stroke(); + //The sunny line + ctx.strokeStyle = color.sunny; + ctx.beginPath(); + ctx.moveTo(14,70); + ctx.lineTo(70,14); + ctx.closePath(); + ctx.stroke(); + //The success line + ctx.strokeStyle = color.success; + ctx.beginPath(); + ctx.moveTo(14,42); + ctx.lineTo(42,14); + ctx.closePath(); + ctx.stroke(); + let favicon = document.getElementById("favicon"); + if (favicon !== null) { + favicon.remove(); + } + favicon = document.createElement('link'); + favicon.id = "favicon"; + favicon.type = 'image/x-icon'; + favicon.rel = 'shortcut icon'; + favicon.href = canvas.toDataURL("image/x-icon"); + document.head.appendChild(favicon); + } +}; \ No newline at end of file diff --git a/src/gui_easy_ini.js b/src/gui_easy_ini.js new file mode 100644 index 0000000..5c44b30 --- /dev/null +++ b/src/gui_easy_ini.js @@ -0,0 +1,24 @@ +//https://link.medium.com/c8U3LzyZF2 +//When page has loaded, run "initiate" +window.addEventListener("load", initiate, false); + +function initiate() { + //PRE LAUNCH OF GUI + for (let i = 0; i < guiEasy.startup.length; i++) { + let x = guiEasy.startup[i].id; + let y = guiEasy.startup[i].logText; + let z = "startup"; + let t = Date.now(); + helpEasy.listOfProcesses(x,y,t,z); + guiEasy[x](x,z); + } + //GUI IS LAUNCHED, FETCH ONE TIME STUFF HERE + for (let i = 0; i < guiEasy.silentStartup.length; i++) { + let x = guiEasy.silentStartup[i].id; + let y = guiEasy.silentStartup[i].logText; + let z = "silentStartup"; + let t = Date.now(); + helpEasy.listOfProcesses(x,y,t,z); + guiEasy[x](x,z); + } +} \ No newline at end of file diff --git a/src/gui_easy_pitcher.js b/src/gui_easy_pitcher.js new file mode 100644 index 0000000..c7ae47d --- /dev/null +++ b/src/gui_easy_pitcher.js @@ -0,0 +1,60 @@ +//HERE WE ADD THINGS THAT THE CLIENT WANTS TO DO +guiEasy.pitcher = function (processID, processType) { + let urlParams = helpEasy.urlParams(); + helpEasy.getGuiInFields(); + helpEasy.setCurrentIndex(-1); + guiEasy.nodes.push({"ip":"192.168.74.164", "type":"queen"}); + //guiEasy.nodes.push({"ip":"192.168.73.164", "type":"queen"}); + //guiEasy.nodes.push({"ip":"192.168.43.197", "type":"queen"}); + helpEasy.pingIP(guiEasy.nodes, helpEasy.handlePingResults, helpEasy.handlePingResults).then(r => r); + helpEasy.scheduleFetch(guiEasy.nodes, 0); + //TODO: set "timeouts" for these and have them displayed in the log... + //first make sure the "live" json is populated with data + let x = setInterval(function () { + if (guiEasy.current.live !== undefined) { + clearInterval(x); + helpEasy.setCurrentIndex(0); + guiEasy.current.live = helpEasy.getCurrentIndex(); + //update graphics + helpEasy.guiUpdater(); + helpEasy.addToLogDOM("pageSize", 1); + } + },guiEasy.fetchSettings.intervalTimeKeeper); + //TODO: make a function that will hide all noob guides if name = "ESP_Easy" and number = 0 + //now make sure that the data is injected into page before continue + let y = setInterval(function () { + if (guiEasy.current.gui !== undefined) { + clearInterval(y); + //get data from queen... index for queen is zero + helpEasy.fetchConfigDat(guiEasy.nodes, helpEasy.getCurrentIndex()); + helpEasy.addToLogDOM("pageSize", 1); + } + },50); + + //now make sure that we have the config of the first unit (queen) + let z = setInterval(function () { + if (guiEasy.current.config !== undefined) { + clearInterval(z); + helpEasy.guiUpdaterSettings(); + helpEasy.addToLogDOM("pageSize", 1); + } + },50); + + //when all are populated... + let u = setInterval(function () { + if ( + guiEasy.current.live !== undefined && + guiEasy.current.gui !== undefined && + guiEasy.current.config !== undefined + ) { + clearInterval(u); + //take care of url parameters... + guiEasy.popper.tab({"args":["tab",urlParams.tab]}); + console.log(urlParams); + console.log(guiEasy); + helpEasy.addToLogDOM("pageSize", 1); + helpEasy.processDone(processID, processType); + } + },1); + //and we're live and kicking! +}; \ No newline at end of file diff --git a/src/gui_easy_popper.js b/src/gui_easy_popper.js new file mode 100644 index 0000000..b12ccfb --- /dev/null +++ b/src/gui_easy_popper.js @@ -0,0 +1,1658 @@ +//HERE WE ADD THINGS THAT WILL HAPPEN +guiEasy.popper = function (processID, processType) { + //to make sure we don't spam the event listener... + setInterval(guiEasy.popper.tryCallEvent.counter, 5); + //add event listeners... + guiEasy.popper.events(); + guiEasy.popper.rules(); + guiEasy.popper.favicon(); + //Set custom theme... TODO: make a set custom theme function... load from file system + helpEasy.addToLogDOM("pageSize", 1); + helpEasy.processDone(processID, processType); +}; + +guiEasy.popper.events = function() { + //generic events that will be captured + document.addEventListener(guiEasy.geekName(), guiEasy.popper.guiEvent, false); + document.addEventListener('keydown', guiEasy.popper.keyboard, false); + document.addEventListener('input', guiEasy.popper.input, false); + document.addEventListener('keyup', guiEasy.popper.keyboard, false); + document.addEventListener('click', guiEasy.popper.click, true); + document.addEventListener('change', guiEasy.popper.change, true); + document.addEventListener('focusout', guiEasy.popper.focus, true); +}; + +//BELOW IS FUNCTION TO INTERCEPT AND TRANSLATE THE EVENT INTO A ESP EASY EVENT// +guiEasy.popper.focus = function (event) { + //focus is currently only used to close the action menu ... + if (event.target.dataset["focus"] === undefined) { + return; + } + let args = event.target.dataset["focus"].split("-"); + if (args !== undefined) { + let eventDetails = { + "type": args[0], + "args": args, + "x": event.x, + "y": event.y + }; + setTimeout(function () { + guiEasy.popper.tryCallEvent(eventDetails) + }, 250); + } +}; + +guiEasy.popper.input = function (event) { + let x = event.target.dataset; + let eventDetails = { + "type": "update", + "newValue": event.target.value, + "newState": event.target.checked, + "placeholder": event.target.placeholder, + "args": x + }; + if (eventDetails.type !== undefined) { + guiEasy.popper.tryCallEvent(eventDetails); + } +}; + +guiEasy.popper.change = function (event) { + let x = event.target.dataset; + let eventDetails = { + "type": "update", + "newValue": event.target.value, + "newState": event.target.checked, + "placeholder": event.target.placeholder, + "index": event.target.selectedIndex, + "args": x + }; + if (eventDetails.type !== undefined) { + guiEasy.popper.tryCallEvent(eventDetails); + } +}; + +guiEasy.popper.keyboard = function (event) { + let eventDetails = { + "type": "shortcut", + "object": event.key, + "state": event.type, + "key": event.code, + "ctrl": event.ctrlKey, + "alt": event.altKey, + "event": event + }; + if (eventDetails.type !== undefined) { + guiEasy.popper.tryCallEvent(eventDetails); + } +}; + +guiEasy.popper.click = function (event) { + if (event.target.dataset["click"] === undefined) { + return; + } + let args = event.target.dataset["click"].split("-"); + let x = event.target.dataset; + if (args !== undefined) { + let eventDetails = { + "type": args[0], + "args": args, + "dataset": x, + "x": event.x, + "y": event.y + }; + guiEasy.popper.tryCallEvent(eventDetails); + } +}; +//ABOVE IS FUNCTION TO INTERCEPT AND TRANSLATE THE EVENT INTO A ESP EASY EVENT// +//BELOW IS THE FUNCTION TO TRIGGER ESP EASY EVENT + FIND WHAT WAS FOCUSED// +guiEasy.popper.guiEvent = function (event) { + helpEasy.addToLogDOM(JSON.stringify(event.detail), 2); + let x = event.detail; + guiEasy.popper[x.type](x); +}; + +guiEasy.popper.tryCallEvent = function (eventDetails) { + let x = guiEasy.guiStats.eventCalls; + if (x < 10) { + guiEasy.guiStats.eventCalls++; + helpEasy.addToLogDOM("Calling custom event: " + JSON.stringify(eventDetails), 2); + document.dispatchEvent(new CustomEvent(guiEasy.geekName(), {'detail': eventDetails})); + } +}; + +guiEasy.popper.tryCallEvent.counter = function() { + if (guiEasy.guiStats.eventCalls > 0) { + guiEasy.guiStats.eventCalls--; + } +}; +//ABOVE IS THE FUNCTION TO TRIGGER ESP EASY EVENT + FIND WHAT WAS FOCUSED// +//BELOW IS THE "TO EXEC" FUNCTIONS// +guiEasy.popper.clipboard = function (clipboard) { + console.log(clipboard); +}; + +guiEasy.popper.command = function (x) { + let waveStuff = JSON.parse(x.dataset.args.replace(/'/g, '"')); + let url = "http://" + guiEasy.nodes[helpEasy.getCurrentIndex()].ip + "/?cmd="; + let cmd = x.args[1]; + let waveText = waveStuff.waveText; + let waveColor = waveStuff.color; + if (cmd === "reboot") { + helpEasy.schedulerDelay(guiEasy.nodes, helpEasy.getCurrentIndex(), 15 * 1000); + } else { + helpEasy.schedulerDelay(guiEasy.nodes, helpEasy.getCurrentIndex(), 30 * 1000); + } + fetch(url + cmd).then( results => { + helpEasy.addToLogDOM(("response: " + results), 2); + let eventDetails = { + "type": "wave", + "text": waveText, + "color": waveColor + }; + guiEasy.popper.tryCallEvent(eventDetails); + } + ); + +}; + +guiEasy.popper.topNotifier = function (id, string, color, countdown) { + let x = guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID; + if (x === undefined) { + guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID = id; + } + if (x !== id) { + guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID = id; + let notifier = document.getElementById("top-notifier"); + if (notifier.innerHTML !== "") { + //if it already got something open, replace that one. + notifier.click(); + } + notifier.innerHTML = string; + notifier.classList.add("main-" + color); + if (id === "internetDown") { + //No click away + notifier.classList.add("no-click"); + } + notifier.addEventListener("click", function () { + notifier.classList.add("is-hidden"); + notifier.innerHTML = ""; + guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID = ""; + notifier.classList.remove("no-click"); + notifier.classList.remove("main-" + color); + }); + if (countdown > 0) { + guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID = id; + notifier.innerHTML = "
    " + notifier.innerHTML; + let bar = document.getElementById("countdown-bar"); + let z = 1; + bar.setAttribute("style", "width: 0.1%"); + let y = setInterval(function () { + z++; + bar.setAttribute("style", "width:" + Math.round( z / countdown * 100 ) + "%"); + if (z === countdown) { + clearInterval(y); + } + }, 1000); + setTimeout(function () { + notifier.click(); + }, countdown * 1001) + } + notifier.classList.remove("is-hidden") + } +}; + +guiEasy.popper.tab = function (tabToOpen) { + let tab = tabToOpen.args[1]; + if (tab === undefined) { + tab = "main"; + } + let tabNumber = parseInt(tab); + if (tabNumber > -1) { + tab = guiEasy["tabNumber"][tabNumber]; + } + tabNumber = guiEasy["tabNumber"].indexOf(tab); + guiEasy.current.tabNumber = tabNumber; + guiEasy.current.tab = document.getElementById(tab + "-container"); + //first hide the containers, plus un-hide the wanted container + let x = document.getElementsByClassName("container"); + for (let i = 0; i < x.length; i++) { + let y = x[i].id.split("-")[0]; + x[i].classList.add("is-hidden"); + if (y === tab) { + x[i].classList.remove("is-hidden"); + window.scrollTo(0, 0); + } + } + //now remove the highlight, plus add to the wanted tab + x = document.getElementsByClassName("nav"); + for (let i = 0; i < x.length; i++) { + let y = x[i].dataset; + if (y.highlight === "true") { + x[i].classList.remove("nav-selected"); + } + if (y.tab === tab) { + x[i].classList.add("nav-selected"); + } + } + helpEasy.addToLogDOM("tab open: " + tab, 1); +}; + +guiEasy.popper.menu = function (menuToOpen) { + let x = menuToOpen.args[1]; + let y = menuToOpen.args[2]; + if (x === "action") { + let menu = document.getElementById("menu-button-list"); + let menuButton = document.getElementById("menu-button"); + if (y === "close") { + menu.classList.add("closed"); + menuButton.classList.add("is-inactive"); + } + if (y === "toggle") { + menu.classList.toggle("closed"); + menuButton.classList.toggle("is-inactive"); + } + } + helpEasy.addToLogDOM("menu: " + x, 1); +}; + +guiEasy.popper.modal = function (modalToOpen) { + let x = modalToOpen.args[1]; + let y = modalToOpen.args[2]; + let index = helpEasy.getCurrentIndex(); + let logic = {"nah": "add", "yep": "remove"}; + // nah = add "is-hidden"... yep = remove "is-hidden" + let z = { + "modal": "nah", + "input": { + "string": "nah", + "textarea": "nah", + "upload": "nah" + }, + "button": { + "ok": "nah", + "cancel": "nah", + "close": "nah", + "rescan": "nah", + "copy": "nah", + "location": "nah", + "custom": "nah" + }, + //Defaults, can be override in the ifs further down. + "action": { + "ok": null, + "cancel": "modal-close", + "close": "modal-close", + "rescan": null, + "copy": "modal-copy", + "upload": null, + "location": "update-location", + "custom": null + }, + "countdown": 0, + "info": null, + "table": null, + "setup": null, + "title": null, + "upload": { + "max": null, + "free": null, + "title": null, + "types": null + }, + "custom": null + }; + //What part of the modal should be screenshot:ed? + if (guiEasy.current.modal === undefined) { + guiEasy.current.modal = document.getElementById("modal-view"); + } + if (x === "close") { + if (guiEasy.current.modal !== undefined) { + guiEasy.current.modal.remove(); + } + document.getElementById("modal").innerHTML = document.getElementById("modal").dataset.defaultView; + document.body.classList.remove("modal"); + } else { + document.body.classList.add("modal"); + } + if (x === "theme" && y === "import") { + z.modal = "yep"; + z.input.textarea = "yep"; + z.button.close = "yep"; + z.button.ok = "yep"; + z.action.ok = "theme-import-modal_input_textarea"; + z.title = "please enter theme settings"; + } + if (x === "theme" && y === "copy") { + z.modal = "yep"; + z.title = "added to clipboard!"; + z.info = "
    " + guiEasy.curly.logo(["big"]) + "
    "; + z.countdown = 3; + } + if (x === "wifi" && y === "scanner") { + z.modal = "yep"; + z.button.close = "yep"; + z.button.copy = "yep"; + z.action.copy = "copy-wifi"; //TODO: make a copy popper + z.title = "found wifi networks"; + z.table = guiEasy.nodes[index].modal.table.wifi; + } + if (x === "i2c" && y === "scanner") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "found i2c hardware"; + //z.table = guiEasy.nodes[index].modal.table.i2c;; + } + if (x === "files" && y === "table") { + let storage = guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage; + z.modal = "yep"; + z.button.close = "yep"; + z.title = "files on local storage"; + z.table = guiEasy.nodes[index].modal.table.files; + z.input.upload = "yep"; + z.action.upload = "generic"; + z.upload.max = parseInt(storage.spiffs_size); + z.upload.free = parseInt(storage.spiffs_free); + z.upload.types = ".*"; + z.upload.title = "upload file to unit"; + } + if (x === "firmware" && y === "reset") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "reset firmware"; + z.setup = guiEasy.popper.modal.factoryReset(); + z.button.custom = "yep"; + z.action.custom = "firmware-reset-factory"; + z.custom = { + "text":"factory reset", + "color": "warning" + }; + } + if (x === "firmware" && y === "update") { + let storage = guiEasy.nodes[helpEasy.getCurrentIndex()].live.sysinfo_json.storage; + z.modal = "yep"; + z.button.close = "yep"; + z.title = "update firmware"; + z.input.upload = "yep"; + z.action.upload = "firmware"; + z.upload.max = parseInt(storage.sketch_free) + parseInt(storage.sketch_size); + z.upload.free = parseInt(storage.sketch_free); + z.upload.types = ".bin"; + z.upload.title = "upload bin file to unit"; + } + if (x === "settings" && y === "gui") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "gui settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.custom = "yep"; + z.action.custom = "gui-settings-save"; + z.custom = { + "text":"save gui settings to file", + "color": "success" + }; + } + if (x === "settings" && y === "mqtt") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "mqtt settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "rules") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "rules settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "p2p") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "p2p settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "advanced") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "advanced settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "time") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "time settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "log") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "serial & log settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + } + if (x === "settings" && y === "location") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "geolocation settings"; + z.setup = guiEasy.popper.modal.settings(y); + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + z.button.location = "yep"; + } + if (x === "info" && y === "system") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "system info"; + z.button.copy = "yep"; + z.action.copy = "copy-system"; + z.table = guiEasy.nodes[index].modal.table.sysinfo_json; + } + if (x === "info" && y === "sysvars") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "system variables"; + z.button.copy = "yep"; + z.action.copy = "copy-sysvars"; + //z.table = guiEasy.nodes[index].modal.table.sysinfo_json; + } + if (x === "info" && y === "timing") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "timing statistics"; + z.button.copy = "yep"; + z.action.copy = "copy-timing"; + z.table = guiEasy.nodes[index].modal.table.timingstats_json; + } + if (x === "task" && y === "edit") { + z.modal = "yep"; + z.button.close = "yep"; + z.title = "editing task " + modalToOpen.args[0]; + z.button.ok = "yep"; + z.action.ok = "settings-updated"; + z.button.custom = "yep"; + z.action.custom = "task-delete"; + z.custom = { + "text":"delete", + "color": "warning" + }; + } + //Below we unhide "yep"s + document.getElementById("modal-container").classList[logic[z.modal]]("is-hidden"); + if (z.action.ok !== null) { + document.getElementById("modal-button-ok").dataset.click = z.action.ok; + } + if (z.action.cancel !== null) { + document.getElementById("modal-button-cancel").dataset.click = z.action.cancel; + } + if (z.action.close !== null) { + document.getElementById("modal-title-button-close").dataset.click = z.action.close; + } + if (z.action.copy !== null) { + document.getElementById("modal-title-button-copy").dataset.click = z.action.copy; + } + if (z.action.location !== null) { + document.getElementById("modal-title-button-location").dataset.click = z.action.location; + } + document.getElementById("modal-button-ok").classList[logic[z.button.ok]]("is-hidden"); + document.getElementById("modal-title-button-close").classList[logic[z.button.close]]("is-hidden"); + document.getElementById("modal-title-button-copy").classList[logic[z.button.copy]]("is-hidden"); + document.getElementById("modal-title-button-location").classList[logic[z.button.location]]("is-hidden"); + document.getElementById("modal-button-cancel").classList[logic[z.button.cancel]]("is-hidden"); + document.getElementById("modal-input-string").classList[logic[z.input.string]]("is-hidden"); + document.getElementById("modal-input-textarea").classList[logic[z.input.textarea]]("is-hidden"); + document.getElementById("label-modal-input-upload-file").classList[logic[z.input.upload]]("is-hidden"); + if (z.input.upload === "yep") { + if (z.upload.max !== null && z.upload.free !== null) { + let availablePercentage = Math.floor(z.upload.free / z.upload.max * 100); + let free = document.getElementById("modal-input-upload-storage-free"); + let occupied = document.getElementById("modal-input-upload-storage-occupied"); + free.style.width = availablePercentage + "%"; + free.innerText = z.upload.free + "kB"; + occupied.style.width = (100 - availablePercentage) + "%"; + occupied.innerText = (z.upload.max - z.upload.free).toString() + "kB"; + } + let inputFile = document.getElementById("modal-input-upload-file"); + inputFile.dataset.typeOfUpload = z.action.upload; + inputFile.setAttribute("accept", z.upload.types); + inputFile.addEventListener("change", function (event) { + let what = event.target.dataset.typeOfUpload; + let file = event.target.files[0]; + let id = event.target.id; + helpEasy.uploadBinaryAsFile(what, file, id) + }, false); + } + if (z.custom !== null) { + document.getElementById("modal-button-custom").classList[logic[z.button.custom]]("is-hidden"); + document.getElementById("modal-button-custom").dataset.click = z.action.custom; + document.getElementById("modal-button-custom").innerText = helpEasy.capitalWord(z.custom.text); + document.getElementById("modal-button-custom").classList.add("main-" + z.custom.color); + } + if (z.upload.title !== null) { + document.getElementById("label-modal-input-upload-file").innerText = helpEasy.capitalWord(z.upload.title); + } + if (z.title !== null) { + document.getElementById("modal-title-text").innerText = helpEasy.capitalWord(z.title); + } + if (z.info !== null) { + document.getElementById("modal-info").innerHTML = z.info; + } + if (z.table !== null) { + document.getElementById("modal-table").innerHTML = z.table; + document.getElementById("modal-table").classList.remove("is-hidden"); + guiEasy.current.modal = document.querySelectorAll("[data-modal-table]")[0]; + } + if (z.setup !== null) { + document.getElementById("modal-setup").innerHTML = z.setup; + document.getElementById("modal-setup").classList.remove("is-hidden"); + guiEasy.current.modal = document.querySelectorAll("[data-modal-settings-table]")[0]; + } + helpEasy.guiUpdaterSettings("fromBrowser"); + //Countdown... + if (z.countdown > 0) { + let countdownElement = document.getElementById("modal-title-button-close"); + let messageElement = document.getElementById("modal-click-area"); + //make click on message close it (not just the button in the top right corner) + messageElement.addEventListener("click", function () { + clearInterval(timer); + countdownElement.click(); + }); + countdownElement.innerText = z.countdown; + countdownElement.classList.add("countdown"); + countdownElement.classList.remove("is-hidden"); + let timer = setInterval( function() { + let currentValue = parseInt(countdownElement.innerText); + if (currentValue > 1) { + countdownElement.innerText = (currentValue - 1).toString(); + } else { + clearInterval(timer); + countdownElement.click(); + } + }, 1000); + } +}; + +guiEasy.popper.modal.settings = function (type) { + let html = ""; + html += helpEasy.openColumn("data-modal-settings-table"); + if (type === "gui") { + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "escape key", + "settingsId": "defaultSettings--preventDefaults--escape", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "esc = close modals", + "trueText": "esc = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "ctrl space key", + "settingsId": "defaultSettings--preventDefaults--ctrl+space", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "ctrl + space = open swarm", + "trueText": "ctrl + space = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "ctrl enter key", + "settingsId": "defaultSettings--preventDefaults--ctrl+enter", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "ctrl + enter = take screenshot", + "trueText": "ctrl + enter = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "ctrl keys key", + "settingsId": "defaultSettings--preventDefaults--ctrl+keys", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "ctrl + s = save settings", + "trueText": "ctrl + s = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "ctrl keyz key", + "settingsId": "defaultSettings--preventDefaults--ctrl+keyz", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "ctrl + z = dismiss changes", + "trueText": "ctrl + z = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "alt digit key", + "settingsId": "defaultSettings--preventDefaults--alt+digit", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "alt + digit = jump to tab", + "trueText": "alt + digit = not used", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "alt arrow key", + "settingsId": "defaultSettings--preventDefaults--alt+arrows", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "alt + l/r arrow = jump to tab", + "trueText": "alt + l/r arrow = not used", + "default":true + } + ); + html += "
    "; + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "minimize areas", + "settingsId": "defaultSettings--areasMinimized", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "areas collapsed by default", + "trueText": "areas expanded by default", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "show help links", + "settingsId": "defaultSettings--helpLinks", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "help links = show", + "trueText": "help links ≠ show", + "default":true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "warn if internet lost", + "settingsId": "defaultSettings--internetLostShow", + "settingsTrue": 0, + "settingsFalse": 1, + "falseText": "notify on internet lost", + "trueText": "internet lost, don't care", + "default":true + } + ); + html += "
    "; + html += helpEasy.addInput( + { + "type": "dropdown", + "toGuiSettings": true, + "alt": "settings-change", + "title": "syntax of copy to clipboard", + "settingsId": "defaultSettings--clipboardSyntax", + "placeholder": "", + "default": 0, + "optionList": [ + {"text": "Default", "value": 0, "disabled":false, "note":""}, + {"text": "GitHub", "value": 1, "disabled":false, "note":""}, + {"text": "phpBB", "value": 2, "disabled":false, "note":""} + ] + } + ); + } + if (type === "p2p") { + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "udp port", + "settingsId": "config--espnetwork--port", + "placeholder": "", + "tooltip": "8266 is the default
    esp easy udp port.", + "default": 8266, + "max": 65535, + "min": 0, + "step": 1 + } + ); + } + if (type === "log") { + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "enable serial", + "settingsId": "config--serial--enabled", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "serial output enabled", + "falseText": "serial not used", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "toGuiSettings": true, + "alt": "settings-change", + "title": "serial baud rate", + "settingsId": "config--serial--baudrate", + "list2value": true, + "default": 3, + "optionList": [ + {"text": "9600", "value": 9600, "disabled":false, "note":""}, + {"text": "19200", "value": 19200, "disabled":false, "note":""}, + {"text": "57600", "value": 57600, "disabled":false, "note":""}, + {"text": "115200", "value": 115200, "disabled":false, "note":""}, + {"text": "128000", "value": 128000, "disabled":true, "note":""}, + {"text": "256000", "value": 256000, "disabled":true, "note":""} + ] + } + ); + html += "
    "; + html += helpEasy.addInput( + { + "type": "dropdown", + "toGuiSettings": true, + "alt": "settings-change", + "title": "syntax of copy to clipboard", + "settingsId": "defaultSettings--clipboardSyntax", + "placeholder": "", + "default": 0, + "optionList": [ + {"text": "Default", "value": 0, "disabled":false, "note":""}, + {"text": "GitHub", "value": 1, "disabled":false, "note":""}, + {"text": "phpBB", "value": 2, "disabled":false, "note":""} + ] + } + ); + + } + if (type === "location") { + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "Longitude [°]", + "settingsId": "config--location--long", + "placeholder": "", + "default": 0, + "max": 180, + "min": -180, + "step": 0.00000000000001 + } + ); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "Latitude [°]", + "settingsId": "config--location--lat", + "placeholder": "", + "default": 0, + "max": 90, + "min": -90, + "step": 0.00000000000001 + } + ); + } + if (type === "time") { + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "use ntp server", + "settingsId": "config--ntp--enabled", + "settingsTrue": 1, + "settingsFalse": 0, + "falseText": "ntp disabled", + "trueText": "use ntp server", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "string", + "toSettings": true, + "alt": "settings-change", + "title": "ntp server", + "settingsId": "config--ntp--host", + "placeholder": "blank = default ntp server", + "default": "" + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toGuiSettings": true, + "alt": "settings-change", + "title": "daylight saving", + "settingsId": "config--dst--enabled", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "daylight saving is enabled", + "falseText": "no daylight saving", + "default":false + } + ); + html += "
    "; + html += "
    " + helpEasy.capitalWord("dst starting") + "
    "; + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "week", + "alt": "settings-change", + "settingsId": "config--1", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.week + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "day", + "alt": "settings-change", + "settingsId": "config--2", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.day + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "month", + "alt": "settings-change", + "settingsId": "config--3", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.month + } + ); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "hour", + "settingsId": "config--4", + "placeholder": "", + "tooltip": "The hour that
    will be jumped ahead.", + "default": 2, + "max": 23, + "min": 0, + "step": 1 + } + ); + html += "
    " + helpEasy.capitalWord("dst ending") + "
    "; + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "week", + "alt": "settings-change", + "settingsId": "config--5", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.week + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "day", + "alt": "settings-change", + "settingsId": "config--6", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.day + } + ); + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "month", + "alt": "settings-change", + "settingsId": "config--7", + "placeholder": "", + "default": 0, + "optionList": guiEasy.timelist.month + } + ); + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "hour", + "settingsId": "config--8", + "placeholder": "", + "tooltip": "The hour that
    will be jumped behind.", + "default": 2, + "max": 23, + "min": 0, + "step": 1 + } + ); + } + if (type === "rules") { + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "use rules", + "settingsId": "config--rules--enabled", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "rules are not used", + "falseText": "rules are activated", + "default": true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "tolerant last parameter", + "settingsId": "config--rules--tolerantargs", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "last parameter can be left out", + "falseText": "tolerance is set to strict", + "default": true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "use old rules engine", + "settingsId": "config--rules--oldengine", + "settingsTrue": 1, + "settingsFalse": 0, + "falseText": "old engine", + "trueText": "experimental engine", + "default": true + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "send to http wait for acknowledge", + "settingsId": "config--rules--SendToHTTPack", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "send to http = wait for ok", + "falseText": "send to http = send & forget", + "default": true + } + ); + } + if (type === "mqtt") { + html += helpEasy.addInput( + { + "type": "number", + "toSettings": true, + "alt": "settings-change", + "title": "message interval [ms]", + "settingsId": "config--mqtt--interval", + "placeholder": "", + "tooltip": "This is the minimum time
    in-between messages.", + "default": 100, + "max": 999999, + "min": 0, + "step": 1 + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "mqtt retain", + "settingsId": "config--mqtt--retain_flag", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "mqtt retain used", + "falseText": "mqtt retain not used", + "default": false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "use user name", + "settingsId": "config--mqtt--useunitname", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "use unit name as client id", + "falseText": "use generic client id", + "default": false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "toSettings": true, + "alt": "settings-change", + "title": "use client id", + "settingsId": "config--mqtt--changeclientidrecon", + "settingsTrue": 1, + "settingsFalse": 0, + "trueText": "change client id each connect", + "falseText": "persistent client id", + "default": false + } + ); + } + html += helpEasy.openColumn(); + return html; +}; + +guiEasy.popper.modal.factoryReset = function () { + let html = "
    "; + html += helpEasy.addInput( + { + "type": "toggle", + "title": "keep unit name", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "will keep unit name / no", + "falseText": "will not keep unit name / no", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "title": "keep wifi config", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "will keep wifi config", + "falseText": "will not keep wifi config", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "title": "keep network config", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "will keep network config", + "falseText": "will not keep network config", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "title": "keep ntp dst config", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "will keep ntp / dst config", + "falseText": "will not keep ntp / dst config", + "default":false + } + ); + html += helpEasy.addInput( + { + "type": "toggle", + "title": "keep log config", + "settingsTrue": 0, + "settingsFalse": 1, + "trueText": "will keep log config", + "falseText": "will not keep log config", + "default":false + } + ); + html += "
    "; + html += helpEasy.addInput( + { + "type": "dropdown", + "title": "pre-defined config to use", + "placeholder": "", + "default": 0, + "optionList": guiEasy.gpiolist() //TODO: populate with pre-configs + } + ); + return html + "
    "; +}; + +guiEasy.popper.drawer = function (drawerToOpen) { + let drawerName = drawerToOpen.args[1]; + let drawerObject = document.getElementById("drawer-" + drawerName); + let x = drawerObject.dataset; + drawerObject.classList.toggle(x.close); + drawerObject.classList.toggle(x.open); + helpEasy.addToLogDOM("drawer: " + drawerName, 1); +}; + +guiEasy.popper.theme = function (whatToDo) { + let what = whatToDo.args[1]; + if (what === "default") { + let input = document.querySelectorAll('*[id^="theme-"]'); + for (let i = 0; i < input.length; i++) { + if (input[i].dataset.alt === "css-familycustom") { + continue; + } + let blob = {}; + blob.args = input[i].dataset; + blob.placeholder = input[i].placeholder; + blob.newValue = input[i].dataset.defaultValue; + blob.newState = input[i].dataset.defaultValue; + blob.index = input[i].dataset.defaultIndex; + guiEasy.popper.css(blob); + } + } + if (what === "copy") { + let input = document.getElementById("custom-theme-settings"); + let themeOutput = JSON.stringify(input.dataset); + themeOutput = themeOutput.match(/".*?\|.*?"/g); + if (themeOutput === null) { + themeOutput = ["NO CHANGES WAS MADE TO THE THEME"]; + } + let themeVars = []; + for (let i = 0; i < themeOutput.length; i++) { + let line = themeOutput[i].split('":"')[1]; + themeVars[i] = line.slice(0, line.length-1); + } + themeVars.sort(); + let clipboard = ""; + for (let i = 0; i < themeVars.length; i++) { + clipboard += themeVars[i]; + if (i !== (themeVars.length - 1)) { + clipboard += "\n"; + } + } + helpEasy.copyToClipboard(clipboard); + whatToDo.args[1] = "theme"; + whatToDo.args[2] = "copy"; + guiEasy.popper.modal(whatToDo); + } + if (what === "import") { + let importData = whatToDo.args[2].replace(/_/g,"-"); + importData = document.getElementById(importData).value; + document.getElementById("modal-container").classList.add("is-hidden"); + let themeVariables = importData.split("\n"); + let cssSettings = defaultSettings.css; + for (let k =0; k < themeVariables.length; k++) { + let h = themeVariables[k]; + let cssVar = h.split("|")[0]; + let cssValue = h.split("|")[1]; + let type = cssVar.split("-"); + type = type[(type.length - 1)]; + let newState = ""; + let placeholder = ""; + if (type === "toggle") { + newState = cssSettings.toggle[cssVar][cssValue]; + } + if (type === "size") { + placeholder = cssSettings.size[cssVar].placeholder; + cssValue = parseInt(cssValue); + } + let eventDetails = { + "type": "update", + "newValue": cssValue, + "newState": newState, + "placeholder": placeholder, + "args": { + "alt": "css-" + type, + "change": cssVar + } + }; + //to not spam the event caller we add a delay (10ms per each call). + setTimeout(function () { + guiEasy.popper.tryCallEvent(eventDetails); + }, (k*10)); + } + } +}; + +guiEasy.popper.delete = function (whatToDo) { + let type = whatToDo.args[1]; + if (type === "file") { + let z = document.getElementById(whatToDo.dataset.filename); + z.classList.add("is-inactive"); + guiEasy.nodes[helpEasy.getCurrentIndex()].deleteFile = whatToDo.dataset.filename; + let url = "http://" + guiEasy.nodes[helpEasy.getCurrentIndex()].ip + "/filelist?delete=" + whatToDo.dataset.filename; + fetch(url).then( results => { + helpEasy.addToLogDOM(("response: " + results), 2); + helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler, "filelist_json"); + helpEasy.schedulerBump(guiEasy.nodes[helpEasy.getCurrentIndex()].scheduler, "sysinfo_json"); + helpEasy.updateIndicator(); + } + ); + } +}; + +guiEasy.popper.ghost = function (whatToDo) { + console.log(whatToDo); +}; + +guiEasy.popper.screenshot = function () { + helpEasy.screenshot(); +}; + +guiEasy.popper.area = function (whatToDo) { + let newState = whatToDo.args[1]; + let id = whatToDo.args.slice(2).join("-"); + let area = document.getElementById(id); + let buttonMin = document.getElementById("button-min-" + id); + let buttonMax = document.getElementById("button-max-" + id); + if (newState === "min") { + area.classList.add("hide-contents"); + buttonMax.classList.remove("is-hidden"); + buttonMin.classList.add("is-hidden"); + } else { + area.classList.remove("hide-contents"); + buttonMax.classList.add("is-hidden"); + buttonMin.classList.remove("is-hidden"); + } +}; + +guiEasy.popper.update = async function (whatToDo) { + if (whatToDo.args[1] === "location") { + if (helpEasy.internet() === true) { + if (defaultSettings.location === undefined) { + defaultSettings.location = await helpEasy.locationByIP(); + } + document.getElementById("settings-input-Longitude-[°]").value = defaultSettings.location.longitude; + document.getElementById("settings-input-Latitude-[°]").value = defaultSettings.location.latitude; + } // TODO: make "else" if no internet to show that it cannot be done + } + //these can be skipped if the alt isn't populate + if (whatToDo.args.alt === undefined) { + return; + } + if (whatToDo.args.alt === "settings-change") { + guiEasy.popper.settingsDiff(whatToDo); + } + let type = whatToDo.args.alt.split("-")[0]; + if (type === "css") { + guiEasy.popper.css(whatToDo); + } + if (type === "editor") { + //TODO: send to syntax highlighter... + console.log(whatToDo); + } +}; + +guiEasy.popper.task = function (whatToDo) { + if (whatToDo.args[1] === "edit") { + let taskNumber = parseInt(whatToDo.args[2]); + let dataset = document.getElementById("setup-templates").dataset; + let presetPluginNumber = guiEasy.nodes[helpEasy.getCurrentIndex()].settings.tasks[(taskNumber-1)].device; + if (presetPluginNumber === 0) { + //no plugin is setup + } + if (presetPluginNumber) { + //a plugin is set up but not part of firmware = cannot run + } + guiEasy.popper.modal({"args":[taskNumber,"task","edit"]}); + console.log(presetPluginNumber); + } + console.log(whatToDo); +}; + +guiEasy.popper.settingsDiff = function (whatToDo) { + let type = whatToDo.args.type; + let settingsPath = whatToDo.args.settings.split("--"); + let index = helpEasy.getCurrentIndex(); + let x = guiEasy.nodes[index].settings; + let y = guiEasy.nodes[index].settingsBrowser; + if (type === "string") { + if (whatToDo.args.settingsIp !== undefined) { + let ip = whatToDo.newValue; + //maximum length of ip number is 15 + ip = ip.slice(0, 15); + document.getElementById(whatToDo.args.id).value = ip; + if (helpEasy.checkIfIP(ip)) { + helpEasy.blinkElement(whatToDo.args.id, "success"); + } else { + helpEasy.blinkElement(whatToDo.args.id, "warning"); + } + } + } + if (type === "toggle") { + let toggle = document.getElementById(whatToDo.args.id); + let label = document.getElementById("label-" + whatToDo.args.id); + label.innerHTML = helpEasy.capitalWord(toggle.dataset[toggle.checked + "Text"]); + } +}; + +guiEasy.popper.settings = function (whatToDo) { + let eventDetails = { + "type": "wave", + "text": whatToDo.args[1], + "color": whatToDo.args[2] + }; + guiEasy.popper.tryCallEvent(eventDetails); +}; + +guiEasy.popper.wave = function (args) { + let waveElement = document.getElementById("wave"); + let textElement = document.getElementById("wave-text"); + waveElement.classList.add("main-" + args.color); + textElement.innerHTML = helpEasy.capitalWord(args.text); + waveElement.classList.remove("is-inactive"); + setTimeout( function () { + waveElement.classList.add("is-inactive"); + waveElement.classList.remove("main-" + args.color); + }, 800); +}; + +guiEasy.popper.shortcut = function (keyboard) { + let keyCombo = ""; + let pd = defaultSettings.preventDefaults; + if (keyboard.alt === true) { + keyCombo += "alt " + } + if (keyboard.ctrl === true) { + keyCombo += "ctrl "; + } + keyCombo += keyboard.key; + keyCombo = keyCombo.trim().replace(/ /g, "+").toLowerCase(); + // "key" and the letter... + if (keyCombo === "ctrl+keys" && keyboard.state === "keydown") { + //Save settings... + if (pd[keyCombo]) { + keyboard.event.preventDefault(); + let details = {}; + details.args = ("settings-save-success").split("-"); + guiEasy.popper.settings(details); + } + } + if (keyCombo === "ctrl+keyz" && keyboard.state === "keydown") { + //Cancel settings... + if (pd[keyCombo]) { + keyboard.event.preventDefault(); + let details = {}; + details.args = ("settings-cancel-sunny").split("-"); + guiEasy.popper.settings(details); + helpEasy.guiUpdaterSettings(); + } + } + if (keyCombo === "alt+altleft" && keyboard.state === "keydown") { + //Show alt keys + if (pd["alt+digit"]) { + let alts = document.querySelectorAll(".alt-popup"); + for (let i = 0; i < alts.length; i++) { + alts[i].classList.remove("is-hidden"); + } + } + } + if (keyCombo === "ctrl+enter" && keyboard.state === "keydown") { + //Screenshot + if (pd[keyCombo]) { + helpEasy.screenshot(); + } + } + if (keyCombo === "altleft" && keyboard.state === "keyup") { + //Hide alt keys + let alts = document.querySelectorAll(".alt-popup"); + for (let i = 0; i < alts.length; i++) { + alts[i].classList.add("is-hidden"); + } + } + if (keyCombo === "escape" && keyboard.state === "keydown") { + //close open modal + if (pd[keyCombo]) { + guiEasy.popper.modal({"args": ["modal", "close"]}); + } + } + if (keyCombo === "ctrl+space" && keyboard.state === "keydown") { + //Show swarm + if (pd[keyCombo]) { + + } + } + //ALT + DIGIT 0...9 + let number = keyCombo.replace( /^\D+/g, ""); + if (keyCombo === ("alt+digit" + number) && keyboard.state === "keydown") { + //Goto tab.. + if (pd["alt+digit"]) { + guiEasy.popper.tab({"args": ["tab", number]}); + } + //guiEasy.popper.tab({"args":["tab", guiEasy.tabNumber[number]]}); <---- keep as reference now that numerical value is accepted + } + //APT + ARROW left/right, skip tabs + if ( + (keyCombo === "alt+arrowleft" && keyboard.state === "keydown") || + (keyCombo === "alt+arrowright" && keyboard.state === "keydown") + ) { + if (pd["alt+arrows"]) { + let tabNumber = guiEasy.current.tabNumber; + if (keyCombo === "alt+arrowleft") {tabNumber = tabNumber - 1} else {tabNumber = tabNumber + 1}; + while (guiEasy.tabNumber[tabNumber] === undefined) { + if (keyCombo === "alt+arrowleft") {tabNumber = tabNumber - 1} else {tabNumber = tabNumber + 1} + if (tabNumber < 0) {tabNumber = 9} + if (tabNumber > 9) {tabNumber = 0} + } + guiEasy.popper.tab({"args":["tab", tabNumber]}); + } + } + helpEasy.addToLogDOM("key combo: " + keyCombo + " (" + keyboard.state + ")", 2); +}; + +guiEasy.popper.favicon = function () { + let colors = { + "inverted": "#2F4252", + "sunny": "#FFD100", + "info": "#FF8F12", + "warning": "#EF483D", + "success": "#00AE41", + "font": "#FFFFFF" + }; + let themeSetting = document.getElementById("custom-theme-settings").dataset; + if (Object.keys(themeSetting).length > 0) { + for (let i = 0; i < Object.keys(themeSetting).length; i++) { + let x = Object.keys(themeSetting)[i].toString(); + let color = x.split(/(?=[A-Z])/).map(s => s.toLowerCase()); + let hexCode = helpEasy.rgb2hex(themeSetting[x].split("|")[1]); + colors[color[1]] = hexCode; + } + } + helpEasy.favicon(colors); +}; + +guiEasy.popper.css = function (blob) { + let z = document.documentElement.style; + let fallbackFonts = "'Segoe UI', Calibri, Arial"; + let themeSetting = document.getElementById("custom-theme-settings"); + let type = blob.args.alt.split("-")[1]; + let cssVar = blob.args.change; + let newValue = blob.newValue; + let inputElement = document.getElementById("theme-" + cssVar); + if (type === "color") { + if (newValue.match("#")) { + newValue = helpEasy.hex2rgb(newValue); + } + inputElement.value = helpEasy.rgb2hex(newValue); + if (cssVar === "main-bg-color") { + //The overall color used by some browsers to color their navbar and thumbnails etc. + document.getElementsByName("theme-color")[0].content = helpEasy.rgb2hex(newValue); + guiEasy.current.backgroundColor = helpEasy.rgb2hex(newValue); + } + if (cssVar === "main-inverted-color") { + guiEasy.current.invetedColor = helpEasy.rgb2hex(newValue); + } + } + if (type === "toggle") { + let newState = blob.newState; + let newStateToValue = helpEasy.swapKey2Value(defaultSettings.css.toggle[cssVar]); + newValue = newStateToValue[newState]; + let alreadySet = document.getElementById("theme-" + cssVar).dataset; + if (alreadySet[(newState + "Text")] === undefined) { + document.getElementById("label-" + cssVar).innerText = blob.args[(newState + "Text")]; + } else { + document.getElementById("label-" + cssVar).innerText = alreadySet[(newState + "Text")]; + } + document.getElementById("theme-" + cssVar).checked = newState; + } + if (type === "size") { + inputElement.value = newValue; + newValue += blob.placeholder; + } + if (type === "family") { + let customFontRow = document.getElementById("row-custom-font-family"); + let customFontInput = document.getElementById("theme-custom-font-family"); + let index = 0; + let loop = defaultSettings.css.family["default-font-family"]; + for (let k = 0; k < loop.length; k++) { + if (loop[k].value === newValue) { + index = k; + } + } + if (index > 0) { + inputElement.selectedIndex = index; + customFontInput.value = ""; + customFontRow.classList.add("is-hidden"); + } else { + //CUSTOM FONT WANTED + inputElement.selectedIndex = 0; + customFontRow.classList.remove("is-hidden"); + customFontRow.scrollIntoView(true); + //See if a custom font name is given + let test = newValue.split("|"); + if (test.length > 1) { + newValue = fallbackFonts; + } else { + //Parse the font name + let customFontName = newValue.replace(", " + fallbackFonts, ""); + customFontName = customFontName.replace(/'/g, ""); + document.getElementById("theme-custom-font-family").value = customFontName; + let customFont = guiEasy.popper.css.customFont(); + newValue = "'" + customFont + "', " + fallbackFonts; + } + } + } + if (type === "familycustom") { + let customFont = guiEasy.popper.css.customFont(); + newValue = "'" + customFont + "', " + fallbackFonts; + } + if (type === "url") { + inputElement.value = newValue; + guiEasy.popper.css.customBackground(blob); + } + //We store the values in a DOM element to easier fetch them later (export of theme etc.) + themeSetting.setAttribute("data-" + cssVar, cssVar + "|" + newValue); + //update the HTML element + z.setProperty("--" + cssVar, newValue); + guiEasy.popper.favicon(); +}; + +guiEasy.popper.css.testUrl = function(url, linkId, elementId) { + let link = document.getElementById(linkId); + if (link !== null) { + link.remove(); + } + link = document.createElement("link"); + link.id = linkId; + link.type = "text/css"; + link.rel = "stylesheet"; + link.setAttribute("data-error", "warning"); + link.setAttribute("data-load", "success"); + link.addEventListener("error", function () { + helpEasy.blinkElement(elementId,"warning"); + }); + link.addEventListener("load", function () { + helpEasy.blinkElement(elementId,"success"); + }); + document.head.appendChild(link); + link.href = url; +}; + +guiEasy.popper.css.customFont = function () { + let linkId = "custom-google-font-link"; + let elementId = "theme-custom-font-family"; + let googleUrl = "https://fonts.googleapis.com/css?family="; + let fontName = document.getElementById(elementId); + let url = googleUrl + fontName.value.split(' ').join('+'); + guiEasy.popper.css.testUrl(url, linkId, elementId); + return fontName.value; +}; + +guiEasy.popper.css.customBackground = function (blob) { + let url = blob.newValue; + let body = document.body; + let selector1 = "body.got-wallpaper::after"; + let selector2 = "div.got-wallpaper::after"; + //let selector = "body.got-wallpaper nav, body.got-wallpaper::after"; + if (url === "") { + body.classList.remove("got-wallpaper"); + } + let linkId = "custom-background-link"; + let elementId = "theme-custom-wallpaper-url"; + guiEasy.popper.css.testUrl(url, linkId, elementId); + let stylesheet = document.styleSheets[0]; + for (let i = 0; i < stylesheet.cssRules.length; i++) { + let x = stylesheet.cssRules[i]; + if (x.selectorText === selector1 || x.selectorText === selector2) { + x.style.background = "url(" + url + ")"; + x.style.backgroundRepeat = "no-repeat"; + x.style.backgroundPosition = "center center"; + x.style.backgroundSize = "cover"; + x.style.backgroundAttachment = "fixed"; + x.style.backgroundAttachment = "fixed"; + } + } + if (url !== "") { + body.classList.add("got-wallpaper"); + } +}; \ No newline at end of file diff --git a/src/gui_easy_popper_rules.js b/src/gui_easy_popper_rules.js new file mode 100644 index 0000000..e070de0 --- /dev/null +++ b/src/gui_easy_popper_rules.js @@ -0,0 +1,636 @@ +guiEasy.popper.rules = function(){ + let x = guiEasy.popper.rules; + x.splitSyntax(); + let editor = document.getElementById("rules-editor"); + if (editor === null) { + return; + } + let syntax = document.getElementById("rules-editor-syntax"); + let input = document.getElementById("rules-editor-input"); + let selection = document.getElementById("rules-editor-selection"); + let background = document.getElementById("rules-editor-background"); + guiEasy.popper.rules.syntax.editorElement = editor; + guiEasy.popper.rules.syntax.syntaxElement = syntax; + guiEasy.popper.rules.syntax.inputElement = input; + guiEasy.popper.rules.syntax.selectionElement = selection; + guiEasy.popper.rules.syntax.backgroundElement = background; + editor.addEventListener("input", x.input, false); + editor.addEventListener("keydown", x.input.tab, false); + x.handleScroll(); +}; + +guiEasy.popper.rules["syntax"] = { + 'command': [ + ['7db','73','P'], + ['7dn','73','P'], + ['7doff','73','P'], + ['7don','73','P'], + ['7dt','73','P'], + ['AccessInfo','0','I'], + ['Background','0','I'], + ['Backward','48','P'], + ['BlynkGet','0','I'], + ['Build','0','I'], + ['Buzzer','2','N'], + ['Chime','55','P'], + ['ChimePlay','55','P'], + ['ChimeSave','55','P'], + ['Clear','12','P'], + ['ClearAccessBlock','0','I'], + ['ClearRTCRAM','0','I'], + ['Config','0','I'], + ['DCMotor','48','P'], + ['Debug','0','I'], + ['DeepSleep','0','I'], + ['Delay','0','I'], + ['DMX','54','P'], + ['Double','48','P'], + ['Email','1','N'], + ['ENCwrite','59','P'], + ['Eq','65','P'], + ['Erase','0','I'], + ['Event','5','C'], + ['ExecuteRules','0','I'], + ['EXTGPIO','11','P'], + ['EXTLongPulse','11','P'], + ['EXTPulse','11','P'], + ['EXTPWM','11','P'], + ['Forward','48','P'], + ['GetLevel','21','P'], + ['GPIO','1','P'], + ['High','36','P'], + ['HLWCalibrate','76','P'], + ['HLWReset','76','P'], + ['I2CScanner','0','I'], + ['InputSwitchState','1','P'], + ['InterLeave','48','P'], + ['IP','0','I'], + ['IRSend','35','P'], + ['JVC','35','P'], + ['LCDCMD','12','P'], + ['Let', '0', 'I'], + ['LogEntry','0','I'], + ['LongPulse','1','P'], + ['LongPulse_ms','1','P'], + ['Low','36','P'], + ['LowMem','0','I'], + ['MalLoc','0','I'], + ['Mbr','57','P'], + ['MCPGPIO','9','P'], + ['MCPLongPulse','9','P'], + ['MCPPulse','9','P'], + ['MemInfo','0','I'], + ['MHZABCDisable','49','P'], + ['MHZABCEnable','49','P'], + ['MHZCalibrateZero','49','P'], + ['MHZMeasurementRange1000','49','P'], + ['MHZMeasurementRange2000','49','P'], + ['MHZMeasurementRange3000','49','P'], + ['MHZMeasurementRange5000','49','P'], + ['MHZReset','49','P'], + ['MicroStep','48','P'], + ['Mnum','57','P'], + ['Monitor','1','P'], + ['MotorShieldCMD','48','P'], + ['Mprint','57','P'], + ['NEC','35','P'], + ['NeoClockColor','41','P'], + ['NeoPixel','38','P'], + ['NeoPixelAll','38','P'], + ['NeoPixelLine','38','P'], + ['NeoTestAll','41','P'], + ['NeoTestLoop','41','P'], + ['Nextion','75','P'], + ['NoSleep','0','I'], + ['Notify','0','I'], + ['Off','12','P'], + ['OLEDCMD','23','P'], + ['OLEDFramedCMD','36','P'], + ['Panasonic','35','P'], + ['Password','0','I'], + ['PCAFrq','22','P'], + ['PCAPWM','22','P'], + ['PCFGPIO','19','P'], + ['PCFLongPulse','19','P'], + ['PCFPulse','19','P'], + ['PinState','1','P'], + ['Pioneer','35','P'], + ['Publish','0','I'], + ['Pulse','1','P'], + ['PWM','1','P'], + ['Raw','35','P'], + ['RC5','35','P'], + ['RC6','35','P'], + ['Reboot','0','I'], + ['Release','48','P'], + ['ResetFlashWriteCounter','0','I'], + ['Restart','0','I'], + ['RTTTL','1','P'], + ['Samsung','35','P'], + ['SDCard','0','I'], + ['SDRemove','0','I'], + ['SendToHTTP','0','I'], + ['SendToUDP','0','I'], + ['Senseair_SetABCPeriod','52','P'], + ['Senseair_SetRelay','52','P'], + ['SentTo','0','I'], + ['SerialFloat','0','I'], + ['SerialSend','20','P'], + ['Servo','1','P'], + ['SetLevel','21','P'], + ['Settings','0','I'], + ['Single','48','P'], + ['Sony','35','P'], + ['Status','1','P'], + ['Stepper','48','P'], + ['Stop','65','P'], + ['SysLoad','0','I'], + ['Tare','67','P'], + ['TaskClear','0','I'], + ['TaskClearAll','0','I'], + ['TaskRun','0','I'], + ['TaskValueSet','0','I'], + ['TaskValueSetAndRun','0','I'], + ['TimerPause','0','I'], + ['TimerResume','0','I'], + ['TimerSet','0','I'], + ['Tone','1','P'], + ['UDPTest','0','I'], + ['Unit','0','I'], + ['WDConfig','0','I'], + ['WDRead','0','I'], + ['WiFiAPMode','0','I'], + ['WiFiConnect','0','I'], + ['WiFiDisconnect','0','I'], + ['WiFiKey','0','I'], + ['WiFiKey2','0','I'], + ['WiFiScan','0','I'], + ['WiFiSSID','0','I'], + ['WiFiSSID2','0','I'], + ['Vol','65','P'] + ], + 'event': [ + ['Clock#Time=','0','I'], + ['GPIO#','0','I'], + ['GPS#GotFix','82','P'], + ['GPS#LostFix','82','P'], + ['Login#Failed','0','I'], + ['MQTT#Connected','0','I'], + ['MQTT#Disconnected','0','I'], + ['MQTTimport#Connected','0','I'], + ['MQTTimport#Disconnected','0','I'], + ['Rules#Timer=','0','I'], + ['Rules#TimerPause=','0','I'], + ['Rules#TimerResume=','0','I'], + ['System#Boot','0','I'], + ['System#Sleep','0','I'], + ['System#Wake','0','I'], + ['Time#Initialized','0','I'], + ['Time#Set','0','I'], + ['WiFi#APmodeDisabled','0','I'], + ['WiFi#APmodeEnabled','0','I'], + ['WiFi#ChangedAccesspoint','0','I'], + ['WiFi#Connected','0','I'], + ['WiFi#Disconnected','0','I'] + ], + 'arithmetic': [ + ['+'], + ['-'], + ['*'], + ['/'], + ['^'] + ], + 'parentheses': [ + [')'], + ['('] + ], + 'logic': [ + ['and'], + ['or'], + ['='], + ['!='], + ['<'], + ['>'], + ['>='], + ['<='], + ['<>'] + ], + 'block': [ + ['On'], + ['Do'], + ['EndOn'] + ], + 'statement': [ + ['If'], + ['Else'], + ['EndIf'] + ], + 'comment': [ + ['//', 'EOL'] + ], + 'variable': [ + ['[VAR#'], + ['[INT#'] + ], + 'transformer': { + 'binary': + [ + ']', + '#C]', + '#C!]', + '#H]', + '#H!]', + '#I]', + '#I!]', + '#M]', + '#M!]', + '#m]', + '#m!]', + '#O]', + '#O!]', + '#U]', + '#U!]', + '#u]', + '#u!]', + '#V]', + '#X]', + '#X!]', + '#Y]', + '#Y!]', + '#y]', + '#y!]', + '#Z]', + '#Z!]' + ], + 'floatingPoint': + [ + '#D000.000]', + '#D000]', + '#D.000]', + '#F]', + '#E]' + ], + 'justification': + [ + '#P000]', + '#S000]', + '#L000]', + '#R000]', + '#U000.000]' + ] + } +}; + + +guiEasy.popper.rules.splitSyntax = function() { + let x = guiEasy.popper.rules.syntax; + let syntaxArray = {}; + let listOfTypes = [ + 'command', + 'event', + 'arithmetic', + 'logic', + 'block', + 'statement', + 'comment', + 'parentheses', + 'variable' + ]; + for (let i = 0; i < listOfTypes.length; i++) { + let tempI = x[listOfTypes[i]]; + for (let k = 0; k < tempI.length; k++) { + let tempK = tempI[k]; + let tempSplit = tempK[0].split(""); + let y = syntaxArray; + for (let s = 0; s < tempSplit.length; s++) { + let z = tempSplit[s].toLowerCase(); + if (y[z] === undefined) { + y[z] = {}; + } + if (s !== (tempSplit.length - 1)) { + // + } else { + y[z].type = listOfTypes[i]; + y[z].full = tempK; + y[z].elementsPriorToHighlight = s; + } + y = y[z]; + } + } + } + guiEasy.popper.rules.syntax.hightlight = syntaxArray; + //console.log(guiEasy.syntax); +}; + +guiEasy.popper.rules.input = function () { + //TODO: add delay for the highlighting and only add "uncolored" character blocks to tht div... wait 1-2 seconds with no new input to start highlighting + let x = guiEasy.popper.rules.syntax; + guiEasy.popper.rules.input.highlight(x.editorElement, x.syntaxElement); +}; + +guiEasy.popper.rules.input.highlight = function () { + let x = guiEasy.popper.rules; + x.syntaxHighlight(); +}; + +guiEasy.popper.rules.input.tab = function (event) { + let x = guiEasy.popper.rules; + if (event.type === "keydown") { + //console.log(event.code); + if (event.code === "Tab" ) { + event.preventDefault(); + let editor = x.syntax.editorElement; + let selectionStart = editor.selectionStart; + //if its a TAB add 3 spaces + editor.value = editor.value.substring(0, editor.selectionStart) + "\x20\x20\x20" + editor.value.substring(editor.selectionEnd); + editor.selectionStart = selectionStart + 3; + editor.selectionEnd = selectionStart + 3; + x.input(); + } + } +}; + +guiEasy.popper.rules.handleScroll = function () { + //TODO: continue here with the scroll... + let isSyncingEditorScroll = false; + let isSyncingSyntaxScroll = false; + let x = guiEasy.popper.rules.syntax; + let elements = [ + "syntax", + "input", + "selection" + ]; + x.editorElement.onscroll = function() { + if (!isSyncingEditorScroll) { + isSyncingSyntaxScroll = true; + for (let i = 0; i < elements.length; i++) { + let element = x[elements[i] + "Element"]; + element.scrollTop = this.scrollTop; + element.scrollLeft = this.scrollLeft; + } + } + isSyncingEditorScroll = false; + }; +}; + +guiEasy.popper.rules.syntaxHighlight = function() { + //TODO: make all text = text highlighted "shine" + let x = guiEasy.popper.rules; + let syntaxArray = x.syntax.editorElement.value.split(""); + let s = -1; + let currentRow = 0; + let syntaxHighlight = "
    "; + let syntaxSelection = "
    "; + for (let i = 0; i < syntaxArray.length; i++) { + let char = x.syntaxHighlight.fixSpecialChars(syntaxArray[i]); + if (char === "NEW_ROW") { + currentRow++; + syntaxHighlight += "‌
    "; + syntaxSelection += "‌
    "; + } else { + //s++; //Did not work with minify (grunt)... + s = s + 1; + syntaxHighlight += "
    " + char + "
    "; + syntaxSelection += "
    " + char + "
    "; + } + } + syntaxHighlight += "
    ‌"; + syntaxSelection += "
    ‌"; + //console.log(syntaxHighlight); + x.syntax.syntaxElement.innerHTML = x.syntaxHighlight.regEx(syntaxHighlight, syntaxArray); + x.syntax.selectionElement.innerHTML = syntaxSelection; + x.syntax.inputElement.innerHTML = syntaxSelection; + //console.log(selectionStart, selectionLength); +}; + +guiEasy.popper.rules.syntaxHighlight.regEx = function(syntaxHighlight, rawTextArray) { + let matrixRow = []; + let matrixFull = []; + let x = guiEasy.popper.rules.syntaxHighlight; + for (let i = 0; i < rawTextArray.length; i++) { + if (rawTextArray[i] === "\n") { + matrixFull.push(matrixRow); + matrixRow = []; + } else { + matrixRow.push(rawTextArray[i]); + } + } + if (matrixRow.length > 0) { + matrixFull.push(matrixRow); + } + //console.log(matrixFull); + return x.fixSyntaxMatrix(matrixFull, syntaxHighlight); +}; + +guiEasy.popper.rules.syntaxHighlight.fixSyntaxMatrix = function(x, syntaxHighlight) { + let z = guiEasy.popper.rules.syntaxHighlight; + let checkSyntax = guiEasy.popper.rules.syntax.hightlight; + let s = -1; + let syntaxTemp = []; + for (let i = 0; i < x.length; i++) { + let tempI = x[i]; + for (let k = 0; k < tempI.length; k++) { + s++; + syntaxTemp.push(); + let tempK = tempI[k].toLowerCase(); + syntaxTemp[s] = ""; + if (tempK === " " || tempK === "\xa0" || tempK === "\x20") { + syntaxTemp[s] = "syntax-is-space"; + } + if (tempK === ",") { + syntaxTemp[s] = "syntax-is-comma"; + } + if (tempK * 0 === 0 || tempK === ".") { + syntaxTemp[s] = "syntax-is-number"; + } + if (checkSyntax[tempK] !== undefined) { + let value = z.parseRow(tempI, k, checkSyntax); + if (value.found === false) { + continue; + } + syntaxTemp[s] = value.type; + if (value.elements > 0) { + for (let p = 0; p < value.elements; p++) { + s++; + syntaxTemp.push(); + syntaxTemp[s] = value.type; + } + } + k = value.k; + } + } + } + for (let i = 0; i < syntaxTemp.length; i++) { + syntaxHighlight = syntaxHighlight.replace("{{TYPE_OF_SYNTAX_" + i + "}}", syntaxTemp[i]); + } + return syntaxHighlight; +}; + +guiEasy.popper.rules.syntaxHighlight.parseRow = function(rowChar, k, checkSyntax) { + let foundSyntax = null; + let type = null; + let s = 0; + let nextK = k; + let testString = checkSyntax; + for (let i = k; i < rowChar.length; i++) { + if (foundSyntax !== null) { + continue; //THIS MEANS WE GOT A MATCH AND WILL LOOK BEHIND + BEFORE THIS ONE + } + s++; + let tempChar = rowChar[i].toLowerCase(); + if (tempChar === " ") { + foundSyntax = false; + } + if (testString[tempChar] !== undefined) { + testString = testString[tempChar]; + if (testString.full !== undefined) { + let checkLeft = rowChar[(i - testString.elementsPriorToHighlight - 1)]; + let checkLeftNum = parseFloat(checkLeft); + let checkRight = rowChar[(i + 1)]; + let checkRightNum = parseFloat(checkRight); + //console.log(checkLeftNum, checkRightNum); + + if (testString.type === "comment") { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = rowChar.length; + s = rowChar.length - i; + } + + if (testString.type === "logic") { + if ( + ( + !isNaN(checkLeftNum) || + checkLeft === " " || + checkLeft === "]" + ) && ( + checkRight === " " || + !isNaN(checkRightNum) + ) + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if (testString.type === "arithmetic") { + if ( + ( + !isNaN(checkLeftNum) || + checkLeft === " " || + checkLeft === "]" || + checkLeft === ")" + ) && ( + !isNaN(checkRightNum) || + checkRight === " " || + checkRight === "[" || + checkRight === "(" + ) + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if (testString.type === "event") { + if ( checkRight === " " || !isNaN(checkRightNum) ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if ( + testString.type === "command" || + testString.type === "block" || + testString.type === "statement" + ) { + if ( ( + checkLeft === " " || + checkLeft === undefined + ) && ( + checkRight === " " || + checkRight === "," || + checkRight === undefined + ) + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if (testString.type === "parentheses") { + if ( + !isNaN(checkRightNum) || + checkRight === " " || + checkRight === "/" || + checkRight === "*" || + checkRight === "+" || + checkRight === "-" || + checkRight === undefined + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if (testString.type === "variable") { + if ( + !isNaN(checkRightNum) + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + + if (testString.type === "transformer" ) { + if ( + !isNaN(checkRightNum) + ) { + type = "syntax-is-" + testString.type; + foundSyntax = true; + nextK = i; + s = testString.elementsPriorToHighlight; + } + } + } + } + } + if (type === null) { + return { + "found": false, + "k": k, + "elements": 0, + "type": null + }; + } else { + return { + "found": foundSyntax, + "k": nextK, + "elements": s, + "type": type + }; + } +}; + +guiEasy.popper.rules.syntaxHighlight.fixSpecialChars = function(char) { + //console.log(char.charCodeAt(0)); + if (char.charCodeAt(0) === 10) { + char = "NEW_ROW"; + } + if (char.charCodeAt(0) === 32) { + char = " "; + } + return char; +}; \ No newline at end of file diff --git a/src/gui_easy_scrubber.js b/src/gui_easy_scrubber.js new file mode 100644 index 0000000..26c5197 --- /dev/null +++ b/src/gui_easy_scrubber.js @@ -0,0 +1,69 @@ +//HERE'S THE SCRUBBER FUNCTION(S) PUT, SCRUBBER IS ADDING STUFF THAT ARE CALCULATED AFTER THE CULRLY SEQUENCE IS DONE... +guiEasy.scrubber = function (processID, processType) { + //make sure the page containers (and top notifier) is hidden at start + let x = document.getElementById("page-container").children; + for (let i = 0; i < x.length; i++) { + if (x[i].className === "container" || x[i].className === "top-notifier") { + x[i].classList.add("is-hidden"); + } + } + helpEasy.addToLogDOM("pageSize", 1); + //add popups for alt-shortcuts (navbar) + let listOfTabs = []; + x = document.getElementsByName("nav-group"); + for (let i = 0; i < x.length; i++) { + let y = x[i].children; + for (let k = 0; k < y.length; k++) { + let z = y[k]; + if ( + z.className === "nav" && + listOfTabs.length < 10 && + i < 2 + ) { + z.accessKey = "0" + (listOfTabs.length + 1); + z.accessKey = z.accessKey.substr(-1,1); + z.dataset.altKey = z.accessKey; + listOfTabs.push([z.attributes.name.nodeValue, z.accessKey]); + } + } + } + guiEasy.tabNumber = []; + for (let i = 0; i < listOfTabs.length; i++) { + let number = listOfTabs[i][1]; + guiEasy.tabNumber[number] = listOfTabs[i][0].split("-")[1]; + } + //add default html code to dataset (to easily restore the modal at cancel) + let modalDefaults = document.getElementById("modal"); + modalDefaults.dataset.defaultView = modalDefaults.innerHTML; + helpEasy.addToLogDOM("pageSize", 1); + //add popup divs for tabs... + for (let i = 0; i < listOfTabs.length; i++) { + let x = listOfTabs[i]; + let y = document.getElementsByName(x[0]); + for (let k = 0; k < y.length; k++) { + let child = document.createElement("div"); + child.className = "alt-popup is-hidden"; + child.innerText = x[1]; + y[k].appendChild(child); + } + } + let element = document.createElement("div"); + element.id = "setup-templates"; + element.style.display = "hidden"; + document.body.appendChild(element); + let typesOfChunks = ["plugin", "controller", "notification"]; + for (let i = 0; i < typesOfChunks.length; i++) { + let element = document.getElementById("setup-templates"); + for (let k = 1; k < 999; k++) { + let html = guiEasy.forms(typesOfChunks[i], k); + if (html === null) { + k = 999; + } else { + element.dataset[typesOfChunks[i] + k] = html; + } + } + } + helpEasy.addToLogDOM("pageSize", 1); + + helpEasy.processDone(processID, processType); +}; diff --git a/src/gui_easy_settings.js b/src/gui_easy_settings.js new file mode 100644 index 0000000..95bb6e1 --- /dev/null +++ b/src/gui_easy_settings.js @@ -0,0 +1,259 @@ +//HERE'S THE SETTINGS USED FOR THE SPA ENGINE = TRANSLATIONS ARE PUT IN ANOTHER FILE +const guiEasy = { + 'logLevel': 0, + 'name': 'GUI Easy', + 'version': { + //--GRUNT-START-- + 'major': 0, + 'minor': 0, + 'minimal': 1, + 'development': true, + 'releaseCandidate': 0 + //--GRUNT-END-- + , + 'full': function () { + let x = guiEasy.version; + if (x.development === true && x.releaseCandidate > 0) { + return x.major + '.' + x.minor + '.rc' + x.releaseCandidate + '.' + x.minimal; + } else if (x.development === true) { + return x.major + '.' + x.minor + '.nightly.' + x.minimal; + } else { + return x.major + '.' + x.minor + '.' + x.minimal; + } + } + }, + 'geekName': function () { + return guiEasy.name.replace(' ', '-').toLowerCase(); + }, + 'geekNameFull': function () { + return guiEasy.geekName() + '-' + guiEasy.version.full() + }, + 'current': {}, + 'fetchSettings':{ + 'maxToKeep': 5, //Mintes... + 'minToKeep': 1, + 'intervalGUIupdater': 1000, //ms + 'intervalTimeKeeper': 700, //min period in-between fetches + 'maxToKeepMs': function () { + return 60 * 1000 / guiEasy.intervalGUIupdater; + }, + }, + 'nodes': [], + 'startup': [ + { + 'id': 'curly', + 'logText': 'HTML build up' + }, + { + 'id': 'scrubber', + 'logText': 'HTML scrubbing' + }, + { + 'id': 'popper', + 'logText': 'Adding event handlers' + }, + { + 'id': 'pitcher', + 'logText': 'Getting data from unit plus setting up user preferences' + } + ], + 'silentStartup': [ + { + 'id': 'butler', + 'logText': 'Fetching stuff from internet' + }, + { + 'id': 'tender', + 'logText': 'The relay runner is being triggered' + } + ], + 'endpoints':{ + 'defaultTTL': function () { + return 60000 //Once a minute + }, + 'get':[ + {'endpoint':'json', 'ttl_fallback':2000}, + {'endpoint':'buildinfo', 'ttl_fallback':99999999}, //will not update very often... + {'endpoint':'logjson'}, //Fallback of 29999 will not be part of first boot fetch + {'endpoint':'sysinfo_json'}, + {'endpoint':'node_list_json'}, + {'endpoint':'filelist_json'}, + {'endpoint':'i2cscanner_json'}, + {'endpoint':'pinstates_json'}, + {'endpoint':'timingstats_json', 'ttl_fallback':999999}, + {'endpoint':'wifiscanner_json'} + ], + 'post':[ + {'endpoint':'factoryreset_json'}, + {'endpoint':'upload_json'} + ] + }, + 'fetchingWait': "Fetching not yet completed, please wait...", + 'maxTasks': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 12; + } + if (board === 'ESP32') { + return 48; + } + }, + 'maxValuesPerTask': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 4; + } + if (board === 'ESP32') { + return 8; + } + }, + 'maxNotification': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 3; + } + if (board === 'ESP32') { + return 3; + } + }, + 'maxController': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 3; + } + if (board === 'ESP32') { + return 3; + } + }, + 'maxPluginConfigVar': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 8; + } + if (board === 'ESP32') { + return 8; + } + }, + 'maxPluginConfigFloatVar': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 4; + } + if (board === 'ESP32') { + return 4; + } + }, + 'maxPluginConfigLongVar': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 4; + } + if (board === 'ESP32') { + return 4; + } + }, + 'maxPluginExtraConfigVar': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 16; + } + if (board === 'ESP32') { + return 16; + } + }, + 'maxFormulaLength': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return 40; + } + if (board === 'ESP32') { + return 40; + } + }, + 'timelist': { + 'week': [ + {"text":"Last","value":0, "disabled":false, "note":""}, + {"text":"1st","value":1, "disabled":false, "note":""}, + {"text":"2nd","value":2, "disabled":false, "note":""}, + {"text":"3rd","value":3, "disabled":false, "note":""}, + {"text":"4th","value":4, "disabled":false, "note":""} + ], + 'day': [ + {"text":"Monday","value":1, "disabled":false, "note":""}, + {"text":"Tuesday","value":2, "disabled":false, "note":""}, + {"text":"Wednesday","value":3, "disabled":false, "note":""}, + {"text":"Thursday","value":4, "disabled":false, "note":""}, + {"text":"Friday","value":5, "disabled":false, "note":""}, + {"text":"Saturday","value":6, "disabled":false, "note":""}, + {"text":"Sunday","value":7, "disabled":false, "note":""} + ], + 'month':[ + {"text":"January","value":1, "disabled":false, "note":""}, + {"text":"February","value":2, "disabled":false, "note":""}, + {"text":"Mars","value":3, "disabled":false, "note":""}, + {"text":"April","value":4, "disabled":false, "note":""}, + {"text":"May","value":5, "disabled":false, "note":""}, + {"text":"June","value":6, "disabled":false, "note":""}, + {"text":"July","value":7, "disabled":false, "note":""}, + {"text":"August","value":8, "disabled":false, "note":""}, + {"text":"September","value":9, "disabled":false, "note":""}, + {"text":"October","value":10, "disabled":false, "note":""}, + {"text":"November","value":11, "disabled":false, "note":""}, + {"text":"December","value":12, "disabled":false, "note":""} + ] + }, + 'gpiolist': function (board = 'ESP82XX') { + if (board === 'ESP82XX') { + return [ + {'text':'- None -', 'value':-1, 'disabled':false, 'note':''}, + {'text':'GPIO 0 (D3)', 'value':0, 'disabled':false, 'note':'\u26A0'}, + {'text':'GPIO 1 (D10)', 'value':1, 'disabled':true, 'note':'Tx0'}, + {'text':'GPIO 2 (D4)', 'value':2, 'disabled':false, 'note':'\u26A0'}, + {'text':'GPIO 3 (D9)', 'value':3, 'disabled':true, 'note':'Rx0'}, + {'text':'GPIO 4 (D2)', 'value':4, 'disabled':false, 'note':''}, + {'text':'GPIO 5 (D1)', 'value':5, 'disabled':false, 'note':''}, + {'text':'GPIO 9 (D11)', 'value':9, 'disabled':false, 'note':'\u26A0'}, + {'text':'GPIO 10 (D10)', 'value':10, 'disabled':false, 'note':'\u26A0'}, + {'text':'GPIO 12 (D12)', 'value':12, 'disabled':false, 'note':''}, + {'text':'GPIO 13 (D13)', 'value':13, 'disabled':false, 'note':''}, + {'text':'GPIO 14 (D14)', 'value':14, 'disabled':false, 'note':''}, + {'text':'GPIO 15 (D15)', 'value':15, 'disabled':false, 'note':'\u26A0'}, + {'text':'GPIO 16 (D16)', 'value':16, 'disabled':false, 'note':''} + ] + } + if (board === 'ESP32') { + return null; + } + + }, + 'tabs': { + 'left': ['main', 'config', 'hardware', 'devices'], + 'right': ['controllers', 'notification', 'tools', 'rules'] + }, + 'guiStats': { //Not to be mistaken for the unit's stats, this is the queen bee gui buildup stats + 'pageSize': 0, //the other is how the unit themselves are doing fetch-wise + 'bootTime': 0, + 'eventCalls': 0, + 'eventCallsTotal': 0 + }, + 'syntax': { + 'curlyLC': 0, //USED TO SEE HOW MANY LOOPS ARE NEEDED TO REPLACE ALL CURLY + 'curly': [ + // PUT CURLY's WITH NO SUB-CURLY's FIRST FOR OPTIMIZATION + // FIRST LEVEL ONLY, the rest will dig down automatically + // We create this array manually for optimization purpose + 'fetching', + 'input', + 'table', + 'goto', + 'button', + 'version', + 'devicetable', + 'controllertable', + 'notificationtable', + 'setup', + 'notifier', + 'drawer', + 'navbar', + 'unit', + 'unitname', + 'modal', + 'menu', + 'wave', + 'page', + 'logo', + 'icon' + ] + } +}; \ No newline at end of file diff --git a/src/gui_easy_settings_config_table.js b/src/gui_easy_settings_config_table.js new file mode 100644 index 0000000..efa9178 --- /dev/null +++ b/src/gui_easy_settings_config_table.js @@ -0,0 +1,264 @@ +guiEasy.configDat = {}; + +//THIS CONFIG TABLE AND ITS PARSER IS MADE BY https://github.com/ppisljar and NOT Grovkillen, I just formed it to fit my framework. + +guiEasy.configDat.configDatParseConfig = [ + { prop: 'status.PID', type: 'int32' }, + { prop: 'status.version', type: 'int32' }, + { prop: 'status.build', type: 'int16' }, + { prop: 'config.IP.ip', type: 'bytes', length: 4 }, + { prop: 'config.IP.gw', type: 'bytes', length: 4 }, + { prop: 'config.IP.subnet', type: 'bytes', length: 4 }, + { prop: 'config.IP.dns', type: 'bytes', length: 4 }, + { prop: 'config.experimental.ip_octet', type: 'byte' }, + { prop: 'config.general.unitnr', type: 'byte' }, + { prop: 'config.general.unitname', type: 'string', length: 26 }, + { prop: 'config.ntp.host', type: 'string', length: 64 }, + { prop: 'config.sleep.sleeptime', type: 'int32' }, + { prop: 'hardware.i2c.sda', type: 'byte' }, + { prop: 'hardware.i2c.scl', type: 'byte' }, + { prop: 'hardware.led.gpio', type: 'byte' }, + { prop: 'Pin_sd_cs', type: 'byte' }, // TODO: not ready + { prop: 'hardware.gpio', type: 'bytes', length: 17 }, + { prop: 'config.log.syslog_ip', type: 'bytes', length: 4 }, + { prop: 'config.espnetwork.port', type: 'int32' }, + { prop: 'config.log.syslog_level', type: 'byte' }, + { prop: 'config.log.serial_level', type: 'byte' }, + { prop: 'config.log.web_level', type: 'byte' }, + { prop: 'config.log.sd_level', type: 'byte' }, + { prop: 'config.serial.baudrate', type: 'int32' }, + { prop: 'config.mqtt.interval', type: 'int32' }, + { prop: 'config.sleep.awaketime', type: 'byte' }, + { prop: 'CustomCSS', type: 'byte' }, // TODO: not ready + { prop: 'config.dst.enabled', type: 'byte' }, + { prop: 'config.experimental.WDI2CAddress', type: 'byte' }, + { prop: 'config.rules.enabled', type: 'byte' }, + { prop: 'config.serial.enabled', type: 'byte' }, + { prop: 'config.ssdp.enabled', type: 'byte' }, + { prop: 'config.ntp.enabled', type: 'byte' }, + { prop: 'config.experimental.WireClockStretchLimit', type: 'int32' }, + { prop: 'GlobalSync', type: 'byte' }, // TODO: not ready + { prop: 'config.experimental.ConnectionFailuresThreshold', type: 'int32' }, + { prop: 'TimeZone', type: 'int16', signed: true}, // TODO: not ready + { prop: 'config.mqtt.retain_flag', type: 'byte' }, + { prop: 'hardware.spi.enabled', type: 'byte' }, + [...Array(guiEasy.maxController())].map((x, i) => ({ prop: `controllers[${i}].protocol`, type:'byte' })), + [...Array(guiEasy.maxNotification())].map((x, i) => ({ prop: `notifications[${i}].type`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].device`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].OLD_TaskDeviceID`, type:'int32' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].gpio1`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].gpio2`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].gpio3`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].gpio4`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].pin1pullup`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].configs`, type:'ints', length: guiEasy.maxPluginConfigVar() })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].pin1inversed`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].configs_float`, type:'floats', length: guiEasy.maxPluginConfigFloatVar() })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].configs_long`, type:'longs', length: guiEasy.maxPluginConfigLongVar() })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].OLD_senddata`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].global_sync`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].data_feed`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].interval`, type:'int32' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].enabled`, type:'byte' })), + [...Array(guiEasy.maxController())].map((x, i) => ({ prop: `controllers[${i}].enabled`, type:'byte' })), + [...Array(guiEasy.maxNotification())].map((x, i) => ({ prop: `notifications[${i}].enabled`, type:'byte' })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].TaskDeviceID`, type:'longs', length: guiEasy.maxController() })), + [...Array(guiEasy.maxTasks())].map((x, i) => ({ prop: `tasks[${i}].TaskDeviceSendData`, type:'bytes', length: guiEasy.maxController() })), + { prop: 'hardware.led.inverse', type: 'byte' }, + { prop: 'config.sleep.sleeponfailiure', type: 'byte' }, + { prop: 'UseValueLogger', type: 'byte' }, // TODO: not ready + { prop: 'ArduinoOTAEnable', type: 'byte' }, // TODO: not ready + { prop: 'config.dst.start', type: 'int16' }, + { prop: 'config.dst.end', type: 'int16' }, + { prop: 'UseRTOSMultitasking', type: 'byte' }, // TODO: not ready + { prop: 'hardware.reset.pin', type: 'byte' }, + { prop: 'config.log.syslog_facility', type: 'byte' }, + { prop: 'StructSize', type: 'int32' }, // TODO: not ready + { prop: 'config.mqtt.useunitname', type: 'byte' }, + { prop: 'config.location.lat', type: 'float' }, + { prop: 'config.location.long', type: 'float' }, + { prop: 'config._emptyBit', type: 'bit' }, + { prop: 'config.general.appendunitno', type: 'bit' }, + { prop: 'config.mqtt.changeclientidrecon', type: 'bit' }, + { prop: 'config.rules.oldengine', type: 'bit' }, + { prop: 'config.wifi.forcebgmode', type: 'bit' }, + { prop: 'config.wifi.restartconnlost', type: 'bit' }, + { prop: 'config.power.ecomode', type: 'bit' }, + { prop: 'config.wifi.nosleep', type: 'bit' }, + { prop: 'config.rules.tolerantargs', type: 'bit' }, + { prop: 'config.rules.SendToHTTPack', type: 'bit' }, + { prop: 'config.wifi.gratuitousARP', type: 'bit' }, + { prop: 'config._bits2', type: 'byte' }, + { prop: 'config._bits3', type: 'byte' }, + { prop: 'ResetFactoryDefaultPreference', type: 'int32' }, // TODO: not ready +].flat(); + +guiEasy.configDat.taskSettings = [ + { prop: 'index', type:'byte' }, + { prop: 'name', type:'string', length: guiEasy.maxFormulaLength() + 1 }, + [...Array(guiEasy.maxValuesPerTask())].map((x, i) => ({ prop: `values[${i}].formula`, type:'string', length: guiEasy.maxFormulaLength() + 1 })), + [...Array(guiEasy.maxValuesPerTask())].map((x, i) => ({ prop: `values[${i}].name`, type:'string', length: guiEasy.maxFormulaLength() + 1 })), + { prop: 'value_names', type:'string', length: guiEasy.maxFormulaLength() + 1 }, + { prop: 'plugin_config_long', type:'longs', length: guiEasy.maxPluginExtraConfigVar() }, + { prop: 'decimals', type:'bytes', length: guiEasy.maxValuesPerTask() }, + { prop: 'plugin_config', type:'ints', length: guiEasy.maxPluginExtraConfigVar() }, +].flat(); + +guiEasy.configDat.controllerSettings = [ + { prop: 'dns', type:'byte' }, + { prop: 'IP', type:'bytes', length: 4 }, + { prop: 'port', type:'int32' }, + { prop: 'hostname', type:'string', length: 65 }, + { prop: 'publish', type:'string', length: 129 }, + { prop: 'subscribe', type:'string', length: 129 }, + { prop: 'MQTT_lwt_topic', type:'string', length: 129 }, + { prop: 'lwt_message_connect', type:'string', length: 129 }, + { prop: 'lwt_message_disconnect', type:'string', length: 129 }, + { prop: 'minimal_time_between', type:'int32' }, + { prop: 'max_queue_depth', type:'int32' }, + { prop: 'max_retry', type:'int32' }, + { prop: 'delete_oldest', type:'byte' }, + { prop: 'client_timeout', type:'int32' }, + { prop: 'must_check_reply', type:'byte' }, +]; + +guiEasy.configDat.notificationSettings = [ + { prop: 'server', type:'string', length: 65 }, + { prop: 'port', type:'int16' }, + { prop: 'domain', type:'string', length: 65 }, + { prop: 'sender', type:'string', length: 65 }, + { prop: 'receiver', type:'string', length: 65 }, + { prop: 'subject', type:'string', length: 129 }, + { prop: 'body', type:'string', length: 513 }, + { prop: 'pin1', type:'byte' }, + { prop: 'pin2', type:'byte' }, + { prop: 'user', type:'string', length: 49 }, + { prop: 'pass', type:'string', length: 33 }, +]; + +guiEasy.configDat.securitySettings = [ + { prop: 'WifiSSID', type:'string', length: 32 }, + { prop: 'WifiKey', type:'string', length: 64 }, + { prop: 'WifiSSID2', type:'string', length: 32 }, + { prop: 'WifiKey2', type:'string', length: 64 }, + { prop: 'WifiAPKey', type:'string', length: 64 }, + [...Array(guiEasy.maxController())].map((x, i) => ({ prop: `controllers[${i}].user`, type:'string', length: 26 })), + [...Array(guiEasy.maxController())].map((x, i) => ({ prop: `controllers[${i}].password`, type:'string', length: 64 })), + { prop: 'password', type:'string', length: 26 }, + { prop: 'AllowedIPrangeLow', type:'bytes', length: 4 }, + { prop: 'AllowedIPrangeHigh', type:'bytes', length: 4 }, + { prop: 'IPblockLevel', type:'byte' }, + { prop: 'ProgmemMd5', type:'bytes', length: 16 }, + { prop: 'md5', type:'bytes', length: 16 }, +].flat(); + +const set = (obj, path, value) => { + let levels = path.replace(/\[/g, '.').replace(/]/g, '').split('.'); + if (levels.length > 1) { + for (let i = 0; i < levels.length - 1; i++) { + if (!obj[levels[i]]) obj[levels[i]] = {}; + obj = obj[levels[i]]; + } + } + obj[levels[levels.length - 1]] = value; +}; + +class DataParser { + constructor(data) { + this.view = new DataView(data); + this.offset = 0; + this.bitbyte = 0; + this.bitbytepos = 7; + } + + pad(nr) { + while (this.offset % nr) { + this.offset++; + } + } + + bit(signed = false, write = false, val) { + if (this.bitbytepos === 7) { + if (!write) { + this.bitbyte = this.byte(); + this.bitbytepos = 0; + } else { + this.byte(signed, write, this.bitbyte); + } + } + if (!write) { + return (this.bitbyte >> this.bitbytepos++) & 1; + } else { + this.bitbyte = val ? (this.bitbyte | (1 << this.bitbytepos++)) : (this.bitbyte & ~(1 << this.bitbytepos++)); + } + } + + byte(signed = false, write = false, val) { + this.pad(1); + const fn = `${write ? 'set' : 'get'}${signed ? 'Int8' : 'Uint8'}`; + const res = this.view[fn](this.offset, val); + this.offset += 1; + return res; + } + + int16(signed = false, write = false, val) { + this.pad(2); + let fn = signed ? 'Int16' : 'Uint16'; + const res = write ? this.view[`set${fn}`](this.offset, val, true) : this.view[`get${fn}`](this.offset, true); + this.offset += 2; + return res; + } + + int32(signed = false, write = false, val) { + this.pad(4); + let fn = signed ? 'Int32' : 'Uint32'; + const res = write ? this.view[`set${fn}`](this.offset, val, true) : this.view[`get${fn}`](this.offset, true); + this.offset += 4; + return res; + } + float(signed = false, write = false, val) { + this.pad(4); + const res = write ? this.view.setFloat32(this.offset, val, true) : this.view.getFloat32(this.offset, true); + this.offset += 4; + return res; + } + bytes(nr, signed = false, write = false, vals) { + const res = []; + for (let x = 0; x < nr; x++) { + res.push(this.byte(signed, write, vals ? vals[x] : null)); + } + return res; + } + ints(nr, signed = false, write = false, vals) { + const res = []; + for (let x = 0; x < nr; x++) { + res.push(this.int16(signed, write, vals ? vals[x] : null)); + } + return res; + } + longs(nr, signed = false, write = false, vals) { + const res = []; + for (let x = 0; x < nr; x++) { + res.push(this.int32(signed, write, vals ? vals[x] : null)); + } + return res; + } + floats(nr, signed = false, write = false, vals) { + const res = []; + for (let x = 0; x < nr; x++) { + res.push(this.float(write, vals ? vals[x] : null)); + } + return res; + } + string(nr, signed = false, write = false, val) { + if (write) { + for (let i = 0; i < nr; ++i) { + let code = val.charCodeAt(i) || '\0'; + this.byte(false, true, code); + } + } else { + const res = this.bytes(nr); + return String.fromCharCode.apply(null, res).replace(/\x00/g, ''); + } + } +} \ No newline at end of file diff --git a/src/gui_easy_tender.js b/src/gui_easy_tender.js new file mode 100644 index 0000000..9c52532 --- /dev/null +++ b/src/gui_easy_tender.js @@ -0,0 +1,61 @@ +//HERE WE ADD REPEATING DATA FETCH FROM UNIT +guiEasy.tender = function (processID, processType) { + let maxMissed = 1; + let missedBuffer = 5; + //data fetcher + setInterval(function () { + let timestampNow = Date.now(); + let x = guiEasy.nodes; + let bufferTime = guiEasy.fetchSettings.intervalTimeKeeper; + for (let i = 0; i < x.length; i++) { + if (x[i].stats.lastCheck === undefined) { + x[i].stats.lastCheck = timestampNow; + } + //If we have more than 1 missed fetch in a row... + if (x[i].stats.error > maxMissed) { + let delay = missedBuffer * guiEasy.fetchSettings.intervalTimeKeeper; + console.log("@:" + new Date(timestampNow).toISOString() + ">>> We missed " + (maxMissed + 1) + " fetches in a row... will wait " + delay + " ms before retry."); + helpEasy.schedulerDelay(x, i, delay); + continue; + } + if ( + x[i].stats.error < (maxMissed + 1) && + x[i].scheduler[0][0] < timestampNow && + bufferTime < (timestampNow - x[i].stats.lastRun) && + bufferTime < (timestampNow - x[i].stats.lastCheck) + ) { + x[i].stats.lastCheck = timestampNow; + let endpoint = x[i].scheduler[0][1]; + helpEasy.scheduleFetch(guiEasy.nodes, i, endpoint); + helpEasy.setCurrentOnline("online"); + } + //trigger lost connection with unit? + let sinceLastCheck = (Date.now() - x[i].stats.lastCheck); + if (sinceLastCheck > (missedBuffer * guiEasy.fetchSettings.intervalTimeKeeper)) { + helpEasy.setCurrentOnline(); + } + } + }, 10); + //gui updater + setInterval(function () { + helpEasy.guiUpdater(); + //Lookup if internet is found + if (helpEasy.internet() === false) { + guiEasy.popper.topNotifier("internetDown","Internet connection is down.", "warning"); + } else if ( guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID === "internetDown" ) { + guiEasy.popper.topNotifier("internetUp","Internet connection is re-established.", "success", 5); + } + //is the unit reachable + if (helpEasy.getCurrentIndex("online") === false && helpEasy.internet() === true) { + guiEasy.popper.topNotifier("unitDown","Connection with unit lost.", "warning"); + } else if (guiEasy.nodes[helpEasy.getCurrentIndex()].notifierID === "unitDown") { + guiEasy.popper.topNotifier("unitUp","Connection with unit is re-established.", "success", 3); + } + //is the settings in gui updated? + //helpEasy.guiUpdaterSettings(); + //console.log(defaultSettings); + //console.log(guiEasy.nodes); + }, guiEasy.fetchSettings.intervalGUIupdater); + + helpEasy.processDone(processID, processType); +}; \ No newline at end of file diff --git a/src/index-minimal.html b/src/index-minimal.html new file mode 100644 index 0000000..2104db4 --- /dev/null +++ b/src/index-minimal.html @@ -0,0 +1,100 @@ + + + + + + I'm Headless + + + + + +
    +
    +    UR ASCIIN 4 IT!
    +     /
    +   ,﹏
    + (҂॰ᨓ॰)
    +  (ϑ͏ ꙻ)ϑ͏
    +  √ ㄟ

    +
    +
    +
    +
    + +
    + + \ No newline at end of file