SVG widget in GNU Emacs

 



(Top) SVG sprite sheet (Bottom) widgets from sprite sheet

(Left) SVG widget in Emacs buffer


Now you can use SVG widget in GNU Emacs. That is, use an SVG image or fragment as background for push-button widget in Emacs buffer. You can also specify the width and height of the widget for finer control. Generally speaking, you can use any type of image for this purpose. But SVG suits best because you can draw widget of any size without any distortion.
 
The ability to use SVG fragment means you can define multiple symbols in an SVG and use the same as a sprite sheet or a symbol library for your UI requirements. Thus the number of files to be managed is reduced. An SVG symbol library is a simple SVG file with each symbol as a direct descendant of the root node. Video above shows an example of such usage.

Another use case would be better looking customize form. Or at the very least, rounded "Save" and "Cancel" buttons. In other words, a more visually appealing UI in graphical environments while maintaining the promise of Emacs in terminal.

Code: https://gitlab.com/atamariya/emacs/-/blob/dev/lisp/svg.el

Patch
modified   lisp/wid-edit.el
@@ -353,6 +353,7 @@ widget-specify-button
   "Specify button for WIDGET between FROM and TO."
   (let ((overlay (make-overlay from to nil t nil))
     (follow-link (widget-get widget :follow-link))
+    (display (widget-get widget :display))
     (help-echo (widget-get widget :help-echo)))
     (widget-put widget :button-overlay overlay)
     (if (functionp help-echo)
@@ -360,6 +361,7 @@ widget-specify-button
     (overlay-put overlay 'button widget)
     (overlay-put overlay 'keymap (widget-get widget :keymap))
     (overlay-put overlay 'evaporate t)
+    (overlay-put overlay 'display display)
     ;; We want to avoid the face with image buttons.
     (unless (widget-get widget :suppress-face)
       (overlay-put overlay 'face (widget-apply widget :button-face-get))


Usage
(load "~/svg.el") 

(defun test()
  (let ((file "~/c.svg")
        image)
    (with-current-buffer (find-file-noselect file)
      (setq image (libxml-parse-xml-region (point-min) (point-max))))
    ;; Handle XML PI
    (when (and image (eq (dom-tag image) 'top))
      (setq image (car (dom-by-tag image 'svg))))
    (canvas--scrub-image image)
    (dolist (el (dom-children image))
      (svg-widget image el 100 100 :help-echo "This is an SVG widget"))))

 
c.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="-2 -1 8 8">
  <defs>
    <circle id="c1" cx="0" cy="0" r="1"/>
    <circle id="c2" cx="0" cy="0" r="1"/>
    <rect   id="c2" x="0" y="0" width="1" height="1"/>
    <path   id="c" d="M 0,0 0.5,0.5 .75,0 1,0.5 z"/>
  </defs>
  <use href="#c1" x="0" y="0" fill="red"/>
  <use href="#c" x="1" y="1"/>
  <use href="#c" x="1" y="1" transform="rotate(90)"/>
  <use href="#c" x="0" y="0" transform="rotate(45,1,1)"/>
</svg>

 

 



 





Comments

Post a Comment

Popular posts from this blog

GNU Emacs as a Comic Book Reader

Image
  Comics are available in digital format as a collection of images in a compressed ZIP or RAR file (.cbz or .cbr file extension respectively). These can be enjoyed in GNU Emacs with full access to image viewing capabilities using keybindings.   # Make sure you have unrar installed for CBR files # apt install unrar   (require 'arc2-mode)   (setq archive-summarize-files-fn 'archive-summarize-files-as-thumb)     Note: The archive-mode is capable of displaying the list of files in an archive; though it depends on external tools for extraction. For JPG and PNG, Emacs can resize the image without external convertor (ie. imagemagick). However, some menu options for image transformations in image-mode might not be available. Use the following patch for image-mode.el . @@ -460,16 +460,16 @@ image-mode-map       :help "Show image as hex"]      "--"      ["Fit to Window Height" image-transform-fit-to-height -     :visible (eq image-type 'imagemagick) +
Read more

Tinylisp and Multi-threaded Emacs

Image
TAME-ing the beast!! Here's a fork of tinylisp and a glimpse of a possible multi-threaded future. Below is the content of the file a.el in the demo. It creates one read thread which waits for non-nil value of global-var and a set thread which sleeps for 5s before modifying global-var and notifying the waiting threads. Since these are running in separate threads, main loop is free for user input. (define list (lambda args args)) (define defun (macro (f v . x) (list 'define f (list 'lambda v (cons 'progn x))))) (setq make-condition-variable make-cond) (setq condition-wait cond-wait) (setq condition-notify cond-signal) (setq message p) (setq sleep-for sleep) (setq global-var nil) ;; Create a mutex and an associated condition variable (setq mutex (make-mutex "mutex")) (setq cond-var (make-condition-variable mutex "cond-var")) ;; Read and set functions used by read and set threads (defun set-global-var ()   (mutex-lock mutex)   (sleep 5)   (setq global-
Read more

Data Visualization with GNU Emacs

Image
    GNU Emacs can be used for quick data visualization in combination with Gnuplot. When you have some data and you want to visualize what the correlation looks like, this command comes in handy. No need for any setup - no data file and no Gnuplot script. The command below uses some sensible defaults for trivial cases. If the first line contains string label, the same is used as a key label for the value and/or axes' names as appropriate. If there's a single column of data, it is used as Y value. If there's more than one column, first column is used as X value and other columns are plotted along Y-axis. Takes care of comma or whitespace separator. Note: The latest version of the code is available at the end of the post. Options available in latest version   - Install gnuplot executable and gnuplot Elisp package . - Evaluate the defun ( C-M-x ). - Select a data range using rectangle command copy-rectangle-as-kill (C-x r M-w). - Run M-x  gnuplot-rectangle. This opens the g
Read more