hello, ZIM community day after day i became a huge fan of ZIM.
am making simple drag an drop app there is no need to fit all screen just in one bootstrap div but the elments of stage
appreciate any helpe
Thanks for the kind words! We love ZIM too ;-). Welcome to the forum!
For scaling ZIM to a div tag, we have posted a couple examples here https://zimjs.com/frame - see the two TAG examples. Do they help? I am not quite sure if you are having a problem with that - or what the problem is.
If you are on Firefox, type about:config into the browser bar and search for speech and make sure they are on. Otherwise... which browser/os are you using?
hi, dr.abstract i am on chrom,
i just copy paste an example from docx and i have this error in Speech class:
// let user pick a voice
const speech = new Speech();
// interact at least once before talking
new Button({label:"TALK"}).center().mov(0,-120).tap(()=>{
speech.talk("Hello World!", list?list.text:null);
});
let list;
speech.on("voiceschanged", ()=>{ // must wait for voices to be loaded
if (list) list.dispose(); // seems to run only once but just in case
list = new List(500,300,speech.voices,6).center().mov(0,120);
S.update();
});
Hmmm... that code works for us. Which version of ZIM are you using?
Does this work for you? It does for us...
yes, the example works, ZIM version is:
import ZIM from "https://zimjs.org/cdn/016/zim_game.js";
sorry i missed up,
on chrome its work but on opera doesn't
does ZIM support arabic?
So no voice on opera... okay. Interesting. It is a wrapper for the JS Speech API so whatever supports that, should work in ZIM. Using the Web Speech API - Web APIs | MDN - I see Opera is red X for speech on Android - but desktop is good for some and not for others.
Arabic should be good. @hmghaly helped us with an Arabic keyboard for instance and @amihanya and crew have been using rtl for many apps.
new Keyboard({label:label, layout:"arabic"}).show();
Ah... I see. Sorry, forgot to check if the was Arabic for speech. Is it supported in the JS Speech API?
yes, it is
That list that comes back, I think is based on your browser... so Chrome will have one set, Safari another, etc. We did not populate it in ZIM.
thanks dr.abstract but may i have another question:
on this book example:
i have svg imag with draggble circle
when i drag the circle, the page effected by dragging too, how to preventing this?
also here when i pick a color the page effected by clicking and moving
Use the radius parameter of the Book(). This is null be default and the whole book turns the pages. Set the radius to 100 and only the corner will do the pages - or whatever setting works best for you.
Hmmm... I have not colored an SVG - it will not have a color property. A couple possibilities...
use an SVG() with the bitmap:false so that it makes an SVGContainer - then the children will be ZIM objects like Blob, Circle, etc. and they have color properties - svg.getChildAt(1).color = red;
apply a svg.effect(new ColorEffect()) https://zimjs.com/docs.html?item=ColorEffect
I tried but do not get color the grey butterfly svg
var svg = new SVG({svg:"https://gist.githubusercontent.com/karelrosseel/fb3a364d1b7ba00922ba9746f9a80d7d/raw/be77742ad5f06acf3ee9767f59ac5564b0536f55/vlinder.svg", bitmap:false}).siz(500).centerReg();
svg.getChildAt(1).color = red;
actually its worked with me,
is there a way or method to get all the children at one
maybe the first child is another container or something... use zog() to figure it out.
container.loop(child=>{})
I tried but get only the child(0) for the .color it is de strokecolor changes to the selectedColor
BUT how to color the fill?
my code
F.color=white;
// var svg = new SVG({svg:"https://gist.githubusercontent.com/karelrosseel/fb3a364d1b7ba00922ba9746f9a80d7d/raw/be77742ad5f06acf3ee9767f59ac5564b0536f55/vlinder.svg", bitmap:false}).siz(500).centerReg();
var svg = `<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path style="stroke: rgb(0, 0, 0); fill: rgb(208, 76, 76);" d="M 108.343 111.303 C 125.408 104.999 138.796 87.994 154.112 78.555 C 160.873 74.388 167.177 69.006 176.252 68.682 C 190.083 68.188 196.421 93.107 199.099 106.423 C 199.847 110.139 200.617 113.867 201.858 117.451 C 202.053 118.014 203.82 123.583 204.69 123.486 C 248.379 118.634 289.271 115.239 332.868 124.231 C 343.47 126.418 355.155 127.701 365.182 131.943 C 396.342 145.127 411.995 178.635 426.904 207.165 C 430.561 214.16 434.257 221.663 434.508 229.705 C 434.592 232.39 434.233 235.927 433.986 235.927 C 433.557 235.927 433.046 241.738 431.936 242.372 C 431.111 242.843 428.208 239.612 427.724 239.205 C 423.69 235.809 419.439 232.719 415.089 229.742 C 402.834 221.354 390.399 213.183 378.749 203.961 C 375.517 201.401 368.106 193.727 363.058 194.535 C 356.423 195.596 356.64 212.977 356.163 217.82 C 354.098 238.779 346.87 255.788 341.329 275.829 C 340.891 277.409 339.803 292.891 337.266 294.159 C 334.825 295.379 327.711 293.938 325.19 294.084 C 313.068 294.79 300.874 295.259 288.775 296.283 C 284.492 296.645 280.227 297.203 275.954 297.661 C 274.294 297.839 272.642 298.057 270.997 298.332 C 270.206 298.463 268.111 298.004 268.611 298.63 C 270.258 300.687 266.384 298.939 266.114 298.22 C 265.246 295.905 265.843 292.683 266.04 290.359 C 266.529 284.558 267.093 268.561 266.934 267.446 C 266.785 266.404 267.556 264.11 266.524 264.316 C 265.195 264.582 265.406 267.493 264.698 267.856 C 264.264 268.078 262.619 271.264 260.859 274.115 C 256.345 281.425 250.376 289.111 243.565 295.239 C 240.271 298.202 233.236 296.974 229.513 296.618 C 219.875 295.695 199.868 293.417 196.751 292.482 C 193.457 291.494 189.056 292.31 186.613 289.055 C 182.64 283.758 187.043 270.411 187.694 265.62 C 188.377 260.594 189.016 255.566 189.632 250.531 C 190.205 245.857 190.806 241.187 191.459 236.523 C 191.794 234.125 192.167 231.735 192.465 229.332 C 192.795 226.677 195.533 207.779 193.173 206.01 C 191.647 204.866 193.143 199.048 191.757 197.366 C 189.216 194.282 183.882 192.212 179.681 190.772 C 171.273 187.89 153.141 184.887 145.316 192.709 C 134.131 203.89 131.702 224.469 128.209 239.094 C 125.019 252.445 123.246 268.079 110.355 273.034 C 105.755 274.803 99.026 267.534 95.633 265.546 C 94.557 264.915 90.564 263.402 90.564 261.783 C 90.564 255.897 104.364 238.099 101.895 235.927 C 101.52 235.597 103.101 233.732 102.156 233.207 C 99.627 231.803 94.333 236.213 92.838 237.454 C 89.624 240.123 81.025 249.006 80.613 248.743 C 80.105 248.42 76.345 252.716 75.134 252.543 C 72.75 252.203 72.17 248.827 70.586 248.035 C 62.401 243.944 65.442 228.447 70.4 219.869 C 80.129 203.038 92.739 181.358 108.231 169.014 C 114.382 164.113 121.239 159.208 127.799 154.782 C 129.424 153.685 133.359 151.987 133.911 151.093 C 134.368 150.355 136.724 151.03 136.371 150.236 C 135.657 148.631 138.643 145.721 140.173 146.585 C 140.892 146.992 143.798 143.387 143.229 142.301 C 136.72 129.879 103.537 124.079 112.517 106.124"></path>
</svg>`
var bear = new SVG({svg:svg, bitmap:false, showControls:false, interactive:false}).siz(500).reg(CENTER).center().drag();
//svg.showControls:false;
//svg.loop(child=>{zogg()})
const colorPicker = new ColorPicker().pos(10,10,LEFT,TOP);
bear.on("click", ()=>{colorPicker.show()});
colorPicker.change(()=>{
const selectedColor = colorPicker.selectedColor;
bear.getChildAt(0).color = selectedColor;
//bear.backgroundColor = selectedColor;
//colorPicker.hide();
});