Forums | Mahara Community

Developers /
Ask for some advise about developing a file artefact plugin


anonymous profile picture
Account deleted
Posts: 3

01 April 2010, 7:39

  Hello, friends. I have some trouble developing a file artefact plugin, hope you can help me.


   It is a "picture mark"(or picture tag) artefact plugin. In my plan, one can drag an picmark-image artefact blocktype into his view, and when his friends visit that artefact, he can click on the picture to add small line boxes with a name to it. The name is also shown beside the picture, and once the mouse move to it, the line box will appear on the image again, to show that region in the picture is something with the name.


  The way I'm doing this is like this:(maybe not the offical way, but I have debugged a lot to come up with this way)

1.Copy [project root]/artefact/file/blocktype/image to [project root]/artefact/file/blocktype/picmark. Like this

 picmark2

2.Add items to the database. I've executed

insert into artefact_installed_type values('picmark','file');

insert into blocktype_installed values('picmark','200804200','1.0.0',1,'file');

3.Modify  [project root]/artefact/file/blocktype/picmark/lib.php. Rename the classname to PluginBlocktypePicmark. And some other changes from "image" to "picmark". Then the new block appear in the view editing page. Then change the "$element['filters']" in the method filebrowser_element() to "$element['filters'] = array(
     'artefacttype'    => array('picmark'),
);"

and add

$element['artefacttype_specialhint'] = 'picmark';

4. (In order to make the upload image the right type) add

if (isset($element['artefacttype_specialhint'])) {
        $data->artefacttype = 'picmark';
}

in the function pieform_element_filebrowser_upload() in [project root]/artefact/file/form/elements/filebrowser.php after the original

$data->title = ArtefactTypeFileBase::get_new_file_title($originalname, $parentfolder, $data->owner, $group, $institution);

 5.Copy the class ArtefactTypeImage to ArtefactTypePicmark in [project root]/artefact/file/lib.php. Then add

if ($data->artefacttype == 'picmark') {
       return new ArtefactTypePicmark(0, $data);
}

to new_file() method in ArtefactTypeFile class before

return new ArtefactTypeImage(0, $data);

6. Create a table 

                  CREATE TABLE `artefact_file_picmark` (                                        
                         `id` smallint(6) NOT NULL AUTO_INCREMENT,                                   
                         `artefactid` smallint(6) NOT NULL,                                          
                         `left` smallint(6) NOT NULL,                                                
                         `top` smallint(6) NOT NULL,                                                 
                         `weight` smallint(6) NOT NULL,                                              
                         `height` smallint(6) NOT NULL,                                              
                         `name` char(64) COLLATE utf8_unicode_ci NOT NULL,                           
                         `mark_userid` smallint(6) NOT NULL,                                         
                         `mark_date` date NOT NULL,                                                  
                         `verified` tinyint(4) NOT NULL DEFAULT '0',                                 
                         PRIMARY KEY (`id`)                                                          
                       )

add  some data to it. Then add protected $picmarkdata; property to ArtefactTypePicmark class, and add

$this->picmarkdata = get_records_array('artefact_file_picmark', 'artefactid', $this->id);

in its constructor to get the picture mark information about this picture from the database.

Then modify render_self() method in  to my designed html like this

picmark3

if the picture is not shown here is the code

    public function render_self($options) {
        $result['html'] = '<div class="fl filedata-icon"><div id="enclose-wrapper" style="position: relative;">
        <script language="javascript" src="'.get_config('wwwroot').'js/picmark/jquery.js"></script>
        <script language="javascript" src="'.get_config('wwwroot').'js/picmark/DragResize.js"></script>
        <script language="javascript" src="'.get_config('wwwroot').'js/picmark/picmark.js"></script>
        <img src="'
            . hsc(get_config('wwwroot') . 'artefact/file/picturemark.php?file='
            . $this->id . '&view='
            . (isset($options['viewid']) ? $options['viewid']  : 0)
            . '&maxwidth=800&maxheight=600')
            . '" alt="" id="photo">';
        $result['html'] .= '
        <div id="select-area-box">
        <div id="select-area"></div>
        <span class="north-west-resize"></span><span class="north-east-resize"></span>
        <span class="south-west-resize"></span><span class="south-east-resize"></span>
    </div>

    <div id="form-add-tag" style="display:none;">
    输入标签:<br />
    <input id="tag-name" name="tag-name" type="text"  /><br />
    <button id="btn-add-tag" type="button">确认</button>
    <button id="btn-cancel" type="button">取消</button>
    </div></div></div>';
        $result['html'] .= '<div>
    <ul id="tag-list">
    <li>照片中有</li>';
        foreach ($this->picmarkdata as $mark) {
            $result['html'] .= '
    <li><span onmouseover="photoTag.show('.$mark->left.','.$mark->top.','.$mark->weight.','.$mark->height.');"
     onmouseout="photoTag.hide();">'.$mark->name.'</span>
    <a href="javascript:;" onclick="photoTag.hide(); photoTag.remove(\'342\',this.parentNode);"
     onmouseover="photoTag.show('.$mark->left.','.$mark->top.','.$mark->weight.','.$mark->height.');"
     onmouseout="photoTag.hide();">x</a></li>';
        }
        $result['html'] .='
    </ul>
    </div>';
       
        return $result;
    }

 


 

 This is the way I'm doing. And the current appearance of the plugin is like this

picmark1

If the picture is not shown, I have to describe it  use words. I use javascript to handle the click event. When one click on the picture, a line box will appear on the picture, with an input box beside it and there is OK and CANCLE button below the input box. When one input a word and click on the OK button, a <li> tag will be added to the <ul> with id="tag-list" writen in render_self() and now appear beside the picture.


 I can now read the tag(or picmark) information from the database and show it beside the picture when one visit the artefac, but I don't know how to insert a tag information into the database. I can handle event in the OK button. I've tried to use ajax to post the tag data to the server but I have no idea which php file should I set in the url to post.

I can only think It must be a php file that within it I can use $USER so that I can figure out which user is doing picture tagging. I've debugged [project_root]/view/artefact.php, I know the feedback of the artefact is posted to it, but I can't find the way of post a tag information to it.

 So I need your help.

 

 

 

 

1 result