atome 0.1.00009 → 0.4.5.4

data/vendor/assets/build/medias/rubies/examples/Old_examples/monitoring.rb

@@ -0,0 +1,47 @@
+# monitoring
+console = Atome.new({ atome_id: :console, parent: :intuition, type: :shape, width: :auto, x: 0, xx: 0, yy: 0, height: 33, color: { alpha: 0.3 } })
+cc = Atome.new({ parent: :console, type: :text, content: :hello, color: :yellowgreen, x: 6, y: 6 })
+console.touch do
+  console.delete(true)
+end
+
+b = box({ x: 333, y: 50 })
+text({ content: "drag the box", x: 33, y: 3, color: :orange })
+t2 = text({ content: "start monitoring all", x: 33, y: 33 })
+t3 = text({ content: "stop monitoring all", x: 33, y: 66 })
+
+t4 = text({ content: "start monitoring the box", x: 33, y: 96 })
+t5 = text({ content: "stop monitoring the box", x: 33, y: 123 })
+
+i = 3
+b.touch do
+  b.smooth(i)
+  i += 3
+end
+b.drag(true)
+c = circle({ x: 333 })
+c.drag(true)
+t2.touch do
+  properties = {}
+  grab(:view).child.monitor(true) do |evt|
+    properties[evt[:property]] = evt[:value]
+    cc.content ("#{properties}\n")
+  end
+
+end
+
+t3.touch do
+  grab(:view).child.monitor({ option: false })
+end
+
+t4.touch do
+  properties = {}
+  b.monitor(true) do |evt|
+    properties[evt[:property]] = evt[:value]
+    cc.content ("#{properties}\n")
+  end
+end
+
+t5.touch do
+  b.monitor({ option: false })
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/mulitrendering.rb

@@ -0,0 +1,7 @@
+# example multi rendering
+
+renderer([:html,:speech])
+
+b=circle()
+b.x(666)
+# renderer(:html)

data/vendor/assets/build/medias/rubies/examples/Old_examples/noise_gradient_texture.rb

@@ -0,0 +1,26 @@
+# noise example
+# noise in a circle
+c=circle({ width: 300, color: :green, x: 600 })
+c.shadow({ x: 16, y: 16, blur: 7, color: :black})
+c.noise({ opacity: 0.3 })
+
+# b is used for a hack to allow correct shadow when using mask or noise then applying shadow
+b=box({color: :transparent})
+b.shadow({ x: 16, y: 16, blur: 7, color: :black})
+
+a=b.image({content: :boat})
+a.noise({ opacity: 0.6 })
+a.color({red: 1, green: 0.3, blue: 0.5, alpha: 0.5})
+# add gradient
+a.color([{red: 0, green: 1, blue: 1, alpha: 0.1}, {red: 1, green: 0, blue: 0, alpha: 0.1}, {red: 0, green: 1, blue: 0, alpha: 0.1}, {angle: 150}, {diffusion: :linear}])
+a.opacity(0.7)
+a.drag(true)
+
+# # with shape
+# svg = shape({ path: :apple, drag: true, width: 333, height: 333, atome_id: :the_path})
+# ATOME.wait 2 do
+#   `$('#the_path').children().css({fill: 'blue'}).css({stroke: 'yellow'})`
+#   svg.noise({ opacity: 1 })
+# end
+
+

data/vendor/assets/build/medias/rubies/examples/Old_examples/notification.rb

@@ -0,0 +1,9 @@
+# notification example
+
+c=circle({x: 6, y:6 })
+notification "element position is :#{c.x}, #{c.y}"
+c.touch do
+  c.x=c.x+6
+  c.y=c.y+6
+  notification "element position is :#{c.x}, #{c.y}"
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/object_in_object.rb

@@ -0,0 +1,13 @@
+# objects in object
+
+c=circle
+b=c.box({x: 200, atome_id: :poil})
+t=b.text({content: :ok})
+t.center(true)
+b.rotate(30)
+c.drag(true) do |evt|
+  b.rotate(evt.page_x)
+  b.color(:green)
+end
+
+box({color: :orange, center: true, text: {content: :hello, color: :yellow, center: true}})

data/vendor/assets/build/medias/rubies/examples/Old_examples/on_resize.rb

@@ -0,0 +1,12 @@
+# window resize
+
+t = text({content: "window size", x: 66})
+ATOME.resize_html do |evt|
+  t.content("#{evt[:width]}  #{evt[:height]}")
+end
+
+stop = text({ content: "touch me to unbind resize event" , y: 63})
+
+stop.touch do
+  ATOME.resize_html(:false)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/over.rb

@@ -0,0 +1,15 @@
+# over example
+
+# over example
+c = circle
+c.x(250)
+c.over(:enter) do
+  c.color (:green)
+end
+c.over(:exit) do
+  c.color (:blue)
+end
+
+c.touch do
+  c.over(false)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/overflow.rb

@@ -0,0 +1,22 @@
+# overflow
+
+
+b = text({x: 369, y: 30, content: "touch me to change text overflow"})
+container=circle({width:300, height: 300, y: 99, drag: true})
+container.text({content: lorem, x: 66, width: 300})
+i=0
+b.touch do
+  case i
+  when 0
+    container.overflow(:hidden)
+    i+=1
+  when 1
+    container.overflow(:scroll)
+    i+=1
+  when 2
+    container.overflow(:visible)
+    i=0
+  else
+    i
+  end
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/parameter.rb

@@ -0,0 +1,14 @@
+# parameter example
+
+b=box
+b.parameter({ target: :the_box,
+              type: :circular,
+              length: 33,
+              thickness: 12,
+              helper_length: nil,
+              helper_thickness: 12
+            })
+t=text({ content: " click to box to view params stored in ", visual: 15, x: 99 })
+b. touch do
+  t.content(parameter.to_s)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/parent.rb

@@ -0,0 +1,19 @@
+# parent example
+
+# an atome can have multiple parents. (for now, please note that only the last setted parent is the real father, it ll be change i the future)
+c = circle({atome_id: :c, x: 20})
+c.drag(true)
+e = box({atome_id: :e, x: 160})
+t = text({content: 'some texts', atome_id: :the_father_text, x: 96})
+t.parent([e.atome_id, c.atome_id])
+grab(:view).extract(t.atome_id)
+t.parent do |father|
+ father.set({ rotate: 36, y: 66})
+end
+t.parent.blur(2)
+wait 1 do
+ grab(:view).attach(:the_father_text)
+ t.set(x: 33, y: 33, )
+ t.width(:auto)
+end
+#both parent are treated

data/vendor/assets/build/medias/rubies/examples/Old_examples/particle.rb

@@ -0,0 +1,15 @@
+# particle exam≈ple :
+
+p=particle({ color: :cyan,
+             rotate: 33,
+             y: 150,
+             width: 333,
+             shadow: { color: :black, blur: 3, x: 3, y: 3 },
+             content: "particle can be used as placeholder or style repository"
+           })
+t =text({x: 99, content: p, atome_id: :verif})
+t.set(p)
+b=box
+b.set(p)
+
+circle.y(p.width)

data/vendor/assets/build/medias/rubies/examples/Old_examples/pay.rb

@@ -0,0 +1,7 @@
+# pay example
+
+c=circle({width: 300})
+c.text({content:  "buy an atome: 10€", center: true })
+c.touch do
+  box({atome_id: :my_payment, pay: "https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=EUR",width: 222, height: 220, drag: true, x: 99, y: 120})
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/ping.rb

@@ -0,0 +1,7 @@
+# ping example
+
+def ping_call_back(val)
+  text({ content: val, color: :red })
+end
+ATOME.ping("https://apple.com", "ping_call_back('Apple site is unreachable')", "ping_call_back('Apple site is up')")
+

data/vendor/assets/build/medias/rubies/examples/Old_examples/play.rb

@@ -0,0 +1,24 @@
+# play videos
+
+button=box({height: 33, x: 9, width: 222, smooth: 33, y: 6})
+button.text({content:  "full screen", x: 6 })
+
+button2=box({height: 33, x: 9, width: 222, smooth: 33, y: 66})
+button2.text({content:  "full page", x: 6 })
+
+
+v=video({drag: true,atome_id: :the_video, shadow: {blur: 6 , thickness: 1, x: 0, y:0, color: :black}, scale: true, x: 333, y: 150})
+v.touch do
+  v.play(true)
+  v.size(666)
+end
+
+button.touch do
+  v.fullscreen(true)
+end
+
+button2.touch do
+  v.size(grab(:view).convert(:width))
+  v.x(0)
+  v.y(0)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/play_audio.rb

@@ -0,0 +1,6 @@
+# play audio example
+
+a=audio({content: :snare,  x: 0, y: 250, atome_id: :snare, color: :pink, width: 333, height: 33,})
+a.touch(option: :down) do
+  a.play(true)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/position.rb

