hubs_notes_manageable_layout_via_datgui.js

var done = '8742' // hashes of objects already in the room
var inprogress = '9125'
var todo = '28d4'

var ideas = {
  left:  ['InnovateIdeas1', 'InnovateIdeas2'], // to do
  right: ['InnovateIdeas3', 'InnovateIdeas4'], // done
  back:  ['InnovateIdeas5', 'InnovateIdeas6', 'InnovateIdeas7', 'InnovateIdeas8', 'InnovateIdeas9', 'InnovateIdeas10' ], // in progress
}

// ----

var FizzyText = function() {
  this.message = 'Ideas layout'
  this.pin = function() { setPinAll(true) }
  this.unpin = function() { setPinAll(false) }
  this.snap = function() { setAllIdeasOnPanels() }
  this.newLayout = function() { newPoses = getIdeasPoses() }
};

var text = new FizzyText();
var gui = new dat.GUI();
gui.add(text, 'message');
layoutController = gui.add(text, 'message', {initialPoses:0, newPoses:1});
gui.add(text, 'snap');
gui.add(text, 'pin');
gui.add(text, 'unpin');
gui.add(text, 'newLayout');

gui.domElement.style.marginRight = '600px'

layoutController.onChange(function(poses) {
  if (poses==0)setIdeasPoses( initialPoses )
  if (poses==1)setIdeasPoses( newPoses )
});

// ---- GUI --------------------------

var initialPoses = getIdeasPoses()

// setIdeasInitialPoses(initialPoses)
// setAllIdeasOnPanels()
// to call at the end of a session to reset

// setPinAll(true)
// could be used in window.onbeforeunload = function (e) { alert(1) };
// to avoid loosing content

// setPinAll(false)
// var newPoses = getIdeasPoses()
// setIdeasPoses(initialPoses)
// setIdeasPoses(newPoses)

// ---- dedicated functions --------------------------

function reloadIdeas(){
  const baseURL = 'https://fabien.benetou.fr/pub/home/Innovate/InnovateIdeas'
  const extension = '.png'
  var URLs = []
  for (var i=1;i<11;i++) URLs.push(baseURL+i+extension)
  loadAssetsFromURLs(URLs)
}

function removeIdeasFromMediaList(){
  for (var layout in ideas){
    for (var i of ideas[layout]){
      var el = getFirstElementFromPartialURL(i)
	el.removeComponent("listed-media")
    }
  }
}

function setPinAll(pinned){
  for (var layout in ideas){
    for (var i of ideas[layout]){
      var el = getFirstElementFromPartialURL(i)
      el.setAttribute("pinnable", {pinned: pinned} )
    }
  }
}
      
function resetPanel(el, wallFaced = 'back', forceReset = false){
  if (forceReset) {
    el.object3D.position.z = -10.7 + 4 * Math.random()
    el.object3D.position.y = 1.5 * Math.random() + 1
  }
  switch (wallFaced){
    case 'left' : 
      if (forceReset) {
        el.object3D.position.y--
	el.object3D.position.z += 2
      }
      el.object3D.position.x = -4.24
      // hardcoded, could be based on know entities
      el.object3D.rotation.y = Math.PI / 2
      break;
    case 'right': 
      if (forceReset) el.object3D.position.y--
      el.object3D.position.x = 4.7
      el.object3D.rotation.y = -Math.PI / 2
      break;
    case 'back': 
      el.object3D.position.z = -10.7
      el.object3D.rotation.y = 0
      break
  }
  el.object3D.rotation.x = 0
  el.object3D.rotation.z = 0
  el.object3D.scale.setScalar(1)
}

function resetAllIdeasOnPanels(){
  for (var layout in ideas){
    for (var i of ideas[layout]){
      var el = getFirstElementFromPartialURL(i)
      el.setAttribute("pinnable", {pinned: false} )
      resetPanel(el, layout, true)
      el.setAttribute("pinnable", {pinned: true} )
    }
  }
}

function snapAllIdeasOnPanels(){
  for (var layout in ideas){
    for (var i of ideas[layout]){
      var el = getFirstElementFromPartialURL(i)
      el.setAttribute("pinnable", {pinned: false} )
      resetPanel(el, layout)
      el.setAttribute("pinnable", {pinned: true} )
    }
  }
}

function setIdeasPoses(ideasPoses){
  for (var i in ideasPoses){
    var el = getFirstElementFromPartialURL(i)
    el.setAttribute("pinnable", {pinned: false} )
    el.object3D.position.copy( ideasPoses[i].position )
    //el.object3D.rotation = ideasInitialPoses[i].rotation
    //el.object3D.copy( ideasInitialPoses[i].scale )
    el.setAttribute("pinnable", {pinned: true} )
  }
}

function getIdeasPoses(){
  var ideasInitialPoses = {}   
  for (var layout in ideas){
    for (var i of ideas[layout]){
      var el = getFirstElementFromPartialURL(i)
      ideasInitialPoses[i] = {}
      ideasInitialPoses[i].position = el.object3D.position.clone()
      ideasInitialPoses[i].rotation = el.object3D.rotation.clone()
      ideasInitialPoses[i].scale = el.object3D.scale.clone()
      ideasInitialPoses[i].src = el.components["media-loader"].attrValue.src
    }
  }
  return ideasInitialPoses
}

// utils

function getFirstElementFromHash(hash){
	var g = AFRAME.scenes[0].querySelectorAll("[media-loader]")
	var matches = []
	for (let e of g){
		var m = e.components["media-loader"].attrValue.src.match(hash)
		if (m && m.length) matches.push(e)
	}
	return matches[0]
}

function getFirstElementFromPartialURL(partialURL){
  var element = null
  var medias = document.querySelectorAll("[media-loader]")
  for (var m of medias){
    var match = m.components["media-loader"].attrValue.src.match(partialURL)
    if (match && match.length > 0) return m
  }
}