1
0
Fork 0

s/chyron/ticker

main
Jeff Moe 2022-12-27 13:32:58 -07:00
parent 09383509de
commit 5bda4cc681
1 changed files with 33 additions and 33 deletions

View File

@ -4,48 +4,48 @@ import {HsvPicker} from 'svelte-color-picker';
import { enhance } from '$app/forms';
function chyron_font_color_Callback(chyron_font_color) {
let r = chyron_font_color.detail.r;
let g = chyron_font_color.detail.g;
let b = chyron_font_color.detail.b;
let a = chyron_font_color.detail.a;
function ticker_font_color_Callback(ticker_font_color) {
let r = ticker_font_color.detail.r;
let g = ticker_font_color.detail.g;
let b = ticker_font_color.detail.b;
let a = ticker_font_color.detail.a;
let horizontal = document.querySelector(".horizontal");
horizontal.style.color = `rgba(${r},${g},${b},${a})`;
}
function chyron_background_color_Callback(chyron_background_color) {
let rb = chyron_background_color.detail.r;
let gb = chyron_background_color.detail.g;
let bb = chyron_background_color.detail.b;
let ab = chyron_background_color.detail.a;
function ticker_background_color_Callback(ticker_background_color) {
let rb = ticker_background_color.detail.r;
let gb = ticker_background_color.detail.g;
let bb = ticker_background_color.detail.b;
let ab = ticker_background_color.detail.a;
let hz_background = document.querySelector(".horizontal");
hz_background.style.background = `rgba(${rb},${gb},${bb},${ab})`;
}
/** @type {import('./$types').ActionData} */
export let form;
let chyron_text_01 = 'chyron text here. Mooooo.';
let chyron_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 555.';
let chyron_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let chyron_text_04 = ' 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let ticker_text_01 = 'ticker text here. Mooooo.';
let ticker_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. ticker text here. Mooooo. 555.';
let ticker_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let ticker_text_04 = ' 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let chyron_font_size = 2.75;
let chyron_font_weight = 600;
let chyron_speed = 30;
let ticker_font_size = 2.75;
let ticker_font_weight = 600;
let ticker_speed = 30;
</script>
<div class="horizontal">
<!-- delay affects text starting point offset-->
<Ticker duration={chyron_speed} delay=0 pausing=false>
<Ticker duration={ticker_speed} delay=0 pausing=false>
<span
style="font-size: {chyron_font_size}em;
font-weight: {chyron_font_weight}
style="font-size: {ticker_font_size}em;
font-weight: {ticker_font_weight}
">
{chyron_text_01}
{chyron_text_02}
{chyron_text_03}
{chyron_text_04}
{ticker_text_01}
{ticker_text_02}
{ticker_text_03}
{ticker_text_04}
</span>
</Ticker>
</div>
@ -56,22 +56,22 @@ let chyron_speed = 30;
</div>
<br>
<div class="font_color_picker">
Font Color: <HsvPicker on:colorChange={chyron_font_color_Callback} startColor={"#00FF00"}/>
Font Color: <HsvPicker on:colorChange={ticker_font_color_Callback} startColor={"#00FF00"}/>
</div>
<p></p>
<div class="background_color_picker">
Background Color: <HsvPicker on:colorChange={chyron_background_color_Callback} startColor={"#5500FF"}/>
Background Color: <HsvPicker on:colorChange={ticker_background_color_Callback} startColor={"#5500FF"}/>
</div>
<div class="form">
<p>
<input bind:value={chyron_text_01} placeholder="{chyron_text_01}">
<input bind:value={chyron_text_02} placeholder="{chyron_text_02}">
<input bind:value={chyron_text_03} placeholder="{chyron_text_03}">
<input bind:value={chyron_text_04} placeholder="{chyron_text_04}">
<input bind:value={ticker_text_01} placeholder="{ticker_text_01}">
<input bind:value={ticker_text_02} placeholder="{ticker_text_02}">
<input bind:value={ticker_text_03} placeholder="{ticker_text_03}">
<input bind:value={ticker_text_04} placeholder="{ticker_text_04}">
</p>
Font Size: <input type=range min="0.5" max="40" bind:value={chyron_font_size}>
Font Weight: <input type=range min="200" max="600" bind:value={chyron_font_weight}>
Speed: <input type=range min="5" max="200" bind:value={chyron_speed}>
Font Size: <input type=range min="0.5" max="40" bind:value={ticker_font_size}>
Font Weight: <input type=range min="200" max="600" bind:value={ticker_font_weight}>
Speed: <input type=range min="5" max="200" bind:value={ticker_speed}>
</div>
</div>