Giter VIP home page Giter VIP logo

Comments (9)

Minoslo avatar Minoslo commented on May 29, 2024 1

THAT'S EXACTLY what I wanted man! You are awesome Jason, thank you very much.
I'll try to apply this one, after be able to know how did you do that hehe, to my graph.
Thank you man.

from pysimplegui.

jason990420 avatar jason990420 commented on May 29, 2024

Not sure what the requirement you want, if possible, can you give me an exact image for your target.

from pysimplegui.

Minoslo avatar Minoslo commented on May 29, 2024

Hi Jason,
Thank you so much for being so fast. What I'm trying to accomplish is something I saw in modern solar software. I'm attaching an image.
image
I think I can get the top-down blur effect by researching more on how to make my own color map in Matplotlib. Instead of starting with the orange color and blur it into white, I can blur into black and maybe that solves half the problem.
But blurring the horizontal edges, I don't know how to do it, really. I tried to investigate to see if I could modify the alpha channel of the sg object Graph(), but it's not possible or I haven't been able to do it, and it may not even be the solution.
Greetings and thank you in advance whether or not there is a solution to the problem.

Pd: Thank you so much for your posts, I saw the circular progress bar one and I included it in my project after spending so many hours trying to realize how the code works. For me it was fascinating how did you use the pillow package for solving that.

from pysimplegui.

jason990420 avatar jason990420 commented on May 29, 2024

Not sure how it can be done or not by using matplotlib, but it cannot be done by using PySimpleGUI/tkinter.

For my knowledge, if the target is correct for you, I will do it by using Pillow library and PySimpleGUI Image element.

import io
import time
import random
import threading
from PIL import Image, ImageDraw, ImageFilter
import PySimpleGUI as sg

class GUI():

    def __init__(self, size=(400, 300)):
        self.w, self.h = self.size = size
        sg.theme('DarkBlue3')
        sg.set_options(font=("Courier New", 16))
        layout = [
            [sg.Image(size=self.size, background_color='black', key='IMAGE')],
            [sg.Push(), sg.Button("BLUR"), sg.Push()]
        ]
        self.window = sg.Window(
            'Title', layout=layout, enable_close_attempted_event=True,
            use_default_focus=False, margins=(0, 0), finalize=True)
        self.window["BLUR"].block_focus()
        self.blur = False
        self.running = True
        threading.Thread(target=self.get_data, daemon=True).start()
        self.start()

    def get_data(self, fg=(255, 255, 255, 255), bg=(0, 0, 0, 255)):
        y = self.h//2
        while self.running:
            self.data = [(i, random.randint(-y, y) + y) for i in range(self.w)]
            im = Image.new("RGBA", self.size, color=bg)
            draw = ImageDraw.Draw(im, mode="RGBA")
            draw.line(self.data, fill=fg, width=1)
            draw.line([(0, y), (self.w, y)], fill=fg, width=1)
            if self.blur:
                im = im.filter(ImageFilter.BLUR)
            data = self.image_to_data(im)
            self.window.write_event_value("Update", data)
            time.sleep(0.1)             # time delay to reduce the CPU loading

    def image_to_data(self, im):
        with io.BytesIO() as output:
            im.save(output, format="PNG")
            data = output.getvalue()
        return data

    def start(self):
        while True:
            event, values = self.window.read()
            if event == sg.WINDOW_CLOSE_ATTEMPTED_EVENT:
                break
            elif event == 'Update':
                data = values[event]
                self.window['IMAGE'].update(data)
            elif event == 'BLUR':
                self.blur =  not self.blur
        self.running = False
        time.sleep(0.2)                                     # wait thread stop
        self.window.close()

GUI()

image
image

from pysimplegui.

Minoslo avatar Minoslo commented on May 29, 2024

Hi Jason,

First of all, I'm sorry I didn't answer in these two days. It's been Holy Week in my city and I've been a bit absent.
The solution you show me is great man! But I'd like to know if it can be fine-tuned it a little bit more and just blur the edges.

Best regards and thank you very much!

from pysimplegui.

jason990420 avatar jason990420 commented on May 29, 2024

just blur the edges.

What the edges are ? No exact definition for the edges may get nothing returned.

from pysimplegui.

Minoslo avatar Minoslo commented on May 29, 2024

That's nice, I want to learn that library so this is a good chance to do it.
Just to clarify what I trying to mean by edges:
image
That blurred effect that occurs in this image and that blends the graphic with the background.

from pysimplegui.

jason990420 avatar jason990420 commented on May 29, 2024

Firstly, I created an edge-spur mask by PIL.Image

tmptx9w_5nn

Then using Image.alpha_composite with both images, main image and the mask.

import io
import time
import random
import threading
from PIL import Image, ImageDraw, ImageFilter
import PySimpleGUI as sg

class GUI():

    def __init__(self, size):
        self.w, self.h = self.size = size
        sg.theme('DarkBlue3')
        sg.set_options(font=("Courier New", 16))
        layout = [
            [sg.Image(size=self.size, background_color='black', key='IMAGE')],
            [sg.Push(), sg.Button("BLUR"), sg.Push()]
        ]
        self.window = sg.Window(
            'Title', layout=layout, enable_close_attempted_event=True,
            use_default_focus=False, margins=(0, 0), finalize=True)
        self.window["BLUR"].block_focus()
        self.blur = False
        self.running = True
        threading.Thread(target=self.get_data, daemon=True).start()
        self.start()

    def get_data(self, fg=(255, 255, 255, 255), bg=(0, 0, 0, 255)):
        y = self.h//2
        while self.running:
            self.data = [(i, random.randint(-y, y) + y) for i in range(self.w)]
            im = Image.new("RGBA", self.size, color=bg)
            draw = ImageDraw.Draw(im, mode="RGBA")
            draw.line(self.data, fill=fg, width=1)
            draw.line([(0, y), (self.w, y)], fill=fg, width=1)
            if self.blur:
                im = Image.alpha_composite(im, mask)
            data = self.image_to_data(im)
            self.window.write_event_value("Update", data)
            time.sleep(0.1)             # time delay to reduce the CPU loading

    def image_to_data(self, im):
        with io.BytesIO() as output:
            im.save(output, format="PNG")
            data = output.getvalue()
        return data

    def start(self):
        while True:
            event, values = self.window.read()
            if event == sg.WINDOW_CLOSE_ATTEMPTED_EVENT:
                break
            elif event == 'Update':
                data = values[event]
                self.window['IMAGE'].update(data)
            elif event == 'BLUR':
                self.blur =  not self.blur
        self.running = False
        time.sleep(0.2)                                     # wait thread stop
        self.window.close()

# Create an edge-spur mask

size = w, h = (400, 300)
mask = Image.new("RGBA", size, color=(0, 0, 0, 0))  # Black
width = 100
for x in range(w):
    for y in range(h):
        r, g, b, a = mask.getpixel((x, y))
        alpha1, alpha2 = 0, 0
        if x < width:
            alpha1 = int((width - x)/width * 255)
        elif x > w - width:
            alpha1 = int((x - w + width)/width * 255)
        if y < width:
            alpha2 = int((width - y)/width * 255)
        elif y > h - width:
            alpha2 = int((y - h + width)/width * 255)
        alpha = max(alpha1, alpha2)
        mask.putpixel((x, y), (r, g, g, alpha))

GUI(size)

image
image

from pysimplegui.

Minoslo avatar Minoslo commented on May 29, 2024

Should I close this thread, Jason?

from pysimplegui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.