问:
How to use getpass() to hide a users password as it is entered
I am trying to make a small program which checks the strength of the user password. When the user is prompted to enter their password I want the input to show as asterisks or dots instead of the text input. Is there a way of hiding this input.

I have used getpass to try and hide the input without success.

```<code>    from getpass import getpass
    passwd = getpass('Please enter your password')
</code>```

This gives me the following warning message:

Warning (from warnings module):
    File "C:\Program Files (x86)\Python36-32\lib\getpass.py", line 100
      return fallback_getpass(prompt, stream)
  GetPassWarning: Can not control echo on the terminal.
  Warning: Password input may be echoed.
  Please enter your password: this_is_my_password

The password is entered on the line but instead of coming up with astrisks it comes up with the original characters.

As the program will check the strength of the password I need to have something that does not save the password as the asterisks but as its original characters.

As well as this is there any way of incorporating a way of showing the user password if they perform an action. I was considering using a button but that is an area in Python I am not confident with so could I program in another way with a specific key.

Sudo code for project.

```<code>userPass = hidden(input("Please enter your password "))
if showPassword selected:
    show the password
else:
    move on with the rest of the program
</code>```

答: The warning basically means you are running your program in an environment where Python cannot use the regular interactive IOCTL calls to implement the asterisks-only functionality. Running a program from inside your IDE basically causes the IDE to run the program in a pseudo-terminal. Try running it on the command line instead.</p>

Body:
I am trying to make a small program which checks the strength of the user password. When the user is prompted to enter their password I want the input to show as asterisks or dots instead of the text input. Is there a way of hiding this input.

I have used getpass to try and hide the input without success.

    from getpass import getpass
    passwd = getpass('Please enter your password')

This gives me the following warning message:

Warning (from warnings module):
    File "C:\Program Files (x86)\Python36-32\lib\getpass.py", line 100
      return fallback_getpass(prompt, stream)
  GetPassWarning: Can not control echo on the terminal.
  Warning: Password input may be echoed.
  Please enter your password: this_is_my_password

The password is entered on the line but instead of coming up with astrisks it comes up with the original characters.

As the program will check the strength of the password I need to have something that does not save the password as the asterisks but as its original characters.

As well as this is there any way of incorporating a way of showing the user password if they perform an action. I was considering using a button but that is an area in Python I am not confident with so could I program in another way with a specific key.

Sudo code for project.

userPass = hidden(input("Please enter your password "))
if showPassword selected:
    show the password
else:
    move on with the rest of the program


来源: stackexchange

问:
Sort table according to another vector
```<code>a=[44;60;11]; b=[9;8;4]; c=[4;16;23];
T=table(a,b,c);
d=[2;3;1];
</code>```

Sort rows of table T according to index vector "d"

答:
So you're sorting the rows according to the indices in your vector d.</p>

```<code>tSort = T(d,:);
</code>```

ContentLicense: CC BY-SA 3.0

Title: Sort table according to another vector

Body:
a=[44;60;11]; b=[9;8;4]; c=[4;16;23];
T=table(a,b,c);
d=[2;3;1];

Sort rows of table T according to index vector "d"

Body:
So you're sorting the rows according to the indices in your vector d.

tSort = T(d,:);


问:
how bind correctly in react-native?
I'm try to update the state from a function, but I don't find the correct form to bind the scope. My code (I am working with native-base components):</p>
```<code>export default class MenuScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _renderRow() {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }

  render() {
    return (
         <SectionList
          sections={[...]}
          renderItem={this._renderRow}
        />
    );
  }
</code>```

答:
First option, bind it in constructor

Example

```<code>  constructor(props) {
    super(props);
    this.state = {};
    this._renderRow = this._renderRow.bind(this);
  }
</code>```

Second option, bind it inline

Example

```<code>     <SectionList
      sections={[...]}
      renderItem={this._renderRow.bind(this)}
    />
</code>```

Third option, use arrow functions

Example

```<code>renderRow = () => {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { this.setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }
</code>```

ContentLicense: CC BY-SA 4.0

Title: how bind correctly in react-native?

Body:
I'm try to update the state from a function, but I don't find the correct form to bind the scope. My code (I am working with native-base components):

export default class MenuScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _renderRow() {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }

  render() {
    return (
         <SectionList
          sections={[...]}
          renderItem={this._renderRow}
        />
    );
  }

Body:
First option, bind it in constructor

Example

  constructor(props) {
    super(props);
    this.state = {};
    this._renderRow = this._renderRow.bind(this);
  }

Second option, bind it inline

Example

     <SectionList
      sections={[...]}
      renderItem={this._renderRow.bind(this)}
    />

Third option, use arrow functions

Example

renderRow = () => {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { this.setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }


问:
Why calling LoggerFactory.getLogger(...) every time is not recommended?
I've read tons of posts and documents (on this site and elsewhere) pointing that the recommended pattern for SFL4J logging is:

```<code>public class MyClass {
    final static Logger logger = LoggerFactory.getLogger(MyClass.class);

    public void myMethod() {
        //do some stuff
        logger.debug("blah blah blah");
    }
}
</code>```

My boss prefers we just use a wrapper to intercept log calls and avoid boiler plate code for declaring the logger on every class:

```<code>public class MyLoggerWrapper {
    public static void debug(Class clazz, String msg){
        LoggerFactory.getLogger(clazz).debug(msg));
    }
}
</code>```

and simply using it like this:

```<code>public class MyClass {

    public void myMethod() {
        //do some stuff
        MyLoggerWrapper.debug(this.getClass(), "blah blah blah");
    }
}
</code>```

I presume instantiating a logger every time we log is somewhat expensive but I've been unable to find any document backing that assumption. Besides he says surely the framework (LogBack or Log4J we're still deciding) will "cache" the loggers and also that in any case the servers are running very much below their capacity so it is not an issue.

Any help pointing out potential problems with this approach?

答:
There are two reasons why your boss' approach does not achieve what he thinks.

The smaller reason is that the overhead of adding a static logger is negligible. After all, the logger setup is part of this pretty lengthy sequence:

Locate the class, i.e. walk all the .jars and directories. Java code. Pretty big overhead due to filesystem calls. May create helper objects, e.g. with File.

Load the bytecode, i.e. copy it into a data structure inside the JVM. Native code.

Validate the bytecode. Native code.

Link the bytecode, i.e. iterate through all the class names in the bytecode and replace them with pointers to the referred-to class. Native code.

Run static initializers. Triggered from native code, the initializers are Java code of course. The Logger gets created here.

After a while, maybe JIT-compile the class. Native code. Huge overhead (compared to the other operations anyway).

Also, your boss saves nothing.

The first call to LoggerFactor.getLogger will create the logger and place it in a global name-to-Logger HashMap. This will happen even for the isXxxEnabled calls, because to do these you need to construct the Logger object first...

The Class object will carry an extra pointer for the static variable. This is offset by the overhead of passing the clazz parameter - an additional instruction and an additional pointer-sized reference in the bytecode, so you lose at least one byte in class size already.

The code is also going through an extra indirection, LoggerFactory.getLogger(Class) uses Class#getName and delegates to LoggerFactory.getLogger(String).

