# 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](https://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](http://localhost:8006)
## Milestone 1
Requirements for basic usage as simple blogging system and for concept
demonstration.
* [x] <magicwall.io> registered and used with https
* [x] Previews of files get turned into HTML elements
* [x] Visualization works (geometry)
* [x] Create element from dropping a filter element, text or images
* [x] Drag/drop of element inside wall area moves it
* [x] Drag/drop of element outside wall area copies as file
* [x] Drag/drop of element on remove field removes it
* [x] Pictures get displayed
* [x] Basic Markdown text formatting works
* [x] 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](https://www.gnu.org/licenses/gpl-3.0.en.html) 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
- https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API
- https://stackoverflow.com/questions/55700655/store-data-offline-and-sync-once-online-using-react-native-and-redux-store
## Read this
* my [to-go scribble](https://notes.om-office.de/tGG_sJgTThut6-v8F72xYQ#)
* 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://codepen.io/anatomic/pen/DJgrvq
* https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport
* [Dropzone](https://www.dropzone.dev/js/)
* 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/10261989/html5-javascript-drag-and-drop-file-from-external-window-windows-explorer
* 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
* https://github.com/gokercebeci/droparea
Raw data
{
"_id": null,
"home_page": "https://projects.om-office.de/frans/magicwall.io",
"name": "magicwall",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.9,<4.0",
"maintainer_email": "",
"keywords": "",
"author": "Frans F\u00fcrst",
"author_email": "frans.fuerst+gitlab@protonmail.com",
"download_url": "https://files.pythonhosted.org/packages/07/4e/cc212fc4d3a410f8276f17d5be5867ab09cff6a987f88be0e4415f5770c4/magicwall-0.0.3.tar.gz",
"platform": null,
"description": "# magicwall.io\n\nView, share, compose, edit visual, textual and acustical content and apply\narbitraty effects on it.\n\nConsider magicwall a combination of file sharing, content presentation, blogging\nand programmable playground. Create your own wall by just navigating to it, add\ncontent by dropping or pasting files and arbitrary data from outside, arrange it\nspacially and write code which can be applied to any of that content.\n\nOther people you shared the link to your wall with can copy its content using\nthe drag&drop or copy&paste mechanism or by using Git to clone the whole wall\ncontent.\n\nUse it: [magicwall.io](https://magicwall.io)\n\nHave your own:\n```\ngit clone https://projects.om-office.de/frans/magicwall.io\n```\n\nHave Python3.7+ and `flask` installed and run\n```\nmagicwall.io/magicwall.py\n```\n\nOr use a Docker container:\n```\nmagicwall.io/run-server\n```\n\nVisit the [locally created site](http://localhost:8006)\n\n\n## Milestone 1\n\nRequirements for basic usage as simple blogging system and for concept\ndemonstration.\n\n* [x] <magicwall.io> registered and used with https\n* [x] Previews of files get turned into HTML elements\n* [x] Visualization works (geometry)\n* [x] Create element from dropping a filter element, text or images\n* [x] Drag/drop of element inside wall area moves it\n* [x] Drag/drop of element outside wall area copies as file\n* [x] Drag/drop of element on remove field removes it\n* [x] Pictures get displayed\n* [x] Basic Markdown text formatting works\n* [x] Basic file info on mouse hover\n* [ ] Drag/drop works on mobile\n* [ ] Basic text editing\n* [ ] Basic \"filter\" work (e.g. b/w for images and running python)\n* [ ] Auto-update (-> collab mode)\n* [ ] Pasting of text, image data or image files works as dropping\n* [ ] Multiple elements can be dropped/pasted at once\n\n\n## Milestone 2\n\n* [ ] User / access permission control\n* [ ] Arbitrary files can be added for sharing\n* [ ] CTRL+drag&drop copies\n* [ ] Resize elments\n* [ ] Caching mechanism\n* [ ] Square-select multiple items\n\n\n## Future\n\n* Notification on change\n* Fullscreen / slideshow mode\n* Undo-stack\n* Config-YAML\n* Filter-Hub\n* Search\n* Offline use\n* Git support\n* Editor\n* Links\n* Copy / Paste between sites\n* Video\n* Live-Update (Weather)\n* Support for folders -> Tree\n* Tree-Structure (allows entering)\n* Filter chaining/stacking\n\n\n## Use cases\n\n* Picture gallery\n* Blogging\n* Mind mapping\n* Algorithm demonstration / education (-> Jupyter)\n* File exchange\n* Note taking\n\n\n## Magic ideas\n\n* Document optimizer\n* Simple auto optimize images (contrast, etc)\n* Simple BW images\n* Polaroid images\n* Configurable Image with roation, cropping, color improvement, vignetting\n* Files to animation\n* SVG background\n* Auto align by date\n* fetch URL -> return generated HTML\n\n\n## License\n\nFor all code contained in this repository the rules of GPLv3 apply unless\notherwise noted. That means that you can do what you want with the source\ncode as long as you make the files with their original copyright notice\nand all modifications available.\n\nSee [GNU / GPLv3](https://www.gnu.org/licenses/gpl-3.0.en.html) for details.\n\n\n## Contributing\n\nBefore contributing consider installing a pre-commit which runs some static\nchecks, code cleaners and unit tests:\n\n```\nln -s ../../.git-pre-commit .git/hooks/pre-commit\n```\nThis `pre-commit` just runs `./qualitygate`, which you can also run manually.\n\n\n## Paradigms\n\n* each site can be seen as a filesystem folder managed and visualized by\n magicwall.io. I.e. applying an arbitrary folder should give nice results\n magically.\n\n\n## Random ideas\n\n* Visual Filter (looks like polaroid filter and can be moved over arbitrary elements)\n* Transformer filter\n\n\n## Technical challenges\n\nFeel free to help me with each of those questions\n\n* how to recursively stack drop areas\n* how to keep instances across browsers in sync, see\n - https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API\n - https://stackoverflow.com/questions/55700655/store-data-offline-and-sync-once-online-using-react-native-and-redux-store\n\n\n## Read this\n\n* my [to-go scribble](https://notes.om-office.de/tGG_sJgTThut6-v8F72xYQ#)\n\n* https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas\n* https://stackoverflow.com/questions/10929941/make-drag-and-drop-uploader-in-flask\n* https://codepen.io/anatomic/pen/DJgrvq\n* https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport\n\n* [Dropzone](https://www.dropzone.dev/js/)\n\n* https://www.reddit.com/r/Python/comments/60gl8w/drag_and_drop_files_with_html5_and_flask/\n* http://hundredminutehack.blogspot.com/2017/03/drag-and-drop-files-with-html5-and-flask.html\n\n* https://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/\n* https://stackoverflow.com/questions/10261989/html5-javascript-drag-and-drop-file-from-external-window-windows-explorer\n* https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome\n* https://stackoverflow.com/questions/2438320/html5-dragover-drop-how-get-current-x-y-coordinates\n* https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined\n* https://github.com/gokercebeci/droparea\n\n\n",
"bugtrack_url": null,
"license": "",
"summary": "This is the magic wall (magicwall.io)",
"version": "0.0.3",
"project_urls": {
"Homepage": "https://projects.om-office.de/frans/magicwall.io",
"Repository": "https://projects.om-office.de/frans/magicwall.io"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "0cd3889651a32bbdfff7ad6d0c9e93b70bef1e1a0b6320fccc95a5e594d06fd3",
"md5": "f20a4fb73e93ac3f65bb90fe5cdd1c1a",
"sha256": "62c7e4fa68882430fb1e4feb894ab88a69f7aa88e045dea857cd28ea26e04694"
},
"downloads": -1,
"filename": "magicwall-0.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "f20a4fb73e93ac3f65bb90fe5cdd1c1a",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9,<4.0",
"size": 29495,
"upload_time": "2023-06-29T18:50:33",
"upload_time_iso_8601": "2023-06-29T18:50:33.865661Z",
"url": "https://files.pythonhosted.org/packages/0c/d3/889651a32bbdfff7ad6d0c9e93b70bef1e1a0b6320fccc95a5e594d06fd3/magicwall-0.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "074ecc212fc4d3a410f8276f17d5be5867ab09cff6a987f88be0e4415f5770c4",
"md5": "da4b9ba1cc6f97d321002cb8c4745918",
"sha256": "84d3bf4982749a856fd7b7b9eb403933c07e8f97157efb03f4459ffa4dfc5304"
},
"downloads": -1,
"filename": "magicwall-0.0.3.tar.gz",
"has_sig": false,
"md5_digest": "da4b9ba1cc6f97d321002cb8c4745918",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9,<4.0",
"size": 30151,
"upload_time": "2023-06-29T18:50:35",
"upload_time_iso_8601": "2023-06-29T18:50:35.533505Z",
"url": "https://files.pythonhosted.org/packages/07/4e/cc212fc4d3a410f8276f17d5be5867ab09cff6a987f88be0e4415f5770c4/magicwall-0.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-06-29 18:50:35",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "magicwall"
}
JSON