Small Basic - Transparent GraphicsWindow

  • Article

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

The method to do this is:

LDUtilities``.``TransparentGW``(``)

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.

Features

  • 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.

Example

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

'Simple LitDev Extension widget clock

 

'Transparent Topmost GraphicsWindow

LDUtilities``.``TransparentGW``(``)

LDUtilities``.``TopMostGW``(``"True"``)

 

'Clock Face

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

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

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

GraphicsWindow``.``FillEllipse``(``0``,``0``,``100``,``100``)

 

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

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

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

  ``GraphicsWindow``.``DrawText``(``50``+``45``*``Math``.``Cos``(``angle``)``-``3``,``50``+``45``*``Math``.``Sin``(``angle``)``-``7``,``i``)

EndFor

 

'Hands

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``.``AddRightClickMenu``(``"1=Exit;"``,``""``)

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

 

'MAIN LOOP

 

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

  ``LDShapes``.``MoveLine``(``hourHand``,``50``,``50``,``50``+``35``*``Math``.``Cos``(``hour``)``,``50``+``35``*``Math``.``Sin``(``hour``)``)

  ``LDShapes``.``MoveLine``(``minuteHand``,``50``,``50``,``50``+``45``*``Math``.``Cos``(``minute``)``,``50``+``45``*``Math``.``Sin``(``minute``)``)

  ``LDShapes``.``MoveLine``(``secondHand``,``50``,``50``,``50``+``50``*``Math``.``Cos``(``second``)``,``50``+``50``*``Math``.``Sin``(``second``)``)

  

  ``'Move the clock with mouse down

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

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

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

  ``EndIf

  

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

EndWhile

 

'EVENT HANDLING SUBROUTINES

 

Sub ``OnMouseDown

  `` mouseDown `` = ``"True"

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

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

EndSub

 

Sub ``OnMouseUp

  `` mouseDown `` = ``"False"

EndSub

 

Sub ``OnRightClickMenu

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

    ``Program``.``End``(``)

  ``EndIf

EndSub

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.