Now if your boss is not after performance but after the ability to simply copy over the static declaration, he can use a function that inspects the call stack and retrieves the class name. The function should be annotated @CallerSensitive, and it's still something that needs to be tested whenever a new JVM is used - not nice if you do not control the JVM that the user is running the code on.

The least problematic approach would be to have an IDE that checks the logger instantiation. This probably means finding or writing a plugin.

ContentLicense: CC BY-SA 2.5

Body:
I've read tons of posts and documents (on this site and elsewhere) pointing that the recommended pattern for SFL4J logging is:

public class MyClass {
    final static Logger logger = LoggerFactory.getLogger(MyClass.class);

    public void myMethod() {
        //do some stuff
        logger.debug("blah blah blah");
    }
}

My boss prefers we just use a wrapper to intercept log calls and avoid boiler plate code for declaring the logger on every class:

public class MyLoggerWrapper {
    public static void debug(Class clazz, String msg){
        LoggerFactory.getLogger(clazz).debug(msg));
    }
}

and simply using it like this:

public class MyClass {

    public void myMethod() {
        //do some stuff
        MyLoggerWrapper.debug(this.getClass(), "blah blah blah");
    }
}

I presume instantiating a logger every time we log is somewhat expensive but I've been unable to find any document backing that assumption. Besides he says surely the framework (LogBack or Log4J we're still deciding) will "cache" the loggers and also that in any case the servers are running very much below their capacity so it is not an issue.

Any help pointing out potential problems with this approach?


问:
Add images into string? Translate word into image
I want to create a program that let you input a sentence such as:
I am happy.
And outputs: I am  (happy emoji, in my case an image I've created myself).

So far I am able to replace happy by another word but I need to replace it with an image.
Can I add images to a string?
If so, how?

UPDATE: My code finally works, this is the html and javascript I've used:

```<code><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Parse emotional expressions with emoticions.</title>
     <style>
      .inline-img {
          height: 40px;
        }
    </style>
     </head>
      <body>
        <font size="+3" face="Helvetica">
       <p id="output"></p>
     </font>
         <script>
         document.addEventListener('DOMContentLoaded', function() {
         function word_replace(replacements, str) {
           var result = str;
            for (var [x, url] of replacements) {
             result = result.replace(x, '<img src="' + url + '" alt="emoji" class="inline-img" />');
                    }
          return result;
          }
            var input = prompt('Input your sentence');
            var output = word_replace([

            [/(happy)/ig, 'https://c1.staticflickr.com/5/4521/38517798662_418a72e9d9_b.jpg'],
            [/(sad|depressed)/ig, 'https://c1.staticflickr.com/5/4553/38517797352_6c8fba1a3d_o.png'],
            [/(confused)/ig, "https://c1.staticflickr.com/5/4519/37833334134_109952bda2_b.jpg"],
            [/(afraid)/ig, 'https://c1.staticflickr.com/5/4516/37833334324_c43f01a30d_b.jpg'],
            [/(angry)/ig, 'https://c1.staticflickr.com/5/4532/26773555349_63894fa4be_b.jpg'],
            [/(determined)/ig, 'https://c1.staticflickr.com/5/4537/37833333874_ff92cb8647_b.jpg'],
            [/(love)/ig, 'https://c1.staticflickr.com/5/4530/37833331724_8a90312ddb_b.jpg'],
            [/(indifferent)/ig, 'https://c1.staticflickr.com/5/4543/37833333744_59da46444d_b.jpg']

          ], input);

          var outputElement = document.getElementById("output");
          outputElement.innerHTML = output;
      });

    </script>
  </body>
</html>
</code>```

答:
/*
 * jQuery CSSEmoticons plugin 0.2.9
 *
 * Copyright (c) 2010 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: Sun Oct 22 1:00:00 2010 -0500
 */(function(a){a.fn.emoticonize=function(m){var c=a.extend({},a.fn.emoticonize.defaults,m);var d=[")","(","*","[","]","{","}","|","^","<",">","\\","?","+","=","."];var l=[":-)",":o)",":c)",":^)",":-D",":-(",":-9",";-)",":-P",":-p",":-Þ",":-b",":-O",":-/",":-X",":-#",":'(","B-)","8-)",";*(",":-*",":-\\","?-)",": )",": ]","= ]","= )","8 )",": }",": D","8 D","X D","x D","= D",": (",": [",": {","= (","; )","; ]","; D",": P",": p","= P","= p",": b",": Þ",": O","8 O",": /","= /",": S",": #",": X","B )",": |",": \\","= \\",": *",": >",": <"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":>",":<"];var h={">:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},">: )":{cssClass:"red-emoticon small-emoticon"},">; )":{cssClass:"red-emoticon small-emoticon"},">: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"<3":{cssClass:"pink-emoticon counter-rotated"},O_O:{cssClass:"no-rotate"},o_o:{cssClass:"no-rotate"},"0_o":{cssClass:"no-rotate"},O_o:{cssClass:"no-rotate"},T_T:{cssClass:"no-rotate"},"^_^":{cssClass:"no-rotate"},"O:)":{cssClass:"small-emoticon spaced-emoticon"},"O: )":{cssClass:"small-emoticon"},"8D":{cssClass:"small-emoticon spaced-emoticon"},XD:{cssClass:"small-emoticon spaced-emoticon"},xD:{cssClass:"small-emoticon spaced-emoticon"},"=D":{cssClass:"small-emoticon spaced-emoticon"},"8O":{cssClass:"small-emoticon spaced-emoticon"},"[+=..]":{cssClass:"no-rotate nintendo-controller"}};var f=new RegExp("(\\"+d.join("|\\")+")","g");var n="(^|[\\s\\0])";for(var g=l.length-1;g>=0;--g){l[g]=l[g].replace(f,"\\$1");l[g]=new RegExp(n+"("+l[g]+")","g")}for(var g=j.length-1;g>=0;--g){j[g]=j[g].replace(f,"\\$1");j[g]=new RegExp(n+"("+j[g]+")","g")}for(var k in h){h[k].regexp=k.replace(f,"\\$1");h[k].regexp=new RegExp(n+"("+h[k].regexp+")","g")}var e="span.css-emoticon";if(c.exclude){e+=","+c.exclude}var b=e.split(",");return this.not(e).each(function(){var o=a(this);var i="css-emoticon";if(c.animate){i+=" un-transformed-emoticon animated-emoticon"}for(var p in h){specialCssClass=i+" "+h[p].cssClass;o.html(o.html().replace(h[p].regexp,"$1$2"))}a(l).each(function(){o.html(o.html().replace(this,"$1$2"))});a(j).each(function(){o.html(o.html().replace(this,"$1$2"))});a.each(b,function(q,r){o.find(a.trim(r)+" span.css-emoticon").each(function(){a(this).replaceWith(a(this).text())})});if(c.animate){setTimeout(function(){a(".un-transformed-emoticon").removeClass("un-transformed-emoticon")},c.delay)}})};a.fn.unemoticonize=function(b){var c=a.extend({},a.fn.emoticonize.defaults,b);return this.each(function(){var d=a(this);d.find("span.css-emoticon").each(function(){var e=a(this);if(c.animate){e.addClass("un-transformed-emoticon");setTimeout(function(){e.replaceWith(e.text())},c.delay)}else{e.replaceWith(e.text())}})})};a.fn.emoticonize.defaults={animate:true,delay:500,exclude:"pre,code,.no-emoticons"}})(jQuery);

