27 Commits

Author SHA1 Message Date
Tucan444
5a7f4a964f _ 2021-05-31 19:13:30 +02:00
Tucan444
4eebe3a87c _ 2021-05-13 07:57:13 +02:00
Tucan444
b759888697 _ 2021-05-12 09:27:18 +02:00
JustSteel
1b241cad50 _
deleting useless files
2021-05-12 09:25:53 +02:00
Tucan444
b06c1a80bc Update README.md 2021-05-12 09:18:28 +02:00
Tucan444
ea9794533f Update README.md 2021-05-12 09:17:55 +02:00
Tucan444
cdd79b6fd8 Update README.md 2021-05-12 09:16:39 +02:00
Tucan444
05827eefce Update README.md 2021-05-12 09:15:43 +02:00
Tucan444
f4d0950b0a Update README.md 2021-05-12 09:14:57 +02:00
Tucan444
829f3be627 Update README.md 2021-05-12 09:14:39 +02:00
Tucan444
9e1b63282f _ 2021-05-11 12:06:34 +02:00
Tucan444
f6e0b85b00 Update README.md 2021-05-11 11:47:34 +02:00
Untriex Programming
9b30e7a3d3 hotfix 2021-05-11 08:55:16 +02:00
JustSteel
d80346df5f Merge branch 'Development' of https://github.com/Tucan444/Mabasej_Team into Development 2021-05-10 22:29:05 +02:00
JustSteel
9c1f8a973d _ 2021-05-10 22:29:01 +02:00
Untriex Programming
1daa622ab1 Update README.md 2021-05-10 20:54:00 +02:00
Untriex Programming
f34c4cbd63 Update README.md 2021-05-10 20:27:47 +02:00
Tucan444
526315d65c _ 2021-05-10 19:15:52 +02:00
Tucan444
954ef22ca9 _ 2021-05-10 15:03:04 +02:00
Untriex Programming
359e3c9985 Update main.py 2021-05-09 20:47:51 +02:00
Tucan444
34f46b5ab9 Update main.py 2021-05-09 20:46:40 +02:00
Tucan444
c1aa264ea8 removed cache from server 2021-05-09 19:50:21 +02:00
Untriex Programming
bd38ec1c52 Update README.md 2021-05-09 14:57:10 +02:00
Tucan444
402b01ff21 Merge branch 'Development' of https://github.com/Tucan444/Mabasej_Team into Development 2021-05-09 14:38:45 +02:00
Tucan444
ca241c7dfb _ 2021-05-09 14:38:43 +02:00
Tucan444
a92ebde07d _ 2021-05-09 14:38:09 +02:00
ff0082
2ccfbc2efc nove files 2021-05-09 12:22:26 +02:00
50 changed files with 530 additions and 633 deletions

View File

