Small Basic - Transparent GraphicsWindow

I recently added a feature to the LitDev Extension to create a completely transparent GraphicsWindow.

The method to do this is:


I can't show a screenshot because there is absolutely nothing to see!

So, what's the point...

Well, anything we add to the transparent GraphicsWindow will be visible, so we can do things like:

  • Create a window with a non-rectangular shape by drawing a png image.
  • Create nice simple widget applications.
  • Make things appear to float free from a containing window.


  • The transparent GraphicsWindow must be created before any other command creates a GraphicsWindow.
  • Once a transparent GraphicsWindow is created it cannot be changed back to a normal GraphicsWindow.
  • Because the window is completely transparent, it doesn't even register Mouse Clicks or other events unless something is drawn on it or its background is modified with GraphicsWindow.BackgroundColor.
  • A partially transparent color can be created using the hex format with the first 2 characters being opacity (e.g. "#01FFFFFF" is almost completely transparent white - you won't see it but it will register events if used as a background).
  • You can add anything to the transparent GraphicsWindow that you would to a normal one, including drawings, shapes and controls as well as move, rotate, show/hide and zoom (everything you can do normally).
  • You can use the associated new method LDUtilities.TopMostGW("True") to ensure that the window always remains above all other windows, good for widgets.


The following is the code for a simple clock widget using these methods.

'Simple LitDev Extension widget clock


'Transparent Topmost GraphicsWindow




'Clock Face

GraphicsWindow``.`` Width `` = ``100

GraphicsWindow``.`` Height `` = ``100

GraphicsWindow``.`` BrushColor `` = `` "#40FFFFFF" ``'Partially transparent White



GraphicsWindow``.`` FontSize `` = ``10

For `` i `` = `` 1 `` To ``12

  `` angle `` = ``i``*``Math``.``PI``/`` 6 `` - ``Math``.``Pi``/``2





GraphicsWindow``.`` PenColor `` = ``"Black"

GraphicsWindow``.`` PenWidth `` = ``4

hourHand `` = ``Shapes``.``AddLine``(``0``,``0``,``0``,``0``)

GraphicsWindow``.`` PenWidth `` = ``2

minuteHand `` = ``Shapes``.``AddLine``(``0``,``0``,``0``,``0``)

GraphicsWindow``.`` PenColor `` = ``"Red"

GraphicsWindow``.`` PenWidth `` = ``1

secondHand `` = ``Shapes``.``AddLine``(``0``,``0``,``0``,``0``)


'Register Events

GraphicsWindow``.`` MouseDown `` = ``OnMouseDown

GraphicsWindow``.`` MouseUp `` = ``OnMouseUp


LDDialogs``.`` RightClickMenu `` = ``OnRightClickMenu




While ``(``"True"``)

  ``'Get angles (Clockwise from top)

  `` second `` = ``Clock``.``Second``*``Math``.``PI``/`` 30 `` - ``Math``.``Pi``/``2

  `` minute `` = ``(``Clock``.``Minute``+``Clock``.``Second``/``60``)``*``Math``.``PI``/`` 30 `` - ``Math``.``Pi``/``2

  `` hour `` = ``(``Clock``.``Hour``+``Clock``.``Minute``/``60``+``Clock``.``Second``/``3600``)``*``Math``.``PI``/`` 6 `` - ``Math``.``Pi``/``2


  ``'Move hands - extension used to move lines coz its easier





  ``'Move the clock with mouse down

  `` If ``(``mouseDown`` ) ``Then

    ``GraphicsWindow``.`` Left `` = ``offsetX``+``Mouse``.``MouseX

    ``GraphicsWindow``.`` Top `` = ``offsetY``+``Mouse``.``MouseY



  ``Program``.``Delay``(``100`` ) ``' Delay 0.1 sec to prevent mashing cpu unnecessarily





Sub ``OnMouseDown

  `` mouseDown `` = ``"True"

  `` offsetX `` = ``GraphicsWindow``.``Left``-``Mouse``.``MouseX

  `` offsetY `` = ``GraphicsWindow``.``Top``-``Mouse``.``MouseY



Sub ``OnMouseUp

  `` mouseDown `` = ``"False"



Sub ``OnRightClickMenu

  `` If ``(``LDDialogs``.`` LastRightClickMenuItem `` = ``1`` ) ``Then




The partially transparent clock floats above all windows, it can be moved by grabbing with a mouse click and dragging.  A right click gives an option to exit it.

With these basic code segments you can create your own fancy professional looking widgets, perhaps with options to change and store settings.