Juli 27, 2021

Mit Node.js gegen den Rest der Welt

Heute: easy SFTP Upload

Weiterlesen
Mai 3, 2021

Bruchailromantik

Bruchrechnen in JavaScript

Weiterlesen
April 14, 2021

Mal schnell ein paar Zahlen

Mathehausaufgaben aus dem Zufallsgenerator

Weiterlesen
April 11, 2021

Ist das Kunst oder kann das weg?

Shadertoy - shading online

Weiterlesen
Cover Image

Mit Node.js gegen den Rest der Welt

Heute: easy SFTP Upload

Juli 27, 2021 - Lesezeit: 14 Minuten

Immer mal wieder hat man die Anforderung schnell mal ein paar Dateien von einem Rechner auf einen anderen zu laden. Besonders wenn dann noch das Internet beteiligt ist, ist man bestrebt das Ganze auch noch sicher ablaufen zu lassen. Damit entfällt die alte aber zuverlässige Methode des FTP. Aber dafür hat man ja SFTP. Nodejs macht es einem dann sogar recht einfach, da es bereits ein paar tolle Pakete dafür gibt. Eins davon hab ich dann heute mal eingesetzt und wieder lässt sich ein Anforderung in wenigen Zeilen elegant lösen. 

Installation

npm i sftp-upload

Danach eigentlich nur noch passend konfigurieren und fertig:

const SftpUpload = require('sftp-upload');

