Hi Jean-emmanuel,
Hope you are well !
I'm contacting you here as I have a more or less specific issue regarding a (VERY BIG) modal I'm currently creating:
- When loading the session I keep having the notification:
"The connection to the server has been interrupted" which is annoying to see but the session is working
- I'm noticing a slow performance when clicking a button
If you look at my session below the modal has a panel inside, in that panel there are 8 tabs.
Then inside the very first tab of the panel (NOTE_SELECTION_4/4) I have another panel which has 24 tabs.
Later on, I'm planning to have the same configuration for the other 7 tabs left (All the "NOTE_SELECTION" tabs) so I would end up with hundreds of tabs and images in the end (which is probably too much ?).
I was reading around the forum but from my understanding, I would need to optimize it to fix the issues since I also have lots of images but how could I do it exactly ? And what part would need to be optimized ? Just this single modal is 24.1MB.
Here is the link to the session:
https://bit.ly/3juxd6i
Looking forward to hearing from you,
Swayrian
Hi !
First of all, big sessions tend to be heavy, you might be able to optimize it but it might stay heavy in the end, especially on old devices.
My advice is to remove all base64 images from the session and save them as regular images files in a folder next to the session file, you'll be able to load them just as well and they wont make the session file unnecessary big (at least in term of file size).
All css rules that affect multiple widgets should be moved in a theme file as well, extra css classes can be added to widget if needed.
Then, if possible, avoid unnecessary widget duplication, for instance the two first tabs in your modal seem to contains the same widgets, you could simply reuse the same widgets by only modifying the widgets behavior depending on a switch selector (using advanced syntaxes, scripting and/or the custom module) instead of switching tabs.
Jean-Emmanuel
1 Like
Thank you for your detailed response, it makes sense !
I think I would need to break down in 3 steps since I've never done anything as you described yet.
Starting with removing the base64 images if I take for example the one I have on the modal, the url of that image on my computer (I'm on mac) is:
(Using terminal to find the link of an image on my computer)
/Users/username/Desktop/OSC/OSC\ Template/My\ OSC\ Templates/Image_folder/Note\ selection.png
So how can I link an image from a folder in the session ?
I tried the following using CSS but it didn't work:
background-image: url("image.jpg");
So I think we should have like that:
background-image: url("/Users/username/Desktop/OSC/OSC\ Template/My\ OSC\ Templates/Image_folder/Note\ selection.png");
Swayrian
The image url can be either absolute (starts with a "/"), or relative to the session file's location ("images/image.png" will look for image.png in the "image" folder next to the session file). The backslashes can be removed, they're used in the terminal to indicate the spaces are part of the string and separators, but here you have double quotes to indicate the beginning and the end of the string.
1 Like
Alright, I'm going step by step !
I was now able to remove all the base64 images and I replaced them with regular images files.
However I have an issue with modals, I can't hide the tabs on top anymore, this is what I have in CSS:
background-image: url("imagesfolder/myimage.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
//This should normaly hide the tab of a modal ?
.popup-title {
display:none;
}
I think I'm missing something in CSS to make it work again ?
Swayrian
Mixing inline syntax and selector syntax in css doesn't work (CSS Tips - Open Stage Control). Modal widgets have a popupLabel property which can be set to false to get the same result.
If you don't mind sharing the file above, I'll make this thread public. I usually discourage the use of PM for questions that could benefit the community or that the community could contribute to.
Yes definitely, sharing is caring !
I will also create a thread soon to understand more what you said earlier, so how to assign different behaviours to the same widget to avoid unnecessary duplication.
Thanks a lot for your help !
Swayrian
This is eally useful and have moved away where possible from using base64 images and I have also created extra css classes for button templates that I use a lot in my OSC work.
But I have tried (and failed) to add an image to a css class that I have created in my theme file and can only control colours and borders etc.
Edit: I've searched around and worked this out - solution here : How to add image to theme