mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 02:30:42 -08:00
Code Issues Projects Releases Wiki Activity
CLOG - The Common Lisp Omnificent GUI
1444 commits 1 branch 16 tags 48 MiB
Find a file
David Botton a31269df3d Comment fixes
2024-02-18 20:40:55 -05:00
.github Create FUNDING.yml 2021-12-03 09:12:13 -05:00
clogframe Move precompiled windows clogframe to a download 2024-02-02 09:03:56 -05:00
demos added js api clogframe_quit() 2022-09-02 16:58:48 -04:00
doc manual update 2024-02-16 00:15:56 -05:00
source Switch max/min to use per window lock from event sync lock 2024-02-16 01:11:12 -05:00
static-files better handle slow connections on reconnect 2024-02-11 21:16:32 -05:00
templates Comment fixes 2024-02-18 20:40:55 -05:00
test add declare ignores 2022-07-18 22:58:52 -04:00
tools Replace deprocated APIs 2024-02-17 21:32:32 -05:00
tutorial Update date and comments 2024-02-03 22:52:09 -05:00
.gitattributes fix git attrib file 2022-09-02 08:29:28 -04:00
.gitignore Introduce a new low level creation for clog element: 'create-element' #286 2024-01-16 10:24:40 +08:00
ANDROID-TERMUX.md Update formatting 2023-12-28 14:36:39 -05:00
clean clean more 2024-02-02 09:34:46 -05:00
clog.asd Only depend on cl-issac if it will be used. 2023-02-08 19:47:15 -05:00
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md 2021-01-23 22:26:31 -05:00
CONCEPT.md just a couple of typos 2022-08-31 23:01:33 +05:30
LEARN.md Add video playlists 2024-02-01 23:07:30 -05:00
LICENSE add connection-body 2022-02-08 17:59:29 -05:00
MACOS.md Add tip for remapping command key to be a second meta on Mac 2022-06-09 13:57:28 -04:00
make-builder builder in clogframe 2022-09-02 17:53:38 -04:00
make-builder.bat add .bat files for windows 2024-02-16 00:21:11 -05:00
make-docs add .bat files for windows 2024-02-16 00:21:11 -05:00
make-docs.bat add .bat files for windows 2024-02-16 00:21:11 -05:00
NATIVE.md builder in clogframe 2022-09-02 17:53:38 -04:00
README.md add mention to use fixed branch of fast-websockets 2024-02-17 21:54:15 -05:00
run-builder more options for startup 2022-08-30 11:34:45 -04:00
run-builder.bat add .bat files for windows 2024-02-16 00:21:11 -05:00
run-render batch command line rendering of .clog files 2022-08-31 13:58:17 -04:00
VSCODE.md add js functions to clog.lisp 2024-02-07 10:45:32 -05:00
WEBSERVER.md update documentation, remove tabs 2022-07-18 22:26:37 -04:00
WINDOWS.md Update WINDOWS.md 2024-02-02 13:50:05 -05:00

README.md

CLOG - The Common Lisp Omnificent GUI

David Botton david@botton.com

License BSD 3-Clause License

Learn to program Common Lisp and CLOG here - LEARN.md

Video of CLOG Builder in action

Image of CLOG

The Common Lisp Omnificent GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work alongside, most cross-platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)

CLOG - Technical Overview and Purpose CLOG - Reference Manual

STATUS: CLOG and CLOG Builder 1.8 released.

CLOG is actually based on GNOGA, a framework I wrote for Ada in 2013 and used in commercial production code for the last 10+ years. CLOG itself is already used in commerical products, corporate websites, and other opensource projects.

CLOG is being actively extended with new tools and new custom controls but the core API is stable and proven, the Builder is rich in features. Check the github discussion boards for the latest.

Some potential applications for CLOG:

  • Cross-platform GUIs and Reports
  • Secure websites and complex interactive web applications
  • Mobile software (CLOG Runs native on Android and iOS)
  • Massive multiplayer online games
  • Monitoring software for embedded systems
  • A fun way to teach programming and advanced multi-tasking parallel programming techniques. (CLOG is a parallel GUI)
  • And the list goes on

