Sylvain,
In https://silvyn.github.io/tw-minstyle/ create a new tiddler with the
below content
<style>
.myclass {
background-image: url(<$macrocall $name="datauri" title="$:/favicon.ico"
$output="text/plain"/>);
background-repeat: no-repeat;
height: 400px;
background-position:calc(100% - 20px) calc(100% - 20px);
border:1px dotted grey;
font-size:4em;
line-height: 4em;
font-weight:300;
text-align:center;
}
</style>
<div class="myclass">
Hello Sylvain!
</div>
1. Save tiddler and see how it looks!
2. Change the color of favicon from sidebar
3. close and reopen the tiddler of step 1
Works great! It seems datauri macro does not trigger a refresh when its
content is changed, but closing and reopening the tiddler shows the effect.
THis way you can use SVG images as element backgrounds (e.g tiddler
background) , create watermarks or put logos!
Best wishes
Mohammad
On Tue, Dec 22, 2020 at 2:22 AM Sylvain Naudin <[email protected]> wrote:
> FYI, I used a diversion and thought that maybe I could concatenate the SVG
> code by cutting it in 3 :
> - the beginning of SVG code
> - the part with the hexadecimal code
> - At the end of the SVG tag
>
> So thank Mohammad (and Eric) for this :
> https://kookma.github.io/TW-Scripts/#Concatenate%20Different%20Tiddlers%20in%20one%20Tiddler
>
> I can now set color with picker :D (see at
> https://silvyn.github.io/tw-minstyle/ under button "Plus d'options" in
> sidebar )
>
> 1. <$edit-text tiddler="$:/favicon.ico/temp2" field="text" type="color"
> tag="input"/>
> 2. <$button class="ms-outline-info">OK
> <$wikify name="out" text="""<$list
> filter="[tag[$:/favicon.ico]]"><$text text={{!!text}}/></$list>""">
> <$action-setfield $tiddler="$:/favicon.ico" type="image/svg+xml"
> text=<<out>> />
> </$wikify>
> </$button>
>
> I still wonder if it wouldn't be possible to do this with a single button
> with several actions inside, and above all cleaner.
>
> Sorry for the hijacking of this discussion, I'm done ;)
>
> Le jeudi 17 décembre 2020 à 11:50:31 UTC+1, Sylvain Naudin a écrit :
>
>> Hi Tones,
>>
>> It's not a problem for me, look at my attempt.
>> I just write the content when user want to change color via config
>> tiddler, so it's not an issue about loaded.
>>
>> For the moment with the simple macro I can do it, but it's hard coded.
>> I would like to make the choice of colour settings.
>> Ideally with a single button or drop-down list, but doing it in 2 steps
>> can satisfy me too.
>>
>> [image: Capture d’écran 2020-12-17 à 11.45.30.png]
>>
>> Do you see my goal ? I don't know how to use wikify output of
>> $:/n0d1/palettes/n0d1##favicon-color
>> and inject it in my macro.
>> I feel like it's all silly, but it has to be me :D
>>
>> Regards,
>> Sylvain
>>
>> Le jeudi 17 décembre 2020 à 00:50:35 UTC+1, TW Tones a écrit :
>>
>>> The main issue maybe is a $:/favicon which is loaded perhaps before any
>>> other logic is occurring.
>>>
>>> Are you trying to get the favicon icon to convey information according
>>> to its color? Nice Idea.
>>>
>>> Tones
>>>
>>> On Thursday, 17 December 2020 at 06:24:08 UTC+11 [email protected] wrote:
>>>
>>>> Hi Jeremy,
>>>>
>>>> Thanks but I don't worried about type field (because I use my existing
>>>> $:/favicon.ico tiddler, but you're right it's better to be add this).
>>>>
>>>> My concern is about to set color (in the example black) as variable,
>>>> and not hard coded in the macro.
>>>>
>>>> Do you have an idea ?
>>>>
>>>> Thanks :)
>>>>
>>>> Le mercredi 16 décembre 2020 à 18:39:17 UTC+1, Jeremy Ruston a écrit :
>>>>
>>>>> Hi Sylvain
>>>>>
>>>>> Just set the type field to indicate that it is an SVG image:
>>>>>
>>>>> <$button class="" tooltip="Color Favicon" aria-label='Color
>>>>> Favicon'>Add color to $:/favicon.ico
>>>>> <$action-setfield $tiddler="$:/favicon.ico" text=<<favi
>>>>> "black">> type="image/svg+xml"/>
>>>>> </$button>
>>>>>
>>>>> Best wishes
>>>>>
>>>>> Jeremy
>>>>>
>>>>> On 16 Dec 2020, at 17:18, Sylvain Naudin <[email protected]> wrote:
>>>>>
>>>>> \define favi(color)
>>>>> <svg xmlns="http://www.w3.org/2000/svg"; width="144.798"
>>>>> height="87.014" viewBox="0 0 38.311 23.022">
>>>>> <path d="M19.41.004L2.814.88A2.97 2.97 0 00.008
>>>>> 3.634l-.001.023a2.646 2.646 0 002.45 2.828l3.958.284A1.438 1.438 0 017.75
>>>>> 8.187l.138 11.97a2.866 2.866 0 002.66 2.824l.01.001a2.45 2.45 0
>>>>> 002.625-2.456L13.12 8.56a3.124 3.124 0 012.585-3.093l1.328-.233a1.419
>>>>> 1.419
>>>>> 0 011.65 1.2l2.03 14.453a1.401 1.401 0 002.396.777l3.76-3.905a1.694 1.694 >>>>> 0
>>>>> 012.595.186l3.31 4.606a1.13 1.13 0 002.027-.447l3.48-18.22a1.67 1.67 0
>>>>> 00-1.12-1.899l-1.274-.417a2.066 2.066 0 00-2.704 1.815l-.473
>>>>> 6.598a.882.882
>>>>> 0 01-1.621.414l-1.146-1.78a1.39 1.39 0 00-2.217-.159l-1.908 2.198a.97.97 0
>>>>> 01-1.673-.396l-2.13-8.34A2.551 2.551 0 0019.409.005z" fill="$color$" />
>>>>> </svg>
>>>>> \end
>>>>>
>>>>> <$button class="" tooltip="Color Favicon" aria-label='Color
>>>>> Favicon'>Add color to $:/favicon.ico
>>>>> <$action-setfield $tiddler="$:/favicon.ico" text=<<favi
>>>>> "black">> />
>>>>> </$button>
>>>>>
>>>>>
>>>>> --
> You received this message because you are subscribed to the Google Groups
> "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/e314131c-62cb-47e0-9cd5-d89db686e41an%40googlegroups.com
> <https://groups.google.com/d/msgid/tiddlywiki/e314131c-62cb-47e0-9cd5-d89db686e41an%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/CAAV1gMDLEaAcvrcm9ZrT-CQLcTQCexNaTY75TAkvwQKV%2BQ2Rxw%40mail.gmail.com.
