Clever Geek Handbook

Ruby meme generator to attract interest in the language

image






In my opinion, the Ruby language ceased to be as popular as in 2012 - 2014, and so I had a desire, until the language was completely forgotten, to try to get it to the masses again, because Ruby, in my opinion, is the most convenient and practical language for web development.

A week ago, I was tempted to make my telegram community, find beginner programmers and bring Ruby development to the bright side.



The plans were to create a community, but not in which everyone will write about their problems and bugs on projects (there are enough such communities), but a community in which useful information from the Ruby world will be posted.



First of all, I wanted to make posts in the form of memes, but with educational content.



Like so
image



When I made 10 pictures through the site of meme generators, I realized that everything is very slow and problematic, plus to everything, I made only 10 ruby ​​methods, and about 1,000 more of them can be typed. It was decided to create your own meme generator and even tie the interface to all this and do it all using the Ruby language.



Image Generation with RMagic



In order not to bother much with rendering, the already existing gem `rmagick`



was taken as a basis. Thanks to this gem, we can easily modify pictures.



In the code below, I created new objects (texts) in the form of a picture and placed them on the picture taken as a basis.



Main logic code 
 img = Magick::ImageList.new("1.jpg") title = Magick::Draw.new title.pointsize = 126 title.font_weight = Magick::BoldWeight title.fill = 'white' title.gravity = Magick::CenterGravity title.annotate(img, 0, 0, 0, -400, first_text) descritpion = Magick::Draw.new descritpion.pointsize = 72 descritpion.font_weight = Magick::BoldWeight descritpion.fill = 'white' descritpion.gravity = Magick::CenterGravity descritpion.annotate(img, 0, 0, 0, 300, second_text) img.write("actual_mem/#{first_text}.jpg")




After filling in basic attributes such as font size, boldness, color and gravity of the text. Next, I save the picture in the actual_mem folder. Why do I need this folder will come back later.



Web Interface in Sinatra



Now it was necessary to implement the interface. In order not to deploy a large Rails project for the sake of a small application, I decided to use another Ruby framework called Sinatra



The result is a small file with code to run the application



Sinatra Application Launch File 
 require 'sinatra' get('/') do haml :index end post('/') do if params[:title] && params[:description] require 'rmagick' b = params[:description].scan(/[-a-zA-Z-0-9_.,()—-]+/) second_text = "" b.each_with_index do |text, index| if index.modulo(4) == 3 second_text += text + "\n" else second_text += text + " " end end img = Magick::ImageList.new("../1.jpg") title = Magick::Draw.new title.font = '' title.pointsize = 126 title.font_weight = Magick::BoldWeight title.fill = 'white' title.gravity = Magick::CenterGravity title.annotate(img, 0, 0, 0, -400, params[:title]) descritpion = Magick::Draw.new descritpion.font = '' if b.size > 20 descritpion.pointsize = 48 else descritpion.pointsize = 72 end descritpion.font_weight = Magick::BoldWeight descritpion.fill = 'white' descritpion.gravity = Magick::CenterGravity descritpion.annotate(img, 0, 0, 0, 300, second_text) img.write("../actual_mem/#{params[:title]}.jpg") end haml :index end




You can find documentation on sinatra on the official website, I won’t explain much here.

I screwed CSS Grid a little and using haml I made up the data entry page to create a meme



Haml Code: 
 !!! 5 %html(lang="en") %head %title C  %link{:rel => "stylesheet", :type => "text/css", :href => "/style/main.css"} %body %h1    %form{ :action => "/", method: "post"} %label   %input{ name: "title" } %label   %textarea{ name: "description" } %input{type: "submit"}




CSS code: 
 form { display: grid; grid-template-columns: 200px 1fr; grid-gap: 16px; } label { grid-column: 1 / 2; } input, button { grid-column: 2 / 3; }




Display in browser:
image



I didn’t add any beauty at the first stage, I needed only a clear implementation of the functional. Therefore, the page has only a title, two label tags, input for the upper text and textarea for the lower. And also input for submitting the form to the server.



Future plans



In the future I’m thinking of completing the form - I’ll add a slider to set the font size of the upper and lower text, sliders to position the text, and you can also make a preview block.



In addition to the meme generator, I also implemented a bot for the group, which, on command, sends a picture to the community and moves the picture from the actual_mem folder to the sended_mem folder. The bot is also made in Ruby, but if it is interesting, I’ll do an article about it another time.



The article was written so that novice programmers understand that the language is not complicated and you can realize your ideas and projects as quickly as possible and without any tense situations in just a couple of hours.



Source



github link



Choose Ruby



image






More articles:


All Articles