You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@openmeetings.apache.org by "Coscend@OM" <OM...@Coscend.com> on 2018/10/01 23:02:12 UTC
New Tool on Whiteboard
Dear Maxim,
We are seeking your expert guidance on the following feature development.
Perhaps your guiding concept might help other developers as well.
We would like to add another icon (hrtool) to the toolbar. Upon clicking
this icon, an image ($OM_CONTEXT/css/hrtool.png) should load on to the
whiteboard.
Unfortunately, in our code below, upon clicking, only the frame handle with
a rotating arc of the image appears, but not the hrtool.png. What could we
be missing in wb logic? Thank you.
----------------------------------------------------
HTML
<div wicket:message="title:HRtool-hr"
class="ui-widget-header clickable om-icon big hr" ></div>
[snipped]
css
.room.wb.area .tools {
data-image: url(path/to/hrtool/image/hrtool.png_placed_here)
}
JavaScript
var baseUrl = 'http://<IP:port>/om.dev/';
var Wb = function() {
...[snipped]
function initHRTool(wbArea, s) {
var imageUrl = s.data('image');
wbArea.find('.om-icon.hr').click(function() {
fabric.Image.fromURL(baseUrl+ imageUrl, function(myImg) {
var imgHr = myImg.set();
wb.eachCanvas(function(canvas) {
canvas.add(imgHr);
...[snipped]
}
...[snipped]
t.find('.om-icon.hr').click(function() {
var url = s.data('image');
fabric.Image.fromURL(url,
function(myImg) {
var imgHr2 = myImg.set();
wb.eachCanvas(function(canvas) {
canvas.add(imgHr2);
});
});
});
...[snipped]
initHRTool(t, s)
...[snipped]
}
Sincerely,
Hemant K. Sabat
<http://www.coscend.com/> www.Coscend.com
------------------------------------------------------------------
Real-time, Interactive Video Collaboration, Tele-healthcare, Tele-education,
Telepresence Services, on the fly.
------------------------------------------------------------------
CONFIDENTIALITY NOTICE: See 'Confidentiality Notice Regarding E-mail
Messages from Coscend Communications Solutions' posted at:
<http://www.coscend.com/Anchor/Common/Terms_and_Conditions.html>
http://www.Coscend.com/Anchor/Common/Terms_and_Conditions.html
---
This email has been checked for viruses by AVG.
https://www.avg.com
Re: New Tool on Whiteboard
Posted by Maxim Solodovnik <so...@gmail.com>.
Hello Hemant,
Unfortunately you code is very hard to read :(
have you tried to do what you like to at https://jsfiddle.net/ ?
Does it work?
According to your code:
This peace of code
wb.eachCanvas(function(canvas) {
canvas.add(imgHr2);
});
Will add object to *every* slide of your current WB, is it what you need?
Since you have frame, maybe your image URL is wrong?
It is also unclear why are you adding your image to all slides in
`initHRTool` method and in `click` method?
please make your code workable using jsfiddle and then double-check using
browser dev tools
On Tue, 2 Oct 2018 at 06:02, Coscend@OM <OM...@coscend.com> wrote:
> Dear Maxim,
>
>
>
> We are seeking your expert guidance on the following feature development.
> Perhaps your guiding concept might help other developers as well.
>
>
>
> We would like to add another icon (hrtool) to the toolbar. Upon clicking
> this icon, an image ($OM_CONTEXT/css/hrtool.png) should load on to the
> whiteboard.
>
>
>
> Unfortunately, in our code below, upon clicking, only the frame handle with
> a rotating arc of the image appears, but not the hrtool.png. What could we
> be missing in wb logic? Thank you.
>
>
>
> ----------------------------------------------------
>
> HTML
>
> <div wicket:message="title:HRtool-hr"
> class="ui-widget-header clickable om-icon big hr" ></div>
>
> [snipped]
>
>
>
> css
>
> .room.wb.area .tools {
>
> data-image: url(path/to/hrtool/image/hrtool.png_placed_here)
>
> }
>
>
>
> JavaScript
>
> var baseUrl = 'http://<IP:port>/om.dev/';
>
>
>
> var Wb = function() {
>
> ...[snipped]
>
>
>
> function initHRTool(wbArea, s) {
>
> var imageUrl = s.data('image');
>
> wbArea.find('.om-icon.hr').click(function() {
>
> fabric.Image.fromURL(baseUrl+ imageUrl, function(myImg) {
>
> var imgHr = myImg.set();
>
> wb.eachCanvas(function(canvas) {
>
> canvas.add(imgHr);
>
> ...[snipped]
>
> }
>
> ...[snipped]
>
>
>
>
> t.find('.om-icon.hr').click(function() {
>
> var url = s.data('image');
>
> fabric.Image.fromURL(url,
> function(myImg) {
>
> var imgHr2 = myImg.set();
>
>
> wb.eachCanvas(function(canvas) {
>
> canvas.add(imgHr2);
>
> });
>
> });
>
> });
>
> ...[snipped]
>
>
>
> initHRTool(t, s)
>
> ...[snipped]
>
> }
>
>
>
> Sincerely,
>
>
>
> Hemant K. Sabat
>
> <http://www.coscend.com/> www.Coscend.com
>
> ------------------------------------------------------------------
>
> Real-time, Interactive Video Collaboration, Tele-healthcare,
> Tele-education,
> Telepresence Services, on the fly.
>
> ------------------------------------------------------------------
>
> CONFIDENTIALITY NOTICE: See 'Confidentiality Notice Regarding E-mail
> Messages from Coscend Communications Solutions' posted at:
> <http://www.coscend.com/Anchor/Common/Terms_and_Conditions.html>
> http://www.Coscend.com/Anchor/Common/Terms_and_Conditions.html
>
>
>
>
>
>
>
> ---
> This email has been checked for viruses by AVG.
> https://www.avg.com
>
--
WBR
Maxim aka solomax