Package: magicwall
magicwall.ioView, 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.ioHave your own:git clone https://projects.om-office.de/frans/magicwall.ioHave Python3.7+ andflaskinstalled and runmagicwall.io/magicwall.pyOr use a Docker container:magicwall.io/run-serverVisit thelocally created siteMilestone 1Requirements for basic usage as simple blogging system and for concept
demonstration.<magicwall.io> registered and used with httpsPreviews of files get turned into HTML elementsVisualization works (geometry)Create element from dropping a filter element, text or imagesDrag/drop of element inside wall area moves itDrag/drop of element outside wall area copies as fileDrag/drop of element on remove field removes itPictures get displayedBasic Markdown text formatting worksBasic file info on mouse hoverDrag/drop works on mobileBasic text editingBasic "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 droppingMultiple elements can be dropped/pasted at onceMilestone 2User / access permission controlArbitrary files can be added for sharingCTRL+drag&drop copiesResize elmentsCaching mechanismSquare-select multiple itemsFutureNotification on changeFullscreen / slideshow modeUndo-stackConfig-YAMLFilter-HubSearchOffline useGit supportEditorLinksCopy / Paste between sitesVideoLive-Update (Weather)Support for folders -> TreeTree-Structure (allows entering)Filter chaining/stackingUse casesPicture galleryBloggingMind mappingAlgorithm demonstration / education (-> Jupyter)File exchangeNote takingMagic ideasDocument optimizerSimple auto optimize images (contrast, etc)Simple BW imagesPolaroid imagesConfigurable Image with roation, cropping, color improvement, vignettingFiles to animationSVG backgroundAuto align by datefetch URL -> return generated HTMLLicenseFor 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.SeeGNU / GPLv3for details.ContributingBefore contributing consider installing a pre-commit which runs some static
checks, code cleaners and unit tests:ln -s ../../.git-pre-commit .git/hooks/pre-commitThispre-commitjust runs./qualitygate, which you can also run manually.Paradigmseach 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 ideasVisual Filter (looks like polaroid filter and can be moved over arbitrary elements)Transformer filterTechnical challengesFeel free to help me with each of those questionshow to recursively stack drop areashow to keep instances across browsers in sync, seehttps://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_APIhttps://stackoverflow.com/questions/55700655/store-data-offline-and-sync-once-online-using-react-native-and-redux-storeRead thismyto-go scribblehttps://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvashttps://stackoverflow.com/questions/10929941/make-drag-and-drop-uploader-in-flaskhttps://codepen.io/anatomic/pen/DJgrvqhttps://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewportDropzonehttps://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.htmlhttps://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/https://stackoverflow.com/questions/10261989/html5-javascript-drag-and-drop-file-from-external-window-windows-explorerhttps://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chromehttps://stackoverflow.com/questions/2438320/html5-dragover-drop-how-get-current-x-y-coordinateshttps://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-definedhttps://github.com/gokercebeci/droparea