atome 0.1.00009 → 0.4.5.4

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

@@ -0,0 +1,57 @@
+# capture demo
+
+recorder = text({content: "click to start logging", height: 30, color: :red, x: 33, y: 96, smooth: 33, width: :auto})
+stop = text({content: "click to stop logging", height: 30, color: :black, x: 33, y: 123, smooth: 33, width: :auto})
+starting = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+text({content: "try touch drag and resize on window", width: :auto})
+text = text({content: "mouse pointer position and timer", y: 33, width: :auto})
+recorder.touch do
+
+  grab(:view).touch({option: :down}) do |evt|
+    ending = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = ending - starting
+    object_under_pointer=JSUtils.get_object_under_pointer(evt)
+    pointer = "click down on view a  at #{evt.page_x}, #{evt.page_y} : #{elapsed}, object under the pointer #{object_under_pointer}"
+    text.content = pointer
+  end
+
+  grab(:view).touch({option: :up}) do |evt|
+    ending = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = ending - starting
+    object_under_pointer=JSUtils.get_object_under_pointer(evt)
+    pointer = "click up on view at #{evt.page_x}, #{evt.page_y} : #{elapsed}, object under the pointer #{object_under_pointer}"
+    text.content = pointer
+  end
+
+  grab(:view).drag({fixed: true}) do |evt|
+    ending = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = ending - starting
+    pointer = "drag on view at #{evt.page_x}, #{evt.page_y} : #{elapsed}"
+    text.content = pointer
+  end
+
+  ATOME.resize_html(true) do |evt|
+    ending = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = ending - starting
+    pointer = "resize the view  #{evt[:width]}, #{evt[:height]} : #{elapsed}"
+    text.content = pointer
+  end
+
+  grab(:view).record(true) do |evt|
+    ending = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = ending - starting
+    pointer = "cursor move : #{evt.page_x}, #{evt.page_y} : #{elapsed}"
+    text.content = pointer
+  end
+
+end
+
+stop.touch do
+  grab(:view).record(:stop)
+  grab(:view).child.record(:stop)
+  grab(:view).child.drag(x: 33)
+end
+image({content: :green_planet, x: 196, y: 196, atome_id: :the_planet, drag: true})
+
+box({x: 196, y: 196, color: :yellowgreen, atome_id: :my_nice_box, drag: true})
+circle({x: 222, y: 222, atome_id: :the_circle, drag: true})

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

@@ -0,0 +1,21 @@
+# dynamic centering example
+
+b = box({ width: 700, height: 120, drag: true, center: { dynamic: true } })
+c = circle({y:33})
+c.text({content: "activate dynamic 'continuous' centering", color: :white})
+t2=text({content: "remove dynamic centering on box", color: :white, y: 0})
+t = text({ content: "ok", color: :white, center: :x , y: 69})
+
+c.touch do
+  grab(:buffer).content[:resize] = [t, b]
+  ATOME.resize_html do |evt|
+    t.content("#{evt[:width]}  #{evt[:height]}")
+    grab(:buffer).content[:resize].each do |element|
+      element.center=element.center
+    end
+  end
+end
+
+t2.touch do
+  grab(:buffer).content[:resize] = [t]
+end

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

@@ -0,0 +1,18 @@
+# child
+
+c = circle({atome_id: :c, x: 20})
+c.drag do
+end
+img=image({content: :red_planet, atome_id: :red_planet})
+c.box({atome_id: :e, x: 160})
+c.text({content: 'some text', atome_id: :t, width: 100, height: 200, x: 69})
+b2=box({x:200, atome_id: :the_box})
+c.child.color(:green)
+
+c.child([img.atome_id, b2.atome_id])
+c.child do |child_found|
+  child_found.set({width: 100, height: 33, rotate: 36, y: 66})
+end
+
+c.child[:red_planet].y(200)
+b2.parent[1].color(:cyan)

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

@@ -0,0 +1,21 @@
+#clear
+
+# box({atome_id: :the_box})
+c=circle(x: 96)
+t=text({content: "click tme to clear the screen", atome_id: :the_text})
+text({content: "hello", x: 96, y: 96})
+image({content: :boat, size: 96, x: 96, y: 96})
+image({content: :moto, size: 96, y: 96})
+
+
+b=box({x: 96, y: 96})
+b.circle(true)
+b.text("touch the box to clear it's content")
+b.attach(c.atome_id)
+b.touch do
+  b.clear(true)
+end
+
+t.touch do
+  grab(:view).clear(:true)
+end

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

@@ -0,0 +1,11 @@
+# clip example
+text("touch the rectangle")
+b=box({width: 222, height: 529, x: 333})
+s=shape({ path: :the_mask, width: 33, atome_id: :the_path})
+
+b.touch do ||
+  b.clip({path: :clipping5})
+  b.shadow({ x: 0, y: 0, color: "rgba(0,0,0,1)", blur: 16, thickness: 0 })
+end
+
+s.width(333)

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

@@ -0,0 +1,7 @@
+#code example
+
+text(content: "the code within the contain circle is executed, it'll create a green circle, \ntouch the red circle ",code: "c=circle;c.color(:green)\nc.x(66)\nc.y(66)")
+cell({ content: "box({x:99, y: 99})", exec: false,atome_id: :the_box })
+cell({ content: "c=circle({x:300, y: 300});c.touch do \n grab(:the_box).exec(true)\nend" })
+
+# use for code  type (machine molecule )

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

@@ -0,0 +1,26 @@
+# ide
+
+t=text(content: "touch me to open the code editor", xx: 50)
+t.touch do
+  coding({atome_id: :code_editor, content: :circle})
+end
+
+code_editor_font_size=12
+c=circle({size: 33})
+c2=circle({size: 33, x: 69})
+t=c.text({content: "-", center: true, color: :black})
+t2=c2.text({content: "+", center: true, color: :black, x: 69})
+t.center(true)
+t2.center(true)
+
+
+c.touch do
+  code_editor_font_size=code_editor_font_size-5
+  ATOME.codemirror_font_size( code_editor_font_size)
+
+end
+
+c2.touch do
+  code_editor_font_size=code_editor_font_size+5
+  ATOME.codemirror_font_size( code_editor_font_size)
+end

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

@@ -0,0 +1,115 @@
+# collaborate example
+
+# Call login through web socket
+class LoginCallback
+  def response(response)
+    login_button=box({x: 0, y: 80, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+    login_button.text({x:0, y:0, content: "Login response: #{response.JS["log"]}",width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+    @session_id = response.JS["log"]
+  end
+
+  def session_id
+    @session_id
+  end
+end
+
+login_callback = LoginCallback.new
+
+login_button=box({x: 0, y: 0, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+login_button.text({x:0, y:0, content: "Login",  width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+login_button.touch do
+  ATOME.message({request_id: 0, type: :login, username: "user1", password: "password"}, login_callback)
+end
+
+# Start a channel through web socket
+class StartChannelCallback
+  def response(response)
+    start_channel_button=box({x: 120, y: 80, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+    @channel_id = response.JS["channel_id"]
+    start_channel_button.text({x:0, y:0, content: "Start channel response: #{@channel_id}",  width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+  end
+
+  def channel_id
+    @channel_id
+  end
+end
+
+start_channel_callback = StartChannelCallback.new
+
+start_channel_button=box({x: 120, y: 0, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+start_channel_button.text({x:0, y:0, content: "Start channel",width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+start_channel_button.touch do
+  ATOME.message({request_id: 1, type: :start_channel, session_id: login_callback.session_id, name: "channel de test"}, start_channel_callback)
+end
+
+# List channels through web socket
+class ListChannelsCallback
+  def response(response)
+    list_channels_button=box({x: 240, y: 80, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+
+    @channels = response.JS["channels"]
+    list_channels_button.text({x:0, y:0, content: "List channels response: #{@channels}",width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+  end
+
+  def channels
+    @channels
+  end
+end
+
+list_channels_callback = ListChannelsCallback.new
+
+list_channels_button=box({x: 240, y: 0, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+list_channels_button.text({x:0, y:0, content: "List channels",  width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+list_channels_button.touch do
+  ATOME.message({request_id: 2, type: :list_channels, session_id: login_callback.session_id}, list_channels_callback)
+end
+
+# Connect to channel through web socket
+class ConnectChannelsCallback
+  def response(response)
+    connect_to_channel_button=box({x: 360, y: 80, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+
+    @connected = response.JS["connected"]
+    connect_to_channel_button.text({x:0, y:0, content: "Connect to channel response: #{@connected}", width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+  end
+
+  def connected
+    @connected
+  end
+end
+
+connect_to_channels_callback = ConnectChannelsCallback.new
+
+connect_channel_button=box({x: 360, y: 0, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+connect_channel_button.text({x:0, y:0, content: "Connect to channel", width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+connect_channel_button.touch do
+  ATOME.message({request_id: 3, type: :connect_channel, session_id: login_callback.session_id, channel_id: list_channels_callback.channels[0]}, connect_to_channels_callback)
+end
+
+# Push to channel through web socket
+class PushToChannelsCallback
+  def response(response)
+    push_to_channel_button=box({x: 480, y: 80, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+
+    @pushed = response.JS["pushed"]
+    push_to_channel_button.text({x:0, y:0, content: "Push to channel response: #{@pushed}",width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+  end
+
+  def pushed
+    @pushed
+  end
+end
+
+push_to_channels_callback = PushToChannelsCallback.new
+
+push_to_channel_button=box({x: 480, y: 0, width: 100, height: 50, color: :orange , smooth: 12, overflow: :auto})
+push_to_channel_button.text({x:0, y:0, content: "Push to channel",width: :auto, visual: 15, center: true, color: {alpha: 0.9}})
+
+push_to_channel_button.touch do
+  ATOME.message({request_id: 4, type: :push_to_channel, session_id: login_callback.session_id, channel_id: list_channels_callback.channels[0], message: "box({x: 100, y: 100, color: :red})"}, push_to_channels_callback)
+end

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

@@ -0,0 +1,14 @@
+# convert api
+
+c = circle()
+c.xx(250)
+c.yy(300)
+c.width("33%")
+t=text('resize the window')
+t.y=20
+t.color(:white)
+ATOME.resize_html(true) do |evt|
+  new_size=c.convert(:width)
+  t.content("width set : 33%, in pixel :\n"+new_size.to_s+" px")
+end
+t.x(450)

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

@@ -0,0 +1,35 @@
+# Copy paste example
+b = box()
+c = circle({ color: ({ alpha: 0.2 }) , x: 300})
+c.copy
+b.copy
+
+wait 1 do
+  b.delete(true)
+end
+
+wait 2 do
+  c.paste(:properties)
+end
+
+wait 4 do
+  grab(:view).clear
+end
+
+
+wait 6 do
+  grab(:view).paste(:all)
+end
+
+# wait 1 do
+#   b.delete(true)
+# end
+# wait 2 do
+#   grab(:view).paste
+#   wait 2 do
+#     grab(:view).paste
+#     wait 2 do
+#       grab(:view).paste
+#     end
+#   end
+# end

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

@@ -0,0 +1,14 @@
+# current_code example
+text " attention this code  work better when extracted from examples\n touch the box below"
+# JSUtils.load_opal_parser
+b=box({y: 120})
+
+b.touch do
+  current_code(["./medias/rubies/examples/refresh.rb","./medias/rubies/examples/blur.rb"])
+  # wait 2 do
+  refresh current_code
+  # end
+  # reader(current_code) do |script|
+  #   compile script
+  # end
+end

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

@@ -0,0 +1,3 @@
+# cursor example
+
+box({cursor: :pointer})

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

@@ -0,0 +1,11 @@
+# data example
+# data property is used to store data inside the atome
+
+bb=box(width: 333)
+bb.text("touch me")
+bb.data("data stored here")
+bb.touch do
+  t=text({y: 133})
+  t.content(bb.data)
+end
+

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

@@ -0,0 +1,29 @@
+c = circle({x: 69, y: 9, width: 36, height: 36, color: :green})
+c2 = circle({x: 69, y: 150, width: 36, height: 36, color: :red})
+db = Database.new(:atomeDB)
+
+c.touch do
+  db.create_table(:user, "id, login, password, date")
+  db.create_table(:document, "id, content, user_id, date")
+  db.create_user({id: "a_87764", date: "2021-03-15", login: :regis, password: :alknx87978hjg})
+  db.create_user({id: "a_87765", date: "2021-03-16", login: :jeezs, password: :oiuoih978hjg})
+  db.create_user({id: "a_87766", date: "2021-02-06", login: :sylvain, password: :sdfsdfjg})
+  db.create_user({id: "a_87767", date: "2021-02-02", login: :romain, password: :jfhdfg978hjg})
+
+  db.create_document({id: "0", date: "2021-date: 03-06", content: "circle({x: 300})", user_id: "a_87764"})
+  db.create_document({id: "1", date: "2021-01-06", content: "text({x: 300})", user_id: "a_87769"})
+  db.create_document({id: "2", date: "2021-02-12", content: "text({x: 300})", user_id: "a_87765"})
+  db.create_document({id: "3", date: "2021-02-12", content: "image(:boat)", user_id: "a_87764"})
+
+  db.populate(:user, {id: "a_87770", date: "2019-02-06", login: :benoit, password: :l554kjhkjsfdg})
+  db.get_documents_by_user("a_87764")
+  db.update_documents("0", "big_car")
+  db.get_documents_by_id("0")
+  db.delete_doc_by_id("0")
+  db.get_documents_by_id("0")
+
+end
+c2.touch do
+  db.delete
+  text({content: " db removed", visual: 33, color: :red, y: 69, width: 222})
+end

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

@@ -0,0 +1,12 @@
+# delete
+
+b = box()
+c = b.text({content: :ok})
+c.circle({atome_id: :the_c, color: :green, x:96})
+d = b.text({content: :ok2, y: 30, atome_id: :the_second_text})
+d.circle({y: 96})
+info_text=text({content:  "click the box to delete the childs\nthe :view childs are : #{b.child}", x: 96, y: 96, width: :auto})
+b.touch do
+  info_text.content( "the childs are : #{b.child}")
+  b.child.delete(true)
+end

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

@@ -0,0 +1,19 @@
+# the display API is used both to visualize an object or not but also when displaying atome in a special way : cf VR mode
+# this API must be umerge with the render API (for list mode etc..)
+# attention : "render" false remove the object from the DOM while "display" jsut make it invisible on the screen, We may
+# keep the two behaviors
+
+b=box({id: :toto, color: :green, display: false, atome_id: :the_box})
+# b=box({id: :toto, color: :green, display: :none})
+# b.display(true)
+wait 2 do
+  b.display(true)
+end
+
+b.touch do
+  # b.display(false)
+  b.render(false)
+  wait 4 do
+    b.render(true)
+  end
+end

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

@@ -0,0 +1,10 @@
+# accumulate example
+
+circle({disposition: :x, color: :red})
+box({disposition: :x,  color: {alpha: 0.3, red: 1}})
+box({disposition: {x: 33 }, color: :blue})
+box({disposition: {y: 33 }, color: :green})
+main_bloc=box({center: true})
+main_bloc.box({disposition: {y: 33, x: 33 }, color: :green})
+main_bloc.box({disposition: {y: 33, x: 33  }, color: :green})
+main_bloc.box({disposition: {y: 33 , x: 33 }, color: :green})

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

@@ -0,0 +1,23 @@
+# double and long touch example
+b=box
+b.touch ({ option: :double, delay: 0.6 }) do
+  # b.x=b.x+60
+  if b.color==:yellow
+    b.color=:green
+  else
+    b.color=:yellow
+  end
+end
+c=circle({ x: 99 })
+
+c.touch ({ option: :long, delay: 1 }) do
+  # c.x=c.x+60
+  if c.color==:red
+    c.color=:blue
+  else
+    c.color=:red
+  end
+end
+
+# delay(in seconds) is optional and set latency before tow touchs or the time to wait
+

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

@@ -0,0 +1,61 @@
+# drag
+
+t=text({content:  "drag the grey box!", x: 33, y: 33 })
+t2=text({content:  "click me to destroy drag on the moto", x: 33, yy: 96 })
+
+b=box({center: true})
+b.drag(true) do |evt|
+  b.rotate(evt.page_x)
+  t.content("pointer x: #{evt.page_x},
+  pointer Y: #{evt.page_y},
+  offset x: #{evt.offset_x},
+  offset y: #{evt.offset_y},
+  box x: #{b.x},
+  box y: #{b.y},
+")
+end
+dragger=box({width: 96, height: 96, x:333, y: 200})
+handle=dragger.box({width: 96, height: 16, color: :orange, atome_id: :the_handle})
+handle.text({content: "drag me from here", visual: 12, color: :black})
+dragger.drag({handle: :the_handle}) do |evt|
+  t.content("I can only be dragged using the bar above")
+end
+c=circle({y:66,x: 333, drag:{lock: :y}, color: :purple})
+c.drag({lock: :y}) do
+  t.content("I can only be dragged along the x axis")
+end
+
+container=box({width: 123, y:333,x: 333,color: :yellowgreen, smooth: 6, drag: true})
+
+circle1=container.circle({y:0,x: 0,width: 33,height: 33,  color: :black})
+circle1.drag({containment: :true}) do
+  t.content("I am restricted to the parent")
+end
+
+circle2=container.circle({y:0,x: 96,width: 33,height: 33,  color: :red})
+circle2.drag({containment: :view, grid: {x:33, y:33}}) do
+  t.content("I am restricted to the view and my movement is constraint by a grid")
+end
+
+img=image({content: :moto,x: 33, y: 33, size: 132})
+img.drag({containment:{x:33, y: 33, xx: 333, yy: 333}}) do |evt|
+  if evt.start
+    t.content("I am restricted to a confined area")
+    t.color(:white)
+  elsif evt.stop
+    t.content("on stop x is : #{evt.page_x}, y is:  #{evt.page_y}")
+    t.color(:red)
+  else
+    c.width=evt.offset_x
+  end
+end
+
+boat=image({ content: :boat, size: 132,y: 333 })
+boat.drag({ fixed: true }) do |evt|
+  img.blur(evt.offset_x/66)
+  img.size(evt.offset_x/6+132)
+  t.content("drag the boat will change tha property of the moto")
+end
+t2.touch do
+  img.drag(:destroy)
+end

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

@@ -0,0 +1 @@
+text("drop a png on the window to import the medias (not availlable on safari for now)")

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

@@ -0,0 +1,23 @@
+# drop example
+
+b = box()
+b.x(250)
+b.drag(true)
+c = circle
+c.x(390)
+c.drop(true) do |evt, ui,current_obj |
+  dropped_element= `$(#{ui}.draggable).attr('id')`
+  puts evt
+  if  grab(dropped_element).color==:red
+    grab(dropped_element).color(:orange)
+  else
+    grab(dropped_element).color(:red)
+  end
+  current_obj.color(:black)
+  current_obj.y=c.y+33
+end
+
+c.touch do
+  c.drop(false)
+end
+

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

@@ -0,0 +1,11 @@
+# duplicate
+
+c = circle({ x: 69, y: 69, drag: true })
+c.text({ content: :ok, color: :yellow, size: 33, center: true })
+t = text({ content: 'touch me!' })
+t.touch do
+  c.duplicate({ x: 7, y: 7 })
+end
+c.touch do
+  c.duplicate({ x: 3, y: 3 })
+end

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

@@ -0,0 +1,6 @@
+# edit
+
+t=text(" you can type your text here")
+t.color(:lightgray)
+t.center(:true)
+t.edit(true)

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

@@ -0,0 +1,9 @@
+# eval example
+
+eval("box(x: 96,y: 96, smooth: 6, color: :orange)")
+begin
+  eval 'x = {id: 1'
+rescue SyntaxError
+  t=text("eval catch the error : 'x = {id: 1'")
+  t.color(:red)
+end

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

@@ -0,0 +1,23 @@
+# extract example
+
+c = circle({ atome_id: :the_circle })
+c.text({ content: "children are restored too!!", visual: 22 })
+
+b = box({ x: 666, drag: true, atome_id: :the_box })
+t = b.text({ content: :ok, yy: 3, color: :black , atome_id: :the_text})
+i = image({ content: :atome, size: 33, x: 96 })
+
+i.transfer(b.atome_id)
+t.content("logo parent is #{i.parent}")
+
+c.touch do
+  grab(:view).extract(c.atome_id)
+  grab(:the_box).extract(i.atome_id)
+  grab(:view).insert(i.atome_id)
+  ATOME.wait 2 do
+    grab(:intuition).insert(c.atome_id)
+  end
+  c.touch do
+    c.delete(true)
+  end
+end

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

@@ -0,0 +1,10 @@
+# fill example
+
+back_try = box()
+back_try.x(350)
+back_try.size(490)
+back_try.scale(true)
+moto_text = back_try.image(:moto)
+moto_text.visual(70)
+back_try.color(:transparent)
+moto_text.fill({target: back_try, number: 7})

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

@@ -0,0 +1,37 @@
+# find example
+
+t= text"touch me to blur all orange object"
+t2= text({content: "touch me to resize all object of the type shape ", x: 390})
+
+b = box({ size: 66 , y: 33, x: 333, color: :orange})
+b.tag("my_tag")
+circle({ x: 200, y: 33 , color: :orange})
+circle({x: 200, y: 96, color: :green, tag: :other_tag})
+
+b.add({ tag: :new_tag })
+
+t.touch do
+  grab(:view).find({ color: :orange }).blur(3)
+end
+
+t2.touch do
+  grab(:view).find({ type: :shape }).size(33)
+end
+
+
+# enhanced find demo
+b=box({color: :red, atome_id: :the_box, y: 44 })
+circle({y: 500, atome_id: :the_circle, color: :green, x: 99})
+t=b.text({content: "my super text!",y: 50, color: :green, atome_id: :text_1 })
+t.text({x: 222, content: :super, atome_id: :text_child, color: :orange})
+b.image({content: :boat, size: 33, atome_id: :the_image, y: 500})
+# grab(:view).find({ y: 500,  condition: :or, recursive: true }).find({ color: :green}).blur(6)
+# find({ y: 500, color: :green, recursive: true, condition: :or }).blur(9)
+grab(:view).find({ y: 50, color: :green, condition: :and, recursive: 3 }).blur(3)
+# grab(:view).find({x: 222, recursive: 3 }).blur(7)
+# b.find({color: :green, recursive: true }).blur(7)
+# grab(:view).find({ color: :red, y: 32 }).find({y: 500}).blur(6)
+
+# condition: or(mean at least one  condition must be respected),  and(mean both condition must be respected)
+# recursive: true, 1, 2 (max depth of recursivity)
+# find can be chained