Develop Reference

MaterialUI component as Addon in vaadin 7

For my work in vaadin 7, I need to connect a Slider from MaterialUI.
The vaadin component.Slider is not suitable, because I need to set the color of the slider, labels from Java code, change the design styles and the color of the slider depending on the value (in the example, 3 colors and the slider on the green label should be green, yellow on yellow, and so on)
I have already added to the addon babel.min.js , react.production.min.js , react-dom.production.min.js , material-ui.production.min.js the latest versions as files. Everything that is specified in the material-ui example CDN started
The addon was created according to the description from adding JS as addon vaadin 7
Java class example
#JavaScript({
"vaadin://addons/materialui/resources/js/babel.min.js",
"vaadin://addons/materialui/resources/js/react.production.min.js",
"vaadin://addons/materialui/resources/js/react-dom.production.min.js",
"vaadin://addons/materialui/resources/js/material-ui.production.min.js",
"vaadin://addons/materialui/resources/js/sliderComponent.jsx",
"vaadin://addons/materialui/resources/js/materialui-connector.js",})
#StyleSheet("vaadin://addons/materialui/resources/css/materialui.css")
public class MaterialUI extends AbstractJavaScriptComponent {
public MaterialUI() {
addStyleName("v-materialui");
}
#Override
protected MaterialUIState getState() {
return (MaterialUIState) super.getState();
}
}
But then I have a stupor. In the connector, I tried to write as in the examples, directly. I tried to create my own file.js in the code was extends React.Component. Each time it ended with an error on an unidentified character '<' or on the use of an undefined ReactDOM.
The last attempt returns no errors, but gives no result at all [materialui-connector.js]:
window.ru_rlisystems_web_platform_addons_materialui_MaterialUI = function() {
let element = this.getElement();
let rootEl = document.createElement("rootMUI");
element.appendChild(rootEl);
let importScript = document.createElement("script");
importScript.type = 'text/babel';
importScript.innerHTML = 'const {\n' +
' Slider,\n' +
' Box\n' +
' } = MaterialUI;\n' +
'\n' +
' const marks = [\n' +
' {\n' +
' value: 0,\n' +
' label: \'0°C\',\n' +
' },\n' +
' {\n' +
' value: 20,\n' +
' label: \'20°C\',\n' +
' },\n' +
' {\n' +
' value: 37,\n' +
' label: \'37°C\',\n' +
' },\n' +
' {\n' +
' value: 100,\n' +
' label: \'100°C\',\n' +
' },\n' +
'];\n' +
'\n' +
'function valuetext(value) {\n' +
' return `${value}°C`;\n' +
'}\n' +
'\n' +
' // Create a theme instance.\n' +
' const theme = createTheme({\n' +
' palette: {\n' +
' primary: {\n' +
' main: \'#556cd6\',\n' +
' },\n' +
' secondary: {\n' +
' main: \'#19857b\',\n' +
' },\n' +
' error: {\n' +
' main: colors.red.A400,\n' +
' },\n' +
' },\n' +
' });\n' +
'\n' +
' function App() {\n' +
' return (\n' +
' <Box sx={{ width: 300 }}>\n' +
' <Slider\n' +
' aria-label="Small steps"\n' +
' defaultValue={20}\n' +
' getAriaValueText={valuetext}\n' +
' step={1}\n' +
' marks\n' +
' min={0}\n' +
' max={100}\n' +
' valueLabelDisplay="on"/>\n' +
' </Box>\n' +
' );\n' +
' }\n' +
'\n' +
' const root = ReactDOM.createRoot(document.getElementById(\'rootMUI\'));\n' +
' root.render(\n' +
' <App />\n' +
' );';
element.appendChild(importScript);
this.onStateChange = function() {
}
};
I tried to put the render in a separate file and connect it via #JavaScript, but I get the error
Uncaught SyntaxError: Unexpected token '<' (at
sliderComponent.jsx:32:9)
const { React } = require('./react.production.min')
const {
Slider,
Box
} = require('material-ui.production.min')
const marks = [
{
value: 0,
label: '0°C',
},
{
value: 20,
label: '20°C',
},
{
value: 37,
label: '37°C',
},
{
value: 100,
label: '100°C',
},
];
function valuetext(value) {
return `${value}°C`;
}
function App() {
return (
<Box sx={{ width: 300 }}>
<Slider
aria-label="Small steps"
defaultValue={20}
getAriaValueText={valuetext}
step={1}
marks
min={0}
max={100}
valueLabelDisplay="on"/>
</Box>
);
}
const root = ReactDOM.createRoot(document.getElementById('rootMUI'));
root.render(
<App />
);
Is there any chance of using this library in vaadin 7? Or maybe there are examples and libraries easier to achieve my goals?

How to Add link to message

