问:
How to set an animation to have elements moving around a circle?
I am trying to achieve what you see in the picture:

The picture is here in case it is block for you: http://imgur.com/a/wVtgm

There you may see only one icon but actually are 4 icons, the picture represent the path that the icons should take.

I have create an snippet or here is a Codepen

var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4');

  $('.col-1').addClass('pos-1');
  $('.col-1').removeClass('pos-4')
  $('.col-2').addClass('pos-2');
  $('.col-2').removeClass('pos-4')
  $('.col-3').addClass('pos-3');
  $('.col-3').removeClass('pos-4')

};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.eight-box {
 position: relative;
 display: block;
 margin: 1em auto;
 width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}
.fig-8 {
 display: block;
 position: absolute;
 color: #fff;
 width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
 transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}

.col-1 {
 background: #1abc9c;
}
.col-2 {
 background: #9b59b6;
}
.col-3 {
 background: #27ae60;
}
.col-4 {
 background: #2c3e50;
}

.pos-1 {
 top: 30%;
 left: 93.75%;
}
.pos-2 {
 top: 66.25%;
 left: 88.75%;
}
.pos-3 {
 top: 72.92%;
 right: 83.125%;
}
.pos-4 {
 top: 19.58%;
 right: 88.75%;
}</code>```

1

2

3

4

```

This is the description of what I should achieve:

1 - All the icons must be in the same place when the page loads, which is the place where you may see the icon with the number 4.

2 - Then, every icon should start its path around the circle, getting stick to its regular state/position. I mean: Icon with number 3 starts its track and then once it reach its position it should stick there and the same with the other icons.

For now, if you see the code snippet I did, the icons are doing some animation by getting to its original position after the page loads, but I am unable to achieve what I need which is triggering the icons to get back to its original position by going around the circle.

TL;DR: The icons starts from the position with the icon number 4 on page load, and then the icons should get back to its original position by moving around the circle, from left to right.

For example:
Icon 4 should stay where it is.
Icon 3 should move downwards some pixels around the circle.
And so on.

So they should all come in from the left moving towards the right (like follow the leader) and end in the position they are in in the picture or codepen/codespnippet.

Any suggestions?

答:
You may inspire yourself from these 2 pens using animation and transform:rotate().

This one with inputs element to interact with: click 1 to show 2, 3, 4, 5 . Then click 2, then 3, ... to see them going around the circle. After the first click you can also control them with the arrow keys. (The code snippet is a little bit more optimized than the pen, code-wise.)

input[name="group"] {position:absolute; right:100vw}

.circle {
  position: relative;
  width: 50vh;
  height: 50vh;
  margin: 25vh auto;
  border: solid 1px;
  border-radius: 100%;
}

.rotate, .rotate label {transition:1s;}

.rotate {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  height: 60%;
  margin-left: -5vh;
  transform-origin: 5vh 0;
}
.rotate:first-child {z-index:1;}

.rotate label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vh;
  height: 10vh;
  border: solid 1px;
  border-radius: 100%;
  background: #0095FF;
  cursor:pointer
}

/* one */
#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a label {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b label {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c label {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d label {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e label {transform:rotate(-0deg);}

/* two */
#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b label {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c label {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d label {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e label {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a label {transform:rotate(-0deg);}

/* three */
#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c label {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d label {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e label {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a label {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b label {transform:rotate(-0deg);}

/* four */
#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d label {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e label {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a label {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b label {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c label {transform:rotate(-0deg);}

/* five */
#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e label {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a label {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b label {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c label {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d label {transform:rotate(-0deg);}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate"><label for="one">1</label></div>
  <div id="b" class="rotate"><label for="two">2</label></div>
  <div id="c" class="rotate"><label for="three">3</label></div>
  <div id="d" class="rotate"><label for="four">4</label></div>
  <div id="e" class="rotate"><label for="five">5</label></div>
</div></code>```

And this other one with a demo animation running:

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white
}

#a {
  transform-origin: 5vh 0;
  transform: rotate(120deg);
  animation: roundcircle 5s infinite;
}

#a  div {
  animation: roundcirclediv 5s infinite;
}

#b {
  transform-origin: 5vh 0;
  transform: rotate(90deg);
  animation: roundcircle 5s -1s infinite;
}

#b div {
  transform: rotate(-90deg);
  animation: roundcirclediv 5s -1s infinite;
}

#c {
  transform-origin: 5vh 0;
  transform: rotate(60deg);
  animation: roundcircle 5s -2s infinite;
}

#c div {
  transform: rotate(-60deg);
  animation: roundcirclediv 5s -2s infinite;
}

#d {
  transform-origin: 5vh 0;
  transform: rotate(30deg);
  animation: roundcircle 5s -3s infinite;
}

#d div {
  transform: rotate(-30deg);
  animation: roundcirclediv 5s -3s infinite;
}

#e {
  transform-origin: 5vh 0;
  transform: rotate(0deg);
  animation: roundcircle 5s -4s infinite;
}

#e div {
  transform: rotate(-0deg);
  animation: roundcirclediv 5s -4s infinite;
}

@keyframes roundcircle {
  0% {
    transform: rotate(120deg);
  }
  20% {
    transform: rotate(360deg)
  }
  40% {
    transform: rotate(390deg)
  }
  60% {
    transform: rotate(420deg)
  }
  80% {
    transform: rotate(450deg)
  }
  100% {
    transform: rotate(480deg);
  }
}

@keyframes roundcirclediv {
  0% {
    transform: rotate(-120deg);
  }
  20% {
    transform: rotate(-360deg)
  }
  40% {
    transform: rotate(-390deg)
  }
  60% {
    transform: rotate(-420deg)
  }
  80% {
    transform: rotate(-450deg)
  }
  100% {
    transform: rotate(-480deg);
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="circle">
  <div id="a" class="rotate">
    <div>1</div>
  </div>
  <div id="b" class="rotate">
    <div>2</div>
  </div>
  <div id="c" class="rotate">
    <div>3</div>
  </div>
  <div id="d" class="rotate">
    <div>4</div>
  </div>
  <div id="e" class="rotate">
    <div>5</div>
  </div>
</div></code>```

And if you're having a hard time understanding how this works, check out this one, to see behind the magic curtain:

input[name="group"] {position:absolute; right:100vw}

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}

#a, #a div, #b , #b div, #c, #c div, #d, #d div, #e, #e div {transition:1s; box-shadow:0 0 5px}
#a, #b, #c, #d, #e {transform-origin:5vh 0;}
#a {z-index:1;}
label {cursor:pointer}

/* one */

#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a div {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b div {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c div {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d div {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e div {transform:rotate(-0deg);}

/* two */

#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b div {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c div {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d div {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e div {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a div {transform:rotate(-0deg);}

/* three */

#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c div {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d div {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e div {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a div {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b div {transform:rotate(-0deg);}

/* four */

#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d div {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e div {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a div {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b div {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c div {transform:rotate(-0deg);}

/* five */

#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e div {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a div {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b div {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c div {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d div {transform:rotate(-0deg);}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="five">5</label></div>
  </div>