async function uploadFiles() {
  return new Promise((resolve=> {
    process.stdout.write('\r');
    new SftpUpload({
      host: '<HOST HERE>',
      username: '<USER HERE>',
      password: "<PASS HERE>",
      path: './',
      remoteDir: '/<DIR HERE>',
      excludedFolders: ['node_modules'],
      exclude: ['package-lock.json''package.json'],
      dryRun: false
    })
      .on('error', (err=>  {throw err;} )
      .on('uploading',  (progress=>  process.stdout.write('\r' + progress.percent + '% completed'))
      .on('completed', () => {
        process.stdout.write('\r');
        resolve();
      })
      .upload();
  });
}

(async () => {
  await uploadFiles();
  console.log("DONE");
})();

Lässt sich super für Kontinuierliche Integration einsetzen und man könnte das ganze jetzt mit dem Komprimieren passend kombinieren. Jetzt muss das Ganze nur noch zyklisch ausgeführt werden...


Cover Image

Bruchailromantik

Bruchrechnen in JavaScript

Mai 3, 2021 - Lesezeit: 41 Minuten

So, hier jetzt also ein JavaScript für Bruchrechenaufgaben. Das ist diesmal etwas größer, um der Anzeige von Bruchzahlen auch gerecht zu werden und nicht irgendeine komische Schreibweise verwenden zu müssen.

//(
var myCalcer = (NumberToUsetargetElement=> {
  // the brain -> calcing stuff
  function Fraction(zahl) {
    let numerator = 0;
    let denominator = 0;
    for (i = 1truei *= 10) {
      if ((zahl * i) == Math.floor(zahl * i)) {
        numerator = (zahl * i);
        denominator = i;
        break;
      }
    }
    return ([numeratordenominator]);
  }

  function calc_ggt(ab) {
    let h = (a > b) ? b : a;
    for (i = hi > 1i--) {
      if ((a % i) == 0 && (b % i) == 0) {
        return i;
      }
    }
    return 1;
  }
  // the eye -> formatting output
  function writeFraction(zaehlernenner) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('class''frac');
    outSpan.setAttribute('style''padding-right:5px;');
    outSpan.innerHTML = `<sup>${zaehler}</sup><span>/</span><sub>${nenner}</sub>`;
    targetElement.appendChild(outSpan);
  }

  function writeOperatorOrLine(opToWrite) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('style''vertical-align:14px;padding-right:5px;');
    outSpan.innerText = opToWrite;
    targetElement.appendChild(outSpan);
  }

  function addcss() {
    let styleHelper = document.createElement("style");
    styleHelper.id = 'styleHelper';
    styleHelper.innerHTML = `span.frac {
          display: inline-block;
          text-align: center;
        }

        span.frac>sup {
          display: block;
          border-bottom: 1px solid;
          font: inherit;
        }

        span.frac>span {
          display: none;
        }

        span.frac>sub {
          display: block;
          font: inherit;
        }`;
    targetElement.appendChild(styleHelper);
  }
  // the hand -> doing things
  let bruch = Fraction(NumberToUse);
  let ggt = calc_ggt(bruch[0], bruch[1]);
  addcss();
  writeOperatorOrLine(NumberToUse);
  writeOperatorOrLine("=");
  writeFraction(bruch[0], bruch[1]);
  writeOperatorOrLine(":");
  writeOperatorOrLine(ggt);
  writeOperatorOrLine("=");
  writeFraction(bruch[0] / ggtbruch[1] / ggt);
};
//)(0.45);
var inputElement = document.createElement("INPUT");
var buttonElement = document.createElement("BUTTON");
var targetOutElement = document.createElement("DIV");
buttonElement.innerHTML = "Calc";
buttonElement.onclick = () => {
  /*
  for(var mainCounter = 1; mainCounter < 100; mainCounter++ ) {
    myCalcer(
      mainCounter /
      Math.pow(10, ("" + mainCounter).length),
      targetElement
    );
    targetElement.appendChild(document.createElement("BR"));
    targetElement.appendChild(document.createElement("BR"));
  }
  */
  targetOutElement.innerHTML = "";
  let numberToUse = parseFloat(inputElement.value.replace(',''.'));
  myCalcer(numberToUsetargetOutElement);
};
targetOutElement.style.backgroundColor = "white";
targetOutElement.style.border = '1px solid black';
targetOutElement.style.borderRadius = '4px';
targetOutElement.style.padding = '10px';
targetOutElement.style.margin = 'auto';
targetOutElement.style.width = '200px';
targetOutElement.style.textAlign = 'center';
document.body.appendChild(inputElement);
document.body.appendChild(buttonElement);
document.body.appendChild(targetOutElement);

Hierbei teilt sich die Funktion myCalcer in 3 Teile. Der erste Teil sind die Berechnungsfunktionen. Der zweite Teil regelt die Ausgabe und der dritte Teil macht die Rechnung. Am Ende kommt noch ein bisschen Styling dazu, damit das auch was hermacht. Kann man direkt in der Konsole benutzen oder hier:

EOF


Cover Image

Mal schnell ein paar Zahlen

Mathehausaufgaben aus dem Zufallsgenerator

April 14, 2021 - Lesezeit: ~1 Minute

Und wieder hilft mir ein kleines Script in Übung zu bleiben.

for(let i =0; i<20; i++){
  var op     = parseInt((Math.random(i)*4).toString()); 
  var x        = parseInt((Math.random(i)*100).toString());
  var y        = parseInt((Math.random(i)*100).toString());
 
  if(op===0)    console.log(x + ' + '+y + ' = ' + (x+y));
  if(op===1)    console.log(x + ' - '+y + ' = ' + (x-y));
  if(op===2)    console.log(x + ' * '+y + ' = ' + (x*y));
  if(op===3)    console.log(x + ' / '+y + ' = ' + (x/y));
}

Aber man sollte natürlich nicht direkt das Ergebnis prüfen. Brüche kann der Gernerator auch nocht nicht. Den gibt es dann beim nächsten Mal.


Cover Image

Ist das Kunst oder kann das weg?

Shadertoy - shading online

April 11, 2021 - Lesezeit: 3 Minuten

Shader sind Bausteine einer Grafikkarte, mit der der Pixel, der auf den Bildschirm angezeigt werden soll, nachbearbeitet werden kann. Jeder Pixel wird hierbei durch eine Pipeline geschoben und kann dabei sozusagen nochmal nachgearbeitet werden. Dieses Post Processing kann Wasser realistischer aussehen lassen oder Lava zusätzlich zum glühen bringen. Diese Shader werden mithilfe einer eigenen Programmiersprache implementiert. Dazu schreibt man einen Shader und lädt diesen dann in die Grafikkarte. Meistens nutzt man dafür eine Api wie OpenGL oder DirectX.

blub.png

Nun kann man sich natürlich die Erzeugung eines Bildes zum Anzeigen und Nachbearbeiten auch sparen und einfach direkt die Pixel manipulieren und damit dann eine Bildschirmausgabe erzeugen. Da der Shadercode immer auf jeden einzelnen Pixel auf dem Bildschrim angewendet werden muss (das sind bei einer HD-Auflösung 3000 Pixel pro Frame), muss die Implementierung effizient sein. In der Demoszene hat sich eine ganze Disziplin daraus entwickelt. Da das Manipulieren von Pixeln am einfachsten ist wenn man es mathematisch beschreibt, kommt man bei der Programmierung um Mathe nicht drum herum. Aber dafür wird man mit hinreißenden Bildern und Effekten belohnt.

penrose.png

Auch ein Browser kann mithilfe von WebGL entsprechende Inhalte repräsentieren. Damit kann man die Shader direkt in eine Website laden und anzeigen. Entsprechende Hardware vorrausgesetzt. Auf Shadertoy wird genau das möglich. Man kann die fertigen Shader sogar in die eigene Homepage einbetten. Auf dieser Website kann man sich auch den Quelltext jedes Shaders ansehen und gegebenenfalls sogar noch etwas lernen. Mathe hat noch nie soviel Spass gemacht.

IO.png

Wenn man mal sehen will, was mit aktuellen Grafikarten machbar ist und sich verzaubern lassen möchte, sollte man mal einen Blick riskieren. Also ich werde jetzt nochmal meine Mathekenntnisse auffrischen und auch ein bisschen zaubern.