Exercises for video 2-7

[shiffman]

• [x] sorting database logs in HTML page (switch between alphabetical by mood or by timestamp)
• [ ] pagination on logs
• [x] save the image as a file and path to file in database
• [x] draw on the image with p5 canvas?
• [x] use face-api.js somehow?

[shiffman]

@blinkityblank to screen capture these, you can copy shiffman.db into the exercise directory and rename to database.db. Let me know if you want me to screen capture, I can do that if it makes things easier!

[shiffman]

@blinkityblank for saving the image as a file and path to file in database I didn't actually implement it I just made 4 PNG files and created a shiffman.db file with the filenames. I think we could show a directory list of the files and a screenshot of the database for this "exercise". I can implement it later if we want to provide actual working code.

[shiffman]

@blinkityblank for the drawings I made some in drawings.db (just rename to database.db), but feel free to make your own! Just note the logging of the latitude and longitude, maybe spoof a different location!

[shiffman]

For face-api.js I'm uploading just some footage of me running the demo to google drive. Let's make sure we credit the code and url on screen in addition to docs. https://justadudewhohacks.github.io/face-api.js/webcam_face_expression_recognition

[joeyklee]

@shiffman - in case you're looking for some face-api references, I've got a few working with p5. https://github.com/joeyklee/face-api-expressions-demo https://joeyklee.github.io/face-api-expressions-demo/

of interest might be:

• https://github.com/joeyklee/face-api-expressions-demo/tree/master/webcam //
• https://github.com/joeyklee/face-api-expressions-demo/tree/master/typeface

[shiffman]

Oh this is awesome, I forgot you had these! I'm eventually hoping to make a README page for each module so this would be perfect to include. . as well as add to the video descriptions!

[jrichalot]

Hopefully I am writing this in the correct place. Please edit and/or delete as seems fit.

I have coded the "save to file" aspect as follows

    // create filename and path
    data.filename = timestamp+'.png';
    data.filepath = 'public/images/';

    // create and write file from base64
    const base64Data = data.image64.replace(/^data:image\/\w+;base64,/, "");
    fs.writeFile(data.filepath+data.filename, base64Data, 'base64', error => {
        console.log(error);
      });
    
    //   remove Image64 from data object as Image now saved as png
    delete data.image64;

Hopefully this is relevant

[joeyklee]

hello @jrichalot - thanks for writing!

One potential fix here could be that your delete data.image64 should be within the callback function of your writeFile().

What may be the issue is that you're trying to write your file, but in face it has been deleted before your machine has had the chance.

Hope this helps!

[jrichalot]

Thanks @joeyklee. The code works... but much more elegant indeed with delete data.image64 as a callback function indeed.

[MrFootwork]

@jrichalot Thank you for providing your solution. I wasn't able to figure that out on my own and it got quite frustrating until I took a look on this repository to find your solution :)

I took your code as a reference and tried to also consider @joeyklee 's tip to use the delete part in the callback function in the writeFile(). Somehow it is not being removed from the "data". From the wording of the parameter it seems, that it is an error handler and the deleting is not executed as long as there is no error in writing the file? This is how I tried it:

	// create and write file from base64
	const base64Data = data.image64.replace(/^data:image\/\w+;base64,/, '')
	fs.writeFile(data.filepath + data.filename, base64Data, 'base64', error => {
		console.log('deleting image from DB dataset and saving image file...')
		delete data.image64
	})

Does someone see what I am missing here?

[vicscherman]

@jrichalot Thank you for providing your solution. I wasn't able to figure that out on my own and it got quite frustrating until I took a look on this repository to find your solution :)

I took your code as a reference and tried to also consider @joeyklee 's tip to use the delete part in the callback function in the writeFile(). Somehow it is not being removed from the "data". From the wording of the parameter it seems, that it is an error handler and the deleting is not executed as long as there is no error in writing the file? This is how I tried it:

	// create and write file from base64
	const base64Data = data.image64.replace(/^data:image\/\w+;base64,/, '')
	fs.writeFile(data.filepath + data.filename, base64Data, 'base64', error => {
		console.log('deleting image from DB dataset and saving image file...')
		delete data.image64
	})

Does someone see what I am missing here?

Yup, pretty quick fix though!

fs.writeFile(data.filepath+data.filename, base64Data, 'base64', error => { if (error) throw error; console.log('write sucessful!') //delete with callback delete data.image64; });

Taken right from here https://nodejs.org/api/fs.html#fs_callback_example

Not sure if you'll see this but thought it might be nice.