# frozen_string_literal: true
new(molecule: :roller) do |params = {}|
roller_id = params[:id] ||= identity_generator
roller = box({ id: roller_id, width: 900, height: 333, color: :orange })
JS.eval("aRoll('#{roller_id}_roller','#{roller_id}', #{roller.width}, #{roller.height})")
roller
end
new({ molecule: :button }) do |params, bloc|
but = box({ smooth: 6, shadow: { alpha: 0.3 }, width: 25, height: 25, color: :red })
but.shadow({ alpha: 0.6, left: -3, top: -3, blur: 3, invert: true })
label = params.delete(:label) || 'button'
idf_f = params.delete(:id) || identity_generator
but.text({id: idf_f, data: label, component: { size: 9 }, center: true, position: :absolute })
but.instance_variable_set('@on', true)
but.set(params)
def code_logic(but, bloc)
but.instance_exec(&bloc) if bloc.is_a?(Proc)
if but.instance_variable_get('@on') == true
but.instance_variable_set('@on', false)
else
but.instance_variable_set('@on', true)
end
end
but.touch(true) do
code_logic(but, bloc)
end
but
end
def roll_playback_verif(val)
puts val
end
class Atome
def roller_play(idf, callback, &bloc)
idf = "#{idf}_roller"
puts "create a 'ruby_method' on the fly and make RBevalL('ruby_method(ev)')"
JS.eval <<~JS
globalThis.#{callback} = function(ev) {
console.log(ev);
console.log('------');
};
JS
JS.eval("document.getElementById('#{idf}').play(#{callback});")
end
def roller_stop(idf)
idf = "#{idf}_roller"
JS.eval("document.getElementById('#{idf}').stop();")
end
def roller_tempo(idf, tempo)
idf = "#{idf}_roller"
JS.eval("setTempo('#{idf}', #{tempo})")
end
end
roller({ id: :roller, callback: :roll_playback_verif })
button({ label: :play, id: :player, top: :auto, bottom: 0 }) do
if @on
roller_play('roller', 'pianorollCallback') do |note|
puts 'super'
end
else
roller_stop('roller')
end
end
slider({ orientation: :vertical, range: { color: :white }, value: 55, width: 18, height: 199, attach: :intuition,
left: 900, top: 3, color: :red, cursor: { color: { alpha: 1, red: 0.12, green: 0.12, blue: 0.12 },
width: 9, height: 6, smooth: 3 } }) do |value|
A.roller_tempo('roller', value * 3)
end
# case "xrange":
# document.getElementById("proll").xrange=k.value*timebase;
# break;
# case "xoffset":
# document.getElementById("proll").xoffset=k.value*timebase;
# break;
# case "yrange":
# document.getElementById("proll").yrange=k.value;
# break;
# case "yoffset":
# document.getElementById("proll").yoffset=k.value;
# break;
# }
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
# JS.eval <<~JS
# var actx, osc, gain;
#
# function init_audio() {
# timebase = 16;
# actx = new AudioContext();
# osc = actx.createOscillator();
# gain = actx.createGain();
# gain.gain.value = 0;
# osc.type = "sawtooth";
# osc.start();
# osc.connect(gain).connect(actx.destination);
# }
#
#
# function Callback(ev) {
# const currentTime = actx.currentTime;
# const startTime = currentTime + (ev.t - performance.now() / 1000);
# const endTime = currentTime + (ev.g - performance.now() / 1000);
# osc.detune.setValueAtTime((ev.n - 69) * 100, startTime);
# gain.gain.setTargetAtTime(0.5, startTime, 0.005);
# gain.gain.setTargetAtTime(0, endTime, 0.1);
# }
#
# function play() {
# gain.connect(actx.destination);
# actx.resume().then(() => {
# console.log('Audio context resumed');
# });
# document.getElementById("proll").play(Callback);
# }
#
# function stop() {
# gain.disconnect();
# actx.suspend().then(() => {
# console.log('Audio context suspended');
# });
# document.getElementById('proll').stop()
# }
# JS
#
def api_infos
{
"example": "Purpose of the example",
"methods_found": [
"005",
"1",
"12",
"3",
"5",
"6",
"connect",
"createGain",
"createOscillator",
"currentTime",
"delete",
"destination",
"detune",
"disconnect",
"eval",
"g",
"gain",
"getElementById",
"height",
"instance_exec",
"instance_variable_get",
"instance_variable_set",
"is_a",
"log",
"n",
"now",
"resume",
"roller_tempo",
"set",
"shadow",
"start",
"suspend",
"t",
"text",
"touch",
"type",
"value",
"width"
],
"005": {
"aim": "The `005` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `005`."
},
"1": {
"aim": "The `1` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `1`."
},
"12": {
"aim": "The `12` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `12`."
},
"3": {
"aim": "The `3` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `3`."
},
"5": {
"aim": "The `5` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `5`."
},
"6": {
"aim": "The `6` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `6`."
},
"connect": {
"aim": "The `connect` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `connect`."
},
"createGain": {
"aim": "The `createGain` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `createGain`."
},
"createOscillator": {
"aim": "The `createOscillator` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `createOscillator`."
},
"currentTime": {
"aim": "The `currentTime` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `currentTime`."
},
"delete": {
"aim": "The `delete` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `delete`."
},
"destination": {
"aim": "The `destination` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `destination`."
},
"detune": {
"aim": "The `detune` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `detune`."
},
"disconnect": {
"aim": "The `disconnect` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `disconnect`."
},
"eval": {
"aim": "The `eval` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `eval`."
},
"g": {
"aim": "The `g` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `g`."
},
"gain": {
"aim": "The `gain` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `gain`."
},
"getElementById": {
"aim": "The `getElementById` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `getElementById`."
},
"height": {
"aim": "The `height` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `height`."
},
"instance_exec": {
"aim": "The `instance_exec` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `instance_exec`."
},
"instance_variable_get": {
"aim": "The `instance_variable_get` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `instance_variable_get`."
},
"instance_variable_set": {
"aim": "The `instance_variable_set` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `instance_variable_set`."
},
"is_a": {
"aim": "The `is_a` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `is_a`."
},
"log": {
"aim": "The `log` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `log`."
},
"n": {
"aim": "The `n` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `n`."
},
"now": {
"aim": "The `now` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `now`."
},
"resume": {
"aim": "The `resume` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `resume`."
},
"roller_tempo": {
"aim": "The `roller_tempo` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `roller_tempo`."
},
"set": {
"aim": "The `set` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `set`."
},
"shadow": {
"aim": "The `shadow` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `shadow`."
},
"start": {
"aim": "The `start` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `start`."
},
"suspend": {
"aim": "The `suspend` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `suspend`."
},
"t": {
"aim": "The `t` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `t`."
},
"text": {
"aim": "The `text` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `text`."
},
"touch": {
"aim": "Handles touch or click events to trigger specific actions.",
"usage": "Example: `touch(:tap) do ... end` triggers an action when tapped."
},
"type": {
"aim": "The `type` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `type`."
},
"value": {
"aim": "The `value` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `value`."
},
"width": {
"aim": "The `width` method's purpose is determined by its specific functionality.",
"usage": "Refer to Atome documentation for detailed usage of `width`."
}
}
end