</div></code>```

Body:
I am trying to achieve what you see in the picture:

The picture is here in case it is block for you: http://imgur.com/a/wVtgm

There you may see only one icon but actually are 4 icons, the picture represent the path that the icons should take.

I have create an snippet or here is a Codepen

var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4');

  $('.col-1').addClass('pos-1');
  $('.col-1').removeClass('pos-4')
  $('.col-2').addClass('pos-2');
  $('.col-2').removeClass('pos-4')
  $('.col-3').addClass('pos-3');
  $('.col-3').removeClass('pos-4')

};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();

.eight-box {
 position: relative;
 display: block;
 margin: 1em auto;
 width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}
.fig-8 {
 display: block;
 position: absolute;
 color: #fff;
 width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
 transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}

.col-1 {
 background: #1abc9c;
}
.col-2 {
 background: #9b59b6;
}
.col-3 {
 background: #27ae60;
}
.col-4 {
 background: #2c3e50;
}

.pos-1 {
 top: 30%;
 left: 93.75%;
}
.pos-2 {
 top: 66.25%;
 left: 88.75%;
}
.pos-3 {
 top: 72.92%;
 right: 83.125%;
}
.pos-4 {
 top: 19.58%;
 right: 88.75%;
}

1

2

3

4

This is the description of what I should achieve:

1 - All the icons must be in the same place when the page loads, which is the place where you may see the icon with the number 4.

2 - Then, every icon should start its path around the circle, getting stick to its regular state/position. I mean: Icon with number 3 starts its track and then once it reach its position it should stick there and the same with the other icons.

For now, if you see the code snippet I did, the icons are doing some animation by getting to its original position after the page loads, but I am unable to achieve what I need which is triggering the icons to get back to its original position by going around the circle.

TL;DR: The icons starts from the position with the icon number 4 on page load, and then the icons should get back to its original position by moving around the circle, from left to right.

For example:
Icon 4 should stay where it is.
Icon 3 should move downwards some pixels around the circle.
And so on.

So they should all come in from the left moving towards the right (like follow the leader) and end in the position they are in in the picture or codepen/codespnippet.

Any suggestions?

Body:
You may inspire yourself from these 2 pens using animation and transform:rotate().

This one with inputs element to interact with: click 1 to show 2, 3, 4, 5 . Then click 2, then 3, ... to see them going around the circle. After the first click you can also control them with the arrow keys. (The code snippet is a little bit more optimized than the pen, code-wise.)

input[name="group"] {position:absolute; right:100vw}

.circle {
  position: relative;
  width: 50vh;
  height: 50vh;
  margin: 25vh auto;
  border: solid 1px;
  border-radius: 100%;
}

.rotate, .rotate label {transition:1s;}

.rotate {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  height: 60%;
  margin-left: -5vh;
  transform-origin: 5vh 0;
}
.rotate:first-child {z-index:1;}

.rotate label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vh;
  height: 10vh;
  border: solid 1px;
  border-radius: 100%;
  background: #0095FF;
  cursor:pointer
}

/* one */
#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a label {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b label {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c label {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d label {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e label {transform:rotate(-0deg);}

/* two */
#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b label {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c label {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d label {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e label {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a label {transform:rotate(-0deg);}

/* three */
#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c label {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d label {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e label {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a label {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b label {transform:rotate(-0deg);}

/* four */
#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d label {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e label {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a label {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b label {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c label {transform:rotate(-0deg);}

/* five */
#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e label {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a label {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b label {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c label {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d label {transform:rotate(-0deg);}

<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate"><label for="one">1</label></div>
  <div id="b" class="rotate"><label for="two">2</label></div>
  <div id="c" class="rotate"><label for="three">3</label></div>
  <div id="d" class="rotate"><label for="four">4</label></div>
  <div id="e" class="rotate"><label for="five">5</label></div>
</div>

And this other one with a demo animation running:

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white
}

#a {
  transform-origin: 5vh 0;
  transform: rotate(120deg);
  animation: roundcircle 5s infinite;
}

#a  div {
  animation: roundcirclediv 5s infinite;
}

#b {
  transform-origin: 5vh 0;
  transform: rotate(90deg);
  animation: roundcircle 5s -1s infinite;
}

#b div {
  transform: rotate(-90deg);
  animation: roundcirclediv 5s -1s infinite;
}

#c {
  transform-origin: 5vh 0;
  transform: rotate(60deg);
  animation: roundcircle 5s -2s infinite;
}

#c div {
  transform: rotate(-60deg);
  animation: roundcirclediv 5s -2s infinite;
}

#d {
  transform-origin: 5vh 0;
  transform: rotate(30deg);
  animation: roundcircle 5s -3s infinite;
}

#d div {
  transform: rotate(-30deg);
  animation: roundcirclediv 5s -3s infinite;
}

#e {
  transform-origin: 5vh 0;
  transform: rotate(0deg);
  animation: roundcircle 5s -4s infinite;
}

#e div {
  transform: rotate(-0deg);
  animation: roundcirclediv 5s -4s infinite;
}

@keyframes roundcircle {
  0% {
    transform: rotate(120deg);
  }
  20% {
    transform: rotate(360deg)
  }
  40% {
    transform: rotate(390deg)
  }
  60% {
    transform: rotate(420deg)
  }
  80% {
    transform: rotate(450deg)
  }
  100% {
    transform: rotate(480deg);
  }
}

@keyframes roundcirclediv {
  0% {
    transform: rotate(-120deg);
  }
  20% {
    transform: rotate(-360deg)
  }
  40% {
    transform: rotate(-390deg)
  }
  60% {
    transform: rotate(-420deg)
  }
  80% {
    transform: rotate(-450deg)
  }
  100% {
    transform: rotate(-480deg);
  }
}

<div class="circle">
  <div id="a" class="rotate">
    <div>1</div>
  </div>
  <div id="b" class="rotate">
    <div>2</div>
  </div>
  <div id="c" class="rotate">
    <div>3</div>
  </div>
  <div id="d" class="rotate">
    <div>4</div>
  </div>
  <div id="e" class="rotate">
    <div>5</div>
  </div>
</div>

And if you're having a hard time understanding how this works, check out this one, to see behind the magic curtain:

input[name="group"] {position:absolute; right:100vw}

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}

#a, #a div, #b , #b div, #c, #c div, #d, #d div, #e, #e div {transition:1s; box-shadow:0 0 5px}
#a, #b, #c, #d, #e {transform-origin:5vh 0;}
#a {z-index:1;}
label {cursor:pointer}

/* one */

#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a div {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b div {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c div {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d div {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e div {transform:rotate(-0deg);}

/* two */

#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b div {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c div {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d div {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e div {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a div {transform:rotate(-0deg);}

/* three */

#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c div {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d div {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e div {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a div {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b div {transform:rotate(-0deg);}

/* four */

#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d div {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e div {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a div {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b div {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c div {transform:rotate(-0deg);}

/* five */

#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e div {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a div {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b div {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c div {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d div {transform:rotate(-0deg);}

<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="five">5</label></div>
  </div>
</div>


来源: stackexchange

问:
how to get id when we are click the button using angular and ionic?
I am using the below code and i am not getting id when i am clicking.

```<code><button ion-item  (click)="goToDrivePage()" *ngFor="let eventNames of eventType.events">
          {{eventNames.id}}
       </button>
</code>```

any body help me to get id in the function?

答:
Pass the id value to the function

```<code><div *ngFor="let eventNames of eventType.events">
  <button ion-item  (click)="goToDrivePage(eventNames.id)">
      {{eventNames.id}}
  </button>
</div>
</code>```

In ts file get the value

```<code>goToDrivePage(id : any){
     console.log(id);
}
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I am using the below code and i am not getting id when i am clicking.

<button ion-item  (click)="goToDrivePage()" *ngFor="let eventNames of eventType.events">
          {{eventNames.id}}
       </button>

any body help me to get id in the function?

Body:
Pass the id value to the function

<div *ngFor="let eventNames of eventType.events">
  <button ion-item  (click)="goToDrivePage(eventNames.id)">
      {{eventNames.id}}
  </button>
</div>

In ts file get the value

goToDrivePage(id : any){
     console.log(id);
}


问:
Async api request with db request in js mocha?
I build nodejs server, and now I'm testing it with mocha.

I have problem with async requests. I send my object to API, and then check record for with object in DB. I need use only co library and generators.
There's error:

```<code>  TypeError: Cannot read property 'id' of null
</code>```

It depends on insertUser object is null, but I don't know why object from database is null.

API works fine, and sequilize works fine.

```<code>it('it should POST a user', () => {
        return co(function *() {
            let user = {
                name: "testInsertUser",
                password: "12345"
            };
                let res = yield chai.request(server)
                        .post('/api/users')
                        .send(user);

                res.should.have.status(HTTPStatus.OK);
                res.body.should.be.a('object');
                res.body.should.have.property('name').eql(user.name);
                res.body.should.not.have.property('password');

                //Find user in db
                let insertUser =
                    yield models.User.findOne({
                                 where: {
                                    name: user.name,
                                    password: user.password
                                    }
                                });
                res.body.should.have.property('id').eql(insertUser.id);
        });
    });
</code>```

答:
I solve my problem.
Code is fine, but password in db is hashing and I check hash password and order password</p>

Body:
I build nodejs server, and now I'm testing it with mocha.

I have problem with async requests. I send my object to API, and then check record for with object in DB. I need use only co library and generators.
There's error:

  TypeError: Cannot read property 'id' of null

It depends on insertUser object is null, but I don't know why object from database is null.

API works fine, and sequilize works fine.

it('it should POST a user', () => {
        return co(function *() {
            let user = {
                name: "testInsertUser",
                password: "12345"
            };
                let res = yield chai.request(server)
                        .post('/api/users')
                        .send(user);

                res.should.have.status(HTTPStatus.OK);
                res.body.should.be.a('object');
                res.body.should.have.property('name').eql(user.name);
                res.body.should.not.have.property('password');

                //Find user in db
                let insertUser =
                    yield models.User.findOne({
                                 where: {
                                    name: user.name,
                                    password: user.password
                                    }
                                });
                res.body.should.have.property('id').eql(insertUser.id);
        });
    });


问:
Getting StaleElementReferenceException while trying print the link names
I'm trying to print first 5 pages links displayed in google search.. But getting StateElementReferenceException Not sure which one went wrong.. </p>