@@ -0,0 +1,7 @@
+# position
+
+box({x:222, y:222, color: :green})
+text({content: "i'm not fixed!", x:20, y: 222, color: :orange})
+text({content: "drag the red circle out the window this text will remain fixed in the window",width: 150, x: 66,fixed: true})
+c = circle({x: 300, y: 69})
+c.drag(true)

data/vendor/assets/build/medias/rubies/examples/Old_examples/read_file.rb

@@ -0,0 +1,9 @@
+# example read file
+# JSUtils.load_opal_parser
+
+t=text("Touch me load and exec the ruby code")
+t.touch do
+  reader("./medias/rubies/test.rb") do |data|
+    compile data
+  end
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/reboot.rb

@@ -0,0 +1,15 @@
+# Reboot
+
+button=box({height: 33, x: 9, width: 222, smooth: 33, y: 6})
+button.text({content:  "Reboot", x: 6 })
+
+b=box({x: 99, y: 99})
+b.drag(true)
+b.touch do
+  color(:red)
+  v=video(:madmax)
+  v.play(true)
+end
+button.touch do
+  grab(:view).reboot
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/refresh.rb

@@ -0,0 +1,17 @@
+# refresh example
+
+c=circle({ atome_id: :circle})
+c.text({content: "click me", atome_id: :text_2, shadow: true })
+color=[:red, :green,:yellowgreen, :purple, :blue, :yellow, :orange, :pink, :black, :white].sample
+time=Time.now
+text({content: time, color: color, x:66, y: 66, atome_id: :text_1, shadow: true})
+c.color(color)
+c.touch do
+  refresh("./medias/rubies/examples/refresh.rb")
+end
+# Possible syntax are :
+# refresh #without arguments it refresh the current page
+# refresh("./medias/rubies/examples/animation.rb")
+# refresh({ source: "./medias/rubies/examples/animation.rb" })
+# refresh({ target: :circle })
+# refresh({ target: :circle , source: "./medias/rubies/examples/animation.rb" })

data/vendor/assets/build/medias/rubies/examples/Old_examples/remote_server.rb

@@ -0,0 +1,31 @@
+# remote server
+
+def my_callback(val, opt)
+  opt = eval(opt)
+  t = text val
+  opt.each do |prop, val|
+    t.set({ prop => val })
+  end
+end
+
+
+b = box({ x: 300 })
+b.touch do
+  # atome is the method target the atome_id if no method given notification is used by default
+  # if no target then atome seek for a standard method
+  # ATOME.message({type: :command, content: "pwd",target: b.atome_id, atome: :text , options:{color: :yellow, x: 333}})
+  ATOME.message({ type: :read, file: "public/medias/rubies/test.rb", target: :my_callback, atome: :text, options: { color: :yellowgreen } })
+  ATOME.message({ type: :code, content: "circle({x: 33,y: 33})" })
+
+  # ATOME.message({type: :command, content: "cd public; ls; setxkbmap fr",target: b.atome_id, atome: :text , options:{color: :yellow, x: 333}})
+  # ATOME.message({type: :atome,target: :my_callback,atome: :color,  content: "red"})
+  # ATOME.message({type: :atome,target: b.atome_id,atome: :smooth,  content: 9})
+end
+
+# # c.touch do
+# #   # todo: addpassword to write and delete methods
+# #   # ATOME.message({type: :delete, file: "public/medias/datas/meteo_datas_new.txt", target: :toto, options:{color: :yellowgreen}})
+# #   # ATOME.message({type: :write, file: "public/medias/datas/meteo_datas_new.txt",content: :hello, target: :toto, options:{color: :yellowgreen}})
+# #   # ATOME.message({type: :list, path: "public/medias/datas/",target: :delete_images, options:{color: :yellowgreen}})
+# #   # ATOME.message({type: :read, file: "public/medias/datas/meteo_datas.txt",target: :toto, options:{color: :yellowgreen}})
+# # end

data/vendor/assets/build/medias/rubies/examples/Old_examples/render.rb

@@ -0,0 +1,17 @@
+# render
+
+t=text("touch to circle to remove the circle from rendering")
+c = circle({atome_id: :c, x: 300, y: 66, render: false})
+
+
+wait 2 do
+  c.render(true)
+end
+
+
+c.touch do
+  c.render(false)
+  ATOME.wait 2 do
+    c.render(true)
+  end
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/repeat.rb

@@ -0,0 +1,19 @@
+# repeat
+
+b=box({x:300, y: 33})
+t=text({content: "click me to kill the repeat process"})
+countdown=text("")
+countdown.y(66)
+repeater= repeat 0.1, 300 do |evt|
+  unless evt
+    evt=0
+  end
+  b.x(evt)
+  b.smooth(evt/10)
+  b.color({red: -(evt-300)/100/3})
+  content=-(evt-300)/100/3
+  countdown.content(content)
+end
+t.touch do
+  t.clear({repeat: repeater})
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/require_remote.rb

