atome 0.1.00009 → 0.4.5.4

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

@@ -0,0 +1,109 @@
+
+
+# size example
+t1 = text({ content: :change_image, y: 9 })
+t2 = text({ content: :change_parent, y: +t1.height + 9 })
+t3 = text({ content: :fit, y: t2.y + t1.height + 9 })
+t4 = text({ content: :fit_width, y: t3.y + t1.height + 9 })
+t5 = text({ content: :fit_height, y: t4.y + t1.height + 9 })
+t6 = text({ content: :fit_dynamic_scale_the_box_to_test, y: t5.y + t1.height + 9 })
+t7 = text({ content: :overflow, y: t6.y + t1.height + 9 })
+t8 = text({ content: :size_69, y: t7.y + t1.height + 9 })
+
+#box 1
+b = box({ x: 333, width: 333, height: 96, drag: true, atome_id: :the_box, color: :green })
+#box 2
+b2 = box({ color: :orange, x: 333, y: 123, width: 96, height: 333, drag: true, atome_id: :the_box2 })
+i = b.image({ content: :sky, drag: true })
+
+t1.touch do
+  if i.content == :sky
+    size_found = i.size
+    i.delete(true)
+    i = b.image({ content: :moto, drag: true })
+    i.size(size_found)
+  elsif i.content == :moto
+    size_found = i.size
+    i.delete(true)
+    i = b.image({ content: :ballanim, drag: true })
+    i.size(size_found)
+  elsif i.content == :ballanim
+    size_found = i.size
+    i.delete(true)
+    i = b.image({ content: :eyes, drag: true })
+    i.size(size_found)
+  else
+    size_found = i.size
+    i.delete(true)
+    i = b.image({ content: :boat, drag: true })
+    i.size(size_found)
+  end
+end
+
+t2.touch do
+  if i.parent.include?(b.atome_id)
+    i.parent(b2.atome_id)
+    grab(b.atome_id).extract(i.atome_id)
+  else
+    i.parent(b.atome_id)
+    grab(b2.atome_id).extract(i.atome_id)
+  end
+
+  i.x = i.y = 0
+end
+
+t3.touch do
+  i.size(:fit)
+end
+
+t4.touch do
+  i.size({ fit: :width })
+end
+
+t5.touch do
+  i.size({ fit: :height })
+end
+
+t6.touch do
+  i.size({ dynamic: true })
+  b.scale(true)
+  b2.scale(true)
+end
+
+t7.touch do
+  if b.overflow == :visible
+    b.overflow(:hidden)
+    b2.overflow(:hidden)
+  else
+    b.overflow (:visible)
+    b2.overflow(:visible)
+  end
+end
+
+t8.touch do
+  i.size(69)
+end
+i.size(96)
+t9 = text("test")
+t9.x(123).touch do
+  t9.content(i.size)
+end
+
+# #fixme :  quark should be able to read property, ex: alert i.parent.width # to get width
+#
+the_parent =grab(i.parent.last)
+# alert grab(the_parent)
+the_parent.monitor(true) do
+  #fixme :  quark should be able to read property, ex: alert i.parent.width # to get width
+  parent_atome = i.parent.read[0]
+
+  if parent_atome.scale
+    if i.size && i.size[:dynamic] == true
+      i.size = i.size[:fit]
+    end
+  end
+end
+c = text({ content: "stop dynamic scale", y: 222 })
+c.touch do
+  the_parent.monitor({ option: false })
+end

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

@@ -0,0 +1,5 @@
+# smooth example
+
+b=box({color: :orange})
+b.x(250)
+b.smooth([25 ,7])

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

@@ -0,0 +1,5 @@
+# example speech rendering
+
+b=box({  language: :english,engine: :speech})
+
+c=circle(  language: :french,engine: :speech)

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

@@ -0,0 +1,6 @@
+# synth
+
+c=circle({width: 69, height: 69, y: 66, x: 69})
+c.touch(option: :down) do
+  c.audio_dsp("dspcheck")
+end

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

@@ -0,0 +1,3 @@
+# system
+
+system("open", "http://localhost:9292")

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

@@ -0,0 +1,18 @@
+# tags example
+
+t= text"touch me to color all objects that share the tag : my_cool_tag "
+b = box({ size: 66 , y: 33})
+b.tag("my_tag")
+c = circle({ x: 200, y: 33 })
+batch([b,c, t]).tag('my_cool_tag')
+c2=circle({x: 200, y: 96, color: :green, tag: :other_tag})
+
+b.add({ tag: :new_tag })
+
+t.touch do
+  grab(:view).find({ tag: "my_cool_tag" }).color(:yellow)
+  grab(:view).find({ tag: "my_cool_tag" }).each do |item|
+  end
+  t.content("the box have the tags : #{b.tag}, \nthe green circle has the tag :#{c2.tag} ")
+end
+

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

@@ -0,0 +1,33 @@
+# text
+
+b = box({ atome_id: :tutu, y: 96, x: 96, width: 333, height: 333 })
+t = text({ content: lorem, color: :red, atome_id: "toto", width: :auto })
+scale = text({ content: :scale, x: 9, y: 9 })
+drag = text({ content: :drag, x: scale.x + 100, y: 9 })
+margin = text({ content: :margin, x: drag.x + 100, y: 9 })
+format = text({ content: :format, x: margin.x + 100, y: 9 })
+edit = text({ content: :edit, x: format.x + 100, y: 9 })
+fit = text({ content: :fit, x: edit.x + 100, y: 9, color: :white })
+scale.touch do
+  t.visual(25)
+  t.scale(true) do |evt|
+    puts evt
+  end
+end
+fit.touch do
+  t.parent(b.atome_id)
+end
+edit.touch do
+  t.edit(true)
+end
+margin.touch do
+  t.set(width: :auto, height: :auto, x: 33, xx: 33)
+end
+format.touch do
+  b.scale(true) do
+
+  end
+end
+drag.touch do
+  b.drag(true)
+end

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

@@ -0,0 +1,33 @@
+# text selection example
+
+t = text({ content: "type what you want", x: 333 })
+t.visual(33)
+
+t.key(:down) do 
+  w_get = JSUtils.client_width(t.atome_id)
+  t.width = :auto
+  t.width = if w_get > 300
+              300
+            else
+              :auto
+            end
+end
+t.key(:up) do |evt|
+  w_get = JSUtils.client_width(t.atome_id)
+  t.width = if w_get < 99
+              99
+            elsif w_get > 300
+              300
+            else
+              :auto
+            end
+end
+t.border(({ color: :red, thickness: 3, pattern: :dashed }))
+t.over do
+  t.visual({ select: :all })
+end
+
+t.touch do
+  t.visual({ select: :all })
+end
+

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

@@ -0,0 +1,22 @@
+# text to midi example
+
+# require "opal-parser"
+t=text("ok")
+
+cc = circle({width: 33, height: 33, y: 69, x: 69, color: :yellow, atome_id: :the_cc})
+
+ATOME.repeat 5, 0 do |evt|
+  t.content(evt.abs)
+  reader("./medias/rubies/text_read.rb") do |datas_get|
+    datas=eval(datas_get)
+    temperature= datas[:temperature]
+    wind= datas[:wind]
+    humidity= datas[:humidity]
+    t.content( "temperature : #{temperature}, wind : #{wind}, humidity : #{humidity}")
+    # cc.transmit({midi: {play: {note: "C3", channel: 15, velocity: 10}}})
+    ATOME.wait 2 do
+      t.content(:stop)
+      # cc.transmit({midi: {stop: {note: "C3", channel: 15, velocity: 100}}})
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# touch example
+
+b = box({ x: 96, y: 6, text: { content: "on mouse down", center: true, color: :black } })
+b.touch({ option: :down }) do
+  b.color(:orange)
+  b.x = b.x + 10
+end
+t=text({content: "kill touch\non box"})
+t.touch do
+  b.touch({remove: :true })
+end
+
+c = circle({ x: 33, y: 96, text: { content: "on mouse up", center: true, color: :black } })
+c.touch({ option: :up}) do
+  anim({
+         start: {x: 0, y: 0, smooth: 0, rotate: 20},
+         end: {x: 400, y: 70, smooth: 25, rotate: 180},
+         duration: 2000,
+         loop: 3,
+         curve: :easing,
+         target: c.atome_id
+       })
+end

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

@@ -0,0 +1,27 @@
+# touch stop_event example
+
+b = box
+c = b.circle({size: 30, center: true})
+
+b.touch({ option: :down, stop: true }) do
+  if b.width== 333
+    b.width(66)
+    b.color(:white)
+  else
+    b.color(:black)
+    b.width(333)
+  end
+end
+
+# stop option stop the propagation of the event
+c.touch(option: :down, stop: true) do
+  # b.color(:blue)
+
+  if b.width== 333
+    c.width(66)
+    c.color(:orange)
+  else
+    c.color(:yellow)
+    c.width(333)
+  end
+end

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

@@ -0,0 +1,26 @@
+b=box({drag: true,atome_id: :the_box})
+t=b.text({content: :hello, atome_id: :the_text})
+b.text({content: :cool, x: 72, atome_id: :the_text_1})
+b.text({content: :super, y: 66, atome_id: :the_text_2})
+b.text({content: "too much", y: 66, x: 96,  atome_id: :the_text_3})
+b.circle({x: 333, atome_id: :the_circle})
+t.center(:all)
+# we can treat all text of b using .each
+b.circle.each do |circles_founc|
+  circles_founc.color(:green)
+end
+# or iterate  on the object type
+b.text do |atome|
+  atome.color(:orange)
+end
+
+ATOME.wait 2 do
+  # or even directly setting the property
+  b.text.color(:cyan)
+  # or choose an atome
+  b.text[2].color(:red)
+  # or a range of atomes
+  ATOME.wait 2 do
+    b.text[0..1].color(:yellow)
+  end
+end

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

@@ -0,0 +1,27 @@
+# type mutation
+
+parent = circle({ overflow: :hidden, width: 300,
+                  height: 300, color: :orange, drag: true })
+b = parent.circle({ atome_id: :b, content: :boat, drag: true, x: 96, y: 96 })
+
+ATOME.wait 1 do
+  b.type(:image)
+  b.content(:boat)
+  ATOME.wait 1 do
+    b.content(:moto)
+    ATOME.wait 1 do
+      b.type(:text)
+      ATOME.wait 1 do
+        b.color(:black)
+        ATOME.wait 1 do
+          b.smooth(100)
+          b.type(:shape)
+          ATOME.wait 1 do
+            b.smooth(0)
+            b.type(:text)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+# play callback example:
+
+v = video({ content: "madmax" })
+t = text({ content: "play position", xx: 96, visual: 15 })
+t2 = text({ content: :"play status", xx: 333, visual: 15 })
+
+t2.touch do
+  t2.content(v.play[:status])
+end
+
+v.touch do
+  v.play(true) do |evt|
+    t.content(evt)
+  end
+  t2.content(v.play[:status])
+end
+
+c = circle({ x: 333, y: 9 })
+c.text({ content: "pause", center: true, visual: 15 })
+
+c.touch do
+  v.play(:pause) do |evt|
+    t.content(evt)
+  end
+  t2.content(v.play[:status])
+end
+
+d = circle({ x: 333, y: 120, color: :black })
+d.text({ content: "stop", center: true, visual: 15 })
+
+d.touch do
+  v.play(:stop) do |evt|
+    t.content(evt)
+  end
+  t2.content(v.play[:status])
+end
+
+e = circle({ x: 333, y: 222, color: :green })
+e.text({ content: "play from 33", center: true, visual: 15 })
+
+e.touch do
+  v.play(33) do |evt|
+    t.content(evt)
+  end
+  t2.content(v.play[:status])
+end

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

@@ -0,0 +1,29 @@
+# view mode example
+
+a = image({ content: :moto, atome_id: :the_moto, x: 96, y: 333})
+t1=text({ content: "list mode(childs)", x: 3,y: 3})
+t2=text({ content: "list property", x: 3,y: 33 })
+t3=text({ content: "natural mode" , x: 3,y: 66})
+
+t1.touch do
+  a.render({
+             mode: :list,
+             ordered: :x,
+             visualize: [:visual,:x, :y, :color, :atome_id]
+           })
+end
+t2.touch do
+  a.render({
+             mode: :list,
+             list: :property,
+             sort: :alphabetically
+           })
+end
+t3.touch do
+  a.render(true)
+end
+
+a.drag(true)
+a.circle({ color: :green, x: 39, y:33, atome_id: :the_circle })
+a.text({ content: :kool, color: :yellow, x: 0, y:96, atome_id: :the_text})
+a.box({width: 33, height: 69, x: 36, atome_id: :the_box})

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

@@ -0,0 +1,17 @@
+# virtual_event example
+
+c=circle({atome_id: :circle_1, x: 69, y: 99})
+
+c.touch do
+  if c.color==:red
+    c.color(:yellowgreen)
+  else
+    c.color(:red)
+  end
+end
+
+t=text({content:  "touch me send a virtual touch to the circle", x: 99})
+
+t.touch do
+  grab(:circle_1 ).virtual_event({ event: :touch ,x: 30, y:30})
+end

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

@@ -0,0 +1,23 @@
+# visual example
+
+t = text({content: "type_some_text,_try_to_press_return_and_touch_the_red_circle", visual: :Impact, x: 150})
+t.touch({option: :down}) do
+  grab(:device).edit(false)
+end
+
+# fixme we must find a solution allow shortcut and auto sized text
+grab(:device).touch({option: :down}) do
+  # grab(:device).edit(true)
+end
+t.width(333)
+t.visual({wrap: " "})
+t.visual({ fit: :width})
+t.edit( true)
+t.border({color: :orange, thickness: 7, pattern: :solid})
+c=circle({size: 33, x: 69})
+c.touch do
+  t.visual({fit: :width})
+end
+
+# viusal params : visual: {size: 33,path: :arial,alignment: :right,wrap: " " , fit: :height  }
+# visual default : { path: :ruboto, size: 33, alignment: :center, wrap: " ", fit: :none }

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

@@ -0,0 +1,5 @@
+# vr example
+i=image(:beach)
+i.display(:vr)
+i.width(600)
+i.height(900)

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

@@ -0,0 +1,21 @@
+# wait
+
+b=box({x:300})
+t=text("click me to kill the wait process")
+waiter= wait 5 do
+  b.set({color: :orange, smooth: 20})
+end
+
+t.touch do
+  t.clear({wait: waiter})
+end
+
+
+def notification(message,duration)
+  notification=text({content: message, x: 300, y: 69})
+  grab(:atome).wait duration do
+    notification.delete()
+  end
+end
+
+notification(:hello, 3)

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

@@ -0,0 +1,10 @@
+# web_object example
+
+my_tube = web({type: :iframe, path: "https://www.youtube.com/embed/usQDazZKWAk" })
+my_tube.y = 150
+my_tube.drag(true)
+my_tube.width = 300
+
+web({ type: :image, path: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" })
+# web can also be specified without supplying any path ex :
+# web('<image src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"/>')my_tube.x = 300

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

@@ -0,0 +1,14 @@
+# web_address_bar example
+
+t = text({ content: "Navigate using the next back arrow in your browser \nto reveal the address bas content", y: 66 })
+address_bar_content = text({ content: "touch to change adress bar content", x: 6, y: 6 })
+
+# t.touch do
+  address_bar_content.address do |e|
+    t.content = "#{e[:location]}\n#{e[:state]}"
+  end
+# end
+
+address_bar_content.touch do
+  address_bar_content.web({ address: :my_page })
+end

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

@@ -0,0 +1,16 @@
+
+t=text( "touch me to set the websocket adress to localhost ('0.0.0.0:9292')")
+t2=text({y: 30, content: "touch me to reset the websocket adress to atome.one" })
+
+t.touch do
+  # ATOME.websocket
+  #second parameter is ssl (true or false)
+  #or  ATOME.websocket('0.0.0.0:9292', false)
+
+  ATOME.websocket("localhost:9292", false)
+
+end
+
+t2.touch do
+  ATOME.websocket("ws.atome.one", true)
+end

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

@@ -0,0 +1,10 @@
+# webstate example
+
+t=text(web_state)
+
+
+b=box({x: 333})
+b.touch do
+  ATOME.message({ type: :code, content: "circle({x: 33,y: 33})" })
+  t.content(web_state)
+end

data/vendor/assets/build/medias/rubies/examples/atome.new.rb

@@ -0,0 +1,12 @@
+a=Atome.new(
+  shape: { render: [:html], id: :crasher, type: :shape, parent: [:view], left: 99, right: 99, width: 99, height: 99,
+           color: { render: [:html], id: :c315, type: :color,
+                    red: 1, green: 0.15, blue: 0.15, alpha: 0.6 } }
+)
+
+# attention to modify an atome using Atome.new you must apply your method to the first atome
+# here the first atome is shape,  so if you want to make it draggable drag type:
+
+a.shape.drag(true) do |x, y|
+  puts "drag position: #{x}"
+end

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

@@ -0,0 +1,3 @@
+b = box({ height: :auto, width: 99, left: 333 })
+b.top(99)
+b.bottom(99)

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

@@ -0,0 +1,2 @@
+b = box({ width: :auto, left: 333 })
+b.right(333)

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

@@ -0,0 +1 @@
+ box({  bottom: 12 })

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

@@ -0,0 +1 @@
+ box({ width: 333, left: 333 })

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

@@ -0,0 +1,13 @@
+c = circle
+
+# the easy way
+c.color(:red)
+
+# the most performant way :
+
+c.color(
+  { render: [:html], id: :c319, type: :color,
+    red: 1, green: 1, blue: 0.15, alpha: 0.6 }
+)
+
+# please note that render , id and type params must place in order

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

@@ -0,0 +1,11 @@
+b = box({ width: 333, left: 333})
+b.height(33)
+b.left(333)
+
+b.smooth([33, 2, 90])
+b.touch(true) do
+
+  color({ render: [:html], id: "color_#{Universe.atomes.length}", type: :color,
+          red: 1, green: 0.33, blue: 0.22, alpha: 1 })
+end
+ b.circle({ left: 333 })

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

@@ -0,0 +1,5 @@
+b=box
+b.drag(true) do |x, y|
+  # below here is the callback :
+  puts "drag position: #{x}"
+end

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

@@ -0,0 +1 @@
+puts Utilities.renderer_list

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

@@ -0,0 +1,3 @@
+box({id: :my_box})
+# allow to get any atome using it's id
+grab(:my_box).color(:yellow)

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

@@ -0,0 +1,2 @@
+b = box({  left: 333 })
+b.height(33)

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

@@ -0,0 +1,4 @@
+Atome.new(
+  image: { render: [:html], id: :image1, type: :image, parent: [:view], path: "./medias/images/boat.png", left: 99, top: 120, width: 199, height: 199,
+  }
+)

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

@@ -0,0 +1,2 @@
+b = box({  left: 333 })
+b.left(333)

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

@@ -0,0 +1,13 @@
+Atome.new(
+  shape: { render: [:html], id: :crasher, type: :shape, parent: [:view], left: 99, right: 99, width: 99, height: 99,
+           color: { render: [:html], id: :c315, type: :color,
+                    red: 1, green: 0.15, blue: 0.15, alpha: 0.6 } }
+)
+text = Atome.new(
+  text: { render: [:html], id: :text1, type: :text, parent: [:view], visual: { size: 33 }, string: "hello!", left: 399, top: 633, width: 199, height: 33,
+  }
+)
+
+text.text.link(:c315)
+# now we change the color all the obect that share the care modified
+grab(:c315).red(0)