I was trying to make a notification with line notify but I dont know how to insert a command that puts a link from my google sheet to the message of the notification
// Line Notify
function onFormSubmit() {
var form = FormApp.openById('1ELczQ-uW1mauQrHFBpHK2pQnCCkvPf_4Nq-DPqM4nMw');
var fRes = form.getResponses();
var formResponse = fRes[fRes.length - 1];
var itemResponses = formResponse.getItemResponses();
var link = shape.getLink();
if (link != null && link.getLinkType() == SlidesApp.LinkType.URL) {
Logger.log('Shape has link to URL: ' + link.getUrl());
}
var msg = 'Electric Forklift Incentive'
+ ' \n' + itemResponses[5].getItem().getTitle() + ': ' + itemResponses[5].getResponse()
+ ' \n' + itemResponses[0].getItem().getTitle() + ': ' + itemResponses[0].getResponse()
+ ' \n' + itemResponses[1].getItem().getTitle() + ': ' + itemResponses[1].getResponse()
+ ' \n' + itemResponses[2].getItem().getTitle() + ': ' + itemResponses[2].getResponse()
+ ' \n' + itemResponses[3].getItem().getTitle() + ': ' + itemResponses[3].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
sendLineNotify(msg);
}
function sendLineNotify(message) {
var token = ["DdiU5tUykpSRpxRVqmEnM7ul3hcE3NEvc6Vzwknyzo7"];
var options = {
"method": "post",
"payload": "message=" + message,
"headers": {
"Authorization": "Bearer " + token
}
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
}

Merge every two elements into 1 element in javascript array

Suppose I have the following array in JavaScript:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
How can I write code to merge every two elements into one element? So that each pair, is only separated by 1 comma?
I'm looking to get the following output:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3'
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11'
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18'
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
I want it to be like the above, whereby every 2 elements are amalgamated.

You can use Array.from, assuming that the length of the array is even.
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
];
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
console.log(res);

How to dynamically change size of the new window? [duplicate]

This question already has answers here:
How to get the image size (height & width) using JavaScript
(33 answers)
Closed 3 years ago.
I have a JS file connected with my JSP file. I want to show new window with a photo, every time I hit the link.
So far everything is okay, new window appears, but it has strictly specified width and height.
else if (nameClass == "label3"){
var myWindow = window.open("", "MsgWindow", "width=1600, height=1000");
myWindow.document.write("<img src='images/images/szafa.png'>");
}
How can I change that to have a dynamically changed size of the window, depends of the image size?

I have not tested this code but you will get the idea:
var myWindow = window.open("", "MsgWindow", "width=100, height=100, resizable=1, scrollbars=1, menubar=1");
myWindow.document.write(
'<script language="Javascript" type="text/javascript">' +
'function getElById(idVal)' +
'{' +
' if (document.getElementById != null)' +
' return document.getElementById(idVal)' +
' if (document.all != null)' +
' return document.all[idVal]' +
' alert("Problem getting element by id")' +
' return null' +
'}' +
'function resizer()' +
'{' +
' var elem = getElById("pic");' +
' if(elem)' +
' {' +
' var oH = elem.clip ? elem.clip.height : elem.offsetHeight;' +
' var oW = elem.clip ? elem.clip.width : elem.offsetWidth;' +
' window.resizeTo( oW, oH );' +
' var myW = 0, myH = 0, d = window.document.documentElement, b = window.document.body;' +
' if( window.innerWidth ) ' +
' { ' +
' myW = window.innerWidth; ' +
' myH = window.innerHeight; ' +
' }' +
' else if( d && d.clientWidth ) ' +
' { ' +
' myW = d.clientWidth; ' +
' myH = d.clientHeight; ' +
' }' +
' else if( b && b.clientWidth ) ' +
' { ' +
' myW = b.clientWidth; ' +
' myH = b.clientHeight; ' +
' }' +
' window.resizeTo(6+ oW + ( oW - myW ),6+ oH + ( oH - myH ) );' +
' }' +
'}' +
'</script>'
);
myWindow.document.write("<img id='pic' src='images/images/szafa.png'>");
myWindow.document.body.onLoad='resizer';
Or you can prepare a PHP script which will output the above HTML and provide the image name as URL query parameter to the script.

Forge viewer model position after transformation

I've used the Model transformation extension to move the model from one point to another. Now How can I get the new location/coordinates/position of the transformed model or its bounding box as when I query the bounding box min and max points they are the same all the time. Any ideas??
My target is to get the new position of the model according to the origin after translation.

I isolated the core section of that extension and check the position and bounding box before and after transformation. To be simple, only translate. It looks those values are updated after transformation. Could you check if it could help to diagnose your problem?
To test it, select one object and run the function.
getModifiedWorldBoundingBox (fragIds, fragList) {
const fragbBox = new THREE.Box3()
const nodebBox = new THREE.Box3()
fragIds.forEach(function(fragId) {
fragList.getWorldBounds(fragId, fragbBox)
nodebBox.union(fragbBox)
})
return nodebBox
}
$('#test').click(function(rt){
var dbids = NOP_VIEWER.getSelection();
var it = NOP_VIEWER.model.getData().instanceTree;
var fragList = NOP_VIEWER.model.getFragmentList();
fragIds = [];
it.enumNodeFragments(dbids[0], function(fragId) {
fragIds.push(fragId);
}, false);
var bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox before transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS before transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix before transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
fragProxy.position.x += 10;
fragProxy.position.y += 10;
fragProxy.position.z += 10;
fragProxy.updateAnimTransform()
});
NOP_VIEWER.impl.sceneUpdated(true)
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS after transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix after transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
});
bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox after transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
});