This is a Tiny memo Pad that will have Sticky Notes on Webpage, saves in cookies. This Web Gadget was for the Homepage, Web-page or blog. Pin Notes. Note – This is toy or fun gadget not for serious note taking, it is more an example of css-dhtml-js for study or learning.

24 March 2010 – Data Freedom in PSV, Pipe Separated like and. Now you can move to another Notes software; if you feel our interface or features are not just right.

This is not an electronics gadget, but i wanted to try building it, The inspiration for this has been Stickies. Which i have been using for some time. So i built this for my learning. The Source gives some ideas of css and JavaScript. The form elements blends with the note, The Note also serves as a dynamic menu for paper color and pencil color.

Live Interactive Widget

Development

This was later enhanced to the Jot a Note gadget. Jot a Note then became Jot Note and Desktop

User Basics

Hover the mouse over the icons (in the Pin Notes Gadget) and you can see what it can do, see the Tool Tip. The Image on right, shows all that you need to know and these can be verified by Moving the Mouse over every control/icon and reading the Tool Tip.

If you want to use the Backup/Restore feature In the Text Notes, please do not use the | pipe character. On the keyboard it is with the Backward Slash .

New Note Icon

Creates a New Note, max of seven notes. When you Close/Delete Notes and save. New Notes can be created in the Next session or when you visit the Pin Note Page again. Still only a Max of 7 Notes.

Show Hide – Empty Bin

When you press the Red X mark icon on Top Right of a Note, it just closes Note and it hides in the Trash Can. Click the Trash Can to bring all the Hidden Notes into the open.

Click Save if you want the Hidden notes to be deleted. When you come back to pin notes, New Notes can be created, color scheme of notes remain unchanged. During a session The Trash Can is a Show Notes Only.

Deleted Notes cannot be recovered. So before you close Pin Notes, Use this control to show all deleted notes. Delete what you really dont want, save and leave the Pin Notes page.

Hide/Delete a Note

The the Red X icon on Top Right of every Note is a Hide Control. The Note is deleted, if you save and end a session. Get back hidden note by using Show Hide icon as detailed earlier, within same session only.

Save All and Save Note

Save Note Icon Saves the Note and other settings like Color and Position. When you save a Note, it saves entire Pin Notes data/settings. This control is same as the Save All icon. All Save Icons do the same job, saves data and settings of entire Pin Notes. Remember that Paper/Pen Color needs saving. Note Position is not saved.

Paper Pen Color

These are a pair of simple controls in which you can select the Background Color of Note and Font Color of Text. Click the control, a Limited Palette is shown in the note itself. Click a nice color to set and Save. That makes a dull life fill with colors. Remember, the colors must be harmonious for forming the right moods. This in turn helps us to Write, Blog or Tweet new stuff; as the case may be.

Paper Color Palette

Pen Color Palette

Drag and Drop a Note

The Green Arrow icon on every note is an Handle to drag and drop the note. In some browsers or usage methods the drag-drop operation may feel sticky. Click slower and just click once more, when the note sticks to the mouse cursor. Positions of Notes are not saved.

Edit Note

This is the most important part, this is what this gadget is all about. Click Edit Icon opens a text area in the note with a dashed border. Start editing the note or add text by copy and paste. 100 characters is limit per note. Please save after note edit or new note. Line Breaks LF or Carriage Returns CR may not be saved or rendered.

Backup and Restore Notes

When you press the Backup Notes icon, A large Text Blob will appear in a Large White Note. Click the Text Blob and it will Auto-Select-All, Right Click and Copy. Paste it into your Notepad and secure your data in a CDROM or Flash Drive.

Note – When you click the Text Blob, all the data is Auto Selected. The Visible Text Blob is only Partial Preview of the Full Text Database. When you copy and paste into your Notepad, you will see entire Text Database.

The Text database should strictly follow this structure –

I am a Note|a|a|d||I can be Moved|b|b|d||Make a Memo|c|c|d||A Reminder|d|d|d||Tasks to Complete|e|e|d||Note a Point|f|f|d||Jot a Thought|g|g|d||

Pipe Separated Database. Records are separated by ||. Data Fields Separated by |. This can be easily imported into any Spreadsheet software or Database Import Tools.

Fix Reset Notes

This is like a master reset, Pin Notes will become as good as new. All note settings are Lost ! You have to do this only if a mistake has been made during restore of data. After a Restore if it says “Something Wrong Somewhere” just close the browser, Do not save !!

There is a problem when a Text Database with errors is restored and saved. The data structure is strictly as shown above.

Whatever you backed up from this Pin Notes earlier, Restore it intact, then this problem is never encountered.

Cookie database

Cookies in a browser are used to store the data in your browser on your computer. It can be easily deleted. Keep a backup in a text editor, to restore or move to another browser or another computer.

Enable cookies, read this page cookies enabled. If you still have problems i suggest you use the Firefox Browser. If you clear all cookies from your browser, then the notes also will be deleted.

If the gadget says “On Cookies”, for Firefox go to Tools->Options->Privacy, Check Mark the “Keep until they Expire”

In Internet Explorer Tools->Internet Options->Privacy, set it to “Accept all Cookies” or “Low” – Then visit the page with this gadget, make an alarm setting or two – Then Revert the Privacy of IE to Default-Medium

Applications and Enhancements

You can store your tweet drafts, ideas or URL etc. I will try to make a canvas view option later.

Observations

Pin-a-Note may still have quite a few bugs, let me know, it helps to learn and improve.
Cookies are used to store data, when you delete history and clear cookies; Pin Notes data is gone.

delabs creations  2005