Commit 4aa2a38f authored by Jake Read's avatar Jake Read

threejs hello

parent 38a5c2a2
// business
const Reps = require('./reps.js')
const Programs = require('./programs.js')
// the program object: real simple, just has a description, and a 'modules'
var program = Programs.new('new program')
var canvas = Programs.loadModuleFromSource(program, './modules/ui/threeCanvas.js')
Programs.setUI(canvas, 200, 200)
// UI
const View = require('./views.js')
View.startHttp()
View.startWs()
Programs.assignSocket(View.uiSocket)
View.assignProgram(program)
\ No newline at end of file
......@@ -31,7 +31,7 @@ var lastPos = { x: 10, y: 30 }
var wrapper = {}
var nav = {}
var verbose = false
var verbose = false
/*
......@@ -112,33 +112,33 @@ function socketRecv(evt) {
console.log('RECV CONSOLE:', data)
break
case 'put module menu':
if(verbose) console.log('RECV MODULE MENU')
if (verbose) console.log('RECV MODULE MENU')
heapSendsModuleMenu(data)
break
case 'put program menu':
if(verbose) console.log('RECV PRG MENU')
if (verbose) console.log('RECV PRG MENU')
heapSendsProgramMenu(data)
break
case 'put program':
if(verbose) console.log('RECV PROGRAM')
if (verbose) console.log('RECV PROGRAM')
heapSendsNewProgram(data)
break
case 'put module':
if(verbose) console.log('RECV NEW MODULE')
if (verbose) console.log('RECV NEW MODULE')
heapSendsNewModule(data)
break
case 'put module change':
if(verbose) console.log('RECV MODULE CHANGE')
if (verbose) console.log('RECV MODULE CHANGE')
heapSendsModuleChange(data)
break
case 'put state change':
if(verbose) console.log('RECV STATE CHANGE')
if (verbose) console.log('RECV STATE CHANGE')
heapSendsStateChange(data)
break
case 'put ui change':
if(verbose) console.log('RECV UI CHANGE')
if (verbose) console.log('RECV UI CHANGE')
heapSendsUiChange(data)
break
break
case 'restart':
location.reload()
default:
......@@ -172,7 +172,7 @@ function heapSendsNewProgram(prgm) {
program = prgm
// 1st we want to git rm old files ...
// when adding links, we'll have to add all and then draw links
if(verbose) console.log('LOAD PROGRAM', program)
if (verbose) console.log('LOAD PROGRAM', program)
for (mdlName in program.modules) {
addRepToView(program.modules[mdlName])
}
......@@ -196,7 +196,7 @@ function heapSendsNewModule(mdl) {
// containing references to those DOM objects
function heapSendsModuleChange(data) {
if(verbose) console.log('HEAP SENDS MODULE CHANGE', data)
if (verbose) console.log('HEAP SENDS MODULE CHANGE', data)
// data should be rep of changed module
var rep = program.modules[data.description.id]
// we want a general case, but for now we know we're looking for
......@@ -222,7 +222,7 @@ function heapSendsModuleChange(data) {
// update state from server to UI
function heapSendsStateChange(data) {
if(verbose) console.log('HEAP SENDS CHANGE STATE IN MODULE', data)
if (verbose) console.log('HEAP SENDS CHANGE STATE IN MODULE', data)
var rep = program.modules[data.id]
rep.state[data.key] = data.val
if (typeof data.val == 'boolean') {
......@@ -232,8 +232,8 @@ function heapSendsStateChange(data) {
}
}
function heapSendsUiChange(data){
if(true) console.log('HEAP SENDS MSG TO UI ELEMENT IN MDL', data)
function heapSendsUiChange(data) {
if (true) console.log('HEAP SENDS MSG TO UI ELEMENT IN MDL', data)
program.modules[data.id].ui[data.key].lump.onMessage(data.msg)
}
......@@ -471,6 +471,8 @@ oncontextmenu = function(evt) {
if (modRep) {
writeModuleOptionMenu(modRep)
}
} else if (evt.target.tagName != 'HTML') {
// clicked on something else
} else {
if (sckt) {
socketSend('get module menu', '')
......
......@@ -252,27 +252,19 @@ function writeStateRep(container, rep, key) {
}
}
function writeUiElement(container, rep, key) {
// pull the representation object from what we were sent
function loadUIScript(container, rep, key) {
var ui = rep.ui[key]
console.log('write ui', ui)
console.log('at rep', rep)
//import script from ui.clientPath
// load this thing,
ui.script = document.createElement('script')
container.appendChild(ui.script)
// it loads and executes when this is set
ui.script.src = ui.clientPath
ui.script.src = ui.clientPath
// events
ui.script.onerror = function(err){
ui.script.onerror = function(err) {
console.log('ERR from ui script', err)
}
ui.script.onload = function(msg){
ui.script.onload = function(msg) {
console.log('UI script loaded')
// each ui script writes this function to
// window. (global scope) on load,
......@@ -284,6 +276,29 @@ function writeUiElement(container, rep, key) {
}
}
function writeUiElement(container, rep, key) {
// pull the representation object from what we were sent
var ui = rep.ui[key]
console.log('write ui', ui)
console.log('at rep', rep)
// first, check if ui also has lib to load
if (ui.libPath != null) {
console.log('rep ui has library')
ui.libScript = document.createElement('script')
container.appendChild(ui.libScript)
ui.libScript.src = ui.libPath
ui.libScript.onerror = function(err) {
console.log('ERR from ui lib', err)
}
ui.libScript.onload = function(msg) {
loadUIScript(container, rep, key)
}
} else {
loadUIScript(container, rep, key)
}
}
// bezier utilities
var svgns = 'http://www.w3.org/2000/svg'
......
This diff is collapsed.
(function() {
/* KRITICAL STEP */
// this is our object, that we will later append
// to the .lump position
var threeCanvas = {}
// now three stuff
var container = document.createElement('div')
var scene = new THREE.Scene()
scene.background = new THREE.Color(0xd6d6d6)
var camera = new THREE.PerspectiveCamera(75, 1, 1, 1000)
camera.up.set(0, 0, 1)
var renderer = new THREE.WebGLRenderer()
renderer.setSize(396, 396)
container.appendChild(renderer.domElement)
// axes
var axesHelper = new THREE.AxesHelper(1)
scene.add(axesHelper)
// grid
var gridHelper = new THREE.GridHelper(10, 100)
gridHelper.translateOnAxis(new THREE.Vector3(0,0,1), -0.01)
gridHelper.rotateX(- Math.PI / 2)
scene.add(gridHelper)
/*
// floor
var flrGeo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8)
var flrMat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide })
var floor = new THREE.Mesh(flrGeo, flrMat)
scene.add(floor);
*/
// adding to scene
var material = new THREE.LineBasicMaterial({ color: 0x00ffff })
var geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(-10, 0, 0))
geometry.vertices.push(new THREE.Vector3(0, 2, 2))
var line = new THREE.Line(geometry, material)
scene.add(line)
var controls = new THREE.OrbitControls(camera, container)
camera.position.set(1, -2, 2)
controls.update()
console.log(line.geometry)
var animate = function() {
requestAnimationFrame(animate)
line.geometry.vertices[1].x += 0.01
line.geometry.verticesNeedUpdate = true
controls.update()
renderer.render(scene, camera)
}
// kickstart
animate()
// set class, etc, put canvas in class, etc
// and then
/* KRITICAL STEP */
// we have to give our 'lump' object a .domElem, this
// will be referenced upstream to append to the right module
// append it to the dom so that it can be appended on init
threeCanvas.domElem = container
/* KRITICAL STEP */
// whatever is posted to .lump will receive messages through
// .onMessage, so if we don't write one, we'll cause errors
// upstream, and besides, wouldn't be able to get anything from
// the server
threeCanvas.onMessage = function(msg) {
//console.log('got message in client side ui object', msg)
if (msg.call == 'setXY') {
// do stuff
} else if (msg.call == 'anotherThing') {
//
} else if (msg.call == 'setRows') {
//
} else {
console.log('default msg because none from sys at threejs clientside')
}
}
/* KRITICAL STEP */
// expect this to only be used once
// it's basically our init function
// and gets called once the module is loaded
window.registerNewModule = function(id, key) {
threeCanvas.parentId = id
threeCanvas.key = key
// affectionately named lump of code, insert ourselves here
program.modules[id].ui[key].lump = threeCanvas
// and call-back to do onload things
var data = {
id: threeCanvas.parentId,
key: threeCanvas.key,
msg: 'onload'
}
socketSend('put ui change', data)
}
})()
\ No newline at end of file
// boilerplate atkapi header
const JSUnit = require('../../src/jsunit.js')
let Input = JSUnit.Input
let Output = JSUnit.Output
let State = JSUnit.State
// interface elements
const JSUI = require('../../src/jsui.js')
let UI = JSUI.UI
// a constructor, a fn, a javascript mess
function PointOnCanvas() {
var ptOnCanvas = {
// descriptions are used in UI
description: {
name: 'ThreeJS-Canvas',
alt: 'graphix'
}
}
ptOnCanvas.state = State()
// alias !
var state = ptOnCanvas.state
ptOnCanvas.ui = UI()
var ui = ptOnCanvas.ui
ui.addElement('threeCanvas', './ui/threeCanvas.js', onUICallback)
ui.threeCanvas.onload = function(){
console.log('canvas is loaded')
}
ptOnCanvas.inputs = {
xy: Input('array', onNewPoint)
// do some canvas stuff
}
ptOnCanvas.outputs = {
log: Output('string')
}
function onNewPoint(array) {
console.log('pt inputs to ptOnCanvas', array)
}
function onUICallback(msg){
console.log('msg callback from threeCanvas ui element', msg)
}
return ptOnCanvas
}
// exports
module.exports = PointOnCanvas
\ No newline at end of file
......@@ -49,6 +49,9 @@ function makeRepFromModule(mdl) {
rep.ui[key] = {}
rep.ui[key].type = mdl.ui[key].type
rep.ui[key].clientPath = mdl.ui[key].clientPath
if(mdl.ui[key].libPath != null){
rep.ui[key].libPath = mdl.ui[key].libPath
}
}
}
......
......@@ -33,6 +33,9 @@ log.state.prefix = "jnt1:"
Programs.setUI(log, 840, 520)
mrbot.outputs.pos.attach(log.inputs.thru)
var canvas = Programs.loadModuleFromSource(program, './modules/ui/threeCanvas.js')
Programs.setUI(canvas, 600, 650)
/*
var stest = Programs.loadModuleFromSource(program, './modules/ui/stest.js')
......
function ThreeCanvasUIElement() {
// server-side button object
var threeCanvasUIElement = {
type: 'threeCanvas',
clientPath: 'ui/threeCanvas.js',
libPath: 'ui/libs/three.js',
callback: null // this is loaded into our scope on load
}
// hook to recv messages from the ui counterpart
threeCanvasUIElement.onMessage = function(msg) {
//console.log('message into server side object', msg)
if(msg == 'onload'){
this.onload()
} else {
// do other message stuff?
// is this why callback ?
this.callback(msg)
console.log('unhandled message from server to ui element', this.type, msg)
}
}
return threeCanvasUIElement
}
module.exports = ThreeCanvasUIElement
\ No newline at end of file
......@@ -38,6 +38,11 @@ function startHttp() {
res.sendFile(__dirname + '/client/ui/' + req.params.file)
})
app.get('/ui/libs/:file', (req, res) => {
console.log('client req ui lib', req.params.file)
res.sendFile(__dirname + '/client/ui/libs/' + req.params.file)
})
// through this window
http.listen(8080, () => {
console.log('RNDMC is listening on localhost:8080')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment