Need Help, how to create more than one rectangle from one button in one stage of canvas

Dear Guys,
I has problem to create more than one rectangle canvas from one button. here my role to create :
1. I create input size with textfield
2. I click button called "submit query"
3. My web will create a rectangle with specific size.
My problem come when I click again the button, my old rectangle has been remove than my new rectangle has created.
My question is : how I can create more than one without delete/remove the old I was created?
Here my Code :
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" media="all" href="css/style.css"><script src="kinetic-v4.7.2.min.js"></script></head> <body><label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5"><br> <label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5"><br> <label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5"><br> <label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="5" maxlength="5"><br> <input name="submit" type="submit"> <script defer> var stage = new Kinetic.Stage({ container: 'container', width: 943.5, height: 254.10 }); var layer = new Kinetic.Layer(); var rectX = stage.getWidth() / 2 - 50; var rectY = stage.getHeight() / 2 - 50; var group = new Kinetic.Group({ draggable: true }); var box = new Kinetic.Rect({ x: rectX, y: rectY, width: <?php echo ($_POST['panjang']/10)/1.3; ?>, height: <?php echo $_POST['lebar']/10; ?>, //fill: '#00D2FF', stroke: 'blue', strokeWidth: 2 //draggable: true }); var simpleText = new Kinetic.Text({ x: Math.round(box.getWidth() / 2), y: Math.round(box.getHeight() / 2), text: '<?php echo $_POST['tinggi'].'/'.$_POST['nam_pac']; ?>', fontSize: 30, fontFamily: 'Calibri', fill: 'blue', }); // add cursor styling box.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); box.on('mouseout', function() { document.body.style.cursor = 'default'; }); group.add(box); group.add(simpleText); layer.add(group); stage.add(layer); </script></body>
this is my printscreen may help you to help me :
thanks before to help me
Regards,
Prabowo.

It's work Ken, but if I modify your code into my code.
error again. they say like before (...is undefined)
May You want to check my code
<?php
include('pinambung.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>GI Loading Plan Maker</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" media="all" href="css/style_2.css">
<script src="js/kinetic-v4.7.2.min.js"></script>
<script src="js/CalendarPopup.js"></script>
<script src="js/jquery-1.10.2.js"></script>
</head>
<body>
<header class="w" id="header"> 
      <img src="images/headers.jpg" width="100%" height="100%" />
</header>
<nav class="w" id="nav">
      <?php include('top.php'); ?>
</nav>
<section class="w" id="main">
      <section id="content">
      <article>
        <h2>Customer Info</h2>
        <form id="myForm" action="insert.php" method="post">
        <label>Customer Name :</label><input name="cs_name" id="cs_name" type="text" size="25" maxlength="50">
        <br>
        <label>Date of Shipment :</label><input name="shipment_date" id="shipment_date" type="text" size="10" maxlength="12" > use format : YYYY-MM-DD
        <br />
        <label>Container Name :</label><input name="con_num" id="con_num" type="text" size="10" maxlength="12">
        <label>Revision :</label><input name="revision" id="revision" type="text" size="5" maxlength="5"><br />
        <label>Prepared by :</label><input name="prepared_by" id="prepared_by" type="text" size="25" maxlength="50">
        <button id="saveinfo">Save As DB</button>
        <button id="saveall">Save As Image</button>
        <button id="print" onclick="window.print();return false">Print</button>
        </form>
        <span id="result"></span>
        <script type="text/javascript" src="js/insert.js"></script>
      </article>
          <br /><br />
      <article>
          <h2>Packing Info</h2>
        <label>Container Type :</label>
        40' HC<input name="con_type" type="radio" id="con_type" value="40hc">
        40'<input name="con_type" type="radio" id="con_type" value="40">
        20<input name="con_type" type="radio" id="con_type" value="20"><br />
        <input name="loadstan" type="button" value="Create Container" id="isSelect">
        <button id="removecon">Remove Container</button>
        <br />
        <label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5">
        <label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5">
        <label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5">
        <label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="20" maxlength="55">
        <input name="loadstan" id="loadstan" type="button" value="Load Standard Packing" onclick="window.open('spk.php', 'winpopup', 'toolbar=no,statusbar=no,menubar=no,resizable=yes,scrollbars=yes,width=300,height=400');">
        <input name="submit" type="submit" value="Create Box">
        <button id="remove">Remove Box</button><br />
      </article>
    </section>
    <aside id="sidebar">
      <label for="layer-to-delate">Select a layer to delete or rotate</label><br />
      <select id="layer-to-delete" size="14"></select><br />
      <input id="delete-layer-button" type="button" value="Delete layer">
      <input id="rotate-layer-button" type="button" value="Rotate box">
    </aside>
    <section id="content2">
      <div id="container">
      </div>
      <script defer>
      function radians (degrees) {return degrees * (Math.PI/180)}
      function degrees (radians) {return radians * (180/Math.PI)}
      function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
      function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 943.5,
            height: 254.10
        var layers = new Array();
       function addCont(){
           layer2 = new Kinetic.Layer();
            switch ($('input:radio[name=con_type]:checked').val()){
              case '40hc':
                 var box_con = new Kinetic.Rect({
                      x: 10,
                      y: 10,
                      width: 1190/1.3,
                      height: 2300/10,
                      stroke: 'black',
                      strokeWidth: 2
                  var TextCon = new Kinetic.Text({
                      x: 10,
                      y: 240,
                      text: 'Container Size 40 HC (11900mm X 2300mm X 2550mm)',
                      fontSize: 12,
                      fontFamily: 'Calibri',
                      fill: 'green',
                  layer2.add(box_con);
                  layer2.add(TextCon);
                  stage.add(layer2);
                  break;
                 case '40':
                 var box_con = new Kinetic.Rect({
                      x: 10,
                      y: 10,
                      width: 1190/1.3,
                      height: 2300/10,
                      stroke: 'black',
                      strokeWidth: 2
                  var TextCon = new Kinetic.Text({
                      x: 10,
                      y: 240,
                      text: 'Container Size 40 (11900mm X 2300mm X 2250mm)',
                      fontSize: 12,
                      fontFamily: 'Calibri',
                      fill: 'green',
                  layer2.add(box_con);
                  layer2.add(TextCon);
                  stage.add(layer2);
                  break;
                 case '20':
                 var box_con = new Kinetic.Rect({
                      x: 10,
                      y: 10,
                      width: 580/1.3,
                      height: 2300/10,
                      stroke: 'black',
                      strokeWidth: 2
                  var TextCon = new Kinetic.Text({
                      x: 10,
                      y: 240,
                      text: 'Container Size 20 (5800mm X 2300mm X 2250 mm)',
                      fontSize: 12,
                      fontFamily: 'Calibri',
                      fill: 'green',
                  layer2.add(box_con);
                  layer2.add(TextCon);
                  stage.add(layer2);
                  break;
        function addRect() {
            layer = new Kinetic.Layer();
            var box = new Kinetic.Rect({
                x: 10,
                y: 10,
                width: +(($("#panjang").val()/10)/1.3),
                height: +($("#lebar").val()/10),
                stroke: 'blue',
                strokeWidth: 2
            var group = new Kinetic.Group({
                        draggable: true,
                        snap : true
            var boxLabel = $("#nam_pac").val() + "/H : " + $("#tinggi").val();
            if (($("#panjang").val() && $("#lebar").val()) != 0) {
            var simpleText = new Kinetic.Text({
                x: 10,
                y: 10,
                text: boxLabel,
                fontSize: 12,
                fontFamily: 'Calibri',
                fill: 'red',
            } else {
                var simpleText = new Kinetic.Text({
                x: 10,
                y: 10,
                text: '',
                fontSize: 12,
                fontFamily: 'Calibri',
                fill: 'red',
            group.add(box);
            group.add(simpleText);
            layer.add(group);
            stage.add(layer);
            layers.push(layer);
            $("#layer-to-delete").append("<option>Layer " + boxLabel + "</option>");
        function deleteRect() {
            if($("#layer-to-delete > option").length < 1) return;
            var i = $("#layer-to-delete").prop("selectedIndex");
            layers.splice(i,1)[0].destroy();
            $("#layer-to-delete > option").eq(i).remove();
        function rotateRect() {
            if($("#layer-to-delete > option").length < 1) return;
            var i = $("#layer-to-delete").prop("selectedIndex");
            layers[i].rotateDeg(30);
            layers[i].draw();
        $("#delete-layer-button").click(function(e) {
              deleteRect();
        $("#rotate-layer-button").click(function(e) {
            rotateRect();
        $("input[type=submit]").click(function(e) {
            addRect();
        $("#isSelect").click(function () {
              addCont();
        $("#removecon").click(function () {
              layer2.destroy();
        $(window).keypress(function(e) {
            if(!$(document.activeElement).is("label")) {
                if((e.keyCode || e.which) == 46) {
                    layer.destroy();
            if((e.keyCode || e.which) == 35) {
                    layer2.destroy();
        document.getElementById('saveall').addEventListener('click', function() {
          stage.toDataURL({
            callback: function(dataUrl) {
                  window.open(dataUrl);
        }, false);
      </script>
    </section>
</section>
<footer class="w" id="footer">
    Copyright <a href="login.php" target="_new">©</a> 2013, <a href="http://omhanggar.com" target="_new">created</a><a href="http://intranet.guentner-asia.com" target="_new"> by PT. Güntner Indonesia </a>
</footer>
</body>
</html>
thanks again before,
Prabowo

Similar Messages

How to create more than mailbox in E61i?

How can I create more than mailbox in E61i? I ceated one, and it's only the available one now. The manual says go to Menu > Messag. > Mailboxes and press Options > New Mailbox. But I did not find these options.
Can any one help me??Message Edited by mst_dev on 22-Jul-200711:46 AM

you need to goto:
menu,
messaging,
options,
settings,
e-mail,
options,
new mailbox...
regards - paul

How to create more than 21 lists in interactive reports

hello everyone,
I am new to ABAP as well as this site. Kindly help, I want to know how to create more than 21 lists in interactive reports.
Also, how can i create them without using WHEN 1, wHEN 2 and so on...
Kindly help.
thank you

Hello,
Using Intracive Reports its not possible to cretate more than 21 lists.
But its possible to create more than 21 using ALV concept.
for sample ALV u can serch in SDN.
Regards,
Anil.

How to create more than one SID in .bash_profile

I Want to create more than one SID in bash_profile without disturbing oracle's default SID i.e orcl and create database with new SID?

you can create SID.env file or try to use . oraenv
eg:-
$ cat uat1.env
export ORACLE_BASE=/u01/db/db10g
export ORACLE_HOME=$ORACLE_BASE/10.2.0
export PATH=$ORACLE_HOME/bin:$PATH
export ORACLE_SID=UAT1
export TNS_ADMIN=$ORACLE_HOME/network/admin
$ . uat1.env
$ echo $ORACLE_HOME
/u01/db/db10g/10.2.0
$ echo $ORACLE_SID
UAT1else
$ . oraenv
ORACLE_SID = [UAT1] ? UAT1

How to create more than 1000 entitie in FDQM

Hi Gurus
1.How to load locations to FDQM without manual Entry?
Can we load locations by using flat files?
Requirement: I have to create more than 1000 entities in FDM Application for mapping Target in HFM Application.
How to achieve this?
regards
Dev

Two things :
#1 - The tables you need to add data to are : tPOVPartition, tStructPartitionHierarchy, tStructPartitionLinks. The first table is the basic location information. The last two tables define the relationship hierarchy of where the locations belong. I would expect that if the Strcut information is missing, FDM will not be able to place it anywhere on the locations screen.
Additionally, for the tPOVPartition, there is required information and you need to make sure you are including all of that info when you create your record.
#2 - If you are handy at coding, I'm positive there is an API call to create a location. It would make more sense perhaps to write a script that uses the APIs to create the locations so that you can be sure that it is being done right.

How to create more than 2000 users/groups in a good way.

Hi, guys.I want to create more than 2000 users/groups with Java API. Now I use a regular method to implement this function, login; create a domain; open a maxlsession ; and then call a maxl statement to create a user or a group . I find that the performance of this way is very bad. Can I write a funcation or a marco, which can create these users/groups? If it works, How do I need to write these codes?I have looked over all Java API document, it seems that ESSBASE API don't provide some related api which enables developer to generate a function or a marco. If you know the answer to this question, please tell me. thanks in advance.

Dear Frank,
Thank you so much for your answer. Beside the save point functionality to save the state and values on the screen, do you know other ways to do the same function? Once again, thank you so much.
Linh Nguyen.

How to import more than 2k items from Excel(2010) to SharePoint 2010 List?

Hi,
I am getting error while importing more than 2k items from Excel to SharePoint List.
Need solution!!

Hi.
Try to use the Import Spreadsheet list template to import your data.
http://www.dummies.com/how-to/content/import-a-spreadsheet-as-a-list-in-sharepoint-2010.html
Regards,
Bubu
http://zsvipullo.blogspot.it
Please mark my answer if it helped you, I would greatly appreciate it.

Need help trying to have more than one delegate calendar display in iCal and on mobile devices

I have several calendars that are under my user name in Google. They all work as delegates and life is good.
I'm trying to set up the local school with a calendar for the sports schedule as well as a separate one for district events like school board meetings and would like to be able to add one for the holidays, exams and things of that nature. The sports calendar works but I can't figure out how to add the second caledar to iCal or my iPhone. It shows shared but doesn't appear as a possible delegate in iCal and will not load on the iPhone.
Google has the output to allow more than one calendar to display on a website but syncing at the level I want with the "i" apps isn't obvious.
Am I missing something? I really don't want one very cluttered master calendar for the school. Being able to turn on and off the various types of calendar will make it much easier to manage.

I have several calendars that are under my user name in Google. They all work as delegates and life is good.
I'm trying to set up the local school with a calendar for the sports schedule as well as a separate one for district events like school board meetings and would like to be able to add one for the holidays, exams and things of that nature. The sports calendar works but I can't figure out how to add the second caledar to iCal or my iPhone. It shows shared but doesn't appear as a possible delegate in iCal and will not load on the iPhone.
Google has the output to allow more than one calendar to display on a website but syncing at the level I want with the "i" apps isn't obvious.
Am I missing something? I really don't want one very cluttered master calendar for the school. Being able to turn on and off the various types of calendar will make it much easier to manage.

Need help in EMAIL Sending - more than 255 character length

Hi Guys,
Please help me in sending the Email attachment which has more than 255 character lengh using 'TXT format.
if i create an internal table having a field of type char225.
then break ur each record into many parts having len <= 255.
how can i mingle both lines to single line in the output list.
Please help me ..
thanks in advance..
Prabhu

Hi,
Check the following link:
http://www.sap-img.com/abap/sending-email-with-attachment.htm
Regards,
Bhaskar

(Need Help) How to create Numeric text box in SVG

Hello everyone,
Can any one help me to create Numeric TextField in SVG? I'm struggling to do this please someone help me as soon as possible....
Thanks In advance,
Ulaga

To get the best answers, I think you probably need to break down your post into several different one with a separate question in each, along with the business problem you are trying to solve... but here's a few pointers for you to research...
Textbox - there's plenty of info in SDN on creating a custom control with a textbox e.g. Re: Text Editor on modulepool Screen and sample code in SAP too.
Attachments - If this is for an email, then GUI_UPLOAD might help and the BCS class is the newer way to send messages... check out Re: Offline Approval: RBBP_NOTIFICATION_OFFAPP Vs RSWUWFMLEC for example... if this is an attachment for an SAP object such as an FI Document or Purchase Order, then the Generic Object Services (GOS) could be what you want e.g. https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/0e6b0d95-0a01-0010-4696-ca0a48de5fb3
Jonathan

Need Help: how to create url address in dynamic web (PHP)?

Guys,
I need your help! I'm a newbie in web designing, I just want to ask on how to create a web (dynamic page) link/url.
e.g. http://www.mypage.com/?=home
thanks a lot.

Setup a database table and populate the fields (i.e. auto-numerical_primary_key, id, dynamic_mod_url, title, article_content, etc.) then on your page create a filtered recordset where URL parameter (id) = your database table field (primary_key). Place the bindings of the filtered recordset on the page to show dynamic values for the filtered recordset based on the URL parameter. That way when someone visits yoursite.com/page.php?id=1 it will show the content for the database table where the primary key = 1 and so on. use dynamic_mod_url in conjunction with .htaccess dynamic mod rewrite to change yoursite.com/page.php?id=1 into yoursite.com/the_name_of_dynamic_mod_url_for_primary_key_1.html

How to export more than 100 points from waveform to excel

Hi everyone. Novice here.
I'm pretty sure other people had my problem, but I don't know how to word it... and can't find a solution for it... Maybe I just don't understand Labview enough to know what's going on.
Here's what I'm doing: I have a waveform, and I'm trying to save the data to the spreadsheet.
Problem: The cap is at 100 data plots (only what's shown on the graph). In other words, I only get data for what the graph holds at the present moment.
Want: I want more than that - EVERYTHING. If it begins from 0s to 50s, I want all the points (10ms increments, which is done already) on the excel file.
Can you guys help me? How do I get suck that history out of the graph?
I attached my labview file (a really simple one), so you guys know where I am.
Thanks guys!
Solved!
Go to Solution.
Attachments:
Save to spreadsheet.vi ‏17 KB

If you are not in a hurry, another option is to save the data as a delimited text file. This will allow you to open it in almost any analysis program, since a delimited text file is the universal file type. A delimited text file is one in which data is stored in columns, separated by delimiters, and rows, separated by lines of text. The delimiter is usually a tab character (file extension .txt), but a comma is common in some industries (file extension .csv). Note that using a comma separator can get you into trouble if using European numbering styles, which use the comma instead of the period as the decimal indicator.
LabVIEW has several VIs that make this easy for you.
If you have a single set of homogeneous data and are only writing once (NOT in a loop), then use Write to Spreadsheet File.vi. This VI formats your data into rows and columns, opens the file, writes the data, then closes the file. Since it opens and closes the file, it is not suitable for use in a loop.
If you are writing homogeneous data in a loop, use the Array to Spreadsheet String function at each iteration to format your array of data to rows and columns, then write using either of the file write primitives.
If you have inhomogeneous data, such as a timestamp and a few doubles, format the data on a line by line basis and write to disk. The attached example, SImpleLowLevelWriteSpreadsheetFile.vi shows how to do this.
If you need more speed, you can buffer your data so the blocks of data you send to disk are more optimized. This is a bit more complex, but the attached example, BufferedLowLevelWriteSpreadsheetFile.vi shows how to do it. This will usually give you at least 2X and could be 10X or more speed improvement.
Have fun!
This account is no longer active. Contact ShadesOfGray for current posts and information.
Attachments:
SimpleLowLevelWriteSpreadsheetFile.vi ‏22 KB
BufferedLowLevelWriteSpreadsheetFile.vi ‏34 KB

How to get more than 1000 rec from Oracle?

Hi
i got this issue from 1 of my fnd.
can any one tell me how to over come this issue?
I need help in solving the issue
This is the oracle error coming when we try to export
the records to the excel sheet.
Macromedia][Oracle JDBC Driver][Oracle]ORA-01795:
maximum number of expressions in a list is 1000
This error is due to the limitation in oracle db list
query.
example:
select * from FEEDBACK_IN Where feedback_in.case_id
IN ( (param 1) , (param 2) , (param 3) , (param 4) ,
(param 5) , (param 6) , (param 7) , (param 8) , (param
9) , (param 10) , (param 11) , (param 12) , (param
13)……………………….(param
5000))
If the list exceeds 1000, we will get the following
error from the database. And there is a limitation in
oracle db to 1000.
We need to rewrite the query to avoid the list error
if the list exceeds more then 1000 records.

You must work with the guy who asked the same question
yesterday.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=6&threadid=1149324&ente rthread=y

How to export more than 64000 record from SqlDeveloper to Excell

Hi ,
my query retrive about 90,000 records and i should export those recodrs to Excell file , but when export finish i just found about 65,000 recodrs in Excell file , is there any way to export more than 65K to Excell file , or split the query result to two files ,
by the way i'm using Oracle 10G and SqlDeveloper Version 3.0.04 .
please help me ,

To handle the xls limit, SQLDeveloper will create one or more new sheets within the file for the additional rows. When you open your worksheet, you should see a tab at the bottom for each sheet created.
Joyce Scapicchio
SQLDeveloper Team

How to create more than one save point in session

Hi,
I'm using Jdev 12c.
I'm trying to use the SavePoint in ADF. When I try to use createSavepoint() function of SavePointManager to create savepoint I met a problem is only one row of savepoint is created in DB (table ADF uses to kept the savepoint in DB) and it overrides the old row whether how many times I uses createSavePoint() function. I want to when I call createSavePoint(), a new row of savepoint is created instead of overriding . Below is my code:
        ControllerContext controllerContext = ControllerContext.getInstance();
        String savePointId = null;
        if (controllerContext != null) {
            SavePointManager savePointManager =
                controllerContext.getSavePointManager();
            if (savePointManager != null) {
                //creating the save point
                savePointId = savePointManager.createSavePoint();
                //putting the save point id into session scope
                ADFContext.getCurrent().getSessionScope().put("savePointId",
                                                              savePointId);
Could anybody help me this problem?
Thank you very much.

Dear Frank,
Thank you so much for your answer. Beside the save point functionality to save the state and values on the screen, do you know other ways to do the same function? Once again, thank you so much.
Linh Nguyen.

Need Help, how to create more than one rectangle from one button in one stage of canvas

Similar Messages

Maybe you are looking for