```<code>    public class GoogleCoInTest {

    static WebDriver driver = null;
    public static void main(String[] args) throws InterruptedException {
        System.setProperty("webdriver.gecko.driver", "D:\\bala back up\\personel\\selenium\\Jars\\Drivers\\geckodriver.exe");
        driver=new FirefoxDriver();
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.get("https://www.google.co.in/");
        //driver.findElement(By.xpath("//input[class='gsfi']")).sendKeys("Banduchode");;
        WebElement search=driver.findElement(By.cssSelector("input#lst-ib"));
        search.sendKeys("Banduchode");
        search.sendKeys(Keys.ENTER);
        printLinksName();
        List<WebElement> fiveLinks=driver.findElements(By.xpath(".//*[@id='nav']/tbody/tr/td/a"));

        for(int i=0;i<5;i++){
            System.out.println(fiveLinks.get(i).getText());
            fiveLinks.get(i).click();
            Thread.sleep(5000);
            printLinksName();

        }
    }

    public static void printLinksName() throws InterruptedException{

        List<WebElement> allLinks=driver.findElements(By.xpath("//*[@id='rso']/div/div/div/div/div/h3/a"));
        System.out.println(allLinks.size());

        //print all list
        for(int i=0;i<allLinks.size();i++){
            System.out.println("Sno"+(i+1)+":"+allLinks.get(i).getText());

        }
    }
}
</code>```

<p>it prints fine till 2nd page , but there after I am getting </p>

```<code>Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: The element reference of <a class="fl"> stale: either the element is no longer attached to the DOM or the page has been refreshed
For documentation on this error, please visit: http://seleniumhq.org/exceptions/stale_element_reference.html
</code>```

答:
your script is trying to click on each link from the first page, which brings you to a new page.  once it completes work on that page, it doesn't seem to return to the first page, so the script can't find the next link in your list.

even if it did return to the first page, you would still have a stale element because the page has been reloaded.  You'll need to keep track of the links in the first page by something else (like the href maybe?), and find the link again by that identifier before you click on it.

Body:
I'm trying to print first 5 pages links displayed in google search.. But getting StateElementReferenceException Not sure which one went wrong..

    public class GoogleCoInTest {

    static WebDriver driver = null;
    public static void main(String[] args) throws InterruptedException {
        System.setProperty("webdriver.gecko.driver", "D:\\bala back up\\personel\\selenium\\Jars\\Drivers\\geckodriver.exe");
        driver=new FirefoxDriver();
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.get("https://www.google.co.in/");
        //driver.findElement(By.xpath("//input[class='gsfi']")).sendKeys("Banduchode");;
        WebElement search=driver.findElement(By.cssSelector("input#lst-ib"));
        search.sendKeys("Banduchode");
        search.sendKeys(Keys.ENTER);
        printLinksName();
        List<WebElement> fiveLinks=driver.findElements(By.xpath(".//*[@id='nav']/tbody/tr/td/a"));

        for(int i=0;i<5;i++){
            System.out.println(fiveLinks.get(i).getText());
            fiveLinks.get(i).click();
            Thread.sleep(5000);
            printLinksName();

        }
    }

    public static void printLinksName() throws InterruptedException{

        List<WebElement> allLinks=driver.findElements(By.xpath("//*[@id='rso']/div/div/div/div/div/h3/a"));
        System.out.println(allLinks.size());

        //print all list
        for(int i=0;i<allLinks.size();i++){
            System.out.println("Sno"+(i+1)+":"+allLinks.get(i).getText());

        }
    }
}

it prints fine till 2nd page , but there after I am getting

Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: The element reference of  stale: either the element is no longer attached to the DOM or the page has been refreshed
For documentation on this error, please visit: http://seleniumhq.org/exceptions/stale_element_reference.html


问:
Could not satisfy explicit device specification '/device:GPU:0' because no devices matching
I want to use TensorFlow 0.12 for GPU on my Ubuntu 14.04 machine.

But when assigning a device to a node I am getting the following error.

```<code>InvalidArgumentError (see above for traceback): Cannot assign a device to
node 'my_model/RNN/zeros': Could not satisfy explicit device specification
'/device:GPU:0' because no devices matching that specification are registered
in this process; available devices: /job:localhost/replica:0/task:0/cpu:0
    [[Node: my_model/RNN/zeros = Fill[T=DT_FLOAT, _device="/device:GPU:0"]
(my_model/RNN/pack, my_model/RNN/zeros/Const)]]
</code>```

My tensorflow seems to be set up correctly, since this simple program works:

```<code>import tensorflow as tf
# Creates a graph.
with tf.device('/gpu:0'):
  a = tf.constant([1.0, 2.0, 3.0, 4.0, 5.0, 6.0], shape=[2, 3], name='a')
  b = tf.constant([1.0, 2.0, 3.0, 4.0, 5.0, 6.0], shape=[3, 2], name='b')
  c = tf.matmul(a, b)
# Creates a session with log_device_placement set to True.
sess = tf.Session(config=tf.ConfigProto(log_device_placement=True))
# Runs the op.
print(sess.run(c))
</code>```

Which outputs:

```<code>    I tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA
library libcublas.so locally I tensorflow/stream_executor/dso_loader.cc:128]
successfully opened CUDA library libcudnn.so locally I
tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA library
 libcufft.so locally I tensorflow/stream_executor/dso_loader.cc:128]
successfully opened CUDA library libcuda.so.1 locally I
tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA library
 libcurand.so locally I tensorflow/core/common_runtime/gpu/gpu_device.cc:885]
Found device 0 with properties:  name: Tesla K40m major: 3 minor: 5
memoryClockRate (GHz) 0.745 pciBusID 0000:08:00.0 Total memory: 11.17GiB Free
memory:

    11.10GiB I tensorflow/core/common_runtime/gpu/gpu_device.cc:906] DMA: 0  I
 tensorflow/core/common_runtime/gpu/gpu_device.cc:916] 0:   Y  I
tensorflow/core/common_runtime/gpu/gpu_device.cc:975] Creating TensorFlow
device (/gpu:0) -> (device: 0, name: Tesla K40m, pci bus id: 0000:08:00.0)
Device mapping: /job:localhost/replica:0/task:0/gpu:0 -> device: 0, name:
Tesla K40m, pci bus id: 0000:08:00.0 I tensorflow/core/common_runtime
/direct_session.cc:255] Device mapping: /job:localhost/replica:0/task:0/gpu:0
-> device: 0, name: Tesla K40m, pci bus id: 0000:08:00.0

    MatMul: (MatMul): /job:localhost/replica:0/task:0/gpu:0 I tensorflow/core
/common_runtime/simple_placer.cc:827] MatMul: (MatMul)/job:localhost/replica:0
/task:0/gpu:0 b: (Const): /job:localhost/replica:0/task:0/gpu:0 I
tensorflow/core/common_runtime/simple_placer.cc:827] b: (Const)/job:localhost
/replica:0/task:0/gpu:0 a: (Const): /job:localhost/replica:0/task:0/gpu:0 I
tensorflow/core/common_runtime/simple_placer.cc:827] a: (Const)/job:localhost
/replica:0/task:0/gpu:0 [[ 22.  28.]  [ 49.
    64.]]
</code>```

How can I assign a device to a node correctly?

答:
Try using sess = tf.Session(config=tf.ConfigProto(allow_soft_placement=True, log_device_placement=True)). This will resolve the problem if it couldn't place an operation on the GPU. Since some operations have only CPU implementation.

Using allow_soft_placement=True will allow TensorFlow to fall back to CPU when no GPU implementation is available.

ContentLicense: CC BY-SA 4.0

Body:
I want to use TensorFlow 0.12 for GPU on my Ubuntu 14.04 machine.

But when assigning a device to a node I am getting the following error.

InvalidArgumentError (see above for traceback): Cannot assign a device to
node 'my_model/RNN/zeros': Could not satisfy explicit device specification
'/device:GPU:0' because no devices matching that specification are registered
in this process; available devices: /job:localhost/replica:0/task:0/cpu:0
    [[Node: my_model/RNN/zeros = Fill[T=DT_FLOAT, _device="/device:GPU:0"]
(my_model/RNN/pack, my_model/RNN/zeros/Const)]]

My tensorflow seems to be set up correctly, since this simple program works:

import tensorflow as tf
# Creates a graph.
with tf.device('/gpu:0'):
  a = tf.constant([1.0, 2.0, 3.0, 4.0, 5.0, 6.0], shape=[2, 3], name='a')
  b = tf.constant([1.0, 2.0, 3.0, 4.0, 5.0, 6.0], shape=[3, 2], name='b')
  c = tf.matmul(a, b)
# Creates a session with log_device_placement set to True.
sess = tf.Session(config=tf.ConfigProto(log_device_placement=True))
# Runs the op.
print(sess.run(c))

Which outputs:

    I tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA
library libcublas.so locally I tensorflow/stream_executor/dso_loader.cc:128]
successfully opened CUDA library libcudnn.so locally I
tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA library
 libcufft.so locally I tensorflow/stream_executor/dso_loader.cc:128]
successfully opened CUDA library libcuda.so.1 locally I
tensorflow/stream_executor/dso_loader.cc:128] successfully opened CUDA library
 libcurand.so locally I tensorflow/core/common_runtime/gpu/gpu_device.cc:885]
Found device 0 with properties:  name: Tesla K40m major: 3 minor: 5
memoryClockRate (GHz) 0.745 pciBusID 0000:08:00.0 Total memory: 11.17GiB Free
memory:

    11.10GiB I tensorflow/core/common_runtime/gpu/gpu_device.cc:906] DMA: 0  I
 tensorflow/core/common_runtime/gpu/gpu_device.cc:916] 0:   Y  I
