Texto+

Prévia do widget

Este widget serve para criar uma caixa de texto customizada, com mais funções de personalização que a nativa do StreamElements, como possibilidade de adicionar fontes customizadas e contorno nas letras.
Agradecimentos especiais para a Dabs, do Pra Quem Gosta, por me permitir publicar este widget que eu fiz pra uso dela ^^

☕ Te ajudei? Me manda um cafézinho ^^

[email protected]

Índice:

Guia de configuração

Antes de começar, se você não sabe instalar um widget no StreamElements, veja aqui como instalar.

Mensagem

Nesse campo você vai digitar o texto que vai aparecer na tela. Entretanto, uma das funções do Texto+ é permitir alterar esse texto temporariamente direto pelo OBS Studio, pela função de interagir. Assim que o overlay for atualizado, o texto voltará ao conteúdo original.

Um exemplo de caso de uso seria:
Caso você receba convidados com frequência no seu canal, você pode alterar rapidamente o nome que está no overlay, sem logar no StreamElements.

Fonte

Aqui você escolhe qual a fonte do texto. Caso você tenha um arquivo de fonte baixado e queira utilizar, renomeie a extensão do arquivo para ".mp3" e carregue como se fosse um áudio.

Formatação

Aqui você configura a formatação do seu texto, como o nível do negrito, tamanho, alinhamento, cor, entre outros.

Contorno

Aqui você configura se seu texto terá algum contorno em volta, e a cor. Não recomendo utilizar contornos muito grandes, pois as bordas tendem a ficar levemente quebradas.

Códigos

Veja aqui como instalar um widget customizado no StreamElements.

HTML

<body
    data-customFontCheckbox="{{customFontCheckbox}}"
    data-italic="{{fontItalic}}"
    data-strokeSize="{{strokeSize}}"
    >
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family={{googleFont}}:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

    <textarea id="main" value="{{message}}" oninput="txtChange(this)">{{message}}</textarea>
    <textarea id="border" value="{{message}}">{{message}}</textarea>

</body>

CSS

:root {
    --fontWeigth: {{fontWeigth}};
    --fontColor: {{fontColor}};
    --fontSize: {{fontSize}}px;
    --googleFont: '{{googleFont}}';
    --textAlign: {{textAlign}};
    --lineHeight: {{lineHeight}};
    --strokeSize: {{strokeSize}};
    --strokeColor: {{strokeColor}};
}

@font-face {
    font-family: customFont;
    src: url("{{customFontLink}}")
}

body {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

textarea {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: calc(var(--strokeSize) * var(--fontSize) * 0.005);

    font-size: var(--fontSize);
    font-family: var(--googleFont);
    line-height: var(--lineHeight);
    text-align: var(--textAlign);
    font-weight: var(--fontWeigth);
    color: var(--fontColor);

    background: none;
    border: none;
    resize: none;
    overflow: hidden;
    outline: 0;

    &::placeholder {
        color: var(--fontColor);
        opacity: 100%!important;
    }

    &#main {
        z-index: 10;
    }

    &#border {
        z-index: 1;
        text-shadow: 
            calc(var(--strokeSize) * var(--fontSize) * -0.005) calc(var(--strokeSize) * var(--fontSize) * -0.005) 0 var(--strokeColor),
            0 calc(var(--strokeSize) * var(--fontSize) * -0.005) 0 var(--strokeColor),
            calc(var(--strokeSize) * var(--fontSize) * 0.005) calc(var(--strokeSize) * var(--fontSize) * -0.005) 0 var(--strokeColor),
            calc(var(--strokeSize) * var(--fontSize) * 0.005) 0 0 var(--strokeColor),
            calc(var(--strokeSize) * var(--fontSize) * 0.005) calc(var(--strokeSize) * var(--fontSize) * 0.005) 0 var(--strokeColor),
            0 calc(var(--strokeSize) * var(--fontSize) * 0.005) 0 var(--strokeColor),
            calc(var(--strokeSize) * var(--fontSize) * -0.005) calc(var(--strokeSize) * var(--fontSize) * 0.005) 0 var(--strokeColor),
            calc(var(--strokeSize) * var(--fontSize) * -0.005) 0 0 var(--strokeColor);
    }
}

body[data-customFontCheckbox="true"] textarea {
    font-family: customFont;
}

body[data-italic="true"] textarea {
    font-style: italic;
}

body[data-strokeSize="0"] #border {
    display: none;
}

Javascript

function txtChange(html) {
    document.querySelector('#border').value = html.value
}

Fields

{
    "credits1": {
        "type": "checkbox",
        "value": true,
        "label": "Detalhes de como fazer a configuração podem ser encontrados no site toolbox.danifluffy.dev :)",
        "group": "Texto+ | DaniFluffyCat ^^"
    },
    "credits2": {
        "type": "text",
        "label": "Você pode copiar o link abaixo:",
        "value": "toolbox.danifluffy.dev",
        "group": "Texto+ | DaniFluffyCat ^^"
    },
    "message": {
        "group": "Mensagem",
        "type": "text",
        "label": "Mensagem",
        "value": "Seu texto vem aqui"
    },
    "googleFont": {
        "group": "Fonte",
        "type": "googleFont",
        "label": "Selecione a fonte:",
        "value": "Roboto"
    },
    "customFontCheckbox": {
        "group": "Fonte",
        "type": "checkbox",
        "label": "Usar fonte customizada"
    },
    "customFontLink": {
        "group": "Fonte",
        "type": "sound-input",
        "label": "Carregue a fonte customizada (Renomeie a extensão para '.mp3'):"
    },
    "fontWeigth": {
        "group": "Formatação",
        "type": "slider",
        "label": "Nivel de negrito:",
        "value": 300,
        "min": 100,
        "max": 800,
        "step": 100
    },
    "fontItalic": {
        "group": "Formatação",
        "type": "checkbox",
        "label": "Itálico"
    },
    "fontColor": {
        "group": "Formatação",
        "type": "colorpicker",
        "label": "Cor",
        "value": "#000000"
    },
    "fontSize": {
        "group": "Formatação",
        "type": "number",
        "label": "Tamanho:",
        "value": 24,
        "min": 0,
        "max": 1000,
        "step": 1
    },
    "textAlign": {
        "group": "Formatação",
        "type": "dropdown",
        "label": "Alinhamento do texto:",
        "value": "center",
        "options": {
            "left": "Alinhar à esquerda",
            "center": "Alinhar ao centro",
            "right": "Alinhar à direita",
            "justify": "Justificar"
        }
    },
    "lineHeight": {
        "group": "Formatação",
        "type": "number",
        "label": "Altura da linha:",
        "value": 1,
        "min": 0,
        "max": 5,
        "step": 0.1
    },
    "strokeSize": {
        "group": "Contorno",
        "type": "slider",
        "label": "Tamanho do contorno:",
        "value": 0,
        "min": 0,
        "max": 10,
        "step": 0.1
    },
    "strokeColor": {
        "group": "Contorno",
        "type": "colorpicker",
        "label": "Cor do contorno:",
        "value": "#000000"
    }
}

☕ Te ajudei? Me manda um cafézinho ^^

[email protected]