BitMap editor, add line colour and width to default editor

[Alex Hough]

Dear TW5

The edit widget provides a general purpose interface for editing a tiddler. It dynamically chooses the appropriate widget depending on the type of the tiddler (currently either theEditTextWidget or the EditBitmapWidget).

http://tiddlywiki.com/#EditWidget

I would like to get $:/config/BitmapEditor/LineWidth and $:/config/BitmapEditor/Colour

into the edit view when the tiddler type is set to a bitmap (png)

Boundary of Understanding

I can't understand how and where the BitMap editor is added to the body of the edit template. I don't see anything relating to bitmap editing in $:/core/ui/EditTemplate/body

I understand that the bitmap editor is "primitive proof-of-concept" but I hve found it very useful and pleasurable to use.

I have put the linewidth and colour editors in the view template, but now would like to have them below the height and width boxes currently displayed when you edit a bitmap.

I thought there would be a conditional template for bitmaps. While experimenting with drawing in TW, I found myself wanting to name the drawing after drawing it. In other words, I'd like focus to be on the canvas, and the titles and tags to be below the canvas.

Thanks in advance for any pointers 

Alex

[Felix Küppers]

Hi Alex,

I agree, I lately opened an issue at GitHub that focuses on the extension of the bitmap drawing editor.

Please see:

Proposal: Make bitmap drawing it TW more prominent
https://github.com/Jermolene/TiddlyWiki5/issues/2199

-Felix

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CALc1hYcfF2ggyYSA6LvF6Sb-cSbszReJcV%3DSEVv9uSr_x9-tAw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Birthe C]

Hi Alex,


http://tobibeer.github.io/tb5/#Adding%20A%20Sketch

Birthe

[Alex Hough]

Thanks Birthe

Tobias: "Note: I could not find out how to initialize the canvas with a different width and height yet."

Here's a first, the settings are in 

$:/core/modules/widgets/edit-bitmap.js

var DEFAULT_IMAGE_WIDTH = 300,
	DEFAULT_IMAGE_HEIGHT = 185;

------

Experiements with images

I looked into the 300 x 185 proportion and guess what? It turns out that the width to the hight is the golden ratio

To make you sketches look pleasing to the eye, set your stroke width to some value related to the canvas.

* divide 185 by 1.6 or make some squares of 185 px

I don't think we need too much flexability: the proportion is most important thing. Golden section portrait and landscape and a square of the smaller length. 

For smaller images I used the font-awesome re-sizing classes then took screenshots of the image and dragged them back in as .png images. 

A few points

• I like the process, its kind of fractal, things stay in proportion...
• I constrained the colour palette to ones in the TW poster. I took a screenshot of the fish and added it to the colour picker
• I made some buttons with png and played with making them round and adding some css filter transitions hover.
• I made a big new drawing button which generates a tiddler from a template.
  

PNGs are lightweight and easy to work with (esp on Mac book - you can snip parts of the screen and they save as png)

Clone an image, add something new.. its a start of animation. There are also animation posibilities with CSS transitions and great fun to be had with effects designed for photos

Children's fun

My daughter (6) and I drew some pictures. I used an example where you can set the background of the tiddler to an image, then exported it as html.

I opened the html file, then reduced the size of the page in the browser. I took and other screenshot and printed it out: the image from tiddlyWiki converted to a wall paper pattern.

We also made a short story. We drew a head, and transcluded it into a tiddler. Then a couple of links to new tiddlers - interactive story... simple 

Attached is a tid that I currently have in my sidebar,

Alex

[1] https://en.wikipedia.org/wiki/Golden_ratio

http://www.modularscale.com/

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/dcfefd95-c4ce-4752-aa89-e5265977a7b2%40googlegroups.com.

[Alex Hough]

I was too quick!

of course Tobias has already done it!

http://tobibeer.github.io/tb5/#Adding%20A%20ColorPicker%20For%20Editing%20Images