add item model example; revisions

doc/help.htm

@@ -121,9 +121,12 @@
   up to 10 arguments of the following types:
   T, NIL, INTEGER, FLOAT, STRING, VECTOR of octets, and (nested) lists of
   mentioned arguments.
+  A special use case is to populate an item model in QML (using a trivial JS
+  glue code function) which expects a JS dictionary, see example below.
   N.B: Does not work with JS default arguments.
 
     (qjs |drawLine| *canvas* x1 y1 x2 y2))
+    (qjs |addPlanet| *planets* (list :name "Jupiter" :src "img/jupiter.png"))
 
 
 <b>qlater (function)</b>

examples/copy-template.lisp

@@ -42,7 +42,7 @@
                                 "/app-template/"
                                 from)))
     (if (probe-file to)
-        (format t "~&skipping exisitng file: ~A" to)
+        (format t "~&skipping existing file: ~A" to)
         (progn
           (format t "~&copying file: ~A" to)
           (ensure-directories-exist to)

examples/planets/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

examples/planets/lisp/main.lisp

@@ -0,0 +1,77 @@
+(in-package :app)
+
+;;; QML items
+
+(defvar *planets* "planets") ; ListModel
+
+;;; We can't call 'planets.append()' directly from Lisp (because its argument
+;;; type is a JS object pointer); instead we use a trivial JS glue code
+;;; function. The advantage of calling a user defined JS function is that we
+;;; can directly pass (nested) Lisp lists.
+;;;
+;;; A special case is a Lisp list whose first element is a Lisp keyword, like
+;;; below. In this case, the list is converted to a QVariantMap, which on JS
+;;; side is equal to a JS dictionary, and can therefore directly be used to
+;;; populate an item model.
+;;;
+;;; QML methods which only expect primitive argument types can of course be
+;;; called directly, for example:
+;;;
+;;;   (q! |remove| *planets* 0)
+;;;   (q! |clear| *planets*)
+
+(defun populate-item-model ()
+  (q! |clear| *planets*)
+  (qjs |addPlanet| *planets*
+       (list :name  "Sun"
+             :shape "img/sun.png"
+             :map   "img/sun-map.jpg"
+             :info  #.(read-file "txt/sun.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Mercury"
+             :shape "img/mercury.png"
+             :map   "img/mercury-map.jpg"
+             :info  #.(read-file "txt/mercury.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Venus"
+             :shape "img/venus.png"
+             :map   "img/venus-map.jpg"
+             :info  #.(read-file "txt/venus.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Earth"
+             :shape "img/earth.png"
+             :map   "img/earth-map.jpg"
+             :info  #.(read-file "txt/earth.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Moon"
+             :shape "img/moon.png"
+             :map   "img/moon-map.jpg"
+             :info  #.(read-file "txt/moon.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name "Mars"
+             :shape "img/mars.png"
+             :map   "img/mars-map.jpg"
+             :info #.(read-file "txt/mars.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Jupiter"
+             :shape "img/jupiter.png"
+             :map   "img/jupiter-map.jpg"
+             :info  #.(read-file "txt/jupiter.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Saturn"
+             :shape "img/saturn.png"
+             :map   "img/saturn-map.jpg"
+             :info  #.(read-file "txt/saturn.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Uranus"
+             :shape "img/uranus.png"
+             :map   "img/uranus-map.jpg"
+             :info  #.(read-file "txt/uranus.txt")))
+  (qjs |addPlanet| *planets*
+       (list :name  "Neptune"
+             :shape "img/neptune.png"
+             :map   "img/neptune-map.jpg"
+             :info  #.(read-file "txt/neptune.txt"))))
+
+(populate-item-model)
+

examples/planets/lisp/package.lisp

@@ -0,0 +1,6 @@
+(defpackage :app
+  (:use :cl :qml)
+  (:export
+  #:*planets*
+  #:populate-item-model))
+

examples/planets/lisp/txt/earth.txt

@@ -0,0 +1,3 @@
+The Earth is the third planet in the Solar System. It is the largest of the terrestrial planets and is the only known planet which has life as we know it. The surface of the planet is approximately two-thirds covered in water. The atmosphere is roughly 78% nitrogen and 21% oxygen, with trace amounts of water vapor, carbon dioxide, and other elements.
+
+Earth is surrounded by a magnetic field powerful enough to prevent most of the Sun's radiation from reaching the Earth and harming the life on it. This field has been decaying at a known exponential rate, as decades of recordkeeping reveal.

examples/planets/lisp/txt/jupiter.txt

@@ -0,0 +1,3 @@
+Jupiter is the fifth planet from the sun, and the most massive. In fact, this gas giant is the largest body in the solar system except for the sun itself, and more than two times as massive as all the other planets combined. In composition it closely resembles a star, so much so that some authorities hold that had it been eighty times as massive, it would have become a star. 
+
+Named after the ruler of the Roman gods, Jupiter is large and bright enough to be seen by the naked eye. In fact it is the fourth-brightest object in the night sky, after the Sun, the Moon, and the planet Venus.

examples/planets/lisp/txt/mars.txt

@@ -0,0 +1,3 @@
+Mars is the fourth planet from the Sun, after Mercury, Venus, and Earth. It is called "The Red Planet" on account of the iron oxide that covers much of its suface. 
+
+Mars has the Roman name of the classical god of war. This name in turn derives from the Greek name Ares for this god. (The traditional symbol of Mars is his shield and spear.) The ancient Egyptians simply called Mars Her Descher, or "the red one." The Hindus call Mars Mangala, one of the Navagraha. The Maya people also tracked Mars regularly. 

examples/planets/lisp/txt/mercury.txt

@@ -0,0 +1,4 @@
+Mercury is the smallest planet in the Solar System and the closest to the Sun. It orbits the Sun in 88 Earth days and rotates on its axis every 58.6 Earth days, which is 3 rotations for every two orbits (called "3:2 resonance"). It can be seen from Earth only at sunrise and sunset.
+Mercury is one of the five brightest planets.
+
+As with the other planets of the solar system, it was named after a Roman mythological figure, in this case the messenger god Mercury who is known as Hermes in Greek. 

examples/planets/lisp/txt/moon.txt

@@ -0,0 +1,4 @@
+The Moon is unique in the solar system in its large relative size compared with the Earth. The Moon appears from the Earth to be the same size as the sun, in perfect artistic symmetry, unlike any known other planet-moon system. Moreover, unlike most planets in the solar system, Earth has only one moon, which is designed in two remarkable ways:
+
+(1) it rotates and revolves such that only one side is ever visible to the Earth (the possibly only moon with this characteristic) and
+(2) its side that faces the Earth is smooth, while the side that remains hidden is jagged. To those on Earth the Moon appears as an artistic disc that goes through phases of varying visibility from Earth.

examples/planets/lisp/txt/neptune.txt

@@ -0,0 +1,3 @@
+Neptune is the eighth and farthest planet from the sun. It was discovered in 1846 by German astronomer Johann Gotfried Galle based on orbital calculations by French mathematician Urbain Le Verrier. 
+
+In 1781, William Herschel discovered Neptune's twin Uranus. But astronomers noticed that that planet's orbit deviated from the strict Newtonian model. John Couch Adams and Le Verrier independently predicted another planet beyond Uranus to account for these irregular motions. Though Adams never published his predictions, Le Verrier did. Galle and his student Heinrich L. d'Arrest used those predictions to help him search the sky, and he found the eighth planet within one degree of where Le Verrier's numbers predicted it to be.

examples/planets/lisp/txt/saturn.txt

@@ -0,0 +1,3 @@
+Saturn is the sixth planet from the sun and the second largest planet in the solar system. Saturn is a gas giant with an atmosphere predominantly of hydrogen, with a small fraction of helium and trace amounts of several other compounds. The most prominent feature of Saturn is its ring system, which has been known to astronomy since less than half a century after the invention of the telescope and was for more than three centuries the only ring system known to man. 
+
+Saturn has been known to post-diluvian man since the beginnings of recorded history. The Hindus called Saturn Sani, one of nine objects called the Navagraha that constituted a celestial council. 

examples/planets/lisp/txt/sun.txt

@@ -0,0 +1,3 @@
+The Sun, also known by the Latin name Sol and the Greek name Helios, is a yellow dwarf star of spectral type G2V. The eight planets, including Earth, orbit the sun, as do countless other objects.
+
+The sun a classified as spectral class G2V. The "G" means it is a moderately warm yellow star. The "2" means it is in the third hottest group of stars within type "G" (the scale runs from 0 to 9). The "V" is a Roman numeral for 5 and indicates the Sun's size. A size V star is a dwarf, main sequence star. The sun is in the 95th percentile in its class by size and mass of other stars in its immediate region. 

examples/planets/lisp/txt/uranus.txt

@@ -0,0 +1,3 @@
+Uranus is the seventh planet from the Sun, and the third largest. To superficial appearances, it is featureless and dull. Yet, the circumstances of its formation and the characteristics of the system of moons and rings that encircle it make it one of the most remarkable planets in all the Solar System. 
+
+William Herschel discovered Uranus in 1781. He therefore earned a distinction as the first astronomer to discover a planet not previously known to the ancients. He at first wished to name this world "The Georgian Sidus" after King George III of Great Britain. But Johann Bode named Uranus after the convention of naming planets after classical gods and goddesses. In this case, Bode named Uranus after the god of heaven and father of all the other classical gods.

examples/planets/lisp/txt/venus.txt

@@ -0,0 +1,3 @@
+Venus, otherwise known as the "Evening Star" and the "Morning Star," is the second planet from the sun, the closest planet to Earth in size, and the planet that approaches closer to Earth than any other planet. 
+
+Venus is the Roman name of the goddess of love and beauty. Venus is identified with Astarte, or Ishtar, chief goddess of Babylon. Venus was also known to the ancient civilizations of the Americas; the Aztecs called it Tlahuizcalpantecuhtli, or Quetzalcoatl, and the Mayans Kukulcan. In addition, all the geographical features of Venus are named for goddesses from one body of mythology or another. 

examples/planets/lisp/utils.lisp

@@ -0,0 +1,9 @@
+(in-package :app)
+
+(defun read-file (file)
+  (with-open-file (s (merge-pathnames file (or *compile-file-truename*
+                                               *load-truename*)))
+    (let ((str (make-string (file-length s))))
+      (read-sequence str s)
+      str)))
+

examples/planets/qml/main.qml

@@ -0,0 +1,194 @@
+import QtQuick 2.15
+import Lisp 1.0
+
+Item {
+  id: main
+  objectName: "main"
+  width: 300
+  height: 480
+
+  Rectangle {
+    anchors.fill: parent
+    color: "#101010"
+  }
+
+  ListView {
+    id: view
+    objectName: "view"
+    anchors.fill: parent
+    delegate: planetInfo
+    model: planets
+  }
+
+  ListModel {
+    id: planets
+    objectName: "planets"
+
+    // example
+    //ListElement { name: "Earth"; shape: "img/earth.png"; map: "img/earth-map.jpg"; info: "..." }
+
+    function addPlanet(planet) {
+      append(planet)
+    }
+  }
+
+  property int itemHeight: 35
+
+  Component {
+    id: planetInfo
+
+    Item {
+      id: wrapper
+      width: view.width
+      height: itemHeight
+
+      Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: itemHeight
+        color: "#303060"
+        border.color: Qt.lighter(color, 1.2)
+
+        Text {
+          x: 15
+          anchors.verticalCenter: parent.verticalCenter
+          anchors.leftMargin: 4
+          font.pixelSize: parent.height - 12
+          color: "#f0f0f0"
+          text: name // see Lisp keyword name
+        }
+      }
+
+      Rectangle {
+        id: image
+        width: itemHeight - 4
+        height: width
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: 2
+        anchors.topMargin: 2
+        color: "#101010"
+
+        Column {
+          id: imageColumn
+          anchors.fill: parent
+
+          Image {
+            id: shapeImage
+            height: parent.height / (mapImage.visible ? 2 : 1)
+            width: parent.width
+            fillMode: Image.PreserveAspectFit
+            source: shape // see Lisp keyword name
+          }
+
+          Image {
+            id: mapImage
+            width: parent.width
+            fillMode: Image.PreserveAspectFit
+            visible: (wrapper.state === "expanded")
+            source: map // see Lisp keyword name
+          }
+        }
+      }
+
+      MouseArea {
+        anchors.fill: parent
+        onClicked: parent.state = "expanded"
+      }
+
+      Item {
+        id: infoView
+        anchors.top: image.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        opacity: 0
+
+        Rectangle {
+          anchors.fill: parent
+          color: "lightyellow"
+          border.color: "#101010"
+          border.width: 1
+
+          Flickable {
+            id: flick
+            anchors.fill: parent
+            anchors.margins: 4
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            clip: true
+
+            function ensureVisible(r) {
+              if (contentX >= r.x)
+                contentX = r.x;
+              else if (contentX+width <= r.x + r.width)
+                contentX = r.x + r.width-width;
+              if (contentY >= r.y)
+                contentY = r.y;
+              else if (contentY+height <= r.y + r.height)
+                contentY = r.y + r.height-height;
+            }
+
+            TextEdit {
+              id: edit
+              readOnly: true
+              width: flick.width
+              font.pixelSize: 14
+              focus: true
+              wrapMode: TextEdit.Wrap
+              onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+              text: info // see Lisp keyword name
+            }
+          }
+        }
+      }
+
+      Rectangle {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: 2
+        anchors.topMargin: 2
+        width: itemHeight - 4
+        height: width
+        color: "transparent"
+        border.color: "#f0f0f0"
+        opacity: 0
+
+        Text {
+          anchors.centerIn: parent
+          color: "#f0f0f0"
+          font.bold: true
+          text: "X"
+        }
+
+        MouseArea {
+          anchors.fill: parent
+          onClicked: wrapper.state = ""
+        }
+      }
+
+      states: [
+        State {
+          name: "expanded"
+
+          PropertyChanges { target: wrapper; height: view.height }
+          PropertyChanges { target: image; width: view.width; height: view.height * 2/3; anchors.rightMargin: 0; anchors.topMargin: itemHeight }
+          PropertyChanges { target: infoView; opacity: 1 }
+          PropertyChanges { target: closeButton; opacity: 1 }
+          PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
+        }
+      ]
+
+      transitions: [
+        Transition {
+          NumberAnimation {
+            duration: 250
+            properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
+          }
+        }
+      ]
+    }
+  }
+}

examples/planets/readme.md

@@ -0,0 +1,34 @@
+
+Prepare
+-------
+
+Please copy the app template files first:
+```
+$ cd ..
+$ ./copy.sh planets
+```
+
+
+Info
+----
+
+This shows how to populate a QML item model from Lisp.
+
+The QML code is a modified version of an example found in the Qt6 QML book. The
+images are taken from the qt3d planets-qml example.
+
+
+
+Run
+---
+
+```
+lqml run.lisp
+```
+Optionally pass `-slime` to start a Swank server, and connect from Emacs with
+`M-x slime-connect`.
+
+Closing the window quits the app. If you try to kill it with `ctrl-c`, you need
+an additional `ctrl-d` to exit from ECL. To quit from Slime, do `(qq)` which is
+short for `(qquit)`.
+

examples/readme.md

@@ -1,6 +1,6 @@
 To add a new app from the template, run:
 
 ```
-$ ecl -shell copy-template.lisp <name>
+$ ./copy.sh <name>
 ```
 

src/cpp/ecl_fun.h

@@ -19,6 +19,12 @@ extern QVariant ecl_fun(
   const QVariant& = QVariant(),
   const QVariant& = QVariant(),
   const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
   const QVariant& = QVariant());
 
 QT_END_NAMESPACE

src/cpp/main.cpp

@@ -54,10 +54,6 @@ int main(int argc, char* argv[]) {
     exit(0);
   }
 
-#ifdef INI_LISP
-  ecl_init_module(NULL, ini_app);
-#endif
-
   new QQmlFileSelector(view.engine(), &view);
   QString qml("qml/main.qml");
   QUrl url;
@@ -84,6 +80,10 @@ int main(int argc, char* argv[]) {
     LQML::eval("(x:when-it (probe-file \"~/.eclrc\") (load x:it))");
   }
 
+#ifdef INI_LISP
+  ecl_init_module(NULL, ini_app);
+#endif
+
   bool slime = false;
   if (arguments.contains("-slime")
 #if QT_VERSION < 0x060000

src/cpp/marshal.cpp

@@ -165,12 +165,37 @@ QVariant toQVariant(cl_object l_arg, int type) {
   return var;
 }
 
+QString toCamelCase(const QString& name) {
+  // convert Lisp name to Qt name
+  QString qtName(name);
+  int j = 0;
+  for (int i = 0; i < name.length(); i++, j++) {
+    qtName[j] = (name.at(i) == QChar('-'))
+                ? name.at(++i).toUpper() : name.at(i);
+  }
+  qtName.truncate(j);
+  return qtName;
+}
+
 QVariantList toQVariantList(cl_object l_list) {
   QVariantList l;
   if (ECL_LISTP(l_list)) {
-    for (cl_object l_do_list = l_list; l_do_list != ECL_NIL; l_do_list = cl_cdr(l_do_list)) {
-      cl_object l_el = cl_car(l_do_list);
-      l << toQVariant(l_el);
+    // special case: QVariantMap (for JS dictionary in QML)
+    // for e.g. populating a Model in QML
+    if (cl_keywordp(cl_first(l_list))) {
+      QVariantMap map;
+      cl_object l_do_args = l_list;
+      while (l_do_args != ECL_NIL) {
+        map.insert(toCamelCase(toQString(cl_symbol_name(cl_first(l_do_args))).toLower()),
+                   toQVariant(cl_second(l_do_args)));
+        l_do_args = cl_cddr(l_do_args);
+      }
+      l << map;
+    } else {
+      for (cl_object l_do_list = l_list; l_do_list != ECL_NIL; l_do_list = cl_cdr(l_do_list)) {
+        cl_object l_el = cl_car(l_do_list);
+        l << toQVariant(l_el);
+      }
     }
   }
   return l;

src/cpp/marshal.h

@@ -93,6 +93,8 @@ cl_object from_qstring(const QString&);
 cl_object from_qvariant(const QVariant&);
 cl_object from_qobject_pointer(QObject*);
 
+QString toCamelCase(const QString&);
+
 QT_END_NAMESPACE
 
 #endif

src/cpp/qt_ecl.cpp

@@ -33,7 +33,13 @@ QVariant ecl_fun(const QByteArray& pkgFun,
                  const QVariant& a7,
                  const QVariant& a8,
                  const QVariant& a9,
-                 const QVariant& a10) {
+                 const QVariant& a10,
+                 const QVariant& a11,
+                 const QVariant& a12,
+                 const QVariant& a13,
+                 const QVariant& a14,
+                 const QVariant& a15,
+                 const QVariant& a16) {
   void* symbol = lisp_functions.value(pkgFun);
   if (!symbol) {
     int p = pkgFun.indexOf(':');
@@ -57,7 +63,19 @@ QVariant ecl_fun(const QByteArray& pkgFun,
               if (!a7.isNull()) { PUSH_ARG(a7);
                 if (!a8.isNull()) { PUSH_ARG(a8);
                   if (!a9.isNull()) { PUSH_ARG(a9);
-                    if (!a10.isNull()) { PUSH_ARG(a10); }
+                    if (!a10.isNull()) { PUSH_ARG(a10);
+                      if (!a11.isNull()) { PUSH_ARG(a11);
+                        if (!a12.isNull()) { PUSH_ARG(a12);
+                          if (!a13.isNull()) { PUSH_ARG(a13);
+                            if (!a14.isNull()) { PUSH_ARG(a14);
+                              if (!a15.isNull()) { PUSH_ARG(a15);
+                                if (!a16.isNull()) { PUSH_ARG(a16); }
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
                   }
                 }
               }

src/cpp/qt_ecl.h

@@ -16,6 +16,12 @@ QVariant ecl_fun(
   const QVariant& = QVariant(),
   const QVariant& = QVariant(),
   const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
+  const QVariant& = QVariant(),
   const QVariant& = QVariant());
 
 QT_END_NAMESPACE

src/lisp/qml.lisp

@@ -166,8 +166,11 @@
   up to 10 arguments of the following types:
   T, NIL, INTEGER, FLOAT, STRING, VECTOR of octets, and (nested) lists of
   mentioned arguments.
+  A special use case is to populate an item model in QML (using a trivial JS
+  glue code function) which expects a JS dictionary, see example below.
   N.B: Does not work with JS default arguments.
-    (qjs |drawLine| *canvas* x1 y1 x2 y2))"
+    (qjs |drawLine| *canvas* x1 y1 x2 y2))
+    (qjs |addPlanet| *planets* (list :name \"Jupiter\" :src \"img/jupiter.png\"))"
   `(qrun* (qfun (quick-item ,item/name)
                 ,(if (symbolp method-name)
                      (symbol-name method-name)