Add Notes on Mobile Devices

中文版

Previously users are able to access the notebook platform (3exps.org) via the browser on the mobile phone. We did some optimization for mobile access. Now we have new ways to allow you to add bookmark/scrap/snippet more easily from your mobile phone, and you can add note (snippet /bookmark/scrap) from various apps on your phone (for iOS).

Basically we have two ways: one is to use bookmark on your browser such as safari to add bookmark or scrap to the notebook; the other is to use pythonista scripts (if you have pythonista installed on your iphone).

Use your browser to add bookmark or scrap:

There is no bookmark menu bar on mobile safari as you have on desktop. But you can still add those javascript bookmarklets to the mobile safari, and there is some trick in order to do that.

  1. add a whatever site to your bookmark, for example, add www.google.com to your mobile safari bookmark;
  2. go to your safari bookmarks, and click on “Edit”;
  3. edit that bookmark you just added, changing the url to the javascript bookmarklet:

    javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open('http://3exps.org/user/bookmarkbook/bookmarks/addBookmark/?url='+c(b.location)+'&title='+c(b.title),'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=300px,width=500px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300)})();

    Also it is better to change the name of the bookmark to something like “Add Bookmark”

Now you have a bookmark that you can use to add bookmark to your notebook when you encounter an interesting website when browsing on your mobile phone. (You can do the same on android.) To use it, open the website that you want to read on your mobile safari, then click on the bookmark icon at the bottom, and select the “Add Bookmark” bookmark. The rest is just the same as what you will have on the desktop. If you don’t understand above, maybe you can try reading this Quickly Add Bookmarklets to Safari Using a URL Trick

How to add scrap from your mobile phone? Pretty much the same as the above for bookmark. Just before you click on the bookmark icon at the bottom, you can select and copy the paragraph of the webpage that you want to add to your scraps on the notebook. Then after clicking on the “Add Scrap” bookmark, just paste the clipboard content into the desc area box.

Here is the adding scrap bookmarklet:

javascript:(function(){var a=window,b=document,c=encodeURIComponent;var txt = '';if (window.getSelection){txt=window.getSelection();}else if (document.getSelection){txt=document.getSelection();}else if (document.selection){txt=document.selection.createRange().text;}d=a.open('http://3exps.org/user/scrapbook/scraps/addScrap/?url='+c(b.location)+'&title='+c(b.title)+'&desc='+c(txt),'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=500px,width=600px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300)})();

For the bookmarklets, you can also get them from the gists.

For android, it is pretty much the same. You can add these two bookmarklet to your browsers on android.

iOS Pythonista way:

If you have pythonista installed on your iphone (or ipad. But we haven’t tested on ipad yet.), you have even more powerful ways to add bookmark/scrap/snippet from various apps on your iphone using iOS’ “share extension” mechanism. About iOS’ “share extension”, briefly it is a mechanism for iOS app to share info/data among different apps, so you can share info from one app to other apps such as twitter, facebook, or wechat.

So how to do it?

First install Pythonista (I only tested with Pythonista 2.1.1 so far, but I think it should work with Pythonista 3 as well since Pythonista 3 allows you to choose Python 2 or 3) (One more thing, Pythonista is not free, but if you can program, it is a great tool!).

Then get the scripts from the gist.

Add the scripts to the share extension menu of your iphone. Just open an app such as safari, and click on the share icon. At the bottom of the share menu, you can see “Run Pythonista Script” icon, click it and add your script there.(Read up in the “The Pythonista App Extension” section from Pythonista documentation) You can customize the icon image and color for your script icon if you want. IOS’ sharing mechanism let different apps share different things. Safari shares a url, for example, which can be used by the add_bookmark.py and add_scrap.py scripts to add bookmark or scap to your notebook account. Apple Notes share the text (pictures and videos as well) of the note, which can be used by the add_snippet.py script to add snippet to your notebook account. (For simplicity, snippet is added as private and with vote 0, which we feel is more preferred when adding snippets from mobile phone. You can always change them when revewing and editing your notes on your desktop.)

One thing for your attention, however, is about account login for adding snippets (if you are adding bookmark/scrap from your browser–either through the bookmarklets or through Pythonista scripts, your browser will ask you for login just as on a desktop browser. If you have logged in before, then you won’t be asked to login again unless your session expires). These scripts uses keychain to store password securely on your iphone, so you only need to enter your account username and password once. Also you need to make a small modification to the add_snippet.py code, changing the default username “leon” to your account username on the notebook platform. The reason is explained in the comments inside the script.

Here is the sharing screen after you click “Run Pythonista Script”. Also please be aware that the scripts work with any app that supports the standard iOS sharing extension, so you can easily add snippet /bookmark/scrap from various apps on your mobile phone/ipad. Especially if you like to make notes on your iphone with Apple Notes, you can easily sync your notes to your online notebook.

sharing_buttons_ios_en

This entry was posted in Documentation, New Features, User Manual. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + three =