@@ -0,0 +1,3 @@
+# require remote example
+
+coding({ atome_id: :code_editor, content: "require 'my_big_test.rb'" })

data/vendor/assets/build/medias/rubies/examples/Old_examples/restore_atome.rb

@@ -0,0 +1,11 @@
+#restore atome
+
+b=box({atome_id: :my_atome,color: :green, x: 200, y: 100})
+atome_props= b.properties
+ATOME.wait 1 do
+  b.delete(true)
+end
+ATOME.wait 2 do
+  Atome.new(atome_props)
+end
+

data/vendor/assets/build/medias/rubies/examples/Old_examples/resurect.rb

@@ -0,0 +1,30 @@
+# resurrect example
+
+hh = grab(:view).tool({ name: :home, x: 99, y: 9, color: :black })
+hh.add({ touch: {  proc: lambda do
+  self.color(:darkred)
+end } })
+
+hh.add(:touch) do
+  wait 2 do
+    self.color(:white)
+    hh.delete(true)
+  end
+
+  wait 3 do
+    resurrect :home_tool
+  end
+end
+
+
+b = box({color: :green, x: 200, y: 100, atome_id: :the_box, drag: true })
+t = b.text({ content: "click the box or the tool to delete, it'll be resurected!", y: 99, x: 33,  atome_id: :the_text })
+b.image({ content: :moto, x: 150, y: 9, size: 66, atome_id: :the_image })
+t.circle({ x: 33, y: -99, size: 66, atome_id: :the_circle })
+
+b.touch do
+  b.delete(true)
+  ATOME.wait 1 do
+    resurrect b.atome_id
+  end
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/ruby_version.rb

@@ -0,0 +1 @@
+text(RUBY_VERSION)

data/vendor/assets/build/medias/rubies/examples/Old_examples/say.rb

@@ -0,0 +1,3 @@
+# say example
+
+ATOME.say("salut tout le monde!!")

data/vendor/assets/build/medias/rubies/examples/Old_examples/scale.rb

@@ -0,0 +1,41 @@
+#scale example
+
+b = box({ size: 96, x: 333 })
+i = b.image({ content: :moto, size: :fit, drag: true })
+t = text({ content: :size })
+t2 = text({ content: "keep ratio", y: 33 })
+t3 = text({ content: "no ratio", y: 66 })
+t4 = text({ content: "scale box too", y: 96 })
+t5 = text({ content: "stop scale", y: 129 })
+
+
+def stop_scale(obj)
+  if obj.scale && obj.scale.to_s != "destroy"
+    obj.scale(:destroy)
+  end
+end
+t2.touch do
+  stop_scale(i)
+  i.scale({ ratio: true }) do |width, height|
+    t.content("#{width}, #{height}")
+  end
+end
+t3.touch do
+  stop_scale(i)
+  i.scale() do |width, height|
+    t.content("#{width}, #{height}")
+  end
+end
+t4.touch do
+  stop_scale(i)
+  i.scale({ add: b.atome_id }) do |width, height|
+    t.content("#{width}, #{height}")
+  end
+end
+t5.touch do
+  stop_scale(i)
+end
+
+i.scale do |width, height|
+  t.content("#{width}, #{height}")
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/schedule.rb

