Konstruktor und Pfadangeaben aus externer Datei lesen

alphakanal · 06. Dez. 2016

Servus !

Ich lade momentan ein Bild direkt ins Dokument und erstelle Instanzen von zwei unterschiedlichen Textobjekten welche ich dann in ein Canvaselemet stecke. Ich nenne das mal "Weisheit des Monats".

Der Code hierzu sieht so aus:

Code:

        ...

        var image = new BackGround("meinBild.png");
        textArray = [];

        textArray.push( new TextBogen ( {
            text: "Mein Text",
            xPos: 13,
            yPos:250,
            ...
        } ) );

        textArray.push( new TextGerade ( {
           text: "Mein Text",
           width: 123,
           size: 120,
           ...
        } ) );
  
        $("#meinDiv").append(image);
        stage.addChild( textArray[0] );
        stage.addChild( textArray[1] );
        ...

Insgesamt habe ich 4 unterschiedliche Textobjekte: TextBogen, TextGerade, TextSenkrecht, TextWinkel

Mein Ziel:

Ich möchte jeden Monat sagen wir mal 6 Weisheiten laden die man sich anzeigen lassen kann.
Es sind immer je 2 Texte und ein dazugehöriges Bild.

Jetzt dachte ich mir den Bildpfad und die Konstruktoren extern zu laden und in Variablen zu packen, dass das in etwa so aussieht:

Code:

...
        var image = new BackGround([COLOR="#FF0000"]meinBild[/COLOR]);   
        textArray = [];

        textArray.push( [COLOR="#FF0000"]meinTextObjekt1[/COLOR] );

        textArray.push( [COLOR="#FF0000"]meinTextObjekt2[/COLOR] );
        
        $("#meinDiv").append(image);
        stage.addChild( textArray[0] );
        stage.addChild( textArray[1] );
        ...

Meine Theorie sieht nun so aus
JSON File laden -> in Array -> daraus meinBild, meinTextObjekt1 und meinTextObjekt2 füttern.

Jetzt stellt sich für mich als Coder-Null die Frage:

Denke ich da richtig?
Wie muss das JSON ( oder ein anderes Format ) aussehen um den Bildpfad und jeweils den kompletten Konstruktor für die beiden Textobjekte zu beinhalten?
Oder besser aus 2 Dateien lesen - eine für die Bildpfade und eine für die Konstruktoren?
Oder kann man da auch JS Dateien dafür nehmen?
Fragen über Fragen

Hoffe es versteht jemand was ich meine und wäre überglücklich wenn mir da jemand ein wenig weiterhelfen könnte

kkapsner · 07. Dez. 2016

alphakanal schrieb:
in Array

Ich würde da ein Objekt und kein Array nehmen.

alphakanal schrieb:
Denke ich da richtig?

Klingt nicht falsch.

alphakanal schrieb:
Wie muss das JSON [...] aussehen

z.B. so:

Code:

{
	"background": "meinBild.png"
	"texts": ["Mein Text", "Mein Text"]
}

alphakanal schrieb:
Oder besser aus 2 Dateien lesen

Nein - dann hast du die zusammengehörenden Informationen nicht an einen Platz.

alphakanal schrieb:
Oder kann man da auch JS Dateien dafür nehmen?

Theoretisch schon - würde ich aber nicht machen.

alphakanal · 07. Dez. 2016

Ah ok danke schon mal!

Ich würde dann das JSON so aussehn lassen:

Code:

{   
    "sprueche":[

            {

                "image": "mein/pfad/zum.png",
                "texte":[
                                { 
                                        "typ": "TextBogen",
                                        "text":"BlaBla",
                                        "radius": 120,
                                        ...
                                },
                                { 
                                        "typ": "TextGerade",
                                        "text":"BlaBla",
                                        "xPos": 120,
                                        ...
                                }
                        ]
                

                },

             {

                "image": "mein/pfad/zum.png",
                "texte":[
                                { 
                                        "typ": "TextWinkel",
                                        "text":"BlaBla",
                                        "yPos": 120,
                                        ...
                                },
                                { 
                                        "typ": "TextGerade",
                                        "text":"BlaBla",
                                        "xPos": 120,
                                        ...
                                }
                        ]
                

                }               
                                
    ]
}

Wenn ich das in let weisheiten lesen lasse, kann ich beim Bild dann so darauf zugreifen ?:

Code:

var image = new BackGround(weisheiten.sprueche[0].image);

Beim Konstruktor bin ich noch am überlegen...

kkapsner · 07. Dez. 2016

alphakanal schrieb:
Ich würde dann das JSON so aussehn lassen:

Sieht OK aus.

alphakanal schrieb:
kann ich beim Bild dann so darauf zugreifen ?

Ja, das funktioniert.
Bei den Konstruktoren ist das auch nicht viel schwieriger:

Code:

var txt = weisheiten.sprueche[0].texte[0];
var obj = new window[txt.typ](txt);

alphakanal · 08. Dez. 2016

Huui, danke!
Meine Variante sah ein wenig komplizierter aus..aber das macht halt den Unterschied zwischen Profi und Pfeife ;-)

Wobei eigentlich sollte die txt innerhalb der Klammern ( = Konstruktorfunktion? ) alle Werte ausser "typ" beinhalten - doch momentan ist der mit drinne, oder ?

kkapsner · 09. Dez. 2016

alphakanal schrieb:
Wobei eigentlich sollte die txt innerhalb der Klammern ( = Konstruktorfunktion? ) alle Werte ausser "typ" beinhalten - doch momentan ist der mit drinne, oder ?

Ja, der ist drin, aber stört der Typ?

alphakanal · 10. Dez. 2016

Eigentlich nicht und da er die Funtkionalität nicht beeinflusst kann ich sehr gut damit leben

Danke jedenfalls!

Wobei hab hier schon wieder ein neues Problem - oder ein neuen Thread starten, weil thematisch ists ja was anderes ?

Ich lade in momentan in meine HTML Seite 4 JS-Bibliotheken und meine bundle.js - die bundle.js besteht aus ES6-Modulen: app.js, theme.js, label.js.

Code:

	<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
	<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
	<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>	
	<script type="text/javascript" src="/public/assets/js/createjstools.js"></script>
	<script type="text/javascript" src="/public/assets/js/bundle.js"></script>

Ich arbeite mit VS Code / NPM / Webpack - komplettes Neuland für mich, aber habe das Gefühl dass das ne klasse Sache ist. Webpack config sieht so aus:

Code:

var path = require('path');


module.exports = {
    context: path.resolve('src'),
    entry: ["./app"],
    output: {
        path: path.resolve('build/js/'),
        publicPath: '/public/assets/js/',
        filename:"bundle.js"
    },

    devServer:{
        contentBase:'public'
    },
    watch: true,
    
    module:{
        preloaders: [
            {
                test:/\.js$/,
                exclude: 'node_modules',
                loader: 'jshint-loader'
            }
        ],
        loaders: [
            {
               test: /\.es6$/,
               exclude: /node_modules/,
               loader: "babel-loader"
            }

        ]
    },

    resolve: {
        extensions: ['','.js','.es6']
    }


}

Das hat schon mal fast 2 Wochen gebraucht um das so hinzubekommen dass es läuft und ich auch noch gleichzeitig blicke wieso

Jetzt habe ich aber das Problem wenn ich die createjstools.js die in der HTML eingebunden ist innerhalb der app.js per Skript ansprechen möchte bekomme ich immer Fehlermeldung:
ReferenceError: createjs is not defined.
Die createjstools.js benötigt -> createjs bzw. easeljs

Wenn ich das Script ins HTML lege läufts ohne Fehlermeldung.

Wie kann ich die 4 Bibliotheken denn in mein Projekt lokal einbinden so dass ich innerhalb meiner app.js drauf zugreifen kann? Habs in der app.js schon mit:

Code:

var createjs =  require('./createjs-2015.11.26.combined.js');
// var createjs =  require('./easeljs-0.8.2.min.js');
// var txt = require('./createjstools.js');

// oder 

// import {} from "./createjs-2015.11.26.combined.js";
// import {} from "./easeljs-0.8.2.min.js";
// import {} from "./createjstools.js";

Aber leider ohne Erfolg. Bei der ersten Variante mit require('./createjs-2015.11.26.combined.js'); bekomme ich die Fehlermeldung:
ReferenceError: createjs is not defined.

Das selbe wenn ich require('./easeljs-0.8.2.min.js'); verwende - selbe Fehlermeldung. Das Skript liegt eigentlich im richtigen Ordner.

Grad ein wenig im Trüben fischen....

alphakanal · 11. Dez. 2016

Im Node.js Forum gibt's hier eine Buchempfehlung für Node.sj - ist das für Einsteiger geeignet ?

kkapsner · 11. Dez. 2016

Unterstützt das createjs überhaupt require? Nicht jede JS-Bibliothek kann das. Meistens eher nicht, wenn sie funktionieren, wenn man sie direkt per <script> in ein HTML-Dokument einbindet.
Kläre das erst einmal.

alphakanal · 12. Dez. 2016

So habe jetzt mal via NPM gesucht und die createjs + txtjs gefunden und installiert. Dann müsste es doch eigentlich via require funktionieren?

Binde es jetzt so in meine app.js ein:

Code:

var createjs =  require('createjs-easeljs'); // keine Fehlermeldung
var txtjs = require('txtjs'); // Fehlermeldung

Zu createjs:

Funktioniert bzw. gibt vorerst keine Fehlermeldung dass createjs undefined ist. ABER: Um mit CreateJS zu arbeiten muss eine neue Stage Instanz erstellt und einem Container zugewiesen werden:

Code:

var stage = new createjs.Stage(Container);

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

stage.update();

Da bekomme ich nun die Fehlermeldung: TypeError: createjs.Stage is not a constructor

Zu txtjs:
Hier bekomm ich die Fehlermeldung aus:

Code:

ERROR in ./src/app.es6
Module not found: Error: Cannot resolve module 'txtjs' in D:\Projekte\Web Projekte\Test\src
 @ ./src/app.es6 10:12-28

Ist aber im node_modules ordner drin ( via npm installiert ). Verwirrung macht sich breit...

alphakanal · 12. Dez. 2016

Hmm wie kann ichn sowas klären?

Habe jetzt nochmal ein komplett leeres Projekt erstellt und via NPM ein Modul createjs-easeljs installiert und mit var createjs = require('createjs-easeljs') in die app.js eingebunden. Wenn ich einen Testlauf mache schein er das auch zu bundlen:

Code:

  ...

   [76] ./src/app.es6 158 bytes {0} [built]
   [77] ./src/loader.es6 50 bytes {0} [built]
   [78] ./~/createjs-easeljs/lib/easeljs-0.8.2.min.js 89.7 kB {0} [built]
webpack: bundle is now VALID.

Wenn ich die Seite dann öffne spuckt die Konsole aber immer noch :

ReferenceError: createjs is not defined

Kann ich also Module die von NPM gefunden/installiert werden nicht zwangsläufig funktionieren oder mach ich was falsch?

alphakanal · 13. Dez. 2016

Irgendwie scheint das nicht so recht zu funktionieren. Auch das via NPM installierte createjs Modul spuckt einen Reference Error aus und das ebenfalls mit NPM installierte txtjs Modul wird via require() nicht einmal gefunden -> deshalb bleibt es jetzt im HTML als <script> - Tag.

Aus Interesse: Wie könnte ich sowas klären ob ein Skript require unterstützt? Variablen rein und dann ausgeben lassen ?

Jetzt habe ich nur eine Frage zu dem oben von mir geposteted JSON File:

Code:

{   
    "sprueche":[
            {
                "image": "mein/pfad/zum.png",
                "texte":[
                                { 
                                        "typ": "TextBogen",
                                        "text":"BlaBla",
                                        "radius": 120,
                                        ...
                                },
                                { 
                                        "typ": "TextGerade",
                                        "text":"BlaBla",
                                        "xPos": 120,
                                        ...
                                }
                        ]
               },

             {

                "image": "mein/pfad/zum.png",
                "texte":[
                                { 
                                        "typ": "TextWinkel",
                                        "text":"BlaBla",
                                        "yPos": 120,
                                        ...
                                },
                                { 
                                        "typ": "TextGerade",
                                        "text":"BlaBla",
                                        "xPos": 120,
                                        ...
                                }
                        ]          
                }                                        
    ]
}

Bisher lade ich das JSON mit PreloadJS in mein Projekt und das legt mir die einzelnen Objekte aus sprueche in ein Array und kann darauf schön ( für mich nachvollziehbar ) zugreifen.

Wie würde das JSON als JavaScript aussehen?

Grund:
Ich gebe image als base64 an - was mir praktischer Weise Webpack beim bundeln automatisch erstellt, wenn ich das Bild innerhalb einer Javascript Datei einbinde. Darum wärs für mich besser nicht ein JSON zu laden sonden mein SpruecheBundle.js

Nur mit der Strukturierung der JavaScript Datei tu ich mir ein wenig schwer oder sollen hier gar Klassen ins Spiel kommen?

tsseh · 13. Dez. 2016

alphakanal schrieb:
Aus Interesse: Wie könnte ich sowas klären ob ein Skript require unterstützt? Variablen rein und dann ausgeben lassen ?

das sagt dir require schon, nur müsstest du auch RequireJS einbinden und konfigurieren. require in deinem webpack file geht weil es durch nodejs ausgeführt wird.

alphakanal schrieb:
Wie würde das JSON als JavaScript aussehen?

json ist js, deswegen heisst es ja so. schreib ein var data = davor und du kannst es ansprechen

alphakanal · 13. Dez. 2016

