Skip to content
Snippets Groups Projects
Commit 14de5451 authored by Vojtěch Novotný's avatar Vojtěch Novotný
Browse files

placeholder pro teplotu/vlhostni spotrebice, main do jine slozky, gitignore

parent c0b71138
No related branches found
No related tags found
1 merge request!4stabilni verze semestralni prace, 3 cviceni, domaci ukol 1
Hide whitespace changes
Inline Side-by-side
.gitignore
+ 4
− 2
View file @ 14de5451
*.exe
*.json
\ No newline at end of file
*.json
ukoly/du_01/template/**main
.vscode/settings.json
semestralni_prace/main.html → semestralni_prace/SDV/main.html
+ 0
− 0
View file @ 14de5451
File moved
semestralni_prace/index.html
+ 101
− 0
View file @ 14de5451
......@@ -126,16 +126,117 @@
right: 20px;
z-index: 1000;
}
.control-panel-toggle {
position: fixed;
top: 100px;
right: 20px;
z-index: 1000;
}
.toggle-AC {
position: fixed;
top: 140px;
right: 20px;
width: 100px;
z-index: 1000;
}
.toggle-heater {
position: fixed;
top: 180px;
right: 20px;
width: 100px;
z-index: 1000;
}
.toggle-humidifier {
position: fixed;
top: 220px;
width: 100px;
right: 20px;
z-index: 1000;
}
.toggle-dehumidifier {
position: fixed;
top: 260px;
right: 20px;
width: 100px;
z-index: 1000;
}
.small-btn {
padding: 5px 10px;
font-size: 0.8rem;
display: block;
margin-top: 10px;
transition: opacity 0.3s, transform 0.3s;
}
.hidden {
opacity: 0;
transform: translateY(-20px);
}
.input-group {
position: fixed;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateX(-100%);
opacity: 0;
z-index: 1000;
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 200px;
/* Adjust as needed */
}
.input-group.visible {
transform: translateX(-100%);
opacity: 1;
margin-right: 100px;
right: 500px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container mt-4">
<button id="toggle-dark-mode" class="btn btn-secondary dark-mode-toggle">Toggle Dark Mode</button>
<button id="toggle-control-panel" class="btn btn-secondary control-panel-toggle">Control Panel</button>
<button id="toggle-dehumidifier" class="btn btn-secondary small-btn toggle-dehumidifier">DEH</button>
<button id="toggle-humidifier" class="btn btn-secondary small-btn toggle-humidifier">HUM</button>
<button id="toggle-heater" class="btn btn-secondary small-btn toggle-heater">HEAT</button>
<button id="toggle-ac" class="btn btn-secondary small-btn toggle-AC">A/C</button>
<h1 class="mb-4 text-center">Monitoring Temperature & Humidity</h1>
<hr>
</hr>
<button id="toggle-phone-view" class="btn btn-primary mb-4">Toggle Simple View</button>
<div class="control-panel">
<div id="dehumidifier-input" class="input-group hidden">
<input type="number" class="form-control" placeholder="Desired Humidity">
<button class="btn btn-primary" onclick="setDehumidifier()">Set</button>
</div>
<div id="humidifier-input" class="input-group hidden">
<input type="number" class="form-control" placeholder="Desired Humidity">
<button class="btn btn-primary" onclick="setHumidifier()">Set</button>
</div>
<div id="heater-input" class="input-group hidden">
<input type="number" class="form-control" placeholder="Desired Temperature">
<button class="btn btn-primary" onclick="setHeater()">Set</button>
</div>
<div id="ac-input" class="input-group hidden">
<input type="number" class="form-control" placeholder="Desired Temperature">
<button class="btn btn-primary" onclick="setAC()">Set</button>
</div>
</div>
<div class="row" id="sensor-data"></div>
</div>
<script src="script.js"></script>
......
semestralni_prace/script.js
+ 106
− 0
View file @ 14de5451
......@@ -134,5 +134,111 @@ if (localStorage.getItem('darkMode') === 'true') {
document.getElementById('toggle-dark-mode').textContent = '🌙';
}
document.getElementById('toggle-control-panel').addEventListener('click', () => {
const buttons = document.querySelectorAll('.small-btn');
buttons.forEach(button => {
if (button.classList.contains('hidden')) {
document.getElementById('toggle-control-panel').textContent = 'Control Panel';
button.classList.remove('hidden');
} else {
button.classList.add('hidden');
document.getElementById('toggle-control-panel').textContent = 'CP';
}
});
});
function toggleInput(control) {
const inputGroup = document.getElementById(`${control}-input`);
const button = document.getElementById(`toggle-${control}`);
const isVisible = inputGroup.classList.contains('visible');
// Hide all other input groups
document.querySelectorAll('.input-group').forEach(group => {
if (group.id !== `${control}-input`) {
group.classList.remove('visible');
group.classList.add('hidden');
}
});
if (isVisible) {
inputGroup.classList.remove('visible');
inputGroup.classList.add('hidden');
} else {
// Position the form to the left of the button
const buttonRect = button.getBoundingClientRect();
inputGroup.style.top = `${buttonRect.top}px`; // Align with the button's top
inputGroup.style.left = `${buttonRect.left - inputGroup.offsetWidth}px`; // Position to the left of the button
inputGroup.classList.remove('hidden');
inputGroup.classList.add('visible');
}
}
document.getElementById('toggle-dehumidifier').addEventListener('click', () => {
if (document.getElementById(`toggle-dehumidifier`).classList.contains('active')) {
deHighlightButton('dehumidifier');
}
else
toggleInput('dehumidifier');
});
document.getElementById('toggle-humidifier').addEventListener('click', () => {
if (document.getElementById(`toggle-humidifier`).classList.contains('active')) {
deHighlightButton('humidifier');
}
else
toggleInput('humidifier');
});
document.getElementById('toggle-heater').addEventListener('click', () => {
if (document.getElementById(`toggle-heater`).classList.contains('active')) {
deHighlightButton('heater');
}
else
toggleInput('heater');
});
document.getElementById('toggle-ac').addEventListener('click', () => {
if (document.getElementById(`toggle-ac`).classList.contains('active')) {
deHighlightButton('ac');
}
else
toggleInput('ac');
});
function setDehumidifier() {
// TODO: Implement functionality
highlightButton('dehumidifier');
}
function setHumidifier() {
// TODO: Implement functionality
highlightButton('humidifier');
}
function setHeater() {
// TODO: Implement functionality
highlightButton('heater');
}
function setAC() {
// TODO: Implement functionality
highlightButton('ac');
}
function highlightButton(control) {
document.getElementById(`toggle-${control}`).classList.add('active');
document.getElementById(`${control}-input`).style.display = 'none';
document.getElementById(`toggle-${control}`).style.background = 'limegreen';
}
function deHighlightButton(control) {
document.getElementById(`toggle-${control}`).classList.remove('active');
document.getElementById(`${control}-input`).style.display = 'block';
document.getElementById(`toggle-${control}`).style.background = '';
}
loadSensorData();
setInterval(loadSensorData, 30000);
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment