save/open animation.

otosopp/otosopp.html

@@ -3,6 +3,8 @@
 <script src="../taptapir/taptapir.js"></script>
 <script src="../taptapir/taptapir_gamepad.js"></script>
 <script src="assets/base_64_brushes.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
+
 <script type='text/sunsnake'>
 
 
@@ -1003,21 +1005,71 @@
 
 save_button = *Button(xy=[(-.5*aspect_ratio)+.06,.5], origin=[-.5,.5], scale=[.05,.025], text='save', text_size=1)
 save_button.on_click = def save():
+    save_file(current_layer.canvas)
+
+save_button.input = def input(key):
+    if held_keys['shift'] and key == 's':
+        save_button.on_click()
+
+save_animation_button = *Button(xy=[(-.5*aspect_ratio)+.12,.5], origin=[-.5,.5], scale=[.075,.025], text='save\nanimation', text_size=1, on_click=save_animation)
+
+async def save_animation():
     num_frames = len(animator.frames)
-    if num_frames == 0:
-        save_file(current_layer.canvas)
-    else: # save animation
-        for i in range(num_frames):
-            goto_frame(i)
-            number_string = `000${i}`.substr(-4)
-            # print('save frame as:', `${DOCUMENT_NAME}_${number_string}`)
-            save_file(current_layer.canvas, `${DOCUMENT_NAME}_${number_string}`)
+    # images = []
+    # for i in range(num_frames):
+    #     goto_frame(i)
+    #     images.append(current_layer.canvas.toDataURL('image/png'))
+    const options = {
+        types: [{
+        description: 'png animation',
+        accept: {'text/otomation': ['.otomation'],},
+        },],
+        suggestedName: 'untitled_animation.otomation'
+    }
+    data = {
+        'fps' : FPS,
+        'frames' : animator.frames
+    }
+    const jsonData = JSON.stringify(data)
+    const jsonBlob = new Blob([jsonData], {type: 'application/json'})
+    const newHandle = await window.showSaveFilePicker(options)
+    const writableStream = await newHandle.createWritable()
+    await writableStream.write(jsonBlob)
+    await writableStream.close()
+    # const gif = new GIF({workers: 2, quality: 1})
+
+    # num_frames = len(animator.frames)
+    # for i in range(num_frames):
+    #     goto_frame(i)
+    #     # number_string = `000${i}`.substr(-4)
+    #     # print('save frame as:', `${DOCUMENT_NAME}_${number_string}`)
+    #     # save_file(current_layer.canvas, `${DOCUMENT_NAME}_${number_string}`)
+    #     gif.addFrame(current_layer.canvas, {delay: int(1/FPS*1000)})
+
+    # # // Render the GIF and automatically download it
+    # const options = {
+    #     types: [{
+    #         description: 'GIF Image',
+    #         accept: { 'image/gif': ['.gif'] },
+    #     }],
+    #     suggestedName: 'untitled_animation.gif'
+    # }
+    # async def on_finished(blob):
+    #     print('finished', blob)
+    #     const newHandle = await window.showSaveFilePicker(options)
+    #     const writableStream = await newHandle.createWritable()
+    #     await writableStream.write(blob)
+    #     await writableStream.close()
+
+    # gif.on('finished', on_finished)
+
+    # gif.render() # Start rendering the GIF
+    # print('RENDER GIF!!!')
+
 
     # dataURL = canvas.toDataURL("image")
     # window.localStorage.setItem("image", dataURL)
-save_button.input = def input(key):
-    if held_keys['shift'] and key == 's':
-        save_button.on_click()
+
 
 
 def copy_selection():
@@ -1437,10 +1489,25 @@
         open_file()
 
 async def open_file():
-    const pickerOpts = {types: [{description: "Images", accept:{"image/*": [".png", ".gif", ".jpeg", ".jpg"],},},], excludeAcceptAllOption: true, multiple: false};
+    const pickerOpts = {types: [{description: "Images", accept:{"image/*": [".png", ".gif", ".jpeg", ".jpg", ".otomation"],},},], excludeAcceptAllOption: true, multiple: false};
     const [fileHandle] = await window.showOpenFilePicker(pickerOpts)
     const file = await fileHandle.getFile()
     const reader = new FileReader();
+
+    # print('fffffffffffffffff', file)
+    if file['name'].endswith('.otomation'):
+        # load_animation()
+        print('load animation')
+        reader.onload = def on_load(event):
+            const data = JSON.parse(event.target.result)
+            FPS = data['fps']
+            animator.frames = data['frames']
+            print('loaded animation')
+
+
+        reader.readAsText(file)
+        return
+
     _IMG = new Image()
 
     reader.addEventListener('load', (event) => :
@@ -1744,7 +1811,8 @@
 animator = Entity(visible_self=False, i=0, frames=[], playing=False)
 frame_counter = *Button(origin=[-.5,-.5], position=[bottom_left[0]+resolution_info.scale_x, bottom_left[1]], scale=[.075,.015], text='frame: 0', roundness=0, alpha=.5, text_size=1)
 animator.max_frames = 3
-fps = 12
+FPS = 12
+
 
 animator.frames.append(current_layer.canvas.toDataURL())
 animator.input = def input(key):
@@ -1777,7 +1845,6 @@
     animator.frames.append(current_layer.canvas.toDataURL())
     goto_frame(animator.i+1)
 
-FPS = 12
 def play():
     if not animator.playing:
         return
@@ -1794,11 +1861,10 @@
     if save_previous_frame:
         animator.frames[animator.i] = current_layer.canvas.toDataURL()
 
-    animator.i += 1
-    if animator.i >= len(animator.frames):
-        animator.i = 0
 
-    # animator.i = clamp(to_frame, 0, len(animator.frames)-1)
+    if to_frame >= len(animator.frames):
+        to_frame = 0
+    animator.i = clamp(to_frame, 0, len(animator.frames)-1)
 
     # load next frame
     var loaded_image = new Image