$('.comment').emoticonize();```
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*
 * jQuery CSSEmoticons plugin 0.2.9
 *
 * Copyright (c) 2010 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: Sun Oct 22 1:00:00 2010 -0500
 */

 /* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function: linear, ease-in;
}

/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}

/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}

/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}

span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}

/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.pink-emoticon {
  background-color: #ff8fd4;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size: 0.45em;
  width: 2.2em;
  height: 2.2em;
  line-height: 1.9em;
  -moz-border-radius: 2.2em;
  -webkit-border-radius: 2.2em;
  border-radius: 2.2em;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.no-rotate.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.no-rotate.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.counter-rotated.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.counter-rotated.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}

span.css-emoticon.nintendo-controller {
  font-size: .8em;
  height: 1.2em;
  line-height: 1em;
  width: 2.7em;
  vertical-align: bottom;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.09, rgb(116,121,140)),
      color-stop(0.55, rgb(165,170,189))
  );
  background: -moz-linear-gradient(
      center bottom,
      rgb(116,121,140) 9%,
      rgb(165,170,189) 55%
  );
}</code>```

  Hi, this is a great plugin! :-)

```

Try this

Body:
I want to create a program that let you input a sentence such as:
I am happy.
And outputs: I am  (happy emoji, in my case an image I've created myself).

So far I am able to replace happy by another word but I need to replace it with an image.
Can I add images to a string?
If so, how?

UPDATE: My code finally works, this is the html and javascript I've used:

<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Parse emotional expressions with emoticions.</title>

Body:
/*
 * jQuery CSSEmoticons plugin 0.2.9
 *
 * Copyright (c) 2010 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: Sun Oct 22 1:00:00 2010 -0500
 */(function(a){a.fn.emoticonize=function(m){var c=a.extend({},a.fn.emoticonize.defaults,m);var d=[")","(","*","[","]","{","}","|","^","<",">","\\","?","+","=","."];var l=[":-)",":o)",":c)",":^)",":-D",":-(",":-9",";-)",":-P",":-p",":-Þ",":-b",":-O",":-/",":-X",":-#",":'(","B-)","8-)",";*(",":-*",":-\\","?-)",": )",": ]","= ]","= )","8 )",": }",": D","8 D","X D","x D","= D",": (",": [",": {","= (","; )","; ]","; D",": P",": p","= P","= p",": b",": Þ",": O","8 O",": /","= /",": S",": #",": X","B )",": |",": \\","= \\",": *",": &gt;",": &lt;"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":&gt;",":&lt;"];var h={"&gt;:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;: )":{cssClass:"red-emoticon small-emoticon"},"&gt;; )":{cssClass:"red-emoticon small-emoticon"},"&gt;: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"&lt;3":{cssClass:"pink-emoticon counter-rotated"},O_O:{cssClass:"no-rotate"},o_o:{cssClass:"no-rotate"},"0_o":{cssClass:"no-rotate"},O_o:{cssClass:"no-rotate"},T_T:{cssClass:"no-rotate"},"^_^":{cssClass:"no-rotate"},"O:)":{cssClass:"small-emoticon spaced-emoticon"},"O: )":{cssClass:"small-emoticon"},"8D":{cssClass:"small-emoticon spaced-emoticon"},XD:{cssClass:"small-emoticon spaced-emoticon"},xD:{cssClass:"small-emoticon spaced-emoticon"},"=D":{cssClass:"small-emoticon spaced-emoticon"},"8O":{cssClass:"small-emoticon spaced-emoticon"},"[+=..]":{cssClass:"no-rotate nintendo-controller"}};var f=new RegExp("(\\"+d.join("|\\")+")","g");var n="(^|[\\s\\0])";for(var g=l.length-1;g>=0;--g){l[g]=l[g].replace(f,"\\$1");l[g]=new RegExp(n+"("+l[g]+")","g")}for(var g=j.length-1;g>=0;--g){j[g]=j[g].replace(f,"\\$1");j[g]=new RegExp(n+"("+j[g]+")","g")}for(var k in h){h[k].regexp=k.replace(f,"\\$1");h[k].regexp=new RegExp(n+"("+h[k].regexp+")","g")}var e="span.css-emoticon";if(c.exclude){e+=","+c.exclude}var b=e.split(",");return this.not(e).each(function(){var o=a(this);var i="css-emoticon";if(c.animate){i+=" un-transformed-emoticon animated-emoticon"}for(var p in h){specialCssClass=i+" "+h[p].cssClass;o.html(o.html().replace(h[p].regexp,"$1<span class='"+specialCssClass+"'>$2</span>"))}a(l).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+"'>$2</span>"))});a(j).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+" spaced-emoticon'>$2</span>"))});a.each(b,function(q,r){o.find(a.trim(r)+" span.css-emoticon").each(function(){a(this).replaceWith(a(this).text())})});if(c.animate){setTimeout(function(){a(".un-transformed-emoticon").removeClass("un-transformed-emoticon")},c.delay)}})};a.fn.unemoticonize=function(b){var c=a.extend({},a.fn.emoticonize.defaults,b);return this.each(function(){var d=a(this);d.find("span.css-emoticon").each(function(){var e=a(this);if(c.animate){e.addClass("un-transformed-emoticon");setTimeout(function(){e.replaceWith(e.text())},c.delay)}else{e.replaceWith(e.text())}})})};a.fn.emoticonize.defaults={animate:true,delay:500,exclude:"pre,code,.no-emoticons"}})(jQuery);

$('.comment').emoticonize();

/*
 * jQuery CSSEmoticons plugin 0.2.9
 *
 * Copyright (c) 2010 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: Sun Oct 22 1:00:00 2010 -0500
 */

 /* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function: linear, ease-in;
}

/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}

/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}

/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}

span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}

/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.pink-emoticon {
  background-color: #ff8fd4;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size: 0.45em;
  width: 2.2em;
  height: 2.2em;
  line-height: 1.9em;
  -moz-border-radius: 2.2em;
  -webkit-border-radius: 2.2em;
  border-radius: 2.2em;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.no-rotate.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.no-rotate.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.counter-rotated.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.counter-rotated.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}

span.css-emoticon.nintendo-controller {
  font-size: .8em;
  height: 1.2em;
  line-height: 1em;
  width: 2.7em;
  vertical-align: bottom;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.09, rgb(116,121,140)),
      color-stop(0.55, rgb(165,170,189))
  );
  background: -moz-linear-gradient(
      center bottom,
      rgb(116,121,140) 9%,
      rgb(165,170,189) 55%
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="comment">
  Hi, this is a great plugin! :-)
</div>

Try this


问:
Select multiple objects with the same name
So I have a sheet with some pictures. All of these are just a copy paste of the original picture so they all have the same name "Flower".

I want to select all of them and flip them. But it will only select the original, how do I get past this? I tried incorporating a loop as well, without luck.

```<code>Sub Test()
    ActiveSheet.Shapes.Range(Array("Flower")).Select
    Selection.ShapeRange.Flip msoFlipHorizontal
