[jailbot]

OK this is it HF.....

This is the moment I've been waiting for my whole life.

Ok, not really, BUT let me explain.

I doubted myself that I would ever be remotely successful with programming.
I didn't know anyone who could program.
I had no technical role models nor influences in my life.
I thought I was doomed.

that is.... until I found Hack forums.

See where I live, there aren't too many programmers. The competent ones have the wits to move far far away, and the ones who stay... well, I guess they just didn't make the cut. Regardless, I've lacked role models and tech savvy social circles, but I realized I can have everything I ever wanted in my town, on the internet.

I come to you today asking for advice like I would from a friend next door. Too bad I don't have any programmer friends where I live:( All this time in the last 10 years of my internet adventures I never even knew I could visit Hack Forums and get programming advice. Now I know and I am very very happy...


Ok enough ranting, let's get down to it.

-----------------------------------------------------------------------------

I'd like to develop a SPA that allows a user to upload an image. I'm presuming the image processing will be done server side right? The whole point of this application is for the colors within the image to be extracted via hex code like #ffffff or #dj4352 along with the amount of surface area that particular covers within the image. So for example if I had blue, orange, yellow, and red in 4 equal squares on a 400x400px image. The processor would recognize each color to have 25% color volume or 200 square pixels for each color.

Also to note I would like to have this be able to convert pixels to square inches if possible.

The whole purpose of this application is to help myself and other artists identify the amount of colors within a piece of art so I can purchase the necessary colors to create a work of art for that particular image without having to guess the amount or type of colors needed.

That's pretty much the whole purpose of the application. Seems pretty simple but I have no clue what I should use for a backend or frontend and how to even set the darn thing up. I've never coded in python before. HOWEVER, I have experience with Angular 7, html, css, js, ts, c#, .NET Core, and a little bit of C.

Would love to see this project through and have it up on my website and Git Hub.

Ok cheers HF!! Let me know how I should take my first steps and I promise I will BUILD THIS!!

[jailbot]

bump bump bump bump bump bump

[lockhead]

Hello and welcome HF!

First of all Python is pretty simple to learn and get started with. But it is not a native web language, how ever you can build web apps with libraries such as Flask or Django. But since you don't have any experience with Python this could be a bit confusing and maybe too advanced and would require a learning period before you would be able to make this happen. You can just check out Youtube videos and see what you think, but I think JS would be the easier solution. Also not all webservers host Python apps, which might require you to pay more. But if you are determined to create this in Python then go for it.

If making this app is your main priority (regardless of language) I'd certainly suggest JS, HTML, CSS.
Here are some JS image processing libraries which should be capable of doing what you need: https://webkid.io/blog/image-processing-in-javascript/
If you want Python you'll need Django or Flask (for the web app) and Pillow (https://pillow.readthedocs.io/en/stable/) for the image processing.

I'll do a brief pseudo code run-down on how I would go about coding this app:

Code

img = Image.load("my_image.jpg")   //load image
colors = {}   //create a dictionary or smth similar to store a color and  how many pixels there are of this color eg: red:34

//iterate over all pixels in the image
for pixel in img:
    if pixel.color not in colors:  //if this color has not been stored in our colors dictionary add it to the dict and set its value to 1 since we found only one pixel with that color
        colors[pixel.color] = 1
    else:  //we already found pixels of this color so we increment the count by 1
        colors[pixel.color] += 1

// so now we have a list of all the colors in the image and a count for how many pixels there are with these colors respecitively.
// you would then sort this by the number of pixels, divide by total amount of pixels in the image to get the percentage
// if you want to then group the colors together by base color (say the pixels are all different colors but they are all shades of red), that would require some additional tricky, but shouldn't be that hard to do.

Hope you make a github and keep us updated, if you have any more questions feel free to DM.

[jailbot]

Hello and welcome HF!  

First of all Python is pretty simple to learn and get started with. But it is not a native web language, how ever you can build web apps with libraries such as Flask or Django. But since you don't have any experience with Python this could be a bit confusing and maybe too advanced and would require a learning period before you would be able to make this happen. You can just check out Youtube videos and see what you think, but I think JS would be the easier solution. Also not all webservers host Python apps, which might require you to pay more.  But if you are determined to create this in Python then go for it.  

If making this app is your main priority (regardless of language) I'd certainly suggest JS, HTML, CSS.
Here are some JS image processing libraries which should be capable of doing what you need: https://webkid.io/blog/image-processing-in-javascript/  
If you want Python you'll need Django or Flask (for the web app) and Pillow (Maze Found | Read the Docs for the image processing.  

I'll do a brief pseudo code run-down on how I would go about coding this app:

Code

img = Image.load("my_image.jpg")   //load image
colors = {}   //create a dictionary or smth similar to store a color and  how many pixels there are of this color eg: red:34

//iterate over all pixels in the image
for pixel in img:
   if pixel.color not in colors:  //if this color has not been stored in our colors dictionary add it to the dict and set its value to 1 since we found only one pixel with that color
       colors[pixel.color] = 1
   else:  //we already found pixels of this color so we increment the count by 1
       colors[pixel.color] += 1

// so now we have a list of all the colors in the image and a count for how many pixels there are with these colors respecitively.
// you would then sort this by the number of pixels, divide by total amount of pixels in the image to get the percentage
// if you want to then group the colors together by base color (say the pixels are all different colors but they are all shades of red), that would require some additional tricky, but shouldn't be that hard to do.

Hope you make a github and keep us updated, if you have any more questions feel free to DM.

First of all, I have to say thank you for actually thoughtfully responding to my post. I have been used to stack overflow responses which are either sarcastic or shaming people new to coding.

Secondly, I will definitely look into those javascript image processors. I was not dead set on coding it in python. I just happened to see somewhere that python had some image processing libraries.

I don't have any experience with python, but I do have plenty of experience with the basic web stack & angular.

I do plan on uploading this project to Github.. hopefully make it open source one day? I'll keep you updated on how the project goes!! This is my new weekend project to work on.

[lockhead]

No problem, as long as people come here with straight up questions and not just "need this done asap" I'm always willing to help out.

Ye you can definately do this with Python the problem is just that Python isn't web native, so I'd probably be easier to just do it in angular or something similar. Unless you're into learning new stuff then go for it.

Sounds like a cool project, if you have any more questions hmu.

[jailbot]

No problem, as long as people come here with straight up questions and not just "need this done asap" I'm always willing to help out.  

Ye you can definately do this with Python the problem is just that Python isn't web native, so I'd probably be easier to just do it in angular or something similar. Unless you're into learning new stuff then go for it.

Sounds like a cool project, if you have any more questions hmu.

haha, i'm sure plenty of people on here come looking for others to do their work.

On the bright side, I started developing this 2 nights ago! I've got my repo created and I've created a basic UI with an old angular template I've used in the past. I have found this library called "Caman"

CamanJS - Javascript Image Manipulation

It is an open source library for javascript image processing, I looked through the API documentation and came across this piece

CamanJS Documentation

check out the analyze section, I think that's what I need to use for choosing the colors.

Anyways, I'll keep working on it this week if I have time.

Thanks again!! 😁