How is it possible to do this on web?

SmashAndGrab
SmashAndGrab used Ask the Experts™
on
Hi,

I'm not sure if this is possible or how it would be done but I thought I would ask.

I have a web form and when the user enters data into the controls  - I would like this data to show on an image (overlay perhaps).

Please see the image I have attached as it will explain.
form.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I Design & Develop Software
Commented:
rather than modify the image, which will make you want to hurt yourself. why not just position two spans absolutely inside a div and just update their values

<div style="position:relative;">
    <img src="/image.png" />
    <span id="DimensionA" style="position:absolute;top:10px; left:200px" />
    <span id="DimensionB" style="position:absolute;top:100px; left:10px;transform: rotate(90deg);
	transform-origin: left top 0;" />
</div>  

Open in new window


now you'd want to put that css inside of style sheet. and have javascript onkeydown to update the value of the span with what's in the textbox.

if you have your heart set on drawing the image you can use the canvas element, but that'll be rather involved.
Robert SchuttSoftware Engineer

Commented:
I see several possibilities, in order of my preference and experience:
1) generate the image on the server (using updatepanel)
2) use a canvas (not an imag but when user right clicks on it, browser will show "save as image")
3) generate a TIFF image which has native capability to contain overlayed text (no experience coding that)

example code:
1) aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EE_Q_28933718_WEB.Default" %>

<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.IO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e) {
        if (IsPostBack) {
            if (Request.Form["__EVENTTARGET"] == UpdatePanel1.ClientID) {
                UpdateImage();
            }
        }
    }

    protected void UpdateImage() {
        System.Drawing.Image img = Bitmap.FromFile(Server.MapPath("image.png"));
        Font fnt = new Font("Arial", 12, GraphicsUnit.Pixel);
        using (Graphics g = Graphics.FromImage(img)) {
            g.DrawString(TextBox1.Text, fnt, Brushes.Red, new PointF(160, 7));
            g.TranslateTransform(11, 166);
            g.RotateTransform(-90);
            g.DrawString(TextBox2.Text, fnt, Brushes.Red, new PointF(0, 0));
            g.ResetTransform();
        }
        string url = "~/temp/";
        string filename = Session.SessionID + ".png";
        img.Save(Path.Combine(Server.MapPath(url), filename));
        Image1.ImageUrl = url + filename;
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <title> EE Q_28933718 </title>
    <style type="text/css">
        .left {
            float:left;
            width: 300px;
        }
        .right {
            float: left;
            width: 200px;
        }
        img {
          border: dashed 1px red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            $get('<%= TextBox1.ClientID %>').onkeyup = function () {
                __doPostBack('<%= UpdatePanel1.ClientID %>', '<%= TextBox1.ClientID %>');
            };
            $get('<%= TextBox2.ClientID %>').onkeyup = function () {
                __doPostBack('<%= UpdatePanel1.ClientID %>', '<%= TextBox2.ClientID %>');
            };
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="left">
            <br /><br /><br /><br /><br />
            Floor Width A(X)
            <br /><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />
            <br />
            Floor Width B(X)
            <br /><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />
            <br />
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="right">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/image.png" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Open in new window


2) html page:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> EE Q_28933718 </title>
    <style type="text/css">
        .left {
            float:left;
            width: 300px;
        }
        .right {
            float: left;
            width: 200px;
        }
        canvas {
          border: dashed 1px red;
        }
    </style>
  </head>
  <body>
    <div>
        <div class="left">
            <br><br><br><br><br>
            Floor Width A(X)
            <br><input name="TextBox1" type="text" id="TextBox1">
            <br>
            <br>
            Floor Width B(X)
            <br><input name="TextBox2" type="text" id="TextBox2">
            <br>
            <br>
        </div>
        <div class="right">
            <canvas id="cnv" width="200" height="200"></canvas>
        </div>
    </div>
    <script type="text/javascript">

        var tb1 = document.getElementById('TextBox1');
        var tb2 = document.getElementById('TextBox2')
        tb1.onkeyup = updateImage;
        tb2.onkeyup = updateImage;

        var cnv = document.getElementById('cnv');
        var ctx = cnv.getContext('2d');

        function updateImage() {
          cnv.width = img.width;
          cnv.height = img.height;
          ctx.font = "12px Arial";
          ctx.fillStyle = 'red';
          ctx.drawImage(img, 0, 0);
          ctx.fillText(tb1.value, 162, 19);
          ctx.save();
          ctx.translate(22, 164);
          ctx.rotate(-Math.PI/2);
          ctx.fillText(tb2.value, 0, 0);
          ctx.restore();
        }

        var img = new Image();
        img.src = 'image.png';
        img.onload = updateImage; // show 'clean' image first time

    </script>
  </body>
</html>

Open in new window

imports System.Drawing
imports System.Drawing.Imaging

Dim img As bitmap = Image.FromFile(server.mappath("images/baseimage.png"))

'get a graphics canvas context on the img to draw on
Dim g As Graphics = Graphics.FromImage(img)

'declare a font to use
Dim fnt as New Font("Tahoma", 10)
Dim somebrush As New SolidBrush(Color.White)

'put in whatever value for X and Y you want
g.DrawString("YourText",fnt, somebrush,X,Y)

'save the new image
img.save("somefilename.jpg",ImageFormat.jpeg)

fnt.dispose
somebrush.dispose

Open in new window


This is the basic idea. If you know the absolute coordinates and size of the image to be drawn on you can measure the image, divide by two to get center, the measure the string and divide by two and subtract that amount from the other in order to center. Or you can make a drawing rectangle that spans the width of the image at the top and tell DrawString to draw centered in that box.  There is a lot you can do, but not without pain--as mentioned above.  You can then probably just send the image as httpresponse straight to the browser on the client instead of saving it.
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

I agree that faking it with HTML/CSS would be easier that putting on the image, but maybe you want to provide the user with a fixed portable document like an actual image blueprint or something, in which case html/css wouldn't be as nice. On the other hand they could always print the webpage as PDF and take with them.

Author

Commented:
Brilliant - thank you Experts.

As I'm not that great at this I will be going with the quick and dirty approach using the SPANS.


  <div style="position:relative;">
    
    <img src="img/drawing.jpg">
       <span id="DimensionA" style="position:absolute;top:3px; left:185px">
    <b>A</b>
    </span>
    <span id="DimensionB" style="position:absolute;top:212px; left:4px;transform: rotate(270deg); transform-origin: left top 0;">
    <b>B</b>
    </span>
</div>  

Open in new window


My last part of this is how to update these areas from what is entered in the text boxes.
I suppose using Jquery?
I would like the fields to default to A and B if nothing is entered.


These are the fields that will update:

<fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>

Open in new window



thank you again!
PawełI Design & Develop Software

Commented:
you can use jquery http://api.jquery.com/on/

or just native javascript

object.addEventListener("keypress", myScript);

something like:

document.getElementById("DimA_TXT").addEventListener("keypress", updateDimA);

function updateDimA(){
  var spanA = document.getElementById("spanA");
  spanA = document.getElementById("DimA_TXT").value;
}

you can also update the spans on lost focus just in case you want to worry about users pasting values.

if you're already using jquery then go with that, but if not it seems like a waste to load a library for just one or two features.

Author

Commented:
Thanks Pawel.

I'm already using the Jquery library so I think I'll use the Jquery plus I want to get used to using it. :)

