Csináltam egy egyszerűen hasztnálható IoT készletet. Rengeteg dashboardnak használható tablet szunnyad a fiókok mélyén új funkcióra várva, ezért a kód Android 4.2.2 kompatibilis. Laptopon is nagyjából jó, viszont új telefonokon nem az igazi. Nekem Samsung S5 LineageOS 11 a legmodernebb készülékem, 2k kijelzős cuccokon nem tudom tesztelni, meg a CSS (se) az erősségem. Ha valakinek van kedve, ideje, megfelelő eszközparkja, kijavítgathatná. Kommentek nélkül gzipelve ~2kb, ESP procikra töléletes lenne .js formában.
<!DOCTYPE HTML>
<html>
<!--_____________HEAD________________________________________________________________________________-->
<head>
<title>New Page</title>
<meta http-equiv="Content-Type" content="text; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<style>
/* Style can go here */
</style>
</head>
<!--_____________BODY_________________________________________________________________-->
<body>
<script>
(function () {
var initialWidth = window.innerWidth;
window.addEventListener('resize', function () {
// Ha a képernyő mérete megváltozott és az elfordítás okozta
if (window.innerWidth !== initialWidth) {
location.reload(); // Frissíti az oldalt
}
});
})();
function Slabel1(labelId, x, y, minWidth, fontSize, padding, borderRadius, backgroundColor, textColor, fontFamily, text) {
if (x === "MOD") {
var label = document.getElementById(labelId);
if (label) {
label.textContent = y; // A y lesz az új szöveg
}
return;
}
var label = document.createElement('label');
label.id = labelId;
label.textContent = text; // Beállítjuk a szöveget
label.style.position = 'absolute';
label.style.left = x;
label.style.top = y;
label.style.fontSize = fontSize;
label.style.minWidth = minWidth;
label.style.backgroundColor = backgroundColor;
label.style.color = textColor;
label.style.borderRadius = borderRadius;
label.style.fontFamily = fontFamily;
label.style.padding = padding;
label.style.textAlign = 'center';
document.body.appendChild(label);
}
function Sbutton1(xPercent, yPercent, diameter, borderThicknessPercent, baseColor, onClickFunction) {
// Szín módosító függvény
function shadeColor(color, percent) {
var num = parseInt(color.slice(1), 16);
var r = (num >> 16) + percent;
var g = ((num >> 8) & 0x00FF) + percent;
var b = (num & 0x0000FF) + percent;
r = r < 0 ? 0 : r > 255 ? 255 : r;
g = g < 0 ? 0 : g > 255 ? 255 : g;
b = b < 0 ? 0 : b > 255 ? 255 : b;
return "#" + ("000000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
}
var darkerColor = shadeColor(baseColor, -30);
var lighterColor = shadeColor(baseColor, 30);
var borderThickness = (diameter * borderThicknessPercent) / 100;
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var xPos = (screenWidth * xPercent) / 100;
var yPos = (screenHeight * yPercent) / 100;
var container = document.createElement('div');
container.style.position = "absolute";
container.style.left = xPos + "px";
container.style.top = yPos + "px";
container.style.marginTop = -(diameter / 2) + "em"; // Vertikálisan középre igazítja
var button = document.createElement('div');
button.style.width = diameter + "em";
button.style.height = diameter + "em";
button.style.backgroundColor = baseColor;
button.style.borderRadius = "50%";
button.style.border = borderThickness + "em solid " + darkerColor;
button.style.boxShadow = "inset 0 0 0 0 " + lighterColor + ", 0 0.6em 0.8em rgba(0, 0, 0, 0.3)";
button.style.cursor = "pointer";
button.style.transition = "box-shadow 0.2s";
button.style.boxSizing = "border-box";
button.style.overflow = "hidden";
button.style.userSelect = "none";
button.style.outline = "none";
button.style.WebkitTapHighlightColor = "transparent";
var isPressed = false;
function onTouchStart() {
if (!isPressed) {
button.style.boxShadow = "inset 0 0.6em 0.8em " + darkerColor + ", 0 0.3em 0.4em rgba(0, 0, 0, 0.3)";
isPressed = true;
}
}
function onTouchEnd() {
button.style.boxShadow = "inset 0 0 0 0 " + lighterColor + ", 0 0.6em 0.8em rgba(0, 0, 0, 0.3)";
if (isPressed) {
onClickFunction();
isPressed = false;
}
}
button.onmousedown = onTouchStart;
button.onmouseup = button.onmouseleave = onTouchEnd;
button.ontouchstart = onTouchStart;
button.ontouchend = onTouchEnd;
container.appendChild(button);
document.body.appendChild(container);
}
function Stoggle1(id, x, y, width, height, vertical, borderWidth, borderRadius, borderColor, ballSize, ballColor, onBgColor, offBgColor, onToggleOn, onToggleOff) {
if (x === "MOD") {
var toggleContainer = document.getElementById(id);
if (!toggleContainer) return;
var isActive = y;
var vertical = toggleContainer.style.width > toggleContainer.style.height;
var ball = toggleContainer.querySelector('.toggle-ball');
var width = parseFloat(toggleContainer.style.width) || 0;
var ballSize = parseFloat(ball.style.width) || 0;
var onBgColor = toggleContainer.getAttribute('data-on-bg-color');
var offBgColor = toggleContainer.getAttribute('data-off-bg-color');
toggleContainer.setAttribute('data-is-active', isActive.toString());
if (isActive) {
toggleContainer.style.backgroundColor = onBgColor;
if (vertical) {
ball.style.top = '5%';
} else {
ball.style.left = (width - ballSize - 0.5) + 'em';
}
} else {
toggleContainer.style.backgroundColor = offBgColor;
if (vertical) {
ball.style.top = (width - ballSize - 0.5) + 'em';
} else {
ball.style.left = '5%';
}
}
return;
}
var toggleContainer = document.createElement('div');
toggleContainer.className = 'toggle-container';
toggleContainer.id = id;
toggleContainer.setAttribute('data-on-bg-color', onBgColor);
toggleContainer.setAttribute('data-off-bg-color', offBgColor);
toggleContainer.setAttribute('data-is-active', 'false');
var screenWidth = window.innerWidth;
var xPosition = (screenWidth * (x / 100)) + 'px';
toggleContainer.style.position = 'absolute';
toggleContainer.style.left = xPosition;
toggleContainer.style.top = y + '%';
toggleContainer.style.width = vertical ? height + 'em' : width + 'em';
toggleContainer.style.height = vertical ? width + 'em' : height + 'em';
toggleContainer.style.borderRadius = borderRadius + 'em';
toggleContainer.style.backgroundColor = offBgColor;
toggleContainer.style.border = borderWidth + 'px solid ' + borderColor;
toggleContainer.style.cursor = 'pointer';
toggleContainer.style.overflow = 'hidden';
toggleContainer.style.userSelect = 'none';
toggleContainer.style.outline = 'none';
toggleContainer.style.WebkitTapHighlightColor = 'transparent';
var toggleBall = document.createElement('div');
toggleBall.className = 'toggle-ball';
toggleBall.style.position = 'absolute';
toggleBall.style.width = ballSize + 'em';
toggleBall.style.height = ballSize + 'em';
toggleBall.style.backgroundColor = ballColor;
toggleBall.style.borderRadius = '50%';
if (vertical) {
toggleBall.style.left = (height / 2 - ballSize / 2) + 'em';
toggleBall.style.top = (width - ballSize - 0.5) + 'em';
} else {
toggleBall.style.top = (height / 2 - ballSize / 2) + 'em';
toggleBall.style.left = '5%';
}
toggleContainer.appendChild(toggleBall);
var startPos = 0;
var isSwiping = false;
function handleTouchStart(event) {
startPos = vertical ? event.touches[0].pageY : event.touches[0].pageX;
isSwiping = true;
}
function handleTouchMove(event) {
if (!isSwiping) return;
var movePos = vertical ? event.touches[0].pageY : event.touches[0].pageX;
var delta = movePos - startPos;
if (Math.abs(delta) > 50) { // Növelve a toleranciát 50 pixelesre
isSwiping = false;
toggleContainer.setAttribute('data-is-active', vertical ? (delta < 0 ? 'true' : 'false') : (delta > 0 ? 'true' : 'false'));
updateToggleState();
}
}
function handleTouchEnd() {
isSwiping = false;
}
function handleMouseDown(event) {
startPos = vertical ? event.clientY : event.clientX;
isSwiping = true;
}
function handleMouseMove(event) {
if (!isSwiping) return;
var movePos = vertical ? event.clientY : event.clientX;
var delta = movePos - startPos;
if (Math.abs(delta) > 50) { // Növelve a toleranciát 50 pixelesre
isSwiping = false;
toggleContainer.setAttribute('data-is-active', vertical ? (delta < 0 ? 'true' : 'false') : (delta > 0 ? 'true' : 'false'));
updateToggleState();
}
}
function handleMouseUp() {
isSwiping = false;
}
function updateToggleState() {
var isActive = toggleContainer.getAttribute('data-is-active') === 'true';
if (isActive) {
toggleContainer.style.backgroundColor = onBgColor;
if (vertical) {
toggleBall.style.top = '5%';
} else {
toggleBall.style.left = (width - ballSize - 0.5) + 'em';
}
if (onToggleOn) onToggleOn();
} else {
toggleContainer.style.backgroundColor = offBgColor;
if (vertical) {
toggleBall.style.top = (width - ballSize - 0.5) + 'em';
} else {
toggleBall.style.left = '5%';
}
if (onToggleOff) onToggleOff();
}
}
toggleContainer.addEventListener('selectstart', function (event) {
event.preventDefault();
});
toggleContainer.onmousedown = handleMouseDown;
toggleContainer.onmousemove = handleMouseMove;
toggleContainer.onmouseup = handleMouseUp;
toggleContainer.ontouchstart = handleTouchStart;
toggleContainer.ontouchmove = handleTouchMove;
toggleContainer.ontouchend = handleTouchEnd;
toggleContainer.onclick = function (event) {
event.preventDefault();
toggleContainer.blur();
var isActive = toggleContainer.getAttribute('data-is-active') === 'true';
toggleContainer.setAttribute('data-is-active', (!isActive).toString());
updateToggleState();
};
document.body.appendChild(toggleContainer);
}
function Srange1(id, x, y, height, width, isVertical, borderWidth, borderRadius, borderColor, knob, knobrad, knobColor, trackColor, min, max, onChange) {
if (!isVertical) { width ^= height; height ^= width; width ^= height; }
if (x === "MOD") {
var sliderContainer = document.getElementById(id);
if (!sliderContainer) return; // Ha nem található az elem, kilép
var sliderKnob = sliderContainer.querySelector('div');
var value = parseFloat(y);
if (isNaN(value)) return; // Érvénytelen érték esetén kilép
var min = parseFloat(sliderContainer.getAttribute('data-min')) || 0;
var max = parseFloat(sliderContainer.getAttribute('data-max')) || 100;
var percentage = ((value - min) / (max - min)) * 100;
percentage = Math.max(0, Math.min(100, percentage));
if (sliderContainer.style.flexDirection === 'column') {
sliderKnob.style.top = (100 - percentage) + '%'; // Függőleges esetén
} else {
sliderKnob.style.left = percentage + '%'; // Vízszintes esetén
}
return;
}
// Eredeti létrehozó logika
var sliderContainer = document.createElement('div');
sliderContainer.id = id;
sliderContainer.setAttribute('data-min', min);
sliderContainer.setAttribute('data-max', max);
sliderContainer.style.position = 'absolute';
sliderContainer.style.left = x + '%';
sliderContainer.style.top = y + '%';
sliderContainer.style.height = isVertical ? height + 'em' : 'auto'; // Ha függőleges, a magasságot használjuk
sliderContainer.style.width = isVertical ? 'auto' : width + 'em'; // Ha vízszintes, a szélességet használjuk
sliderContainer.style.backgroundColor = trackColor;
sliderContainer.style.border = borderWidth + 'px solid ' + borderColor;
sliderContainer.style.borderRadius = borderRadius + 'px';
sliderContainer.style.overflow = 'hidden';
sliderContainer.style.display = 'flex';
sliderContainer.style.flexDirection = isVertical ? 'column' : 'row';
sliderContainer.style.justifyContent = 'flex-start';
sliderContainer.style.padding = '0.2%';
// Knob stílus beállítása
var sliderKnob = document.createElement('div');
sliderKnob.style.position = 'relative';
sliderKnob.style.margin = isVertical ? '0 auto' : 'auto 0';
sliderKnob.style.height = isVertical ? knob + 'em' : (height * 0.9) + 'em';
sliderKnob.style.width = isVertical ? (width * 0.9) + 'em' : knob + 'em';
sliderKnob.style.backgroundColor = knobColor;
sliderKnob.style.borderRadius = knobrad + 'px';
sliderKnob.style.cursor = 'pointer';
sliderKnob.style[isVertical ? 'top' : 'left'] = isVertical
? (100 - (knob / height) * 100) + '%' // Függőleges esetén
: '0%'; // Vízszintesen balra kezd
sliderContainer.appendChild(sliderKnob);
var isDragging = false;
var startCoord, startPos;
function onDragStart(e) {
isDragging = true;
startCoord = isVertical ? (e.touches ? e.touches[0].clientY : e.clientY) : (e.touches ? e.touches[0].clientX : e.clientX);
startPos = parseFloat(sliderKnob.style[isVertical ? 'top' : 'left'] || '0');
e.preventDefault();
}
function onDragMove(e) {
if (!isDragging) return;
e.preventDefault();
var delta = (isVertical ? (e.touches ? e.touches[0].clientY : e.clientY) : (e.touches ? e.touches[0].clientX : e.clientX)) - startCoord;
var containerSize = isVertical ? sliderContainer.offsetHeight : sliderContainer.offsetWidth;
var knobSize = isVertical ? sliderKnob.offsetHeight : sliderKnob.offsetWidth;
var newPos = Math.min(
Math.max(startPos + (delta / containerSize) * 100, 0),
100 - (knobSize / containerSize) * 100
);
sliderKnob.style[isVertical ? 'top' : 'left'] = newPos + '%';
}
function onDragEnd() {
if (!isDragging) return;
isDragging = false;
var containerSize = isVertical ? sliderContainer.offsetHeight : sliderContainer.offsetWidth;
var knobSize = isVertical ? sliderKnob.offsetHeight : sliderKnob.offsetWidth;
var positionPercentage = parseFloat(sliderKnob.style[isVertical ? 'top' : 'left'] || '0') / (100 - (knobSize / containerSize) * 100);
var value = isVertical
? Math.round(min + (max - min) * (1 - positionPercentage))
: Math.round(min + (max - min) * positionPercentage);
if (onChange && typeof onChange === 'function') {
onChange(value);
}
}
sliderKnob.addEventListener('mousedown', onDragStart);
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
sliderKnob.addEventListener('touchstart', onDragStart);
document.addEventListener('touchmove', onDragMove);
document.addEventListener('touchend', onDragEnd);
document.body.appendChild(sliderContainer);
}
function Slamp1(id, x, y, diameter, color) {
// Függvény a szín sötétítésére
function darkenColor(color, percent) {
if (!color || color[0] !== '#' || color.length !== 7) {
console.error("Hibás színkód: ", color);
return "#000000"; // Alapértelmezett sötét szín
}
var num = parseInt(color.slice(1), 16);
var amt = Math.round(2.55 * percent);
var r = (num >> 16) - amt;
var g = (num >> 8 & 0x00FF) - amt;
var b = (num & 0x0000FF) - amt;
r = r > 0 ? r : 0;
g = g > 0 ? g : 0;
b = b > 0 ? b : 0;
return "#" + (0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).slice(1);
}
// Ha az `x` "MOD", meglévő lámpát kezelünk
if (x === "MOD") {
var existingLight = document.getElementById(id);
if (existingLight) {
if (y === true) {
existingLight.classList.add('light-on'); // Lámpa bekapcsolása
} else {
existingLight.classList.remove('light-on'); // Lámpa kikapcsolása
}
} else {
console.error("A megadott ID-jű lámpa nem található: " + id);
}
return; // Nincs további teendő
}
// Ellenőrizni kell, hogy a kötelező paraméterek érvényesek-e
if (!id || typeof x !== "number" || typeof y !== "number" || !diameter || !color) {
console.error("Hiányzó vagy hibás paraméterek a lámpa létrehozásához.");
return;
}
var darkColor = darkenColor(color, 80); // Nagyon sötét szín kikapcsolt állapothoz
// Stílusok létrehozása
var style = document.createElement('style');
style.innerHTML =
".light-container-" + id + " {" +
"position: absolute;" +
"top: " + y + "%;" +
"left: " + x + "%;" +
"transform: translate(-50%, -50%);" +
"pointer-events: none;" + // Az elemet ne lehessen kattintással elérni
"}" +
".light-" + id + " {" +
"width: " + diameter + "em;" +
"height: " + diameter + "em;" +
"border-radius: 50%;" +
"border: 1px solid " + color + ";" +
"background-color: " + darkColor + ";" +
"-webkit-transition: box-shadow 0.5s, background-color 0.5s;" +
"-moz-transition: box-shadow 0.5s, background-color 0.5s;" +
"-ms-transition: box-shadow 0.5s, background-color 0.5s;" +
"transition: box-shadow 0.5s, background-color 0.5s;" +
"}" +
".light-" + id + ".light-on {" +
"box-shadow: 0 0 20px " + color + ", " +
"0 0 30px " + color + ", " +
"0 0 40px " + color + ", " +
"0 0 50px " + color + ", " +
"0 0 60px " + color + ", " +
"0 0 70px " + color + ", " +
"0 0 80px " + color + ";" +
"background-color: " + color + ";" +
"}";
document.head.appendChild(style);
// Létrehozzuk a container elemet
var container = document.createElement('div');
container.className = 'light-container-' + id;
// Létrehozzuk a lámpa elemet
var light = document.createElement('div');
light.className = 'light-' + id;
light.id = id;
// Hozzáadjuk a lámpát a containerhez
container.appendChild(light);
// Hozzáadjuk a container-t a body-hoz
document.body.appendChild(container);
}
//----------------------Slabel------------------------------------------------------------------------------------------------------
Slabel1 (
"label1", // ID
"10%", "10%", // x pos, y pos
"0%", "1em", // minimal width, height,
"0.3em", "0em", // padding, radius
"lightgreen", "black", // background color, text color
"Arial", // font family
"Example Label 1" // text
);
Slabel1 (
"label2", // ID
"50%", "10%", // x pos, y pos
"0%", "1em", // minimal width, height,
"0.3em", "0em", // padding, radius
"lightgreen", "black", // background color, text color
"Arial", // font family
"Example Label 2" // text
);
Slabel1 ("label1", "MOD", "New Label 1"); // change text
Slabel1 ("label2", "MOD", "New Label 2"); // change text
//----------------------Sbutton ------------------------------------------------------------------------------------------------------
Sbutton1 (
10, 25, // x pos (%), y pos (%)
4, 10, // átmérő (%), gyűrű (átmérőhöz képest %)
"lightblue", // color
function() { console.log("Button1 clicked!"); }); // push command
Sbutton1 (
50, 25, // x pos (%), y pos (%)
4, 10, // átmérő (%), gyűrű (átmérőhöz képest %)
"lightblue", // color
function() { console.log("Button2 clicked!"); }); // push command
//----------------------Stoggle------------------------------------------------------------------------------------------------------
Stoggle1 (
"toggle1", // ID
10, 35, // x pos (%), y pos (%)
10, 3, false, // width (em), height (em), fekvő/álló
10, 10, "black", // border size (px), radius (px), color
3, "blue", // ballSize (em), ballColor
"green", "red", // on / off color
function() { console.log("Toggle1 ON"); }, // on command
function() { console.log("Toggle1 OFF"); } // off command
);
Stoggle1 (
"toggle2", // ID
50, 35, // x pos (%), y pos (%)
10, 3, true, // width (em), height (em), fekvő/álló
10, 10, "black", // border size (px), radius (px), color
3, "blue", // ballSize (em), ballColor
"green", "red", // on / off color
function() { console.log("Toggle2 ON"); }, // on command
function() { console.log("Toggle2 OFF"); } // off command
);
Stoggle1 ("toggle1", "MOD", true); // switch on
Stoggle1 ("toggle2", "MOD", true); // switch on
//----------------------Srange------------------------------------------------------------------------------------------------------
Srange1 (
"slider1", // ID
10, 65, // x pos (%), y pos (%)
10, 3, false, // width (em), height (em), fekvő/álló
4, 20, "gray", // border size (px), border radius (px), border color
2, 10, "blue", "yellow", // knob width (em), knob radius (px), knob color, trackColor
0, 100, // minimal value, maximal value (number)
function(value) { console.log("Slider1: " + value); } // változáskor végrehahtja
);
Srange1 (
"slider2", // ID
50, 65, // x pos (%), y pos (%)
10, 3, true, // width (em), height (em), fekvő/álló
4, 0, "gray", // border size (px), border radius (px), border color
2, 10, "red", "green", // knob width (em), knob radius (px), knob color, trackColor
0, 100, // minimal value, maximal value (number)
function(value) { console.log("Slider2: " + value); } // változáskor végrehahtja
);
Srange1 ("slider1", "MOD", 25); // set value
Srange1 ("slider2", "MOD", 75); // set value
//----------------------Sled--------------------------------------------------------------------------------------------------------
Slamp1 (
"lamp1", // ID
80, 30, // x pos (%), y pos (%)
2, "#00ff00" // átmérő (em), color
);
Slamp1 (
"lamp2", // ID
80, 60, // x pos (%), y pos (%)
2, "#ff0000" // átmérő (em), color
);
Slamp1 ("lamp1", "MOD", true);
Slamp1 ("lamp2", "MOD", true);
//----------------------------------------------------------------------------------------------------------------------------------
</script>
</body>
</html>