@@ -1,20 +1,56 @@
1. [Mabasej team project](#mabasej_team)
2. [App](#app)
1. [Installation from apk](#install)
4. [Server](#server)
1. [Install .img (RPI) server+web+computer_vision](#image-install)
2. [Install script (DietPi, work in progress) server](#script-install)
3. [Install manually (work in progress)](#manual-install)
4. [Server filesystem](#server-filesystem)
5. [filesystem.json](#filesystem)
6. [settings.json](#settings)
# Mabasej_Team
We are working on system, that will help tourists in cities to get information about city more easily.
| Part of project | State | Available for easy install | Comments |
| :-------------- | :---- | :------------------------: | :------: |
| Server | Working | 🟢 | Fully working if config is correct |
| Computer Vision Plugin | Working | 🟢 | |
| Web | Demo Working | 🟠 | |
| Android app | Working | 🟢 | 🟠 manual server ip 🟠 </br>(working automatically if connected to AP on RPI)|
## Hardware
- Raspberry PI (for now tested only on rpi4. Works on rpi zero too, but it will be slow if more devices are connected)
- External/Internal WiFi antena
## Software
- python 3.9.2 compatible server with basic web interface
- Kotlin based mobile app
# App
Is programmed in android studio (kotlin)
It is based on simple interface with only few buttons, but lot of informations:
- Home- *Shows contents of the server that the user is connected to*
- Explore- *Shows all servers in list with small description and photo.* *User can acces map locations of server or all informations about server*
- Map- *Map that contains pins from all servers and user can open server info from here.* *Also it is possible to start navigation with google maps from here*
- Chat- *Users connected to same server can chat here*
- Settings- *Simple settings for theme and hidden debug menu*
## Install
Wikispot is in testing stages, but it is possible to install it using our .img file (link coming soon) based on DietPi or custom script.
Requirements:
- Android 6 and newer
- [WikiSpot.apk](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0)
Steps:
1. Download `wikispot.apk` to your mobile and install it. (you will probablly need to enable installing apps from your browser)
2. After instalation open app and go to settings.
3. Click on the top right corner and debug menu should show up.
4. Change ip to your server ip and chose `CHANGE URL`
5. Chose `Home` menu and you should see your server.
⚠️ Because of android limitations we were not able to do automatic connection, but we are working on workaround ⚠️
# Server
Wikispot is in testing stages, but it is possible to install it using our [.img file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0) based on DietPi or custom script.
| Device | Server compatible | Instalation |
| :-------------------- | :------------------------------------------------------------------------------------------ | :-----------: |
| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server) | Manual/script |
| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server automated setup) | Manual/script |
| RPI 4b (2GB) | :heavy_check_mark: WORKING | .img/script |
| RPI 400 (4GB) | :grey_question: Untested. Should work. | .img/script |
| RPI 3b+ | :grey_question: Untested. Should work. | .img/script |
@@ -23,17 +59,18 @@ Wikispot is in testing stages, but it is possible to install it using our .img f
| RPI | :question: Untested. | :x: |
### Fresh istall (.img) Only RPI
## image install
login credentials
> login: dietpi
> password: WikiSpot2021
> password: WikiSpot
requirements:
1. WikiSpot image file (download: *soon*)
1. [WikiSpot image file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0)
2. MicroSd card (recommended: >=16GB, :exclamation: ALL DATA STORED ON SD CARD WILL BE FORMATED :exclamation:)
3. BalenaEtcher (or another sd card flasher) *link:* https://www.balena.io/etcher/
3. [BalenaEtcher](https://www.balena.io/etcher/) (or another sd card flasher) *link:* https://www.balena.io/etcher/
4. SD card reader
@@ -54,15 +91,16 @@ Install:
8. Done you can start using WikiSpot and edit contents of WikiSpot with our app (*coming soon*)
### Script install
## Script install
*coming soon*
### Manual install
## Manual install
*coming soon*
## Server filesystem
Tree view of server
```
└── test_directory
@@ -85,6 +123,7 @@ Install:
### filesystem
File: `filesystem.json`
```
{
@@ -120,7 +159,8 @@ and add record for file into `files` list in `filesystem.json`. :exclamation:do
```
### settings.json
### settings
File: `settings.json`
```
{

View File

@@ -20,5 +20,5 @@
Once you have your key (it starts with "AIza"), replace the "google_maps_key"
string in this file.
-->
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">AIzaSyAixBio8FevppLsncIkFUQarx2kUB-0dW0</string>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false"></string>
</resources>

View File

@@ -18,4 +18,5 @@ Koktail bar - áno
Kontakt
Adresa: Dlhá 58 , 095 01 Senica
Telefón: +421 928229120
Telefón: +421
Email: restauracia.kojda@gmail.com

View File

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 315 KiB

View File

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

View File

@@ -14,3 +14,4 @@ Kontakt
Adresa: Športovcov 7212, 017 01 Považská Bystrica
Telefón: 0918 221 189
email: slovenska.posta@gmail.com

View File

Before

Width:  |  Height:  |  Size: 304 KiB

After

Width:  |  Height:  |  Size: 304 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 158 KiB

View File

Before

Width:  |  Height:  |  Size: 474 KiB

After

Width:  |  Height:  |  Size: 474 KiB

View File

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 122 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

View File

@@ -2,21 +2,23 @@
"ID": 0,
"location": "49.14178021389778,18.353783098441415",
"description": {
"title": "Reštaurácia",
"title": "Reštaurácia pod slivkou",
"description_s": "Otvorené",
"description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 22:00\nSOB: zatvorené\nNED: 14:00-21:00",
"photo_s": "restaurant_out.jpg",
"photo_b": "restaurant_in.jpg"
"photo_b": "restaurant_in.jpg",
"email": "restauracia.podslivkou@gmail.com",
"phone_number": "0928229120"
},
"files": [
{
"name": "Podrobnosti",
"format": ".txt",
"description": "toto je jpg test file"
"description": "Vybavenie, služby a kontakt"
}, {
"name": "Jedálny lístok",
"format": ".pdf",
"description": "jedalny listok"
"description": ""
}
]
}

View File

@@ -6,17 +6,19 @@
"description_s": "Otvorené",
"description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 17:00\nSOB: zatvorené\nNED: 10:00-16:00",
"photo_s": "post_out.jpg",
"photo_b": "post_in.jpg"
"photo_b": "post_in.jpg",
"email": "slovenska.posta@gmail.com",
"phone_number": "0918221189"
},
"files1": [
{
"name": "Podrobnosti",
"format": ".txt",
"description": "toto je jpg test file"
"description": ""
}, {
"name": "Cenník",
"format": ".pdf",
"description": "toto je txt test file"
"description": ""
}
]
}

View File

@@ -6,17 +6,19 @@
"description_s": "Otvorené",
"description_l": "Otvorené nonstop\nOtváracie doby sa počas sviatkov môžu líšiť",
"photo_s": "plavaren_out.jpg",
"photo_b": "plavaren_in.jpg"
"photo_b": "plavaren_in.jpg",
"email": "",
"phone_number": "0322215297"
},
"files2": [
{
"name": "Služby a kontakt",
"format": ".txt",
"description": "toto je jpg test file"
"description": ""
}, {
"name": "Fotogaléria a cenník",
"format": ".pdf",
"description": "toto je txt test file"
"description": ""
}
]
}

View File

@@ -6,17 +6,19 @@
"description_s": "Otvorené",
"description_l": "Otváracie hodiny:\nUT-PIA: 08:00 - 16:00",
"photo_s": "muzeum_out.jpg",
"photo_b": "muzeum_in.jpg"
"photo_b": "muzeum_in.jpg",
"email": "pbmuzeum@gmail.com",
"phone_number": "0971294689"
},
"files3": [
{
"name": "Cenník",
"format": ".pdf",
"description": "toto je jpg test file"
"description": ""
}, {
"name": "Náhľad",
"format": ".pdf",
"description": "jedalny listok"
"description": "Nahľiadnite do expozície múzea"
}
]
}

View File

@@ -6,17 +6,19 @@
"description_s": "Otvorené",
"description_l": "Otváracie hodiny:\nnonstop",
"photo_s": "zeleznicna_stanica_out.jpg",
"photo_b": "zeleznicna_stanica_in.jpg"
"photo_b": "zeleznicna_stanica_in.jpg",
"email": "info@slovakrail.sk",
"phone_number": ""
},
"files4": [
{
"name": "Podrobnosti",
"format": ".txt",
"description": "toto je jpg test file"
"description": ""
}, {
"name": "Zľavy",
"format": ".pdf",
"description": "jedalny listok"
"description": ""
}
]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 354 KiB

View File

@@ -58,8 +58,6 @@ IP = get_my_ip()
ID = filesystem["ID"]
location = filesystem["location"]
time_to_save = settings["time_to_save"]
settings["location"]
settings["ID"]
app = FastAPI() # init of FastAPI
origins = ["*", ]
@@ -90,7 +88,14 @@ if ID not in heartbeat_table["ID"]:
heartbeat_table["location"].append(location)
heartbeat_table["file_system"].append(filesystem)
heartbeat_table["last_heartbeat"].append(time_to_heartbeat)
else:
index_server_run = heartbeat_table["ID"].index(ID)
heartbeat_table["IP"][index_server_run] = IP
heartbeat_table["location"][index_server_run] = location
heartbeat_table["file_system"][index_server_run] = filesystem
heartbeat_table["last_heartbeat"][index_server_run] = time_to_heartbeat
heartbeat_table["my_ip"] = IP
class ServerTable(BaseModel): # table of content for heartbeat request
ID: list
@@ -98,6 +103,7 @@ class ServerTable(BaseModel): # table of content for heartbeat request
location: list
file_system: list
last_heartbeat: list
my_ip: str
class Sensor(BaseModel):
@@ -117,7 +123,8 @@ def read_root():
@app.post("/heartbeat")
def heartbeat(s_table: ServerTable, request: Request):
log.message(f"server requested heartbeat {request.client.host}:{request.client.port}")
global heartbeat_table
log.message(f"server requested heartbeat {s_table.my_ip}:{request.client.port}")
log.debug(f"Recieved server table: {s_table}")
try:
@@ -133,8 +140,8 @@ def heartbeat(s_table: ServerTable, request: Request):
elif server_id == ID:
log.debug(f"Updated my heartbeat from {s_table.last_heartbeat[position]} to {time_to_heartbeat}")
heartbeat_table["last_heartbeat"][heartbeat_table["ID"].index(ID)] = time_to_heartbeat
else:
log.message(f"Heartbeat from new server:\n ID: {server_id} IP: {request.client}")
elif server_id not in heartbeat_table["ID"]:
log.message(f"Heartbeat from new server:\n ID: {server_id} IP: {s_table.my_ip}")
heartbeat_table["ID"].append(int(s_table.ID[position]))
heartbeat_table["IP"].append(s_table.IP[position])
heartbeat_table["location"].append(s_table.location[position])
@@ -143,10 +150,12 @@ def heartbeat(s_table: ServerTable, request: Request):
log.debug(f"Created {server_id}`s heartbeat: {s_table.last_heartbeat[position]}")
except Exception as error:
log.error(f"heartbeat > {error}")
if heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)] in offline:
offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)])
log.warning(f"{request.client.host} gone online")
try:
if heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)] in offline:
offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)])
log.warning(f"{s_table.my_ip} gone online")
except Exception as error:
log.error(f"heartbeat > {error}")
return heartbeat_table, {"ID": ID, "file_system": filesystem, "location": location}
@@ -170,7 +179,6 @@ def get_sensors(IDx: int, request: Request):
@app.get("/files/{IDx}/{file}")
def get_file(IDx: int, file: str, request: Request):
log.debug(f"""{request.client} requested {file} from {"this server" if IDx == ID else f"id {IDx}"}""")
server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]
if IDx == ID:
if os.path.isfile(f"files/{file}"):
return FileResponse(f"files/{file}")
@@ -181,6 +189,7 @@ def get_file(IDx: int, file: str, request: Request):
log.warning(f"{request.client} tried to access id ({IDx}) that does not exist.")
return f"ERROR: {IDx} does not exist."
else:
server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]
if os.path.isdir(f"cache/{IDx}"):
if os.path.isfile(f"cache/{IDx}/{file}"):
with open(f"cache/{IDx}/{file}", "rb") as compared_file:
@@ -213,7 +222,7 @@ def get_file(IDx: int, file: str, request: Request):
@app.post("/{IDx}/update_sensor")
def update_sensors(data: Sensor, request: Request, IDx: int):
global sensors
if IDx == ID:
if IDx == ID or IDx == -1:
if data.name in sensors:
if not data.value:
log.message(f"{request.client.host} removed sensor {data.name}")
@@ -225,10 +234,12 @@ def update_sensors(data: Sensor, request: Request, IDx: int):
log.warning(f"{request.client} created new sensor.\n SENSOR: {data}")
sensors[data.name] = data.value
return f"Successfuly made new sensor"
else:
elif IDx in heartbeat_table["ID"]:
r = requests.post(f"""http://{heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]}:8000/{IDx}/update_sensor""",
json={"name": data.name, "value": data.value})
return r.text
else:
return f"ERROR: server {IDx} does not exist."
@app.get("/compare/{file}")

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

39
website/WikiSpot.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="appjs.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<div id="downloadHolder">
<a href=""></a><div id="appDownload">SŤIAHNUŤ <i class="fa fa-download"></i></div></a>
<img src="wikispotphone.png" alt="" id="phoneImg">
</div>
</body>
</html>

View File

@@ -4,6 +4,8 @@ header {
}
body {
background-image: url(header-background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
user-select: none;
}
@@ -14,6 +16,7 @@ body {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
}
.item {
list-style: none;
@@ -25,6 +28,7 @@ body {
margin-left: 1.3rem;
}
.itemImg {
cursor: pointer;
margin-right: auto;
margin-left: 1.3rem;
}
@@ -34,7 +38,7 @@ body {
font-size: 20px;
}
.list li:hover {
color: chartreuse;
color: rgba(255, 255, 255, 0.418);
transition: color 0.2s ease-in-out;
}
.wsImg {
@@ -58,6 +62,9 @@ body {
display: none;
}
@media (max-width: 800px) {
#githubImg {
display: none;
}
.item {
display: none;
}
@@ -84,31 +91,57 @@ body {
}
/* ---------- Hlavná stránka ---------- */
#downloadHolder {
margin-top: 5%;
margin-left: 25%;
margin-top: 10px;
margin-left: 35%;
display: flex;
justify-content: space-between;
width: 550px;
align-items: center;
}
#download {
#appDownload {
cursor: pointer;
background-color: none;
color: white;
border: 4px white solid;
border-radius: 50px;
margin-right: 0px;
width: auto;
height: 20px;
height: 30px;
padding: 10px;
position: static;
font-size: 20px;
font-size: 25px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
transition: background-color 0.5s, color 0.5s;
}
#download:hover {
#appDownload:hover {
background-color: white;
color: rgb(47, 40, 150) ;
}
#phoneImg {
width: 350px;
height: auto;
}
#conHolder {
width: 500px;
height: 500px;
margin-top: 15%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
/* ---------- O projekte ---------- */
#projectInfo {
position: absolute;
top: 250px;
left: 450px;
background-color: rgba(255, 255, 255, 0.322);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(255, 255, 255);
padding: 15px;
border-radius: 20px;
width: 470px;
height: auto;
font-size: 40px;
}