The key to CLOG is the relationship it forms with a Browser window or Browser control compiled to native code. CLOG uses websockets for communications and the browser to render a GUI that maintains an active soft realtime connection. For most CLOG applications all programming logic, events and decisions are done on the server which can be local, or remote over the web.

CLOG is developed with ECL and SBCL, it is tested fairly regulary on Linux, Windows, Android, Rasperry Pi, and Mac. It should in theory work out of the box on any system with Quicklisp (although you could hand install) and CLACK (easily switched out and the ecl Android/iPhone branch for example doesn't use).

CLOG is in QuickLisp (ql:quickload :clog), however I recommend cloning CLOG into ~/common-lisp directory [or other quicklisp/asdf findable directory (push #P"path/to/dir/of/projects" ql:*local-project-directories*) ]:

For git (you need the ace editor plug in for the builder too from git):

cd ~/common-lisp
git clone https://github.com/rabbibotton/clog.git
git clone https://github.com/rabbibotton/clog-ace.git
git clone https://github.com/rabbibotton/clog-terminal.git

For now one, until fix integrated, should also clone a branch of fast-websockets
if using larger files in the builder:

https://github.com/rabbibotton/fast-websocket.git

To update in the future go to the created directories and type:

git pull


To add UltraLisp to QuickLisp (updates quicker than the standard QuickLisp):

To add UtraLisp to quicklisp install:
(ql-dist:install-dist "http://dist.ultralisp.org/"
                      :prompt nil)

To update to latest packages do _often_ to get the latest:
(ql:update-all-dists)

Then as always:
(ql:quickload :clog)

List of plugins for CLOG on UltraLisp - https://ultralisp.org/tags/clog-plugin/

To load this package and work through tutorials (assuming you have Quicklisp configured.)

Note: If using portacle for Windows you will need to update Quicklisp use (ql:update-dist "quicklisp") You will also likely need to copy the sqlite3 dll from https://www.sqlite.org/download.html to portacle\win\lib Consider a custom install on windows

  1. Start emacs then M-x slime
  2. In the REPL, run:
CL-USER> (ql:quickload :clog)
CL-USER> (clog:run-tutorial 1)

Tip for Windows WSL linux user. Install "sudo apt install xdg-utils" to install xdg-open so that run-tutorial uses the windows browser.

To see where the source, tutorial and demo files are:

CL-USER> (clog:clog-install-dir)

You can the run the demos with:

CL-USER> (ql:quickload :clog)
CL-USER> (clog:run-demo 1)

The CLOG Builder tool can be run with:

CL-USER> (ql:quickload :clog/tools)
CL-USER> (clog-tools:clog-builder)

You can also open a "clog-repl" window in your browser to play from the common-lisp repl:

CL-USER> (in-package clog-user)
CLOG-USER> (clog-repl)
CLOG-USER> (setf (background-color *body*) "beige")
CLOG-USER> (create-div *body* :content "Hello World!")

The clog-repl URL is http://127.0.0.1:8080/repl body will always refer to the last access of that URL.

To open a browser with the CLOG manual:

CL-USER> (clog:open-manual)

Work your way through the tutorials. You will see how quick and easy it is to be a CLOGer.

Image of clog-builder Image of clog-builder-web Image of demo1 Image of demo2 Image of demo3 Image of clog-db-admin Image of clog-web-containers

Here is a sample CLOG app:

(defpackage #:clog-user               ; Setup a package for our work to exist in
  (:use #:cl #:clog)                  ; Use the Common Lisp language and CLOG
  (:export start-tutorial))           ; Export as public the start-tutorial function

(in-package :clog-user)               ; Tell the "reader" we are in the clog-user package


;; Define our CLOG application
(defun on-new-window (body)           ; Define the function called on-new-window
  "On-new-window handler."            ; Optional docstring to describe function

  (let ((hello-element                ; hello-element is a local variable that
                                      ; will be bound to our new CLOG-Element

      ;; This application simply creates a CLOG-Element as a child to the
      ;; CLOG-body object in the browser window.

      ;; A CLOG-Element represents a block of HTML (we will later see ways to
      ;; directly create buttons and all sorts of HTML elements in more
      ;; lisp-like ways with no knowledge of HTML or JavaScript.
      (create-child body "<h1>Hello World! (click me!)</h1>")))

    (set-on-click hello-element      ; Now we set a function to handle clicks
          (lambda (obj)              ; In this case we use an anonymous function
            (setf (color hello-element) "green"))))))

;; To see all the events one can set and the many properties and styles that
;; exist, refer to the CLOG manual or the file clog-element.lisp


(defun start-tutorial ()   ; Define the function called start-tutorial
  "Start tutorial."        ; Optional docstring to describe function

  ;; Initialize the CLOG system
  (initialize #'on-new-window)
  ;; Set the function on-new-window to execute
  ;; every time a browser connection to our app.
  ;; #' tells Common Lisp to pass the function
  ;; to intialize and not to execute it.


  ;; Open a browser to http://12.0.0.1:8080 - the default for CLOG apps
  (open-browser))

Other samples of CLOG on the web:

Websites/apps made with CLOG

  • clogpower.com
  • ackfock.com

CLOG Builder Tutorials

  1. Chat App https://www.reddit.com/r/lisp/comments/sj1tv5/clog_builder_tutorial_1_a_chat_app_from_start_to/
  2. Building a Web Page https://www.reddit.com/r/lisp/comments/sn8j77/clog_builder_tutorial_2_building_a_web_page/
  3. Importing HTML in to Builder, Adding Pages and Hand Coding https://www.reddit.com/r/lisp/comments/snvv0w/clog_builder_tutorial_3_importing_html_adding/
  4. CLOS-CONTACT - Using database controls demos a contact manager app in clog. https://www.reddit.com/r/lisp/comments/t61sib/clog_builder_tutorial_4_a_complete_database_app/
  5. Using and Creating Custom Controls https://www.reddit.com/r/lisp/comments/w2d6dr/builder_tutorial_5_using_and_creating_lisp_custom/

CLOG Tutorials

CLOG Demos

CLOG Video Series - CLOG Plunger

CLOG Extras - Supplementary Video Series

Common Lisp The Language - Supplementary programming tutorials

A series covering Common Lisp, highlighting key points and discussions on using the key reference to Common Lisp. Quick paced and intended for review further work on mastering the power of Common using the book: Common Lisp The Language 2nd Edition by Guy L. Steele

Tool Summary

  • clog-builder - Rapid visual interactive development for Web and GUIs
  • clog-db-admin - SQLite3 admin tool

High Order Extensions to CLOG

  • clog-gui - Desktop over the web

    • Menus
    • Windowing system
    • Modal windows, Keep-on-top windows
    • File Load / Save dialogs
    • Alert, Input and Confirmation dialogs
    • Form dialogs

  • clog-web - Webpage creation

    • Auto column layouts
    • 12 Point Grid System layouts
    • Content containers
    • Panels
    • Sidebar menus
    • Compositor containers
    • Menus
    • Alerts

  • clog-web-site - Instant themed websites with plugins:

    • clog-web-page - create a theme based page
    • clog-web-dbi - database driven websites (uses clog-auth)
    • clog-web-forms - Instant web forms
    • clog-web-themes - basic themes for clog based websites
    • clog-web-content - database driven content,tags, comments (in progress)
    • clog-web-blog - instant blogs (in progress)
    • clog-web-cart - instant shopping carts (future)

  • clog-panels - Quick application layouts

  • clog-presentations - bi-directional linking of Lisp Objects and CLOG Objects

  • clog-jquery - DOM queries

  • clog-data - Move data to and from groups of controls

    • SQL writer helpers for basic SQL
    • CLOG-Database - Database control for CLOG Builder
    • CLOG-One-Row - One row at a time table access auto binds to controls in CLOG Builder
    • CLOG-Lookup - Version of the select control (dropdown and listbox) that are database connected
    • CLOG-DB-Table - Version of html table that are database connected

  • clog-auth - Authentication and authorization framework

  • clog-plugin - Custom Control Plug-in template for Builder and CLOG