Manuel Jasch

Alles rund um Internet & Technik

OnePager mit Bootstrap

Mai 152015

Meine Mutter hatte den Wunsch einer eigenen Website. Für dieses neue Projekt wollte ich das Framework Bootstrap verwenden. Dieses bietet zahlreiche styling-rules und ist von Haus für kleinere Displays optimiert. Die Einarbeitungszeit ist wirklich sehr gering falls man sich bereits mit HTML und CSS auskennt. Gute Tutorials bietet W3Schools.

Für eine geschmeidige Navigation implementierte ich das Scrolling-Nav Template. Im Standarddesign sieht Bootstrap etwas schlicht aus - noch schnell die Farbe geändert mit Paintstrap oder Lavishbootstrap und fertig ist die Seite.

Zur Seite: lindmeier-jasch.de. Die Seite handelt von ihren Publikationen über Friedrich List.

  • Permalink
  • Kommentare

Mein 3D Drucker - Mechanischer Aufbau und erste Druckversuche

Mai 022015

Probleme..

Nun ist es endlich soweit und meine ersten Druckversuche konnten gestartet werden. Bis dahin war es aber noch ein langer weg. Probleme die ich bis jetzt hatte waren:

  • Y-Achse verliert immer mal wieder Schritte
  • Motor für die Z-Achse war komplett blockiert
  • Pulleys haben sich nach und nach durchgedreht.

Lösungen..

Leider hatte ich mein Design so gut/schlecht durchdacht sodass alles durch Abdeckungen versteckt war. Dadurch hatte ich aber alle Möglichkeiten der Wartung zunichte gemacht. Mein erster Schritt nach diesem Schreck war die komplette Demontage des Druckers. Danach wurden einige Dinge verändert:

  • es wurden alle Abdeckungen entfernt,
  • die Kabel für den Extruder nach außen verlegt,
  • Display sowie der Endschalter an der Z-Achse oben wurde vorerst entfernt,
  • durch zu hohe Reibung der Gewindestange oben an dem Deckel wurden Luftlöcher angebracht,
  • Lineareinheiten wurden im feinen Maschinenöl getränkt,
  • der Z-Achsen Antrieb wurde durch ein stärkeren Motor ersetzt,
  • die Kupplung an der Gewindestange wurde durch eine flexible Kupplung ersetzt,
  • Motorstrom wurde etwas erhöht.

Nach dieser Tour konnten sich alle Achsen einwandfrei bewegen. Natürlich wurden die Grenzen der Achsbeschleunigung noch nicht ausgetestet aber im Vordergrund steht erst einmal die Möglichkeit zu Drucken.

Druckvorbereitung und Drucken

Vor dem Drucken wurde erst einmal geschaut das dass Homing korrekt funktioniert. Beim 3D Drucken ist das Homing sehr wichtig, da es die Achspositionen in einen definierten Zustand bringt. Dadurch kann der Drucker erst seine korrekte Position ermitteln. Nach einigen Fehlversuchen den Taster an der Z-Achse anzubringen wurde er auf den Drucktisch angebracht. Auf diesem befindet sich mehr Platz, die Kabel stören nicht und die Höhe ist leichter zu justieren. Dadurch ist ein automatisches Bedleveling erst mal nicht möglich aber wie bereits gesagt ist mir mittlerweile das Drucken wichtiger geworden als den Drucker zusammen zu klappen. 

Mithilfe von beidseitigem Klebeband wurde die Adhäsion der ersten Ebene erreicht. Das Bild zeigt den ersten Versuch mit Filament. 

undefined

Und das Ergebnis ist Folgendes:

undefined

Eine sehr schräge Sache! Durch die besondere Kinematik des Druckers wird eine Korrektur der Y-Achse benötigt, wenn die Z-Achse sich bewegt. Mein Problem ist nur an welchen Stellen im Code ändere ich was, dass ich dieses Verhalten erreiche? Es scheint auch so als ob er eine Korrektur fahren wollte aber es sich dann doch anders überlegt hat (siehe Ecke hinten links). Bei den oberen Reihen scheint es auch noch Probleme mit dem Materialfluss zu geben. Der Rest sieht aber schon einigermaßen gut aus. Die Proportionen konnten aber noch nicht überprüft werden erst sollte das mit der Kinematik funktionieren.

  • Permalink
  • Kommentare

Mein 3D Drucker - Mechanischer Aufbau - Teil 9

Mär 212015

Das letzte mal hatte ich noch Probleme mit dem Extruder. Das Problem war das nichts extrudiert wurde. Es schien als ob der Schrittmotor nicht das benötigte Drehmoment liefern konnte. Deshalb habe ich diesen aus dem Gehäuse ausgebaut und die Bowdenleitung verkürzt - wieder nichts. Der Motor scheint doch genug Kraft zu haben aber kommt ab einem bestimmten Punkt nicht weiter. Deshalb habe ich dann mal den Extruder auseinandergebaut und das Problem sofort gesehen.

undefined

Kein Wunder kommt da nichts durch den Extruder bei dem Stau^^. Warum schaffen es die Hersteller nicht einen Extruder zu bauen, bei dem das Innenleben konisch zuläuft. Nach der Säuberung und mit einer kürzeren Zuleitung gab es kein Problem mehr mit der Extrusion.

Der Drucker bekam noch ein paar Filzfüße, sodass kleine Unebenheiten besser ausgeglichen werden können.

undefined

 Zusammengebaut sieht das ganze dann so aus:

undefined

Der Y-Achsen Riemen wurde noch auf Spannung gebracht und Endstops wurden positioniert. Für den Anschlag der Endstops musste erst einmal ein Stück Draht genügen. Das nächste was ansteht ist das automatische Bed-Leveling zu aktivieren.

  • Permalink
  • Kommentare

Mein 3D Drucker - Mechanischer Aufbau - Teil 8

Feb 282015

Im Folgenden Bild sieht man nun wie der Drucker später mal aussehen sollte. undefined

Nur leider ist es nicht ganz so einfach. Da ich leider die Kraft nicht berechnen konnte, die benötigt wird das Filament durch den Tube zu befördern und zu extrudieren habe ich den Motor dafür etwas größer gewählt. Leider zeigte es sich das dies nicht genug ist. Jetzt heißt es erst mal den Extruder ausbauen und eine alternative suchen.

  • Permalink
  • Kommentare

Ein Zahnrad in Javascript

Feb 182015

Für diese Seite benötigte ich einige Zahnräder, welche ich als Logo und als Hintergrund verwendete. Die Zahnräder sollten sich bei bedarf drehen und dynamisch erzeugt werden. 

Was wir benötigen ist erst einmal ein Zahnrad welches folgende Eigenschaften hat:

  • Position (x, y),
  • Modulo (m),
  • Zähnezahl (z),
  • Farbe (color_gear),
  • Drehung (angle),
  • Rotationsgeschwindigkeit (speed),
  • Richtung (dir).

 Übersetzt in eine Klasse sieht das dann folgendermaßen aus:

/* Class Gear */
function Gear(x, y, m, z, color_gear, start_angle, speed, dir) {
    this.angle = start_angle;		// Start angle
    this.speed = speed;			// Speed
    this.dir = dir;             	// Direction
    this.x = x;                 	// Position X
    this.y = y;                 	// Position Y
    this.m = m;                 	// Modulo
    this.z = z;                 	// Teeth Number
    this.color_gear = color_gear;	// Color
    if(this.angle == 0 && dir == true) {// Zentrieren des Zahnrads
        this.angle = Math.PI/this.z;
    }
}

Dabei kann jede Funktion als Klasse fungieren. Mit Hilfe von prototype werden Getter und Setter zu der Klasse hinzugefügt:

/* Getter and Setter for the Class Gear */
Gear.prototype.getX = function() { return this.x; }
Gear.prototype.getY = function() { return this.y; }
Gear.prototype.getModulo = function() { return this.m; }
Gear.prototype.getTeeth = function() { return this.z; }
Gear.prototype.getColor = function() { return this.color_gear; }
Gear.prototype.getAngle = function() { return this.angle; }
Gear.prototype.setAngle = function(a) { return this.angle = a; }
Gear.prototype.getDirection = function() { return this.dir; }
Gear.prototype.getSpeed = function() { return this.speed; }

Nun besteht ein Getriebe nicht nur aus einem Zahnrad sondern aus mehreren, deshalb wird eine Getriebe Klasse benötigt. Welche auch die Zahnräder zeichnet und animiert. Diese Klasse hat folgende Eigenschaften:

  • Array von Zahnräder (allGears),
  • Context des Canvas Elements (ctx),
  • Abmessungen des Canvas Elements (width, height).
/* Class Gears This Class holds the all the gears and methods to draw */
function Gears(canvas) {
    this.ctx = canvas.getContext("2d");;
    this.allGears = [];
    this.width = canvas.width;
    this.height = canvas.height;
    this.timer;
    var _this = this;

    // Funktionen..
}

 Als Funktionen benötigen wir:

  • eine zum zeichnen der Zahnräder (drawGear),
  • zum zeichnen eines Zahnrades (draw),
  • zum löschen der Zeichenfläche (clear),
  • Hinzufügen eines Zahnrades (AddGear),
  • Die Animation starten (StartAnimation),
  • Die Zahnräder nur Statisch zeichnen (DrawStatic),
  • Die Animation wieder zu stoppen (StopAnimation).

Die Öffentlichen Funktion, welche als Benutzer zur Verfügung stehen sind schnell geschrieben.

Gears.prototype.AddGear = function(gear) {
    this.allGears.push(gear);
}
Gears.prototype.StartAnimation = function() {
    this.timer = setInterval(function() {_this.draw();}, 25);
} Gears.prototype.DrawStatic = function() { this.draw(); } Gears.prototype.StopAnimation = function() { clearTimeout(this.timer); }

Es fehlen noch draw() und clear():

this.clear = function() {
    this.ctx.clearRect(0 ,0 ,this.width, this.height);
}

this.draw = function() {
    this.clear();
        
    for (var i = 0; i < this.allGears.length; i++) {
        var g = this.allGears[i];
        this.drawGear(g);
    }
}

Und zuletzt noch die drawGear():

this.drawGear = function(gear) {
    var z = gear.getTeeth();
    var m = gear.getModulo();
    var df = (z - 2.5) * m;	// Innenradius
    var d = z * m;		// Radius
    var dk = (z + 2) * m;	// Außenradius
    var tooth_angle = Math.PI/ z;
    var d_i_big = (z - 7) * m;
    var d_i_black = 8 * m;
    var rect_w = (z - 3) * m * 2;
    var rect_h = 6 * m;
    var x = gear.getX();
    var y = gear.getY();
    var angle = gear.getAngle();
    //Drehung neu berechnen
    if(gear.getDirection()) gear.setAngle(angle - gear.getSpeed()/40);
    else gear.setAngle(angle + gear.getSpeed()/40);
    angle = gear.getAngle();     
    this.ctx.beginPath();
    this.ctx.moveTo(x + Math.sin(angle - tooth_angle/1.5) * df, y - Math.cos(angle - tooth_angle/1.5) * df);
    for (var phi = angle; phi < angle + 2*Math.PI; phi = phi + 2*Math.PI/z) {
        //linke Seite des Zahns
        this.ctx.lineTo(x + Math.sin(phi - tooth_angle/4) * dk, y - Math.cos(phi - tooth_angle/4) * dk);
        //oberer Teil des Zahns
        this.ctx.arc(x, y, dk, phi - tooth_angle/4 - Math.PI / 2, phi + tooth_angle/4 - Math.PI / 2);
        //rechte Seite des Zahns
        this.ctx.lineTo(x + Math.sin(phi + tooth_angle/1.5) * df, y - Math.cos(phi + tooth_angle/1.5) * df);
        //Der untere Teil des Zahns
        this.ctx.arc(x, y, df, phi + tooth_angle/1.5 - Math.PI / 2, phi + 2 * tooth_angle/1.5 - Math.PI / 2);
    }
    //Das Innenloch ausschneiden
    this.ctx.moveTo(x+d_i_big, y);
    this.ctx.arc(x, y, d_i_big, 0, 2*Math.PI, true);
    //this.ctx.closePath();
    this.ctx.fillStyle=gear.getColor();
    this.ctx.fill();      
    //Das Fleisch um das Innenloch
    this.ctx.fillStyle=gear.getColor();
    this.ctx.arc(x, y, d_i_black, 0, 2*Math.PI, false);
    this.ctx.arc(x, y, 2.5*m, 2*Math.PI, 0, true);        
    this.ctx.closePath();
    this.ctx.fill();
    //die Speichen des Zahnrads
    this.ctx.beginPath();
    this.ctx.translate(x, y);
    this.ctx.rotate(angle);
    this.ctx.fillStyle=gear.getColor();
    this.ctx.fillRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
    this.ctx.rotate(Math.PI / 2);
    this.ctx.fillStyle=gear.getColor();
    this.ctx.fillRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
    // zurück rotieren
    //this.ctx.beginPath();
    this.ctx.rotate(-angle);   
    this.ctx.rotate(-Math.PI / 2);
    this.ctx.translate(-x, -y); 
    this.ctx.globalCompositeOperation = "destination-out";
    //this.ctx.beginPath();
    this.ctx.fillStyle=gear.getColor();
    this.ctx.arc(x, y, 2.5*m, 2*Math.PI, 0, false);        
    this.ctx.closePath();
    this.ctx.fill();
    this.ctx.globalCompositeOperation = "source-over";
}

Und fertig ist der Javascript Teil. Für die Verwendung in Html ist im Folgenden ein kleines Beispiel gezeigt:

<!DOCTPYE html>
<html>
	<head>
		<title>Canvas Gears</title>
		<script language="javascript" type="text/javascript" src="Gears.js"></script>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="160" style="border:1px solid #000000; ">
		</canvas>
	</body>
	<script>
var speed = Math.PI / 16;
var m = 2;
var z1 = 36;
var z2 = 24;
var z3 = 12;

var canvas = document.getElementById('myCanvas');
if (canvas && canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var gears = new Gears(canvas1);
    var g1 = new Gear((z1+2)*m, (z1+2)*m, m, z1, "rgba(0, 0, 0, 1)", 0, speed, false);
    var g2 = new Gear((z1+2)*m + (z1+z2)*m, (z1+2)*m, m, z2, "rgba(0, 0, 0, 1)", 0, speed * 1.5, true);
    var g3 = new Gear((z1+2)*m + (z1+z2)*m + (z2+z3)*m, (z1+2)*m, m, z3, "rgba(0, 0, 0, 1)", 0, speed * 3, false);
    gears.AddGear(g1);
    gears.AddGear(g2);
    gears.AddGear(g3);
    
    gears.StartAnimation();
}
</script>
</html>

Wie das ganze aussehen kann seht ihr im Logo dieser Seite und im Hintergrund.

  • Permalink
  • Kommentare
k
Neuere Posts →← Ältere Posts