How to add a new button to editor

#1

With @EricShulman great camera action, I could use my mobile phone to take images now with current timestamp as file name.

<$button>&#x1F4F7;<$action-camera tiddler=<<now "YYYY0MM0DD0hh0mm0ss">> camera="back" device="video"/></$button>

In next step, I would like to add camera action into the text editor, then can take text notes and images at the same time.

  • add the button into tiddler editor
  • take an image with current time as file name
  • insert image macro into text editor, e.g. [img[filename]]

Not sure how I could start. Thanks for any suggestions.

#2

It’s actually very straightforward to create a new editor toolbar button that triggers the $action-camera widget:

First, create a new tiddler (e.g., “MyEditorButtons/Camera”), tagged with $:/tags/EditorToolbar, containing the following text:

\define actions()
<$action-sendmessage $message="tm-edit-text-operation"
	$param="insert-text" text={{{ [[{{]] [<actionTiddler>] [[}}]] +[join[]] }}}/>
\end
<$action-camera tiddler=<<now "YYYY0MM0DD0hh0mm0ss">> camera="back" actions=<<actions>>/>

Next, add these fields with the indicated values:

  • caption = camera
  • condition = [<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]
  • description = take a photo or video
  • icon = MyEditorButtons/Camera/Image

Then, create another tiddler using the icon name from above (i.e., “MyEditorButtons/Camera/Image”), containing just the text:

&#x1F4F7;

The hex code above is the Unicode character that display a simple camera icon.

That’s it. A new “camera” button will appear at the end of your editor toolbar.

Notes:

  • The action() macro defined in MyEditorButtons/Camera inserts the captured image into your tiddler content using transclusion rather than the more limited [img[...]] syntax. This allows you to embed either still images OR video streams in the tiddler.
  • You can re-position the new button in the editor toolbar. Just click on the $:/tags/EditorToolbar “tag pill” while viewing the EditorButton/Camera tiddler and use drag-and-drop in the list of toolbar items that appears to move the button to the position you prefer.

enjoy,
-e

1 Like
#3

Very appreciate for your suggestions.