msc-lens

Google Lens is famous and powerful for image search. Users could use its fancy UI for image selection. I like its effect and wanna to apply it for services I owned. That's also the main reason I wrapped it into <msc-lens />.

Developers could received exactly the image which users just selected and do some analytics and recommend. Then render results through event which <msc-lens /> provided.

Basic Usage

<msc-lens /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-lens />'s html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://your-domain/wc-msc-lens.js">        
</script>

• Structure

Put img[slot="msc-lens-vision"] inside <msc-lens /> as its child. It will use it as source.

<msc-lens>
  <script type="application/json">
    {
      "sensorsize": 28,
      "active": false,
      "delay": 500,
      "format": "blob",
      "webservice": {
        "uri": "https://your-domain/analytic",
        "fieldName": "lens",
        "params": {
          "origin": "extra param you like",
          "id": "extra param you like"
        }
      },
      "boundings": [
        {
          "top": 42.998,
          "right": 11.8,
          "bottom": 5.652,
          "left": 35.987
        }
      ]
    }
  </script>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-lens />.

<msc-lens remoteconfig="https://your-domain/api-path">
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

JavaScript Instantiation

<msc-lens /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscLens } from 'https://your-domain/wc-msc-lens.js';

const content = document.querySelector('img[slot="msc-lens-vision"]');

// use DOM api
const nodeA = document.createElement('msc-lens');
nodeA.appendChild(content.cloneNode(true));
document.body.appendChild(nodeA);
nodeA.webservice = {
  uri: 'https://your-domain/analytic',
  fieldName: 'lens',
  params: {
    origin: 'extra param you like',
    id: 'extra param you like'
  }
};

// new instance with Class
const nodeB = new MscLens();
nodeB.appendChild(content.cloneNode(true));
document.body.appendChild(nodeB);
nodeB.webservice = {
  uri: 'https://your-domain/analytic',
  fieldName: 'lens',
  params: {
    origin: 'extra param you like',
    id: 'extra param you like'
  }
};

// new instance with Class & default config
const config = {
  sensorsize: 40,
  webservice: {
    uri: 'https://your-domain/analytic',
    fieldName: 'lens',
    params: {
      origin: 'extra param you like',
      id: 'extra param you like'
    }
  }
};
const nodeC = new MscLens(config);
nodeC.appendChild(content.cloneNode(true));
document.body.appendChild(nodeC);
</script>

Style Customization

<msc-lens /> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
msc-lens {
  --msc-lens-overlay-color: rgba(0,0,0,.5);
  --msc-lens-sensor-color: rgba(255,255,255,1);
}
</style>

Attributes

<msc-lens /> supports some attributes to let it become more convenience & useful.

• sensorsize

Set sersor size for <msc-lens />. Default is 28 (px).

<msc-lens
  sensorsize="28"
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

• active

Set active for <msc-lens />. It will switch to select mode once set. Default is false (not set).

<msc-lens
  active
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

• delay

Set delay for <msc-lens />. It will delay fetch web service once user finish select. Default is 500 (ms).

<msc-lens
  delay="500"
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

• format

Set image format for <msc-lens />. This attribute can only accept "blob" or "dataURL". Default is "blob".

<msc-lens
  format="blob"
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

• webservice

Set web service information for <msc-lens />. It should be JSON string. Developers could set uri、fieldName and extra params here.（uri must be full path）

<msc-lens
  webservice='{"uri":"https://your-domain/analytic","fieldName":"lens","params":{"origin":"extra param you like","id":"extra param you like"}}'
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

• boundings

Set boundings information for <msc-lens />. Developers could defined objects' bounding information through this. Each unit should be JSON string and required top、right、bottom、left（percentage）. When <msc-lens /> active, there will be some indicators display.

<msc-lens
  boundings='[{"top":42.998,"right":11.8,"bottom":5.652,"left":35.987}]'
>
  <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" />
</msc-lens>

Properties

Property Name	Type	Description
sensorsize	Number	Getter / Setter for senser size. Developers could use this property to setup sensor size.
active	Boolean	Getter / Setter for active. It will switch to select / normal mode.
delay	Number	Getter / Setter for delay. It will delay fetch web service once user finish select.
format	String	Getter / Setter for format. It will set image format. This property can only accept "blob" or "dataURL". Default is "blob".
webservice	Object	Getter / Setter for web service information. Developers could set uri、fieldName and extra params here.（uri must be full path）
boundings	Object	Getter / Setter for object bounding information. Developers could defined objects' bounding information in top、right、bottom、left.（percentage）

Method

Method Signature	Description
toggle([force])	Toggle <msc-lens /> select or normal mode. When argument is present: If the argument is true, <msc-lens /> will switch to select mode, and if it is false, back to normal.

Event

Event Signature	Description
msc-lens-switch	Fired when <msc-lens /> mode switched. Developers could get active through event.detail.
msc-lens-capture	Fired when <msc-lens /> captures image selection. Developers could get image、bounding through event.detail.
msc-lens-process	Fired when <msc-lens /> fetch web service.
msc-lens-result	Fired when <msc-lens /> finished web service fetching. Developers could get result through event.detail.

Reference

• Google Lens
• TensorFlow > Object Detection (coco-ssd)
• <msc-lens />