hello
hopefully everyone is staying safe and
staying home
I feel very grateful to live in a world
today that technology and free software
can be leveraged to connect people in
such disconnected and difficult times
and to have an online conference like
this hopefully you've all
enjoyed this year's Emacs con so far
many thanks to all the people that made
this possible
anyways welcome to my talk extend Emacs
to modern gui
applications with eaf the imax
application framework
this will be my first ever talk so
apologies for my
inexperience let us begin
about me my name is matthew zing you can
also call me mt
or mindu I'm a chinese canadian living
in toronto
ontario offline I'm an undergrad
studying mathematics at the university
of urudu
online I mean one of the admins of the
Emacs china
the largest Emacs forum in china so
to all chinese listen to my talk right
now feel free to check it out
and this is a link to my github profile
to my projects I'm involving one's me
max which is
I'm the author of a user-friendly
full-featured image configuration
distribution
it is what I'm using right now as well
as the imax application filter
which I help to maintain along with the
other other
lazy cat which of course is today's
topic
so as you might all might have already
noticed I'm currently using Emacs
and oh and opening navigating closing
all these websites that are rendered
properly
or within Emacs it's all thanks to the
ef project
so we're living in a society that's
heavily dependent on the internet
and multimedia it is unavoidable to run
to some occasion that you need to
open a fancy website that uses
javascript and css
or you need to watch some videos however
due to the nature and history of Emacs
it cannot
render all these modern graphics
effectively and efficiently
Emacs is solely a text-based editing
environment
and I argue that this is not a bad thing
in fact it is one of the reasons that me
and I believe many of you as well
are attracted to Emacs in the first
place
unfortunately this results in us having
to open a dedicated web browser to
browse the internet
open a dedicated video player to watch
some videos or a pdf render to read some
documents
so far ems cannot do all these tasks on
its own
but can only be achieved using other
external applications
so the other the author manatee lazy cat
or lazy cat in short didn't want to use
all these external applications
he wanted to have an uninterrupted e-max
experience
he wanted to truly live in e-max
however it would be a lot of work to
build this
modern application from scratch there's
simply no time or research to do that
so lazy car without utilizing existing
applications
and to try to make it collaborate with
Emacs there are many solutions available
one of it
is the e-max x windows manager and I'm
sure a lot of you already know that
the exwm however it didn't work for him
because although ux doubling opens the
door to use other applications within
Emacs
it as a fine window manager cannot
modify
customize or extend other software from
Emacs
for example it cannot modify the
behavior when you press a key in
chromium or
pdf viewer therefore it cannot utilize
the rich emax ecosystem that's been
growing for almost 40 years
on the other hand in the ef browser so
if you mx ef open
browser with history you can see
on the lower half of my screen a list of
histories sorted by my personal
most visited sites and you can search
for a site that you've been
into or search for some keyword and in a
search engine
so this is all achieved by utilizing the
popular completion framework in the
Emacs ecosystem
so this car decided to develop a
solution of its own in 2018
namely the eaf project so I joined the
development last year
2019 ef is
a highly customizable and extensible
reapplication framework that extends
imax to graphical capabilities using pi
qd5 and it is not a window manager
alright so in the readme you can see a
list of gifs
showcasing all the available ef
applications
a browser a markdown premier a video
player
a pdf viewer and more today I don't have
enough time to demonstrate each one of
them
but I will select a couple applications
to show you
so since we are already using ef browser
we'll start with this besides using the
classic control n control p
you can also use the vim style xjkl to
move up or down
also meta shift comma or g to the
beginning of page
when that shift period or capital g to
the end of page
limiting and surfing keys linear and
surfing keys are popular keyboard-based
browsing techniques in chrome
and they've imported here as well you
can press f to toggle markers pointing
to
all the links in the current page say I
want to visit the wiki
which comes very very handy when you
want to configure ef to your liking
so you see the marker on top of wiki is
dd
press dd and you enter and now
you will navigate it to this link so you
don't need to use your mouse at all
so a full list of key bindings can be
found when you
control hm just as any other max major
mode
so you don't have to remember everything
all the key bindings I said to you
so this is a global binding application
to every other ef application as well
so you can find it under the week or or
you can find it under the wiki in the
key binding
section so press f again and use
ns press enter now you're in the key
binding web page
you can see all of the key buttons
available in every
es application and you can try them out
and you can customize your key bindings
using ef
bank key you can customize control n as
in the web page to
to scroll up in the ef pdf viewer or you
can unbind
an existing binding using using yet bank
key
binder to new so it doesn't bind to
anything
okay so here comes the important part
if you want to customize ef you should
visit the customization page in the wiki
so now I press meta b to go back in
history and
go to the customization package press f
press a d
enter and now we're in the customization
page
so the first customization option you
see is dark mode
let's say if you want to turn on the doc
mode for ef browser
and you don't want to use your mouse to
do all this stuff
you press c and you can select
c to toggle the correct browsing you can
see a lot of markers available
pop um again but they're not they're not
on top of links but instead of
paragraphs
you select the paragraph or your choice
in this case you want
ls which comes here
and then you just you just move the
cursor like what you always do
in Emacs and now you select everything
and use meta w to
excuse me metadata to copy the taste the
text
now we made a shift column to evaluate
what we just copied
and set that to true and
press r or f5 to refresh the page
voila we have the dark mode enabled
so there are well let's take a toggle
back off for now
now we made our shift column again
and we find the the one we just used and
change it back to false
and refresh the page back in the light
mode
so there are many other customization
options available you can either
evaluate like what we just did or add it
to your Emacs configuration file
so in this wiki you can have you can
you can make the ef browser to to
continue where you left off
similar to the chromium setting
and you can make yes the default browser
Emacs by
aliasing aliasing browse web to your
open browser
or or set the browse url browser
function to
open browser there's just some tricks
and there are also
uh an experimental app blocker currently
take in place and so therefore it can
block some elements but not all so
we we really encourage people to help us
test out and
add more conditions in
so you can so the ef browser is able to
download
any files from the internet and it will
be downloaded using
a area too and
you can also customize the ef browser
download path
using ef set so it's a function that we
defined similar to set the normal set we
know
so by default the download file is
stored in your home directory slash
downloads
and you can change that whenever you
want you can also disable
saving browsing history so remember
when I press when I use mx you have open
browser's history I see all the
histories here but if you want more
privacy you don't want that to be
available at all you can turn it off
easily with ef
set queue and set that remember history
to false
you can also say your default search
engine so
so right now we have google although
not not really good but google and also
go which is a better search engine
well uh yeah ethically better search
engine
so you can also configure
the zoom so the default zoom of your
browser is 1.0 so you can convert
convert 3000 to 1.25 so you can so when
you open any web page about it will be
zoomed
by default uh you can
also disable javascript although I
personally don't really suggest you to
do because it will
basically break a lot of our features
because a lot of the browser browser
related features
must be implemented using javascript
but yeah you can do it if you really
want to and there also some
customization on ef camera
you can do as well yeah
so uh let's move on to efpd viewer
so now now let's open
the pdf file using af
so that's one something already here but
let's open it here
so yes open and
select introduction to programming in
e-max list
uh I have it already open but it's okay
so you have the file
you have other files displayed
you have all the pages display story yes
and
there are 273 pages in total but notice
like how fast it is to browse
all the pages it is blazingly fast
that's all thanks to python and
mupdf which you don't really get from
Emacs list
so let's say if I want to jump to page
50
we press p and enter 50.
50 and here we are we are at page 50.
you can look at the lower right to
verify the page you're on
and you can you can
use I to toggle dark mode
as expected and let's say you want to
find
table of contents so use ctrl s
the image default binding for I search
and search for a table of contents
here we are it is highlighted for you
and you can control s for more but
there's only one or
one match one other one you ctrl g to
disable the highlight
and you see a lot of options for you to
go
okay let's say if you want to go to the
preface
so that is you press f which which is
also similar to
eef browser you press f for vimeo
and you see the marker now change to w
press wn and then you can go to the
prefix
now we'll add a prefix
so now you finish reading you want to
save your progress
no worries it is already saved for you
by ef you can safely
close the document using x
and opening again af
open and the file see your I
preface again so you're right at where
you let up left up
you can also use mx org store link or
ctrl cl
which I prefer to if you want to save a
particular page in
a orgmo file so now
I go back to my presentation now I don't
need this anymore
uh so you just control c control l
or I think mx or insert link
so you can find the file right here and
you press enter
and you press enter for the description
again and now it's right here
and ctrl c ctrl o to open it voila
you're back right so
let's now demonstrate the ef video
player
so mxef open if you use ef open whenever
you want to
open some file you use yet open browser
if you want to use some
actual application that's not really
related to a file
so you have open and select the video
you want so
video demo so I already have a video
demo
ready so because I recorded a video of
the demo
of the ef camera have a look so
let's move to the beginning hello people
from the future
this is a demo of the ef video player
that demos the ef camera feature
so as you can see on the screen of me
inside my camera
and the screen is actually with all
within Emacs
right so and you can open this
using here open camera
and which I'm already into and you can
press
p to capture a photo
so the photo is by default stored at
your home slash
downloads directory and you can modify
it
freely so if you go here and you can see
the camera stored
right here so why what I used here
so you press space to pause what I used
here is
the year so ef open this entire so
basically so in direct you you go to you
you select
the file that should be opened by
eaf and I use that so it it detects that
it wants to use the ef image viewer so
I accidentally tested if image viewer
before I noticed so that that that gives
the
image of the photo I just took
using ef camera and as you can see you
can
I can use hl the bim button to navigate
in the time
timestamp in the video and I can use
jk to to change the volumes of the video
alright so now you've seen all the basic
usages
of the ef project it comes the question
of what is the magic behind it
all right let's open the hacking page in
the wiki
the design is laid out in a diagram here
so and let's put it
side by side along with my text so you
can
go we can follow through
right okay let me
sorry let me drink some water
so this page in the wiki went into a lot
of detail
due to the time constraint I will just
rephrase some of the ideas here so for
anyone interested please have a look at
the wiki yourself
the easiest way to think about eaf is
that
the actual gui application is started in
the background
then the frame of the application is
attached to the appropriate location on
the
Emacs window so
you have linked qt5 with Emacs using
list and python
of the python site which is colored
yellow in the image
you have two graphics view and queue
graphics scene objects
these are used to simulate the e-max
window buffer design
where q graphics scene is similar to
buffers in Emacs
it controls the state and the content
details of the application
well q graphics view is similar to
geographic view is similar to imax
window it populates the buffer
to graphics scene to the full program at
the appropriate
position whenever an ef mode buffer
brings to a background
whenever an ef mode buffer brings to the
foreground sorry
a queue graphics view instance is
created and whenever the buffer goes to
the background
the q graphics view instance is then
deleted
while q graphics scene the actual
process remains running in the
background until the ef mode buffer is
killed
gpa compositing is used to ensure that q
graphics view and
graphics sync is synchronized real time
using q windows set parent function
the queue graphics view is attached to
appropriate location on the e-max frame
so that although great applications are
not running within e-max
they look as if they were
so when user types on the keyboard it is
first received by the Emacs ef
ef mode buffer and then it lifts sends
the event to google graphics sync using
dbus
when user clicks on the gui application
it is received by the queue graphics
view
and process in python ellipse can
communicate with python through dbus
in other words in other words you can
customize and extend Emacs not just
using
lisp and now you can use python this way
one can leverage
all the python properties like
multi-threading or some other stuff
the entire python ecosystem can be
utilized as well
such as the qt web engine that is the
basis for
our eef browser and pi mu pdf is the
basis for the ef pdf viewer
so this really opens the window to many
many new possibilities to extend Emacs
using eaf
all right back here we are always
looking for people to join the
development there are many many
more work that needs to be done like
such as testing and debug if there are
more linux distros and window managers
such as i3
and stuff I mean you can also add new ef
applications
or debug and enhance existing af
applications
or you can port ef to native wayland
which I just discussed with the
the ems whip kit author uh a kill
akira tile and she he told me that like
really like it must really yeah it
doesn't really work
um native villain because it uses
x valence so it doesn't work on the pgdk
port of Emacs
so and we also need people to pour ef to
non-free operating systems
including windows and mac os
and that's because like debug is a linux
specific feature so it doesn't really
work on other platform
we need to change replace it with some
alternative and
geographic scene somehow doesn't really
work on mac os
and there are many other to-do lists
available so please have a look
if and see it's anything you want to
work on
all right so since this is a
pre-recorded talk I won't be able to do
the q a real time in the video
however I will be around on the
collaborate pad
and the irc imax con you must come
questions
to answer any questions it pops up and
you can also submit an issue
on the repo and you can check the wiki
for some other guides and tricks
all right thank you guys and hopefully
you find the
this year project very interesting and
enjoy the rest of Emacs com 2020