Super!
Habe jetzt in der Bundle.js das var = data davor gesetzt und kann zumindest innerhalb der Datei auf Eigenschaften zugreifen - vielen Dank schon mal !!

Ich teste die Eigenschaften so und bekomme auch die richtige Ausgabe in der Konsole:

Code:

console.log("bundele -> data:" + data.sprueche[1].image);
console.log("bundle -> data Keys : " + Object.keys(data.sprueche[1].texte[1]));

Jetzt hab ich nur das nächste Problem - wie greife ich darauf zu wenn es in der App.js geladen wurde? Mometan lade ichs so:

Code:

preload = new createjs.LoadQueue(true);

preload.on("progress", handleProgress);
preload.on("fileload", handleFileLoaded);
preload.on("error", handleError);
preload.on("complete", handleComplete);

preload.loadFile("assets/js/bundles/ewd.bundle.js");

...

function handleComplete(event) {

		var item = event.item;
		var result = event.result;

		console.log("complete -> item ist : " + item); 
                // Ausgabe: complete -> item ist : [object Object]

		console.log("complete -> Keys von item: " + Object.keys(item)); 
                // Ausgabe: complete -> Keys von item: src,type,id,maintainOrder,callback,data,method,values,headers,withCredentials,mimeType,crossOrigin,loadTimeout,ext,path,_loader

		console.log("complete -> result ist : " + result); 
                // Ausgabe: complete -> result ist : [object HTMLScriptElement]

		console.log("complete -> Keys von result : " + Object.keys(result)); 
                // Ausgabe: complete -> Keys von result : 
                

	}

Eigentlich müsste doch result das geladene Objekt beinhalten, oder? Hier bekomm ichs irgendwie nicht hin auf die gewünschten Eigenschaft zuzugreifen...wääääää

Update:

Schon einen Schritt weiter mit result.text hab ich schon mal das ganze Bundle-Konstrukt YEAH!

Code:

	function handleComplete(event) {

		var bundle = event.result.text;

		console.log("complete -> ist : " + bundle );
		console.log("complete -> Keys von result : " + Object.keys(bundle ));

	}

Aber wie ich an den Rest gelange bleibt ein Problem....

kkapsner · 14. Dez. 2016

alphakanal schrieb:
Ich gebe image als base64 an

Warum? Dadurch erhöhst du die Datenmenge signifikant und wartbarer wird das Ganze dadurch auch nicht.

alphakanal · 15. Dez. 2016

Das stimmt -zum besseren Verständins das Schema der Geschichte:

Bilder werden als Hintergrund im Canvas geladen man kann den Text darüber verändern und dann Speichern/Drucken. Gewisse Backgroundbilder sollten zwar angezeigt werden aber nur für Vereinsmitglieder nach Login zu drucken sein. Login ist eine simple DB Abfrage ob die Emailadresse + Passwort vorhanden ist, dann Cookie setzen damit nicht immer wieder eingeloggt werden muss.
Also habe wir gedacht das als base64 zu machen damit die ( für Vereinsmitglieder und damit quasi auch kostenpflichtigen ) Hintergrundbilder einen gewissen "Schutz" haben.

Naiv gedacht aber sind halt keine Profis - oder was würdest Du empfehlen ?

kkapsner · 17. Dez. 2016

alphakanal schrieb:
sollten zwar angezeigt werden aber nur für Vereinsmitglieder nach Login zu drucken sein.

Wenn das für alle angezeigt wird, dann können das auch alle drucken...

Wenn du bestimmte Bilder nur nach einem Login erlauben willst, würde ich die Auslieferung der Bilder auch von dem Sessioncookie abhängig machen.

alphakanal · 20. Dez. 2016

Sorry für die späte Antwort

Bin zur Zeit dran mich in das Thema Node / Javascript rein-zu-nerden und da ändert sich quasi die Struktur / Aufbau von Tag zu Tag... darum werde ich in diesem Post sicherheitshalber vorerst nichts mehr hinzufügen, danke trotzdem für die Antworten !

kkapsner · 20. Dez. 2016

alphakanal schrieb:
danke

Bitte - gern geschehen. Wenn du doch noch Fragen hast, kannst du sie ja stellen.

mikdoe · 20. Dez. 2016

hier sind noch nicht freigeschaltete beiträge. korbinian ist das extra so?
und es ist nicht auf gelöst gesetzt. why?

Konstruktor und Pfadangeaben aus externer Datei lesen

New member

Super Moderator

New member

Super Moderator

New member

Super Moderator

New member

New member

Super Moderator

New member

New member

New member

Lounge-Member

New member

Super Moderator

New member

Super Moderator

New member

Super Moderator

Moderator