diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html index 7eaf6ef..a893a81 100644 --- a/client/SEAWebClient.html +++ b/client/SEAWebClient.html @@ -12,6 +12,10 @@ SEAWebClient + + + + diff --git a/client/components/divider/horizontal_divider.css b/client/components/divider/horizontal_divider.css new file mode 100644 index 0000000..b48661a --- /dev/null +++ b/client/components/divider/horizontal_divider.css @@ -0,0 +1,12 @@ +.horizontal-divider-container{ + width: 100%; + height: 10px; + display: flex; +} + +.horizontal-divider{ + height: 2px; + width: 80%; + background-color:black; + margin: auto; +} \ No newline at end of file diff --git a/client/components/divider/horizontal_divider.js b/client/components/divider/horizontal_divider.js new file mode 100644 index 0000000..36f478a --- /dev/null +++ b/client/components/divider/horizontal_divider.js @@ -0,0 +1,20 @@ +class HorizontalDivider extends HTMLElement{ + constructor(){ + super(); + } + + connectedCallback(){ + this.render() + } + + render(){ + this.innerHTML = ` + +
+
+
+ ` + } +} + +customElements.define("sea-horizontal-divider", HorizontalDivider) \ No newline at end of file diff --git a/client/components/help_entry/help_entry.css b/client/components/help_entry/help_entry.css new file mode 100644 index 0000000..e266a65 --- /dev/null +++ b/client/components/help_entry/help_entry.css @@ -0,0 +1,21 @@ +.help-entry{ + height: 28px; + display: flex; + margin-left: 10px; + margin-right: 10px; +} + +.help-entry-title{ + text-align: center; + vertical-align: middle; + line-height: 28px; +} + +.help-entry-arrow{ + width: 15px; + height: 15px; + margin-left: auto; + margin-top: auto; + margin-bottom: auto; + cursor: pointer; +} \ No newline at end of file diff --git a/client/components/help_entry/help_entry.js b/client/components/help_entry/help_entry.js new file mode 100644 index 0000000..fc7ce3c --- /dev/null +++ b/client/components/help_entry/help_entry.js @@ -0,0 +1,44 @@ +class HelpEntry extends HTMLElement{ + constructor(title, description){ + super(); + this.title = title; + this.description = description; + } + + displayPopup(){ + this.getElementsByTagName("sea-help-popup")[0].style.visibility = "visible"; + } + + hidePopup(){ + this.getElementsByTagName("sea-help-popup")[0].style.visibility = "hidden"; + } + + toggleVisibility(){ + if (this.getElementsByTagName("sea-help-popup")[0].style.visibility == "visible") + this.hidePopup(); + else + this.displayPopup(); + } + + connectedCallback(){ + this.render(); + this.getElementsByTagName("img")[0].onmouseenter = () => {this.displayPopup();}; + this.getElementsByTagName("img")[0].onmouseleave = () => {this.hidePopup();}; + // For mobile phones + this.getElementsByTagName("img")[0].onclick = () => {this.toggleVisibility();}; + } + + render(){ + this.innerHTML = ` + + +
+ ${this.title} + +
+ + `; + } +} + +customElements.define("sea-help-entry", HelpEntry); \ No newline at end of file diff --git a/client/components/help_popup/help_popup.css b/client/components/help_popup/help_popup.css new file mode 100644 index 0000000..26286e5 --- /dev/null +++ b/client/components/help_popup/help_popup.css @@ -0,0 +1,20 @@ +.help-popup{ + width: 300px; + height: 200px; + border: 2px solid black; + background-color: white; + border-radius: 10px; + z-index: 2; + position: absolute; + box-sizing: border-box; +} + +.help-popup-description-container{ + margin-left: 10px; + margin-right: 10px; + padding-top: 10px; +} + +.help-popup-description{ + overflow-wrap: break-word; +} \ No newline at end of file diff --git a/client/components/help_popup/help_popup.js b/client/components/help_popup/help_popup.js new file mode 100644 index 0000000..b609aa2 --- /dev/null +++ b/client/components/help_popup/help_popup.js @@ -0,0 +1,22 @@ +class HelpPopup extends HTMLElement{ + constructor(){ + super(); + } + + connectedCallback(){ + this.render(); + } + + render(){ + this.innerHTML = ` + +
+
+ ${this.getAttribute("helpdescription")} +
+
+ ` + } +} + +customElements.define("sea-help-popup", HelpPopup); \ No newline at end of file diff --git a/client/components/menu_popup/menu_popup.css b/client/components/menu_popup/menu_popup.css new file mode 100644 index 0000000..16d71de --- /dev/null +++ b/client/components/menu_popup/menu_popup.css @@ -0,0 +1,33 @@ +#menu{ + width: 300px; + height: 200px; + background-color: white; + position: absolute; + top: 28px; + right: 50%; + z-index: 1; + border: 2px solid black; +} + +#menu_title_container{ + display: flex; + width: 100%; + height: 20px; +} + +#menu_title_container span{ + margin-top: auto; + margin-bottom: auto; + margin-left: 5px; + +} + +#menu-popup-close{ + margin-left: auto; + margin-right: 2px; + margin-top: auto; + margin-bottom: auto; + height: 15px; + width: 15px; + cursor: pointer; +} diff --git a/client/components/menu_popup/menu_popup.js b/client/components/menu_popup/menu_popup.js new file mode 100644 index 0000000..5765ebc --- /dev/null +++ b/client/components/menu_popup/menu_popup.js @@ -0,0 +1,42 @@ +class MenuPopup extends HTMLElement{ + constructor(){ + super(); + } + + hide(){ + this.style.visibility = "hidden"; + } + + show(){ + this.style.visibility = "visible"; + } + + connectedCallback(){ + this.render(); + this.hide(); + document.getElementById("menu-popup-close").onclick = () => {this.hide()}; + } + + render(){ + this.innerHTML = ` + + `; + let cursorDescription = ` + To remove the cursor, you can double click on any graph. + ` + let menuContainer = document.getElementById("menu"); + + menuContainer.appendChild(new HorizontalDivider()); + + let cursorHelp = new HelpEntry("How to remove the cursor", cursorDescription); + + menuContainer.appendChild(cursorHelp); + } +} + +customElements.define("sea-menu", MenuPopup); \ No newline at end of file diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index bdad279..1d6dc66 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -270,7 +270,6 @@ let globalControls = (function (){ })(); let datesKey = "dates-indicator"; -let liveKey = "live-indicator"; let globalIndicators = (function (){ @@ -279,16 +278,12 @@ let globalIndicators = (function (){ function loadIndicators(panel){ let leftDate = Date.now() - 30*60*1000; let datesIndicator = new DatesIndicator(leftDate); - let liveIndicator = new LiveStateIndicator(); panel.appendChild(datesIndicator); - panel.appendChild(liveIndicator); - liveIndicator.changeToDisable(); - liveIndicator.style.marginLeft = "auto"; //sticks element to the right datesIndicator.style.marginLeft = "auto"; + datesIndicator.style.marginRight = "auto"; indicatorsMap[datesKey] = datesIndicator; - indicatorsMap[liveKey] = liveIndicator; } function getIndicatorsMap(){ @@ -424,8 +419,6 @@ let graphs = (function (){ function setLiveMode(mode=null) { if (mode !== null){ liveMode = mode; - if(mode) globalIndicators.getIndicatorsMap()[liveKey].changeToEnable(); - else globalIndicators.getIndicatorsMap()[liveKey].changeToDisable(); } if (liveMode && cursorLinePos === null) // gotoNowElm.innerHTML = ''; diff --git a/client/res/arrow.png b/client/res/arrow.png new file mode 100644 index 0000000..c9b5c00 Binary files /dev/null and b/client/res/arrow.png differ diff --git a/client/res/close.png b/client/res/close.png new file mode 100644 index 0000000..a2961e7 Binary files /dev/null and b/client/res/close.png differ diff --git a/client/res/menu_white.png b/client/res/menu_white.png new file mode 100644 index 0000000..f2e853b Binary files /dev/null and b/client/res/menu_white.png differ diff --git a/seaweb.py b/seaweb.py index 7bfcd98..42d7b21 100755 --- a/seaweb.py +++ b/seaweb.py @@ -149,6 +149,9 @@ def subdir_test_file(file): resp = flask.send_file("client/test/"+file, mimetype=guess_mimetype(file)) return resp +@app.route('/components/menu_popup/') +@app.route('/components/help_popup/') +@app.route('/components/help_entry/') @app.route('/components/control/') @app.route('/components/divider/') @app.route('/components/states_indicator/dates/')