topic Re: From JavaScript (responseText) to SVG/PNG in ArcGIS Survey123 Questions

topic Re: From JavaScript (responseText) to SVG/PNG in ArcGIS Survey123 Questions https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1072762#M35551 <P>Hello <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/143552">@MarcoPoetsch</a>, </P><P>Unfortunately JavaScript functions <A href="https://doc.arcgis.com/en/survey123/desktop/create-surveys/pulldatajavascript.htm#ESRI_SECTION1_2A1B3F6B4F4741E9BC1BE519E671E565" target="_self">can't access local file systems</A> so we would not be able to save the image locally. </P><P>Typically the workflow would be to place the image in the media folder of the survey and use that as the default background for an image question with the annotate appearance. </P><P>To better understand the workflow if I may ask what is the use case for needing the image to be dynamic? </P><P>Thank you, </P><P>Zach</P> Fri, 25 Jun 2021 19:40:40 GMT ZacharySutherby 2021-06-25T19:40:40Z From JavaScript (responseText) to SVG/PNG https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1044035#M33670 <P>Hi all,</P><P>is there any possibility to save an attachment and/or display an image either as a PNG or as an SVG which I received from an XML response?</P><P>So, what I have is a JavaScript code which returns a Tide Chart either as PNG or as SVG via response text.<BR />As an example, this is what I get: <A href="https://www.w3schools.com/code/tryit.asp?filename=GP0O809KXTU9" target="_blank" rel="noopener">SVG (click run to see chart)</A> </P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MarcoPoetsch3_0-1617665720805.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/10147i3621E559635F8309/image-size/medium?v=v2&px=400" role="button" title="MarcoPoetsch3_0-1617665720805.png" alt="MarcoPoetsch3_0-1617665720805.png" /></span></P><P>Cheers,</P><P>Marco</P> Mon, 05 Apr 2021 23:38:38 GMT https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1044035#M33670 MarcoPoetsch 2021-04-05T23:38:38Z Re: From JavaScript (responseText) to SVG/PNG https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1072762#M35551 <P>Hello <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/143552">@MarcoPoetsch</a>, </P><P>Unfortunately JavaScript functions <A href="https://doc.arcgis.com/en/survey123/desktop/create-surveys/pulldatajavascript.htm#ESRI_SECTION1_2A1B3F6B4F4741E9BC1BE519E671E565" target="_self">can't access local file systems</A> so we would not be able to save the image locally. </P><P>Typically the workflow would be to place the image in the media folder of the survey and use that as the default background for an image question with the annotate appearance. </P><P>To better understand the workflow if I may ask what is the use case for needing the image to be dynamic? </P><P>Thank you, </P><P>Zach</P> Fri, 25 Jun 2021 19:40:40 GMT https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1072762#M35551 ZacharySutherby 2021-06-25T19:40:40Z Re: From JavaScript (responseText) to SVG/PNG https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1076503#M35757 <P>Hi <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/251557">@ZacharySutherby</a> ,</P><P>I use an API to get the current tide values including a a tide chart.<BR />The chart can be returned either as SVG or as PNG. Ideally this chart is stored as an image rather than the code which can't be displayed/downloaded by my staff.</P><P>This is the API which I use: <A href="https://developer.niwa.co.nz/docs/tide-api/latest/routes/chart.png/get" target="_blank">https://developer.niwa.co.nz/docs/tide-api/latest/routes/chart.png/get</A></P><LI-CODE lang="markup"><svg xmlns="http://www.w3.org/2000/svg" width="700" height="500"><rect width="700" height="700" fill="#ffffff"></rect><g class="axis" transform="translate(50,470)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,6V0.5H630.5V6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">8th Jul</text></g><g class="tick" opacity="1" transform="translate(90.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">9th Jul</text></g><g class="tick" opacity="1" transform="translate(180.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10th Jul</text></g><g class="tick" opacity="1" transform="translate(270.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">11th Jul</text></g><g class="tick" opacity="1" transform="translate(360.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12th Jul</text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">13th Jul</text></g><g class="tick" opacity="1" transform="translate(540.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">14th Jul</text></g><g class="tick" opacity="1" transform="translate(630.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15th Jul</text></g></g><g class="axis" transform="translate(50,20)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,450.5H0.5V75.5H-6"></path><g class="tick" opacity="1" transform="translate(0,450.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text></g><g class="tick" opacity="1" transform="translate(0,403.625)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.5</text></g><g class="tick" opacity="1" transform="translate(0,356.75)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.0</text></g><g class="tick" opacity="1" transform="translate(0,309.875)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.5</text></g><g class="tick" opacity="1" transform="translate(0,263)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2.0</text></g><g class="tick" opacity="1" transform="translate(0,216.125)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2.5</text></g><g class="tick" opacity="1" transform="translate(0,169.25)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3.0</text></g><g class="tick" opacity="1" transform="translate(0,122.375)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3.5</text></g><g class="tick" opacity="1" transform="translate(0,75.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">4.0</text></g></g><text text-anchor="middle" transform="translate(20, 262.5)rotate(-90)">Tide Height(m)</text><g class="grid" transform="translate(50, 470)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-375V0.5H630.5V-375"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(90.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(180.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(270.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(360.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(540.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(630.5,0)"><line stroke="#C0C0C0" y2="-375" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" y="3" dy="0.71em"></text></g></g><g class="grid" transform="translate(50,20)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M630,450.5H0.5V75.5H630"></path><g class="tick" opacity="1" transform="translate(0,450.5)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,403.625)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,356.75)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,309.875)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,263)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,216.125)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,169.25)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,122.375)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,75.5)"><line stroke="#C0C0C0" x2="630" stroke-opacity="0.7" shape-rendering="crispEdges"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g></g><text x="365" y="20" dy="0.32em" fill="#000" font-weight="bold" text-anchor="middle">(-41.276°,173.244°) July 08 2021</text><text x="365" y="40" dy="0.32em" fill="#000" text-anchor="middle" style="font-size: 0.7em">Tide heights are given in metres from the lowest astronomical tide level (this is not a survey or chart datum).</text><text x="365" y="60" dy="0.32em" fill="#000" text-anchor="middle">LAT = 2.242m below MSL</text><g class="moon" transform="translate(50, 20)" stroke="black" stroke-width="0.5px"><g><circle cx="229.85729166666664" cy="62.5" r="8" fill="black"></circle></g></g><g class="quarters" transform="translate(50, 20)" stroke="black" stroke-width="0.5px"><g><g Class="arc"></g><g Class="arc"></g></g></g><path class="line line-chart" d="M0,267.1875L1.875,291.5625L3.75,312.1875L5.625,328.125L7.5,337.5L9.375,341.25L11.25,337.5L13.125,327.1875L15,311.25L16.875,290.625L18.75,266.25L20.625,239.99999999999997L22.5,213.75L24.375,188.4375L26.25,166.875L28.125,149.0625L30,137.8125L31.875,133.125L33.75,135.9375L35.625,144.375L37.5,160.3125L39.375,180.9375L41.25,206.25L43.12500000000001,233.4375L45,261.5625L46.875,288.75L48.75,314.0625L50.62500000000001,333.75L52.5,348.75L54.375,356.25L56.25,357.1875L58.125,350.625L60,337.5L61.875,317.8125L63.75,292.5L65.625,264.375L67.5,235.3125L69.375,206.25L71.25,179.0625L73.125,155.625L75,136.875L76.875,125.625L78.75,120.9375L80.625,123.75L82.5,134.0625L84.375,150.9375L86.25000000000001,173.4375L88.125,199.6875L90,228.75L91.875,257.8125L93.75,285.9375L95.62499999999999,311.25L97.5,330.9375L99.375,345L101.25000000000001,351.5625L103.125,350.625L105,343.125L106.875,328.125L108.75,307.5L110.62499999999999,281.25L112.5,253.125L114.375,224.0625L116.25,195.9375L118.125,169.6875L120,149.0625L121.875,133.125L123.75,124.6875L125.62500000000001,124.6875L127.5,131.25L129.375,145.3125L131.25,165.9375L133.125,192.1875L135,221.25L136.875,252.1875L138.75,282.1875L140.625,310.3125L142.5,334.6875L144.375,352.5L146.25,363.75L148.125,367.5L150,362.8125L151.875,350.625L153.75,331.875L155.625,306.5625L157.5,277.5L159.375,245.62499999999997L161.25,212.81250000000003L163.12500000000003,181.875L165,154.6875L166.875,133.125L168.75,118.125L170.625,110.625L172.50000000000003,111.5625L174.375,120L176.25,135.9375L178.125,158.4375L180,186.5625L181.87499999999997,217.5L183.75,249.375L185.625,281.25L187.5,309.375L189.375,332.8125L191.24999999999997,350.625L193.125,360.9375L195,362.8125L196.875,356.25L198.75,342.1875L200.625,321.5625L202.50000000000003,296.25L204.375,266.25L206.25,234.37500000000003L208.125,202.5L210,173.4375L211.87500000000003,149.0625L213.75,130.3125L215.625,118.125L217.5,115.3125L219.375,120L221.24999999999997,132.1875L223.125,152.8125L225,179.0625L226.875,209.06250000000003L228.75,241.87499999999997L230.62499999999997,274.6875L232.5,306.5625L234.375,333.75L236.25,355.3125L238.125,369.375L240,375.9375L241.87500000000003,373.125L243.75,362.8125L245.625,344.0625L247.5,318.75L249.375,288.75L251.25000000000003,255L253.125,220.31249999999997L255,186.5625L256.875,156.5625L258.75,131.25L260.625,112.5L262.5,102.1875L264.375,101.25L266.25,107.8125L268.125,122.8125L270,145.3125L271.875,174.375L273.75,206.25L275.625,240.9375L277.5,274.6875L279.375,306.5625L281.25,333.75L283.125,354.375L285,367.5L286.875,372.1875L288.75,367.5L290.625,355.3125L292.5,335.625L294.375,308.4375L296.25,278.4375L298.125,244.6875L300,210.93750000000003L301.875,179.0625L303.75,150.9375L305.625,129.375L307.5,114.375L309.375,107.8125L311.25,110.625L313.125,121.875L315,140.625L316.875,166.875L318.75,197.8125L320.625,231.5625L322.5,266.25L324.37499999999994,300L326.25000000000006,330L328.125,354.375L330,372.1875L331.875,380.625L333.75,380.625L335.625,372.1875L337.5,354.375L339.375,330L341.25,299.0625L343.12499999999994,264.375L345.00000000000006,227.8125L346.875,192.1875L348.75,159.375L350.625,132.1875L352.5,110.625L354.375,97.5L356.25,93.75L358.125,98.4375L360,112.5L361.875,134.0625L363.74999999999994,163.125L365.62500000000006,195.9375L367.5,231.5625L369.375,267.1875L371.25,301.875L373.125,330.9375L375,355.3125L376.875,371.25L378.75,377.8125L380.625,376.875L382.49999999999994,365.625L384.37500000000006,346.875L386.25,320.625L388.125,289.6875L390,255.93750000000003L391.875,220.31249999999997L393.75,186.5625L395.625,155.625L397.5,131.25L399.375,113.4375L401.25,105L403.12499999999994,105L405.00000000000006,113.4375L406.875,131.25L408.75,155.625L410.625,186.5625L412.5,221.25L414.375,256.875L416.25,291.5625L418.125,323.4375L420,350.625L421.87499999999994,370.3125L423.75000000000006,382.5L425.625,384.375L427.5,377.8125L429.375,362.8125L431.25,338.4375L433.125,308.4375L435,273.75L436.875,237.1875L438.75,200.625L440.625,165.9375L442.49999999999994,135.9375L444.37500000000006,112.5L446.25,96.5625L448.125,90L450,92.8125L451.875,105L453.75,124.6875L455.625,152.8125L457.5,185.625L459.375,221.25L461.24999999999994,258.75L463.12500000000006,294.375L465,326.25L466.875,352.5L468.75,371.25L470.625,380.625L472.5,381.5625L474.375,373.125L476.25,356.25L478.125,331.875L480,301.875L481.87499999999994,267.1875L483.75000000000006,231.5625L485.625,195.9375L487.5,164.0625L489.375,136.875L491.25,117.1875L493.125,105L495,102.1875L496.875,108.75L498.75,123.75L500.62499999999994,146.25L502.50000000000006,175.3125L504.375,209.06250000000003L506.25,244.6875L508.125,281.25L510,314.0625L511.875,343.125L513.75,365.625L515.625,379.6875L517.5,385.3125L519.375,380.625L521.25,367.5L523.125,345.9375L525,317.8125L526.875,284.0625L528.75,247.5L530.625,210.93750000000003L532.5,175.3125L534.375,143.4375L536.25,118.125L538.125,99.375L540,90L541.875,90L543.75,99.375L545.625,117.1875L547.5,143.4375L549.375,174.375L551.25,210L553.125,247.5L555,283.125L556.875,316.875L558.75,345L560.625,366.5625L562.5,379.6875L564.375,383.4375L566.25,377.8125L568.125,363.75L570,342.1875L571.875,313.125L573.75,280.3125L575.625,244.6875L577.5,210L579.375,176.25L581.25,147.1875L583.125,124.6875L585,109.6875L586.875,104.0625L588.75,106.875L590.625,118.125L592.5,137.8125L594.375,165L596.25,196.87499999999997L598.125,231.5625L600,267.1875L601.875,300.9375L603.75,330.9375L605.625,355.3125L607.5,372.1875L609.375,380.625L611.25,379.6875L613.125,370.3125L615,352.5L616.875,326.25L618.75,295.3125L620.625,260.625L622.5,224.0625L624.375,188.4375L626.25,155.625L628.125,128.4375L630,107.8125" transform="translate(50,20)" fill="none" stroke="black" stroke-width="2px"></path></svg></LI-CODE><P> </P><P>I guess I could use PowerAutomate to upload the PNGs or the SVGs to SharePoint.. But this would be just a workaround.</P> Wed, 07 Jul 2021 21:47:52 GMT https://community.esri.com/t5/arcgis-survey123-questions/from-javascript-responsetext-to-svg-png/m-p/1076503#M35757 MarcoPoetsch 2021-07-07T21:47:52Z