search

rawles / edit.tf

An in-browser editor for teletext frames.
http://edit.tf/
GNU General Public License v3.0
92 stars 19 forks source link

Apply a background image to the editor #37

Open dodginess opened 8 years ago

dodginess commented 8 years ago

It would be good to have an option to set an image as the background. This would be helpful for anyone wanting to recreate existing frames or trace over the top of a bitmap. I hacked something together quickly by adding a new layer to the HTML code and setting the CSS properties of the layer to z-index:500, opacity:0.5 and pointer-events:none so that it overlays the editor but doesn't capture the mouse clicks meant for the editor. The image would have to be automatically rescaled to suit the size of the editor, but at the moment I'm manually resizing the images I want to trace. Having an opacity slider and a manual resize control (preserving the aspect ratio of the image) would also be useful. teletext-editor

rawles commented 8 years ago

Until I got this I wasn't really aware that anybody did anything like this but now I am I think it is a great suggestion. I wonder how this would work considering the existing user interface. I guess we would need four new commands - add new background image, resize current background image, decrease opacity, and increase opacity. Is that how you see it?

I think it shouldn't be too hard to implement and I might be able to have a go in the next couple of weeks. Perhaps soon we'll need to have two-letter escape commands.

dodginess commented 8 years ago

Thanks, that's exactly what I had in mind. Mapping the new commands to keys might not be too important - once I've added an image to the layout and worked out what size I need it, I only really need the ability to turn the background on and off so I can see how the frame is looking. It took me less than 5 minutes to recreate this frame - getting the exact positioning right is trivial once you have the grid switched on and an image to work from. teletext-editor-2

rawles commented 7 years ago

I wrote some code to do this in branch issue-37. To set a background image you enter ESC-=. It then prompts you for an image URL, which is then displayed in the way you describe. ESC-= then turns it off again. Let me know if it's what you had in mind!

dodginess commented 7 years ago

Thank you, I'll check it out and report back :)

dodginess commented 7 years ago

Good job, works great! Having the image automatically resized to fill the edit window works really well and the dialog box to specify the image URL is ideal. What it would be nice (but not essential) to have would be a way to switch the background image on and off without having to select the image each time, so that it works like a flip book - sometimes I temporarily need to switch off the image that I'm tracing over to see whether what I'm drawing looks any good or not.

I've attached a sample image to show the background image functionality. The frame I've loaded was drawn using my original modification so it doesn't match the resized background image. Referring back to my original comments, I don't think the opacity slider and image resize controls are necessary as it would make more sense to crop the image and resize it relative to the frame dimensions first in Photoshop, Gimp, etc. before setting it as the background, and 50% opacity should be about right for most images.

Thanks again :) edit-tf-background-image-example

rawles commented 7 years ago

I've done a few frames where I've traced things like this myself, and I agree, being able to turn on and off this background would be very useful, especially where the background appears for only a subregion of the canvas. How would it best work? We have ESC-= to set the layers, and I guess we'd have another key combination to turn the background on and off?

rawles commented 7 years ago

Hi @dodginess. I had a think about this. It would actually be pretty easy to set ESC-{ and ESC-} (a little awkward to type and therefore rarely-used) to decrease and increase opacity of the background. I'll have a go at that now.

rawles commented 7 years ago

Have a go at this and see if it helps. I feel it's a bit clumsy, having to press shift to get to the { and } keys, but the 0.25 steps for opacity seem to work quite well.