Cloud Development Kit

How do I set a white pen color in

Love the web product! I'm in need of a way to change the pen color in the canvas of the myscript-math-web element. Was able to change the background (overriding ms-capture-canvas*), but am struggling with how I can set the strokestyle of the pen/canvas. How can I set penparameters similar to textparameters ()? I tried the below to no avail, unfortunately.

 <myscript-math-web
hmackey=xyz ...
penparameters={strokestyle: 'white'>
 </myscript-math-web>

Greatly appreciate any other way to set the pen color (ideally with a little code/html/css sample snipped) around the myscript-math-web element, too.

Thanks!


Dear Reto,

many thanks for your question, which raised a lot of interest on our side.

Indeed, the myscript-math-web element did not allow such thing. We then did few changes to be able to set strokecolor and strokewidth in the sample.

To proceed:
-Be sure to update your dependencies in your bower file to 1.2.2 (we just released it) (this latter version is available on github https://github.com/MyScript/myscript-math-web)
-in your index.html file, you can add the two extra attributes strokecolor and strokewidth to the myscript-math-web component to control the stroke rendering as follows:

...
<template id="app" is="dom-bind">
<myscript-math-web
host="webdemoapi.myscript.com"
applicationkey="XXX"
hmackey="XXX"
 strokecolor="blue"
strokewidth=2
 >
</myscript-math-web>
</template>
...

Let us know if you have any other question.

Best regards,

Olivier

That's awesome! Thanks Olivier. Quick follow up question: when I set the pen color to white and use the below (*) way to insert a (largely) black background image (a photo of a part of a blackboard), then I see the pen while I write, but as soon as a I lift the pen, the trace disappears. Funny thing is that it's a function of the color of the pen. With green, red, yellow, and black (but now white!), I get a light color while writing and the remaining trace when I lift the pen remains as a darker shade of the writing.

How can I use a white pen with a dark (black) background image and see the trace after the pen is lifted. Happy to insert CSS to override defaults. I'm afraid suspect my CSS foo is not powerful enough - help appreciated!

Thanks again for the stroke* attributes. Worst case, I'll use yellow - but white(-ish) would be best.

-Reto

<style>
canvas[id^=ms-capture-canvas] {
height: 100%;
width: 100%;
z-index: 1;
top: 0;
right: 0;
background-image: url(img/blackboard680x203.png);
opacity: 0.8;
background-blend-mode: ;
}

Thanks for your feedback!
Could you please try to update your css by adding the lines below:

canvas[id^=ms-rendering-canvas] {
background-image: url(img/blackboard680x203.png);
opacity: 0.8;
}


Please let us know if it fits your needs.

Best regards

Alas, same behaviour with that addition (see below for full set). I think I'll stick to light green for a bit and see if there are any inspirations in the new year. Happy Holidays and thanks for your help!

- Reto

PS: do we have a complete dark background example that I can mimic somewhere?

<style>
canvas[id^=ms-capture-canvas] {
height: 100%;
width: 100%;
z-index: 1;
top: 0;
right: 0;
background-image: url(img/blackboard680x203.png);
opacity: 0.8;
}

canvas[id^=ms-rendering-canvas] {
background-image: url(img/blackboard680x203.png);
opacity: 0.8;
}

and

 <myscript-math-web id=mathpad touch-action=none style=width:680px; height:203px; v-on:success=onSuccess v-on:changed=onChanged v-on:error=onError hidebuttons=true hideresult=false applicationkey=... hmackey=... strokecolor=white strokewidth=4>
 </myscript-math-web>

Please find below an example with a image of a blackboard and white strokes.
index.html

<!doctype html>
<html>

<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Math very very simple sample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/myscript-math-web/myscript-math-web.html">

<style>
myscript-math-web {
height: 100vh;
width: 100vw;
}

canvas[id^=ms-rendering-canvas] {
background-image: url("http://www.publicdomainpictures.net/pictures/110000/velka/chalkboard-or-blackboard.jpg");
opacity: 0.8;
}
</style>
</head>

<body touch-action="none" unresolved>
<myscript-math-web id='text-input' strokecolor="white" protocol='REST' applicationkey='xxxxxxxxxxxx' hmackey='xxxxxxxxxxxxx'>
</myscript-math-web>

</body>

</html>


To do so, focus on ms-rendering-canvas style only as the component displays two canvas on top of each other. The capturing canvas need to be transparent to render captured strokes properly.
Additional remarks from our developer:
• Set touch-action=none on the parent element of myscript-math-web. This will help with cross browser compatibility.
• It seems you are using vue.js that is actually not yet fully compatible with webcomponents. Here is the workaround https://forum.vuejs.org/t/polymer-element-inside-a-vue-app-get-repeated-twice/4130. (TL;DR You have to wrap the custom element in a vue component.)

Merry Christmas!

Login or Signup to post a comment