add optional ImageUpload for Webhook

[RaHehl]

Since I can't judge whether this isn't overkill, here as a separate pull request with an additional upload of the image either not at all, always, or in the event of an error.

PHP example:

<?php
$expectedApiKey = 'testtest2';

$receivedApiKey = isset($_SERVER['HTTP_APIKEY']) ? $_SERVER['HTTP_APIKEY'] : '';

if ($receivedApiKey !== $expectedApiKey) {
    http_response_code(403); // 403 Forbidden
    echo json_encode(['status' => 'error', 'message' => 'Invalid API key']);
    exit;
}

$method = $_SERVER['REQUEST_METHOD'];

if ($method === 'POST') {
    // Handle POST request: Write data to CSV
    $csvFile = 'webhook_log.csv';

    $jsonData = file_get_contents('php://input');

    $dataArray = json_decode($jsonData, true);
    if (!$jsonData || !is_array($dataArray)) {
        http_response_code(400); // 400 Bad Request
        echo json_encode(['status' => 'error', 'message' => 'Invalid JSON data']);
        exit;
    }

    $csvHandle = fopen($csvFile, 'a');
    if ($csvHandle === false) {
        http_response_code(500); // 500 Internal Server Error
        echo json_encode(['status' => 'error', 'message' => 'Unable to open CSV file']);
        exit;
    }

    foreach ($dataArray as $data) {
        $csvRow = [
            $data['timestamp'], 
            $data['name'], 
            $data['rawValue'], 
            $data['value'], 
            $data['preValue'], 
            $data['rate'], 
            $data['changeAbsolute'], 
            $data['error']
        ];
        fputcsv($csvHandle, $csvRow);
    }

    fclose($csvHandle);

    http_response_code(200); // 200 OK
    echo json_encode(['status' => 'success', 'message' => 'Data written to CSV file']);
} elseif ($method === 'PUT') {
    // Handle PUT request: Save image
    $imageFilePath = 'uploaded_image.jpg';

    $imageData = file_get_contents('php://input');

    if (!$imageData) {
        http_response_code(400); // 400 Bad Request
        echo json_encode(['status' => 'error', 'message' => 'No image data received']);
        exit;
    }

    if (file_put_contents($imageFilePath, $imageData) === false) {
        http_response_code(500); // 500 Internal Server Error
        echo json_encode(['status' => 'error', 'message' => 'Unable to save the image']);
        exit;
    }

    http_response_code(200); // 200 OK
    echo json_encode(['status' => 'success', 'message' => 'Image uploaded successfully']);
} else {
    // Handle unsupported HTTP methods
    http_response_code(405); // 405 Method Not Allowed
    echo json_encode(['status' => 'error', 'message' => 'Method not allowed']);
}
?>

Maybe also a practical thing to collect pictures for training

[caco3]

We need to make sure that we have no memory clash! Can we make sure sending an image does not require a larger amount of extra RAM?

[RaHehl]

We need to make sure that we have no memory clash! Can we make sure sending an image does not require a larger amount of extra RAM?

I have no idea how the http client handles the memory, basically the image that is already available for the web interface is sent. I don't know much about embedded C++ for that, ideally I just passed on the reference of the image that is in memory and this is sent without creating a copy.

[RaHehl]

@caco3 running on my esp32 since 2 weeks, i didn't notice any issue

[caco3]

@RaHehl can you fix the conflicts? Then I will test it on my devices.

[RaHehl]

@caco3 done

[caco3]

Thanks!

I tried to test it on my system, how ever I am unable to enable the image sending:

Since I will merge your other MR, I also suggest to rebase this PR to the new rolling.

ans like the other, please ad a brief description to this PR and update the documentation.

[RaHehl]

@caco3 i've merged rolling into this branch.

Somehow the upload image is deactivated if the value is missing or commented out in the config. Unfortunately I don't know how to fix this.

Regarding the description and documentation, I need a hint what is meant, then I'll try that tomorrow

[caco3]

I fixed the config page and am testing it now.
Will you update the documentation?
I especially see that the image always gets named uploaded_image.jpg. I think it should get a unique name on every round, best would be to use the date/time for it.

[caco3]

would it be possible to add some meta data to the sent image?
Eg. the timestamp and the (possible error and value)?
Then the file could get named accordingly with could be helpful for diagnostics.

[caco3]

Suggestion for file name:
$imageFilePath = 'image_' . date("Y-m-d_H-i-s") . '.jpg';
Unless it gets filled by delivered meta data.

[RaHehl]

would it be possible to add some meta data to the sent image? Eg. the timestamp and the (possible error and value)? Then the file could get named accordingly with could be helpful for diagnostics.

hmm which do you prefer, parameters or headers?

I initially see the PHP script as a rough example, which can of course be expanded as desired

[caco3]

I think parameter are easier to understand for novices. I myself never wrote a php script with extra header information.

[RaHehl]

I'm a bit busy right now, I'll try until Sunday

[RaHehl]

I think it doesn't work that way, with parameters via the URL the issue is URL encoding, and with multipart formdata you would have to pass the whole thing as a complete object to the http client, which would then mean the image would be in memory twice.

[caco3]

But it would work as encoded URL, eg.
http://192.168.1.1/webhook.php?value=123.456&error=Neg.%20Rate%20-%20Read%3A%20%20-%20Raw%3A%20696.20692%20-%20Pre%3A%20696.20694
The PHP script simply can parse the GET parameters and revert the encoding.

[RaHehl]

I have now included the timestamp as a long in both requests. You can use this to establish a connection between the two requests.

Anything else would lead to new problems, e.g. with multiple values

doc update with updated php example: jomjol/AI-on-the-edge-device-docs#65

[caco3]

@RaHehl Thanks for your contribution!