Just bought a microscope from Omax and this is a link to that model.

I do not have any professional biomedic education other than the one classes taken in high school and that was a moment where several students share a microscope so did not spend any quality time at all, I guess. Now I have my own 🙂

This model support a 1.3MP Digital camera and you only need to use a regular USB cable to connect it to your computer and you are good to go. Based on the description, the software functionality is highly limited on the MacOS platform but for a newbie like me, it is sufficient! The microscope does not come with any slide so I ordered some preprocessed slide from Amscope, now everything is ready, let’s show you a few photos that I have taken.

The first photo is a bee leg and second is actually a piece of napkin, the following are the pine leaf under different resolution.

Image recognition has already been very helpful in facial recognition, object detection and recognition in order to enable cool things like auto tagging, auto driving cars, .etc however, there is also applications at the macro and micro cell. Here is an interesting post from Google explaining how dermatologist use deep learning to detect skin cancer.

Context

When I started my career, two things that I kind of shy away from are Excel and Tableau. It is a shame that how much extra effort that I have put into exploring options in Python and R by writing tens of lines of code to implement a pivot in Excel. However, on the bright side, you did become more proficient with the programming method and probably had a much deeper understanding of the underlying implementation of “pivot” because you know “reshape” could be much more powerful and predictable. The con is also very clear, now very few people can use your work. Only the coders now, and what is even worse, many coders do not read/use other people code and prefer do it themselves :). Given that, sometime you might think it is probably a good idea to put a user interface on your hardcore but beautiful applications because it is reusable, and now much accessible to a broader audience. In a series of blog posts, I am trying to build a machine learning demo that people can build a “hidden rule”, a “secret”, a “customized pattern” that we are trying to reveal by using machine learning. A key first step is how to help users easily build some rule. You can definitely ask the user to enter some rule like “if attribute_1 > 1000 then …”. However, you might be surprised at how hard it will be even to let average human being to enter that logic into computer (talk to your grandparents and give it a try). A good starting point is probably to have some drag and drop.

I am by no means a front-end developer, in this blog post, I am trying to explore some options and equip myself with some basic knowledge of the existing options out there. If I can build some drag and drop user friendly solution to build a if statement, I will declare a victory. So let’s get started.

0. Requirements

1. HTML5 Drag&Drop

W3Schools

A quick Google search says drag and drop is a built-in attribute in HTML5. Here is an example from W3schools showing how you can drag and drop an image in/out of an empty box.

There are a few key attributes related to drag and drop we need to highlight:

source

draggable=”true”: the object need to be configured in order to move it
ondragSTART=”drag(event)”: ev.dataTransfer.setData(, )

target

ondragOVER=”allowDrop(event)”: preventDefault() will now show a green plus sign indicating that you can drop now
ondrop=”drop(event)”: what do you expect to happen on the drop (mouse release). preventDefault() + ev.dataTransfer.getData() + ev.target.appendChild() will add certain content to the target object.

The example from W3Schools is very helpful, I also added a few more boxes with attributes configured to be different value so that you can understand how the objects will react accordingly. You can see my modified version here.

MDN Web Docs

At the same time, there is a much more comprehensive documentation about everything drag and drop from MDN Web Docs. They introduced the attributes above in further depth and at the same time, mentioned many other concepts like define the drag image, effect, etc.

They also included a few demos here and the one that I like the most is the parking demo, a game where you can park certain car during certain time by dragging and dropping. You can find the source code here.