Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer



If you find this site useful and you want to support, buy me a coffee   to keep this site alive and without ads.

Overlay spotfire controls values over visualizations

just add a dragTool.js in any text area and wrap elements with class=drag to see the dragtool postions

html

<div class='drag' id='hint1'>drag me</div>
<div class='drag' id='hint2'>take me</div>
<div class='drag' id='hint3'>move me</div>

dragTool.js 

toolBox = `<div class='drag' id="dragTool">
<div id='title'>Drag Tool</div>
<textarea id='style' >

1. Edit text area in html

2. Drag spotfire controls wrapped in class='drag' html tag
   E.g.: <font size=3 class='drag'><spotifrecontrol></font>

3. After dragging all the elements, copy the generated 
   output inside the <style> tag

4. Optionally remove javascript script (do not delete) 
   when done and save text area.

</textarea>
</div>


<style>
/*Draggable tool*/
#dragTool  {top:36.21345%; left:5.46445%;}


.drag{
 position:fixed;
 z-index:10;
}

#dragTool{
 position:fixed;
 height:220px; 
 z-index:10;

}
#dragTool textarea{
 height:200px;
 width:400px;
 background:#fff;
 color: rgb(135,0,135);
 font-family:courier;
 padding:10px;
 opacity: 1;
}

#dragTool #title{
 background:rgb(75,75,75);
 color:#fff;
 border:1px solid rgb(64,64,64);;
 padding:5px;
 font-size:13px;
 opacity: 1;
 padding:10px;
}

.container {position:relative;width: 100%;line-height: 0;}
.container img{max-width: 100%;}

</STYLE>`

var node = document.createElement("div");                 // Create a <li> node
if(!document.getElementById('dragTool')){
node.innerHTML=toolBox
document.body.appendChild(node);
}

highlightOn = true

//show window
$("#dragTool").show();


//make spotfire controls draggable by adding drag class
//<div class='drag'>test</div>
$(".drag").draggable({

  cursor: "move",
 drag: function (e) {

   id = $(this).attr('id')

   //calculate magic % numbers
  let left = (parseFloat($(this).position().left)) + "px" // / parseFloat($(window).width())) ).toFixed(5) + "%" ;
  let top = (parseFloat($(this).position().top)) + "px" // / parseFloat($(window).height())) ).toFixed(5) + "%" ;

   //store magic numbers
  mn = `#${id}\t\t{top:${top}; left:${left};}`
  $(this).attr("magicNumbers", mn)
 },
 refreshPositions: true,
 stop: getPositions
}).css({
 //border:"1px dashed blue",
 //"padding-bottom":"2%",
 //background:'yellow',
 cursor: "move",
 'backgroundColor': (highlightOn) ? "rgba(255, 55, 00,.09)" : ""
})

function getPositions() {
 positions = "";
 $(".drag").each(function (i, e) {
  //newMN = $(this).attr('magicNumbers')
  el = $(this)
  aPos = $(this).attr('magicNumbers')
  positions += aPos ? aPos + "\n" : "";
 })
 $('#style').val(positions)
}




6 comments:

Unknown said...

This is AWESOME! I'm looking forward to seeing how you've done it

Unknown said...

is there any workaround on this?

Jose Leviaguirre said...

on SpotfireX you need to add the jquery.js libraries to work before using dragTool.js. Also add this as your first statement at the beginning of the dragTool.js code

var $ = window.CustomJQuery;



* Checkout this link for an example on how to implement it:

https://community.tibco.com/wiki/how-include-your-own-instances-jquery-and-jqueryui-text-areas

Unknown said...

Thanks Jose, the only thing I still stuck on now is where the text could move over to other visualization areas. It's only allowing me to move text within the text area itself.

Unknown said...

It's work perfectly! Thanks Jose.

Jose Leviaguirre said...

Hello there,

Use position:fixed and play with z-index css styles to overlay your elements over other visuals.

position:fixed;
z-index:1;