This is the magic wall (magicwall.io)
Project description
magicwall.io
View, share, compose, edit visual, textual and acustical content and apply arbitraty effects on it.
Consider magicwall a combination of file sharing, content presentation, blogging and programmable playground. Create your own wall by just navigating to it, add content by dropping or pasting files and arbitrary data from outside, arrange it spacially and write code which can be applied to any of that content.
Other people you shared the link to your wall with can copy its content using the drag&drop or copy&paste mechanism or by using Git to clone the whole wall content.
Use it: magicwall.io
Have your own:
git clone https://projects.om-office.de/frans/magicwall.io
Have Python3.7+ and flask
installed and run
magicwall.io/magicwall.py
Or use a Docker container:
magicwall.io/run-server
Visit the locally created site
Milestone 1
Requirements for basic usage as simple blogging system and for concept demonstration.
- <magicwall.io> registered and used with https
- Previews of files get turned into HTML elements
- Visualization works (geometry)
- Create element from dropping a filter element, text or images
- Drag/drop of element inside wall area moves it
- Drag/drop of element outside wall area copies as file
- Drag/drop of element on remove field removes it
- Pictures get displayed
- Basic Markdown text formatting works
- Basic file info on mouse hover
- Drag/drop works on mobile
- Basic text editing
- Basic "filter" work (e.g. b/w for images and running python)
- Auto-update (-> collab mode)
- Pasting of text, image data or image files works as dropping
- Multiple elements can be dropped/pasted at once
Milestone 2
- User / access permission control
- Arbitrary files can be added for sharing
- CTRL+drag&drop copies
- Resize elments
- Caching mechanism
- Square-select multiple items
Future
- Notification on change
- Fullscreen / slideshow mode
- Undo-stack
- Config-YAML
- Filter-Hub
- Search
- Offline use
- Git support
- Editor
- Links
- Copy / Paste between sites
- Video
- Live-Update (Weather)
- Support for folders -> Tree
- Tree-Structure (allows entering)
- Filter chaining/stacking
Use cases
- Picture gallery
- Blogging
- Mind mapping
- Algorithm demonstration / education (-> Jupyter)
- File exchange
- Note taking
Magic ideas
- Document optimizer
- Simple auto optimize images (contrast, etc)
- Simple BW images
- Polaroid images
- Configurable Image with roation, cropping, color improvement, vignetting
- Files to animation
- SVG background
- Auto align by date
- fetch URL -> return generated HTML
License
For all code contained in this repository the rules of GPLv3 apply unless otherwise noted. That means that you can do what you want with the source code as long as you make the files with their original copyright notice and all modifications available.
See GNU / GPLv3 for details.
Contributing
Before contributing consider installing a pre-commit which runs some static checks, code cleaners and unit tests:
ln -s ../../.git-pre-commit .git/hooks/pre-commit
This pre-commit
just runs ./qualitygate
, which you can also run manually.
Paradigms
- each site can be seen as a filesystem folder managed and visualized by magicwall.io. I.e. applying an arbitrary folder should give nice results magically.
Random ideas
- Visual Filter (looks like polaroid filter and can be moved over arbitrary elements)
- Transformer filter
Technical challenges
Feel free to help me with each of those questions
- how to recursively stack drop areas
- how to keep instances across browsers in sync, see
Read this
-
https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas
-
https://stackoverflow.com/questions/10929941/make-drag-and-drop-uploader-in-flask
-
https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport
-
https://www.reddit.com/r/Python/comments/60gl8w/drag_and_drop_files_with_html5_and_flask/
-
http://hundredminutehack.blogspot.com/2017/03/drag-and-drop-files-with-html5-and-flask.html
-
https://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/
-
https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome
-
https://stackoverflow.com/questions/2438320/html5-dragover-drop-how-get-current-x-y-coordinates
-
https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for magicwall-0.0.3-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 62c7e4fa68882430fb1e4feb894ab88a69f7aa88e045dea857cd28ea26e04694 |
|
MD5 | f20a4fb73e93ac3f65bb90fe5cdd1c1a |
|
BLAKE2b-256 | 0cd3889651a32bbdfff7ad6d0c9e93b70bef1e1a0b6320fccc95a5e594d06fd3 |