tensorflow/core/common_runtime/gpu/gpu_device.cc:975] Creating TensorFlow
device (/gpu:0) -> (device: 0, name: Tesla K40m, pci bus id: 0000:08:00.0)
Device mapping: /job:localhost/replica:0/task:0/gpu:0 -> device: 0, name:
Tesla K40m, pci bus id: 0000:08:00.0 I tensorflow/core/common_runtime
/direct_session.cc:255] Device mapping: /job:localhost/replica:0/task:0/gpu:0
-> device: 0, name: Tesla K40m, pci bus id: 0000:08:00.0

    MatMul: (MatMul): /job:localhost/replica:0/task:0/gpu:0 I tensorflow/core
/common_runtime/simple_placer.cc:827] MatMul: (MatMul)/job:localhost/replica:0
/task:0/gpu:0 b: (Const): /job:localhost/replica:0/task:0/gpu:0 I
tensorflow/core/common_runtime/simple_placer.cc:827] b: (Const)/job:localhost
/replica:0/task:0/gpu:0 a: (Const): /job:localhost/replica:0/task:0/gpu:0 I
tensorflow/core/common_runtime/simple_placer.cc:827] a: (Const)/job:localhost
/replica:0/task:0/gpu:0 [[ 22.  28.]  [ 49.
    64.]]

How can I assign a device to a node correctly?


问:
Detecting if this is an iframe load or direct
I am looking to only show a form if it is pulled on a page within an iframe. How do I do that? Is there a server side solution?</p>

答:
You can only check it on the client side via JavaScript.

However: DO NOT DO THAT. There are plenty of legitimate uses of putting a site in a (i)frame. Breaking out of such iframe or changing your site in any way in such circumstances them will only make your users pissed unhappy.

ContentLicense: CC BY-SA 2.5


问:
Visualization & Dashboard return no results found, while discover tab successfully displays results?
I have a problem with Kibana: Dashboard and visualizations don't show any results!

As you can see in this screenshot, in the discover tab I get some results! Which means data exists in my index "as-*". right? But I used a trick in order to display this data :

1) I changed the range to "Today" ==> it shows no result found !

2) I clicked "New" button ==> then i get my data displayed!
Is there an other way "more proper" to get data displayed?

Then in the my dashboard (or visualization) I can't get any results!! even if the range is the same as discover tab!

I restarted Kibana ==> no changes!
I deleted as-* then I created it => no changes!

I'm using Curator to create daily index and logstash to index the data into ES!

I'm stuck here ! I ll be glad if you can help me figure it out !
Thank you very much!

答:
If you can see information in "discover", it means that kibana has connected to the database, and that the database has information. You shouldn't have to click the "New" button to see information in the discover view. I believe the "New" button in the "discover" page is used to create a new search.

Maybe try zooming on the time period of the data on the "discover" page, or
try checking the systems logs to see if logstash is successfully pushing information to Elasticsearch.

With Kibana, dashboards are made up of visualisations, and visulations are made up of searches.

The "No results found" on the dashboard page, shown in your second page is due to the visualisation having no results. I guess you imported visulations into Kibana.

I hope that helps.


问:
Add a back bar Button between view controllers
I have the following problem. I have the following VC structure

NC-> A->B-->C-->D-->E->F

Where NC is my navigation controller directly connected (->) with the VC A, which is also directly connected with VC B.

Depending on a parameter by tapping on a button in VC B my app decide to go to VC C or to stay in B (-->). I can't therefore, as done before, construct a direct connection between the button and the VC. So I implemented this transaction in VC B.

My problem is that doing like this I do not have a back button on VC C to eventually go back to B. How should I solve this issue?

Thanks?

答:
You CAN create connection between view controllers. In your situation, simply connect B and C with a segue type push. Then when every you want to do this segue, simply call

```<code>//Do some code to decide if you want to call this or not
self.performSegue(withIdentifier: "identifier", sender: nil)
</code>```

In this way, when you get to your VC C, you will have a default back button to VC B from your top level NC

For example

Body:
You CAN create connection between view controllers. In your situation, simply connect B and C with a segue type push. Then when every you want to do this segue, simply call

//Do some code to decide if you want to call this or not
self.performSegue(withIdentifier: "identifier", sender: nil)

In this way, when you get to your VC C, you will have a default back button to VC B from your top level NC

For example


问:
Setting "setprecision" correctly
Hi although I do something like this

```<code> #include <iomanip>
...
        std::cout<<"Numbers "<<std::setprecision(2)<<numb1<< "  "<<std::setprecision(2)<<numb2<<" "<<std::setprecision(2)<<numb3<<"  "<< std::setprecision(4)<<numb4<<std::endl;
</code>```

I do get

```<code>Numbers  14  1.5e+02 0.0053 & 220
</code>```

How can I really make set the precision per column to get a consistent format and not this mixture of precision(5) and scientific format?

答:
Use the std::fixed manipulator too which will switch off any reversion to scientific notation:

```<code>std::cout << std::fixed /*<< as before from here*/
</code>```

If you want to switch the scientific notation back on again, then introduce the manipulator std::scientific.

Reference; http://en.cppreference.com/w/cpp/io/manip/fixed

Title: Setting "setprecision" correctly

Body:
Hi although I do something like this

 #include <iomanip>
...
        std::cout<<"Numbers "<<std::setprecision(2)<<numb1<< "  "<<std::setprecision(2)<<numb2<<" "<<std::setprecision(2)<<numb3<<"  "<< std::setprecision(4)<<numb4<<std::endl;

I do get

Numbers  14  1.5e+02 0.0053 & 220

How can I really make set the precision per column to get a consistent format and not this mixture of precision(5) and scientific format?

Body:
Use the std::fixed manipulator too which will switch off any reversion to scientific notation:

std::cout << std::fixed /*<< as before from here*/

If you want to switch the scientific notation back on again, then introduce the manipulator std::scientific.

Reference; http://en.cppreference.com/w/cpp/io/manip/fixed


问:
Why the behaviour of a Random variable differs when defining as static or not-static?
my question is: why the behaviour the variable "_random" changes when it is defined as static / non-static?

==> when static defined: _random.nextDouble() returns really random values.

==> when not: _random.nextDouble() returns almost the same values.

```<code>class Shape
{
    protected Canvas _canvas;
    protected UIElement _element;
    static Random _random = new Random();

    public Shape(Canvas canvas)
    {
        _canvas = canvas;
    }

    public void Draw()
    {
        double val1 = _canvas.ActualWidth * _random.NextDouble();
        double val2 = _canvas.ActualHeight * _random.NextDouble();
        _element.SetValue(Canvas.LeftProperty, val1);
        _element.SetValue(Canvas.TopProperty, val2);
        _canvas.Children.Add(_element);
    }

}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        Shape s1 = new Circle(MemoCanvas);

        for (int i = 0; i < 100; i++)
        {
            Shape shape1 = new Circle(MemoCanvas);
            shape1.Draw();

            Shape shape2 = new Square(MemoCanvas);
            shape2.Draw();

        }
    }
}
</code>```

Note: somehow I couldnt format my post, sorry.

Best Regards

答:
Because you are creating a new Random object for each Shape object that you create in the loop, which means that they will produce the same series of random numbers as the random generator is seeded from the system clock.

This always happens if you create new Random instances too close in time.

When you define the _random field as static, only one single Random object will be created and used across all instances of the Shape class.

Body:
my question is: why the behaviour the variable "_random" changes when it is defined as static / non-static?

==> when static defined: _random.nextDouble() returns really random values.

==> when not: _random.nextDouble() returns almost the same values.

class Shape
{
    protected Canvas _canvas;
    protected UIElement _element;
    static Random _random = new Random();

    public Shape(Canvas canvas)
    {
        _canvas = canvas;
    }

    public void Draw()
    {
        double val1 = _canvas.ActualWidth * _random.NextDouble();
        double val2 = _canvas.ActualHeight * _random.NextDouble();
        _element.SetValue(Canvas.LeftProperty, val1);
        _element.SetValue(Canvas.TopProperty, val2);
        _canvas.Children.Add(_element);
    }

}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        Shape s1 = new Circle(MemoCanvas);

        for (int i = 0; i < 100; i++)
        {
            Shape shape1 = new Circle(MemoCanvas);
            shape1.Draw();

            Shape shape2 = new Square(MemoCanvas);
            shape2.Draw();

        }
    }
}

Note: somehow I couldnt format my post, sorry.

Best Regards


问:
Passing two columns to a udf in scala?
I have a dataframe containing two columns,one is data and the other column is
 character count in that data field.

```<code>Data    Count
Hello   5
How     3
World   5
</code>```

I want to change value of column data based on the value in count column. How can this be achieved? I tried this using an udf :

```<code>invalidrecords.withColumn("value",appendDelimiterError(invalidrecords("value"),invalidrecords("a_cnt")))
</code>```

This seems to fail, is this the correct way to do it?

答:
Here's an easy way of doing it

