Wednesday, July 2, 2025

🖥 Digital Clock

This program is a port and mod of Antoni Gual Via's program shared with the "BASIC, QBasic, GWBasic computer programming"' Facebook group.

Below:
  • About the program
  • How to set an LED colour preference
  • How to embed the clock in a Web page
  • How to download the clock to run locally or host it on your own website

About the program

Antoni Gual Via created with QBasic a "digital 7 segment clock using only DRAW."  I've made some  changes to placate my fussy nature and a little addition:

  • I've filled in the segments (using PAINT, because BAM's DRAW statement does not support the "p" (paint) command
  • I'm using screen mode 17 instead of screen mode 12 (for the LED: access to 63 predefined colors, instead of only 15 colors; black is reserved for the clock background colour)
    • I'm also using a custom screen resolution
  • I've also modified the program to check the URL for a "color" query string which can be used to customize the colour of the clock LED lights.


How to set an LED colour preference

This program has been exported from BASIC Anywhere Machine as a "Stand-Alone" program.  It is a small HTML file that contains the source code "bound" to the BASIC-to-javascript transpiler (BAM's built-in fork of wwwBASIC.)  That HTML file can then exist anywhere: on a local storage device for running offline, on a static web server for running as a stand-alone Web Page, or on a Web server for inclusion (as a "gadget?") into any other Web page or Web site.

To use a colour other than the default, add a "color" parameter to the URL.

For example, using the program I have hosted on my Neocities site:
  • The URL for the program without specifying a colour preference
    • https://basicanywheremachine.neocities.org/sample_programs/DRAW%20DIGITAL%20CLOCK.prod.run
  • The URL for the program with a colour preference specified
    • https://basicanywheremachine.neocities.org/sample_programs/DRAW%20DIGITAL%20CLOCK.prod.run?color=15
See this documentation page to find the color codes for the pre-defined available colors for screen mode 17 (the "p256" colour mode found in the "colour modes" section after the list of screen modes.)

How to embed the clock in a Web page

(Creating BAM programs that can be embedded in Web pages, it is a fun way to give good old BASIC a useful purpose!)

To embed this BAM program in another Web Page or Web site, here's how to do that with an HTML iframe:

<iframe src="https://basicanywheremachine.neocities.org/sample_programs/DRAW%20DIGITAL%20CLOCK.prod.run" style="width:300px;height:100px;">
</iframe>

Here is a screenshot of the result in TiddlyWiki :

How to download the clock to run locally or host it on your own website

Somewhere in your browser's menus, find something like "Save Page as".



For my Web browser, I then choose to save the file as a "Webpage, HTML only".

Wherever you save that file locally, double-clicking on it should open the file in your Web browser, and the clock program should start running immediately.

Aside:  The Chrome web browser on my Chromebook allows setting up an HTML page as an "app", so that the HTML page appears as a stand-alone application, instead of a Web browser tab.  The Chromebook remembers the location and size of the clock program.  Neat !











🖥 Digital Clock

This program is a port and mod of Antoni Gual Via's program shared with the "BASIC, QBasic, GWBasic computer programming"'...