问:
How to have an image move up over time (instead of instantly) when using hover
I'm trying to have an image rise when you hover over the image. When it rises, I don't want it to rise instantly, I want it to rise over time. I've figured out how to make the opacity decrease over time, but not how to have it rise over time. I'm new to programming and I'm having trouble figuring it out. Let me know if you guys have any ideas or need any more information. Thanks

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';

}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
}

.column img:hover {
  background-color:black;
  filter: brightness(70%);
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -5px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}</code>```

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

```

答:
You need to include a point of reference for the animation to begin in your .column img CSS definition.

```<code>.column img {
  cursor: pointer;
  background-color:black;

  /* You need to define where the animation starts */
  position: relative;
  top: 0;

  /* Add this if you want the animation to also happen on un-hover */
  transition-duration: .6s;
}
</code>```

Here's a working fiddle:  https://jsfiddle.net/twhitcomb/auynx0m7/10/

Body:
I'm trying to have an image rise when you hover over the image. When it rises, I don't want it to rise instantly, I want it to rise over time. I've figured out how to make the opacity decrease over time, but not how to have it rise over time. I'm new to programming and I'm having trouble figuring it out. Let me know if you guys have any ideas or need any more information. Thanks

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';

}

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
}

.column img:hover {
  background-color:black;
  filter: brightness(70%);
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -5px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

Body:
You need to include a point of reference for the animation to begin in your .column img CSS definition.

.column img {
  cursor: pointer;
  background-color:black;

  /* You need to define where the animation starts */
  position: relative;
  top: 0;

  /* Add this if you want the animation to also happen on un-hover */
  transition-duration: .6s;
}

Here's a working fiddle:  https://jsfiddle.net/twhitcomb/auynx0m7/10/


来源: stackexchange

问:
python CSV module vs Pandas
I am using pandas to read CSV file data, but the CSV module is also there to manage the CSV file.

so my questions are :-

what is the difference between these both?

what are the cons of using pandas over the CSV module?

答:
csv is a built-in module but pandas not. if you want only reading csv file you should not install pandas because you must install it and increasing in dependencies of project is not a best practice.

if you want to analyze data of csv file with pandas, pandas changes csv file to dataframe needed for manipulating data with pandas and you should not use csv module for these cases.

if you have a big data or data with large volume you should consider libraries like numpy and pandas.

ContentLicense: CC BY-SA 4.0

Title: python CSV module vs Pandas


问:
'Future<dynamic>' has no instance getter 'body' error, when trying to access body of Future SmsMessage variable in Flutter
This is a class in a seperate file

```<code>import 'package:sms/sms.dart';

class SmsReader {
  SmsMessage sms;
  dynamic messageRead() async {
    SmsReceiver receiver = SmsReceiver();
    receiver.onSmsReceived.listen((SmsMessage msg) {
      sms = msg;
    });
    return sms;
  }
}
</code>```

this file is where an object is created and func is called

```<code>class _HomePageState extends State<HomePage> {

  SmsReader smsReader = SmsReader();
  dynamic sms;

  @override
  void initState() {
    sms = smsReader.messageRead();
    super.initState();
  }
</code>```

Now when I try to
print(sms.body), this error appears

Class 'Future' has no instance getter 'body'.
Receiver: Instance of 'Future'
Tried calling: body

答:
Do the change

```<code>  Future<dynamic> messageRead() async {
    SmsReceiver receiver = SmsReceiver();
      receiver.onSmsReceived.listen((SmsMessage msg) {
        sms = msg;
      });
    return sms;
  }
</code>```

and

```<code>smsReader.messageRead().then((sms) {
  //do whatever with sms ******
});
</code>```

Let me know if it works.

Body:
This is a class in a seperate file

import 'package:sms/sms.dart';

class SmsReader {
  SmsMessage sms;
  dynamic messageRead() async {
    SmsReceiver receiver = SmsReceiver();
    receiver.onSmsReceived.listen((SmsMessage msg) {
      sms = msg;
    });
    return sms;
  }
}

this file is where an object is created and func is called

class _HomePageState extends State<HomePage> {

  SmsReader smsReader = SmsReader();
  dynamic sms;

  @override
  void initState() {
    sms = smsReader.messageRead();
    super.initState();
  }

Now when I try to
print(sms.body), this error appears

Class 'Future' has no instance getter 'body'.
Receiver: Instance of 'Future'
Tried calling: body

Body:
Do the change

  Future<dynamic> messageRead() async {
    SmsReceiver receiver = SmsReceiver();
      receiver.onSmsReceived.listen((SmsMessage msg) {
        sms = msg;
      });
    return sms;
  }

and

smsReader.messageRead().then((sms) {
  //do whatever with sms ******
});

Let me know if it works.


问:
Check for string in queryset within a Django template
I know this should be straight-forward, but for some reasons I'm not getting the results I want.

This instruction: {{user.profile.role.all}} in my Django template outputs this:

```<code><QuerySet [<Role: Creator>, <Role: Performer>, <Role: Venue>]>
</code>```

I'd like to check if a role is within this queryset; so, for instance, if I want to check if a role 'venue' is present, according to what the documentation tells me, I should do:

```<code>{% if "Venue" in user.profile.role.all %}
</code>```

Right? The above-mentioned if, though, returns false. Why is that?

答:
The reason this does not work is because a string is something different than a Role with as name the same string.

You can pass a set of role names to the template, for example with:

```<code>context['role'] = Role.objects.filter(
    <b>profile__user=self.request.user</b>
).values_list(<b>'type'</b>, flat=True)</code>```

Body:
I know this should be straight-forward, but for some reasons I'm not getting the results I want.

This instruction: {{user.profile.role.all}} in my Django template outputs this:

<QuerySet [<Role: Creator>, <Role: Performer>, <Role: Venue>]>

I'd like to check if a role is within this queryset; so, for instance, if I want to check if a role 'venue' is present, according to what the documentation tells me, I should do:

{% if "Venue" in user.profile.role.all %}

Right? The above-mentioned if, though, returns false. Why is that?

Body:
The reason this does not work is because a string is something different than a Role with as name the same string.

You can pass a set of role names to the template, for example with:

context['role'] = Role.objects.filter(
    profile__user=self.request.user
).values_list('type', flat=True)


问:
how to remove the warnings in Jtidy in java
I am using Jtidy parser in java.

```<code>URL url = new URL("www.yahoo.com");
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
InputStream in = conn.getInputStream();
doc = new Tidy().parseDOM(in, null);
</code>```

when I run this, "doc = new Tidy().parseDOM(in, null);"
  I am getting some warnings as follows:

```<code>Tidy (vers 4th August 2000) Parsing "InputStream"
line 140 column 5 - Warning: <table> lacks "summary" attribute

InputStream: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
InputStream: Document content looks like HTML 4.01 Transitional

1 warnings/errors were found!
</code>```

These warnings are getting displayed automatically on console. But I don't want these
warnings to be displayed on my console after running

```<code>doc = new Tidy().parseDOM(in, null);
</code>```

Please help me,how to do this,how to remove these warnings from console.

答:
Looking at the Documentation I found a few methods which may do what you want.

There is setShowErrors, setQuiet and setErrout. You may want to try the following:

```<code>Tidy tidy = new Tidy();
tidy.setShowErrors(0);
tidy.setQuiet(true);
tidy.setErrout(null);
doc = tidy.parseDOM(in, null);
</code>```

One of them may be enough already, these were all the options I found. Note that this will simply hide the messages, not do anything about them. There is also setForceOutput to get the output, even if errors were generated.

ContentLicense: CC BY-SA 3.0

Body:
I am using Jtidy parser in java.

URL url = new URL("www.yahoo.com");
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
InputStream in = conn.getInputStream();
doc = new Tidy().parseDOM(in, null);

when I run this, "doc = new Tidy().parseDOM(in, null);"
  I am getting some warnings as follows:

Tidy (vers 4th August 2000) Parsing "InputStream"
line 140 column 5 - Warning:
 lacks "summary" attribute

InputStream: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
InputStream: Document content looks like HTML 4.01 Transitional

1 warnings/errors were found!

These warnings are getting displayed automatically on console. But I don't want these
warnings to be displayed on my console after running

doc = new Tidy().parseDOM(in, null);

Please help me,how to do this,how to remove these warnings from console.

Body:
Looking at the Documentation I found a few methods which may do what you want.

There is setShowErrors, setQuiet and setErrout. You may want to try the following:

Tidy tidy = new Tidy();
tidy.setShowErrors(0);
tidy.setQuiet(true);
tidy.setErrout(null);
doc = tidy.parseDOM(in, null);

One of them may be enough already, these were all the options I found. Note that this will simply hide the messages, not do anything about them. There is also setForceOutput to get the output, even if errors were generated.


问:
how can I pipe result of which command to another command in subprocess?
HOw can I pipe in result of which somecommand to outerCommand so as to replicate result of what I will do in shell as outercommand 'which somecommand'

答:
According to the suggestions of the documentation, I would avoid using the low-level interface Popen, which is tricky to use correctly in the long run, and to mindlessly use shell=True, which might expose you to shell injection attacks.

I would therefore suggest a simpler approach if that's all you need: just capture the output and use it using the new capture_output parameter of the new subprocess.run() API.

This will get what you need:

completed_process = subprocess.run(['outercommand', subprocess.run(['which', 'somecommand'], capture_output=True).stdout], capture_output=True)

completed_process.check_returncode()
print(completed_process.stdout.decode('utf-8'))
```


问:
Docker - "image operating system "linux" cannot be used on this platform" while trying to pull splash. from scrapinghub/splash
I have installed docker, and while trying to pull scrapinghub/splash -  It says
"image operating system "linux" cannot be used on this platform". i'm using win 10.
Other commands and pull requests are working fine.</p>

答:
Open Docker Desktop option-->
Select switch to linux container option

Thats all


问:
how can I find out font size used by best fit in imagemagick

This question is related to http://www.imagemagick.org/Usage/text/#caption_bestfit .

Suppose I am writing a single digit number using font "Comic-Sans-MS-Bold" in 40x40 area so that it occupies maximum space and does not overflow.

Say imagemagick chose font size 'x' .

If I were to write a two digit number using font "Comic-Sans-MS-Bold" in 40x40 area.

Then imagemagick would choose some other font size 'y' .

Is there a debug option or some other method using which I can find out what font size was decided for writing a particular text in specified area .

Actually, I need that font size so that I can specify it explicitly in my tkinter script when I create similiar image using draw text over canvas.

Thanks.

BTW , imagemagick forum is locked .

答:
You can find the font size in ImageMagick caption: using -debug annotate as follows. You will get a long list showing all the iterations of font size tried. The last one is what you want.

```<code>convert -debug annotate -size 200x50 -background white -font candice caption:"This Is Some Text" result.jpg
</code>```

```<code>2020-06-01T19:02:46+00:00 0:00.044 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.045 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate
  Metrics: text: T; width: 12.5312; height: 15; ascent: 10; descent: -4; max advance: 15; bounds: 0.484375,-1  12.5312,9; origin: 12.5312,0; pixels per em: 12,12; underline position: -1.26; underline thickness: 0.6
2020-06-01T19:02:46+00:00 0:00.045 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate
  Metrics: text: Th; width: 16.3438; height: 15; ascent: 10; descent: -4; max advance: 15; bounds: 0.125,-0.328125  6.34375,8; origin: 16.3438,0; pixels per em: 12,12; underline position: -1.26; underline thickness: 0.6
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate

.
.
.
  Metrics: text: This Is Some Text; width: 193.703; height: 28; ascent: 19; descent: -7; max advance: 29; bounds: 0.734375,-2.09375  7.70312,11.8906; origin: 193.703,0; pixels per em: 23,23; underline position: -2.415; underline thickness: 1.15
2020-06-01T19:02:46+00:00 0:00.194 0.180u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 23
</code>```

So the result is pointsize 23

Body:
You can find the font size in ImageMagick caption: using -debug annotate as follows. You will get a long list showing all the iterations of font size tried. The last one is what you want.

convert -debug annotate -size 200x50 -background white -font candice caption:"This Is Some Text" result.jpg

2020-06-01T19:02:46+00:00 0:00.044 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.045 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate
  Metrics: text: T; width: 12.5312; height: 15; ascent: 10; descent: -4; max advance: 15; bounds: 0.484375,-1  12.5312,9; origin: 12.5312,0; pixels per em: 12,12; underline position: -1.26; underline thickness: 0.6
2020-06-01T19:02:46+00:00 0:00.045 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate
  Metrics: text: Th; width: 16.3438; height: 15; ascent: 10; descent: -4; max advance: 15; bounds: 0.125,-0.328125  6.34375,8; origin: 16.3438,0; pixels per em: 12,12; underline position: -1.26; underline thickness: 0.6
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 12
2020-06-01T19:02:46+00:00 0:00.046 0.040u 6.9.11 Annotate convert[53791]: annotate.c/GetTypeMetrics/862/Annotate

.
.
.
  Metrics: text: This Is Some Text; width: 193.703; height: 28; ascent: 19; descent: -7; max advance: 29; bounds: 0.734375,-2.09375  7.70312,11.8906; origin: 193.703,0; pixels per em: 23,23; underline position: -2.415; underline thickness: 1.15
2020-06-01T19:02:46+00:00 0:00.194 0.180u 6.9.11 Annotate convert[53791]: annotate.c/RenderFreetype/1486/Annotate
  Font /Library/Fonts/Candice.ttf; font-encoding none; text-encoding none; pointsize 23

So the result is pointsize 23


问:
How to modify in place nested arrays of hashes
I have data in the format:

```<code>data={"services"=>[{"name"=>"foo","checks"=>["script1","script2"]},
{"name"=>"bar","checks"=>["script3"]}]}
</code>```

I am trying to replace "checks" for each check to be "/bin/#{check}". The code I was playing with is

```<code>data["services"].map! {|svc|
  svc["checks"].map! {|check|
    check = "/bin/#{check}"
  }
}
</code>```

But this code replaces the whole service hash instead of just one key, and I get:

```<code>{"services"=>[["/bin/script1", "/bin/script2"], ["/bin/script3"]]}
</code>```

Can I use map! in deeply nested arrays of hashes of arrays of... ? Or how else can I do what I need?

答:
I suggest avoiding changing data and just return a new hash:

```<code>new_data = data.each_with_object({}) do |(service, values), hash|
  hash[service] = values.map do |value|
    checks = value['checks'].map { |check| "/bin/#{check}" }
    value.merge('checks' => checks)
  end
end

=> {"services"=>[{"name"=>"foo", "checks"=>["/bin/script1", "/bin/script2"]}, {"name"=>"bar", "checks"=>["/bin/script3"]}]}
</code>```

Body:
I have data in the format:

data={"services"=>[{"name"=>"foo","checks"=>["script1","script2"]},
{"name"=>"bar","checks"=>["script3"]}]}

I am trying to replace "checks" for each check to be "/bin/#{check}". The code I was playing with is

data["services"].map! {|svc|
  svc["checks"].map! {|check|
    check = "/bin/#{check}"
  }
}

But this code replaces the whole service hash instead of just one key, and I get:

{"services"=>[["/bin/script1", "/bin/script2"], ["/bin/script3"]]}

Can I use map! in deeply nested arrays of hashes of arrays of... ? Or how else can I do what I need?

Body:
I suggest avoiding changing data and just return a new hash:

new_data = data.each_with_object({}) do |(service, values), hash|
  hash[service] = values.map do |value|
    checks = value['checks'].map { |check| "/bin/#{check}" }
    value.merge('checks' => checks)
  end
end

=> {"services"=>[{"name"=>"foo", "checks"=>["/bin/script1", "/bin/script2"]}, {"name"=>"bar", "checks"=>["/bin/script3"]}]}


问:
Ansible Playbook passing array list as variable
so we currently have a create directories yml and it has 20 or so folders it creates..  I'm attempting to streamline that and pass in the folders with the mode and recurse flag which are all different.  As a test I created this.

```<code>- debug: msg="testing = {{ testing }}"
- name: "loop through list from a variable"
  debug:
    msg: "dest: {{ item.dest }}, mode: {{ item.mode }}, recurse: {{ item.recurse }}"
  with_items: "{{ testing }}"
</code>```

Normally we have something like this:

```<code>- name: Create Multiple Directories
  file:
    path: "{{ item.dest }}"
    mode: "{{ item.mode }}"
    recurse: "{{ item.recurse }}"
    state: directory
  with_items:
    - { dest: '/local/path1', mode: '0775', recurse: yes }
    - { dest: '/local/path2', mode: '0777', recurse: no }
</code>```

So my problem is we use AaaS to pass information over and how the parameter is set.. We have a TextBox on a web page.   I tried the following with no luck.

```<code>- { dest: '/local/path1', mode: '0775', recurse: yes }
- { dest: '/local/path2', mode: '0777', recurse: no }
</code>```

and

```<code>{ dest: '/local/path1', mode: '0775', recurse: yes }
{ dest: '/local/path2', mode: '0777', recurse: no }
</code>```

and

```<code>dest: '/local/path1', mode: '0775', recurse: yes
dest: '/local/path2', mode: '0777', recurse: no
</code>```

The error I'm getting in all cases states 'dest' does not exist.   Is it formatting or is there something else I need to consider?

答:
Q: "Is it formatting or is there something else I need to consider?"

A: The code works for me. (I've only changed the destinations e.g. dest: '/usr/local/test/path1'). See below the dir before and after.

shell> tree /usr/local/test
/usr/local/test

0 directories, 0 files

shell> tree /usr/local/test
/usr/local/test
├── path1
└── path2

2 directories, 0 files

shell> ll /usr/local/test
total 16
drwxr-xr-x  4 root root 4096 Jun  1 21:00 ./
drwxr-xr-x 12 root root 4096 Jun  1 21:00 ../
drwxrwxr-x  2 root root 4096 Jun  1 21:00 path1/
drwxrwxrwx  2 root root 4096 Jun  1 21:00 path2/
```

<hr>

<pre class="lang-yaml prettyprint-override"><code>shell> cat playbook.yml
- hosts: localhost
  become: true
  tasks:
    - name: Create Multiple Directories
      file:
        path: "{{ item.dest }}"
        mode: "{{ item.mode }}"
        recurse: "{{ item.recurse }}"
        state: directory
      with_items:
        - {dest: '/usr/local/test/path1', mode: '0775', recurse: yes}
        - {dest: '/usr/local/test/path2', mode: '0777', recurse: no}
</code>```

Body:
so we currently have a create directories yml and it has 20 or so folders it creates..  I'm attempting to streamline that and pass in the folders with the mode and recurse flag which are all different.  As a test I created this.

- debug: msg="testing = {{ testing }}"
- name: "loop through list from a variable"
  debug:
    msg: "dest: {{ item.dest }}, mode: {{ item.mode }}, recurse: {{ item.recurse }}"
  with_items: "{{ testing }}"

Normally we have something like this:

- name: Create Multiple Directories
  file:
    path: "{{ item.dest }}"
    mode: "{{ item.mode }}"
    recurse: "{{ item.recurse }}"
    state: directory
  with_items:
    - { dest: '/local/path1', mode: '0775', recurse: yes }
    - { dest: '/local/path2', mode: '0777', recurse: no }

So my problem is we use AaaS to pass information over and how the parameter is set.. We have a TextBox on a web page.   I tried the following with no luck.

- { dest: '/local/path1', mode: '0775', recurse: yes }
- { dest: '/local/path2', mode: '0777', recurse: no }

and

{ dest: '/local/path1', mode: '0775', recurse: yes }
{ dest: '/local/path2', mode: '0777', recurse: no }

and

dest: '/local/path1', mode: '0775', recurse: yes
dest: '/local/path2', mode: '0777', recurse: no

The error I'm getting in all cases states 'dest' does not exist.   Is it formatting or is there something else I need to consider?

Body:
Q: "Is it formatting or is there something else I need to consider?"

A: The code works for me. (I've only changed the destinations e.g. dest: '/usr/local/test/path1'). See below the dir before and after.

shell> tree /usr/local/test
/usr/local/test

0 directories, 0 files

shell> tree /usr/local/test
/usr/local/test
├── path1
└── path2

2 directories, 0 files

shell> ll /usr/local/test
total 16
drwxr-xr-x  4 root root 4096 Jun  1 21:00 ./
drwxr-xr-x 12 root root 4096 Jun  1 21:00 ../
drwxrwxr-x  2 root root 4096 Jun  1 21:00 path1/
drwxrwxrwx  2 root root 4096 Jun  1 21:00 path2/

shell> cat playbook.yml
- hosts: localhost
  become: true
  tasks:
    - name: Create Multiple Directories
      file:
        path: "{{ item.dest }}"
        mode: "{{ item.mode }}"
        recurse: "{{ item.recurse }}"
        state: directory
      with_items:
        - {dest: '/usr/local/test/path1', mode: '0775', recurse: yes}
        - {dest: '/usr/local/test/path2', mode: '0777', recurse: no}


问:
Is there a way to perform a "Submit" function outside of the website?
I am trying to figure out if it is possible to click on a button on the Amazon website from outside of the website.

For Example: At the bottom of every product review is a "Helpful" button. If a review was helpful, the reader/shopper can click this button to let the reviewer (and Amazon) know that the review was helpful. (It's basically a "Like" button).

What I'm trying to accomplish:
I want to post my reviews on my own website/blog and still obtain "Likes" without asking readers to click a link to a product page, then search for my review, then click the button.

答:
You probably won't be able to do what you have in mind.

JavaScript can generally access information on another domain except if specifically configured in the origin website through CORS. Unless you own amazon.com, you won't be able to configure amazon's CORS headers to make them accessible to some JS running on your website.

You can however, from your website front-end, make a request to your website back-end that would be able to access amazon's data just like your browser does. Using a browser emulator like Puppeteer, you'll be able to launch an amazon page and programmatically retrieve infos, click on things and do other stuff.

However, the page that Puppeteer will be able to spin up will include credentials (cookies, localstorage content, auth token, etc) provided by your server, so Puppeteer will not see the same amazon.com your user sees on his browser, unless your user agrees to give you its amazon credentials, and at this point I'm pretty sure no user would do that, and that would not be authorized by amazon's terms of services.

TL;DR even if what you have in mind is not impossible, it would weeks for your and your team to code a system that would potentially allow you to do that, and that's provided the law is on your side, which is probably not the case.


问:
QTP Keyword driven basic example
I have been looking for very basic keyword driven test..i do not understand well how you can separate the test specifically from application so its reusable. In my understanding, the QTP commands like "navigate" are keywords. But how to create my own independent ones? I would be very grateful for example of how to do that. I found either too complex or just theoretical ones.
Thank you very much</p>

答: I don't know about overloading of keywords. But when i was writing test cases in QTP for automation. I used configurable navigation paths in the prop or config file n all i needed to do was call a generic function which took source n destination n using those prop files navigate to the proper location.</p>

Title: QTP Keyword driven basic example


问:
change style code function VScode time optimisation while coding
my goal is change a function to a format where the return value of the function is treated :
For example ; treating a the function scanf()

```<code>Return value of scanf : The value EOF is returned if the end of input is reached before
       either the first successful conversion or a matching failure occurs.
       EOF is also returned if a read error occurs, in which case the error
       indicator for the stream (see ferror(3)) is set, and errno is set to
       indicate the error.
</code>```

Thus

```<code>scanf("%d\n",&i);
</code>```

will be change to

```<code>#define RVAL(exp) do {if ((exp) == -1) { perror (#exp); exit(1); }} while (0)
...
RVAL(scanf("%d\n",&i));
</code>```

Thus I want this to be done quickly means :
so what i do is look for occurences of "scanf" and replace it with "RVAL(scanf"
but the problem is i have to add another right parentheses

Can this be done fast ? using a techniques ? or a style ? where each whenever I enter scanf(); its replaced witch rval(scanf());

答:
If you don't have many ) in your format string you can use a regex with (scanf([^)]*)); and replace with rval(\1);</p>

<p>*see comment </p>

Body:
my goal is change a function to a format where the return value of the function is treated :
For example ; treating a the function scanf()

Return value of scanf : The value EOF is returned if the end of input is reached before
       either the first successful conversion or a matching failure occurs.
       EOF is also returned if a read error occurs, in which case the error
       indicator for the stream (see ferror(3)) is set, and errno is set to
       indicate the error.

Thus

scanf("%d\n",&i);

will be change to

#define RVAL(exp) do {if ((exp) == -1) { perror (#exp); exit(1); }} while (0)
...
RVAL(scanf("%d\n",&i));

Thus I want this to be done quickly means :
so what i do is look for occurences of "scanf" and replace it with "RVAL(scanf"
but the problem is i have to add another right parentheses

Can this be done fast ? using a techniques ? or a style ? where each whenever I enter scanf(); its replaced witch rval(scanf());

Body:
If you don't have many ) in your format string you can use a regex with (scanf([^)]*)); and replace with rval(\1);

*see comment


问:
Android Studio Javadoc won't generate because "Selected scope contain no Java classes"
I am trying to generate the JavaDoc for the Activity class source code in Android Studio 3.6.3.  The file is open in the editor, and I use "Tools | Generate JavaDoc".

When I click OK, it fails with the message "Error running 'Javadoc': Selected scope contain no Java classes".  I also tried the "Custom Scope" option with "Current File" choice, but same results.

Can someone help why can I not generate the JavaDoc for this file?

答: I think maybe JavaDocs needs compiled code with no errors, missing references, etc.  When I open Activity.java, It is not compilable.</p>


问:
How to configure SWD pins using registers in STM32?
Info: I create Blink using registers in STM32. This works, except that after the firmware the SWD connector stops working for me. The reason most likely is that the SWD is on the same port along with the LED. When configuring the port and the LED pin, I probably reset the SWD settings.

Code:

```<code>#include "main.h"

void SystemClock_Config(void);

int main(void)
{
  HAL_Init();
  SystemClock_Config();

  __HAL_RCC_GPIOA_CLK_ENABLE();
  // Set PA8 to OUTPUT mode
  GPIOA->MODER = 0x00010000;
  // Set PUSH-PULL mode
  GPIOA->OTYPER = 0x00000000;
  // Set pin speed
  GPIOA->OSPEEDR = 0x64010000;
  // Set not pull
  GPIOA->PUPDR = 0x64000000;
  // Set pin bit
  GPIOA->BSRR = 0x00000100;

  static int pin_state = 0;

  while (1)
  {
      // LED blink
      if(pin_state == 0) {
        // Bit set
        GPIOA->BSRR = 0x00000100;
        pin_state = 1;
      } else {
        // Bit clear
        GPIOA->BSRR = 0x01000000;
        pin_state = 0;
      }

      HAL_Delay(3000);

  }
}

void SystemClock_Config(void)
{
  RCC_OscInitTypeDef RCC_OscInitStruct = {0};
  RCC_ClkInitTypeDef RCC_ClkInitStruct = {0};

  /** Initializes the CPU, AHB and APB busses clocks
  */
  RCC_OscInitStruct.OscillatorType = RCC_OSCILLATORTYPE_HSI;
  RCC_OscInitStruct.HSIState = RCC_HSI_ON;
  RCC_OscInitStruct.HSICalibrationValue = RCC_HSICALIBRATION_DEFAULT;
  RCC_OscInitStruct.PLL.PLLState = RCC_PLL_NONE;
  if (HAL_RCC_OscConfig(&RCC_OscInitStruct) != HAL_OK)
  {
    Error_Handler();
  }
  /** Initializes the CPU, AHB and APB busses clocks
  */
  RCC_ClkInitStruct.ClockType = RCC_CLOCKTYPE_HCLK|RCC_CLOCKTYPE_SYSCLK
                              |RCC_CLOCKTYPE_PCLK1|RCC_CLOCKTYPE_PCLK2;
  RCC_ClkInitStruct.SYSCLKSource = RCC_SYSCLKSOURCE_HSI;
  RCC_ClkInitStruct.AHBCLKDivider = RCC_SYSCLK_DIV1;
  RCC_ClkInitStruct.APB1CLKDivider = RCC_HCLK_DIV1;
  RCC_ClkInitStruct.APB2CLKDivider = RCC_HCLK_DIV1;

  if (HAL_RCC_ClockConfig(&RCC_ClkInitStruct, FLASH_LATENCY_0) != HAL_OK)
  {
    Error_Handler();
  }
}

void Error_Handler(void) {}

#ifdef  USE_FULL_ASSERT
void assert_failed(char *file, uint32_t line) {}
#endif
</code>```

In the STM32F334K8Tx datasheet, I did not find much information about setting registers for SWD contacts (which mode, setting the clock, pull-up, and more).

Question: how can this be done? Or where can I find information?

答:
Do not be offended but it is an example of a programmers laziness. If you program this way you will never succeed using complex uCs likie STM32.

You should write some helper functions (YES I KNOW IT IS 20 LINES MORE).

```<code>#define GPIO_AFRL_AFRL0_Msk     (GPIO_AFRL_AFRL0_0 | GPIO_AFRL_AFRL0_1 | GPIO_AFRL_AFRL0_2 | GPIO_AFRL_AFRL0_3)

void GPIO_SetAF(GPIO_TypeDef *gpio, unsigned pin, unsigned AF)
{
    volatile uint32_t *AFreg = &gpio -> AFR[pin >= 8];

    if(AF <= 15)
    {
        if(pin > 7) pin -= 8;

        *AFreg &= ~(GPIO_AFRL_AFRL0_Msk << (4 * pin));
        *AFreg |= (AF << (4 * pin));
    }
}

#define BITMASK(nbits)   ((1 << nbits) - 1)

void GPIO_SetMode(GPIO_TypeDef *gpio, unsigned pin, unsigned mode)
{
    gpio -> MODER &= ~(BITMASK(2) << (2 * pin));
    gpio -> MODER |= ((mode & BITMASK(2)) << (2 * pin));
}

void GPIO_SetPUPDR(GPIO_TypeDef *gpio, unsigned pin, unsigned pupdr)
{
    gpio -> PUPDR &= ~(BITMASK(2) << (2 * pin));
    gpio -> PUPDR |= ((pupdr & BITMASK(2)) << (2 * pin));
}

void GPIO_SetOSPEEDR(GPIO_TypeDef *gpio, unsigned pin, unsigned speed)
{
    gpio -> OSPEEDR &= ~(BITMASK(2) << (2 * pin));
    gpio -> OSPEEDR |= ((speed & BITMASK(2)) << (2 * pin));
}

void GPIO_SetOTYPER(GPIO_TypeDef *gpio, unsigned pin, unsigned type)
{
    gpio -> OTYPER &= ~(BITMASK(1) << (1 * pin));
    gpio -> OTYPER|= ((type & BITMASK(1)) << (1 * pin));
}
</code>```

As you see a lots of work. Then set your pins, leaving the SWD pins unaffected.

In the STM32F334K8Tx datasheet, I did not find much information about
  setting registers for SWD contacts (which mode, setting the clock,
  pull-up, and more).

Question: how can this be done? Or where can I find information?

Everything is there. Just read it. For example for the MODER register.

Body:
Info: I create Blink using registers in STM32. This works, except that after the firmware the SWD connector stops working for me. The reason most likely is that the SWD is on the same port along with the LED. When configuring the port and the LED pin, I probably reset the SWD settings.

Code:

#include "main.h"

void SystemClock_Config(void);

int main(void)
{
  HAL_Init();
  SystemClock_Config();

  __HAL_RCC_GPIOA_CLK_ENABLE();
  // Set PA8 to OUTPUT mode
  GPIOA->MODER = 0x00010000;
  // Set PUSH-PULL mode
  GPIOA->OTYPER = 0x00000000;
  // Set pin speed
  GPIOA->OSPEEDR = 0x64010000;
  // Set not pull
  GPIOA->PUPDR = 0x64000000;
  // Set pin bit
  GPIOA->BSRR = 0x00000100;

  static int pin_state = 0;

  while (1)
  {
      // LED blink
      if(pin_state == 0) {
        // Bit set
        GPIOA->BSRR = 0x00000100;
        pin_state = 1;
      } else {
        // Bit clear
        GPIOA->BSRR = 0x01000000;
        pin_state = 0;
      }

      HAL_Delay(3000);

  }
}

void SystemClock_Config(void)
{
  RCC_OscInitTypeDef RCC_OscInitStruct = {0};
  RCC_ClkInitTypeDef RCC_ClkInitStruct = {0};

  /** Initializes the CPU, AHB and APB busses clocks
  */
  RCC_OscInitStruct.OscillatorType = RCC_OSCILLATORTYPE_HSI;
  RCC_OscInitStruct.HSIState = RCC_HSI_ON;
  RCC_OscInitStruct.HSICalibrationValue = RCC_HSICALIBRATION_DEFAULT;
  RCC_OscInitStruct.PLL.PLLState = RCC_PLL_NONE;
  if (HAL_RCC_OscConfig(&RCC_OscInitStruct) != HAL_OK)
  {
    Error_Handler();
  }
  /** Initializes the CPU, AHB and APB busses clocks
  */
  RCC_ClkInitStruct.ClockType = RCC_CLOCKTYPE_HCLK|RCC_CLOCKTYPE_SYSCLK
                              |RCC_CLOCKTYPE_PCLK1|RCC_CLOCKTYPE_PCLK2;
  RCC_ClkInitStruct.SYSCLKSource = RCC_SYSCLKSOURCE_HSI;
  RCC_ClkInitStruct.AHBCLKDivider = RCC_SYSCLK_DIV1;
  RCC_ClkInitStruct.APB1CLKDivider = RCC_HCLK_DIV1;
  RCC_ClkInitStruct.APB2CLKDivider = RCC_HCLK_DIV1;

  if (HAL_RCC_ClockConfig(&RCC_ClkInitStruct, FLASH_LATENCY_0) != HAL_OK)
  {
    Error_Handler();
  }
}

void Error_Handler(void) {}

#ifdef  USE_FULL_ASSERT
void assert_failed(char *file, uint32_t line) {}
#endif

In the STM32F334K8Tx datasheet, I did not find much information about setting registers for SWD contacts (which mode, setting the clock, pull-up, and more).

Question: how can this be done? Or where can I find information?

Body:
Do not be offended but it is an example of a programmers laziness. If you program this way you will never succeed using complex uCs likie STM32.

You should write some helper functions (YES I KNOW IT IS 20 LINES MORE).

#define GPIO_AFRL_AFRL0_Msk     (GPIO_AFRL_AFRL0_0 | GPIO_AFRL_AFRL0_1 | GPIO_AFRL_AFRL0_2 | GPIO_AFRL_AFRL0_3)

void GPIO_SetAF(GPIO_TypeDef *gpio, unsigned pin, unsigned AF)
{
    volatile uint32_t *AFreg = &gpio -> AFR[pin >= 8];

    if(AF <= 15)
    {
        if(pin > 7) pin -= 8;

        *AFreg &= ~(GPIO_AFRL_AFRL0_Msk << (4 * pin));
        *AFreg |= (AF << (4 * pin));
    }
}

#define BITMASK(nbits)   ((1 << nbits) - 1)

void GPIO_SetMode(GPIO_TypeDef *gpio, unsigned pin, unsigned mode)
{
    gpio -> MODER &= ~(BITMASK(2) << (2 * pin));
    gpio -> MODER |= ((mode & BITMASK(2)) << (2 * pin));
}

void GPIO_SetPUPDR(GPIO_TypeDef *gpio, unsigned pin, unsigned pupdr)
{
    gpio -> PUPDR &= ~(BITMASK(2) << (2 * pin));
    gpio -> PUPDR |= ((pupdr & BITMASK(2)) << (2 * pin));
}

void GPIO_SetOSPEEDR(GPIO_TypeDef *gpio, unsigned pin, unsigned speed)
{
    gpio -> OSPEEDR &= ~(BITMASK(2) << (2 * pin));
    gpio -> OSPEEDR |= ((speed & BITMASK(2)) << (2 * pin));
}

void GPIO_SetOTYPER(GPIO_TypeDef *gpio, unsigned pin, unsigned type)
{
    gpio -> OTYPER &= ~(BITMASK(1) << (1 * pin));
    gpio -> OTYPER|= ((type & BITMASK(1)) << (1 * pin));
}

As you see a lots of work. Then set your pins, leaving the SWD pins unaffected.

In the STM32F334K8Tx datasheet, I did not find much information about
  setting registers for SWD contacts (which mode, setting the clock,
  pull-up, and more).

Question: how can this be done? Or where can I find information?

Everything is there. Just read it. For example for the MODER register.


问:
How to dismiss pushed ViewController after logout?
I spent so many hours with this issue, so I can't find any solution.

I open SettingsViewController from my TopBar on tap in avatar with pushViewController method (here is problem) and from menu (not modal).

I want to dismiss this pushed ViewController when I tap on logout button.

Below is a function that I use in some VC's and works very well.

```<code>func goToSettingsView() {
    let vc = SettingsViewController(nibName: "SettingsViewController", bundle: nil)
    vc.modalPresentationStyle = .fullScreen
    self.navigationController!.pushViewController(vc, animated: true)
    for constraint in vc.view.constraints {
        if constraint.identifier == "alignTopHeader" {
           constraint.constant = 0
        }
    }
}
</code>```

When I clicked logout button isn't working and when I login from (LoginViewController) this SettingsViewController is still showing, but I would go to Main Screen without any modals.

I did some ideas but not good working yet.

First idea was:

Below is my logout IBaction in my SettingsViewController:

```<code>- (void)logout {
    [self dismissViewControllerAnimated:YES completion:nil];
    [[UserManager shared] logoutUserWithSuccessBlock:^{
        [self presentLoginViewController];
    }];
}
</code>```

LoginViewController is dismiss, but self is targeted for SettingsViewController?

Second idea:

I added a function declared in AppDelegate "backToRoot" in LoginViewController and call from viewWillDisappear.

```<code>[appDelegate backToRoot];
</code>```

function in AppDelegate.m file

```<code>-(void)backToRoot {
   [self.navigationController dismissViewControllerAnimated:YES completion:nil];
   PresentationsPickerViewController *mainvc = [[PresentationsPickerViewController alloc] init];
   [self setCenterPanelWithViewController:mainvc];
}
</code>```

But still not working with modal, it's work fine when SettingsViewController isn't modal.

Do you have any ideas how to hide/dismiss pushed SettingsViewController in logout action?

答:
It's really simple. If you want to dismiss a pushed UIViewController in a navigational-stack just pop it out, like this:

func logout() {
    navigationController?.popViewController(animated: true)
}
```

Body:
I spent so many hours with this issue, so I can't find any solution.

I open SettingsViewController from my TopBar on tap in avatar with pushViewController method (here is problem) and from menu (not modal).

I want to dismiss this pushed ViewController when I tap on logout button.

Below is a function that I use in some VC's and works very well.

func goToSettingsView() {
    let vc = SettingsViewController(nibName: "SettingsViewController", bundle: nil)
    vc.modalPresentationStyle = .fullScreen
    self.navigationController!.pushViewController(vc, animated: true)
    for constraint in vc.view.constraints {
        if constraint.identifier == "alignTopHeader" {
           constraint.constant = 0
        }
    }
}

When I clicked logout button isn't working and when I login from (LoginViewController) this SettingsViewController is still showing, but I would go to Main Screen without any modals.

I did some ideas but not good working yet.

First idea was:

Below is my logout IBaction in my SettingsViewController:

- (void)logout {
    [self dismissViewControllerAnimated:YES completion:nil];
    [[UserManager shared] logoutUserWithSuccessBlock:^{
        [self presentLoginViewController];
    }];
}

LoginViewController is dismiss, but self is targeted for SettingsViewController?

Second idea:

I added a function declared in AppDelegate "backToRoot" in LoginViewController and call from viewWillDisappear.

[appDelegate backToRoot];

function in AppDelegate.m file

-(void)backToRoot {
   [self.navigationController dismissViewControllerAnimated:YES completion:nil];
   PresentationsPickerViewController *mainvc = [[PresentationsPickerViewController alloc] init];
   [self setCenterPanelWithViewController:mainvc];
}

But still not working with modal, it's work fine when SettingsViewController isn't modal.

Do you have any ideas how to hide/dismiss pushed SettingsViewController in logout action?


问:
C# Call win api in external process
I'm trying to call a win api function in an external process.

Basic rundown:

Get base address of user32.dll from putty.exe (or any 32 bit proc)

Get base address of MessageBoxA from user32.dll

Populate MessageBoxA struct with data, and allocate data locally.

Allocate struct in putty

Write struct to putty.

CreateRemoteThread to execute messageboxA.

All WinAPI calls succeed, and no error is thrown, nor does the putty process crash. Simply does not show messagebox.

Any help is greatly appreciated.

Thanks!

```<code>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;

namespace remote_api_call
{
    class Program
    {
        #region API
        [DllImport("kernel32.dll", CharSet = CharSet.Auto)]
        public static extern IntPtr GetModuleHandle(string lpModuleName);

        [DllImport("kernel32", CharSet = CharSet.Ansi, ExactSpelling = true, SetLastError = true)]
        static extern IntPtr GetProcAddress(IntPtr hModule, string procName);

        [DllImport("kernel32.dll", SetLastError = true, ExactSpelling = true)]
        static extern IntPtr VirtualAllocEx(IntPtr hProcess, IntPtr lpAddress,
            uint dwSize, uint flAllocationType, uint flProtect);

        [DllImport("kernel32.dll", SetLastError = true)]
        static extern bool WriteProcessMemory(IntPtr hProcess, IntPtr lpBaseAddress, byte[] lpBuffer, uint nSize, out UIntPtr lpNumberOfBytesWritten);

        [DllImport("kernel32.dll")]
        static extern IntPtr CreateRemoteThread(IntPtr hProcess,
            IntPtr lpThreadAttributes, uint dwStackSize, IntPtr lpStartAddress, IntPtr lpParameter, uint dwCreationFlags, IntPtr lpThreadId);
        #endregion
        [DllImport("kernel32.dll", SetLastError = true)]
        static extern bool WriteProcessMemory(IntPtr hProcess, IntPtr lpBaseAddress, IntPtr lpBuffer, uint nSize, out UIntPtr lpNumberOfBytesWritten);
        // privileges
        const int PROCESS_CREATE_THREAD = 0x0002;
        const int PROCESS_QUERY_INFORMATION = 0x0400;
        const int PROCESS_VM_OPERATION = 0x0008;
        const int PROCESS_VM_WRITE = 0x0020;
        const int PROCESS_VM_READ = 0x0010;

        // used for memory allocation
        const uint MEM_COMMIT = 0x00001000;
        const uint MEM_RESERVE = 0x00002000;
        const uint PAGE_READWRITE = 4;

        [StructLayout(LayoutKind.Sequential)]
        struct MessageBoxA
        {
            public IntPtr HWND;
            [MarshalAs(UnmanagedType.LPStr)]
            public string lpText;
            [MarshalAs(UnmanagedType.LPStr)]
            public string lpCaption;
            [MarshalAs(UnmanagedType.U4)]
            public uint type;
        }

        [DllImport("kernel32.dll")]
        public static extern IntPtr OpenProcess(int dwDesiredAccess, bool bInheritHandle, int dwProcessId);
        static void Main(string[] args)
        {
            Process putty = Process.GetProcessesByName("putty")[0];

            IntPtr user32Calc = ModuleAddr(calc, "user32.dll");
            Console.WriteLine("User32.dll addr from putty.exe: " + user32Calc.ToInt32());

            IntPtr MessageBoxA = GetProcAddress(user32Calc, "MessageBoxA");
            Console.WriteLine("MessageBoxA addr from putty.exe: " + MessageBoxA.ToInt32());

            IntPtr procHandle = OpenProcess(PROCESS_CREATE_THREAD | PROCESS_QUERY_INFORMATION | PROCESS_VM_OPERATION | PROCESS_VM_WRITE | PROCESS_VM_READ, false, putty.Id);

            MessageBoxA rtp = new MessageBoxA();
            rtp.HWND = IntPtr.Zero;
            rtp.lpText = "Hey mate!";
            rtp.lpCaption = "Caption";
            rtp.type = 16;
            UIntPtr bytesWritten;

            // allocate mem locally
            IntPtr iptrtoparams = Marshal.AllocHGlobal(Marshal.SizeOf(rtp));

            // copy data to structure
            Marshal.StructureToPtr(rtp, iptrtoparams, false);

            // allocate mem in other process for params
            IntPtr allocMemAddress = VirtualAllocEx(procHandle, IntPtr.Zero, (uint)Marshal.SizeOf(rtp), MEM_COMMIT | MEM_RESERVE, PAGE_READWRITE);
            if (allocMemAddress != IntPtr.Zero)
                Console.WriteLine("allocmem success");
            if (WriteProcessMemory(procHandle, allocMemAddress, iptrtoparams, (uint)Marshal.SizeOf(rtp), out bytesWritten))
                Console.WriteLine("wpm success");
            //   Marshal.FreeHGlobal(iptrtoparams);
            if (CreateRemoteThread(procHandle, IntPtr.Zero, 0, MessageBoxA, allocMemAddress, 0, IntPtr.Zero) != IntPtr.Zero)
                Console.WriteLine("CreateRemoteThread success");

            Console.Read();
        }

        private static IntPtr ModuleAddr(Process p, string moduleName)
        {
            foreach (ProcessModule pMod in p.Modules)
            {
                if (pMod.ModuleName.ToLower() == moduleName.ToLower())
                    return pMod.BaseAddress;
            }
            return IntPtr.Zero;
        }

    }
}
</code>```

答:
It is not possible to call an external function using CreateRemoteThread() with multiple arguments.  It is possible with 1 argument, but not more than 1.

All the tutorials that say you can do this by passing a structure of arguments are not correct.

Nothing that CreateRemoteThread() does will lead to the arguments being pushed onto the stack and into the proper registers for the function to access.  Only 1 argument will be passed correctly, the things you pass in struct will not be accessed.

You can easily see this by putting a read breakpoint on the second argument in your struct, it will never break.

Learn more in my other answer Passing multiple parameters using CreateRemoteThread in C#

Title: C# Call win api in external process

Body:
I'm trying to call a win api function in an external process.

Basic rundown:

Get base address of user32.dll from putty.exe (or any 32 bit proc)

Get base address of MessageBoxA from user32.dll

Populate MessageBoxA struct with data, and allocate data locally.

Allocate struct in putty

Write struct to putty.

CreateRemoteThread to execute messageboxA.

All WinAPI calls succeed, and no error is thrown, nor does the putty process crash. Simply does not show messagebox.

Any help is greatly appreciated.

Thanks!

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;

namespace remote_api_call
{
    class Program
    {
        #region API
        [DllImport("kernel32.dll", CharSet = CharSet.Auto)]
        public static extern IntPtr GetModuleHandle(string lpModuleName);

        [DllImport("kernel32", CharSet = CharSet.Ansi, ExactSpelling = true, SetLastError = true)]
        static extern IntPtr GetProcAddress(IntPtr hModule, string procName);

        [DllImport("kernel32.dll", SetLastError = true, ExactSpelling = true)]
        static extern IntPtr VirtualAllocEx(IntPtr hProcess, IntPtr lpAddress,
            uint dwSize, uint flAllocationType, uint flProtect);

        [DllImport("kernel32.dll", SetLastError = true)]
        static extern bool WriteProcessMemory(IntPtr hProcess, IntPtr lpBaseAddress, byte[] lpBuffer, uint nSize, out UIntPtr lpNumberOfBytesWritten);

        [DllImport("kernel32.dll")]
        static extern IntPtr CreateRemoteThread(IntPtr hProcess,
            IntPtr lpThreadAttributes, uint dwStackSize, IntPtr lpStartAddress, IntPtr lpParameter, uint dwCreationFlags, IntPtr lpThreadId);
        #endregion
        [DllImport("kernel32.dll", SetLastError = true)]
        static extern bool WriteProcessMemory(IntPtr hProcess, IntPtr lpBaseAddress, IntPtr lpBuffer, uint nSize, out UIntPtr lpNumberOfBytesWritten);
        // privileges
        const int PROCESS_CREATE_THREAD = 0x0002;
        const int PROCESS_QUERY_INFORMATION = 0x0400;
        const int PROCESS_VM_OPERATION = 0x0008;
        const int PROCESS_VM_WRITE = 0x0020;
        const int PROCESS_VM_READ = 0x0010;

        // used for memory allocation
        const uint MEM_COMMIT = 0x00001000;
        const uint MEM_RESERVE = 0x00002000;
        const uint PAGE_READWRITE = 4;

        [StructLayout(LayoutKind.Sequential)]
        struct MessageBoxA
        {
            public IntPtr HWND;
            [MarshalAs(UnmanagedType.LPStr)]
            public string lpText;
            [MarshalAs(UnmanagedType.LPStr)]
            public string lpCaption;
            [MarshalAs(UnmanagedType.U4)]
            public uint type;
        }

        [DllImport("kernel32.dll")]
        public static extern IntPtr OpenProcess(int dwDesiredAccess, bool bInheritHandle, int dwProcessId);
        static void Main(string[] args)
        {
            Process putty = Process.GetProcessesByName("putty")[0];

            IntPtr user32Calc = ModuleAddr(calc, "user32.dll");
            Console.WriteLine("User32.dll addr from putty.exe: " + user32Calc.ToInt32());

            IntPtr MessageBoxA = GetProcAddress(user32Calc, "MessageBoxA");
            Console.WriteLine("MessageBoxA addr from putty.exe: " + MessageBoxA.ToInt32());

            IntPtr procHandle = OpenProcess(PROCESS_CREATE_THREAD | PROCESS_QUERY_INFORMATION | PROCESS_VM_OPERATION | PROCESS_VM_WRITE | PROCESS_VM_READ, false, putty.Id);

            MessageBoxA rtp = new MessageBoxA();
            rtp.HWND = IntPtr.Zero;
            rtp.lpText = "Hey mate!";
            rtp.lpCaption = "Caption";
            rtp.type = 16;
            UIntPtr bytesWritten;

            // allocate mem locally
            IntPtr iptrtoparams = Marshal.AllocHGlobal(Marshal.SizeOf(rtp));

            // copy data to structure
            Marshal.StructureToPtr(rtp, iptrtoparams, false);

            // allocate mem in other process for params
            IntPtr allocMemAddress = VirtualAllocEx(procHandle, IntPtr.Zero, (uint)Marshal.SizeOf(rtp), MEM_COMMIT | MEM_RESERVE, PAGE_READWRITE);
            if (allocMemAddress != IntPtr.Zero)
                Console.WriteLine("allocmem success");
            if (WriteProcessMemory(procHandle, allocMemAddress, iptrtoparams, (uint)Marshal.SizeOf(rtp), out bytesWritten))
                Console.WriteLine("wpm success");
            //   Marshal.FreeHGlobal(iptrtoparams);
            if (CreateRemoteThread(procHandle, IntPtr.Zero, 0, MessageBoxA, allocMemAddress, 0, IntPtr.Zero) != IntPtr.Zero)
                Console.WriteLine("CreateRemoteThread success");

            Console.Read();
        }

        private static IntPtr ModuleAddr(Process p, string moduleName)
        {
            foreach (ProcessModule pMod in p.Modules)
            {
                if (pMod.ModuleName.ToLower() == moduleName.ToLower())
                    return pMod.BaseAddress;
            }
            return IntPtr.Zero;
        }

    }
}


问:
Function to calculate Euclidean distance in c
I wrote function which calculates Euclidean distance. Return value of function  doesn't fit in required accuracy range. I made all the variables double which is the most accurate type and used sqrt() function which is for double not sqrtf and still the returned value is not proper. Here is my function:

```<code>
float distance(const struct color_t* p1, const struct color_t* p2, int* err_code) {
        if (p1 == NULL || p2 == NULL) {
            return -1;
        }
     double r1 = 1, r2 = 1, r3 = 1, r4=1;
    double p11 = (double)p1->r - (double)p2->r;
    double p22 = (double)p1->g - (double)p2->g;
    double p33 = (double)p1->b - (double)p2->b;
    double p44 = (double)p1->a - (double)p2->a;
    for (int exponent = 2; exponent > 0; exponent--)
    {
        r1 = r1 * p11;
        r2 = r2 * p22;
        r3 = r3 * p33;
        r4 = r4 * p44;
    }
    double b = r1 + r2 + r3 + r4;
    double a = sqrt(b);
    if (a < 0) {
        return -1;
    }
    return a;
}
</code>```

Prompt is: Value 367.106262 returned by function distance() doesn't fit in required accuracy range.

and test:

```<code>struct color_t c1 = {.r = 14, .g = 253, .b = 23, .a = 76}, c2 = {.r = 253, .g = 14, .b = 148, .a = 6};

            printf("#####START#####");
            float dist = distance(&c1, &c2, NULL);
            printf("#####END#####\n");

            test_error(360.4206425334894 > dist && 360.3206425334894 < dist, "Value %f returned by function distance() doesn't fit in required accuracy range", dist);
</code>```

答:
Drop the transparent term

@abelenky

OP is looking for the "distance" in color.

int math fine for all but last step

Largest value for dist2 is 255*255*3 = 195,075, well within float exactly encodable range.

```<code>float distance(const struct color_t *p1, const struct color_t *p2, int *err_code /* unused */ ) {
  if (p1 == NULL || p2 == NULL) {
    return -1;
  }
  int p11 = p1->r - p2->r;
  int p22 = p1->g - p2->g;
  int p33 = p1->b - p2->b;
  int dist2 = p11*p11 + p22*p22 + p33*p33;
  return sqrtf(dist2);
}
</code>```

Body:
I wrote function which calculates Euclidean distance. Return value of function  doesn't fit in required accuracy range. I made all the variables double which is the most accurate type and used sqrt() function which is for double not sqrtf and still the returned value is not proper. Here is my function:

float distance(const struct color_t* p1, const struct color_t* p2, int* err_code) {
        if (p1 == NULL || p2 == NULL) {
            return -1;
        }
     double r1 = 1, r2 = 1, r3 = 1, r4=1;
    double p11 = (double)p1->r - (double)p2->r;
    double p22 = (double)p1->g - (double)p2->g;
    double p33 = (double)p1->b - (double)p2->b;
    double p44 = (double)p1->a - (double)p2->a;
    for (int exponent = 2; exponent > 0; exponent--)
    {
        r1 = r1 * p11;
        r2 = r2 * p22;
        r3 = r3 * p33;
        r4 = r4 * p44;
    }
    double b = r1 + r2 + r3 + r4;
    double a = sqrt(b);
    if (a < 0) {
        return -1;
    }
    return a;
}

Prompt is: Value 367.106262 returned by function distance() doesn't fit in required accuracy range.

and test:

struct color_t c1 = {.r = 14, .g = 253, .b = 23, .a = 76}, c2 = {.r = 253, .g = 14, .b = 148, .a = 6};

            printf("#####START#####");
            float dist = distance(&c1, &c2, NULL);
            printf("#####END#####\n");

            test_error(360.4206425334894 > dist && 360.3206425334894 < dist, "Value %f returned by function distance() doesn't fit in required accuracy range", dist);

Body:
Drop the transparent term

@abelenky

OP is looking for the "distance" in color.

int math fine for all but last step

Largest value for dist2 is 255*255*3 = 195,075, well within float exactly encodable range.

float distance(const struct color_t *p1, const struct color_t *p2, int *err_code /* unused */ ) {
  if (p1 == NULL || p2 == NULL) {
    return -1;
  }
  int p11 = p1->r - p2->r;
  int p22 = p1->g - p2->g;
  int p33 = p1->b - p2->b;
  int dist2 = p11*p11 + p22*p22 + p33*p33;
  return sqrtf(dist2);
}


问:
Does Android Jetpack Compose support Toolbar widget?
I'd like to use Toolbar with Jetpack Compose. Does it have such a Composable component?</p>

答:
You can use the TopAppBar.

The best way is to use it with the Scaffold. Something like:

```<code>Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "TopAppBar")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.Menu,"")
                }
            },
            backgroundColor = Color.Blue,
            contentColor = Color.White,
            elevation = 12.dp
        )
    }, content = {

    })
</code>```

Body:
You can use the TopAppBar.

The best way is to use it with the Scaffold. Something like:

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "TopAppBar")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.Menu,"")
                }
            },
            backgroundColor = Color.Blue,
            contentColor = Color.White,
            elevation = 12.dp
        )
    }, content = {

    })


