linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some new icons with logic (not completed yet)

Browse Source
This commit is contained in:
Daniel
2025-04-15 10:03:39 +02:00
parent 135802c626
commit 737e29975a
6 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/SEAWebClient.html
View File

@ -81,7 +81,10 @@
</div>
</div>
<div id="center"></div>
<div id="close-cross">&#215;</div>
<div id="close-cross">
<!-- &#215; -->
<img class = "icon-close" src="res/icon_sinus.png">
</div>
</body>
</html>

20
client/cssFiles/SEAWebClientGroup.css
View File

@ -89,10 +89,14 @@
height: 16px;
line-height: 16px;
margin-left: 4px;
opacity: .8;
}
.status-icon {
border-radius: 50%;
background-color: dimgray;
opacity: .8;
/* box-shadow: -2px -2px 5px inset; */
}
.status-icon-busy {
@ -107,12 +111,18 @@
background-color: red;
}
.edit-icon {
.info-icon:hover {
/* opacity: .6; */
cursor: pointer;
transform: scale(90%);
transition: .5s;
}
.info-icon {
.edit-icon:hover {
/* opacity: .6; */
cursor: pointer;
transform: scale(90%);
transition: .5s;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

12
client/cssFiles/SEAWebClientMain.css
View File

@ -139,11 +139,21 @@ meta, body {
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* CLOSE CROSS */
#close-cross{
#close-cross {
z-index: 50;
top: 9px;
right: 12px;
position: fixed;
color: white;
cursor: pointer;
}
.icon-close {
height: 20px;
width: 20px;
}
.icon-close:hover {
transform: scale(90%);
transition: .5s;
}

1
client/jsFiles/SEAWebClientCommunication.js
View File

@ -357,6 +357,7 @@ function successHandler(s, message) {
// -> write parameter-block to grid-element2
showParams = true;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
isl = insertSlide(2, message.title, 'parameters', createContent(2, message));
if (nColumns == 1) {
elements[1].style.display = "none"; // hide modules

35
client/jsFiles/SEAWebClientGroup.js
View File

@ -13,7 +13,7 @@ function getGroup(s, name) {
if (debug_group_daniel) {
console.log("%cfunction: getGroup", "color:white;background:salmon");
}
// console.log('name: ',name, ', id: '.ClientID);
console.log('name: ',name, ', id: '.ClientID);
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
+ "&id=" + clientID, successHandler, errorHandler);
}
@ -148,11 +148,10 @@ function create_rdlink_row(s, component) {
var left = createTitle(component, 1);
left.id = component.name;
left.name = component.title; // or setAttribute('name'.. ?
// left.classList.add("interactive", "link");
left.onclick = function () {
getGroup(s, component.title);
}
// left.onclick = function () {
// getGroup(s, component.title);
// }
return appendToContent(component, left, createParElement(component));
}
@ -504,11 +503,13 @@ function createTitle(component, modules) {
// Creates left side of row-tag containing title. Title may hold additional
// information, which is shown, when title-tag is clicked.
// At the modules-block a status-oicon is added
// At the modules-block a status-icon is added
var left = document.createElement('span');
var status_icon = document.createElement('p');
status_icon.classList.add("status-icon");
// var status_icon = document.createElement('p');
// status_icon.classList.add("status-icon");
console.log(component);
var title = component.title;
if (component.info) {
left.classList.add("col-left", "event-toggle-info");
@ -524,14 +525,16 @@ function createTitle(component, modules) {
left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
} else {
if (modules) {
left.innerHTML = '<span class = "modules-title">' + component.title + '</span>'
// + '<span class = "modules-icon status-icon">s</span>'
+ '<img class = "modules-icon" src="res/icon_status_16px.png">'
// + '<span class = "modules-icon edit-icon">e</span>'
+ '<img class = "modules-icon" src="res/icon_edit_16px.png">'
// + '<span class = "modules-icon info-icon">i</span>'
+ '<img class = "modules-icon" src="res/question_mark.png">'
;
var icon_status = '<img class = "modules-icon status-icon" src="res/icon_status.png">';
var icon_edit = '<img class = "modules-icon edit-icon" src="res/icon_edit.png">';
var icon_info = '<img class = "modules-icon info-icon" src="res/icon_info.png" onclick = getGroup(1,"' + title + '")>';
left.innerHTML = '<span class = "modules-title">' + component.title + '</span>';
if (component.statusname) {
left.innerHTML += icon_status;
}
left.innerHTML += icon_edit;
left.innerHTML += icon_info;
} else {
left.innerHTML = component.title;
}

13
client/jsFiles/SEAWebClientMain.js
View File

@ -81,7 +81,7 @@ function to_bool(string) {
// example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
// hostPort given and debugCommunication switched on
new Settings()
.treat("debugCommunication", "dc", 0, 2) // 1: debug synchronous comm. 2: debug syn and asyn comm
.treat("debugCommunication", "dc", 0, 0) // 1: debug synchronous comm. 2: debug syn and asyn comm
.treat("debugGraphics", "dg", to_bool, false)
.treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
.treat("showMain", "sm", to_bool, true)
@ -179,15 +179,24 @@ window.onload = function() {
adjustGrid();
let crossElement = document.getElementById("close-cross");
// crossElement.innerHTML = '<img class = "icon-graphics" src="res/icon_close.png">';
if(window.hideRightPart){
document.body.removeChild(crossElement);
}else{
crossElement.onclick = function(){
console.log(showParams);
if (showParams) {
showParams = false;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
} else {
window.wideGraphs = ! window.wideGraphs;
if (window.wideGraphs) {
window.wideGraphs = false;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
} else {
window.wideGraphs = true;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_modules.png">';
}
}
adjustGrid();
}