CSE student at ETH Zurich, currently working on personal projects
Published
Edited
Mar 5, 2020
Importers
2 stars
viewof inputValues = multiInput(
{
brightness: slider({ value: 0 }),
fontSize: slider({
min: 1,
max: 100,
step: 1,
value: 72,
title: "Text Size",
description: "Set the text size between 1px and 100px"
}),
// properties starting with `ignore_` are ignored
// in the output object.
ignore_br: html`<p>HTML Element</p>`,
text: html`<input type="text" value="Hello, World!" />`
},
{
// If `outputId` is not set there wont be an output div
outputId: "testli",
wrapperDivClass: "row",
inputDivClass: "col",
outputDivClass: "col output"
}
)
function multiInput(inputs, config) {
const wrapper = html`<div class="${config.wrapperDivClass}"></div>`;
const input = html`<div class="${config.inputDivClass}"></div>`;
wrapper.append(input);
if (config.outputId) {
const output = html`<div id="${config.outputId}" class="${config.outputDivClass}"></div>`;
wrapper.append(output);
}
for (var prop in inputs) input.append(inputs[prop]);
var get_values = function() {
var value = {};
for (var prop in inputs)
if (!prop.includes("ignore_")) value[prop] = inputs[prop].value;
return (wrapper.value = value);
};
wrapper.value = get_values();
wrapper.oninput = get_values;
return wrapper;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