first you create a dataframe

```<code>import sqlContext.implicits._
val invalidrecords = Seq(
  ("Hello", 5),
  ("How", 3),
  ("World", 5)
).toDF("Data", "Count")
</code>```

you should have

```<code>+-----+-----+
|Data |Count|
+-----+-----+
|Hello|5    |
|How  |3    |
|World|5    |
+-----+-----+
</code>```

Then you define udf function as

```<code>import org.apache.spark.sql.functions._
def appendDelimiterError = udf((data: String, count: Int) => "value with error" )
</code>```

And you call using withColumn as

```<code>invalidrecords.withColumn("value",appendDelimiterError(invalidrecords("Data"),invalidrecords("Count"))).show(false)
</code>```

You should have output as

```<code>+-----+-----+----------------+
|Data |Count|value           |
+-----+-----+----------------+
|Hello|5    |value with error|
|How  |3    |value with error|
|World|5    |value with error|
+-----+-----+----------------+
</code>```

You can write your logic instead of returning a string from udf function

Edited

Answering your requirements in the comment below would require you to change the udf function and withColumn as below

```<code>def appendDelimiterError = udf((data: String, count: Int) => {
  if(count < 5) s"convert value to ${data} - error"
  else data
} )

invalidrecords.withColumn("Data",appendDelimiterError(invalidrecords("Data"),invalidrecords("Count"))).show(false)
</code>```

you should have output as

```<code>+----------------------------+-----+
|Data                        |Count|
+----------------------------+-----+
|Hello                       |5    |
|convert value to How - error|3    |
|World                       |5    |
+----------------------------+-----+
</code>```

Title: Passing two columns to a udf in scala?

Body:
I have a dataframe containing two columns,one is data and the other column is
 character count in that data field.

Data    Count
Hello   5
How     3
World   5

I want to change value of column data based on the value in count column. How can this be achieved? I tried this using an udf :

invalidrecords.withColumn("value",appendDelimiterError(invalidrecords("value"),invalidrecords("a_cnt")))

This seems to fail, is this the correct way to do it?

Body:
Here's an easy way of doing it

first you create a dataframe

import sqlContext.implicits._
val invalidrecords = Seq(
  ("Hello", 5),
  ("How", 3),
  ("World", 5)
).toDF("Data", "Count")

you should have

+-----+-----+
|Data |Count|
+-----+-----+
|Hello|5    |
|How  |3    |
|World|5    |
+-----+-----+

Then you define udf function as

import org.apache.spark.sql.functions._
def appendDelimiterError = udf((data: String, count: Int) => "value with error" )

And you call using withColumn as

invalidrecords.withColumn("value",appendDelimiterError(invalidrecords("Data"),invalidrecords("Count"))).show(false)

You should have output as

+-----+-----+----------------+
|Data |Count|value           |
+-----+-----+----------------+
|Hello|5    |value with error|
|How  |3    |value with error|
|World|5    |value with error|
+-----+-----+----------------+

You can write your logic instead of returning a string from udf function

Edited

Answering your requirements in the comment below would require you to change the udf function and withColumn as below

def appendDelimiterError = udf((data: String, count: Int) => {
  if(count < 5) s"convert value to ${data} - error"
  else data
} )

invalidrecords.withColumn("Data",appendDelimiterError(invalidrecords("Data"),invalidrecords("Count"))).show(false)

you should have output as

+----------------------------+-----+
|Data                        |Count|
+----------------------------+-----+
|Hello                       |5    |
|convert value to How - error|3    |
|World                       |5    |
+----------------------------+-----+


问:
Floating context menu on button click inside Fragment
In my app I have created few buttons in one fragment which will redirect to several activity based on the click. Now if user click button1, they will get a floating context menu conataing the list of the comapny, such as company1, compan2...etc. I have followed this post Opening a floating menu (context menu) in Android? to develop this feature in my app. But the problem is that this code is implemented in Activity, where in my case I want ti implement it in Fragment. I wrote the code but nothig happen with the button click. Now how can I generate this menu on button click

My contextmenu is

```<code><?xml version="1.0" encoding="utf-8"?>
</code>```

```<code><item android:id="@+id/company_1"
    android:title="@string/company_1"></item>

<item android:id="@+id/company_2"
android:title="@string/company_2"></item>

<item android:id="@+id/company_3"
android:title="@string/company_3"></item>

<item android:id="@+id/company_4"
    android:title="@string/company_4">
</item>
<item android:id="@+id/company_5"
    android:title="@string/company_5"></item>

<item android:id="@+id/company_6"
    android:title="@string/company_6">
</item>
</code>```

My Fragment Class is

```<code>public class MainFragment extends Fragment implements View.OnClickListener{

public MainFragment() {
    // Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_main, container, false);

    Button button1=(Button) view.findViewById(R.id.button1);
    button1.setOnClickListener(this);
    registerForContextMenu(button);
    Button button2=(Button) view.findViewById(R.id.button2);
    button2.setOnClickListener(this);
    Button button3=(Button) view.findViewById(R.id.button3);
    button3.setOnClickListener(this);

    // Inflate the layout for this fragment
    return view;

}

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    if(v.getId()==R.id.button1){
        this.getActivity().getMenuInflater().inflate(R.menu.contextmenu_company,menu);
    }
    super.onCreateContextMenu(menu, v, menuInfo);

}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    setHasOptionsMenu(true);
}

@Override
public boolean onContextItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.company_1:
            Toast.makeText(getActivity().getApplicationContext(),"caompany1code",Toast.LENGTH_LONG).show();
            return true;
        case R.id.company_2:
           ......
        case R.id.company_3:
            .....
        case R.id.company_4:
           ....
            return true;
        case R.id.company_5:
            .....
            return true;
        case R.id.company_6:
           .....
            return true;
    }
    return super.onContextItemSelected(item);
}

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.button1:

            Toast.makeText(getActivity(),"My colleagues clicked", Toast.LENGTH_SHORT).show();
            break;
        case R.id.button2:
            Toast.makeText(getActivity(), "News clicked", Toast.LENGTH_SHORT).show();
            break;
        case R.id.button3:
            Toast.makeText(getActivity(), "Navigator clicked", Toast.LENGTH_SHORT).show();
            break;

    }

}
</code>```

In MainActivity Class

```<code>public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

NavigationView navigationView = null;
Toolbar toolbar = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Set the fragment initially
    MainFragment fragment = new MainFragment();
    android.support.v4.app.FragmentTransaction fragmentTransaction =
            getSupportFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.fragment_container, fragment);
    fragmentTransaction.commit();
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    navigationView = (NavigationView) findViewById(R.id.nav_view);

    navigationView.setNavigationItemSelectedListener(this);

}
@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
   .....

}
</code>```

答:
You did use

onCreateOptionsMenu(Menu menu)

in your Activity but you are trying to use

onCreateContextMenu(ContextMenu menu, View v,
  ContextMenu.ContextMenuInfo menuInfo)

in your fragment.

Use onCreateOptionsMenu(Menu menu) in your fragment as well and set setHasOptionsMenu(true) in your onCreateView method.

Body:
In my app I have created few buttons in one fragment which will redirect to several activity based on the click. Now if user click button1, they will get a floating context menu conataing the list of the comapny, such as company1, compan2...etc. I have followed this post Opening a floating menu (context menu) in Android? to develop this feature in my app. But the problem is that this code is implemented in Activity, where in my case I want ti implement it in Fragment. I wrote the code but nothig happen with the button click. Now how can I generate this menu on button click

My contextmenu is

<?xml version="1.0" encoding="utf-8"?>

<item android:id="@+id/company_1"
    android:title="@string/company_1"></item>

<item android:id="@+id/company_2"
android:title="@string/company_2"></item>

<item android:id="@+id/company_3"
android:title="@string/company_3"></item>

<item android:id="@+id/company_4"
    android:title="@string/company_4">
</item>
<item android:id="@+id/company_5"
    android:title="@string/company_5"></item>

<item android:id="@+id/company_6"
    android:title="@string/company_6">
</item>

My Fragment Class is

public class MainFragment extends Fragment implements View.OnClickListener{

public MainFragment() {
    // Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_main, container, false);

    Button button1=(Button) view.findViewById(R.id.button1);
    button1.setOnClickListener(this);
    registerForContextMenu(button);
    Button button2=(Button) view.findViewById(R.id.button2);
    button2.setOnClickListener(this);
    Button button3=(Button) view.findViewById(R.id.button3);
    button3.setOnClickListener(this);

    // Inflate the layout for this fragment
    return view;

}

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    if(v.getId()==R.id.button1){
        this.getActivity().getMenuInflater().inflate(R.menu.contextmenu_company,menu);
    }
    super.onCreateContextMenu(menu, v, menuInfo);

}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    setHasOptionsMenu(true);
}