@@ -0,0 +1,39 @@
+# Schedule example
+
+# ATOME.schedule(Time.now+3) do
+#   i=image({ content: :boat , drag: :true, x: 99, y:99 })
+#   i.touch do
+#     i.delete(true)
+#   end
+# end
+#
+# ATOME.schedule('2021 05 04 22 41 30') do
+#   alert :kool
+# end
+#
+# ATOME.schedule('10') do
+#   alert :goodgood
+# end
+
+text(" date can be entered in  several ways , 2 digit it'll be the next time the seconds match ,
+if 2 digits the minutes and seconds and so on, you can also enter Time.now+3 (not a,string) for schedule in 3 sec ")
+t=text({ content: "3", y: 90 ,x: 150, edit: true})
+
+c=circle({ size: 33, x: 66, y: 99})
+
+c.touch do
+  time=t.content
+  time=time.q_read
+  if time.instance_of?(Hash)
+    time=time[grab(:view).language]
+  end
+  time=time.to_i
+  time_to_run= Time.now+time.to_i
+  ATOME.schedule(time_to_run) do
+    i=image({ content: :boat , drag: :true, x: 99, y:99 })
+    wait 2 do
+      i.delete(true)
+    end
+  end
+  t.content("countdown started")
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/scroll.rb

@@ -0,0 +1,9 @@
+# Scroll
+
+t = text({content: "drag the circle out the window", x: 66, fixed: true})
+c = circle({x: 96, y: 96})
+c.drag(true)
+
+grab(:view).scroll_html do
+  t.content("x position : #{c.x}, y position : #{c.y}")
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/select.rb

@@ -0,0 +1,32 @@
+# select example
+
+start = text({ content: "click me to start selecting", x: 30, y: 69, atome_id: :the_text_0 })
+stop = text({ content: "click me twice to stop selecting", x: 30, y: 96, atome_id: :the_text_1 })
+
+box(x: 300, y: 300, drag: true, atome_id: :the_box)
+
+text({ content: :hello, y: 300, x: 400, drag: true, atome_id: :the_text_1 })
+
+box({ y: 300, x: 500, color: :red, atome_id: :the_circle, smooth: 9, width: 39, height: 39 })
+
+circle({ center: true, atome_id: :the_circle_2, color: :black, width: 39, height: 39 })
+treated_item=[]
+start.touch do
+  start.content("selection activated").color(:red)
+  stop.content("click me twice to stop selecting").color(:black)
+  grab(:view).selectable(true) do
+    selection.each do |atome_found|
+      treated_item << atome_found
+    end
+    selection.color([:yellowgreen, :green]).drag(true).shadow({ color: :black, thickness: 0, x: 0, y: 0, blur: 6 })
+  end
+end
+
+stop.touch(option: :up) do
+  stop.content("selection desactivated").color(:red)
+  start.content("click me to start selecting").color(:black)
+  treated_item.each do |item_found|
+    item_found.color(:red).drag(:destroy)
+  end
+  grab(:view).selectable(:destroy)
+end

data/vendor/assets/build/medias/rubies/examples/Old_examples/selector.rb

@@ -0,0 +1,6 @@
+# selector
+
+c = circle({atome_id: :c, x: 300,y: 96, color: :cyan})
+c.selector({toto: :titi})
+
+text "selectors are : #{c.selector}"

data/vendor/assets/build/medias/rubies/examples/Old_examples/shadow.rb

@@ -0,0 +1,30 @@
+# shadow example
+
+b = box({ id: :box_test, x: 160, y: 160 })
+b.text({ content: "touch me", color: :black })
+
+b.shadow({ x: 5, y: 5, blur: 7, color: :black, thickness: 0, invert: true })
+b.shadow({ add: :true, x: 20, y: 20, color: "rgba(0,0,0,1)", blur: 16, thickness: 0 })
+c = circle({ x: 96, y: 96, drag: true, id: :circle_test })
+c.shadow({ x: -5, y: -5, blur: 16, color: :black, invert: :true, thickness: 0 })
+c.shadow({ x: 0, y: 0, color: "rgba(0,0,0,1)", blur: 16, thickness: 0 })
+b.drag(true)
+# b.insert(c)
+b.color(:orange)
+t = text({ content: :hello,x: 33, y: 33, drag: true })
+t.blur(2)
+t.shadow({ x: 3, y: 3, color: "rgba(0,0,0,1)", blur: 3, thickness: 0 })
+t.shadow({ x: 3, y: 33, color: "rgba(0,0,0,1)", blur: 3, thickness: 0 })
+img = image({ content: :boat, size: 96, x: 196, drag: true })
+img.shadow({ x: 7, y: 3, color: "rgba(0,0,0,0.5)", blur: 7, thickness: 0 })
+img.shadow({ x: -66, y: 3, color: "rgba(0,0,0,0.6)", blur: 17, thickness: 0 })
+
+b.touch do
+  b.shadow(false)
+end
+
+force=text({content: "force box shadow", visual: 33, y:9})
+
+force.shadow({ x: 3, y: 3, color: "rgba(0,0,0,1)", blur: 3, thickness: 0, bounding: true })
+
+# {bounding:  true} : force box shadow false force filter shadow , using invert also force box shadow

data/vendor/assets/build/medias/rubies/examples/Old_examples/shape_with_path.rb

@@ -0,0 +1,7 @@
+# shape with path example
+
+svg = shape({ path: :apple, drag: true, width: 333, height: 333, atome_id: :the_path})
+
+svg.touch do
+  `$('#the_path').children().css({fill: 'blue'}).css({stroke: 'yellow'})`
+end