End Sub
</code>```

I know that I could simply rename them to Flower1, Flower2 etc. but the plan is to use this for a lot of pictures, so it would take to long to change manually. If it could all be done with a loop, that would be fine, but then I would still have the same problem as above.

答:
You can loop thru the collection Shapes looking for the shapes with the given name. Try this.

```<code>Sub Test()
    Dim Pic As Shape
    For Each Pic In ActiveSheet.Shapes
        If Pic.Name = "Flower" Then Pic.Flip msoFlipHorizontal
    Next Pic
End Sub
</code>```

In addition, you can code this without selecting it. Faster and more reliable.

Body:
So I have a sheet with some pictures. All of these are just a copy paste of the original picture so they all have the same name "Flower".

I want to select all of them and flip them. But it will only select the original, how do I get past this? I tried incorporating a loop as well, without luck.

Sub Test()
    ActiveSheet.Shapes.Range(Array("Flower")).Select
    Selection.ShapeRange.Flip msoFlipHorizontal
End Sub

I know that I could simply rename them to Flower1, Flower2 etc. but the plan is to use this for a lot of pictures, so it would take to long to change manually. If it could all be done with a loop, that would be fine, but then I would still have the same problem as above.

Body:
You can loop thru the collection Shapes looking for the shapes with the given name. Try this.

Sub Test()
    Dim Pic As Shape
    For Each Pic In ActiveSheet.Shapes
        If Pic.Name = "Flower" Then Pic.Flip msoFlipHorizontal
    Next Pic
End Sub

In addition, you can code this without selecting it. Faster and more reliable.


问:
How to use the TextWatcher class in Android?
Can anyone tell me how to mask the substring in EditText or how to change EditText substring input to password type or replace by another character like this 123xxxxxxxxx3455

```<code> String contents = et1.getText().toString();
 et1.setText(contents.replace.substring(0, contents.length()-2),"*");
</code>```

Please, tell me how I can use the TextWatcher method in Android.

答:
Supplemental answer

Here is a visual supplement to the other answers. My fuller answer with the code and explanations is here.

Red: text about to be deleted (replaced)

Green: text that was just added (replacing the old red text)

Body:
Can anyone tell me how to mask the substring in EditText or how to change EditText substring input to password type or replace by another character like this 123xxxxxxxxx3455

 String contents = et1.getText().toString();
 et1.setText(contents.replace.substring(0, contents.length()-2),"*");

Please, tell me how I can use the TextWatcher method in Android.


问:
java opencv png image with alpha channel over video issue
everybody. I'm trying to place ".png" image over the video capture using java and opencv.

I performed the tutorial from the official opencv java website http://opencv-java-tutorials.readthedocs.io/en/latest/04-opencv-basics.html

In this tutorial everything works fine with png image from the tutorial. But when i try to load my own png image with alpha channel, i get the wrong result. Png image displays with white spaces.

Here is the print screens of video capture with both images:

correct output

incorrect output

my png image

Here is the code of loading image:

```<code>@FXML
protected void loadLogo() {
    if(logoCheckBox.isSelected()) {
        this.logo = Imgcodecs.imread("resources/Poli.png", Imgcodecs.IMREAD_COLOR);
    }
}
</code>```

Here is the code of video capture and placing png image over it:

```<code>Mat frame = new Mat();

// read the current frame
this.capture.read(frame);
Rect roi = new Rect(frame.cols() - logo.cols(), frame.rows() - logo.rows(), logo.cols(), logo.rows());
Mat imageROI = frame.submat(roi);

Core.addWeighted(imageROI, 1.0, logo, 1.0f, 0.0, imageROI);
</code>```

And here is how output image place inside ImageView:

```<code>MatOfByte buffer = new MatOfByte();
Imgcodecs.imencode(".png", frame, buffer);
Image imageToShow = new Image(new ByteArrayInputStream(buffer.toArray()));
Image imageToShow = Utils.mat2Image(frame);
currentFrame.setImage(imageToShow);
</code>```

I know that parameter Imgcodecs.IMREAD_COLOR load image with 3 channels, without alpha, but when i change this parameter to IMREAD_UNCHANGED i got this error:

OpenCV Error: Sizes of input arguments do not match (The operation is neither 'array op array' (where arrays have the same size and the same number of channels)

This is appear becouse the input Mat with video capture contains only 3 channels.

My question is: how can i load and place png image over video capture correctly ?

P.S When i fill the background of png image with black, its displayd correct, but image is still stay transparent.

答:
The answer is that RGBA image cannot be placed over RGB video capture. Placing only RBG components of png image gives "wrong result".

For now, the best solution i found is to load png image in RBGA mode COLOR_UNCHANCHED wiht 4 channels, take the 4-th alpha channel and use it as mask for displaying image with function "copyTo" instead of "addWeighted".

But this method doesnt work with translucent parts of PNG image like shadows, and objects with low opacity.

Here is the code of loading image with separate RGB and alpha channel:

```<code>Mat logo = new Mat();
Mat logo_alpha = new Mat();
Mat logo_with_alpha = Imgcodecs.imread("resources/TREE_1.png", Imgcodecs.IMREAD_UNCHANGED);
Vector<Mat> rgba = new Vector<Mat>();
// split RBGA image for separate channels
Core.split(logo_with_alpha, rgba);
// get alpha channel
logo_alpha = rgba.get(3);
// remove alpha channel to get RGB image
rgba.remove(rgba.size()-1);
// get image with only RGB components
Core.merge(rgba, this.logo);
</code>```

Here is the code of video capturing and placing png image over it:

```<code>Mat frame = new Mat();
// read the current frame
this.capture.read(frame);
Rect roi = new Rect(frame.cols() - logo.cols(), frame.rows() - logo.rows(), logo.cols(), logo.rows());
Mat imageROI = frame.submat(roi);
// place logo with alpha on the frame
logo.copyTo(imageROI, logo_alpha);
</code>```

Body:
everybody. I'm trying to place ".png" image over the video capture using java and opencv.

I performed the tutorial from the official opencv java website http://opencv-java-tutorials.readthedocs.io/en/latest/04-opencv-basics.html

In this tutorial everything works fine with png image from the tutorial. But when i try to load my own png image with alpha channel, i get the wrong result. Png image displays with white spaces.

Here is the print screens of video capture with both images:

correct output

incorrect output

my png image

Here is the code of loading image:

@FXML
protected void loadLogo() {
    if(logoCheckBox.isSelected()) {
        this.logo = Imgcodecs.imread("resources/Poli.png", Imgcodecs.IMREAD_COLOR);
    }
}

Here is the code of video capture and placing png image over it:

Mat frame = new Mat();

// read the current frame
this.capture.read(frame);
Rect roi = new Rect(frame.cols() - logo.cols(), frame.rows() - logo.rows(), logo.cols(), logo.rows());
Mat imageROI = frame.submat(roi);

Core.addWeighted(imageROI, 1.0, logo, 1.0f, 0.0, imageROI);

And here is how output image place inside ImageView:

MatOfByte buffer = new MatOfByte();
Imgcodecs.imencode(".png", frame, buffer);
Image imageToShow = new Image(new ByteArrayInputStream(buffer.toArray()));
Image imageToShow = Utils.mat2Image(frame);
currentFrame.setImage(imageToShow);

I know that parameter Imgcodecs.IMREAD_COLOR load image with 3 channels, without alpha, but when i change this parameter to IMREAD_UNCHANGED i got this error:

OpenCV Error: Sizes of input arguments do not match (The operation is neither 'array op array' (where arrays have the same size and the same number of channels)

This is appear becouse the input Mat with video capture contains only 3 channels.

My question is: how can i load and place png image over video capture correctly ?

P.S When i fill the background of png image with black, its displayd correct, but image is still stay transparent.

Body:
The answer is that RGBA image cannot be placed over RGB video capture. Placing only RBG components of png image gives "wrong result".

For now, the best solution i found is to load png image in RBGA mode COLOR_UNCHANCHED wiht 4 channels, take the 4-th alpha channel and use it as mask for displaying image with function "copyTo" instead of "addWeighted".

But this method doesnt work with translucent parts of PNG image like shadows, and objects with low opacity.

Here is the code of loading image with separate RGB and alpha channel:

Mat logo = new Mat();
Mat logo_alpha = new Mat();
Mat logo_with_alpha = Imgcodecs.imread("resources/TREE_1.png", Imgcodecs.IMREAD_UNCHANGED);
Vector<Mat> rgba = new Vector<Mat>();
// split RBGA image for separate channels
Core.split(logo_with_alpha, rgba);
// get alpha channel
logo_alpha = rgba.get(3);
// remove alpha channel to get RGB image
rgba.remove(rgba.size()-1);
// get image with only RGB components
Core.merge(rgba, this.logo);

Here is the code of video capturing and placing png image over it:

Mat frame = new Mat();
// read the current frame
this.capture.read(frame);
Rect roi = new Rect(frame.cols() - logo.cols(), frame.rows() - logo.rows(), logo.cols(), logo.rows());
Mat imageROI = frame.submat(roi);
// place logo with alpha on the frame
logo.copyTo(imageROI, logo_alpha);


问:
Is there an efficient way to find out whether a queue item is "before" another one?
For my Java application, I need some method that finds out if item1 is "before" item2 in my Queue Q. Of course, I can just use an iterator and start traversing the list. However, maybe there is another way of finding this out?

For my specific application, I can't use a LinkedList (which provides indexes and makes it easy to determine if one object is before another).

答:
A Queue is a Collection, so you can always copy its elements to another Collection that lets you retrieve the order, e.g.

```<code>List<YourType> copy = new ArrayList<YourType>(yourQueue);
if(copy.indexOf(obj1)<copy.indexOf(obj2)){
    // some code here
}
</code>```

Of course this is horribly inefficient, but it works. (You will probably have to synchronize the queue while doing this)

Another way would be a to do it via iterator():

```<code>/**
 * Returns -1 if a occurs in the collection before b, 1 if b occurs before a
 * and 0 otherwise.
 */
