Hi, I would like to ask why background is always transparent now even if composition background is not set to transparent?
That is the (currently) intended behavior. It’s useful to change the composition background while working on the template, and in most cases you want the background to be transparent when the template is exported. If you need a solid background, you can always create a rectangular shape that will fill the background.
1 Like
Hi, i am trying to make the text size scale according to the character count so it fits inside a graphic i am not really a coder but from what i have read on the documentation, this is what i have came up with, it doesn’t seemed to be updating the new font size.
function adjustFontSizeAndContent(element, value, maxCharacters, minFontSize) {
// Check if the length of the value exceeds the maximum allowed characters
if (value.length > maxCharacters) {
// Calculate the number of characters over the limit
const charactersOverLimit = value.length - maxCharacters;
// Adjust the font size based on the number of characters over the limit
const baseFontSize = 80; // Base font size
const reductionFactor = 2; // Reduction factor for font size per character over the limit
let newSize = baseFontSize - charactersOverLimit * reductionFactor;
// Ensure the font size does not go below the minimum size
newSize = Math.max(newSize, minFontSize);
// Set the font size of the element
element.fontSize = `${newSize}px`;
element.setContent(value);
} else {
// Set the content without any adjustments
element.setContent(value);
}
}
loopic.useOnUpdate("_title", (key, value, next) => {
const maxCharacters = 20; // Maximum character limit
const minFontSize = 50; // Minimum font size
const element = this.findElementByKey(key);
// Call the function to adjust font size and content
adjustFontSizeAndContent(element, value, maxCharacters, minFontSize);
// Omitting the next middleware execution as we have defined our own behavior
});
Any help would be appreciated
You almost had it. Instead of
you should write
element.style.fontSize.value = newSize;
The pixel unit should be omitted (pixel is the default unit for fontSize in Loopic anyway).
Hello, I can’t figure out how to do the following. I have two sequences and 2 text fields f1 and f2. I need to do this so that
if (f1!=“” and f1!=null) and (f2=“” or f2=null)
, then output sequence 1.
if f1!=“” and f1!=null and f2!=“” and f2!= null
, then output sequence 2.
HI thanks for the help.
i have got a few other question
-
is it possible to write a function where when it exceeds an amount of characters it applies a line break with \n without using the built-in text element multiline function?
-
Would it be possible to use the
goToAndPlaymethod with useOnUpdate when a new value is inputted.
Thanks
It would be the best if you could learn some Javascript basics. Then it would be much easier for you to write some basic functionalities like this one.
The code you need probably looks something like this:
const textEl = this.findElementByKey("_text");
if (loopic.templateData.sentence1 === "something" && loopic.templateData.sentence2 === "something else") {
textEl.setContent("Some content...");
} else if (loopic.templateData.sentence1 === "abc") {
textEl.setContent("Some other content...");
}
- is it possible to write a function where when it exceeds an amount of characters it applies a line break with \n without using the built-in text element multiline function?
Yes, if you disable the multiline option for the Text element and if you manually check the text and apply “\n” directly to the content of the Text element.
- Would it be possible to use the
goToAndPlaymethod with useOnUpdate when a new value is inputted.
Sure, I guess you need something like this:
loopic.useOnUpdate("_key", (key, value, next) => {
this.goToAndPlay(10);
});
Hello, this is not exactly what I need. I need that, depending on whether the text field “f2” is empty or not, one sequence or another is displayed. By sequence I mean layer. That is, if f2 is empty, I need layer 1 to be turned on and layer 2 to be turned off, and if f2 is not empty, then layer 1 is turned off and layer 2 is turned on.
In that case, you can change the layer’s isVisible property to false and refresh the render.
For example:
const layer1element = this.findElementByKey("_layer1");
const layer2element = this.findElementByKey("_layer2");
if (!loopic.templateData["f2"]) {
layer2element.layer.isVisible = false;
} else {
layer1element.layer.isVisible = false;
}
this.refreshRender();
It works but not quite as it should. When I add the text “f2” to the preview, it still only shows layer1. And also, I need the condition to look something like this,
const layer1element = this.findElementByKey("Layer1");
const layer2element = this.findElementByKey("Layer2");
const text = this.findElementByKey("f2");
if(text.textContent == "" || text.textContent == null)
{
layer2element.layer.isVisible = false;
}
else
{
layer1element.layer.isVisible = false;
}
but it doesn’t work like that
If you want to check the current content of the Text element, you need to read text.content property instead of text.textContent.
And at the bottom, you need to call this.refreshRender().
Hi @imare I hope that you are well. Thank you for all the progressions you’ve made with Loopic since it was started. I want to know if you’re maybe looking into the following features:
Firstly a scaling option that works with a seperate anchor point like in After Efects etc.
Secondly 3D rotation and positioning
Thirdly PSD import
Images = looks exactly as it is in Photoshop
Shapes = Editable Shape layers in Loopic
Text = Editable Loopic Text layers
Lastly I would like to know if the following feature is already possible, maybe through the comp editor.
What I’m looking to do is to use a specific layer as a mask/matte for another so the idea is to load images and animate their position and scale and other (Loopic) items like text, shapes and images to only be filled in where an imported image is opaque. I’m tasked with building a full GFX package and the clients gave me a few PSD files that have some complicated shapes that need to be able to change colors on the fly, that I can do currently with custom mask/shape layers, but that will take hours to do a basic animation that needs to be on multiple different templates.
I can do this currently but all the templates don’t look the same if I do it by hand, also it takes hours to do
Thanks again, I’m looking forward to what is to come
Hi, thank you for the feedback. Scale and rotation properties and PSD importing functionalities are in the backlog and are one of the next big features to come. I already have a new version with some other new features in the development/testing, so the features you mentioned here will come a bit later.
Now about your concrete problem; I believe what you need to achieve is possible with CSS blending modes. You’ll have to import all your image sequences and play around with the CSS blending modes between the alpha channel image sequence and the layers you want to mask. It’s been a while since I played with this last time, so I may have missed something, but it’s worth experimenting. This is also one of the things that would be very handy to have as a built-in tool in Loopic.
Had a similar need for masking, for doing transparency on a layer. I solved it by adding a masking image in the composition action when I updated the layer.
If for instance you have the following, you can add a mask using the domNode and applying a masking image. It can be either a gradient or a png. Then you can focus on the animation.
const plate = this.findElementByKey(`_imagetobemasked`)
plate.domNode.style.webkitMaskBoxImage = 'linear-gradient(to right, black 75%, transparent 99%)'```
1 Like
Thank you very much ths is very helpful, I’ve been playing around with it for a bit and have been able to mask images that are already on the internet, but this makes the whole template slow to load. Do you perhapse have the code to make a layer mask using a loopic item?
Thanks again
I haven’t really noticed it making it particularly slow. A bigger worry for loading times is if you have a lot of fonts or image-sequences as they are stored as data-uri in the page.
Unfortunately I haven’t been able to do this type of masking using Loopic controls, if that is what you mean. If you mean using an image placed inside of Loopic, you could place an image off screen and then just fetch the background-image source and then use that instead of the linear-gradient.
let mymaskimage = this.findElementByKey('_maskimage').domNode.childNodes[0].currentSrc
SVG:s might be smaller over-all so that is also one way to keep the loading times low.
Note: It is not uncommon for a graphic designer to design something without knowing the limitations and possibilities of HTML/Javascript design. It’s easy enough to do something in Adobe software when they don’t have to think about the implications or loading times. There is no shame in going back and telling them if something is hard/impossible to do within a timeframe and come up with a solution together - simplified masks or transformations as some examples.
If it is a very complex animation they want with lots of flash and filters and transformations - have them do it as a movie file instead and run that on a separate video layer in Caspar from your template and sync them that way.
Hello !
I have a small question :
Is it possible to query a GraphQL Directly from an HTML template, and specifically one made in loopic ?
I have almost no coding skills, sorry if its a dumb question
Cheers, Louise
As JavaScript is one of the languages, that sre supported by GraphQL i ser no reason, why that should not be possible. For loopic specific questions use the loopic tread.
Would I be able to import text from a google calender or from a csv file exported with dates in a template?