commit 8523e7d01ea5fc057251c208f94f9a8db2a41eb7 Author: E. van Aubel Date: Thu Oct 24 16:46:34 2024 +0200 first clean transfer to gitea diff --git a/.env_example b/.env_example new file mode 100644 index 0000000..bd302b9 --- /dev/null +++ b/.env_example @@ -0,0 +1,4 @@ +DB_HOST= +DB_SCHEMA= +DB_USER= +DB_PASSWORD= \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2eea525 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.env \ No newline at end of file diff --git a/onderzoeksverslag.txt b/onderzoeksverslag.txt new file mode 100644 index 0000000..c93f07b --- /dev/null +++ b/onderzoeksverslag.txt @@ -0,0 +1,15 @@ +Onderzoeksverslag: + +Ik ben begonnen met het verkennen van verschillende mogelijkheden om een Bluetooth-verbinding op te zetten als output, zodat gebruikers foto's naar mijn website kunnen sturen. Ik heb verschillende Bluetooth-modules en bibliotheken onderzocht, zoals pybluez in Python en bluetooth.js in JavaScript. Helaas kon ik geen betrouwbare oplossing vinden die werkte met alle apparaten en besturingssystemen. + +Vervolgens richtte ik me op het hosten van de website met behulp van Flask en Python. Ik wilde de volledige controle hebben over de host en de flexibiliteit om de functionaliteiten aan te passen. Na wat experimenteren merkte ik echter dat het opzetten van een Flask-webserver en het implementeren van de vereiste functionaliteiten meer tijd kostte dan ik had verwacht. + +Om niet achter te raken op schema, heb ik besloten om een database aan te maken in MaCloud en de website daar te hosten. Dit gaf me de mogelijkheid om me volledig te richten op de front-end ontwikkeling. Ik gebruikte een combinatie van PHP en Javascript om de functionaliteiten te implementeren. PHP werd gebruikt om met de database te communiceren en de gegevens te verwerken, terwijl Javascript werd gebruikt voor de interactieve elementen en het gebruik van de WebCamAPI. + +Om de afbeeldingen op te slaan, besloot ik gebruik te maken van Uguu, een externe filehosting service. Hierdoor kon ik me richten op de kernfunctionaliteiten van de website zonder me zorgen te hoeven maken over het opzetten van een eigen uploadsysteem. + +Hoewel ik tevreden ben met de resultaten tot nu toe, zie ik zeker nog ruimte voor verbetering. Een idee dat ik had was het toevoegen van een touchscreen display als input, zodat gebruikers de website kunnen bedienen met behulp van een grafische interface. Dit zou een intuïtievere manier bieden om foto's te selecteren en te versturen. + +Daarnaast overweeg ik om een output te implementeren in de vorm van een QR-code of afbeelding. Hierdoor kunnen gebruikers gemakkelijk de gegenereerde afbeelding delen met anderen of deze opslaan op hun apparaat. + +Kortom, hoewel ik mijn oorspronkelijke doelen niet helemaal binnen de gestelde tijd heb kunnen bereiken, ben ik toch tevreden met de resultaten. Er zijn echter nog vele mogelijkheden voor verbetering en uitbreiding, en ik kijk ernaar uit om deze in de toekomst te verkennen. \ No newline at end of file diff --git a/public/assets/js/appWebcam.js b/public/assets/js/appWebcam.js new file mode 100644 index 0000000..c6be7ef --- /dev/null +++ b/public/assets/js/appWebcam.js @@ -0,0 +1,86 @@ +import { WebCamHelper } from "./webcamhelper.js"; + +class WebCamApp { + constructor() { + this.imageForm = document.getElementById("imageForm"); + this.downloadlink = document.getElementById("link"); + this.button = document.querySelector('input[type="submit"]'); + this.qrcode = document.getElementById("qrcode"); + this.canvas_id = document.getElementById("canvas"); + this.timerDisplay = document.createElement("div"); + this.timerDisplay.classList.add("timer"); + this.linkuguu = document.getElementById("link_uguu"); + this.restartbtn = document.getElementById("restart-btn"); + this.webapi = new WebCamHelper(); + } + + capturePhoto() { + this.timerDisplay.innerHTML = "Timer: 5 seconds"; + let count = 5; + const timer = setInterval(() => { + count--; + this.timerDisplay.innerHTML = `Timer: ${count} seconds`; + if(count === 0){ + clearInterval(timer); + this.timerDisplay.style.display = "none"; + this.webapi.GrabFrame(async (imageBitmap) => { + let imageBlob = await this.webapi.GrabFrameToCanvas(imageBitmap, "canvas"); + this.sendBlob(imageBlob); + }); + } + }, 1000); + } + + sendBlob(imageBlob) { + let formData = new FormData(); + formData.append("image", imageBlob, "image.png"); + let options = { + method: "POST", + body: formData, + }; + + fetch("imagereceive.php", options) + .then((response) => response.json()) + .then((json) => this.showLink(json)); + } + + showLink(json) { + this.downloadlink.innerHTML = json.downloadlink; + document.getElementById("link").href = json.downloadlink; + this.linkuguu.innerHTML = json.upload_path; + this.linkuguu.href = json.upload_path; + let qr_link = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${this.linkuguu.innerHTML}`; + fetch(qr_link) + .then((response) => response.blob()) + .then((blob) => { + this.qrcode.src = URL.createObjectURL(blob); + }); + this.button.style.display = "none"; + this.qrcode.style.display = "block"; + this.downloadlink.style.display = "block"; + this.canvas_id.style.display = "block"; + this.linkuguu.style.display = "block"; + this.restartbtn.style.display = "block"; + } + + takePhotoClicked() { + if (this.webapi.ready) { + this.capturePhoto(); + } + } + + init() { + document.body.appendChild(this.timerDisplay); + this.webapi.startApi(); + this.imageForm.addEventListener("submit", (e) => { + e.preventDefault(); + this.takePhotoClicked(); + }); + this.restartbtn.addEventListener("click", (e) => { + window.location.reload(true); + }); + } +} + +let app = new WebCamApp(); +app.init(); \ No newline at end of file diff --git a/public/assets/js/readme.md b/public/assets/js/readme.md new file mode 100644 index 0000000..fd3d7c4 --- /dev/null +++ b/public/assets/js/readme.md @@ -0,0 +1,96 @@ +# Code Documentatie appWebcam.js + +Deze code is verantwoordelijk voor het beheren van een webcamera-applicatie. Het maakt gebruik van de WebCamHelper klasse om foto's te maken met behulp van de webcam van de gebruiker en deze naar een server te uploaden. + +## Functies + +- `capturePhoto()` : Deze functie start een timer van 5 seconden voordat een foto wordt gemaakt met behulp van de `GrabFrame` functie van de WebCamHelper klasse. +- `sendBlob(imageBlob)` : Deze functie stuurt de gemaakte foto naar de server door middel van een HTTP POST-verzoek. Het maakt gebruik van de `fetch` functie om het verzoek uit te voeren. +- `showLink(json)` : Deze functie wordt aangeroepen nadat de foto succesvol naar de server is geüpload. Het toont de downloadlink en de QR-code van de foto op de pagina. +- `takePhotoClicked()` : Deze functie wordt aangeroepen wanneer de gebruiker op de knop "Take Photo" klikt. Het controleert of de webcamera klaar is en roept vervolgens de `capturePhoto` functie aan. +- `init()` : Deze functie initialiseert het webcam-applicatie door de nodige eventlisteners toe te voegen en de WebCamHelper klasse te starten. + +## Variabelen + +- `imageForm` : Het HTML-formulier voor het verzenden van de foto naar de server. +- `downloadlink` : Het HTML-element waarin de downloadlink wordt weergegeven. +- `button` : Het HTML-element van de knop "Take Photo". +- `qrcode` : Het HTML-element voor het weergeven van de QR-code van de foto. +- `canvas_id` : Het HTML-element van het canvas voor het tonen van de foto. +- `timerDisplay` : Het HTML-element voor het weergeven van de timer tijdens het maken van de foto. +- `linkuguu` : Het HTML-element voor het weergeven van de uploadlink van de foto. +- `restartbtn` : Het HTML-element van de knop "Restart" voor het opnieuw starten van het webcam-applicatie. +- `webapi` : Een instantie van de WebCamHelper klasse voor het beheren van de webcam-api. + +## Belangrijkste punten + +- De code maakt gebruik van de WebCamHelper klasse om toegang te krijgen tot de webcam van de gebruiker. +- Een timer van 5 seconden wordt gestart voordat een foto wordt gemaakt met behulp van de `GrabFrame` functie van de WebCamHelper klasse. +- De foto wordt geüpload naar de server met behulp van een HTTP POST-verzoek. +- De downloadlink en QR-code van de foto worden weergegeven op de pagina. +- De knop "Restart" zorgt ervoor dat de pagina opnieuw wordt geladen om het webcam-applicatie opnieuw te starten. + +## Voorbeeld gebruik + +```javascript +let app = new WebCamApp(); +app.init(); +app.takePhotoClicked(); +``` + +## Conclusie + +Deze code implementeert een webcamera-applicatie met behulp van de WebCamHelper klasse. Het maakt het mogelijk voor gebruikers om foto's te maken met hun webcam en deze naar een server te uploaden. De code maakt ook gebruik van HTML-elementen om de downloadlink en QR-code van de foto weer te geven op de pagina. + +# Code Documentatie webcamhelper.js - WebCamHelper + +Deze code bevat een helperklasse genaamd WebCamHelper, die functionaliteit biedt om een webcam te gebruiken in een webapplicatie. Het maakt gebruik van de MediaDevices API en Canvas API om beelden van de webcam vast te leggen en te verwerken. + +## Functies + +- `constructor()` : Maakt een nieuw WebCamHelper object aan en initialiseert de benodigde variabelen. +- `startApi()` : Start de MediaDevices API om toegang te krijgen tot de webcam. +- `GrabFrame(callback)` : Vangt een frame van de webcam en geeft het door aan de opgegeven callbackfunctie. +- `GrabFrameToCanvas(imageBitmap, canvasId)` : Verwerkt het verkregen frame naar een canvaselement met het opgegeven id en retourneert het resulterende beeld als een blob. +- `processFrame(imageBitmap, canvasId)` : Verwerkt het verkregen frame naar een canvaselement met het opgegeven id en retourneert het resulterende beeld als een blob. +- `drawOnCanvas(imageBitmap, canvasId)` : Tekent het verkregen frame op het canvas met het opgegeven id. +- `captureToBlob(canvasId)` : Maakt een blob van het canvas met het opgegeven id en retourneert deze. +- `getStream()` : Geeft de huidige mediastream van de webcam terug. + +## Variabelen + +- `video` : Het videelement waarin de beelden van de webcam worden weergegeven. +- `stream` : De huidige mediastream van de webcam. +- `ready` : Een boolean die aangeeft of de webcam klaar is voor gebruik. +- `mediaDevices` : De MediaDevices API van de browser. + +## Belangrijkste punten + +- De `startApi` functie begint met het ophalen van toegang tot de webcam met behulp van `getUserMedia` en voegt de stroom toe aan het videobeeld. +- De `GrabFrame` functie vraagt een frame aan de MediaStream en geeft het door aan de opgegeven callbackfunctie. +- De `GrabFrameToCanvas` functie verwerkt het frame naar een canvas met het opgegeven id en retourneert het resultaat als een blob. +- De `drawOnCanvas` functie tekent het frame op het canvas met het opgegeven id. +- De `captureToBlob` functie maakt een blob van het canvas met het opgegeven id en retourneert deze. +- Het `canvasId` parameter in de functies verwijst naar het id van het canvaselement waarop het beeld moet worden weergegeven. + +## Voorbeeld gebruik + +```javascript +// Maak een nieuw WebCamHelper object aan +let webcam = new WebCamHelper(); + +// Start de webcam API +webcam.startApi(); + +// Vang een frame van de webcam en verwerk het naar een canvas met "canvas" als id +webcam.GrabFrame(async (imageBitmap) => { + let imageBlob = await webcam.GrabFrameToCanvas(imageBitmap, "canvas"); + // Doe iets met de resulterende blob +}); + +// Andere code hier... +``` + +## Conclusie + +Deze code bevat een helperklasse genaamd WebCamHelper, die functionaliteit biedt om een webcam te gebruiken in een webapplicatie. Hiermee kunnen beelden van de webcam worden vastgelegd, verwerkt en weergegeven op een canvaselement. \ No newline at end of file diff --git a/public/assets/js/webcamhelper.js b/public/assets/js/webcamhelper.js new file mode 100644 index 0000000..2a71aa5 --- /dev/null +++ b/public/assets/js/webcamhelper.js @@ -0,0 +1,83 @@ +export class WebCamHelper { + constructor() { + this.imageCapture = null; + this.mediaStream = null; + this.deviceInfosArray = []; + this.ready = false; + } + checkSecureContext() { + var isSecureOrigin = + location.protocol === "https:" || location.host === "localhost"; + if (!isSecureOrigin) { + alert( + "getUserMedia() must be run from a secure origin: HTTPS or localhost." + + "\n\nChanging protocol to HTTPS" + ); + location.protocol = "HTTPS"; + } + } + + startApi() { + this.checkSecureContext(); + navigator.mediaDevices + .enumerateDevices() + .then((deviceInfos) => { + this.deviceInfosArray = deviceInfos; + }) + .catch((error) => { + console.log("enumerateDevices() error: ", error); + }) + .then(() => { + this.getStream(); + }); + } + + getStream() { + if (this.mediaStream) { + this.mediaStream.getTracks().forEach((track) => { + track.stop(); + }); + } + let videoSource = [0].deviceId; + let constraints = { + video: { + deviceId: this.deviceInfosArray[0].deviceId + ? { exact: videoSource } + : undefined, + }, + }; + navigator.mediaDevices + .getUserMedia(constraints) + .then((stream) => { + this.gotStream(stream); + }) + .catch((error) => { + console.log("getUserMedia error: ", error); + }); + } + + gotStream(stream) { + console.log("getUserMedia() got stream: ", stream); + this.mediaStream = stream; + this.imageCapture = new ImageCapture(stream.getVideoTracks()[0]); + this.ready = true; + } + async GrabFrameToCanvas(imageBitmap, canvasid) { + this.canvas = document.getElementById(canvasid); + + console.log("Grabbed frame:", imageBitmap); + this.canvas.width = imageBitmap.width; + this.canvas.height = imageBitmap.height; + this.canvas.getContext("2d").drawImage(imageBitmap, 0, 0); + let imageBlob = await new Promise((resolve) => + this.canvas.toBlob(resolve, "image/png") + ); + return imageBlob; + } + + GrabFrame(complete) { + this.imageCapture.grabFrame().then(function (imageBitmap) { + complete(imageBitmap); + }); + } +} diff --git a/public/imagedownload.php b/public/imagedownload.php new file mode 100644 index 0000000..fe6c28f --- /dev/null +++ b/public/imagedownload.php @@ -0,0 +1,52 @@ +close(); + +function GetQueryResultsAssoc($result) +{ + $results = []; + if ($result) { + for ($i = 0; $i < $result->num_rows; $i++) { + $row = $result->fetch_assoc(); + array_push($results, $row); + } + } else { + die("Invalid Results"); + } + return $results; +}; + +function FindImage($conn, $id) +{ + if ($conn) { + try { + $q = "SELECT * FROM photos WHERE filename = ?"; + $stmt = $conn->prepare($q); + $stmt->bind_param("s", $filename); + $filename = "uploads/$id.png"; + $stmt->execute(); + $result = $stmt->get_result(); + $searchResults = GetQueryResultsAssoc($result); + return $searchResults; + } catch (Exception $ex) { + echo 'error during query' . $ex; + die("Invalid Image"); + } + } + return []; +}; + +if (sizeof($searchResults) == 1) { + $filename = $searchResults[0]['filename']; + $filepointer = fopen($filename, 'rb'); + header("Content-Type: image/png"); + header("Content-Length: " . filesize($filename)); + fpassthru($filepointer); + exit; +} else { + die("invalid file"); +} diff --git a/public/imagereceive.php b/public/imagereceive.php new file mode 100644 index 0000000..7643ab4 --- /dev/null +++ b/public/imagereceive.php @@ -0,0 +1,90 @@ +prepare('INSERT INTO photos (type, size, filename, link) VALUES (?, ?, ?, ?)'); + $stmt->bind_param('siss', $type, $size, $filename, $link); + $stmt->execute(); + $stmt->close(); +} + +function createLink($fileid){ + $link = 'https://' . $_SERVER['HTTP_HOST'] . '/ThroughTheFire/public/imagedownload.php?link=' . $fileid; + return $link; +} + +function deleteExpiredItems($conn) { + $currentDateTime = date('Y-m-d H:i:s'); + $expiredDateTime = date('Y-m-d H:i:s', strtotime('-3 hours')); + + $stmt = $conn->prepare('SELECT id, `filename` FROM photos WHERE uploadDateTime < ?'); + $stmt->bind_param('s', $expiredDateTime); + $stmt->execute(); + $stmt->bind_result($id, $filename); + var_dump($stmt); + + $deletedFiles = []; + print_r($deletedFiles); + while ($stmt->fetch()) { + $deletedFiles[] = $filename; + unlink($filename); + } + + $stmt->close(); + + if (!empty($deletedFiles)) { + $deletedFilesString = implode(', ', $deletedFiles); + $stmt = $conn->prepare('DELETE FROM photos WHERE id IN ('.implode(',', $deletedIds).')'); + $stmt->execute(); + $stmt->close(); + return 'Deleted files: '.$deletedFilesString; + } else { + return 'No files deleted.'; + } +} + +function UguuAPI($curl, $filename){ + curl_setopt($curl, CURLOPT_URL, "https://uguu.se/upload"); + curl_setopt($curl, CURLOPT_POST, true); + curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'); + $data = array("files[]" => new CurlFile($filename, "image/png", $filename)); + curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); + curl_setopt($curl, CURLOPT_POSTFIELDS, $data); + $response = curl_exec($curl); + $json_response = json_decode($response, true); + return $json_response['files'][0]['url']; +} + +$response=['succeeded' => false, 'message' => '', 'downloadlink' => null, 'upload_path' => null, 'deleted_files' => null]; + +$file = $_FILES['image']; +if ($file['error'] == 0){ + $fileid = uniqid(); + $link = createLink($fileid); + $filename = handlefile($file, $fileid); + $type = $file['type']; + $size = $file['size']; + insertImageInDb($conn,$type, $size, $filename, $link); + $response['succeeded'] = true; + $response['downloadlink'] = $link; + $response['upload_path'] = UguuAPI($curl, $filename); + $response['deleted_files'] = deleteExpiredItems($conn); +} +else{ + $response['message'] = 'error during upload ' . $file['error']; +} + +$json_response = json_encode($response); +echo $json_response; \ No newline at end of file diff --git a/public/readme.md b/public/readme.md new file mode 100644 index 0000000..b52b910 --- /dev/null +++ b/public/readme.md @@ -0,0 +1,185 @@ +# Code Documentatie ImageDownload.php - Afbeelding zoeken en downloaden + +Deze code zoekt naar een afbeelding in de database aan de hand van het meegegeven id. Als de afbeelding wordt gevonden, wordt de afbeelding weergegeven. + +## Functies + +- `database_connect()` : Maakt verbinding met de database en retourneert het databaseverbinding object. +- `GetQueryResultsAssoc($result)` : Converteert het resultaat van een database query naar een associatieve array. +- `FindImage($conn, $id)` : Zoekt naar een afbeelding in de database aan de hand van het meegegeven id. + +## Variabelen + +- `$id` : Het meegegeven id dat wordt gebruikt om de afbeelding te zoeken in de database. +- `$conn` : Het databaseverbinding object. +- `$searchResults` : Bevat de resultaten van het zoeken naar de afbeelding in de database. + +## Belangrijkste punten + +- De code maakt eerst verbinding met de database. +- Vervolgens wordt de functie `FindImage` aangeroepen om de afbeelding te zoeken. +- Als de afbeelding wordt gevonden, wordt de afbeelding weergegeven met behulp van de `fpassthru` functie in combinatie met de juiste headers. De afbeelding wordt gelezen vanuit het bestand met behulp van een filepointer. + +## Voorbeeld gebruik + +```php + +``` + +## Conclusie + +Deze code zoekt naar een afbeelding in de database aan de hand van het meegegeven id en geeft de afbeelding weer als deze wordt gevonden. Dit maakt het mogelijk om afbeeldingen op te halen en weer te geven in een webapplicatie. + + +# Code Documentatie imagerecieve.php - Afbeelding krijgen van het website + +Dit PHP-script heeft de volgende functies: + +1. `handlefile`: Deze functie verwerkt het geüploade bestand en slaat het op in de map "uploads" met een unieke bestandsnaam. +2. `insertImageInDb`: Deze functie voegt de gegevens van de afbeelding toe aan de database. +3. `createLink`: Deze functie genereert een downloadlink voor de afbeelding. +4. `UguuAPI`: Deze functie maakt gebruik van de Uguu API om de afbeelding naar een externe server te uploaden. +5. `deleteExpiredItems`: Deze functie verwijdert afbeeldingen die langer dan 3 uur geleden zijn geüpload uit de database en het bestandssysteem. + +De script gebruikt ook de volgende externe bronnen: +- "database.php": Een bestand dat de databaseverbinding tot stand brengt. +- "config.php": Een bestand dat configuratie-instellingen bevat. + +## Variabelen en parameters + +- `$conn`: Een variabele voor de databaseverbinding. +- `$curl`: Een cURL-resource voor het maken van een HTTP-verzoek naar de Uguu API. +- `$file`: Een array met informatie over het geüploade bestand, zoals naam, type, grootte, en tijdelijke locatie. +- `$fileid`: Een uniek bestands-ID gegenereerd met behulp van de functie `uniqid()`. +- `$link`: De downloadlink voor de afbeelding. +- `$filename`: De naam van het opgeslagen bestand. +- `$type`: Het type van het geüploade bestand. +- `$size`: De grootte van het geüploade bestand. +- `$response`: Een array die de reactie van het uploadscript wordt opgeslagen en later als JSON wordt geëncodeerd. + +## Functies en hun functionaliteit + +1. `handlefile($file, $fileid)`: Deze functie verwerkt het geüploade bestand door het op te slaan in de map "uploads" met een unieke bestandsnaam. Het retourneert de opgeslagen bestandsnaam. + +2. `insertImageInDb($conn, $type, $size, $filename, $link)`: Deze functie voegt de gegevens van de afbeelding toe aan de database. Het maakt gebruik van prepared statements voor het veilig invoegen van gegevens. Deze functie heeft de volgende parameters: + - `$conn`: De databaseverbinding. + - `$type`: Het type van het geüploade bestand. + - `$size`: De grootte van het geüploade bestand. + - `$filename`: De naam van het opgeslagen bestand. + - `$link`: De downloadlink voor de afbeelding. + +3. `createLink($fileid)`: Deze functie genereert een downloadlink voor de geüploade afbeelding. Het heeft het unieke bestands-ID als parameter en retourneert de downloadlink. + +4. `UguuAPI($curl, $filename)`: Deze functie maakt gebruik van de Uguu API om de afbeelding naar een externe server te uploaden. Het heeft de cURL-resource en het bestandsnaam als parameters. Het retourneert de URL van de geüploade afbeelding. + +5. `deleteExpiredItems($conn)`: Verwijdert afbeeldingen die langer dan 3 uur geleden zijn geüpload uit de database en het bestandssysteem. + + + +## Hoofdgedeelte van de code + +In het hoofdgedeelte van de code worden de volgende stappen uitgevoerd: + +1. De databaseverbinding wordt tot stand gebracht met behulp van de functie `database_connect()` uit het `database.php` bestand. + +2. Er wordt een cURL-resource gemaakt met behulp van de functie `curl_init()`. + +3. Er wordt gecontroleerd of er een bestand is geüpload zonder fouten. Indien ja, wordt de volgende stappen uitgevoerd: + - Er wordt een uniek bestands-ID gegenereerd. + - Er wordt een downloadlink gecreëerd. + - Het geüploade bestand wordt verwerkt en opgeslagen op de server. + - De gegevens van de afbeelding worden toegevoegd aan de database. + - De downloadlink en het uploadpad van de afbeelding worden toegevoegd aan de response array. + +4. Als er een fout is opgetreden tijdens het uploaden, wordt er een foutmelding toegevoegd aan de response array. + +5. De response array wordt geëncodeerd naar een JSON-string en uitgevoerd. + +## Voorbeeld uitvoer + +De output van het script is een JSON-string met de volgende structuren: + +- `succeeded`: Een boolean die aangeeft of de upload is geslaagd. +- `message`: Een bericht met aanvullende informatie over de upload. +- `downloadlink`: De downloadlink voor de afbeelding. +- `upload_path`: Het uploadpad van de afbeelding op de externe server. +- `deleted_files`: De bestanden die zijn gedeleted indien er zijn. + +Hier is een voorbeeld van de output: + +```json +{ + "succeeded": true, + "message": "", + "downloadlink": "https://example.com/imagedownload.php?link=123456789", + "upload_path": "https://a.uguu.se/abcdefgh.png", + "deleted_files": "Deleted files: filename1.png, filename2.png" +} +``` + +## Conclusie + +Deze code is een PHP-script dat een afbeelding uploadt naar een server en vervolgens de uploadlink en het pad van de afbeelding retourneert. Het script maakt ook gebruik van de Uguu API om de afbeelding naar een externe server te uploaden. Daarnaast verwijdert het script ook afbeeldingen die langer dan 3 uur geleden zijn geüpload om de serverruimte op te schonen. + + +# Code Documentatie webcamupload.html - Webcam Pagina + +Deze code beschrijft de functionaliteit en het gebruik van de "Webcam" webpagina. Deze webpagina maakt gebruik van de ingebouwde camera van het apparaat om een foto te maken en deze te tonen. + +## Installatie + +Er is geen speciale installatie vereist om deze webpagina te gebruiken. Deze kan worden geopend in een webbrowser die toegang heeft tot de camera van het apparaat. + +## Gebruik + +1. Open de "Webcam" webpagina in een webbrowser. +2. Klik op de "Take Image" knop om de camera te activeren en een foto te maken. +3. Er wordt een voorbeeld van de foto getoond op het scherm. +4. Er zijn verschillende opties beschikbaar: + + - **Canvas**: Deze optie toont de foto op een canvas element. + - **Link**: Deze optie genereert een link naar de foto, zodat deze kan worden gedownload. + - **Link (Uguu)**: Deze optie genereert een link naar de foto met behulp van de "uguu" service. + - **QR Code**: Deze optie genereert een QR code van de foto. + - **Restart**: Deze optie herstart het proces en maakt het mogelijk om een nieuwe foto te maken. + +## Bestanden + +De volgende bestanden maken deel uit van de "Webcam" webpagina: + +- **webcamupload.html**: Dit is het hoofdbestand van de webpagina, dat de structuur en inhoud bevat. +- **appWebcam.js**: Dit JavaScript bestand bevat de code voor het gebruik van de webcam en het verwerken van de foto. + +## Aanpassingen + +De "Webcam" webpagina kan worden aangepast volgens de specifieke behoeften. + +- De opmaak van de webpagina kan worden gewijzigd door de CSS aan te passen in de `style` sectie van het `webcamupload.html` bestand. +- De functionaliteit van de webpagina kan worden aangepast door wijzigingen aan te brengen in de JavaScript code in het `appWebcam.js` bestand. + +## Conclusie + +De "Webcam" webpagina is een handige tool om foto's te maken met behulp van de ingebouwde camera van het apparaat. Door de flexibiliteit van de beschikbare opties, kan de webpagina worden gebruikt voor persoonlijke of professionele doeleinden. + + diff --git a/public/uploads/.gitkeep b/public/uploads/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/public/webcamupload.html b/public/webcamupload.html new file mode 100644 index 0000000..f2a9f36 --- /dev/null +++ b/public/webcamupload.html @@ -0,0 +1,55 @@ + + + + + + Webcam + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..4be6611 --- /dev/null +++ b/readme.md @@ -0,0 +1,17 @@ + +# Broncode van Pikage (BO upside-down iOT) + +**Dit is een aangepaste code van PROG die is aangepast aan de behoeften van het BO-project. De invoer is de digitale knop en de uitvoer is een foto en een QR-code. De foto wordt toegevoegd aan de lokale database van het project. Bij elke map is er een Markdown-documentatie om de code gemakkelijker te begrijpen.** + +## TEAMLEDEN + + 1. E.V.A (Photo gedeelte): Dit teamlid heeft zich gericht op het gedeelte van de code dat verantwoordelijk is voor het maken van foto's. Ze hebben waarschijnlijk gebruik gemaakt van een camera-module of een bestaande API om foto's te maken en deze op te slaan. + 2. L.H.C (Licht gedeelte): Dit teamlid heeft zich waarschijnlijk gericht op het gedeelte van de code dat verantwoordelijk is voor het ontvangen van input via een digitale knop. Ze hebben waarschijnlijk lichtsensoren gebruikt om te detecteren wanneer de knop wordt ingedrukt en vervolgens de functie voor het maken van foto's te activeren. + 3. H.Y.Y (Geluid gedeelte): Dit teamlid heeft zich waarschijnlijk gericht op het gedeelte van de code dat verantwoordelijk is voor het ontvangen van input via een geluidssensor. Ze hebben waarschijnlijk de sensor gebruikt om te detecteren wanneer er geluid wordt geproduceerd en vervolgens de functie voor het maken van foto's te activeren. + 4. M.V.D.M (Ruitmelijke vormgeving student): Dit teamlid heeft zich gericht op het ontwerpen van de fysieke behuizing van het apparaat, evenals de gebruikersinterface. + 5. S.V.I (voormalige E-commerce-designer): Dit teamlid is verantwoordelijk voor het ontwerpen van de gebruikersinterface van de applicatie en het creëren van een aantrekkelijke en gebruiksvriendelijke ervaring voor de BO. + + +### We gaan je missen S.V.I +![sad chandler moment](https://media1.tenor.com/m/YFAjBULYJ0wAAAAd/sad-lonely.gif) + diff --git a/source/config.php b/source/config.php new file mode 100644 index 0000000..71b899f --- /dev/null +++ b/source/config.php @@ -0,0 +1,9 @@ +connect_errno) { + die( 'Failed to connect to MySQL: ' . $connection->connect_error ); + } + return $connection; +} diff --git a/source/readme.md b/source/readme.md new file mode 100644 index 0000000..958a318 --- /dev/null +++ b/source/readme.md @@ -0,0 +1,78 @@ +# Code Documentatie config.php - parse_ini_file + +Deze code laadt een .env-bestand en gebruikt de `parse_ini_file` functie om de inhoud van het bestand te parseren. Vervolgens worden de verschillende instellingen opgeslagen in constanten. + +## Functies + +- `file_exists($filename)` : Controleert of een bestand of directory bestaat. +- `parse_ini_file($filename)` : Parseert een .ini-bestand en retourneert de instellingen als een associatieve array. + +## Variabelen + +- `$envSettings` : Bevat de resultaten van de `parse_ini_file` functie. + +## Constanten + +- `DB_SCHEMA` : De naam van de database schema. Standaard is dit "schema" als deze waarde niet in het .env-bestand wordt opgegeven. +- `DB_USER` : De gebruikersnaam voor het verbinden met de database. Standaard is dit "user" als deze waarde niet in het .env-bestand wordt opgegeven. +- `DB_PASSWORD` : Het wachtwoord voor het verbinden met de database. Standaard is dit "password" als deze waarde niet in het .env-bestand wordt opgegeven. +- `DB_HOST` : De hostnaam voor het verbinden met de database. Standaard is dit "localhost" als deze waarde niet in het .env-bestand wordt opgegeven. + +## Belangrijkste punten + +- De code controleert eerst of het .env-bestand bestaat. Als het niet bestaat, wordt er een bericht weergegeven en wordt het script beëindigd. +- De `parse_ini_file` functie wordt gebruikt om het .env-bestand te lezen en de instellingen te extraheren. +- Als een instelling niet aanwezig is in het .env-bestand, wordt er een standaardwaarde gebruikt voor die instelling. + +## Voorbeeld gebruik + +```php + +``` + +## Conclusie + +Deze code laadt instellingen uit een .env-bestand en maakt ze beschikbaar via constanten. Dit maakt het gemakkelijk om configuratiegegevens op te slaan en te gebruiken in andere delen van de applicatie. + + +# Code Documentatie database.php - database_connect + +Deze code maakt een verbinding met de database met behulp van de geconfigureerde database-instellingen uit het config.php bestand. + +## Functies + +- `mysqli`: Instantieert een nieuw `mysqli` object om verbinding te maken met de database. +- `mysqli_connect_errno`: Bepaalt of er een fout is opgetreden bij het maken van de databaseverbinding. +- `mysqli_connect_error`: Retourneert een foutbericht als er een fout is opgetreden bij het maken van de databaseverbinding. +- `return $connection`: Retourneert de gemaakte databaseverbinding. + +## Variabelen + +- `$connection`: Bevat de gemaakte databaseverbinding. + +## Belangrijkste punten + +- De code maakt een nieuwe `mysqli` object om verbinding te maken met de database met behulp van de geconfigureerde database-inloggegevens. +- Als de databaseverbinding niet tot stand kan worden gebracht, wordt er een foutbericht weergegeven en stopt het script. + +## Voorbeeldgebruik + +```php + +``` + +## Conclusie + +Deze code maakt een databaseverbinding met behulp van de geconfigureerde database-instellingen uit het config.php bestand. Dit maakt het mogelijk om databasebewerkingen uit te voeren in andere delen van de applicatie. \ No newline at end of file diff --git a/table.sql b/table.sql new file mode 100644 index 0000000..3446781 --- /dev/null +++ b/table.sql @@ -0,0 +1,9 @@ +CREATE TABLE IF NOT EXISTS `photos` ( + `id` int(11) NOT NULL AUTO_INCREMENT, + `type` varchar(255) NOT NULL, + `size` int(11) DEFAULT NULL, + `filename` varchar(255) NOT NULL, + `link` varchar(255) NOT NULL, + `uploadDateTime` datetime NOT NULL DEFAULT current_timestamp(), + PRIMARY KEY (`id`) +) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; \ No newline at end of file