// index.html / now get the p5.js from internet

// DOM_code.js is required for operation / data grid show / input

// PTZ.js is required for 3D view / operation mouse keyboard

​

// revision: 

// mouse and keyboard works nice,

// but on my old 7" tablet ( android 5.1 ) i not know how to zoom

// so now here i try to add DOM sliders for my PTZ operation

​

// date&time in datasheet text AND download filename.

//__________________________________________________________

// test markdown script see index.html

//https://github.com/jonschlinkert/remarkable

var md = new Remarkable();

md.set({

    html: true,

    breaks: true

});

//__________________________________________________________

​

info = 'here we want make a interactive design of a\n';

info += 'QUBE and calculation for its volume\n';

info += 'as a 3D design template\n';

info += '\n';

info += 'using my PTZ 3D view:\n';

info += 'key UP DOWN RIGHT LEFT -> rotate // key PAGE UP or [-] DOWN or [+] -> zoom\n';

info += 'mouse LEFT press drag up down right left -> rotate \nmouse RIGHT press -> move\nmouse WHEEL turn -> zoom\n\n';

info += '\n';

info += 'rev: here we include 3 slider, Xrot Yrot Zoom for tablet operation\n';

info += '\n';

info += 'key [space] toggle landview\n';

info += '\n';

info += 'in the data grid pls. change the green cells only\n';

info += '\n';

info += 'there (this) is a (HTML) text paragraph, dynamically added like with instructions and bill of materials\n';

info += '\n';

info += '### rev:\n';

info += 'now test the new **markdown**\n';

info += '```test code <br>```\n';

info += '\n';

info += '* a\n* b\n';

info += '> quote\n';

info += '\n';

info += 'This is [an example](http://example.com/ "Title") inline link.\n';

info += '\n';

info += '***\n';

info += '\n';

info += 'for documentation pls. print this page to PDF ( by your browser )\nor save the downloaded text\n';

info += '\n';

info += 'happy coding with processing p5.js and KLL engineering (CC BY SA) \n';

info += 'http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154 \n';

info += '\n';

​

var ds="";

​

let diagc = false;//true;  //__________ print calc info to browser console...

let showland = true; //________ use keyboard [space] to disable

​

var slX,slY,slZ; // sliders for new PTZ operation

var inp00, but00, inp10, but10, inp20, but20, inp30, but30, docp; // see DOM_code.js

​

var wX = 10.0; //________ [m]

var wY = 50.0; //________ [m]

var wZ = 150.0; //_______ [m]

var volume = 0.0; //________ [m3] calculated

​

function draw_object() { //____ called by / from inside PTZ

  axis(); //_________________ test graph / disable later

  noFill();

  stroke('white');

  sphere(0.1); //___________________ info center point

  strokeWeight(2);

  box(wX,wY,wZ);  

  if (showland) land();

}

​

function land() {

  noStroke();

  push();

  fill(200,200,0,150); // yellow sand ground transparent

  rect(-500,-500,1000,1000);

  pop();

}

​

function setup() {

  createCanvas(800, 500, WEBGL);

​

  create_DOM(); //____________ see file DOM_code.js

  calc_list(); //_____________ below function for data calc and documentation 

  noSmooth(); //______________ ugly but fast?

  //console.log(md.render('# Remarkable rulezz!'));// Outputs: <h1>Remarkable rulezz!</h1>

​

}

function draw() {

  background(0, 0, 80);

  PTZ();

}

​

function calc_list() { //______ recalc at setup and after change of settings

  volume = wX * wY * wZ;

  inp30.value(volume); //______ show it

  let nows = year()+'_'+nf(month(),2)+'_'+nf(day(),2)+'-'+nf(hour(),2)+'_'+nf(minute(),2)+'_'+nf(second(),2);

 // create a data string as documentation

  ds=""; //___ clean

  ds +='\n';

  ds += info; // add the operational concept info from above

  ds +='\n';

  ds +='## PROJECT 3D_design_template: \n### DataSheet_'+nows+'\n';

  ds +='\n';

  ds +='a QUBE with 3 different length X '+nf(wX,0,1)+' m, Y '+nf(wY,0,1)+' m, Z '+nf(wZ,0,1)+' m\n';

  ds +='has a volume of ' + nf(volume,0,1) + ' m3\n';

  ds +='\n';

  ds +='BILL OF MATERIALS:\n';

  ds +='\n';

  let sX = 4 * wX;

  let sY = 4 * wY;

  let sZ = 4 * wZ;

  let sS = sX + sY + sZ;

  ds +='X: use 4 times '+nf(wX,0,1)+' m, total '+nf(sX,0,1)+' m\n';

  ds +='Y: use 4 times '+nf(wY,0,1)+' m, total '+nf(sY,0,1)+' m\n';

  ds +='Z: use 4 times '+nf(wZ,0,1)+' m, total '+nf(sZ,0,1)+' m\n';

  ds +='sum: '+nf(sS,0,1)+' m of something\n';

  ds +='\n';

​

  if (diagc) console.log(ds); //___ can show at console

//  let docs = ds.replace(/\n/g,'<br>'); // get html line feeds in <p>

  let docs = md.render(ds); //______________________________ new markdown test

  docp.html(docs); //___ show it

  // a 3rd way for the documentation text would be download:

  let list = split(ds, '\n');

  let filename = 'datasheet_'+nows+'.txt' //________________ incl. date time in filename

  saveStrings(list, filename);

}