Meteorologist trying to create forecast pages

Question

Let me preface this by saying my last computer class was in high school 1968-69. I'm sure I'm not using best practices and I always appreciate help there. Everything I do is self-taught and this is the first truly original piece of code I've written.

In this case, I'm trying to produce weather forecast pages. Here are samples for Honolulu. The data comes from the National Digital Forecast Database (NDFD) via https://api.weather.gov in JSON. I pluck those variables and plug them into ImageMagick.

The only way I could accommodate the forecast, which is a different length every time, was to use the caption command. But SUNNY, next to a three or four-line forecast is jarring. Is there a better way or at least a way to limit the upper font size?

Also, this takes a lot longer than I expected. Can I speed up the process?

#!/bin/bash
#process forecast json 
#8Oct2019
#@geofffox

cd /tmp/json
#curl -o kofk https://api.weather.gov/gridpoints/OAX/31,93/forecast
#curl -o kofk https://api.weather.gov/gridpoints/AFG/381,359/forecast
#curl -o kofk https://api.weather.gov/gridpoints/APX/36,23/forecast
#curl -o kofk https://api.weather.gov/gridpoints/HFO/153,144/forecast
curl -o kofk https://api.weather.gov/gridpoints/OKX/66,65/forecast

counter=0
while [ $counter -le 13 ]
do


number["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].number')
name["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].name')
start["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].startTime')
end["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].endTime')
swch["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].isDaytime')
temp["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].temperature')
wind["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].windSpeed')
wdir["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].windDirection')
shrt["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].shortForecast')
long["$counter"]=$(cat kofk | jq -r  '.properties.periods['$counter'].detailedForecast')


echo $counter
((counter++))
done


innerLoop=0
rm /var/www/html/output/json/kofk/*.png
while [ $innerLoop -le 13 ]
do 
echo $innerLoop

convert -size 1920x1080 xc:blue PNG32:/var/www/html/output/json/kofk/kofk.png

    convert  -background rgba\(0,0,0,0.001\) -fill white -stroke black -strokewidth 3 -gravity west -font Open-Sans-Extrabold -size 700x400 caption:"${shrt["$innerLoop"]^^}" \( +clone -shadow 70x12+5+5 \) +swap \
    -flatten  -trim +repage  /var/www/html/output/json/kofk/shrt["$innerLoop"].png

 convert /var/www/html/output/json/kofk/kofk.png -gravity northwest -pointsize 50 -fill white -font Open-Sans-Bold -stroke black -strokewidth 2 -draw "text 950,115 '${name["$innerLoop"]^^}'" /var/www/html/output/json/kofk/kofk["$innerLoop"].png 

        if ${swch["$innerLoop"]} == false; then

 convert /var/www/html/output/json/kofk/kofk["$innerLoop"].png -pointsize 50 -fill white -font Open-Sans-Bold -stroke black -strokewidth 2  -draw "text 950 700 'DAYTIME HIGH:'" /var/www/html/output/json/kofk/kofk["$innerLoop"].png

        else
 convert /var/www/html/output/json/kofk/kofk["$innerLoop"].png -pointsize 50 -fill white -font Open-Sans-Bold -stroke black -strokewidth 2  -draw "text 950 700 'OVERNIGHT LOW:'" /var/www/html/output/json/kofk/kofk["$innerLoop"].png
 
       fi

 convert /var/www/html/output/json/kofk/kofk["$innerLoop"].png -pointsize 200 -fill black -font Open-Sans-Extrabold -draw "text 1405 705 '${temp["$innerLoop"]^^}°'" -fill white -stroke black -strokewidth 5 -draw "text 1400 700 '${temp["$innerLoop"]^^}°'" /var/www/html/output/json/kofk/kofk["$innerLoop"].png
 convert /var/www/html/output/json/kofk/kofk["$innerLoop"].png -pointsize 50 -fill white -font Open-Sans-Bold -stroke black -strokewidth 2  -draw "text 950 750 'WIND: ${wdir["$innerLoop"]}"" ${wind["$innerLoop"]^^}'" /var/www/html/output/json/kofk/kofk["$innerLoop"].png

 convert -composite -gravity west -geometry +950-175 /var/www/html/output/json/kofk/kofk["$innerLoop"].png /var/www/html/output/json/kofk/shrt["$innerLoop"].png /var/www/html/output/json/kofk/kofk["$innerLoop"].png 

rm /var/www/html/output/json/kofk/shrt["$innerLoop"].png

 ((innerLoop++))
done


exit