Share via

Small Basic - Transparent GraphicsWindow

  • 08/30/2014

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.

Comments