public static <T> int comparePositionInCollection(final T a,
    final T b,
    final Collection<T> collection){

    // todo: check for a==null, b==null, a.equals(b)

    final Iterator<T> iterator = collection.iterator();
    boolean foundA = false;
    boolean foundB = false;
    int result = 0;
    while(iterator.hasNext()){
        final T t = iterator.next();
        if(a.equals(t)){
            if(foundB){
                result = 1;
                break;
            }
            foundA = true;
        } else if(b.equals(t)){
            if(foundA){
                result = -1;
                break;
            }
            foundB = true;
        }
    }
    return result;
}
</code>```

Of course you would have to synchronize the queue before accessing the iterator, so this is also horribly inefficient.

Body:
A Queue is a Collection, so you can always copy its elements to another Collection that lets you retrieve the order, e.g.

List<YourType> copy = new ArrayList<YourType>(yourQueue);
if(copy.indexOf(obj1)<copy.indexOf(obj2)){
    // some code here
}

Of course this is horribly inefficient, but it works. (You will probably have to synchronize the queue while doing this)

Another way would be a to do it via iterator():

/**
 * Returns -1 if a occurs in the collection before b, 1 if b occurs before a
 * and 0 otherwise.
 */
public static <T> int comparePositionInCollection(final T a,
    final T b,
    final Collection<T> collection){

    // todo: check for a==null, b==null, a.equals(b)

    final Iterator<T> iterator = collection.iterator();
    boolean foundA = false;
    boolean foundB = false;
    int result = 0;
    while(iterator.hasNext()){
        final T t = iterator.next();
        if(a.equals(t)){
            if(foundB){
                result = 1;
                break;
            }
            foundA = true;
        } else if(b.equals(t)){
            if(foundA){
                result = -1;
                break;
            }
            foundB = true;
        }
    }
    return result;
}

Of course you would have to synchronize the queue before accessing the iterator, so this is also horribly inefficient.


问:
Refresh a Fragment from mainactivity
I have an Activity with three tabs and three Fragments. First Fragment shows the list of song titles and the second tab displays the selected song. The details of the songs is coming from a database.
I am implementing SearchView feature so that whatever search text user enters, only those songs should be displayed in the index.

This is exactly like the way phone book work in our devices.

I'm not able to understand how to refresh the first Fragment when the search query changes.
I'm basically looking for the method that I can call to refresh the first Fragment.

答:
Below is the one way, you can easily do it. You just have to save the fragment instance. That's all.

```<code>    private class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private SparseArray<Fragment> array = new SparseArray<>();

    ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {

        array.setValueAt(position, myFragment);
        return myFragment;
    }

    @Override
    public int getCount() {
        return 3;
    }

    public SparseArray<Fragment> getFragmentArray() {
        return array;
    }
}
</code>```

Then from your activity, you can get all viewpager fragment easily from adapter instance.

```<code>MyFragment fragment = (MyFragment) adapter.getFragmentArray().get(0); // get first fragment and casting it to your origin fragment
</code>```

Then create a method on that fragment. Call like below:

```<code>fragment.myFragmentMethod(String myData){}
</code>```

Have a nice day!

Title: Refresh a Fragment from mainactivity

Body:
Below is the one way, you can easily do it. You just have to save the fragment instance. That's all.

    private class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private SparseArray<Fragment> array = new SparseArray<>();

    ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {

        array.setValueAt(position, myFragment);
        return myFragment;
    }

    @Override
    public int getCount() {
        return 3;
    }

    public SparseArray<Fragment> getFragmentArray() {
        return array;
    }
}

Then from your activity, you can get all viewpager fragment easily from adapter instance.

MyFragment fragment = (MyFragment) adapter.getFragmentArray().get(0); // get first fragment and casting it to your origin fragment

Then create a method on that fragment. Call like below:

fragment.myFragmentMethod(String myData){}

Have a nice day!


问:
Looking for SQL query to split the value into another column
I'm using the below SQL code in order to split the value of a column into another column but it is not working the way I expected. please find the below code along with the output which I'm getting.

Query:

```<code>select
upper(regexp_replace(regexp_substr(db_attributes,'.([^\.-]+),([^\,-]+), ([^\,-]+)[so]?[\,-]',1,1,'i',1),'[so]$','') ) AS servername, db_attributes
from table_name
</code>```

Current Output:

```<code>servername                  db_attributes
HSBC                        bsprod04.hbtr.adroot.hsbc, 49465, BSPROD04\PTRFRDS01
NULL                        hkw00100308c01.hbap.adroot.hsbc, 2433, HKW00100308C01
NULL                        ora-abacogp.de.hsbc, 1626, ABACOGP
</code>```

Desired Output:

```<code>servername                  db_attributes
BSPROD04\PTRFRDS01          bsprod04.hbtr.adroot.hsbc, 49465, BSPROD04\PTRFRDS01
HKW00100308C01              hkw00100308c01.hbap.adroot.hsbc, 2433, HKW00100308C01
ABACOGP                     ora-abacogp.de.hsbc, 1626, ABACOGP
</code>```

Regards.

答:
Basically, if the server name is always the last value in the attributes (comma-separated) list, then don't bother looking at the rest of the attributes at all.

```<code>SELECT
      upper(regexp_substr(db_attributes, '[^,]+$',1,1)) AS servername
    , db_attributes