Excuse the noob question but where does the above code go?



is it something like this?

Should there be an event on the TEXT field or is that done is the listerner?
<html>
<head>

document.getElementById("DimA_TXT").addEventListener("keypress", updateDimA);

function updateDimA(){
   var spanA = document.getElementById("spanA");
   spanA = document.getElementById("DimA_TXT").value;
 }

</head>
PawełI Design & Develop Software

Commented:
that's actually JavaScript,

here's the jquery
https://api.jquery.com/keydown/

$( "#target" ).keydown(function() {
  alert( "Handler for .keydown() called." );
});
PawełI Design & Develop Software

Commented:
i think it would be something like

$( "#DimA_TextBox" ).keydown(function() {
  $("#spanA").text($( "#DimA_TextBox" ).val());
});

sorry been a while since i've used jquery

Author

Commented:
that's fine.

I'm just confused as to where the Jquery goes and how it is called?

Author

Commented:
I've just tried this..

It didn't work :(

I put the code in the header.

My textbox control is called:  tbFloorWidthA.

<script type="text/javascript">
 
$('#tbFloorWidthA').keyup(function() {
                $('#DimensionA').val($(this).val());
            });          
 </script>

Open in new window

PawełI Design & Develop Software

Commented:
are you sure you're loading the jquery library before you're trying to use it?

http://www.w3schools.com/jquery/jquery_get_started.asp

<script src="jquery-1.12.0.min.js"></script>

it's also a best practice to put your scripts at the end of a file, just before you close the body,

also do a console.log(this); inside your function, and check what this actually is.

Author

Commented:
Thank Pawel.

I will move the script to the end.  

Just wanted to get it working.

I think this is failing because I'm trying to update the value/text of the <SPAN> and they don't have that attribute.  I need to update the content.
PawełI Design & Develop Software

Commented:
instead try javascript for that

document.getElementById("DimensionA").innerHTML="newtext";

Author

Commented:
Perfect!

Author

Commented:
Perfect!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial