How is it possible to do this on web?

3/22/2016

ASKER CERTIFIED SOLUTION

3/17/2016

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Robert Schutt

3/17/2016

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>

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>

SStory

3/17/2016

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

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.

SStory

3/17/2016

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.

3/17/2016

ASKER

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>

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>

thank you again!

3/17/2016

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.

3/17/2016

ASKER

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>

3/17/2016

that's actually JavaScript,

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

$( "#target" ).keydown(function() {
alert( "Handler for .keydown() called." );
});

3/17/2016

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

3/17/2016

ASKER

that's fine.

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

3/17/2016

ASKER

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>

3/17/2016

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.

3/17/2016

ASKER

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.

3/17/2016

instead try javascript for that

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

3/22/2016

ASKER

Perfect!