FROM
    tablename
</code>```

UPDATE

And, if you want to test it, here is an SQLFiddle link.

Body:
I'm using the below SQL code in order to split the value of a column into another column but it is not working the way I expected. please find the below code along with the output which I'm getting.

Query:

select
upper(regexp_replace(regexp_substr(db_attributes,'.([^\.-]+),([^\,-]+), ([^\,-]+)[so]?[\,-]',1,1,'i',1),'[so]$','') ) AS servername, db_attributes
from table_name

Current Output:

servername                  db_attributes
HSBC                        bsprod04.hbtr.adroot.hsbc, 49465, BSPROD04\PTRFRDS01
NULL                        hkw00100308c01.hbap.adroot.hsbc, 2433, HKW00100308C01
NULL                        ora-abacogp.de.hsbc, 1626, ABACOGP

Desired Output:

servername                  db_attributes
BSPROD04\PTRFRDS01          bsprod04.hbtr.adroot.hsbc, 49465, BSPROD04\PTRFRDS01
HKW00100308C01              hkw00100308c01.hbap.adroot.hsbc, 2433, HKW00100308C01
ABACOGP                     ora-abacogp.de.hsbc, 1626, ABACOGP

Regards.

Body:
Basically, if the server name is always the last value in the attributes (comma-separated) list, then don't bother looking at the rest of the attributes at all.

SELECT
      upper(regexp_substr(db_attributes, '[^,]+$',1,1)) AS servername
    , db_attributes
FROM
    tablename

UPDATE

And, if you want to test it, here is an SQLFiddle link.


问:
python module throws invalid syntax error
I am writing a module. The python code compiles correctly as python im.py and gives the line count correctly.

```<code>The error thrown when called >>>import im is
File "<stdin>", line 1
    import im
             ^
SyntaxError: invalid syntax

def linecount(filename):
    count = 0
    for line in open(filename):
        count +=1
    return count
print(linecount('im.py'))
</code>```

Any idea why?

答:
Do not import try, that is a python keyword..

OK; You updated your question. Based on it, do:

```<code>import im

def linecount(filename):
    count = 0
    for line in open(filename):
        count +=1
    return count
print(linecount('im.py'))
</code>```

i.e. do not indent your import statement.

Alternatively, it seems you wrote import im is -> did you mean import im as (replacement name here) ?

Body:
I am writing a module. The python code compiles correctly as python im.py and gives the line count correctly.

The error thrown when called >>>import im is
File "<stdin>", line 1
    import im
             ^
SyntaxError: invalid syntax

def linecount(filename):
    count = 0
    for line in open(filename):
        count +=1
    return count
print(linecount('im.py'))

Any idea why?

Body:
Do not import try, that is a python keyword..

OK; You updated your question. Based on it, do:

import im

def linecount(filename):
    count = 0
    for line in open(filename):
        count +=1
    return count
print(linecount('im.py'))

i.e. do not indent your import statement.

Alternatively, it seems you wrote import im is -> did you mean import im as (replacement name here) ?


问:
Swift - How to do specific action on last row of a UITableView when the last row isn't visible?
I am trying to achieve a custom action on the last row of my UITableView.

I found a nice extension in order to know if I'm on the last row :

```<code>extension UITableView {

    func isLast(for indexPath: IndexPath) -> Bool {

        let indexOfLastSection = numberOfSections > 0 ? numberOfSections - 1 : 0
        let indexOfLastRowInLastSection = numberOfRows(inSection: indexOfLastSection) - 1

        return indexPath.section == indexOfLastSection && indexPath.row == indexOfLastRowInLastSection
    }
}
</code>```

The only issue I'm facing is that if my tableView has many rows, with scrollable content, the last row isn't visible.
Thus, in my cellForRow I am doing this :

```<code>if tableView.isLast(for: indexPath) {
   print("Last Row - Do Specific action")
} else {
}
</code>```

It is working, except that imagine my screen can display 6 rows, but the total number of rows of my tableView is 15.
It will apply my specific action on the row at indexPath 5 and 15.

I am guessing it is because each time cellForRow is called, it is checking for the last row, and it apply on the last visible row also.

How can I achieve a custom action ONLY on the last row even if it is not visible yet?

EDIT: After more investigation, the issue comes from UITableView not able to prefetch the cell, and cellLoaded and cellVisible is the same.

答:
try this code in cell for row method</p>

```<code>if indexPath.row == yourarray.count - 1{

                // Put your code

        }