@Override
public boolean onContextItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.company_1:
            Toast.makeText(getActivity().getApplicationContext(),"caompany1code",Toast.LENGTH_LONG).show();
            return true;
        case R.id.company_2:
           ......
        case R.id.company_3:
            .....
        case R.id.company_4:
           ....
            return true;
        case R.id.company_5:
            .....
            return true;
        case R.id.company_6:
           .....
            return true;
    }
    return super.onContextItemSelected(item);
}

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.button1:

            Toast.makeText(getActivity(),"My colleagues clicked", Toast.LENGTH_SHORT).show();
            break;
        case R.id.button2:
            Toast.makeText(getActivity(), "News clicked", Toast.LENGTH_SHORT).show();
            break;
        case R.id.button3:
            Toast.makeText(getActivity(), "Navigator clicked", Toast.LENGTH_SHORT).show();
            break;

    }

}

In MainActivity Class

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

NavigationView navigationView = null;
Toolbar toolbar = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Set the fragment initially
    MainFragment fragment = new MainFragment();
    android.support.v4.app.FragmentTransaction fragmentTransaction =
            getSupportFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.fragment_container, fragment);
    fragmentTransaction.commit();
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    navigationView = (NavigationView) findViewById(R.id.nav_view);

    navigationView.setNavigationItemSelectedListener(this);

}
@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
   .....

}


问:
QML Dynamic Map Object Creation
I am trying to build interactive map application which will allow me to create an object when I click somewhere on the map. I use QML Dynamic Object Creation to create the object. I have succeeded to create a rectangle (still have coordinate problem), but when I change the rectangle with MapQuickItem or MapCircle, it shows nothing.

main.qml

```<code>import QtQuick 2.6
import QtQuick.Window 2.2
import "componentCreation.js" as MyScript
import QtQuick.Controls 2.1
import QtLocation 5.3
import QtPositioning 5.2

Window  {
    id: appWindow
    width: 512
    height: 512
    visible: true
    Map {
        id: map
        //width: win.width - kolom.width - row1.spacing
        anchors.fill: parent
        activeMapType: map.supportedMapTypes[2]
        zoomLevel: 1
        //z:1

        center {
            latitude: 5
            longitude: 100
        }
        plugin: Plugin {
            name: 'osm';
            PluginParameter {
                name: 'osm.mapping.offline.directory';
                value: ':/offline_tiles/'
            }
        }
        MapCircle {
            radius: 800000
            color: 'blue'
            center {
                latitude: 5
                longitude: 100
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {
                var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
                console.log("coordinate: " + coord)

                //MyScript.createSpriteObjects(map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude,map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude)
                MyScript.createSpriteObjects(mouse.x,mouse.y)

            }
        }
    }
}
</code>```

componentCreation.js

var component
var sprite

function createSpriteObjects(posX,posY) {
    component = Qt.createComponent("Sprite.qml");
    if (component.status == Component.Ready)
        finishCreation(posX,posY);
    else
        component.statusChanged.connect(finishCreation);

}

function finishCreation(posX,posY) {
    if (component.status == Component.Ready) {
        //sprite = component.createObject(map, {"marker.coordinate": map.toCoordinate(Qt.point(posX,posY))});
        sprite = component.createObject(map);
        console.log("Object Created " + map.toCoordinate(Qt.point(posX,posY)));
        //sprite = component.createObject(appWindow);
        if (sprite == null) {
            console.log("Error creating Object");
        }
    }
    else if (component.status == Component.Error) {
        console.log("Error loading component:", component.errorString());
    }
}```
</div>
</div>
</p>

<p>Sprite.qml</p>

```import QtQuick 2.0
import QtLocation 5.3

MapQuickItem {
    id: marker
    sourceItem: Image {
        id: image
        source: "marker.png"
    }
    coordinate {
        latitude: 5
        longitude: 100
    }
    anchorPoint.x: image.width / 2
    anchorPoint.y: image.height / 2
    visible: true
}

/*Rectangle {
    width: 100
    height: 20
    x: 10
    y:10
}*/
```

答:
MapQuickItem and MapCircle are not Item, they are of the type MapItem.
Just setting the Map as their parent isn't enough to display them in the Map.

You also need to call addMapItem :

```<code>sprite = component.createObject(map);
map.addMapItem(sprite);
</code>```

There are alternatives ways to create QML object dynamically, and I believe they are better since it involves less imperative javascript and is more readable.

The first one is doing it with a declaratively created Component (you can do it directly in your main.qml)  :

```<code>Component {
    id: mapCircleComponent
    MapCircle { //instead of defining it inline, you can also set the source property to point to another file
        radius: 80000
        color: 'blue'
    }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
        var circle = mapCircleComponent.createObject(map, {"center.latitude" : coord.latitude, "center.longitude": coord.longitude});
        map.addMapItem(circle);
    }
}
</code>```

The other way is to do it with model and views, and it's my favorite since you are not directly dealing with component and object instantiation.

Since we are not dealing with Item here, the usual ListView or Repeater won't work here. We need to use MapItemView:

```<code>ListModel {
    id: mapModel
}

