# eye5

> OpenUI5 control instance viewer

Latest version **0.1.1** (published 2017-02-06) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install eye5
pnpm add eye5
yarn add eye5
bun add eye5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-02-06 |
| First published | 2017-02-04 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jonathan Brink |
| Maintainers | jonbri |
| Keywords | debugging, tool, OpenUI5, SAPUI5, onscreen |

## Links

- npm: https://www.npmjs.com/package/eye5
- Repository: https://github.com/jonbri/eye5
- Homepage: https://github.com/jonbri/eye5#readme
- Issues: https://github.com/jonbri/eye5/issues
- npm.io page: https://npm.io/package/eye5

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2017-02-06
- 0.1.0 — 2017-02-05
- 0.0.2 — 2017-02-04
- 0.0.1 — 2017-02-04

## README

# eye5

[![Build Status](https://travis-ci.org/jonbri/eye5.svg?branch=master)](https://travis-ci.org/jonbri/eye5)

OpenUI5 control instance viewer.

Useful for getting references to OpenUI5 controls during console debugging.

Play with eye5: [https://jonbri.github.io/eye5](https://jonbri.github.io/eye5/)

## Motivation
While developing OpenUI5 applications, I found myself frequently following this pattern while debugging in the browser:
* [inspect](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/) where I think the dom root of a control is
* almost always miss and have to dig around in the "Elements" tab for the desired dom ref
* copy the element's id to the clipboard
* paste the id into the console
* get a jQuery selector to the ref by wrapping with: `jQuery('#pastedId')`
* finally, get the control reference with: `.control()[0]`

After doing this a couple hundred times I decided to streamline the process with a small tool, hence [eye5](#usage).

An alternative to eye5 is the ["UI5 Inspector"](http://openui5.tumblr.com/post/129707131982/ui5-inspector-a-new-open-source-chrome-extension) Chrome plugin.


## Usage
Load `node_modules/eye5/dist/eye5.min.js`. The nature of this tool (on-the-fly debugging) means that it's often most convenient to simply copy-paste the [distribution](https://raw.githubusercontent.com/jonbri/eye5/master/eye5.min.js) directly into the console. You can also integrate via [NPM](https://www.npmjs.com/package/eye5).

The `search` function will return an array of control references as well as highlight the targeted controls with a display label.

Controls with `button` in their id: `eye5.search('button')`

If you know an identifying part of an id, using a regular expression: `var oButton = eye5.search(/toplevel.*-button0/)[0]`

Searches will populate the "target" variables:
```js
eye5.search('button');
// eye5.target -> first search result
// eye5.target1 -> second search result
// eye5.target2 -> third search result, etc
```

Get _all_ controls with: `eye5.all()`


## Configuration
`config(object)` is used to configure eye5.

Properties:
* `standoutDelay` (default: 3000) -> search highlighting time
* `labelStyle` -> css object for search labels
* `controlStyle` -> css object control highlighting

Example:
```js
eye5.config({
    standoutDelay: 1000 // one second
    controlStyle: { // change the highlight border
        border: '1px solid red'
    }
})
```


## Build
```shell
npm install
npm test        # run test suite (qunit, phantomjs)
npm run lint    # eslint
npm run serve   # http://localhost:9000/index.html
npm run package # generates eye5.min.js
```

## License
[BSD-2-Clause](http://spdx.org/licenses/BSD-2-Clause)

---
_Source: https://npm.io/package/eye5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._