Start of multimedia additions

README.md

@@ -16,11 +16,11 @@ 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.)
 
-STATUS: CLOG is complete enough for most uses. While there are loose
+STATUS: CLOG is complete enough for most uses. See below for some
-ends (multimedia, database integrations), CLOG is actually based on
+enhacements bing worked on, CLOG is actually based on GNOGA, a
-GNOGA, a framework I wrote for Ada in 2013 and used in commercial
+framework I wrote for Ada in 2013 and used in commercial production
-production code for the last 6 years, i.e. the techiniques CLOG uses
+code for the last 6 years, i.e. the techiniques CLOG uses are solid
-are solid and proven.
+and proven.
 
 Some potential applications for CLOG:
 

clog-docs.lisp

@@ -13,17 +13,13 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defsection @clog-getting-started (:title "CLOG Getting Started")
-"# CLOG - The Common Lisp Omnificent GUI
+"CLOG - The Common Lisp Omnificent GUI
 
-## David Botton <david@botton.com>
+David Botton <david@botton.com>
 
 License BSD 3-Clause License
 
-View the HTML Documentation:
+- Introduction
-
-https://rabbibotton.github.io/clog/clog-manual.html
-
-### Introduction
 
 The Common Lisp Omnificent GUI, CLOG for short, uses web technology to
 produce graphical user interfaces for applications locally or remotely.
@@ -32,11 +28,11 @@ 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.)
 
-STATUS: CLOG is complete enough for most uses. While there are loose
+STATUS: CLOG is complete enough for most uses. See the README.md for
-ends (multimedia, database integrations), CLOG is actually based on
+some enhacements bing worked on, CLOG is actually based on GNOGA, a
-GNOGA, a framework I wrote for Ada in 2013 and used in commercial
+framework I wrote for Ada in 2013 and used in commercial production
-production code for the last 6 years, i.e. the techiniques CLOG uses
+code for the last 6 years, i.e. the techiniques CLOG uses are solid
-are solid and proven.
+and proven.
 
 Some potential applications for CLOG:
 
