Next Broadcast

Web User Interface for LSB Encoder

CoCa Code and Eng DK30 Spring 2021 0 0

Description

I would like to update my previous DK30 project to have a web interface so it will be easier to use. This will include a refactor in the code base to still allow command-line execution, but also be reusable through a REST API / or gRPC (undecided). This’ll be a team effort, including my handy-dandy UI/UX girlyfrann who will handle the front-end design and user experience :)

Recent Updates

CoCa 4 years ago

So it was bad timing on my part to start a project right as I was moving into a new house, so this unfortunately was ignored / overlooked for most of this month. Oops!

I intend on picking this back up on a future DK30, though, so stay tuned if anyone ends up reading this :)

CoCa 4 years ago

Wireframe of the file upload/embed page:

Backend semi-converted to a REST API, needs a bit of a refactor because it’s pretty gross and not very efficient…

This first week has just been communication on the wireframe(s) and me getting used to the repo again. (It’s been over a year since I initially wrote all this code)

CoCa 4 years ago

This project is a follow up from my DK30 in the fall of 2019 - here:

https://day9.tv/dk30/project/5e87b0151302fd5761e0729f

https://github.com/CoCaBoJangLeS/lsb_encoder/releases/tag/1.0.0-beta

The project wasn’t super user friendly, being only usable through the Command Prompt, and what I’d like to do is make it easier to use by making a Web UI for it :)

Estimated Timeframe

Mar 1st - Mar 31st

Week 1 Goal

By the end of week one, these should be accomplished Backend:

  • Ensure the image process code is in a central package so that it can be referenced by both the command line and a REST API handler Front End:
  • Create a wireframe of the file upload & message inputs page
  • Create a wireframe of the file decode page
  • Create a wireframe of an “About” page, for people who want to learn what LSB Steganography is

Week 2 Goal

By the end of week two, these should be accomplished Backend:

  • Should have a REST API endpoint to support embedding Front End:
  • Yarn initialize / create react app
  • Skeleton of the embed page should look similar to the wireframe

Week 3 Goal

By the end of week three, these should be accomplished Backend:

  • Should have a REST API endpoint to support decoding Front End:
  • Skeleton of the decode page should look similar to the wireframe
  • The Embed page should be utilizing the REST API Endpoint to embed a secret in a file

Week 4 Goal

By the end of week four, these should be accomplished Backend:

  • Should be serving the compiled react app as static javascript Front End:
  • The Decode page should be utilizing the REST API Endpoint to decode the secret from a file

Completion:

  • Tag a release on Github, with a .zip file, containing a folder of the executable and static javascript files
    • The executable will serve the static javascript files to the browser, and the javascript will call the new REST API endpoints that the executable supports

Tags