Map {
    id: map
    //...
    MapItemView {
        model: mapModel
        delegate: MapCircle {
            radius: 80000
            color: 'blue'
            center {
                latitude: lat
                longitude: longi
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
            mapModel.append({lat : coord.latitude, longi: coord.longitude});
        }
    }
}
</code>```

In the onClicked we just append a row to the model and the MapItemView automatically instantiates a MapCircle for each row and add it to the Map.

Title: QML Dynamic Map Object Creation

Body:
I am trying to build interactive map application which will allow me to create an object when I click somewhere on the map. I use QML Dynamic Object Creation to create the object. I have succeeded to create a rectangle (still have coordinate problem), but when I change the rectangle with MapQuickItem or MapCircle, it shows nothing.

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import "componentCreation.js" as MyScript
import QtQuick.Controls 2.1
import QtLocation 5.3
import QtPositioning 5.2

Window  {
    id: appWindow
    width: 512
    height: 512
    visible: true
    Map {
        id: map
        //width: win.width - kolom.width - row1.spacing
        anchors.fill: parent
        activeMapType: map.supportedMapTypes[2]
        zoomLevel: 1
        //z:1

        center {
            latitude: 5
            longitude: 100
        }
        plugin: Plugin {
            name: 'osm';
            PluginParameter {
                name: 'osm.mapping.offline.directory';
                value: ':/offline_tiles/'
            }
        }
        MapCircle {
            radius: 800000
            color: 'blue'
            center {
                latitude: 5
                longitude: 100
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {
                var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
                console.log("coordinate: " + coord)

                //MyScript.createSpriteObjects(map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude,map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude)
                MyScript.createSpriteObjects(mouse.x,mouse.y)

            }
        }
    }
}

componentCreation.js

var component
var sprite

function createSpriteObjects(posX,posY) {
    component = Qt.createComponent("Sprite.qml");
    if (component.status == Component.Ready)
        finishCreation(posX,posY);
    else
        component.statusChanged.connect(finishCreation);

}

function finishCreation(posX,posY) {
    if (component.status == Component.Ready) {
        //sprite = component.createObject(map, {"marker.coordinate": map.toCoordinate(Qt.point(posX,posY))});
        sprite = component.createObject(map);
        console.log("Object Created " + map.toCoordinate(Qt.point(posX,posY)));
        //sprite = component.createObject(appWindow);
        if (sprite == null) {
            console.log("Error creating Object");
        }
    }
    else if (component.status == Component.Error) {
        console.log("Error loading component:", component.errorString());
    }
}

Sprite.qml

import QtQuick 2.0
import QtLocation 5.3

MapQuickItem {
    id: marker
    sourceItem: Image {
        id: image
        source: "marker.png"
    }
    coordinate {
        latitude: 5
        longitude: 100
    }
    anchorPoint.x: image.width / 2
    anchorPoint.y: image.height / 2
    visible: true
}

/*Rectangle {
    width: 100
    height: 20
    x: 10
    y:10
}*/

Body:
MapQuickItem and MapCircle are not Item, they are of the type MapItem.
Just setting the Map as their parent isn't enough to display them in the Map.

You also need to call addMapItem :

sprite = component.createObject(map);
map.addMapItem(sprite);

There are alternatives ways to create QML object dynamically, and I believe they are better since it involves less imperative javascript and is more readable.

The first one is doing it with a declaratively created Component (you can do it directly in your main.qml)  :

Component {
    id: mapCircleComponent
    MapCircle { //instead of defining it inline, you can also set the source property to point to another file
        radius: 80000
        color: 'blue'
    }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
        var circle = mapCircleComponent.createObject(map, {"center.latitude" : coord.latitude, "center.longitude": coord.longitude});
        map.addMapItem(circle);
    }
}

The other way is to do it with model and views, and it's my favorite since you are not directly dealing with component and object instantiation.

Since we are not dealing with Item here, the usual ListView or Repeater won't work here. We need to use MapItemView:

ListModel {
    id: mapModel
}

Map {
    id: map
    //...
    MapItemView {
        model: mapModel
        delegate: MapCircle {
            radius: 80000
            color: 'blue'
            center {
                latitude: lat
                longitude: longi
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
            mapModel.append({lat : coord.latitude, longi: coord.longitude});
        }
    }
}

In the onClicked we just append a row to the model and the MapItemView automatically instantiates a MapCircle for each row and add it to the Map.


问:
Call function with angular when scrolling
Is there a way to detect, if a element was scrolled and call a function and do some stuff with angularJS? Something like a ng-scroll or so, which works simply like a ng-click? I didn't really find a solution...

This is what I would like to do:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.checkIfScrolling = function() {
    console.log("scrolled...");
  }
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background-color: lightgrey;
  overflow: auto;
}</code>```

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

```

答:
It can be achieved without any directive also</p>

```<code>window.addEventListener('scroll', function(e) {
  //action to be performed
});
</code>```

Body:
Is there a way to detect, if a element was scrolled and call a function and do some stuff with angularJS? Something like a ng-scroll or so, which works simply like a ng-click? I didn't really find a solution...

This is what I would like to do:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.checkIfScrolling = function() {
    console.log("scrolled...");
  }
});

.box-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background-color: lightgrey;
  overflow: auto;
}

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

I'm an item within box-scroll

Body:
It can be achieved without any directive also

window.addEventListener('scroll', function(e) {
  //action to be performed
});


问:
Suddenly I cannot debug anything in VS2010
Since yesterday I cannot debug and step into any source code in VS2010. It is displaying the text as shown in the screenshot below. Whenever click on "Browse to Find Source" The text changes to the following:

No source available.  The source code
  cannot be displayed.

The funny thing about this screenshot is that it states that it actually could find the correct source file with the correct checksum.

What could have happend here and how do I fix it?

In the example below I have setup a simple windows forms application project and set a breakpoint in the form's constructor and then hit f5.

Update: When I start the application separately and then attach to it later, everything works fine. I can hit the breakpoints.

答: I have no idea why this happend but resetting the visual studio settings did the trick.</p>


问:
Table is specified twice, both as a target for 'UPDATE' and as a separate source for data in mysql
I have below query in mysql where I want to check if branch id and year of finance type from branch_master are equal with branch id and year of manager then update status in manager table against branch id in manager

```<code>UPDATE manager as m1
  SET m1.status = 'Y'
  WHERE m1.branch_id IN (
    SELECT m2.branch_id FROM manager as m2
     WHERE (m2.branch_id,m2.year) IN (
        (
          SELECT DISTINCT branch_id,year
            FROM `branch_master`
           WHERE type = 'finance'
        )
     )
  )
</code>```

but getting error

Table 'm1' is specified twice, both as a target for 'UPDATE' and as a
  separate source for data

答:
Try to use the EXISTS operator:

```<code>UPDATE manager as m1
SET m1.status = 'Y'
WHERE EXISTS (SELECT 1
              FROM (SELECT m2.branch_id
                    FROM branch_master AS bm
                    JOIN manager AS m2
                    WHERE bm.type = 'finance' AND
                        bm.branch_id = m2.branch_id AND
                        bm.year = m2.year) AS t
              WHERE t.branch_id = m1.branch_id);
</code>```

Note: The query uses an additional nesting level, as proposed by @Thorsten, as a means to circumvent the Table is specified twice error.

Demo here

Body:
I have below query in mysql where I want to check if branch id and year of finance type from branch_master are equal with branch id and year of manager then update status in manager table against branch id in manager

UPDATE manager as m1
  SET m1.status = 'Y'
  WHERE m1.branch_id IN (
    SELECT m2.branch_id FROM manager as m2
     WHERE (m2.branch_id,m2.year) IN (
        (
          SELECT DISTINCT branch_id,year
            FROM `branch_master`
           WHERE type = 'finance'
        )
     )
  )

but getting error

Table 'm1' is specified twice, both as a target for 'UPDATE' and as a
  separate source for data

Body:
Try to use the EXISTS operator:

UPDATE manager as m1
SET m1.status = 'Y'
WHERE EXISTS (SELECT 1
              FROM (SELECT m2.branch_id
                    FROM branch_master AS bm
                    JOIN manager AS m2
                    WHERE bm.type = 'finance' AND
                        bm.branch_id = m2.branch_id AND
                        bm.year = m2.year) AS t
              WHERE t.branch_id = m1.branch_id);

Note: The query uses an additional nesting level, as proposed by @Thorsten, as a means to circumvent the Table is specified twice error.

Demo here


问:
ES6 Class - Call method from within event handler
I am trying to write an ES6 class for an interactive calendar on my current project.

The Class looks similar to the below:

```<code>class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;

method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}

export default Calendar;
</code>```

I know that the context of the 'this' keyword has changed from the constructor to the button which has been clicked within the method1 function. However I don't know how to keep the context of the button and the constructor within the same function. I tried changing the button event listener code to the following:

```<code>this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);
</code>```

But this just switches the context of the 'this' keyword to the constructor rather than the button. I need to use both in my function.

Any ideas? I'm hoping this is quite a common issue?

答:
And if you use ES6, you can also use for of instead of forEach. This prevents creating yet another callback with its own scope. In this code, the keyword 'this' still refers to the original class.</p>

```<code>this.eventButtons = s.eventButtons;
for(b of this.eventButtons){
   b.addEventListener('click', () => this.method1);
}
</code>```

Body:
I am trying to write an ES6 class for an interactive calendar on my current project.

The Class looks similar to the below:

class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;

method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}

export default Calendar;

I know that the context of the 'this' keyword has changed from the constructor to the button which has been clicked within the method1 function. However I don't know how to keep the context of the button and the constructor within the same function. I tried changing the button event listener code to the following:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);

But this just switches the context of the 'this' keyword to the constructor rather than the button. I need to use both in my function.

Any ideas? I'm hoping this is quite a common issue?

Body:
And if you use ES6, you can also use for of instead of forEach. This prevents creating yet another callback with its own scope. In this code, the keyword 'this' still refers to the original class.

this.eventButtons = s.eventButtons;
for(b of this.eventButtons){
   b.addEventListener('click', () => this.method1);
}


问:
upload entire folder to a specific folder on Azure blob
I know how to upload entire folder to a contain on Azure blob, it is this:

```<code>Get-ChildItem -File -Recurse | Set-AzureStorageBlobContent -Container $ContainerName -Context $ctx
</code>```

My question is that if I have a folder under my container, saying it is "test". How can I upload all the files/subfloders of my local folder to Azuure blob mycontainer/test/.

Thanks

答:
Now it is possible to add files into blob storage into the folder. All you need to do is to download Microsoft Azure Storage Explorer. Then you can use it to edit files and folders inside your blob storage:

Or open the app directly from Azure:

Body:
I know how to upload entire folder to a contain on Azure blob, it is this:

Get-ChildItem -File -Recurse | Set-AzureStorageBlobContent -Container $ContainerName -Context $ctx

My question is that if I have a folder under my container, saying it is "test". How can I upload all the files/subfloders of my local folder to Azuure blob mycontainer/test/.

Thanks


问:
nhibernate:alternative to Session.IsDirty()
I have a piece of code that opens an nHibernate transaction. I only want to do this if the current session is dirty. I was using Session.IsDirty() but I've since found that this flushes an pending SQL statements to the database. Does anyone know of an alternative that I can use that simply checks if there are any pending SQL statements but does not execute them?</p>

答: I created an extension for this: https://weblogs.asp.net/ricardoperes/finding-dirty-properties-in-nhibernate. You need to get each EntityEntry from the PersistenceContext and see if it is dirty.</p>


问:
How to force redirect to https when user changes the url to be http://whatever?
I'm using play framework 2.3 and I've got to the point where redirecting to https is working but if I change the https in the url to http, the request never makes it to the server. Any thoughts?</p>

答:
if your app working behind a web server, simple create same backend config for http and https. you can find different web server configs in official documentation:

https://www.playframework.com/documentation/2.5.x/HTTPServer

if your app handling https directly (not recommended) and you start it with ./start -Dhttps.port=... add another argument -Dhttp.port= then your server accessible with https and http request.

the best scenario if you use a web server in front of your app, and configure http to https redirecting there.

eg. nginx http host config to redirect every request to https:

```<code>server {
 include /etc/nginx/server_http;
 server_name  yourdomain.com;

 root /var/www/html;

 location / {
  rewrite ^ https://$server_name$request_uri?;
 }
}
</code>```

Body:
if your app working behind a web server, simple create same backend config for http and https. you can find different web server configs in official documentation:

https://www.playframework.com/documentation/2.5.x/HTTPServer

if your app handling https directly (not recommended) and you start it with ./start -Dhttps.port=... add another argument -Dhttp.port= then your server accessible with https and http request.

the best scenario if you use a web server in front of your app, and configure http to https redirecting there.

eg. nginx http host config to redirect every request to https:

server {
 include /etc/nginx/server_http;
 server_name  yourdomain.com;

 root /var/www/html;

 location / {
  rewrite ^ https://$server_name$request_uri?;
 }
}


问:
How to handle strings with a block ( awk )
Each block starts with 'COL ID' in an input data.
I need to print 'COL ID' and JOB_subid if there is. As you can see in input data, 'COLID=2' has a job_subid(1 / left of table name) but 'COLID=3' or 'COLID=4' doesn't have.
For COLID=3/4, I want to print 'no_data' as it doesn't have any job_subid.
How can I handle this data?

AWK

```<code>/COL ID/        {JOBID=$4;}

