{"id":217,"date":"2025-04-13T07:09:27","date_gmt":"2025-04-13T07:09:27","guid":{"rendered":"https:\/\/www.mickiwiki.com\/?p=217"},"modified":"2025-04-13T09:37:13","modified_gmt":"2025-04-13T09:37:13","slug":"drag-to-make-gif","status":"publish","type":"post","link":"https:\/\/www.mickiwiki.com\/?p=217","title":{"rendered":"drag to make gif"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Loads images. Makes thumbnails in top bit. Drag images below line. Makes a gif of images below line in left to right order. Y-axis doesn’t matter. Can load same images more than once. Can quickly check movement. Gif saved to “output.gif”. Image sequence .CSV files saved to .\/LISTS\/image_list_*. <\/p>\n\n\n\n

drag_to_gif<\/a>Download<\/a><\/div>\n\n\n\n
#!\/usr\/bin\/perl\nuse strict;\nuse warnings;\nuse Tk;\nuse Tk::Canvas;\nuse Tk::Scrollbar;\nuse File::Basename;\nuse File::Copy;\nuse File::Path qw(remove_tree);\nuse Image::Imlib2;\nuse Tk::PNG;\nuse Tk::JPEG;\nuse Tk::Photo;\nuse feature \"say\";\nuse Data::Dumper qw(Dumper);\nmy ($gif,$canvas2,$frame,$window2,$max_frames,$image_item,$ww,$wh,$counter);\nmy $number=0;\nmy @saved;\nmy $mw = MainWindow->new;\n$mw->title(\"Drag & Re-order Images\");\nmy $button_frame = $mw->Frame(-bg => 'lightgray')->pack(-fill => 'x', -side => 'top');\nmy @lists;\nmy $chk=0;\n$button_frame->Button(\n    -text    => \"Load Images\",\n    -command => \\&load_images,\n    -font    => ['Arial', 14],\n    -width   => 15,\n    -height  => 2\n)->pack(-side => 'left', -padx => 10);\n\n$button_frame->Button(\n    -text    => \"NEW GIF\",\n    -command => sub{&rename_images;&make_gif;&play_gif;&remove;},\n    -font    => ['Arial', 14],\n    -width   => 15,\n    -height  => 2\n)->pack(-side => 'left', -padx => 10);\n\n$button_frame->Button(\n    -text    => \"CLOSE\",\n    -command => sub{&exit},\n    -font    => ['Arial', 14],\n    -width   => 15,\n    -height  => 2\n)->pack(-side => 'left', -padx => 10);\n\n# Main canvas frame (contains both scrollable areas)\nmy $canvas_frame = $mw->Frame()->pack(-fill => 'both', -expand => 1);\nmy $canvas = $canvas_frame->Canvas(-width => 2000, -height => 500, -bg => 'white');\nmy $scroll_x = $canvas_frame->Scrollbar(-orient => 'horizontal', -command => sub { $canvas->xview(@_) });\n$canvas->configure(-xscrollcommand => ['set', $scroll_x]);\n$canvas->pack(-side => 'top', -fill => 'both', -expand => 1);\n$scroll_x->pack(-side => 'bottom', -fill => 'x');\n\n\n# Separation line\nmy $separation_y = 220;\nmy $separation_line = $canvas->createLine(0, $separation_y, 10000, $separation_y, -fill => 'black', -width => 2);\n\nmy %image_data;\nmy $dragging;\nmy ($drag_offset_x, $drag_offset_y);\nMainLoop;\n\nsub load_images {\n    my @files = @{$mw->getOpenFile(\n        -multiple => 1,\n        -filetypes => [['Images', ['.png', '.jpg', '.jpeg', '.gif']]],\n    )};\n    return unless @files;\n #say Dumper (\\@files);   \n    my $x = 10;\n    my $max_x = 10;\n    \n    foreach my $file (@files) {\n        next unless -f $file;\n        \n        my $img = create_thumbnail($file);\n        my $id = $canvas->createImage($x, 10, -image => $img, -anchor => 'nw');\n        \n        $image_data{$id} = { file => $file, x => $x, y => 10, image => $img };\n        \n        # Enable dragging\n        $canvas->bind($id, '<ButtonPress-1>' => [\\&start_drag, $id]);\n        $canvas->bind($id, '<B1-Motion>' => [\\&do_drag, $id]);\n        $canvas->bind($id, '<ButtonRelease-1>' => [\\&stop_drag, $id]);\n        \n        $x += 100; # check this\n        $max_x = $x if $x > $max_x;\n    }\n    \n    # Update scroll region dynamically\n    $canvas->configure(-scrollregion => [0, 0, $max_x, 800]); # need this\n\n}\n\n\nsub create_thumbnail {\n    my ($file) = @_;\n    my $img = $mw->Photo(-file => $file);\n    my ($width, $height) = ($img->width, $img->height);\n($ww,$wh)=($width,$height); \n    my $scale = 80 \/ $width;\n    my $thumb = $mw->Photo(-width => 80, -height => int($height * $scale));\n    $thumb->copy($img, -subsample => int($width \/ 80));\n\n    return $thumb;\n}\n\nsub start_drag {\n    my ($canvas, $id) = @_;\n    $dragging = $id;\n    my $e = $canvas->XEvent;\n    my ($img_x, $img_y) = $canvas->coords($id);\n    $drag_offset_x = $e->x - $img_x;\n    $drag_offset_y = $e->y - $img_y;\n}\n\nsub do_drag {\n    my ($canvas, $id) = @_;\n    return unless $dragging;\n    \n    my $e = $canvas->XEvent;\n    my $new_x = $e->x - $drag_offset_x;\n    my $new_y = $e->y - $drag_offset_y;\n    \n    $canvas->coords($id, $new_x, $new_y);\n    \n    # Ensure items can move across the separation line\n    $image_data{$id}{x} = $new_x;\n    $image_data{$id}{y} = $new_y;\n}\n\nsub stop_drag {\n    $dragging = undef;\n}\n\n\nsub rename_images {\n$chk++;\nif($window2){$window2->destroy;}\nmy $dir = \"re-ordered\";  #added\n    my @sorted_images = sort { \n        my $a_x = $image_data{$a}{x} \/\/ 0; \n        my $b_x = $image_data{$b}{x} \/\/ 0;\n        $a_x <=> $b_x\n    }\n    grep { \n        my $y = $image_data{$_}{y} \/\/ 0; \n        $y > $separation_y\n    } keys %image_data;\n   \n    return unless @sorted_images;\n\n  $counter =0;\n    for my $id (@sorted_images) {\n        \n        my ($old_path, $ext) = ($image_data{$id}{file}, '.png');\n#say $old_path;\n$lists[$chk][$counter]{file}=$old_path;\n#say Dumper(\\@lists);\nmy $new_path = sprintf(\"re-ordered\/image_%04d\".\"$ext\",$counter);\n        copy($old_path, $new_path);\n       # print \"Renamed: $old_path -> $new_path\\n\";\n$counter++;\n    }\n\n}\n\n\n\nsub play_gif{\n    my ($ww, $wh) = ($ww + 60, $wh + 60);\n    $window2 = $mw->Toplevel;\n    $window2->geometry(\"${ww}x${wh}+1500+500\");\n    $canvas2 = $window2->Canvas(-width => $ww, -height => $wh);\n    $canvas2->pack;\n\n    my $myfile = 'output.gif';\n    $gif = $mw->Photo(-file => $myfile, -format => 'gif');\n\n    # Auto-detect number of frames\n    my $frames = 0;\n    while (eval { $gif->configure(-format => \"gif -index $frames\"); 1 }) {\n        $frames++;\n    }\n\n    if ($frames == 0) {\n        print \"Error: No frames found in GIF!\\n\";\n        return;\n    }\n    \n    $frame = 0;\n    $max_frames = $frames;  # Use detected frame count\n\n    $image_item = $canvas2->createImage(0, 0, -anchor => 'nw', -image => $gif);\n\n    sub update_frame {\n        $gif->configure(-format => \"gif -index $frame\");\n        $canvas2->itemconfigure($image_item, -image => $gif);\n        $frame = ($frame + 1) % $max_frames;\n        $window2->after(100, \\&update_frame);\n    }\n\n    update_frame();\n}\t\n\t\nsub remove {\nmy %temp;\nmy $dir = \"LISTS\";\nif (! -d $dir){mkdir \"LISTS\"}\n\nmy $file_name = sprintf(\"image_list_%04d\",$chk);\nopen(my $fh, '>', \"$dir\/$file_name\") or die \"Cannot open filelist: $!\";\nfor (my $i=0;$i<=$counter-1;$i++){\n$temp{file} = $lists[$chk][$i]{file}; \n#say \" temp = $temp\";\t\nprint $fh \"image,$temp{file}\\n\";\n\t}\nclose $fh;\t\n    $dir = \"re-ordered\";\n    if (-d $dir) {\n        remove_tree($dir, { error => \\my $err });\n        if (@$err) {\n            warn \"Error removing directory: @$err\\n\";\n        } else {\n            #print \"Removed directory: $dir\\n\";\n        }\n    }\n    mkdir $dir;  # Recreate it for new images\n\n}\n\nsub numerically {\n    my ($a_num) = $a =~ \/(\\d+)\/;\n    my ($b_num) = $b =~ \/(\\d+)\/;\n$a_num \/\/= 0;  # Set $a_num to 0 if it's uninitialized\n$b_num \/\/= 0;  # Set $b_num to 0 if it's uninitialized\nreturn $a_num <=> $b_num;\n}\n\n\n\nsub make_gif{ \n# add check for directories and files.\nunless (-e \"output.gif\") {\n    open my $fh, '>', \"output.gif\" or die \"Cannot create output.gif: $!\";\n    close $fh;\n}\n\nsystem('ffmpeg -y -v quiet -i re-ordered\/image_%04d.png -vf \"palettegen\" palette.png');\nsystem('ffmpeg -y -v quiet -framerate 10 -i re-ordered\/image_%04d.png -i palette.png -filter_complex \"paletteuse\" -gifflags -offsetting -loop 0 output.gif');\n}\n\nsub close{\n$mw->destroy;\t\n\t}\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Loads images. Makes thumbnails in top bit. Drag images below line. Makes a gif of images below line in left to right order. Y-axis doesn’t matter. Can load same images more than once. Can quickly check movement. Gif saved to “output.gif”. Image sequence .CSV files saved to .\/LISTS\/image_list_*.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-217","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/posts\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=217"}],"version-history":[{"count":4,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=\/wp\/v2\/posts\/217\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mickiwiki.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}