@@ -255,7 +251,7 @@ From clog-window
 ")
 
 (defsection @clog-internals (:title "CLOG Framework internals and extensions")
-"## Responding to new java script DOM events
+"Responding to new java script DOM events
 
 If there is no data for the event just changing the name of the event is
 sufficient in this example:

clog-multimedia.lisp

@@ -0,0 +1,120 @@
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;; CLOG - The Common Lisp Omnificent GUI                                 ;;;;
+;;;; (c) 2020-2021 David Botton                                            ;;;;
+;;;; License BSD 3 Clause                                                  ;;;;
+;;;;                                                                       ;;;;
+;;;; clog-mulitmedia.lisp                                                  ;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(cl:in-package :clog)
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-multimedia
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-multimedia (clog-element)()
+  (:documentation "CLOG Multimedia base class."))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-audio
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-audio (clog-multimedia)()
+  (:documentation "CLOG Audio class."))
+
+;;;;;;;;;;;;;;;;;;
+;; create-audio ;;
+;;;;;;;;;;;;;;;;;;
+
+(defgeneric create-audio (clog-obj &key
+				     source
+				     controls
+				     preload
+				     autoplay
+				     autoloop
+				     muted
+				     auto-place)
+  (:documentation "Create a CLOG Audio control"))
+
+(defmethod create-audio ((obj clog-obj)
+			 &key (source "")
+			   (controls t)
+			   (preload  nil)
+			   (autoplay nil)
+			   (autoloop nil)
+			   (muted    nil)
+			   (auto-place t))
+  (create-child obj (format nil "<audio~A~A~A~A~A~A/>"
+			    (if (equal source "")
+				""
+				(format nil " src='~A'" (escape-string source)))
+			    (if controls
+				" controls"
+				"")
+			    (if preload
+				" preload='auto'"
+				"")
+			    (if autoplay
+				" autoplay"
+				"")
+			    (if autoloop
+				" loop"
+				"")
+			    (if muted
+				" muted"
+				""))
+		:clog-type 'clog-audio :auto-place auto-place))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-video
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-video (clog-multimedia)()
+  (:documentation "CLOG Video class."))
+
+(defgeneric create-video (clog-obj &key
+				     source
+				     controls
+				     preload
+				     poster
+				     autoplay
+				     autoloop
+				     muted
+				     auto-place)
+(:documentation "Create a CLOG video control"))
+
+(defmethod create-video ((obj clog-obj)
+			&key (source "")
+			  (controls t)
+			  (preload  nil)
+			  (poster   "")
+			  (autoplay nil)
+			  (autoloop nil)
+			  (muted    nil)
+			  (auto-place t))
+  (create-child obj (format nil "<video~A~A~A~A~A~A~A/>"
+			    (if (equal source "")
+				""
+				(format nil " src='~A'" (escape-string source)))
+			    (if controls
+				" controls"
+				"")
+			    (if preload
+				" preload='auto'"
+				"")
+			    (if (equal poster "")
+				""
+				(format nil " poster='~A'" (escape-string poster)))
+			    (if autoplay
+				" autoplay"
+				"")
+			    (if autoloop
+				" loop"
+				"")
+			    (if muted
+				" muted"
+				""))			    
+		:clog-type 'clog-video :auto-place auto-place))
+

clog.asd

@@ -5,7 +5,7 @@
 
   :author "David Botton <david@botton.com>"
   :license  "BSD"
-  :version "0.2.0"
+  :version "0.8.0"
   :serial t
   :depends-on (#:clack #:websocket-driver #:alexandria #:hunchentoot #:cl-ppcre
 		       #:bordeaux-threads #:trivial-open-browser
@@ -21,6 +21,7 @@
 	       (:file "clog-element-common")
 	       (:file "clog-canvas")
 	       (:file "clog-form")
+	       (:file "clog-multimedia")
 	       (:file "clog-window")
 	       (:file "clog-document")
 	       (:file "clog-location")

clog.lisp

@@ -37,6 +37,7 @@ embedded in a native template application.)"
   (@clog-element-common  section)
   (@clog-form            section)
   (@clog-canvas          section)
+  (@clog-multimedia      section)
   (@clog-body            section)
   (@clog-window          section)
   (@clog-document        section)
@@ -430,6 +431,16 @@ embedded in a native template application.)"
   (canvas-save         generic-function)
   (canvas-restore      generic-function))
 
+(defsection @clog-multimedia (:title "CLOG Multimedia Objects")
+  "CLOG-Multimedia - Base Class for CLOG multimedia objects"
+  (clog-multimedia class)
+
+  (clog-audio     class)
+  (create-audio   generic-function)
+
+  (clog-video     class)
+  (create-video   generic-function))
+  
 (defsection @clog-body (:title "CLOG Body Objects")
   "CLOG-Body - CLOG Body Objects"
   (clog-body class)

doc/clog-manual.html

@@ -67,17 +67,15 @@ embedded in a native template application.)</p>
 
 <h2><a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29">1 CLOG Getting Started</a></h2>
 
-<h1><code>CLOG</code> - The Common Lisp Omnificent GUI</h1>
+<p><code>CLOG</code> - The Common Lisp Omnificent GUI</p>
 
-<h2>David Botton <a href="m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;">m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;</a></h2>
+<p>David Botton <a href="m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;">m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;</a></p>
 
 <p>License BSD 3-Clause License</p>
 
-<p>View the <code>HTML</code> Documentation:</p>
+<ul>
-
+<li>Introduction</li>
-<p>https://rabbibotton.github.io/clog/clog-manual.html</p>
+</ul>
-
-<h3>Introduction</h3>
 
 <p>The Common Lisp Omnificent GUI, <code>CLOG</code> for short, uses web technology to
 produce graphical user interfaces for applications locally or remotely.
@@ -86,11 +84,11 @@ frameworks and website frameworks. The <code>CLOG</code> package starts up the
 connectivity to the browser or other websocket client (often a browser
 embedded in a native template application.)</p>
 
-<p>STATUS: <code>CLOG</code> is complete enough for most uses. While there are loose
+<p>STATUS: <code>CLOG</code> is complete enough for most uses. See the README.md for
-ends (multimedia, database integrations), <code>CLOG</code> is actually based on
+some enhacements bing worked on, <code>CLOG</code> is actually based on GNOGA, a
-GNOGA, a framework I wrote for Ada in 2013 and used in commercial
+framework I wrote for Ada in 2013 and used in commercial production
-production code for the last 6 years, i.e. the techiniques <code>CLOG</code> uses
+code for the last 6 years, i.e. the techiniques <code>CLOG</code> uses are solid
-are solid and proven.</p>
+and proven.</p>
 
 <p>Some potential applications for <code>CLOG</code>:</p>
 
@@ -3765,7 +3763,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
 
 <h2><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29">16 CLOG Framework internals and extensions</a></h2>
 
-<h2>Responding to new java script DOM events</h2>
+<p>Responding to new java script DOM events</p>
 
 <p>If there is no data for the event just changing the name of the event is
 sufficient in this example:</p>

tutorial/15-tutorial.lisp

@@ -0,0 +1,17 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4")
+  (create-audio body :source "https://www.w3schools.com/html/horse.ogg")
+  
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window)
+  (open-browser))