3

(0) Introduction

Hello Everyone! I am an absolute beginner to Tkinter and not sure how to achieve my result. I tried several strategies and was disappointed multiple times. Didn't work due to my ignorance.

I am building my own little programming text editor. I want to add functionality like yellow light bulbs in IntelliJ IDEA. According to the idea, a yellow circle with a question mark appears on the screen next to a character which caused a syntax error in the code.

The question is not about positioning objects. I sort of confident in it. I am struggling with tk.Canvas imposing its background. I want to get rid of background and keep drawings visible.

(1) A "Naive" approach

In the code editor tk.Frame I have the following widgets:

  • tk.Text where user types code. Positioned with .pack() method.
  • Line numbers tk.Canvas which is responsible for displaying line numbers. Positioned with .pack() method
  • For each syntax error in the code I create a tk.Canvas object where I create yellow circle and question mark text. Positioned with .place() method

It turned out, tk.Canvas _object has solid background which is covering half of the screen and looks ugly

Canvas demo

(2) Attempted strategies, which failed

  1. I looked for a way to make the Canvas object transparent, but from what I found, transparency is platform-dependent. Scary. I gave up.

  2. I also tried to make the canvas have zero size with canvas.configure(width=0, height=0). I was hoping that the canvas will become invisible and as a result, its objects will have a transparency illusion. Unfortunately, Canvas objects, rectangles, circles and others are not displayed outside the canvas itself. The image above is evidence of that property. The circle is not displayed fully, because a part of it is outside the canvas rectangle.

(3) Some Ideas

I have a couple ideas, which haven't been attempted yet, due to the lack of confidence and research

3.1. Maybe Z-index hack ?

I hope, that It is possible to use a single tk.Canvas to store all circles. The canvas will be placed in the same position as the text. Tweaking z-indices, hopefully, can be done in such a way, that the canvas background will be "bellow" The text field, while the yellow circles will be "above" the text.

However. That Idea raises the following questions:

  1. Does tkinter have absolute Z-indexing?
  2. Do the Canvas objects (circles) share the same Z-index? If so then I guess, the strategy is doomed and will fail. The Canvas is a widget, while as long as I know, canvas objects are not widgets.

3.2. Switch from Canvas approach to Images?

I heard that tk.Label can store Images. I could draw a simple PNG of yellow circle with question mark. Maybe instead of canvas circle I could display these labels with images and use .place() to adjust their positions. Maybe worth trying.

(4) Summary of the question

How to hack tk.Canvas or achieve transparent background by keeking floating circles not transparent on top of a text? Thank you very much!

EDIT:

The target Platform is Linux. Hence using root.wm_attrinutes("-transparentcolor", somecolor) hack doesn't work.

Andrey Kachow
  • 936
  • 7
  • 22
  • *ALL* Tkinter widgets are opaque rectangles. The only possible way you could overlay a non-rectangular shape onto text would be to have both the shape and text be drawing objects belonging to the same Canvas. (The text could no longer be a Text widget, so you'd have to reimplement all of the text editing features yourself.). You need to choose a more suitable GUI toolkit for this project. – jasonharper Mar 17 '22 at 02:14
  • To start off, making a `Canvas` transparent is [not possible](https://stackoverflow.com/a/20053853/16775594). However, there's still hope. Looking at [this answer](https://stackoverflow.com/a/41381685/16775594), it's possible to create a tooltip using a `Toplevel`. Maybe you could make this question mark in a similar way. Unfortunately, that means it'll have to be square, but at least it won't take up the whole text box. Also, could you [edit] to include an image of the question mark in IntelliJ IDEA, so we can see what the expected results are? – Sylvester Kruin Mar 17 '22 at 14:51

0 Answers0