improve ime upload resizing

Author: digitaltom

Dockerfile

@@ -11,7 +11,9 @@ WORKDIR /rails
 ENV RAILS_ENV="production" \
     BUNDLE_DEPLOYMENT="1" \
     BUNDLE_PATH="/usr/local/bundle" \
-    BUNDLE_WITHOUT="development"
+    BUNDLE_WITHOUT="development" \
+    HTTP_PORT=3001 \
+    SSL=false
 
 # Install application gems
 COPY Gemfile Gemfile.lock ./
@@ -45,4 +47,6 @@ HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
 
 # Start the server by default, this can be overwritten at runtime
 EXPOSE 3000
+EXPOSE 3001
+
 CMD ["./bin/thrust", "rails", "server"]

README.md

@@ -104,7 +104,7 @@ podman run ... -v /path/on/host/GeoLite2-City.mmdb:/rails/db/GeoLite2-City.mmdb
 
 - `SECRET_KEY_BASE` — Rails secret key (must be set in production)
 - `DEVELOPER_LOGIN_ENABLED` — optional local developer login (only enable this in test instances)
-- `HTTP_PORT` — HTTP port inside the container (default: 3000)
+- `HTTP_PORT` — HTTP port inside the container (default: 3001 for thruster, 3000 for puma)
 - `SSL` — set to `true` if your container is running behind a TLS terminating reverse proxy (default: true)
 - `MONGO_URL` — MongoDB connection string (default: `localhost:27017`)
 - `MONGO_DB` — MongoDB database name (default: 'mapforge_production')
@@ -144,7 +144,7 @@ db/GeoLite2-City.mmdb
 ### Running the Development Server
 
 ```bash
-bin/thrust rails server
+HTTP_PORT=3001 bin/thrust rails server
 ```
 
 In development, environment variables (see above) can be set in `.env.development`. 

app/assets/stylesheets/modals.css

@@ -78,7 +78,7 @@
   border-width: 2px;
   border-style: solid;
   border-color: #fff;
-  margin: 5px;
+  margin: 0.2rem;
   opacity: 0.8;
   transition:
     opacity 0.3s linear,
@@ -93,6 +93,11 @@
   opacity: 1;
 }
 
+.map-settings {
+  margin-top: 0.5rem;
+  margin-left: 0.3rem;
+}
+
 .view-values {
   font-family: monospace;
   background: var(--color-light-steel-blue);

app/controllers/images_controller.rb

@@ -53,15 +53,13 @@ def upload
 
     # use existing image if already uploaded
     unless (img = Image.find_by(public_id: filename))
+      # https://github.com/mtgrosser/rszr
+      image = Rszr::Image.load(tempfile.path)
       # resize image if it exceeds 1024px
-      image = MiniMagick::Image.read(tempfile)
       if image.width > 1024 || image.height > 1024
-        image.resize "1024x1024" # Maintains aspect ratio, resizes width to 1024px max
-        image.quality "75"
-        tempfile = Tempfile.new([ "resized-", File.extname(uploaded_file.original_filename) ])
-        image.write(tempfile.path)
+        image.resize!(1024, 1024, crop: false)
+        image.save(tempfile.path)
       end
-
       uid = Dragonfly.app.store(tempfile, "name" => filename) # name needs to be a string here
       img = Image.create!(img_uid: uid, public_id: filename, user: @user)
     end

app/views/maps/modals/_settings.haml

@@ -37,29 +37,28 @@
 
         - Map::BASE_MAPS.each do |base_map|
           - active = (@map_properties[:base_map] == base_map)
-
           - map_image = "base_maps/placeholder.jpg"
           - if Rails.application.assets.find_asset("base_maps/#{base_map}.jpg").present?
             - map_image = "base_maps/#{base_map}.jpg"
           = image_tag(map_image, data: { base_map: base_map, action: "click->map--settings#updateBaseMap" }, class: "layer-preview", loading: 'lazy')
 
-        %br
-        - # Default checkbox state gets set by initSettingsModal()
-        %span.no-wrap.me-2
-          %label{ for: "map-terrain"} 3D Terrain:
-          %input#map-terrain{type: "checkbox", data: { action: "click->map--settings#updateTerrain"} }
+        .map-settings
+          - # Default checkbox state gets set by initSettingsModal()
+          %span.no-wrap.me-2
+            %label{ for: "map-terrain"} 3D Terrain:
+            %input#map-terrain{type: "checkbox", data: { action: "click->map--settings#updateTerrain"} }
 
-        %span.no-wrap.me-2
-          %label{ for: "map-hillshade"} Hillshade:
-          %input#map-hillshade{type: "checkbox", data: { action: "click->map--settings#updateHillshade"} }
+          %span.no-wrap.me-2
+            %label{ for: "map-hillshade"} Hillshade:
+            %input#map-hillshade{type: "checkbox", data: { action: "click->map--settings#updateHillshade"} }
 
-        %span.no-wrap.me-2
-          %label{ for: "map-contours"} Contour lines:
-          %input#map-contours{type: "checkbox", data: { action: "click->map--settings#updateContours"} }
+          %span.no-wrap.me-2
+            %label{ for: "map-contours"} Contour lines:
+            %input#map-contours{type: "checkbox", data: { action: "click->map--settings#updateContours"} }
 
-        %span.no-wrap.me-2
-          %label{ for: "map-globe"} Globe:
-          %input#map-globe{type: "checkbox", data: { action: "click->map--settings#updateGlobe"} }
+          %span.no-wrap.me-2
+            %label{ for: "map-globe"} Globe:
+            %input#map-globe{type: "checkbox", data: { action: "click->map--settings#updateGlobe"} }
 
 
       .feature-section-card

app/views/maps/modals/feature/_edit_ui.haml

@@ -74,7 +74,7 @@
         - if @user
           %label.btn.btn-blue.p-1.ps-2.pe-2{for: 'marker-image'}
             %i.bi.bi-upload
-          %input.form-control#marker-image.hidden{ type: "file", name: 'marker-image', 'data-action': "input->feature--edit#addUndo change->feature--edit#updateMarkerImage" }
+          %input.form-control#marker-image.hidden{ type: "file", 'data-action': "input->feature--edit#addUndo change->feature--edit#updateMarkerImage" }
         - else
           %i.bi.bi-info-circle
             Please log in to upload images

spec/features/feature_edit_spec.rb

@@ -216,6 +216,7 @@
       it "can upload image" do
         find("#edit-button-style").click
         image_path = Rails.root.join("spec", "fixtures", "files", "mapforge-logo-icon.png")
+        page.driver.execute_script("document.querySelector('#marker-image').classList.remove('hidden')")
         expect(page).to have_selector("#marker-image")
         attach_file("marker-image", image_path)
 
@@ -226,6 +227,7 @@
       it "can upload image bigger 1024px" do
         find("#edit-button-style").click
         image_path = Rails.root.join("spec", "fixtures", "files", "image_large.jpg")
+        page.driver.execute_script("document.querySelector('#marker-image').classList.remove('hidden')")
         expect(page).to have_selector("#marker-image")
         attach_file("marker-image", image_path)