htck / bayeux

Historic Tale Construction Kit - opensource and customizable version !

Historic Tale Construction Kit - Bayeux

Check out the online demo!

Craft thy own Bayeux Tapestry
Slay mischievous beasts
Rule the kingdom

Two German students originally wrote the Historic Tale Construction Kit, with Flash. Sadly, their work isn't available anymore, only remembered. This new application is a tribute, but also an attempt to revive the old medieval meme, with code and availability that won't get lost.

Features

This brand new Historic Tale Construction Kit allows you to

• Drag, drop, scale, rotate any item from the Bayeux image bank
• Do the same with text with different fonts and colors
• Bring elements to the front/back of the scene (this is life changing)
• Work on several images (pages) at once
• Export those pages as PNG or as GIF
• Save a working copy of your tapestry to your disk, to finish it later
• Use brushes to quickly add crowds, birds, or battlefield
• Use keyboard shortcuts for almost all of the above
• Download a standalone version to use it anywhere without any server

Universe

This kit is based on the Bayeux Tapestry, a 70-meters long piece of art telling the story of the Battle of Hastings. However, every Bayeux-related pictures, fonts and settings are stored in a single folder, that can be easily swapped with, say, Japanese Prints, Cave Painting, whatever your heart desires.

Feel free to fork this project and create your own Historic Tale Construction Kit with anything that comes to mind :)
To do so, put your content to the content folder and index it in the config.js file.

Technical Stuff

This kit is written mostly using RaphaelJS and AngularJS, but it also uses a bunch of really cool libraries, such as angular-hotkeys, canvg, FileSaver.js, Raphael.FreeTransform, Raphael.json, gifshot, Canvas-to-Blob. They helped us build an app that works everywhere, client-side without the need for any back-end. Huge thanks to them.

Vagrant

If you want to work on the Historic Tale Construction Kit by yourself, you can use the vagrant box by launching vagrant up. Attention, you will need to have admin rights if you want to run it on windows. Or set up a development environnement.

Setting up a development environnement

If you do not want to use vagrant, you will need to install the following globally

sudo apt-get install nodejs
sudo npm install npm -g
sudo npm install -g bower grunt-cli grunt-contrib-compass
sudo gem install compass

---

Then either way go to the htck folder and install dependencies using

npm install
bower install

You can then run a development server using the command grunt serve

Contribute

If you experienced a bug, we're sorry! If you can fix it, we gladly accept pull requests. If you can't, you can still open an issue here on GitHub and we will try to address it shortly.

This project is MIT-licensed and any open source contribution is welcome!

bayeux's Issues

Lost work from Github link without target="_blank"

Fantastic and beautiful art maker, thank you!

This unfortunate issue brought my 10-year-old daughter to tears, however, because she lost all 10 pages of her art when, curious what the cat icon would do (upper right Github logo), she clicked it. Her hard work on the Construction Kit in her browser tab changed to Github, then she hit the back button to get back to her art, and it was gone :(

That link simply needs a target="_blank" attribute to open Github in a new tab just like the rest of the links on the page.

Thank you for your great work!

Feature request: add custom image as background

Just wondering - is there a branch or version, where it is possible to add your own background? Would be interesting to add these creatures on some other images. But what an amazing tool, thanks!

Subject chooser disappears on mobile

On a mobile Android browser, choosing a particular image makes the section chooser ("Braves", "people", "misc", etc) vanish.

Mobile Text

Hi there!

I can't tell you how happy I was to find this, but I'm having a problem. :-(

Everything seems to work except for adding text on a mobile device. I click the background and I am presented the options to choose my font and color, but my keyboard doesn't get triggered, so I'm not able to physically enter text.

Any ideas? :-)

Running offline in firefox

Modern versions of firefox disable running javascript from local files, and without this Bayeux won't run from local files (e.g. offline)

You can fix this by changing option 'security.fileuri.strict_origin_policy' to FALSE in about:config

Of course, potentially opens up a security vulnerability.

Go back to creating text after using brushes

First of all - fantastic tool that I will use waay too much! Thanks a ton! 💃

I'm designing a scene right now. I added some text and then I used the folks brush to add a crowd. After that, I cannot seem to get back to adding text. I want the crowd to say some things, but whenever I click the background I just add more folks. I also cannot see any button to go back to adding text.

If it's actually missing, maybe we can add a button to go back to letting click being in text tool mode?

Cheers again!

EDIT: FWIW, I managed to add it by saving the file, reloading the page, opening the file, and then adding the text after that!

Having difficulty running this

I'm new to github, I'd like to modify the images in this to make a small test project, but I'm having difficulty finding a good instruction on how to do it.

I have installed github desktop, Git, Visual studio and watched a few tutorials. I appreciate the instructions on launching 'Vagrant up' or setting up a development environment, but I'm totally lost as to where and exactly how. If someone could either fill out the details a bit more or point me in the right direction I'd really appreciate it!

Thanks.

There is no Undo

There is no way to bring back pages you have cleared, in case you need to know the basic format of that page.

Overall view of contents

It would be useful to have a section for each page that shows all separate contents of the page. Another section for text would be useful as well.

Can't add text with Firefox

Clicking on the canvas doesn't create a text box in Firefox, like it does in Chrome. Nothing in the error console.

Firefox 62.0a1, works in Chrome

There is no Undo

There is no way to bring back pages you have cleared, in case you need to know the basic format of that page.

Can no longer re-export to .png

I LOVE this project! Using the web version via Firefox, I created several panels a couple of days ago, repeatedly saving the working files (.htck) and repeatedly exporting the panels as .png files to view them on my Debian Buster system using ImageViewer. Then I would go back to the application, load a panel, tweak it, resave the .htck and re-export the .png. Rinse and repeat. Several times. No problems.

Two days later, viewing the panels again, I decided two needed minor changes. I invoked the web version, loaded the respective .htck file, made the tweaks, saved the updated .htck file, clicked the button to export as .png, that button changed to a "waiting" sort of animation, and the dialog box for saving the file NEVER appears. The "waiting" animation goes on until I close the application.

I also tried loading .htck files (worked) and exporting as .png (didn't work, same problem) in Chromium and Gnome-Web browsers on an up-to-date Debian Buster system.

More troubeshooting results: I can create a new panel, drag some figures and text onto it, save the .htck, and export as .png, no problem. I can load any of the .htck files I created two days ago, but I can no longer export ANY as .png.

HELP PLEASE. I need to get these panels updated and printed asap.

I tried to attach two of the .htck files for your inspection, but Github tells me it does not support that file type. OK. I took a screenshot and tried to attach the screenshot.png: Github says "Something went really wrong, and we can't procees that file. Try again." OK, I zipped two of the .htck files and tried to attach the resulting htckfiles.zip, same "really wrong" message. Sorry, no luck.

Can't find out how to run this on my PC.

I would like to run it on my PC, so I can modify the pictures to make a greek vase creator, but I don't know how to do it. I tried with all the files that were in the download, but nothing worked.