</code>```

Body:
I am trying to achieve a custom action on the last row of my UITableView.

I found a nice extension in order to know if I'm on the last row :

extension UITableView {

    func isLast(for indexPath: IndexPath) -> Bool {

        let indexOfLastSection = numberOfSections > 0 ? numberOfSections - 1 : 0
        let indexOfLastRowInLastSection = numberOfRows(inSection: indexOfLastSection) - 1

        return indexPath.section == indexOfLastSection && indexPath.row == indexOfLastRowInLastSection
    }
}

The only issue I'm facing is that if my tableView has many rows, with scrollable content, the last row isn't visible.
Thus, in my cellForRow I am doing this :

if tableView.isLast(for: indexPath) {
   print("Last Row - Do Specific action")
} else {
}

It is working, except that imagine my screen can display 6 rows, but the total number of rows of my tableView is 15.
It will apply my specific action on the row at indexPath 5 and 15.

I am guessing it is because each time cellForRow is called, it is checking for the last row, and it apply on the last visible row also.

How can I achieve a custom action ONLY on the last row even if it is not visible yet?

EDIT: After more investigation, the issue comes from UITableView not able to prefetch the cell, and cellLoaded and cellVisible is the same.

Body:
try this code in cell for row method

if indexPath.row == yourarray.count - 1{

                // Put your code

        }


问:
Can you help me with linear activation of my Simple Classifier Neural Network in pyBrain?
I'm trying a very simple case using a Python library called pyBrain
and I can't get it to work.  There is likely to be a very simple
reason, so, I hope someone can help!

1) A simple XOR works fine.

2) Classifying the led's displayed on a digital clock to the numerical
output value works fine.

e.g.

```<code>[ 1.  1.  1.  0.  1.  1.  1.] => [ 0.]
[ 0.  0.  1.  0.  0.  1.  0.] => [ 1.]
[ 1.  0.  1.  1.  1.  0.  1.] => [ 2.]
[ 1.  0.  1.  1.  0.  1.  1.] => [ 3.]
[ 0.  1.  1.  1.  0.  1.  0.] => [ 4.]
[ 1.  1.  0.  1.  0.  1.  1.] => [ 5.]
[ 1.  1.  0.  1.  1.  1.  1.] => [ 6.]
[ 1.  0.  1.  0.  0.  1.  0.] => [ 7.]
[ 1.  1.  1.  1.  1.  1.  1.] => [ 8.]
[ 1.  1.  1.  1.  0.  1.  1.] => [ 9.]
</code>```

3) Classifying a numerical value to the led output to drive a digital display doesn't work.

e.g.

```<code>[ 0.] => [ 1.  1.  1.  0.  1.  1.  1.]
</code>```

etc etc (as above but reversed).

I'm using a simple linear activator with 10 inputs, 1 output and i've tried >12 neurons in the hidden layer.

My confusion is that, shouldn't the network be able to remember the pattern with 10 neurons in the hidden layer?

I'm sure there is something obvious I'm missing, so, please feel free to enlighten my stupidity!

答: A linear activation is fine when you're doing regression (single output node representing a range of values) but for classification (binary outputs representing matches) you're better off using an activation that limits the range of values.  Something like a sigmoid or tanh.</p>

Body:
I'm trying a very simple case using a Python library called pyBrain
and I can't get it to work.  There is likely to be a very simple
reason, so, I hope someone can help!

1) A simple XOR works fine.

2) Classifying the led's displayed on a digital clock to the numerical
output value works fine.

e.g.

[ 1.  1.  1.  0.  1.  1.  1.] => [ 0.]
[ 0.  0.  1.  0.  0.  1.  0.] => [ 1.]
[ 1.  0.  1.  1.  1.  0.  1.] => [ 2.]
[ 1.  0.  1.  1.  0.  1.  1.] => [ 3.]
[ 0.  1.  1.  1.  0.  1.  0.] => [ 4.]
[ 1.  1.  0.  1.  0.  1.  1.] => [ 5.]
[ 1.  1.  0.  1.  1.  1.  1.] => [ 6.]
[ 1.  0.  1.  0.  0.  1.  0.] => [ 7.]
[ 1.  1.  1.  1.  1.  1.  1.] => [ 8.]
[ 1.  1.  1.  1.  0.  1.  1.] => [ 9.]

3) Classifying a numerical value to the led output to drive a digital display doesn't work.

e.g.

[ 0.] => [ 1.  1.  1.  0.  1.  1.  1.]

etc etc (as above but reversed).

I'm using a simple linear activator with 10 inputs, 1 output and i've tried >12 neurons in the hidden layer.

My confusion is that, shouldn't the network be able to remember the pattern with 10 neurons in the hidden layer?

I'm sure there is something obvious I'm missing, so, please feel free to enlighten my stupidity!


问:
Netbeans PHP breakpoint variable value "Evaluating..."
When I set a breakpoint in my PHP code I cannot see the content of a string variable because in the variables Value column it says "Evaluating...". What can be done to prevent this from happening? What is this, a timing problem? Can it be fixed with another setting?

I have seen this before but now I really need to know the value to find out my error.

I could isolate the problem and apparently it has to do with the result of PHP implode() that somehow takes too long or something.

答: I did not use Watches to evaluate the variable that was pending. I have no Watches and Balloon Evaluation set. I only use the Debug Variable display. I discovered that in my case the "Maximum Data Length" setting was too small. The variable value went beyond this limit. I was able to fix the issue by raising the limit. </p>


问:
How to delegate Windows Authentication session when running an app on IIS 8?
I have an intranet application written with c# on the top of ASP.Net MVC 5 Framework. My app is configured to authenticate users via "Windows Authentication" method. This app is running on IIS 8.

My app uses a third party SDK to interact with another program I have running on the same domain. This third party app allows the user to login using Windows Authentication also via the provided SDK.

Problem

However the server where the SDK is communication with is always returning "Invalid user name/password is invalid".

After deep troubleshooting, I found out that IIS is not returning the correct username. Instead of returning the "Authenticated User" it is returning the user that is running the pool app. So, to fix this problem, I change the app settings to the following

I disabled "Anonymous Authentication"

I enabled "Windows Authentication"

I enabled "ASP.NET Impersonation" while the "ASP.NET Impersonation" settings are set to "Authenticated user". Note:
that this require "Classic" managed pipeline not "Integrated" for
some reason.

I change the AppPool managed pipeline setting to "Classic" v4

Changed the user that is running the AppPool to "Network Service" instead of "ApplicationPoolId"

Then kept the Authentication Providers list to "Negotiate" and "NTLM"

Finally, I kept the "Kernal-mode authentication" enabled.

So the above settings returned the correct username, but is it not delegating the password to the SDK. I guess because of the communication hob, IIS is protecting the logged in user and it is not allowing me to delegate the password to another service/SDK.

So then I tried to change my setup to the following

I change the AppPool managed pipeline setting to "Integrated" v4.0

Changed the user that is running the AppPool to "Network Service"

I disabled "Anonymous Authentication"

I enabled "Windows Authentication"

I disabled "ASP.NET Impersonation"

The Authentication Providers list "Negotiate:Kerberos",  "Negotiate" and "NTLM"

I disabled "Kernal-mode authentication" as it won't work with "Kerberos" provider.

So the above prevented me from logging into my MVC app altogether, It just keeps on prompting me for my credential over and over.

To fix that, I located my web-server name in my domain controller, and I went to the "Delegation" tab and changed it to "Trust this user for delegation to any service (Kerberos only)"

No this setup, allowed me to login into my MVC app. But this time, it is not delegating neither the username or the password to the SDK. In fact, the username that I get is the PoolApp username not the authenticated user.

To cover all of my bases, I change the user that is AppPool to an actual user that has windows authentication access into the Server where the SDK is connecting to. Sure enough that worked just fine and I am able to connect to the second service. However, it is always delegating the username/password that is running the AppPool to the SDK instead of delegating the connected/authenticated username/password.

In conclusion, IIS is not delegating the username/password to the SDK for some reason. How can I get IIS to delegate the connected user session/credential to another service?

It is also possible that the the delegation is failing because the users are using "NTLM" authentication instead of Kerberos, yet the server will only delegate when Kerberos authentication only" If this is the case, how can I force the user to use "Kerberos" authentication instead of "NTLM?

答:
Have you tried to enable impersonation in your web.config?

```<code><configuration>
    <system.web>
        <identity impersonate="true" />
    </system.web>