View File

@@ -7,16 +7,17 @@
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
@@ -29,9 +30,7 @@
</nav>
</header>
<body>
<div id="downloadHolder">
<div id="download">SŤIAHNUŤ &#9660</div>
<div id="phone"><img src="samsung1.png" alt="" id="phoneImg"></div>
</div>
<article id="projectInfo"></article>
<script src="about.js"></script>
</body>
</html>

37
website/WikiSpotWS.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>WikiSpot</title>
<script src="appjs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<script src="desc_short.js"></script>
</body>
</html>

10
website/about.js Normal file
View File

@@ -0,0 +1,10 @@
$(document).ready(function(){
$.get("test.txt", function(data){
console.log(data);
let data_string = data.toString();
data_string.replace(new RegExp("\\\\n", "g"), "*");
console.log(JSON.stringify(data_string));
$("#projectInfo").html(data_string);
});
});

View File

@@ -6,6 +6,8 @@ body {
background-image: url(header-background.jpg);
margin: 0;
user-select: none;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* ---------- Navigačná lišta (navbar) ---------- */
.list {
@@ -25,6 +27,7 @@ body {
margin-left: 1.3rem;
}
.itemImg {
cursor: pointer;
margin-right: auto;
margin-left: 1.3rem;
}
@@ -34,15 +37,9 @@ body {
font-size: 20px;
}
.list li:hover {
color: chartreuse;
color: rgba(75, 61, 204, 0.459);
transition: color 0.2s ease-in-out;
}
.wsImg {
border-radius: 10px;
}
.wsImg:first-child {
margin-right: auto;
}
/* ---------- Burger Menu ---------- */
.burger {
cursor: pointer;
@@ -161,22 +158,31 @@ body {
flex-direction: row;
justify-content: flex-end;
}
.klol {
.short_description {
width: 300px;
}
.list_item_holder {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-direction: column;
justify-content: space-between;
margin-top: 5px;
margin-right: 71px;
margin-bottom: 10px;
margin-left: 10px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.constantImg {
grid-area: obrazok;
.sens_style_heat {
grid-area: senzory;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
display: flex;
width: 300px;
height: 300px;
top: 250px;
left: 50px;
transition: display 1s 1s;
align-items: center;
flex-direction: column;
}
.wsImg {
border-radius: 10px;
margin-right: auto;
}
.mystyle {
transform: rotate(180deg);
@@ -194,24 +200,66 @@ body {
transition: transform 0.5s ease-in-out;
}
/* ---------- Grid Layout ---------- */
.obrazok {
.obrazok_small {
grid-area: obrazok;
width: 500px;
display: flex;
align-items: center;
flex-direction: column;
width: 100px;
height: 100px;
margin-left: 25px;
border-radius: 10px;
transition: display 1s 1s;
}
.obrazok_big {
grid-area: obrazok;
width: 400px;
height: 300px;
margin-left: 0px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.text_small {
grid-area: description;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 25px;
}
.text {
.text_big {
grid-area: description;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 25px;
}
.senzory {
.sensors_small {
width: 140px;
grid-area: senzory;
display: flex;
justify-content: center;
flex-direction: column;
}
.info {
.sensors_big {
grid-area: senzory;
display: flex;
justify-content: center;
flex-direction: column;
}
.info_small {
grid-area: info;
}
.info_big {
grid-area: info;
}
.listHide {
display: none;
background: #ffffff;
}
.expand {
display: grid;
@@ -227,6 +275,7 @@ body {
border-radius: 10px;
height: 600px;
width: 550px;
background-color: white;
}
.big {
display: grid;
@@ -238,6 +287,7 @@ body {
"description info";
position: absolute;
border-radius: 10px;
margin-top: -12px;
left: 650px;
top: 117px;
height: 700px;
@@ -248,8 +298,48 @@ body {
.appear {
display: flex;
}
.imgBig {
margin-left: 25px;
margin-top: 25px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.wsImg {
width: 500px;
height: 350px;
}
/* ---------- Responzívnosť (media tag) ---------- */
@media (max-width: 1000px) {
@media (min-width: 1350px) {
.arrow {
display: none;
}
.wsList {
width: 481px;
}
}
@media (max-width: 1550px) {
.obrazok_big {
width: 400px;
height: 250px;
}
.big {
width: 800px;
height: 600px;
}
}
@media (max-width: 1450px) {
.obrazok_big {
width: 350px;
height: 200px;
}
.big {
width: 700px;
height: 500px;
}
}
@media (max-width: 1350px) {
.big {
display: none;
}
@@ -262,7 +352,6 @@ body {
visibility: visible;
}
.burgerList {
display: none;
flex-direction: column;
align-items: center;
margin-right: 30px;
@@ -275,4 +364,53 @@ body {
.bItem {
margin-top: 10px;
}
}
@media (max-width: 570px) {
.wsList {
background: white;
width: 500px;
height: 100px;
border-radius: 10px;
margin-left: 0px;
margin-top: 5px;
}
.wsImg {
width: 120px;
border-radius: 10px;
margin-right: auto;
}
.title0 {
font-size: 15px;
}
.short_description {
font-size: 15px;
}
.list_item_holder {
margin-right: 20px;
}
#arrow0 {
margin-top: 30px;
font-size: 40px;
width: 40px;
height: 40px;
}
.expand {
margin-left: 0px;
width: 500px;
height: 550px;
}
}
@media (max-width: 360px) and (max-height: 640px) {
.wsList {
background: white;
width: 360px;
height: 100px;
border-radius: 10px;
margin-left: 0px;
margin-top: 5px;
}
.list_item_holder {
margin-right: -10px;
}
}

5
website/appjs.js Normal file
View File

@@ -0,0 +1,5 @@
function bmenu() {
var burger = document.getElementById("bonger");
burger.classList.toggle("appear")
}

119
website/desc_short.js Normal file
View File

@@ -0,0 +1,119 @@
$(document).ready(function() {
let base_url = "http://192.168.1.105:8000/";
let ids_list = [];
$.get("ip.txt", function(data) {
console.log(data);
base_url = `http://${data}:8000/`;
init_wesite();
});
function append_element(image_urls, descriptions, title, id) {
ids_list.push(id);
let template = `
<div class="wsList hey">
<div></div>
<img src="${image_urls[0]}" alt="#" class="obrazok_small">
<div id="list_item_holder${id}" class="list_item_holder">
<div class="title${id}">${title}</div>
<div class="short_description">${descriptions[0]}</div>
</div>
<div id="arrow${id}" class="arrow">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand${id}" class="listHide">
<img src="${image_urls[1]}" alt="#" class="obrazok_big">
<div class="text_small">${descriptions[1]}</div>
<div id="sensors_small${id}" class="sensors_small">
</div>
<div class="info_small"></div>
</div>
<!-- Veľké zobrazenie -->
<div id="big${id}" class="big">
<div class="imgBig"><img class="wsImg" src="${image_urls[1]}" alt="#"></div>
<div class="text_big">${descriptions[1]}</div>
<div id="sensors_big${id}" class="sensors_big">
</div>
<div class="info_big"></div>
</div>`;
$("body").append(template);
$.get(`${base_url}${id}/sensors`, function(data1) {
Object.keys(data1).forEach(function(key) {
let value = data1[key];
// removing [translate]-
if (key.startsWith("[translate]-")) {
key = key.slice(12);
}
if (value.startsWith("[translate]-")) {
value = value.slice(12);
}
// appending to DOM
$(`#sensors_small${id}`).append(`<p class="sens_style_heat">${key}: ${value}</p>`);
$(`#sensors_big${id}`).append(`<p class="sens_style_heat">${key}: ${value}</p>`);
});
});
$(".arrow").click(function() {
let id = this.id;
id = id.slice(id.length-1, id.length);
$(`#arrow${id}`).toggleClass("mystyle");
$(`#listExpand${id}`).toggleClass("expand");
id.a();
});
$(".list_item_holder").click(function() {
let id = this.id;
id = id.slice(id.length-1, id.length);
clear_big_display();
$(`#big${id}`).show();
});
}
function clear_big_display(){
ids_list.forEach(function(id) {
$(`#big${id}`).hide();
});
}
function init_wesite() {
$.get(`${base_url}devices_list`, function(data) {
let connected_id = data[0]["connected_id"];
let urls = ["", ""];
let descriptions = ["", ""];
let title = "";
let query = [[]];
for (let i = 1; i < data.length; i++) {
let spot_data = data[i];
let spot_id = spot_data["ID"]
urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`,
`${base_url}files/${spot_id}/${spot_data["description"]["photo_b"]}`];
descriptions = [spot_data["description"]["description_s"],
spot_data["description"]["description_l"]];
title = spot_data["description"]["title"];
if (spot_id == connected_id) {
query[0] = [urls, descriptions, title, parseInt(spot_id)];
} else {
query.push([urls, descriptions, title, parseInt(spot_id)]);
}
}
for (let i = 0; i < query.length; i++) {
append_element(query[i][0], query[i][1], query[i][2], query[i][3]);
}
})
}
})

View File

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

1
website/ip.txt Normal file
View File

@@ -0,0 +1 @@
localhost

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
website/wikispotphone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 757 KiB

View File

@@ -1,15 +0,0 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

View File

@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
</head>
<body>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
</body>
</html>

View File

@@ -1,158 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotLoc.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="desc_short.js"></script>
<script src="click1.js"></script>
<script src="sensors.js"></script>
</head>
<body>
<header>
<img src="wikispot-white.png" alt="wikispot" id="logo" usemap="#navhome">
<map name="navhome">
<area shape="rect" coords="20, 15, 255, 100" href="http://www.spspb.sk/kontakt.html?page_id=91" alt="home">
</map>
<nav>
<ul id="container">
<li id="home" onclick="location.href = 'WikiSpot.html';"><a href="WikiSpot.html">DOMOV</a></li>
<li id="about" onclick="location.href = 'WikiSpotLoc.html';"><a href="WikiSpotLoc.html">WIKISPOT</a></li>
<li id="project" onclick="location.href = 'WikiSpotPro.html';"><a href="WikiSpotPro.html">O PROJEKTE</a></li>
<li id="contact" onclick="location.href = 'http://www.spspb.sk/kontakt.html?page_id=91';"><a href="http://www.spspb.sk/kontakt.html?page_id=91">KONTAKT</a></li>
</ul>
<div class="nav">
<label for="check" id="bmenu">&#9776</label>
<input type="checkbox" id="check">
<table class="menu">
<tr><td><a href="WikiSpot.html" class="expandable">DOMOV</a></td></tr>
<tr><td><a href="WikiSpotLoc.html" class="expandable">WIKISPOT</a></td></tr>
<tr><td><a href="WikiSpotPro.html" class="expandable">PROJEKT</a></td></tr>
<tr><td><a href="#" class="expandable">KOTAKT</a></td></tr>
</table>
</div>
</nav>
</header>
<!--Device select-->
<input type="radio" id="checkExp1" name="pick" class="pickNone">
<input type="radio" id="checkExp2" name="pick" class="pickNone">
<!--1st device-->
<label for="checkExp1">
<section id="wsData1">
<div id="wsBackGround1" class="round_s"></div>
<section id="myData"></section>
<section id="myTitle"></section>
<div id="imgData1">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsimage1" style="width: 100px; height: 100px;">
</div>
<input type="checkbox" id="checkDesc1" class="none">
<label for="checkDesc1" id="descIcon1" onclick="lul1()"><div id="fuckme1">&#9660</div></label>
<div id="dataExpand1"></div>
</section>
</label>
<section id="wsData1Exp" class="round">
<article id="wsData1desc_l">
<div id="desc_l1"></div>
</article>
<article>
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsData1img" id="wsData1img" style="height: 300px; width: 500px;">
</article>
</section>
<!--2nd device-->
<label for="checkExp2">
<section id="wsData2">
<div id="wsBackGround2" class="round_s"></div>
<section id="myData2"></section>
<section id="myTitle2"></section>
<div id="imgData2">
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage2" style="width: 100px; height: 100px;">
</div>
<label for="checkDesc2" id="descIcon2" onclick="lul2()"><div id="fuckme2">&#9660</div></label>
<input type="checkbox" id="checkDesc2" class="none">
<div id="dataExpand2" class="round_s"></div>
</section>
</label>
<section id="wsData2Exp" class="round">
<article id="wsData2desc_l">
<div id="desc_l2"></div>
</article>
<article>
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData2img" id="wsData2img" style="height: 300px; width: 500px;">
</article>
</section>
</body>
</html>
<!--3rd device-->
<label for="checkExp3">
<section id="wsData3">
<div id="wsBackGround3" class="round_s"></div>
<section id="myData3"></section>
<section id="myTitle3"></section>
<div id="imgData3">
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage3" style="width: 100px; height: 100px;">
</div>
<label for="checkDesc3" id="descIcon3" onclick="lul2()"><div id="fuckme3">&#9660</div></label>
<input type="checkbox" id="checkDesc3" class="none">
<div id="dataExpand3"></div>
</section>
</label>
<section id="wsData3Exp" class="round">
<article id="wsData3desc_l">
<div id="desc_l3"></div>
</article>
<article>
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData3img" id="wsData3img" style="height: 300px; width: 500px;">
</article>
</section>
</body>
</html>
<!--4th device-->
<label for="checkExp4">
<section id="wsData4">
<div id="wsBackGround4" class="round_s"></div>
<section id="myData4"></section>
<section id="myTitle4"></section>
<div id="imgData4">
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage4" style="width: 100px; height: 100px;">
</div>
<label for="checkDesc4" id="descIcon4" onclick="lul4()"><div id="fuckme4">&#9660</div></label>
<input type="checkbox" id="checkDesc4" class="none">
<div id="dataExpand4"></div>
</section>
</label>
<section id="wsData4Exp" class="round">
<article id="wsData4desc_l">
<div id="desc_l4"></div>
</article>
<article>
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData4img" id="wsData4img" style="height: 300px; width: 500px;">
</article>
</section>
</body>
</html>
<!--5th device-->
<label for="checkExp5">
<section id="wsData5">
<div id="wsBackGround5" class="round_s"></div>
<section id="myData5"></section>
<section id="myTitle5"></section>
<div id="imgData5">
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage5" style="width: 100px; height: 100px;">
</div>
<label for="checkDesc5" id="descIcon5" onclick="lul5()"><div id="fuckme5">&#9660</div></label>
<input type="checkbox" id="checkDesc5">
<div id="dataExpand5"></div>
</section>
</label>
<section id="wsData5Exp" class="round">
<article id="wsData5desc_l">
<div id="desc_l5"></div>
</article>
<article>
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData5img" id="wsData5img" style="height: 300px; width: 500px;">
</article>
</section>
</body>
</html>

View File

@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
</head>
<body>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
</body>
</html>

View File

@@ -1,146 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>Flextest</title>
<script src="appjs.js"></script>
<!-- <script src="click1.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<!-- 2. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList2">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey2">Kniznica</div>
<div id="hou2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow2" class="arrow" onclick="onclick2()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand2" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 3. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList3">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey3">Kniznica</div>
<div id="hou3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow3" class="arrow" onclick="onclick3()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand3" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 4. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList4">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey4">Kniznica</div>
<div id="hou4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow4" class="arrow" onclick="onclick4()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand4" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 5. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList5">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey5">Kniznica</div>
<div id="hou5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow5" class="arrow" onclick="onclick5()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand5" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<script src="desc_short.js"></script>
</body>
</html>

View File

@@ -1,44 +0,0 @@
function onclick1() {
var click = document.getElementById("arrow1");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand1");
expand.classList.toggle("expand");
var appear = document.getElementById("roko1");
appear.classList.toggle("appear");
}
function onclick2() {
var click = document.getElementById("arrow2");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand2");
expand.classList.toggle("expand");
var appear = document.getElementById("roko2");
appear.classList.toggle("appear");
}
function onclick3() {
var click = document.getElementById("arrow3");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand3");
expand.classList.toggle("expand");
var appear = document.getElementById("roko3");
appear.classList.toggle("appear");
}
function onclick4() {
var click = document.getElementById("arrow4");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand4");
expand.classList.toggle("expand");
var appear = document.getElementById("roko4");
appear.classList.toggle("appear");
}
function onclick5() {
var click = document.getElementById("arrow5");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand5");
expand.classList.toggle("expand");
var appear = document.getElementById("roko5");
appear.classList.toggle("appear");
}
function bmenu() {
var burger = document.getElementById("bonger");
burger.classList.toggle("appear")
}

View File

@@ -1,118 +0,0 @@
// fetch("http://192.168.1.105:8000/devices_list")
// .then(function(response){
// return response.json();
// })
// .then(function(data){
// appendData(data);
// })
// .catch(function(err){
// console.log(err);
// });
// function appendData(data){
// console.log(data);
// console.log(data[1]["files"][0]);
// var myJson = JSON.stringify(data[1]["description"]["description_s"]);
// var myJson1 = JSON.stringify(data[1]["description"]["title"]);
// var myJson2 = JSON.stringify(data[1]["description"]["description_l"]);
// var uJson = myJson.replace(/\"/g, "");
// var str = (uJson);
// var str_esc = escape(str);
// console.log(str_esc + "<br>" + myJson1);
// console.log(unescape(str_esc));
// var mainContainer = document.getElementById("hou1");
// var div = document.createElement("div");
// div.setAttribute("id", "hou");
// div.innerHTML = unescape(str_esc);
// mainContainer.appendChild(div);
// var mainContainer1 = document.getElementById("hey1");
// var uJson1 = myJson1.replace(/\"/g, "");
// var div1 = document.createElement("div");
// div1.setAttribute("id", "hey");
// div1.innerHTML = unescape(escape(uJson1));
// var uJson1 = myJson1.replace(/\"/g, "");
// mainContainer1.appendChild(div1);
// }
$(document).ready(function() {
let urls = ["http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg"];
let descriptions = ["here", "there"];
let n = 1;
function append_element(urls, descriptions, n) {
let template = `<div class="wsList hey">
<div ></div>
<img src="${urls[0]}" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey1"></div>
<div id="hou1"></div>
</div>
<div id="arrow${n}" class="arrow" onclick="onclick${n}()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand${n}" class="listHide">
<img src="${urls[1]}" alt="#" class="constantImg">
<div class="text">${descriptions[0]}</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="${urls[2]}" alt="#">
<div class="text">${descriptions[1]}</div>
</div>`;
$("body").append(template);
}
append_element(urls, descriptions, n);
$.get("http://192.168.1.105:8000/devices_list", function(data) {
console.log(data);
var myJson = JSON.stringify(data[1]["description"]["description_s"]);
var myJson1 = JSON.stringify(data[1]["description"]["title"]);
console.log(myJson);
console.log(myJson1);
uJson = myJson.replace(/\"/g, "");
var str = (uJson);
var str_esc = escape(str);
console.log(str_esc + "<br>" + myJson);
console.log(unescape(str_esc));
var main = document.getElementById("hou1");
var div = document.createElement("div");
div.setAttribute("id", "hou");
div.innerHTML = unescape(str_esc);
main.appendChild(div);
var sub = document.getElementById("hey1");
var uJson1 = myJson1.replace(/\"/g, "");
var div1 = document.createElement("div");
div1.setAttribute("id", "hey");
div1.innerHTML = unescape(escape(uJson1));
sub.appendChild(div1);
ID = 0;
$.get(`http://192.168.1.105:8000/${ID}/sensors`, function(data1) {
console.log(data1);
var sens = JSON.stringify(data1["teplota"]);
console.log(sens);
var uSens = sens.replace(/\"/g, "");
var heat = document.getElementById("heat");
var div2 = document.createElement("div");
div2.setAttribute("id", "hot");
div2.innerHTML = unescape(escape(uSens));
heat.appendChild(div2);
})
})
})

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB