johnmclear / ep_draw Goto Github PK
View Code? Open in Web Editor NEWEtherpad plugin for Etherdraw
License: Other
Etherpad plugin for Etherdraw
License: Other
The function to move the whiteboard content around is not working on touch screens. Tested on Android (9) and iOS (13.6)
did i miss something for prozy settings?
I only install ep?_draw plugin in my etherpad and added below in setting.jason
/* EP draw configurations */
"ep_draw": {
"host": "localhost:9001",
"onByDefault": true
},
The installations of ep_draw and etherpad-lite work well for me.
When I enable ep_draw within etherpad, I have an issue with ep_draw only displaying the top bit of the document.
Etherdraw: (http://ip:9002)
Etherpad w/ Etherdraw: (http://ip:9001)
Both are current from git as of yesterday. Ubuntu 20.04
If anyone has input as to what I'm doing incorrectly, I'd love to hear :)
Semver is probably a good choice, it's popular and works with everything.
We should outline some goals for the next release - what version # will it be? what should we add? etc., etc.
Personally, I think it should be a bit more speedy and also eliminate the scrollbar issue.
diff --git a/static/js/draw.js b/static/js/draw.js
index 8629328..08f38f6 100644
--- a/static/js/draw.js
+++ b/static/js/draw.js
@@ -50,7 +50,7 @@ function enabledraw(){
var padID = clientVars.padId;
if($("#draw").length === 0){ // If it's not available already then draw it
- $("#editorcontainer").prepend("<div id=draw><iframe id='drawEmbed' src='//"+draw_host+"/d/"+padID+"?authorName="+authorName+"&authorColor="+authorColor+"' width='100%' height='100%' style='border:none' frameborder='0' scrolling='no'></iframe></div>");
+ $("#editorcontainer").prepend("<div id=draw><iframe id='drawEmbed' src='//"+draw_host+"/d/"+padID+"?authorName="+authorName+"&authorColor="+authorColor+"' width='100%' height='100%' style='border:none;bottom:0px' frameborder='0' scrolling='no'></iframe></div>");
}
clientVars.ep_draw.enabled = true;
showdraw();
@@ -65,6 +65,7 @@ function showdraw(){
$("#draw").hover(function(){
clearTimeout($(this).data('timeout'));
$("#draw").animate({"width":"100%", "height": "100%"});;
+ $("#drawEmbed").animate({"width":"100%", "height": "100%"});;
clientVars.ep_draw.fullscreen = true;
}, function(){
var t = setTimeout(function() { // Dont zoom out right away, wait a while
Because the draw window opens with a transparent background, users believe that, if they circle or mark text that is on the pad, all users see that circle or mark in the same place--over the same words on the pad itself. Since they don't, this leads to confusion.
Could there be a way to connect a mark on the drawing to a specific passage of text, while accounting for all screen sizes? I suspect that this would be impossible, but I wanted to raise the issue nonetheless.
It would be helpful if a variable could be used (or if the default could be changed) so that the "toggle transparent background" option is set to non-transparent by default.
The issue is that, with the background transparent, users think that they are drawing on the pad and that all users can see their drawings as they appear on the pad itself. By making the default opaque, the transparent ability would be retained, while making it clear that drawings are separate from and unconnected to the pad text.
when ep_draw is installed, etherpad-lite startup hangs here:
www-data@git:/usr/share/nginx/etherpad-lite$ bin/run.sh
Ensure that all dependencies are up to date... If this is the first time you have run Etherpad please be patient.
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
Ensure jQuery is downloaded and up to date...
Clearing minified cache...
Ensure custom css/js files are created...
Started Etherpad...
the draw host is set, running, and accessible.
Hey,
it would be great to have an option to export the drawing.
I already have working code to export it as an .svg file, all that would be needed is an extra button.
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
canvas = document.getElementById('canvas');
var styleNode = document.createElement("style");
styleNode.innerHTML = "path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
} ";
canvas.appendChild(styleNode);
Then you can download the file with
download("file.svg", canvas.outerHTML)
drawEmbed frame
Could you please advise where the locales
folder is to translate this plugin into hu
(Hungarian - magyar) locale? Thank you
I really like the idea. Especially with webrtc in etherpad, this makes a whole new form of collaboration possible.
In my installation ep_draw only allows to draw to the top fraction of the screen.
Test here: https://pad.new.uugrn.org/p/drawtest
Draw itself works fine... see: https://draw.uugrn.org
The server at draw.etherpad.org isn't happy - currently I get a 503.
Can someone fix this?
Instead of opening the small preview, and animating to fullscreen on click on the pen/ double click on the icon, it would be great to just open it in full on a single click on the icon.
I already added the options, but I sadly couldn't test it out. Maybe someone can help me out
No matter what is set in settings.json, Etherdraw always binds to all interfaces (*). Localhost or 127.0.0.1 makes no difference.
{
//IP and port which etherpad should bind at
"ip" : "localhost",
"port" : 9002,
...
}
# lsof -i | grep :9002
node 11085 etherpad 10u IPv6 155125050 0t0 TCP *:9002 (LISTEN)
This is an security issue.
to enable zooming in/out to edit images past the current window size.
for example http://sketchub.com/ie2gx8i8v3
Line 53 in a32046e
EtherDraw is ready to accept initial author colors.
This is like line 21-ish from draw.js.
Hello, I'm currently trying this plugin. I've hosted on my server an Etherdraw server on port 9002 and an Etherpad server on 9001. Both are working fine separatly but it seems I can't use the plugin to access etherdraw from etherpad. The reason is really stupid : The button just does not appears.
Is there something I'm missing? I configured the plugin to access http://localhost:9002 so it wasn't a communication-to-server problem.
Thanks for any hint or advice.
As it is on the right by default...
Hi, John. Thanks for developing this plugin to integrate Etherdraw with Etherpad.
I tried to install it from the console, but I get this error:
etherpad@conference:~/etherpad-lite$ npm install ep_draw
/opt/etherpad/etherpad-lite
└── [email protected]
npm WARN enoent ENOENT: no such file or directory, open '/opt/etherpad/etherpad-lite/package.json'
npm WARN etherpad-lite No description
npm WARN etherpad-lite No repository field.
npm WARN etherpad-lite No README data
npm WARN etherpad-lite No license field.
Do you know what the problem might be?
I'm using Etherpad 1.6.1.
Thanks in advance.
Kind regards,
Daniel
If one individual on a large screen draws, those drawings could easily be inaccessible to those users who are on smaller screens. Would there be a way to offer either a zoom function or a scrolling function to allow users to always be able to see each other's drawings? Otherwise, this can appear as a software fault since it looks like the drawings from one user aren't showing up on the drawings of another user.
Should collaboration with WBO - Collaborative whiteboard
be looked at?
https://wbo.ophir.dev/
https://github.com/lovasoa/whitebophir
Thank you
Add a showChat = false query to the EtherDraw url so that we can add a chatbox to EtherDraw and not have two chat boxes for the Etherpad ep_draw plugin.
The first one is "Make the AuthorName, padID and Authorcolor passed to draw.etherpad.org". We can cross off authorcolor, but what did you want to do with author name and padID? I guess we should at some point add "Artist names" to Draw where that can translate over.
The package repository location points to an invalid GitHub page.
"repository": {
"type": "git",
"url": "https://github.com/johnyma22/ep_draw"
},
Should point to:
https://github.com/JohnMcLear/ep_draw/
The drawing part works well, but it's not shared.
I mean if I draw something, the other users don't see my drawing and vice-versa.
I see nothing in the logs.
Etherpad v1.2.9
I installed etherpad on my centos 6.3, works well.
I installed ep_draw plugin, but I get this showing on my pad:
502 Bad Gateway
nginx/1.2.6 (Ubuntu)
I guess I need to install the correct package, but I don't know which one.
Or should I tweak the server setting ?
I can log in (ssh) but I don't have root privilege on the server.
etherpad version: c9b80c6 (HEAD, origin/develop, origin/HEAD, develop) *
centos version: 6.3
When the vertical scrollbar become active on the page, the framework doesn't move and so is a bit hidden behind the bar.
The implementation now is more like a paint tool, it would be fantastic if it supported simple thin lines, boxes, text, etc. thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.