Hi @elusien. Just did a bit of testing. Works great! Except - when I changed the outside border to 30px I’m getting a thin white line across the top and left hand edges. I also get this for other outside border values, but not others. For example 10px also gave me the thin white lines.
This appears to be a bug in the browsers that are based on Chromium (Chrome, Edge, Vivaldi etc…). It does not happen with Firefox. The line shouldn’t be there since a border of 30px means the space inside the window as a whole is 1860 x 1020 (1920-60 x 1080-60) and 1860 is exactly divisible by 5 (5 x 372) and 1020 is exactly divisible by 3 (3 x 340).
The silly thing is that looking at the width and height values in Chromium’s development tools shows exactly what you expect, but for some reason the part of the browser that “paints” the screen gets it wrong.
I’ll see about opening a bug report on chromium, but in the meantime I’m afraid you’ll just have to jiggle the width of the outside border and fine-tune it to remove the 1 pixel wide lines.
1 Like
That shouldn’t be too difficult to accomplish. I’ll have a look at it this evening.
1 Like
I use some javascript features that are not available in the Webkit HTML that the old webfx version of qT (and hence Shotcut) uses. Let me have a look and I’ll see if I can come up with such a version.
J’utilise certaines fonctionnalités javascript qui ne sont pas disponibles dans le Webkit HTML que l’ancienne version webfx de qT (et donc Shotcut) utilise. Laissez-moi jeter un œil et je verrai si je peux proposer une telle version.
2 Likes
Ah, Ok, thanks Elusien. I’m happy to jiggle the width ! if it’s not a problem with the code.
Fantastic. Thank you! Don’t want to drag you from your pool though … 
Merci.
Je me suis permis de modifier un peu votre code afin de remplir automatiquement le tableau “opening_order” en fonction des valeurs saisies pour le nombre de lignes et de colonnes.
Thank you.
I took the liberty of modifying your code a little to automatically fill the “opening_order” table according to the values entered for the number of rows and columns.
function randomize(tab) {
var i, j, tmp;
for (i = tab.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
tmp = tab[i];
tab[i] = tab[j];
tab[j] = tmp;
}
return tab;
}
let css_vars = get_all_root_variables_from_stylesheet();
let ncols = +css_vars['--cols'],
nrows = +css_vars['--rows'],
ncells = nrows * ncols;
var tab = new Array();
for (var i = 0; i < ncells; i++) {
tab[i] = i + 1
}
opening_order = randomize(tab);
1 Like
@jonray, @Namna, I have put a new version up on the website. It has a few more parameters, namely:
--operations : hold=3,open=5,hold=3,shut=5; /* Window pane operations e.g open over 5 seconds, stay open for 3 secs, shut over 5 secs */
--fade : false; /* Whether to fade panes in/out (true), or do an abrupt transition (false) */
--random_order : true; /* Whether to generate a random opening order (true), or use the order specified above */
“operations” enables you to specify the order you want things to happen and how long (in seconds) it will take. The default says: hold (don’t do any animation) for 3 seconds, then open the window panes over a 5 second period, then hold again for 3 seconds before finally shutting all the window panes over a 5 second period.
“fade” causes the window panes to fade in/out rather than an abrupt appear/disappear.
“random_order” says whether or not to ignore the opening order provided and let the app generate a random order.
I used some concise code I had “lying around” to shuffle a deck of cards:
function shuffled_array(array) { return array.sort(function(a, b){ return 0.5 - Math.random()}); }
if (css_vars['--random_order'] === 'true') {
opening_order = shuffled_array((Array.from(Array(ncells+1).keys())).slice(1));
}
You may notice that the extra white lines now occur more frequently. This is due to the way I had to modify the grid to enable fading. However, I have found out how to fix it. It is caused when the display is scaled. On Windows I normally run my laptop with “Scale = 125%”. If I change it to Scale=100% there are no wayward lines. The option is under “Settings >System > Display”. The other option is to use Firefox, which does not have this problem, and neither does OBS Studio.
3 Likes
@Namna when I wrote the “app” it was just a small project that took about half a day to complete. It’s grown a bit more complicated since the initial coding. It uses features (mainly CSS variables [custom properties] and “display: grid”) that do not exist in the old Webkit HTML of v20 Shotcut.
However, all is not lost. Greensock’s GSAP animation library works on these old versions of Shotcut and GreenSock’s standard “No Charge” license is very permissive (it even covers most commercial uses). It shouldn’t be too difficult to recode the app to use this and add in the code necessary to take advantage of Shotcut’s WebVfx library to make a proper Text:HTML/Overlay-HTML filter. In fact, using GSAP should simplify the code.
I’ll give it a try this week.
@Namna quand j’ai écrit “l’application”, c’était juste un petit projet qui prenait environ une demi-journée. C’est devenu un peu plus compliqué depuis le codage initial. Il utilise des fonctionnalités (principalement des variables CSS [propriétés personnalisées] et “affichage : grille”) qui n’existent pas dans l’ancien Webkit HTML de v20 Shotcut.
Cependant, tout n’est pas perdu. La bibliothèque d’animation GSAP de Greensock fonctionne sur ces anciennes versions de Shotcut et la licence “sans frais” de GreenSock est très permissive (elle couvre même la plupart des utilisations commerciales). Il ne devrait pas être trop difficile de recoder l’application pour l’utiliser et d’ajouter le code nécessaire pour tirer parti de la bibliothèque WebVfx de Shotcut pour créer un filtre Text:HTML/Overlay-HTML approprié. En fait, l’utilisation de GSAP devrait simplifier le code.
Je vais essayer cette semaine.
2 Likes
@elusien! @namna! @musicalbox! Anyone!
Hey!! It works like a DREAM!!
Fade-ins and outs are terrific. Quick and easy. These are both with the RANDOM feature on. Done in seconds!
But hang on…
If that is simple code I’d love to know what is complex LOL!.. Just look at it!
I am in total awe of people who can create code like that …
(Lord only knows how @shotcut and @brian do it.)…
3 Likes
Coding is simple, compared to playing an musical instrument or composing music. 
1 Like
Another gold nugget out of Elusien’s treasure chest 
@Elusien is there (or will there be) a link to this on your site somewhere? I’d hate to have to come here and find the HTML page sample each time I forget where I’ve put the file on my computer 
2 Likes
Si ce n’était pas trop demander, serait-il possible d’ajouter une option “true/false” pour faire disparaitre la grille par fondu une fois tous les pavés affichés ?
Un peu comme cela
If it was not too much to ask, would it be possible to add a “true/false” option to make the grid disappear by fading once all the blocks are displayed?
A bit like this
2 Likes
Good idea. You can do it of course by fading the grid MP4 within Shotcut but to have that option would be useful.
Bonne idée. Vous pouvez bien sûr le faire en estompant la grille MP4 dans Shotcut mais avoir cette option serait utile.
I would definitely second that statemet! Though for the golf competition app I developed for my golf club I had to write 800 lines of CSS, 1,400 lines of HTML and 7,500 lines of Javascript.
Yes, I plan to update the “resources” page, but wanted to more or less finalise the changes before I did that. Talking of changes:
Yes, I can and will do that.
2 Likes
Only making your own code is simple, but understanding other peoples code can be very hard
Are you using Sass, to make your CSS easier to maintain, 800 lines of CSS is a lot 
I wouldn’t agree totally. I think it’s what you have an aptitude for. Some people will never be able to code complex stuff. I could never write a novel. It’s just not in me. Likewise I couldn’t do what @elusien did - or what @namna does either. I’m fortunate that I had a bit of an aptitude for music and after playing, studying and teaching it for 40 years I can sometimes knock out a tune or two … However if could compose a No. 1 hit I would, but it isn’t that easy!
That’s what I love about this forum - a bunch of folks each having different skills to share. That’s my “Thought for the Day”, folks! 
2 Likes
Oui mais vu de l’autre coté, jouer d’un instrument nous parait bien plus dur. C’est en temps réel, on n’a pas le temps de réfléchir, il faut jouer la note au bon moment, ni trop tôt ni trop tard…
On n’a pas ce problème en codage, on a tout notre temps, y compris celui de faire une pause et reprendre le lendemain.
Yes but seen from the other side, playing an instrument seems much harder. It’s in real time, we don’t have time to think, we have to play the note at the right time, not too early or too late…
We don’t have this problem in coding, we have all our time, including the time to take a break and start again the next day.
1 Like
You have a point there! Thank you.
I have uploaded a new version of Jonray_grid.html to the website (Window Panes). It can be run in a browser, in OBS Studio as a browser-source and also in versions of Shotcut that supported the Text:HTML/Overlay-HTML filter (you need to tick the box in the filter stating that you will use the webvfx javascript framework).
It has an additional parameter:
remove_border : false /* Remove all borders once the "open" phase completes */
The file is considerably larger than the previous version since it contains the interface to the Shotcut filter as well as a minified version of the GSAP library. This is so you don’t need an internet connection to run the downloaded version locally on your system.
2 Likes