Merge pull request #13 from VerzatileDev/main

Sommos · web-flow · commit 67f708768dda · 2023-09-12T13:25:20.000+01:00
[Add] / [FIX] &gt; Image / Warnings / Alignment - Stable
diff --git a/README.md b/README.md
@@ -1,4 +1,37 @@
-# C Image Processing
+# Table of Contents
+
+* [Introduction](#introduction)
+    * [Software Information](#software-information)
+    * [Examples](#examples)
+* [Contribution](#contribution)
+* [Installation](#installation)
+    * [Cloning via Terminal](#cloning-via-terminal)
+    * [Cloning via GitHub Desktop](#cloning-via-github-desktop)
+* [Prerequisites](#prerequisites)
+    * [Project Requirements](#project-requirements)
+    * [Fonts](#fonts)
+* [License](#license)
+
+</br>
+
+# Introduction
+
+
+This initiative aims to develop an extensive and robust library of image processing functions, implemented in the C programming language. The ultimate objective is to establish a versatile platform capable of ingesting PPM images, executing a range of filters and transformations, and subsequently generating a modified image file. It is important to note that this project is currently in active development, with ongoing efforts to enhance its capabilities.
+
+</br>
+
+### Software Information
+
+* Developed with " C " Programming Language
+* Development Setup and Wiki built for Visual Studio Code
+* Uses Libraries such as " GTK4 ", " JpegLib ", "PngLib ", Additional added in the future.
+
+</br>
+
+### Examples
+
+</br>
 
 <p align="center">
     <img src="readme_images/readme_image_0.png" width="200" height="300"/>
@@ -11,24 +44,83 @@
     <img src="readme_images/readme_image_7.png" width="200" height="300"/>
 </p>
 
-This program is to builds a simple library of image processing functions in C. The library is then used to create a program that can read in a PPM image, apply a filter to it, and then write the modified image to a new file.
+</br>
+
+## Contribution
+
+To contribute to `c_image_processing`, please follow these steps:
+
+1. Fork the repository to your own account.
+2. Create a feature branch for your contributions.
+3. Make your desired changes and commit them to your feature branch.
+4. Read the comprehensive setup documentation available in the repository's wiki.
+5. Submit a pull request from your feature branch to the main repository.
+
+
+We appreciate your contributions and look forward to reviewing your pull request
+
+</br>
 
-# Fonts
 
-The fonts used in this program, are available here:
+## Installation
 
-<a href="https://www.dafont.com/bignoodletitling.font">
+### Cloning via Terminal:
+
+```bash 
+
+Open your terminal and navigate to the directory where you want to clone the repository
+cd /desired/directory
+
+Clone the repository
+git clone https://github.com/VerzatileDevOrg/C_image_processing
+
+Move into the cloned directory
+cd C_image_processing
+
+```
+
+### Cloning via GitHub Desktop:
+
+1. Open GitHub Desktop and ensure you're logged in to your GitHub account.
+2. Click on the "+" button in the top left corner and select "Clone Repository".
+3. In the "Clone a Repository" window, select the "URL" tab.
+4. Paste the repository URL: https://github.com/VerzatileDevOrg/C_image_processing.
+5. Choose a local path for the repository.
+6. Click on "Clone Repository" to complete the process.
+
+This will clone the repository to your local machine, allowing you to work with the codebase.
+
+</br>
+
+## Prerequisites
+
+### Project Requirements:
+
+1. Visual studio Code.
+2. `Windows 10` or Newer.
+3. Installation of `C` Language.
+4. Setup of GTK4, Jpeg, Png Libraries.
+
+</br>
+
+### Fonts
+
+The typefaces employed in this program can be obtained from the following source:
+
+* <a href="https://www.dafont.com/bignoodletitling.font">
     Big Noodle Titling
 </a>
 
-# Contribution
+</br>
+
+## License
 
-If you'd like to contribute to `c_image_processing` please submit a pull-request on a feature branch.
+MIT License
 
-# Installing
+Copyright (c) 2023 VerzatileDevOrg (Sommos / Verzatildev )
 
-Clone the repo:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-    git clone https://github.com/VerzatileDevOrg/C_image_processing
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-    cd c_image_processing
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/src/assets/images/arrow.png b/src/assets/images/arrow.png
diff --git a/src/gtk_gui.c b/src/gtk_gui.c
@@ -106,27 +106,27 @@ static void activate(GtkApplication *app, gpointer user_data)
         *button_box0, *button_box1, *button0, *button1, *button2,
         *button3, *button4, *button5, *button6, *button7;
     const char *css = "window {"
-                      "    background-color: #FFFFE4;"
-                      "}"
-                      "headerbar.titlebar {"
-                      "    font-family: BigNoodleTitling;"
-                      "    font-size: 36px;"
-                      "    color: black;"
-                      "    background-color: #4CAF50;"
-                      "    border: none;"
-                      "    padding: 10px 20px;"
-                      "    text-decoration: none;"
-                      "}"
-                      "button {"
-                      "    background-color: #4CAF50;"
-                      "    color: black;"
-                      "    2px solid #008CBA;"
-                      "    padding: 10px 20px;"
-                      "    text-decoration: none;"
-                      "    font-size: 22px;"
-                      "    margin: 8px 5px;"
-                      "    font-family: BigNoodleTitling;"
-                      "}";
+                        "    background-color: #FFFFE4;"
+                        "}"
+                        "headerbar.titlebar {"
+                        "    font-family: 'BigNoodleTitling', 'Sans';"
+                        "    font-size: 36px;"
+                        "    color: black;"
+                        "    background-color: #4CAF50;"
+                        "    border: none;"
+                        "    padding: 10px 20px;"
+                        "    text-decoration: none;"
+                        "}"
+                        "button {"
+                        "    background-color: #4CAF50;"
+                        "    color: black;"
+                        "    border: 2px solid #008CBA;"
+                        "    padding: 10px 20px;"
+                        "    text-decoration: none;"
+                        "    font-size: 22px;"
+                        "    margin: 8px 5px;"
+                        "    font-family: 'BigNoodleTitling', 'Sans';"
+                        "}";
     FilterButtonInfo filter_buttons[] = {
         {"Black And White Filter", black_and_white_filter_apply},
         {"Bright Filter", bright_filter_apply},
@@ -147,42 +147,74 @@ static void activate(GtkApplication *app, gpointer user_data)
     // create new vertical box container
     box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
     gtk_widget_set_halign(box, GTK_ALIGN_CENTER);
-    gtk_widget_set_valign(box, GTK_ALIGN_END);
+    gtk_widget_set_valign(box, GTK_ALIGN_CENTER);
     // include box container in window
     gtk_window_set_child(GTK_WINDOW(window), box);
 
-    // create new horizontal box container for user image
-    user_image_box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
+    // create a horizontal box container for the images
+    GtkWidget *image_container = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
+    gtk_widget_set_halign(image_container, GTK_ALIGN_CENTER);
+    gtk_widget_set_valign(image_container, GTK_ALIGN_CENTER);
+    // append the image container to the main vertical box
+    gtk_box_append(GTK_BOX(box), image_container);
+
+    // Create a vertical box container for the user image
+    user_image_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
     gtk_widget_set_halign(user_image_box, GTK_ALIGN_CENTER);
     gtk_widget_set_valign(user_image_box, GTK_ALIGN_CENTER);
-    gtk_widget_set_margin_bottom(user_image_box, 20);
-    // append user image box to vertical box
-    gtk_box_append(GTK_BOX(box), user_image_box);
-    // create image widget
+    // append the user image container to the horizontal image container
+    gtk_box_append(GTK_BOX(image_container), user_image_box);
+
+    // create image widget for user image
     image = gtk_image_new_from_file("assets/images/test_image.bmp");
     gtk_image_set_pixel_size(GTK_IMAGE(image), 250);
-    // append user image widget to user image box
+    // set horizontal alignment to center for the image
+    gtk_widget_set_halign(image, GTK_ALIGN_CENTER);
+    // append the user image widget to the user image container
     gtk_box_append(GTK_BOX(user_image_box), image);
 
-    // create new horizontal box container for filtered image
-    filtered_image_box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
+    // set a top margin for the user image to raise it within the layout
+    gtk_widget_set_margin_top(image, 50);
+
+    GtkWidget *new_image = gtk_image_new_from_file("assets/images/arrow.png");
+    gtk_image_set_pixel_size(GTK_IMAGE(new_image), 250);
+    gtk_widget_set_halign(new_image, GTK_ALIGN_CENTER);
+
+    // create a new container for the new image
+    GtkWidget *new_image_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
+    gtk_widget_set_halign(new_image_box, GTK_ALIGN_CENTER);
+    gtk_widget_set_valign(new_image_box, GTK_ALIGN_CENTER);
+    gtk_box_append(GTK_BOX(image_container), new_image_box);
+
+    // append the new image widget to the new image container
+    gtk_box_append(GTK_BOX(new_image_box), new_image);
+    gtk_widget_set_margin_top(new_image, 50);
+
+    // create a vertical box container for the filtered image
+    filtered_image_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
     gtk_widget_set_halign(filtered_image_box, GTK_ALIGN_CENTER);
     gtk_widget_set_valign(filtered_image_box, GTK_ALIGN_CENTER);
-    gtk_widget_set_margin_bottom(filtered_image_box, 20);
-    // append filtered image box to vertical box
-    gtk_box_append(GTK_BOX(box), filtered_image_box);
-    // create image widget
+    // append the filtered image container to the horizontal image container
+    gtk_box_append(GTK_BOX(image_container), filtered_image_box);
+
+    // create image widget for filtered image
     image = gtk_image_new_from_file("assets/images/test_image.bmp");
     gtk_image_set_pixel_size(GTK_IMAGE(image), 250);
-    // append user image widget to filtered image box
+    // set horizontal alignment to center for the image
+    gtk_widget_set_halign(image, GTK_ALIGN_CENTER);
+    // append the filtered image widget to the filtered image container
     gtk_box_append(GTK_BOX(filtered_image_box), image);
 
+    // set a top margin for the filtered image to raise it within the layout
+    gtk_widget_set_margin_top(image, 50);
+
     // create new horizontal box container for buttons
     button_box0 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
     gtk_widget_set_halign(button_box0, GTK_ALIGN_CENTER);
     gtk_widget_set_valign(button_box0, GTK_ALIGN_CENTER);
     // append button box to vertical box
     gtk_box_append(GTK_BOX(box), button_box0);
+    gtk_widget_set_margin_top(button_box0, 100); // temp 
 
     // create new horizontal box container for buttons
     button_box1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
@@ -201,9 +233,9 @@ static void activate(GtkApplication *app, gpointer user_data)
     gtk_css_provider_load_from_string(provider, css);
     // add CSS provider to default display
     gtk_style_context_add_provider_for_display(
-        gdk_display_get_default(),
-        GTK_STYLE_PROVIDER(provider),
-        GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+    gdk_display_get_default(),
+    GTK_STYLE_PROVIDER(provider),
+    GTK_STYLE_PROVIDER_PRIORITY_USER);
 
     // show window
     gtk_widget_set_visible(window, TRUE);