问:
Import JS file inside node_modules in Angular
I have an angular app, to this I am trying to add an npm package called svgedit. It gets installed. But when I try to reference a java-script file it says

net::ERR_ABORTED 404 (Not Found)

This is how I am trying to reference it in my index.html in the head section,

```<code><script type="module" src="node_modules/svgedit/svgedit-config-es.js"></script>
</code>```

I can access this file from within vs code by clicking "ctrl + left mouse". It opens the file properly meaning the reference is proper. But when it runs it gives the above mentioned error in the console. I have also tried switching the type attribute to "text/javascript".

Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.

答: Is your html page in the root directory of your project? if not make sure to navigate to the file correctly. if the html page in the root directory of your project then there must be a typo in the src</p>

Body:
I have an angular app, to this I am trying to add an npm package called svgedit. It gets installed. But when I try to reference a java-script file it says

net::ERR_ABORTED 404 (Not Found)

This is how I am trying to reference it in my index.html in the head section,

I can access this file from within vs code by clicking "ctrl + left mouse". It opens the file properly meaning the reference is proper. But when it runs it gives the above mentioned error in the console. I have also tried switching the type attribute to "text/javascript".

Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.


问:
Using AND inside abs(number) in Python
Trying to understand how AND statement works inside abs(numbers) function.

Calling print(abs(21-22 and 9-4 and 11-8))

This would always give me whatever the last expression is. In this case it calculates 11-8, so it prints 3.
Why other expressions are not in the output and no error as well?

答:
and is a logical operator, it will return True if both the operands of the operator are true.
I believe the comma does what you expected to do in this case:

```<code>print(abs(21-22),abs(9-4),abs(11-8))
</code>```

Title: Using AND inside abs(number) in Python

Body:
and is a logical operator, it will return True if both the operands of the operator are true.
I believe the comma does what you expected to do in this case:

print(abs(21-22),abs(9-4),abs(11-8))