Draw and Scribble Notes in GNU Emacs

 



 

 

 
SVG seems to be quite handy for quick note-taking. You can easily draw simple shapes, use symbols from an SVG library and augment it with some freehand drawing. Combined with excellent keyboard editing of Emacs, you'll not miss anything while taking notes.

 

Installation

When you are drawing programmatically, you need to be able to track nodes by unique ids. e.g. if you call (svg-circle) followed by (svg-rect) using the same id, you should end up with an SVG rectange node. With out of the box svg.el, you'll end up with SVG circle node with attributes from (svg-rect). Hence canvas mode will not work with out of the box svg.el as is.
 
Till my patch which addresses this issue is merged in Emacs core (see https://lists.gnu.org/archive/html/emacs-devel/2021-09/msg00798.html ), you'll need to add following commands in your init file (~/.emacs) to use it.
 
;; Assuming you have downloaded svg.el to ~/
(load "~/svg.el")
(require 'svg)


Usage

  1. Run M-x canvas-mode .This will insert an SVG image (400x400 pixels) at the point. If the point already contains an SVG image, it will use the same for drawing.
If you want to edit an existing SVG file, run C-u M-x canvas-mode.
  1. Minibuffer shows the current active shape (default is polyline).

  2. Use keyboard to select appropriate shape, stroke-color, fill-color or stroke width.
  3. Use mouse click and drag to draw the shape.
  4. Selection: Use mouse to draw a rectangular region containing the objects to be selected. Use ESC to cancel selection.
  5. Undo: Undo the last drawn object. If selection is active, deletes the selected objects.
  6. Eraser: Use x to select eraser. However, do remember that erasing in SVG is more like erasing a painting. You are not really removing anything - only adding a white paint in certain regions. You can use polyline with desired fill color and stroke width for finer control.
  7. Zoom: Use selection to zoom in. Use 0 to reset zoom. Use +/- to zoom in/out.
  8. Use s to save the SVG file. Important: Emacs save buffer action will only save the text content. You must save SVG file separately.
  9. Enter q or RETURN to exit the mode.
 
Keyboard commands
l     Line         
c     Circle       
r     Rectangle    
e     Ellipse      
t     Text         
p     Polyline     
w    
Stroke Width      
f    
 Fill color     
C    
 Stroke color     
z  (+, -, 0)
 Zoom
x
 Eraser
M-w Copy
m Move
g Group
G Ungroup
M-g Toggle grid
y    
 Selection mode
ESC    
 Cancel Selection
R Rotate
W Connection wire
L Symbol Library
s     Save SVG     
u     Undo  
q/RETURN    Quit  

 

References

  1. https://github.com/larsmagne/ewp/blob/master/ewp.el

 

FAQ

  • Can text and images be intermixed in a buffer? Yes.
  • Is there an eraser tool? Yes.
  • You need GTK (on Linux) and librsvg support compiled in Emacs for this to work.
     
     

 


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

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

Mozilla Readability in GNU Emacs

Image
  Output using Readability (left) and original eww (right)   Mozilla Readability is a standalone version of the readability library used for Firefox Reader View . A simple hack to eww can bring the same feature in GNU Emacs. ( Note: eww already has a readable mode. This is just an alternative. Updated the post to reflect the same.)   - Install NodeJS   - Install npm modules. npm install @mozilla/readability jsdom   - Create a file readability.js with following content. Note the file location. var { Readability } = require('@mozilla/readability'); var { JSDOM } = require('jsdom'); var fs = require("fs"); var str = fs.readFileSync(process.stdin.fd).toString(); var doc = new JSDOM(str); var reader = new Readability(doc.window.document); var article = reader.parse(); console.log(article.content);     - Modify the following function to use the file location noted above . Evaluate the function. (defun mozilla-readability (start end)   (shell-command-on-region star
Read more