# 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