/^[0-9]/ {
    JOB_SUBID=$1;
    printf "%s#%s",JOBID,JOB_SUBID;
    printf "\n";
}

END {

if (JOB_SUBID="") then
  JOB_SUBID="no_data";
  printf "%s#%s",JOBID,JOB_SUBID;
  printf "\n";
end if;

}
</code>```

input data

```<code>COL ID    : 2
PID       : 26788

ID     TABLE
------ ------------------------------
1      "SCOTT"."PRINCE01"

COL ID    : 3
PID       : 26788

COL ID    : 4
PID       : 26788
</code>```

Incorrect result

```<code>2#1
4#no_data
</code>```

Required result

```<code>2#1
3#no_data
4#no_data
</code>```

答:
```<code>$ cat tst.awk
/COL ID/ { prt(); jobId = $NF }
/^[0-9]/ { subId = $1 }
END { prt() }
function prt() { if (NR>1) print jobId "#" subId; subId="no_data" }

$ awk -f tst.awk file
2#1
3#no_data
4#no_data
</code>```

Body:
Each block starts with 'COL ID' in an input data.
I need to print 'COL ID' and JOB_subid if there is. As you can see in input data, 'COLID=2' has a job_subid(1 / left of table name) but 'COLID=3' or 'COLID=4' doesn't have.
For COLID=3/4, I want to print 'no_data' as it doesn't have any job_subid.
How can I handle this data?

AWK

/COL ID/        {JOBID=$4;}

/^[0-9]/ {
    JOB_SUBID=$1;
    printf "%s#%s",JOBID,JOB_SUBID;
    printf "\n";
}

END {

if (JOB_SUBID="") then
  JOB_SUBID="no_data";
  printf "%s#%s",JOBID,JOB_SUBID;
  printf "\n";
end if;

}

input data

COL ID    : 2
PID       : 26788

ID     TABLE
------ ------------------------------
1      "SCOTT"."PRINCE01"

COL ID    : 3
PID       : 26788

COL ID    : 4
PID       : 26788

Incorrect result

2#1
4#no_data

Required result

2#1
3#no_data
4#no_data


问:
Converting to JPEG given image data and UTI
Given Data and its UTI, what's the proper way to convert it to JPEG?</p>

```<code>PHImageManager.default().requestImageData(for: asset, options: options, resultHandler: { (imageData: Data?, dataUTI: String?, _, _) in
    guard let imageData = imageData, let dataUTI = dataUTI else { return }
    if !UTTypeConformsTo(dataUTI as CFString, kUTTypeJPEG) {
        //TODO: Convert to JPEG

    }
})
</code>```

答: If it's UTType is JPEG, you already have a proper JPEG encoded representation of the image. And if you want to display that image to your screen, you only need to initialize a UIImage object with the given data calling init?(data:) initializer.

Body:
Given Data and its UTI, what's the proper way to convert it to JPEG?

PHImageManager.default().requestImageData(for: asset, options: options, resultHandler: { (imageData: Data?, dataUTI: String?, _, _) in
    guard let imageData = imageData, let dataUTI = dataUTI else { return }
    if !UTTypeConformsTo(dataUTI as CFString, kUTTypeJPEG) {
        //TODO: Convert to JPEG

    }
})


问:
How to update data in mongodb?
How to update data in mongodb?

This is my actual structure of my collection

```<code>db.collection.find().pretty()
{
    "_id" : ObjectId("557914833ac61e518e6103ab"),
    "dataValue" : {
        "value1" : [
            "value1 A",
            "value1 B"
        ]
    }
}
</code>```

I want to insert like default in dataValue

```<code>db.collection.find().pretty()
{
    "_id" : ObjectId("557914833ac61e518e6103ab"),
    "dataValue" : {
        "value1" : [
            "value1 A",
            "value1 B"
        ],
        "default" : [
            "default A",
            "default B"
        ]
    }
}
</code>```

Please help me

答:
Try this:

```<code>db.collection.update(
   { _id: ObjectId("557914833ac61e518e6103ab") }, //update doc with this id
   { $set:
      {
        "dataValue.default": [
         "default A",
         "default B"
         ]
      }
   }
)
</code>```

As per my comment: https://docs.mongodb.com/manual/reference/method/db.collection.update/

Syntax of update is (we're only using the <query> and <update> parts of this

```<code>db.collection.update(
   <query>,
   <update>,
   {
     upsert: <boolean>,
     multi: <boolean>,
     writeConcern: <document>,
     collation: <document>
   }
)
</code>```

In your case, you need to use $set

dataValue.default uses dot notation to 'reach inside' the sub document, and set the property

Title: How to update data in mongodb?

Body:
How to update data in mongodb?

This is my actual structure of my collection

db.collection.find().pretty()
{
    "_id" : ObjectId("557914833ac61e518e6103ab"),
    "dataValue" : {
        "value1" : [
            "value1 A",
            "value1 B"
        ]
    }
}

I want to insert like default in dataValue

db.collection.find().pretty()
{
    "_id" : ObjectId("557914833ac61e518e6103ab"),
    "dataValue" : {
        "value1" : [
            "value1 A",
            "value1 B"
        ],
        "default" : [
            "default A",
            "default B"
        ]
    }
}

Please help me

Body:
Try this:

db.collection.update(
   { _id: ObjectId("557914833ac61e518e6103ab") }, //update doc with this id
   { $set:
      {
        "dataValue.default": [
         "default A",
         "default B"
         ]
      }
   }
)

As per my comment: https://docs.mongodb.com/manual/reference/method/db.collection.update/

Syntax of update is (we're only using the <query> and <update> parts of this

db.collection.update(
   <query>,
   <update>,
   {
     upsert: <boolean>,
     multi: <boolean>,
     writeConcern: <document>,
     collation: <document>
   }
)

In your case, you need to use $set

dataValue.default uses dot notation to 'reach inside' the sub document, and set the property


问:
How to change a text based onclick with JavaScript?
Good evening everybody!

Well, I am studying JavaScript at the moment, and I reachead the point in where I need, based on clicked text (button, ... it doesn't matter, I guess).

For example:

This message should be edited.

Two choices: ES - EN

If choice "ES" is clicked/selected, then:

This message has been edited to ES.

Otherwise, if choice "EN" is clicked/selected, then:

This message has been edited to EN.

I think this could have been achieved with an if in a script, but the problem is how to tell the script which option has been chosen, if "ES" or "EN".

I have this:

```<code><p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func();">ES</a> - <a href="#" id="EN" onclick="func();">EN</a> - <a href="#" id="JP" onclick="func();">JP</a>
</code>```

And as I said, the problem is that I don't know how to tell the script what has been clicked/selected.

Thank you for any help you may give me (if possible, an explanation with or over a solution would be amazing because I want to learn and understand, not to solve this problem without being able to solve the same thing or similar in a future).

答:
Another way using Switch Case.

HTML:

```<code><p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this.id);">ES</a> - <a href="#" id="EN" onclick="func(this.id);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>
</code>```

JavaScript:

```<code>var text = 'This message has been edited to ';

function func(value) {
  var selectValue="";

    switch (value) {
      case "EN":
          selectValue = "EN";
        break;

        case "ES":
            selectValue = "ES";
        break;

        case "JP":
            selectValue = "JP";
        break;
}

document.getElementById('demo').innerHTML = text + selectValue + '.';
}
</code>```

Note: Anchor Tag  tag defines a hyperlink, which is used to link from one page to another.

Body:
Good evening everybody!

Well, I am studying JavaScript at the moment, and I reachead the point in where I need, based on clicked text (button, ... it doesn't matter, I guess).

For example:

This message should be edited.

Two choices: ES - EN

If choice "ES" is clicked/selected, then:

This message has been edited to ES.

Otherwise, if choice "EN" is clicked/selected, then:

This message has been edited to EN.

I think this could have been achieved with an if in a script, but the problem is how to tell the script which option has been chosen, if "ES" or "EN".

I have this:

This message should be edited.

ES - EN - JP

And as I said, the problem is that I don't know how to tell the script what has been clicked/selected.

Thank you for any help you may give me (if possible, an explanation with or over a solution would be amazing because I want to learn and understand, not to solve this problem without being able to solve the same thing or similar in a future).

Body:
Another way using Switch Case.

HTML:

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this.id);">ES</a> - <a href="#" id="EN" onclick="func(this.id);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

JavaScript:

var text = 'This message has been edited to ';

function func(value) {
  var selectValue="";

    switch (value) {
      case "EN":
          selectValue = "EN";
        break;

        case "ES":
            selectValue = "ES";
        break;

        case "JP":
            selectValue = "JP";
        break;
}

document.getElementById('demo').innerHTML = text + selectValue + '.';
}

Note: Anchor Tag  tag defines a hyperlink, which is used to link from one page to another.