There is not a way to do this natively in AppSheetโฆyet.
Many in the community have been using SVGโs to create some pretty cool images. I believe I read in the one of the posts someone using SVG for text over the Image. Iโll see if I can find it but in the meantime, if you search the posts for SVGโs you will find a lot of info and may be able to work out how to create the image. Once you know how, itโs really not difficult to do.
Here is a post that may prove helpful and the one I referred to. Just need to work out how to pull in the image you wish to place text onto. Which is likely easy.
Hi John, thanks. So the image is a jpg,or it can be a vector file. The app fills the page with the image. If you imagine adding text โon the runโ to the pic. How would that fit into what you suggest? In terms of the app. Can I create a box for the text where text is written or add conditioning information (what you wrote) into the Google sheet for the column in questionโฆ?
Since you want to add text dynamically and control where it shows, I would have:
[Overlay Text]
[Base Image]
[Updated Image]
Updated Image uses SVG to pull in the Base Image and the Overlay Text. You will have control on where the Text shows using the SVG properties.
Then as @Austin_Lambeth suggests, you can use the CONTEXT() function to determine which view you are in and which image to show. In the Detail View, maybe you donโt need the CONTEXT() function, you simply show the Update Image.
If I can find some time, Iโll try to create an example for you. Hopefully someone will already have one and post it here. Community?
Hi you could view my reply to Austin , what do you mean by show the update image in the context of the screen shots i send?
I think I cannot use SVG because it would require every image to be in SVG format and that may pose some problemsโฆ
thanks
to 27. toukok. 2021 klo 1.43 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:
No changes to your existing images would be required.
Actually there is a difference between SVG file types and using SVG HTML code. The SVG concept here is to implement an SVG HTML code snippet into the Image column inside of an expression. That code can be created to use parameters to pull in a base image and use Header Text. The result of the expression is a text string that defines an image - in your case the base image with the text overlayed exactly where you want it.
If you take some of the examples provided in the posts and try them out, youโll see what I mean. Itโs a very powerful tool in AppSheet to enhance our existing images.
For example:
You would add this into Google excel where the source code for a particular image is? This is one for example in the Image column: Photo_L_Images/9053b660.Image.140546.jpg which is the image. There is another column which is the name and is the one in the middle of the pic that I could shift upwards.
To do that I would add your code into the excel cell of every possible image source so that when the image is updated it falls into the code and displays a text box where I can add text?
Can you please elaborate? Just adding the below does not lead to a result it seem but I may be doing it wrongโฆ
elements: [image] <text x="โฆ
thanks
to 27. toukok. 2021 klo 16.01 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:
Sorry, Iโve been away for a long holiday weekend.
There would not be any changes to the spreadsheet at all. As a general rule I advocate to never apply formulas or formatting to a spreadsheet datasource - unless absolutely necessary.
Iโll try to come up with an example.
I understand what you mean, party. I Tried with THE concatenate(. It unfortunately removed thebut did not shift the text up. That variant did not work. I put it in the column. Thanks
B.r.
Thanks. I understand what you mean, partly. I tried with the concatenate(. It unfortunately removed the pic but did not shift the text up. That variant did not work. I put the text string in the column.
I believe this is the one I tried or it is : App formula for column image.
CONCATENATE(โdata:image/svg+xml;utf8, <svg xmlns=โโhttp://www.w3.org/2000/svgโ" viewBox="โ0 0 100 100"โ> <rect width="โ100%โ" height="โ100%โ" rx="โ20"โ fill="โlightblueโ"/> <text font-family="โtangerineโ" fill="โblackโ" font-size="โ24pxโ" text-anchor="โtopโ" x="โ50%โ" y="โ60%โ">", [Name] ," ")
The concatenation of all these text values ( โฆโdata:image/svg+xml;utf8, " โฆThe value of column โNameโ โฆโ "
It returns: It overrides the image โฆ The image cannot be updated it is just blueโฆ but text can be put in name.
If I write HI in the Name space: I get 2 Hiโs in the pic. The image cannot be updated it is just blueโฆ
The image should of course be the one that is uploaded or saved into the sheet or data file.
You suggested these. The image needs to be updatable and the text in 1 should be in the top most part of the picโฆ Higher than the red Hi.
[Overlay Text]
[Base Image]
[Updated Image]
Thanks
B.r.
ti 1. kesรคk. 2021 klo 22.15 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:
I think youโre on the right track. There may be some additional tags or properties that allow adding an image into the SVG.
Hi John
When uploading or updating images to my app in a mobile or a computer I dont seem to be able to access Google Drive directly? The app provides choices of take photo or upload from phone files, however google drive and the current profiles folders are not available. How can this be so that they are which would be convenient?
thanks
You cannot. The best you can do is specify, in the column definition in the app, a specific folder to place the files intoโฆif the default is not acceptable.
ok, thanks . it can be saved, moved to the use device folders. But using drive directly would be simplerโฆSharing drive folders with corresponding device folders isnโt doable?
Now im hungry from the picโฆ
You can hide the editable button based on the view you are in using CONTEXT()
As for adding text, if that image is a detail view where the background was set to the image, I suggest trying the header columns to display some text
The text is center with header column it seems as this is not landscape view, I was thinking if I somewhere can define the header column to be higher up on the pageโฆas opposed to center. thanks.
I think I cannot use SVG because it would require every image to be in SVG format that may pose some problemsโฆas
Do you mean in view definition below Photo L * and inserting expressionsโฆ(CONTEXT (VIEW) , LIST(โgalleryโ, โphotoโ)) show if(photo) true โฆ something what would it be?
User | Count |
---|---|
43 | |
27 | |
24 | |
22 | |
13 |