atome 0.5.7.5.9 → 0.5.7.6.5

data/vendor/assets/src/medias/utils/examples/atomes/animation/example.rb

@@ -0,0 +1,123 @@
+# # frozen_string_literal: true
+#
+# bb = text({ id: :the_ref, width: 369, data: "touch me!" })
+# bb.color(:orange)
+# box({ id: :my_box, drag: true })
+# c = circle({ id: :the_circle, left: 222, drag: { move: true, inertia: true, lock: :start } })
+# c.shadow({ renderers: [:html], id: :shadow2, type: :shadow,
+#            attach: [:the_circle],
+#            left: 3, top: 9, blur: 19,
+#            red: 0, green: 0, blue: 0, alpha: 1
+#          })
+#
+# Atome.new(animation: { renderers: [:browser], id: :the_animation1, type: :animation, attach: [],fasten: []})
+# aa = animation({
+#                  targets: %i[my_box the_circle],
+#                  begin: {
+#                    left_add: 0,
+#                    top: :self,
+#                    smooth: 0,
+#                    width: 3
+#                  },
+#                  end: {
+#                    left_add: 333,
+#                    top: 299,
+#                    smooth: 33,
+#                    width: :the_ref
+#                  },
+#                  duration: 800,
+#                  mass: 1,
+#                  damping: 1,
+#                  stiffness: 1000,
+#                  velocity: 1,
+#                  repeat: 1,
+#                  ease: 'spring'
+#                }) do |pa|
+#   puts "animation say#{pa}"
+# end
+# aa.stop(true) do |val|
+#   puts " stop : #{val}"
+# end
+#
+# aa.start(true) do |val|
+#   puts " start : #{val}"
+# end
+#
+# bb.touch(true) do
+#   aa.play(true) do |po|
+#     puts "play say #{po}"
+#   end
+# end
+#
+# aaa = animation({
+#                   # no target for advanced animations control on callback
+#                   begin: {
+#                     left_add: 0,
+#                     top: :self,
+#                     smooth: 0,
+#                     width: 3
+#                   },
+#                   end: {
+#                     left_add: 333,
+#                     top: :self,
+#                     smooth: 33,
+#                     width: :the_ref
+#                   },
+#                   duration: 1800,
+#                   mass: 1,
+#                   damping: 1,
+#                   stiffness: 1000,
+#                   velocity: 1,
+#                   repeat: 1,
+#                   ease: 'spring'
+#                 }) do |pa|
+#   puts "get params to do anything say#{pa}"
+# end
+# wait 7 do
+#   aaa.play(true) do |po|
+#     puts "play aaa say #{po}"
+#   end
+# end
+
+#TODO : make the code above works
+# create a animation object
+# create callback methode when playing
+
+# # here is how to animate shape :
+wait 0.2 do
+  puts " we wait 0.2 sec  else there's a  of a problem if we use  server wasm "
+
+b=box({id: :the_box})
+
+  b.animate({ to: 333, particle: :width, duration: 3000}) do |val|
+    puts "width +#{val}"
+  end
+
+  b.animate({ to: 456, particle: :left, duration: 5000}) do |val|
+    puts "left +#{val}"
+  end
+
+  b.animate({  end: :left}) do |val|
+    puts "left ended"
+  end
+
+  b.animate({ to: 69, particle: :smooth, duration: 10000}) do |val|
+    puts "smooth +#{val}"
+  end
+
+  b.animate({ end: :smooth}) do |val|
+    puts " cool smooth end now!!!"
+  end
+
+  b.animate({ to: 90, particle: :rotate, duration: 10000}) do |val|
+    puts "rotate +#{val}"
+  end
+
+  b.animate({ to: 222, particle: :top, duration: 10000}) do |val|
+    puts "top +#{val}"
+  end
+
+end
+
+
+

data/vendor/assets/src/medias/utils/examples/atomes/animation/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the animation object.

data/vendor/assets/src/medias/utils/examples/atomes/animation/usage.txt

@@ -0,0 +1 @@
+The animation object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/atomized/infos.txt

@@ -0,0 +1 @@
+No specific information available for the atomized object.

data/vendor/assets/src/medias/utils/examples/atomes/atomized/usage.txt

@@ -0,0 +1 @@
+The purpose of the atomized object could not be inferred.

data/vendor/assets/src/medias/utils/examples/atomes/audio/example.rb

@@ -0,0 +1,70 @@
+#  frozen_string_literal: true
+
+# audio tag
+a = audio({ path: 'medias/audios/clap.wav', id: :basic_audio })
+b=box({id: :playButton})
+b.text(:audio_tag)
+a.left(333)
+b.touch(:down) do
+  a.play(true)
+end
+
+
+
+### Web Audio
+ audio({ path: 'medias/audios/clap.wav', id: :audioElement })
+@audio_context = JS.eval('return new AudioContext()')
+@audio_element = JS.global[:document].getElementById('audioElement')
+@track = @audio_context.createMediaElementSource(@audio_element)
+
+@gain_node = @audio_context.createGain()
+@gain_node[:gain][:value] = 0.6
+
+@track.connect(@gain_node)
+@gain_node.connect(@audio_context[:destination])
+
+def play_audio
+  @audio_context[:resume].to_s if @audio_context[:state].to_s == 'suspended'
+  @audio_element.play
+end
+b2=box({left: 166})
+b2.text(:web_audio)
+b2.touch(:down) do
+  play_audio
+end
+
+
+# ######### wadjs
+
+bb=box({left: 333})
+bb.text(:wadjs)
+
+
+
+# Initialize window.snare
+
+init_code = "window.snare = new Wad({source : 'medias/audios/clap.wav'});"
+JS.eval(init_code)
+
+# Define the JavaScript playSnare function
+js_code = <<~JAVASCRIPT
+  window.playSnare = function() {
+    window.snare.play();
+    // setTimeout(function() {
+    //  window.snare.stop();
+    //}, 30);
+  }
+JAVASCRIPT
+
+# Evaluate the JavaScript code once
+JS.eval(js_code)
+
+# Define the Ruby method to call the JavaScript function
+def play_snare
+  JS.eval('window.playSnare()')
+end
+
+# Attach the method to the touch event
+bb.touch(:down) do
+  play_snare
+end

data/vendor/assets/src/medias/utils/examples/atomes/audio/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the audio object.

data/vendor/assets/src/medias/utils/examples/atomes/audio/usage.txt

@@ -0,0 +1 @@
+The audio object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/border/example.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+
+
+
+b=box({id: :my_b_box, left: 150, top: 150})
+b.shadow({
+           id: :s1,
+           # affect: [:the_circle],
+           left: 9, top: 3, blur: 9,
+           invert: false,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+border1= b.border({ thickness: 15, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid ,id: :border_1, inside: true})
+wait 2 do
+  b.remove(:border_1)
+end
+wait 1.5 do
+ border({ thickness: 30, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid ,id: :poil, inside: true})
+end
+
+c = circle({ id: :the_circle, color: :green })
+b = box({ left: 333, id: :the_box })
+circle({ top: 190, width: 99, height: 99, id: :dont_break_too })
+c2 = circle({ top: 190, width: 99, height: 99, id: :dont_break, color: :orange })
+# let's add the border
+wait 1 do
+  c2.shadow({
+              left: 9,
+              top: 3,
+              blur: 9,
+              invert: false,
+              option: :natural,
+              red: 0, green: 0, blue: 0, alpha: 1
+            })
+  c2.border({ thickness: 5, red: 1, green: 0, blue: 0, alpha: 1, pattern: :dotted, id: :borderline })
+end
+c.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })
+b.border({ thickness: 5, red: 0, green: 1, blue: 0, alpha: 1, pattern: :dotted })
+
+wait 2 do
+  c2.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid })
+  c.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })
+  b.border({ thickness: 3, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })
+  b.text('touch me')
+end
+#
+b.touch(true) do
+
+  b.border({ thickness: 5, red: 1, green: 1, blue: 1, alpha: 1, pattern: :dotted, id: :the_door,inside: true })
+  puts " no new atome added!, number of atomes: #{Universe.atomes.length}"
+  b.apply([:the_door])
+  c.apply([:the_door])
+  c2.apply([:the_door])
+  wait 1 do
+    # if the_door (border) is change all affect atomes are refreshed
+    grab(:the_door).pattern(:solid)
+    wait 1 do
+      # if the_door (border) is change all affect atomes are refreshed
+      grab(:the_door).thickness(20)
+      wait 1 do
+        # if the_door (border) is change all affect atomes are refreshed
+        grab(:the_door).red(0)
+        c2.color({alpha: 0})
+
+      end
+    end
+  end
+end
+
+
+bb=box({top: 50, left: 100})
+bb.text(:touch_me)
+bord=bb.border({ thickness: 3,  pattern: :dotted, inside: true})
+bb.touch(true) do
+  col=bord.color({red: 1 })
+
+  wait 2 do
+    col.green(1)
+  end
+end

data/vendor/assets/src/medias/utils/examples/atomes/border/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the border object.

data/vendor/assets/src/medias/utils/examples/atomes/border/usage.txt

@@ -0,0 +1 @@
+The border object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/code/example.rb

@@ -0,0 +1,9 @@
+#  frozen_string_literal: true
+
+
+
+b=box({color: :red})
+b.touch(true) do
+  JS.eval('loadFeature()') # found in atome.js file
+end
+

data/vendor/assets/src/medias/utils/examples/atomes/code/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the code object.

data/vendor/assets/src/medias/utils/examples/atomes/code/usage.txt

@@ -0,0 +1 @@
+The code object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/color/example.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# frozen_string_literal: true
+
+# puts 'type you problematic code here!'
+col=color({green: 1, id: :the_col})
+
+b=box({top: 3})
+t=text(data: :red, left: 0, top: 123)
+t1=text(data: :green, left: 100, top: 123)
+t2=text(data: :blue, left: 200, top: 123)
+t3=text(data: :yellow, left: 300, top: 123)
+t4=text(data: :orange, left: 400, top: 123)
+t5=text(data: :cyan, left: 500, top: 123)
+
+item_to_batch=[t.id,t1.id,t2.id, t3.id, t4.id, t5.id]
+the_group= group({ collect: item_to_batch })
+the_group.apply([:the_col])
+t.touch(true) do
+  b.color({id: :red, red: 1 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+t1.touch(true) do
+  b.color({id: :green, green: 1 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+t2.touch(true) do
+  b.color({id: :blue, blue: 1 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+t3.touch(true) do
+  b.color({id: :yellow,  red: 1, green: 1 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+t4.touch(true) do
+  b.color({id: :orange,  red: 1, green: 0.5 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+t5.touch(true) do
+  b.color({id: :cyan,  blue: 1, green: 1 })
+  # puts "number of atomes : #{Universe.atomes.length}"
+end
+
+t=text({data: "dynamic color propagation, touch me to propagate"})
+t.apply(:the_col)
+c=circle({id: :the_circle, top: 260})
+c.apply([:the_col])
+b.apply([:the_col])
+
+t.touch(true) do
+  col.red(1)
+end
+
+

data/vendor/assets/src/medias/utils/examples/atomes/color/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the color object.

data/vendor/assets/src/medias/utils/examples/atomes/color/usage.txt

@@ -0,0 +1 @@
+The color object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/draw/infos.txt

@@ -0,0 +1 @@
+No specific information available for the draw object.

data/vendor/assets/src/medias/utils/examples/atomes/draw/usage.txt

@@ -0,0 +1 @@
+The purpose of the draw object could not be inferred.

data/vendor/assets/src/medias/utils/examples/atomes/editor/example.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+box
+dragger = box({ width: 333, height: 16, top: 0 })
+back = box({ width: 333, height: 222, top: dragger.height })
+body = back.box({ top: 0, width: '100%', height: '100%', component: { size: 12 }, id: :poil })
+code_runner = dragger.circle({ left: 3, top: 3, width: 12, height: 12, color: :red })
+code_closer = dragger.circle({ left: :auto ,right: 3, top: 3, width: 12, height: 12, color: :black })
+
+body.editor({ id: :the_ed, code: "def my_script\n
+  return 100\n
+end", width: 333, height: 192, color: :lightgray, top: 0 })
+
+def create_editor(code_id)
+  js_code = <<~JAVASCRIPT
+    var editor = CodeMirror.fromTextArea(document.getElementById("#{code_id}"), {
+        lineNumbers: true,
+        mode: "ruby",
+        theme: "monokai"
+    });
+    editor.getWrapperElement().id = "atome_editor_#{code_id}";
+    document.getElementById("atome_editor_#{code_id}").CodeMirrorInstance = editor;
+
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+def set_code(code_id, content)
+  js_code = <<~JAVASCRIPT
+    var editorWrapper = document.getElementById("atome_editor_#{code_id}");
+                 var editorInstance = editorWrapper.CodeMirrorInstance;
+                 var newContent = "#{content}";
+                 editorInstance.setValue(newContent);
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+def get_code(code_id)
+  js_code = <<~JAVASCRIPT
+    var editorWrapper = document.getElementById("atome_editor_#{code_id}");
+
+               var editorInstance = editorWrapper.CodeMirrorInstance;
+               return editorInstance.getValue();
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+create_editor("the_ed")
+
+wait 1 do
+  editor_id = "the_ed"
+  set_code(editor_id, "def new_script\\n  puts 'so cool'\\ncircle({top: rand(333), color: :red})\\nend\\nnew_script")
+end
+
+code_closer.touch(true) do
+  back.delete(true)
+  dragger.delete(true)
+end
+
+code_runner.touch(true) do
+  editor_id = "the_ed"
+  data_found = get_code("the_ed").to_s
+  grab(:the_t).code(data_found.to_s)
+  atome_before = Universe.user_atomes
+  eval(data_found)
+  code_editor = grab(editor_id)
+  atome_to_delete = code_editor.data
+  atome_to_delete.each do |atome_id_found|
+    grab(atome_id_found).delete(false)
+  end
+  atome_after = Universe.user_atomes
+  new_atomes = atome_after - atome_before
+  code_editor.data(new_atomes)
+end
+dragger.drag(restrict: :view ) do |event|
+  view = grab(:view)
+  view_width = view.to_px(:width)
+  view_height = view.to_px(:height)
+
+  dx = event[:dx]
+  dy = event[:dy]
+
+  # Calculer les nouvelles positions
+  x = (back.left || 0) + dx.to_f
+  y = (back.top || 0) + dy.to_f
+
+  # Contrainte de `x` entre 0 et `view_width`
+  if x > 0 && x < view_width - back.width
+    back.left(x)
+  else
+    # Contrainte si `x` dépasse les limites
+    x = [0, [x, view_width - back.width].min].max
+    back.left(x)
+  end
+
+  # Contrainte de `y` pour qu'il soit supérieur à une certaine valeur
+  if y > 0 + dragger.height && y < view_height + dragger.height
+    back.top(y)
+  else
+    # Contrainte si `y` dépasse les limites
+    y = [0 + dragger.height, [y, view_height + dragger.height].min].max
+    back.top(y)
+  end
+end
+back.resize({ size: { min: { width: 120, height: 90 }, max: { width: 3000, height: 3000 } } }) do |event|
+  dx = event[:dx]
+  # dy = event[:dy]
+  x = (dragger.width || 0) + dx.to_f
+  # y = (back.top || 0) + dy.to_f
+  dragger.width(x)
+  # back.top(y)
+end
+
+back.shadow({ alpha: 0.6, blur: 16, left: 3, top: 16 })
+
+back.drag(false)
+dragger.touch(:double) do
+  if back.display == :none
+    back.display(:block)
+  else
+    back.display(:none)
+  end
+end
+
+# a_list=[]
+# Universe.atome_list.each  do |k, v|
+#   a_list << k
+# end
+#
+# alert a_list
+#
+# p_list=[]
+#  Universe.particle_list.each  do |k, v|
+#    p_list << k
+#  end
+#
+# alert p_list
+#
+# box(id: :mon_carre, width: 300, height: 300)
+alert "pseudo element and trigger absctrator"

data/vendor/assets/src/medias/utils/examples/atomes/editor/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the editor object.

data/vendor/assets/src/medias/utils/examples/atomes/editor/usage.txt

@@ -0,0 +1 @@
+The editor object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/element/infos.txt

@@ -0,0 +1 @@
+No specific information available for the element object.

data/vendor/assets/src/medias/utils/examples/atomes/element/usage.txt

@@ -0,0 +1 @@
+The purpose of the element object could not be inferred.

data/vendor/assets/src/medias/utils/examples/atomes/group/example.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+text({ id: :the_text,data: 'Touch me to group and colorize', center: true, top: 120, width: 77, component: { size: 11 } })
+box({ left: 12, id: :the_first_box })
+the_circle = circle({ id: :cc, color: :yellowgreen, top: 222 })
+the_circle.image({path:  'medias/images/red_planet.png', id: :the__red_planet })
+the_circle.color('red')
+the_circle.box({ left: 333, id: :the_c })
+
+element({ id: :the_element })
+
+the_view = grab(:view)
+
+color({ id: :the_orange, red: 1, green: 0.4 })
+color({ id: :the_lemon, red: 1, green: 1 })
+the_group = group({ collect: the_view.shape })
+
+wait 0.5 do
+  the_group.left(633)
+  wait 0.5 do
+    the_group.rotate(23)
+    wait 0.5 do
+      the_group.apply([:the_orange])
+      the_group.blur(6)
+    end
+  end
+end
+puts the_group.collect
+grab(:the_first_box).smooth(9)
+grab(:the_text).touch(true) do
+bibi=box({left: 555})
+the_group2= group({ collect: [:the_c,:the_first_box, :the_text, :cc , bibi.id] })
+the_group2.top(55)
+# puts we remove the circle(:cc) so it' wont be affected by the color :the_lemon
+the_group2.collect.delete( :cc )
+the_group2.apply([:the_lemon])
+
+end
+
+
+
+# # # FIXME : on touch code above crash but works with wait
+
+

data/vendor/assets/src/medias/utils/examples/atomes/group/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the group object.

data/vendor/assets/src/medias/utils/examples/atomes/group/usage.txt

@@ -0,0 +1 @@
+The group object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/human/infos.txt

@@ -0,0 +1 @@
+No specific information available for the human object.

data/vendor/assets/src/medias/utils/examples/atomes/human/usage.txt

@@ -0,0 +1 @@
+The purpose of the human object could not be inferred.

data/vendor/assets/src/medias/utils/examples/atomes/image/example.rb

@@ -0,0 +1,4 @@
+#  frozen_string_literal: true
+
+image(:red_planet)
+image({path: 'medias/images/logos/atome.svg', width: 33})

data/vendor/assets/src/medias/utils/examples/atomes/image/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the image object.

data/vendor/assets/src/medias/utils/examples/atomes/image/usage.txt

@@ -0,0 +1 @@
+The image object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/machine/infos.txt

@@ -0,0 +1 @@
+No specific information available for the machine object.

data/vendor/assets/src/medias/utils/examples/atomes/machine/usage.txt

@@ -0,0 +1 @@
+The purpose of the machine object could not be inferred.

data/vendor/assets/src/medias/utils/examples/atomes/map/example.rb

@@ -0,0 +1,42 @@
+#  frozen_string_literal: true
+
+
+# new({ atome: :map, type: :hash })
+
+# new({particle: :longitude}) do |params, _user_proc|
+#   render(:map, {longitude: params })
+#   params
+# end
+#
+# new({particle: :latitude}) do |params, _user_proc|
+#   render(:map, {latitude: params })
+#   params
+# end
+
+# new({ method: :map, renderer: :html, type: :int }) do |params, _user_proc|
+#   latitude_found=@latitude
+#   longitude_found=@longitude
+#   location_hash={longitude: longitude_found, latitude: latitude_found}.merge(params)
+#   html.location(location_hash)
+# end
+
+
+
+m=map({id: :hgfh, longitude: 55.9876876, latitude: 33.987687, width: 333, height: 222,})
+# wait 3 do
+p=map({id: :poilo, location: :auto, width: 333, height: 333, top: 333 , left: 333, zoom: 3})
+# end
+b=box
+b.touch(true) do
+  m.zoom(33)
+  # p.zoom(3)
+  # wait 2 do
+    p.pan({ left: 370, top: 190 })
+  # end
+end
+
+# m=map({id: :locator, location: :auto})
+
+# alert m.longitude
+
+

data/vendor/assets/src/medias/utils/examples/atomes/map/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the map object.

data/vendor/assets/src/medias/utils/examples/atomes/map/usage.txt

@@ -0,0 +1 @@
+The map object is used for specific purposes as indicated in the example.