Chat & Discussions>Discussions

Demo of FabricJS, PDFJS and PDFLib Integration with Phoenix LiveView

/phoenix#liveview#demo#fabric
crockwave

crockwave

Demo of FabricJS, PDFJS and PDFLib Integration with Phoenix LiveView

I created a repo to demonstrate the integration of fabric.js, PDFLib.js and pdf.js with Phoenix LiveView, using a LiveView Hook.

crockwave/fabric_hook: Demonstrates integration of fabric.js, pdf.js and PDFLib.js with Phoenix LiveView (github.com)

Created with Phoenix 1.6.0

It demonstrates the following:

  • Fabric.js pdf.js and PDFLib.js LiveView integration
  • Fabric.js hook in app.js
  • Creates a new default 2 page PDF on page load using PDFLib
  • Fabric annotation layer on top of the PDF file viewer
  • Using a Fabric brush to draw objects of varying widths and colors
  • Uploading a PDF into the viewer
  • Selecting, rotating, moving and scaling drawn Fabric objects
  • Moving selected Fabric object using arrow keys and Shift-arrow keys
  • Deleting selected Fabric object using the Del key
  • Maintain layers oriented during window resize events

Screenshot 2023-04-01 065725
Screenshot 2023-04-01 0657251073×941 85.7 KB

6 comments
/phoenix#liveview#demo#fabric
2771 6

Most Liked

crockwave

crockwave

Reference the Readme.md. You need to install fabric using npm from your assets folder

JQuery should be picked up by the script reference inside the heex file

fabric_hook/page_fabric.html.heex at master · crockwave/fabric_hook (github.com)

Screenshot 2023-04-01 093223
Screenshot 2023-04-01 093223703×383 15.6 KB

2
Post #4
ghenry

ghenry

Works now. Really nice! Will help me learn more about Hooks as I’m doing some cal-heatmap things. Thanks for sharing.

2
Post #7
ivanhercaz

ivanhercaz

I will test it as soon as possible! Thank you for share it, @crockwave!

1
Post #5

Where Next?

View thread on forum (has 6 responses!)
phoenix
liveview
demo
fabric
Home Chat & Discussions>Discussions
/phoenix#liveview#demo#fabric
15 2771 6
Last post

Popular in Discussions Top

jswny
Chat & Discussions>Discussions

Advantages of umbrella applications?
I would like to better understand what the advantages/disadvantages of umbrella applications are compared to structuring your app as as s...
#umbrella#deployment
64 7199 11
New
arcanemachine
Chat & Discussions>Discussions

Jose Valim: "Elixir is, officially, a gradually typed language"
https://nitter.net/josevalim/status/1744395345872683471 https://twitter.com/josevalim/status/1744395345872683471
#static-types
249 14655 57
New
Donovan
Chat & Discussions>Discussions

Suitability of Elixir to math-oriented apps
Hello everyone, I’m so glad to have discovered this awesome community. Thanks for creating it! This is my second post, and apologies for...
#mathematics#discussion
63 11447 31
New
WildYorkies
Chat & Discussions>Discussions

Where is Elixir and the Actor Model heading?
It seems that the more I read, the more I find Elixir users speaking about all the ways that Elixir is not good for x, y, and z use cases...
#future-tech
180 11629 46
New
Jayshua
Chat & Discussions>Discussions

HTMX - A js library sort of like liveview
I recently came across the javascript library htmx. It reminded me a lot of liveview so I thought the community here might be interested....
/phoenix#liveview
89 10186 26
New
AstonJ
Chat & Discussions>Discussions

Elixir Code Editors & IDEs - which one are you using? (Poll)
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
#code-editors
208 31307 143
New
JakeBecker
Chat & Discussions>Discussions

ElixirLS - the Elixir Language Server
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
#elixir-ls
1144 54250 245
New
Fl4m3Ph03n1x
Chat & Discussions>Discussions

Why isn't Elixir dominating serverless architecture?
Background A few days ago I was listening to The future of Elixir from Elixir Talks, with Dave Thomas (@pragdave ) and Brian Mitchell. I...
#discussion#serverless
62 12527 21
New
fireproofsocks
Chat & Discussions>Discussions

How to think about pattern matching vs. type-checking
This is more of a general question, but I’m wondering how other people in the community think about the pattern matching in function sign...
#pattern-matching#discussion#typespecs
73 10109 22
New
Qqwy
Chat & Discussions>Discussions

Mnesia vs Cassandra (vs CouchDB vs ...) - your thoughts?
Looking at the stacks that existing large companies have used, WhatsApp internally uses Mnesia to store the messages, while Discord uses ...
#distributed-database
77 10870 24
New

Other popular topics Top

malloryerik
Learning Resources>Guides/Tuts/Tips/Info

How to use 'phoenix-heex' templates in VSCode
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
/phoenix#vscode#heex
119 17557 34
New
9mm
Questions & Help>Questions

Elixir way to conditionally update a map
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
#maps
55 20328 29
New
Darmani72
Questions & Help>Questions

Params in the URL and body -- how does Phoenix handle them together?
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
/phoenix#params
17 27071 14
New
Nvim
Chat & Discussions>Discussions

Django vs Phoenix
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
/phoenix#learning-elixir
184 21877 82
New
greenz1
Questions & Help>Questions

Best way to send multiple files as HTTP response
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
/phoenix#api
3 19086 3
New
fireproofsocks
Questions & Help>Questions

Ecto delete a record WITHOUT selecting first
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
#ecto#optimization#delete-method
22 17061 8
New
freewebwithme
Questions & Help>Questions

Failed to run 'elixir' command error in vs code
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
#vscode#elixir-ls
49 16686 39
New
Emily
Questions & Help>Questions

How To Get Phoenix & VueJS working Together?
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
/phoenix
93 22752 42
New
vonH
Questions & Help>Questions

How do I kill a process ` #PID<0.186.0` in iex?
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
#iex#processes#how-to-question
37 21536 8
New
jaysoifer
Questions & Help>Questions

How to rollback a specific ecto migration?
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
/phoenix#ecto
13 16843 7
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Chat & Discussions>Discussions

Chat Discussions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Coders51

We build reliable cloud platforms for business-critical systems.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement