Ich habe mir einen Server geschrieben, der über JavaScript mit Socket läuft. (Port 3000). Aber mit meinem Handy, welches im selben Netzwerk ist, kann ich mich mit dem Server über den Browser nicht verbinden. Ich habe in den Browser immer IP: Port eingegeben, dann lädt das ganze ewig und dann kommt die Fehlermeldung, dass die Antwort vom Server zu lange gebraucht hat. Müsste das nicht eigentlich klappen?

Ich habe mir einen Server geschrieben, der über JavaScript mit Socket läuft. (Port 3000). Aber mit meinem Handy, welches im selben Netzwerk ist, kann ich mich mit dem Server über den Browser nicht verbinden. Ich habe in den Browser immer IP: Port eingegeben, dann lädt das ganze ewig und dann kommt die Fehlermeldung, dass die Antwort vom Server zu lange gebraucht hat. Müsste das nicht eigentlich klappen?

Ich will mit JavaScript für den Raspberry Pi ein Programm schreiben. Für das Programm möchte ich die Bibliothek p5.speech nehmen. Um das Skript dann auf dem Raspberry Pi laufen zu lassen, benutze ich Node.js. Leider bin ich relativ neu in Node.js und deswegen meine Frage: Wie kann ich diese Bibliothek in mein Skript einbinden?

Mein Skript besteht gerade erst einmal aus diesen bescheidenen zwei Zeilen:

const lib = require('./p5.speech');
var myVoice = new lib.p5.Speech();

und im selben Ordner befindet sich auch die p5.speech.js-Datei.

Das hier ist der Code bis zum Ende von p5.Speech(); :

(function (root, factory) {
  if (typeof define === 'function' && define.amd)
    define('p5.speech', ['p5'], function (p5) {( factory(p5)); });
  else if (typeof exports === 'object') {
    //factory(require('../p5'));
  }
  else {
    factory(root['p5']);
  }
}(this, function (p5) {
  // ============================================================================
  //             p5.Speech
  // ============================================================================
  /*    Base class for a Speech Synthesizer
    @class p5.Speech   * @constructor   */
  p5.Speech = function(_dv) {
    this.synth = window.speechSynthesis;
    this.utterance = new SpeechSynthesisUtterance();
    this.isLoaded = 0; // do we have voices yet?

    // do we queue new utterances upon firing speak()
    // or interrupt what's speaking:
    this.interrupt = false;

    // callback properties to be filled in within the p5 sketch
    // if the author needs custom callbacks:
    this.onLoad;
    this.onStart;
    this.onPause;
    this.onResume;
    this.onEnd;

    this.voices = [];

    // first parameter of constructor is an initial voice selector
    this.initvoice;

    if (_dv !== undefined)
      this.initvoice=_dv;

    var that = this;
    window.speechSynthesis.onvoiceschanged = function() {
      if (that.isLoaded == 0) {
        that.voices = window.speechSynthesis.getVoices();
        that.isLoaded = 1;
        console.log("p5.Speech: voices loaded!");

        if (that.initvoice!=undefined) {
          that.setVoice(that.initvoice);
          console.log("p5.Speech: initial voice: " + that.initvoice);
        }

        if (that.onLoad != undefined)
          that.onLoad();

        that.utterance.onstart = function(e) {
          if (that.onStart != undefined)
            that.onStart(e);
        };
        that.utterance.onpause = function(e) {
          if (that.onPause != undefined)
            that.onPause(e);
        };
        that.utterance.onresume = function(e) {
          if (that.onResume != undefined)
            that.onResume(e);
        };
        that.utterance.onend = function(e) {
          if (that.onEnd != undefined)
            that.onEnd(e);
        };
      }
    };
  };   // end p5.Speech constructor

Ich bekomme aber immer die Fehlermeldung:

"cannot read property 'Speech' of undefined"

Wie kann ich diese p5.Speech-Funktion von meinem Skript aufrufen?

Ich habe mir ein JavaScript-Programm geschrieben, welches aus einer Text-Datei eine Tilemap "bauen" soll. Die Tiles die dabei benutzt werden sollen habe ich alle einzeln als PNG-Datei abgespeichert(warum ich es nicht als ganze PNG-Datei abgespeichert habe, ist jetzt nicht so wichtig :) ) und sollen nun, je nachdem welche Zahlen in der Text-Datei stehen die richtigen Tiles ausgewählt und auf den Bildschirm gemalt werden. Hier mal ein Beispiel für eine solche Text-Datei:

42,42,42,42,42,42,42,42,42,42,42,42; 42,42,42,42,42,42,42,42,42,42,42,42; 42,42,42,42,42,42,42,42,42,42,42,42.

In dieser Datei steht die Zahl 42, welche angibt dass für jede vorkommende Zahl 42 das Tile Nummer 42 auf den Bildschirm gemalt werden soll.Nun kommen dabei leider Fehler vor und ich habe echt alles ausprobiert was mir einfiel doch ich konnte das Problem nicht lösen.

Hier mal ein Bild des Problems:

Und an den PNG-Dateien kann es nicht liegen,die habe ich alle überprüft.Mein restlicher Code folgt gleich, da man nicht mehr als 3000 Zeichen insgesamt verwenden darf.

Ich habe mir ein JavaScript-Programm geschrieben, welches aus einer Text-Datei eine Tilemap "bauen" soll. Die Tiles die dabei benutzt werden sollen habe ich alle einzeln als PNG-Datei abgespeichert(warum ich es nicht als ganze PNG-Datei abgespeichert habe, ist jetzt nicht so wichtig :) ) und sollen nun, je nachdem welche Zahlen in der Text-Datei stehen die richtigen Tiles ausgewählt und auf den Bildschirm gemalt werden. Hier mal ein Beispiel für eine solche Text-Datei:

42,42,42,42,42,42,42,42,42,42,42,42; 42,42,42,42,42,42,42,42,42,42,42,42; 42,42,42,42,42,42,42,42,42,42,42,42.

In dieser Datei steht die Zahl 42, welche angibt dass für jede vorkommende Zahl 42 das Tile Nummer 42 auf den Bildschirm gemalt werden soll.Nun kommen dabei leider Fehler vor und ich habe echt alles ausprobiert was mir einfiel doch ich konnte das Problem nicht lösen.

Hier mal ein Bild des Problems:

Und an den PNG-Dateien kann es nicht liegen,die habe ich alle überprüft.Mein restlicher Code folgt gleich, da man nicht mehr als 3000 Zeichen insgesamt verwenden darf.

Ich habe ein Programm,welches erst einmal rote Rechtecke in form von einem großen Rechteck zeichnet. Dann wollte ich,das auf jedes Rechteck(40 Pixel40 Pixel) ein genau so großes bild(auch 40 Pixel40 Pixel) gezeichnet wird. Dies habe ich mit p5 probiert, da es mir dort am leichtesten vorkam, und ich p5.js in meinem Projekt eh schon "installiert" habe. Da dies aber nicht klappte und die Seite stunden lang geladen hatte, habe ich bei der for-schleife , die die Bilder zeichnet, die anzahl der Bilder,welche gemalt werden sollen auf 3 verringert. Trotzdem funktioniert es nicht. Hier meine Dateien:

Hier index .html:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

  <script src="sketch.js"></script>   <script src="bloecke.js"></script>   <style></style>  </head>  <body>  </body> </html>

Hier sketch.js:

var canvasW = 1300;
var canvasH = 640;
function setup() {  img = loadImage("block.jpg");  createCanvas(canvasW, canvasH);  bloecke();  bilderZeigen();  window.addEventListener("load", bilderZeigen); }
// function imagesload() { //  img = loadImage("block.jpg"); // }

function draw() {
 //background(0);
 // var rectX = 320;
 // var rectY = 240;
 // var rectW = 80;
 // var rectH = 80;
 // if (mouseIsPressed) {
 //  if (mouseX > rectX-rectW && mouseX < rectX+rectW && mouseY > rectY-rectH && mouseY < rectY+rectH) {
 //  fill(175);
 // }
 // } else {
 //  fill(255);
 // }
 // rectMode(RADIUS)
 // rect(rectX, rectY, rectW, rectH);
 }

Und als letztes:

var alleBloecke = [];
var spalten = canvasW / 10;
var zeilen = canvasH / 10;
var i = 0;
var y = 0;
var x = -20;
function bloecke() {  // image(img, 45, 68); console.log("h"); for (var j = 0; j < spalten; j++) { while (i < zeilen) {  x = x + 40;  i = i + 1;  //alert("x:"+ x + "y:" + y)  strokeWeight(1);  stroke(51);  fill('red');  var rectangle = new Rechteck(x, y, 40, 40);  alleBloecke.push(rectangle); } x = -20; i = 0; //alert(i); y = y + 40; } }
function Rechteck(x, y, width, height) {  this.x = x;  this.y = y;  this.width = width;  this.height = height;  rect(this.x, this.y, this.width, this.height); }

function bilderZeigen() {
 alert("ja");
for (var z = 0; z < 3; z++) {
 image(img, alleBloecke[z].x, alleBloecke[z].y);
}
};

Ich habe ein Programm,welches erst einmal rote Rechtecke in form von einem großen Rechteck zeichnet. Dann wollte ich,das auf jedes Rechteck(40 Pixel40 Pixel) ein genau so großes bild(auch 40 Pixel40 Pixel) gezeichnet wird. Dies habe ich mit p5 probiert, da es mir dort am leichtesten vorkam, und ich p5.js in meinem Projekt eh schon "installiert" habe. Da dies aber nicht klappte und die Seite stunden lang geladen hatte, habe ich bei der for-schleife , die die Bilder zeichnet, die anzahl der Bilder,welche gemalt werden sollen auf 3 verringert. Trotzdem funktioniert es nicht. Hier meine Dateien:

Hier index .html:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

  <script src="sketch.js"></script>   <script src="bloecke.js"></script>   <style></style>  </head>  <body>  </body> </html>

Hier sketch.js:

var canvasW = 1300;
var canvasH = 640;
function setup() {  img = loadImage("block.jpg");  createCanvas(canvasW, canvasH);  bloecke();  bilderZeigen();  window.addEventListener("load", bilderZeigen); }
// function imagesload() { //  img = loadImage("block.jpg"); // }

function draw() {
 //background(0);
 // var rectX = 320;
 // var rectY = 240;
 // var rectW = 80;
 // var rectH = 80;
 // if (mouseIsPressed) {
 //  if (mouseX > rectX-rectW && mouseX < rectX+rectW && mouseY > rectY-rectH && mouseY < rectY+rectH) {
 //  fill(175);
 // }
 // } else {
 //  fill(255);
 // }
 // rectMode(RADIUS)
 // rect(rectX, rectY, rectW, rectH);
 }

Und als letztes:

var alleBloecke = [];
var spalten = canvasW / 10;
var zeilen = canvasH / 10;
var i = 0;
var y = 0;
var x = -20;
function bloecke() {  // image(img, 45, 68); console.log("h"); for (var j = 0; j < spalten; j++) { while (i < zeilen) {  x = x + 40;  i = i + 1;  //alert("x:"+ x + "y:" + y)  strokeWeight(1);  stroke(51);  fill('red');  var rectangle = new Rechteck(x, y, 40, 40);  alleBloecke.push(rectangle); } x = -20; i = 0; //alert(i); y = y + 40; } }
function Rechteck(x, y, width, height) {  this.x = x;  this.y = y;  this.width = width;  this.height = height;  rect(this.x, this.y, this.width, this.height); }

function bilderZeigen() {
 alert("ja");
for (var z = 0; z < 3; z++) {
 image(img, alleBloecke[z].x, alleBloecke[z].y);
}
};