</configuration>
</code>```

If this doesn't work than you might need to enable delegation for this machine in your ActiveDirectory. See here: https://stackoverflow.com/a/1405666/5069465

Body:
Have you tried to enable impersonation in your web.config?

<configuration>
    <system.web>
        <identity impersonate="true" />
    </system.web>
</configuration>

If this doesn't work than you might need to enable delegation for this machine in your ActiveDirectory. See here: https://stackoverflow.com/a/1405666/5069465


问:
How to set .apk file name and package in build.gradle? Android Gradle plugin 3.0
According to my CI requirements I'm trying to achieve two things:

set apk file name in format: .apk

set folder for generated .apk file: app/build/outputs/apk/myBuild.apk

I used android gradle plugin 2.3 and got following script to manage task above (it worked correctly for gradle plugin 2.3):

```<code>applicationVariants.all {
        variant ->
            variant.outputs.each { output ->
                output.outputFile = new File(
                        output.outputFile.parent,
                        variant.productFlavors.get(0).name + variant.buildType.name + ".apk")
            }
</code>```

Now I got the following code (according to latest updates in android gradle plugin 3.0):

```<code>applicationVariants.all { variant ->
        variant.outputs.all { output ->
            logger.debug("fileNameParent", output.outputFile.parent)
            outputFileName = new File(
                    "apk/",
                    outputFileName.replace(".apk", "MyBuild.apk"))
        }
</code>```

And got following structure (see picture):

P.S. I read Android Gradle Plugin migration guide, but it doesn't help me to achieve my goal :(

答:
The first part of the question: how to generate filename.

```<code>applicationVariants.all { variant ->
        variant.outputs.all { output ->
            outputFileName = new File("${variant.productFlavors.get(0).name}${variant.buildType.name}.apk")
        }
</code>```

The second part of the question: how to set path.

According to documentation it's impossible:

Using the Variant API to manipulate variant outputs is broken with the
  new plugin. It still works for simple tasks, such as changing the APK
  name during build time...  However, more complicated tasks that
  involve accessing outputFile objects no longer work. That's because
  variant-specific tasks are no longer created during the configuration
  stage.

Body:
According to my CI requirements I'm trying to achieve two things:

set apk file name in format: .apk

set folder for generated .apk file: app/build/outputs/apk/myBuild.apk

I used android gradle plugin 2.3 and got following script to manage task above (it worked correctly for gradle plugin 2.3):

applicationVariants.all {
        variant ->
            variant.outputs.each { output ->
                output.outputFile = new File(
                        output.outputFile.parent,
                        variant.productFlavors.get(0).name + variant.buildType.name + ".apk")
            }

Now I got the following code (according to latest updates in android gradle plugin 3.0):

applicationVariants.all { variant ->
        variant.outputs.all { output ->
            logger.debug("fileNameParent", output.outputFile.parent)
            outputFileName = new File(
                    "apk/",
                    outputFileName.replace(".apk", "MyBuild.apk"))
        }

And got following structure (see picture):

P.S. I read Android Gradle Plugin migration guide, but it doesn't help me to achieve my goal :(

Body:
The first part of the question: how to generate filename.

applicationVariants.all { variant ->
        variant.outputs.all { output ->
            outputFileName = new File("${variant.productFlavors.get(0).name}${variant.buildType.name}.apk")
        }

The second part of the question: how to set path.

According to documentation it's impossible:

Using the Variant API to manipulate variant outputs is broken with the
  new plugin. It still works for simple tasks, such as changing the APK
  name during build time...  However, more complicated tasks that
  involve accessing outputFile objects no longer work. That's because
  variant-specific tasks are no longer created during the configuration
  stage.


问:
Angular 4 Property get binding does not show anything
I have following code

```<code>export class TestClass{
    private time: string = "Test";

    public get TimeFormatted(): string {
        return this.time;
    }
}
</code>```

and in my template

```<code>   <span>{{item.TimeFormatted}}</span>
</code>```

but nothing shows up in the html.

答:
I would guess your just mapping the models in your Request like the following.

```<code>let Array<TestClass> arr = response.json();
</code>```

If so this won't affect any Methods that are implemented in your Model.
To use your Model Methods you need to initiate a new Object from your Class and map its Attributes. If you initiate a Model in TS the functions will be added correctly, if your just parsing it form your request the Attributes will be accessible like normally but your Methods won't be added because your Object is not initiated, it's just parsed.

```<code>const newArr = new Array<TestClass>();
arr.foreach(item =>{
  let newItem = new TestClass();
  //mapping stuff
  newArr.push(newItem);
});
</code>```

Body:
I have following code

export class TestClass{
    private time: string = "Test";

    public get TimeFormatted(): string {
        return this.time;
    }
}

and in my template

   {{item.TimeFormatted}}

but nothing shows up in the html.

Body:
I would guess your just mapping the models in your Request like the following.

let Array<TestClass> arr = response.json();

If so this won't affect any Methods that are implemented in your Model.
To use your Model Methods you need to initiate a new Object from your Class and map its Attributes. If you initiate a Model in TS the functions will be added correctly, if your just parsing it form your request the Attributes will be accessible like normally but your Methods won't be added because your Object is not initiated, it's just parsed.

const newArr = new Array<TestClass>();
arr.foreach(item =>{
  let newItem = new TestClass();
  //mapping stuff
  newArr.push(newItem);
});


问:
Isotope JS tabs shows all contents on first loading
I have used Isotope JS to show the contents within the vertical tabs. However, each tabs have different contents, when the initial time of loading it shows contents from all tabs for a little bit of time. After 1-2 sec it will be fine. Can we solve that loading time issue? Actually, on loading time I need to show only contents from the first tab.

var first = $(".item:first")
$('#items').isotope({
  filter: first
});
// Filters out items
$('#filters a').click(function(e) {
  e.preventDefault()
  var selector = $(this).attr('data-filter');
  $('#items').isotope({
    filter: selector
  });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.isotop-tabs {
  border-right: 1px solid #aaa;
}

.isotop-tabs li {
  float: none;
  width: 100%;
}

.isotop-tabs li a {
  display: block;
  padding: 10px 0
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Item one

Item two

Item three

Item four

Item five

Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

```

JSFiddle link: https://jsfiddle.net/vishnuprasadps/c0kf8nyf/3/

答:
I would do something like:

$('#items').isotope({
  // Options
}).addClass('is-show');
```

<p>and <strong>CSS</strong>:</p>

<pre class="lang-css prettyprint-override"><code>#items {
  display:none;
}
#items.is-show {
  display: block;
}
</code>```

Demo: https://jsfiddle.net/b7Lw18ny/

Body:
I have used Isotope JS to show the contents within the vertical tabs. However, each tabs have different contents, when the initial time of loading it shows contents from all tabs for a little bit of time. After 1-2 sec it will be fine. Can we solve that loading time issue? Actually, on loading time I need to show only contents from the first tab.

var first = $(".item:first")
$('#items').isotope({
  filter: first
});
// Filters out items
$('#filters a').click(function(e) {
  e.preventDefault()
  var selector = $(this).attr('data-filter');
  $('#items').isotope({
    filter: selector
  });
});

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.isotop-tabs {
  border-right: 1px solid #aaa;
}

.isotop-tabs li {
  float: none;
  width: 100%;
}

.isotop-tabs li a {
  display: block;
  padding: 10px 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Item one

Item two

Item three

Item four

Item five

Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

JSFiddle link: https://jsfiddle.net/vishnuprasadps/c0kf8nyf/3/

Body:
I would do something like:

$('#items').isotope({
  // Options
}).addClass('is-show');

and CSS:

#items {
  display:none;
}
#items.is-show {
  display: block;
}

Demo: https://jsfiddle.net/b7Lw18ny/